/* Geometría — identidad del portal sobre el autodiagnóstico (ui-v2-ronda-3.md §7.3).
   Se carga después de site.css y de autodiagnostico/app.css (copia exacta del demo): reasigna los tokens del demo
   y devuelve al portal lo que las reglas globales del demo le quitan (listas, párrafos, enlaces). */

/* ---------- 1. tokens del demo → Geometría */
:root{ color-scheme: light; }                     /* el portal no tiene modo oscuro: anula light-dark() */
:root{
  --bg:#F5F3EF; --bg-elevated:#FFFFFF; --bg-sunken:#ECE9E3;
  --text:#22252B; --text-muted:#5C6068; --text-faint:#5C6068;      /* faint #6b6b73 no pasa AA sobre hueso */
  --border:#D9D5CD; --border-strong:#B9B4AA; --stroke:#7A7F88;     /* stroke 4.02 sobre blanco, 3.63 sobre hueso */
  --focus:#22252B; --shadow:none; --shadow-c:transparent;
  --font-sans:var(--g-ff); --font-serif:var(--g-ff); --font-mono:var(--g-ff);  /* Figtree en todo: sin serif ni monospace (cifras tabulares por font-variant) */
  --r-s:0; --r-m:0;                                                 /* radios 0 (regla del portal) */
  --st-verde-bg:#C8D9B5; --st-verde-line:#3E6E3A; --st-verde-ink:#335C30;
  --st-amar-bg:#F0D27A;  --st-amar-line:#8A6500;  --st-amar-ink:#6E5200;
  --st-rojo-bg:#F2C4C6;  --st-rojo-line:#A8323C;  --st-rojo-ink:#8A3A42;
  --st-rojo-on:#FFFFFF;
  --st-gris-bg:#ECE9E3;  --st-gris-line:#5C6068;  --st-gris-ink:#5C6068;
  --error:#A8323C;
  --backdrop:rgba(34,37,43,.55);
}

/* ---------- 2. el portal recupera su base (las reglas globales del demo son de selector de elemento) */
body{font:400 var(--g-fs-body)/1.6 var(--g-ff)}
:focus-visible{outline-offset:3px;border-radius:0}
a{text-decoration-color:currentColor}
#vista a{text-decoration-color:var(--border-strong)}
#vista a:hover{text-decoration-color:var(--text)}
:where(.g-header,.g-footer,.g-sibs,.g-crumbs,.g-mob,.g-bc,.g-pagehead) :is(ul,ol){margin:0;padding:0}
:where(.g-header,.g-footer,.g-sibs,.g-crumbs,.g-mob) li{margin-bottom:0}
:where(.g-header,.g-footer,.g-pagehead,.g-bc,.g-mob) p{max-width:none}
.g-foot__col li{margin-bottom:2px}
.g-bc h2{font-size:var(--g-fs-h2);line-height:1.15;letter-spacing:-.015em;margin:0}
.g-pagehead__in p{margin-bottom:0}

