/* CMO Design System 0.2.0 · tema «Estratos» de CMO-VIH Pro
   Se carga después de styles.css. Solo presentación: no altera textos, puntuaciones,
   insignias de origen (.badge--*) ni colores de estado (--success/--warning/--danger).
   Tokens: assets/cmo-ds/ (copia fijada, ver CMO-DS-VERSION.json). */
:root { --cmo-accent: #b02a4a; } /* submarca VIH: solo identidad, nunca resultados */

.hero, .progress-card, .section-card, .dashboard-section, .foundation-shell { border-color: var(--cmo-rule); border-radius: var(--cmo-radius-md); box-shadow: var(--cmo-shadow-1); }
.hero { position: relative; background: var(--cmo-surface); color: var(--cmo-ink); padding-top: 32px; }
.hero > div:first-child::before { /* franja de estratos C·M·O (decorativa) */
  content: ""; display: block; width: 160px; height: 4px; margin-bottom: var(--cmo-space-4);
  background: linear-gradient(90deg, var(--cmo-c) 0 50%, transparent 50% 52%, var(--cmo-m) 52% 80%, transparent 80% 82%, var(--cmo-o) 82%);
}
.hero h1 { font: 600 clamp(1.9rem, 4vw, 2.8rem)/1.1 var(--cmo-font-serif); letter-spacing: -.015em; color: var(--cmo-ink); }
.hero__subtitle { color: var(--cmo-ink-muted); }
.hero .eyebrow, .eyebrow { color: var(--cmo-accent); opacity: 1; font-weight: 700; }
.version-pill, .autosave-pill, .case-pill { background: var(--cmo-surface-sunk); color: var(--cmo-ink); }

button { border-radius: var(--cmo-radius-sm); min-height: 44px; }
button:hover { opacity: 1; }
.button-primary:hover { background: var(--cmo-ink); }
.button-secondary { background: var(--cmo-surface); color: var(--cmo-brand-strong); border: 1px solid var(--cmo-brand-strong); }
.button-secondary:hover { background: var(--cmo-brand-soft); }
.button-ghost { border-color: var(--cmo-control-border); }
.button-ghost:hover { background: var(--cmo-surface-sunk); }
textarea, select, input { border-color: var(--cmo-control-border); border-radius: var(--cmo-radius-sm); color: var(--cmo-ink); }
:is(button, input, select, textarea, summary, a):focus-visible { outline: 3px solid var(--cmo-focus); outline-offset: 2px; }

.wizard-step { border-radius: var(--cmo-radius-sm); }
.wizard-step.is-active { background: var(--cmo-ink); }
.wizard-step:not(:disabled):not(.is-active):hover { background: var(--cmo-brand-soft); color: var(--cmo-ink); }
.progress-bar span { background: var(--cmo-brand-strong); }
.metric-card, .panel-card, .field-card, .ai-item { border-radius: var(--cmo-radius-md); }
.metric-card--accent { background: var(--cmo-ink); }
.metric-card strong { font-variant-numeric: tabular-nums; }
details.section-card summary { font-family: var(--cmo-font-serif); font-weight: 600; }

.cmo-app-footer { max-width: 1540px; margin: 0 auto; padding: 0 24px var(--cmo-space-7); font-size: var(--cmo-text-sm); color: var(--cmo-ink-muted); }
.cmo-app-footer a { color: var(--cmo-brand-strong); }
@media print { .hero > div:first-child::before { display: none; } .cmo-app-footer { padding-bottom: 0; } }
/* Aviso de privacidad: fondo opaco y tono de advertencia del sistema (5,6:1); el fondo translúcido original
   bajaba a 4,18:1 sobre el nuevo color de papel */
.privacy-banner { background: var(--cmo-warn-bg); color: var(--cmo-warn); border-radius: var(--cmo-radius-sm); }
.privacy-banner > span { color: var(--cmo-warn); }
/* Tarjeta de nivel CMO (fondo tinta): texto secundario claro para mantener ≥4,5:1 */
.metric-card--accent small, .metric-card--accent .metric-card__label { color: #e4e8f2; }
/* Insignias de origen del dato: mismo tono por estado, fondos opacos (≥6,2:1). Corrige un contraste
   previo insuficiente de .badge--confirmed sobre las tarjetas de contribución. */
.badge--confirmed { background: #e3f1ef; color: #0b5e57; }
.badge--extracted { background: #e5ebfb; color: #1e40af; }
.badge--inferred { background: #fbeee0; color: #8a4106; }
.badge--absent { background: #e3f3e8; color: #166534; }
.badge--review { background: #fbe9df; color: #9a3412; }
.badge--missing { background: #eceef1; color: #4b5568; }
/* Botón principal sólido de marca (sin el degradado heredado) */
.button-primary, button:not([class]) { background: var(--cmo-brand-strong); }
.button-primary:hover, button:not([class]):hover { background: var(--cmo-ink); }