/* ---------- 3. cabecera de página: normal en inicio/resultado, reducida en pregunta/áreas (§7.2) */
.g-pagehead__h{font-size:var(--g-fs-h1);font-weight:700;line-height:1.08;letter-spacing:-.022em;max-width:18ch;margin:0 auto;text-wrap:balance}
body:is([data-ad-vista="pregunta"],[data-ad-vista="areas"]) .g-pagehead{min-height:0;padding:20px 0}
body:is([data-ad-vista="pregunta"],[data-ad-vista="areas"]) .g-pagehead .g-red,
body:is([data-ad-vista="pregunta"],[data-ad-vista="areas"]) .g-pagehead__chipwrap,
body:is([data-ad-vista="pregunta"],[data-ad-vista="areas"]) .g-pagehead__sub,
body:is([data-ad-vista="pregunta"],[data-ad-vista="areas"]) .g-crumbs{display:none}
body:is([data-ad-vista="pregunta"],[data-ad-vista="areas"]) .g-pagehead__in{padding-bottom:0}
body:is([data-ad-vista="pregunta"],[data-ad-vista="areas"]) .g-pagehead__h{font-size:var(--g-fs-h3);line-height:1.25;max-width:none}
/* inicio: el título ya se ve en la cabecera; el h1 del demo sigue siendo el h1 accesible y destino de foco */
body[data-ad-vista="inicio"] #s-inicio>h1{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- 4. barra de la herramienta: la .app-head del demo pasa a barra hueso fija bajo el menú */
.app-head{position:sticky;top:var(--g-bar);z-index:10;background:var(--g-hueso);border-bottom:1px solid var(--g-linea);padding-top:0}
.app-bar{min-height:56px}
.marca-app{font-size:var(--g-fs-sm);font-weight:700;color:var(--g-carbon)}
.saltar{display:none}
.wrap{max-width:1312px;padding-inline:var(--g-margin)}
@media (min-width:760px){.wrap{padding:0 var(--g-margin)}}
.app-main{background:var(--g-hueso)}
.app-main:focus{outline:none}
/* el motor enfoca el título de cada pantalla: que no quede debajo del menú + la barra fija */
html{scroll-padding-top:calc(var(--g-bar) + 56px + 16px)}
.area{scroll-margin-top:calc(var(--g-bar) + 56px + 16px)}

/* ---------- 5. componentes del demo */
.btn{border-radius:999px;font:700 var(--g-fs-sm)/1.25 var(--g-ff);min-height:48px}
.btn-chico{min-height:44px}
.btn-pri{background:var(--g-tinta);color:#fff;border-color:var(--g-tinta)}
.btn-pri:hover{background:#22307A;border-color:#22307A}
.btn-sec{background:transparent;border-color:transparent;box-shadow:inset 0 0 0 1.5px var(--g-carbon);color:var(--g-carbon)}
.btn-sec:hover{background:var(--g-carbon);color:#fff}
.btn-borrar{background:transparent;border-color:var(--error);color:var(--error)}
.btn-borrar:hover{background:var(--st-rojo-bg)}
#vista h1,#vista h2,#vista h3,#vista h4{font-family:var(--g-ff);font-weight:700}
#vista h1{font-size:var(--g-fs-h2);line-height:1.15;letter-spacing:-.015em}
#vista .q-texto,#vista .q-texto h1{font-size:var(--g-fs-h3);line-height:1.25}
#vista h2{font-size:21px}
#vista h3{font-size:18px}
#vista .area-head h3{font-size:19px}
#vista .bloq-titulo h2,#vista .fecha-limite h2,#vista .conteo-caja h2{font-size:15px}
#vista .fecha-limite h2,#vista .conteo-caja h2{font-size:13px}
.opcion{background:#fff;border-radius:0;border:1.5px solid var(--stroke)}
.opcion:hover{background:var(--bg-sunken)}
.opcion:has(input:checked){border:2px solid var(--g-carbon);box-shadow:none;background:var(--g-lavanda);font-weight:700}
.barra,.tramos li{border-radius:0}
.area{background:#fff;border-radius:0}
.bloq{border-radius:0;border-left-width:4px}           /* conserva estilo y color del demo (discontinuo = con trámite) */
.dlg{border-radius:0;box-shadow:none;border:1px solid var(--g-linea)}
.puntos li,.continuar,.aviso,.fecha-limite,.conteo a,.etq-bp,.etq-ref,.por-confirmar,.grupo-na,.grupo-na>summary,.error-campo,.num-campo input{border-radius:0}
.res-contacto{display:none}                         /* lo reemplaza el bloque de contacto del portal (§7.4) */

/* ---------- 6. contacto al terminar (§7.4) */
@media print{.g-ad-cta,.app-head,.g-pagehead,.g-crumbs{display:none!important}}

/* ---------- 7. selector de idioma: EN sin enlace en esta página */
.g-lang__off{color:var(--g-texto-2-osc);cursor:default}
