/* =====================================================================
   Autodiagnóstico EUDR café y cacao (demo) — app.css
   Base: sistema del sitio Proyecto Morisco (assets/site.css). Ver UI-SPEC.md.
   Regla: todo color vive en :root. Fuera de :root solo var(), currentColor,
   transparent y "black" dentro de los data-URI de íconos (máscaras).
   ===================================================================== */

/* ============ 1. TOKENS ============ */
:root{
  color-scheme: light dark;

  /* — heredados del sitio (mismos valores) — */
  --bg:            light-dark(#ffffff, #0a0a0b);
  --bg-elevated:   light-dark(#ffffff, #131316);
  --bg-sunken:     light-dark(#f4f4f5, #1c1c20);
  --text:          light-dark(#18181b, #f1f1f3);
  --text-muted:    light-dark(#52525b, #a8a8ae);
  --text-faint:    light-dark(#6b6b73, #8e8e96);
  --border:        light-dark(#e4e4e7, #2a2a30);
  --border-strong: light-dark(#c6c6cc, #3d3d44);
  --stroke:        var(--text-faint);            /* bordes con significado: campos, tramos (≥3:1) */
  --focus:         var(--text);
  --shadow-c:      light-dark(rgba(0,0,0,.08), rgba(0,0,0,.4));
  --shadow:        0 1px 2px var(--shadow-c), 0 2px 8px var(--shadow-c);

  /* — nuevos: semáforo (solo pantalla de resultado) —
     -ink  = texto e ícono (≥4.5:1 sobre bg, elevated, sunken y su propio -bg)
     -bg   = fondo de banda (decorativo; el sentido lo dan ícono + texto + borde)
     -line = borde de tarjeta/bloque (≥3:1 sobre bg y sobre -bg)            */
  --st-rojo-ink:   light-dark(#b91c1c, #fca5a5);
  --st-rojo-bg:    light-dark(#fdeded, #3b1215);
  --st-rojo-line:  light-dark(#b91c1c, #f87171);
  --st-amar-ink:   light-dark(#7c4a03, #fcd34d);
  --st-amar-bg:    light-dark(#fdf3c4, #33270a);
  --st-amar-line:  light-dark(#a16207, #eab308);
  --st-verde-ink:  light-dark(#166534, #86efac);
  --st-verde-bg:   light-dark(#e6f4ea, #0f2c1a);
  --st-verde-line: light-dark(#15803d, #22c55e);
  --st-gris-ink:   var(--text-muted);
  --st-gris-bg:    var(--bg-sunken);
  --st-gris-line:  var(--text-faint);
  --st-rojo-on:    var(--bg);                    /* texto sobre banda roja sólida (6.5:1 / 10.4:1) */

  /* — nuevos: interfaz — */
  --error:         var(--st-rojo-ink);           /* validación de campos y error de carga */
  --backdrop:      light-dark(rgba(24,24,27,.55), rgba(0,0,0,.7));

  --font-sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --r-s:8px; --r-m:12px;
  --col:640px;          /* columna de lectura de la pregunta */
  --side:264px;         /* índice lateral en escritorio */
  --tap:48px;           /* alto mínimo de control */
  --z-saltar:10;        /* única capa propia; <dialog> usa la top layer nativa */

  /* — íconos (máscaras, se pintan con currentColor) — */
  /* heredados */
  --ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --ico-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4M12 17h.01M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z'/%3E%3C/svg%3E");
  --ico-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  --ico-half:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 3a9 9 0 0 1 0 18z' fill='black'/%3E%3C/svg%3E");
  --ico-chev:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  --ico-x:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
  /* semáforo: rojo = familia octágono; amarillo = triángulo; verde = círculo; gris = círculo discontinuo */
  --ico-sin:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M8 1.5h8L22.5 8v8L16 22.5H8L1.5 16V8zM6 10.5h12v3H6z'/%3E%3C/svg%3E");
  --ico-con:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2h8l6 6v8l-6 6H8l-6-6V8z'/%3E%3Cpath d='M7 12h9M12.5 8.5 16 12l-3.5 3.5'/%3E%3C/svg%3E");
  --ico-rojo:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2h8l6 6v8l-6 6H8l-6-6V8z'/%3E%3Cpath d='M12 7v6M12 16.5h.01' stroke-width='2.8'/%3E%3C/svg%3E");
  --ico-amar:  var(--ico-alert);
  --ico-verde: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m7.5 12.5 3 3 6-6.5'/%3E%3C/svg%3E");
  --ico-gris:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5' stroke-dasharray='3.2 2.8'/%3E%3Cpath d='M8 12h8' stroke-width='2.8'/%3E%3C/svg%3E");
  /* etiquetas y avisos */
  --ico-duda:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M9.4 9.3a2.7 2.7 0 1 1 3.8 2.5c-.7.3-1.2.9-1.2 1.7v.3M12 17h.01' stroke-width='2.6'/%3E%3C/svg%3E");
  --ico-hoja:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 19.5C4.5 10.5 10 4.5 19.5 4.5c0 9.5-6 15-15 15zM4.5 19.5l8.5-8.5'/%3E%3C/svg%3E");
  --ico-info:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 11v6M12 7.5h.01' stroke-width='2.8'/%3E%3C/svg%3E");
  --ico-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7v6M12 16.5h.01' stroke-width='2.8'/%3E%3C/svg%3E");
  --ico-ext:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E");
  /* índice de áreas */
  --ico-dot:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='7' fill='black'/%3E%3C/svg%3E");
  --ico-ring:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3C/svg%3E");
}
:root[data-theme="light"]{color-scheme:light;}
:root[data-theme="dark"]{color-scheme:dark;}

/* ============ 2. BASE ============ */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;min-height:100dvh;background:var(--bg);color:var(--text);font:16px/1.6 var(--font-sans);-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:var(--font-serif);font-weight:700;line-height:1.2;margin:0 0 var(--s2);text-wrap:balance;}
h1{font-size:clamp(28px,5vw,38px);}
h2{font-size:21px;}
h3{font-size:18px;}
h4{font-size:15px;}
p{margin:0 0 var(--s3);text-wrap:pretty;max-width:46rem;}
ul,ol{margin:0 0 var(--s3);padding-left:1.25em;}
li{margin-bottom:var(--s1);}
a{color:var(--text);text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:2px;}
a:hover{text-decoration-color:var(--text);}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px;}
[tabindex="-1"]:focus{outline:none;}                 /* encabezado que recibe foco al cambiar de pantalla */
[tabindex="-1"]:focus-visible{outline:2px solid var(--focus);outline-offset:4px;}
code,.mono,time{font-family:var(--font-mono);}
.tnum,.mono,time,input{font-variant-numeric:tabular-nums;}
::selection{background:var(--border-strong);}
[hidden]{display:none !important;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.saltar{position:absolute;left:var(--s2);top:-100px;z-index:var(--z-saltar);background:var(--text);color:var(--bg);padding:var(--s2) var(--s3);border-radius:var(--r-s);}
.saltar:focus{top:var(--s2);}
.kicker{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);margin:0 0 var(--s1);}
/* ícono genérico: <span class="ico" style="--i:var(--ico-x)" aria-hidden="true"> */
.ico{display:inline-block;width:16px;height:16px;flex:0 0 auto;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;}
.solo-print{display:none;}

/* ============ 3. LAYOUT ============ */
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--s4);}
@media (min-width:760px){.wrap{padding:0 var(--s5);}}
.app-head{border-bottom:1px solid var(--border);padding-top:env(safe-area-inset-top);}
.app-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:56px;}
.marca-app{font-weight:700;font-size:15px;line-height:1.25;text-decoration:none;color:var(--text);min-width:0;}
.marca-app .largo{display:none;}
.btn-areas{flex:0 0 auto;}
.app-main{padding:var(--s5) 0 calc(var(--s7) + env(safe-area-inset-bottom));}
.col{max-width:var(--col);margin:0 auto;}
.app-grid > .areas-lado{display:none;}
.estado-guardado{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s5);font-size:13px;color:var(--text-faint);}
.estado-guardado .ico{width:13px;height:13px;--i:var(--ico-check);}
.estado-guardado.no{color:var(--text-muted);}
.estado-guardado.no .ico{--i:var(--ico-info);}
@media (min-width:600px){.marca-app .corto{display:none;}.marca-app .largo{display:inline;}}
@media (min-width:1024px){
  .app-grid{display:grid;grid-template-columns:var(--side) minmax(0,var(--col));column-gap:var(--s7);align-items:start;justify-content:center;}
  .app-grid > .areas-lado{display:block;position:sticky;top:var(--s4);}
  .app-grid .col{margin:0;}
  .btn-areas{display:none;}
}

/* ============ 4. BOTONES ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--tap);padding:0 var(--s5);border:1.5px solid transparent;border-radius:var(--r-s);font:600 16px/1.2 var(--font-sans);text-align:center;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.btn-pri{background:var(--text);color:var(--bg);border-color:var(--text);}
.btn-pri:hover{background:var(--text-muted);border-color:var(--text-muted);}
.btn-sec{background:transparent;color:var(--text);border-color:var(--stroke);}
.btn-sec:hover{background:var(--bg-sunken);}
.btn-borrar{background:transparent;color:var(--error);border-color:var(--error);}
.btn-borrar:hover{background:var(--st-rojo-bg);}
.btn-chico{min-height:44px;padding:0 var(--s3);font-size:14px;}
.btn .ico{width:16px;height:16px;}
.btn:focus-visible{outline-offset:3px;}
/* grupo de acciones de una pantalla: móvil apilado y ancho; ≥600 en fila */
.acciones{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s5);}
.acciones .btn{width:100%;}
@media (min-width:600px){
  .acciones{flex-direction:row;flex-wrap:wrap;align-items:center;}
  .acciones .btn{width:auto;}
  /* solo navegación de pregunta. DOM: Siguiente, Atrás, Pendiente → visual: Atrás · Pendiente ······ Siguiente */
  .q-nav .btn-pri{order:3;margin-left:auto;}
  .q-nav .btn-atras{order:1;}
  .q-nav .btn-pend{order:2;}
}
/* enlace a otra pestaña */
.ext{display:inline-flex;align-items:center;gap:var(--s1);}
.ext::after{content:"";width:13px;height:13px;background:currentColor;-webkit-mask:var(--ico-ext) center/contain no-repeat;mask:var(--ico-ext) center/contain no-repeat;}

/* ============ 5. INICIO (S1 / S1-C) ============ */
.inicio h1{margin-bottom:var(--s3);}
.lede{font-size:18px;color:var(--text-muted);}
.puntos{list-style:none;padding:0;margin:var(--s5) 0;display:grid;gap:var(--s3);}
.puntos li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:var(--s3);margin:0;padding:var(--s3) var(--s4);background:var(--bg-sunken);border-radius:var(--r-s);font-size:15px;}
.puntos .ico{width:18px;height:18px;margin-top:3px;color:var(--text-muted);}
@media (min-width:760px){.puntos{grid-template-columns:1fr 1fr;}}
.obtiene{font-size:15px;}
.continuar{border:1.5px solid var(--stroke);border-radius:var(--r-m);padding:var(--s4);margin:var(--s5) 0 0;}
.continuar h2{font-size:18px;margin-bottom:var(--s1);}
.continuar p{font-size:14px;color:var(--text-muted);margin:0;}
.continuar .acciones{margin-top:var(--s4);}
.linea-fuentes{margin-top:var(--s6);font-size:12.5px;color:var(--text-faint);}

/* ============ 6. CABECERA DE PREGUNTA Y AVANCE ============ */
.q-head{padding-bottom:var(--s4);margin-bottom:var(--s5);border-bottom:1px solid var(--border);}
.q-area{font-size:14px;font-weight:700;margin:0;}
.q-area .num{font-family:var(--font-mono);font-weight:700;color:var(--text-muted);}
.q-sub{display:flex;justify-content:space-between;gap:var(--s3);font-size:13px;color:var(--text-muted);margin:var(--s3) 0 var(--s1);}
.q-sub .tnum{font-family:var(--font-mono);}
.q-nota-total{font-size:12.5px;color:var(--text-faint);margin:var(--s1) 0 0;}
/* barra continua (pregunta X de Y en esta área): role="progressbar" con --p entre 0 y 1 */
.barra{position:relative;height:8px;border-radius:999px;background:var(--bg-sunken);box-shadow:inset 0 0 0 1px var(--stroke);overflow:hidden;}
.barra > span{position:absolute;inset:0;background:var(--text);transform-origin:left center;transform:scaleX(var(--p,0));}
/* 12 tramos (avance total por área). Decorativo: aria-hidden; el texto y el índice informan */
.tramos{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px;align-items:center;list-style:none;margin:0;padding:0;}
.tramos li{position:relative;height:10px;margin:0;border:1.5px solid var(--stroke);border-radius:3px;overflow:hidden;background:var(--bg);}
.tramos li::before{content:"";position:absolute;inset:0;background:var(--text);transform-origin:left center;transform:scaleX(var(--p,0));}
.tramos [data-estado="completa"]{border-color:var(--text);}
.tramos [data-estado="completa"]::before{transform:none;}
.tramos [data-estado="actual"]{height:16px;border:2px solid var(--text);}           /* más alto: se ve sin color */
.tramos [data-estado="pendientes"]{border-style:dashed;}
.tramos [data-estado="no-alcanzada"]::before{display:none;}

/* ============ 7. PREGUNTA (S2) ============ */
.q-form{margin:0;}
.q-form fieldset{margin:0;padding:0;border:0;min-width:0;}
.etq-bp{display:inline-flex;align-items:flex-start;gap:6px;max-width:100%;padding:3px var(--s2);margin:0 0 var(--s3);border:1px solid var(--stroke);border-radius:4px;font-size:12.5px;font-weight:600;line-height:1.35;color:var(--text-muted);background:var(--bg-elevated);}
.etq-bp::before{content:"";width:13px;height:13px;margin-top:1px;flex:0 0 auto;background:currentColor;-webkit-mask:var(--ico-hoja) center/contain no-repeat;mask:var(--ico-hoja) center/contain no-repeat;}
/* legend / label con aspecto de h1 (el h1 real va dentro del legend) */
.q-texto{display:block;float:none;width:100%;padding:0;margin:0 0 var(--s3);font:700 clamp(22px,4.6vw,27px)/1.25 var(--font-serif);text-wrap:balance;overflow-wrap:break-word;}
.q-texto h1{font:inherit;margin:0;}
.q-ayuda{font-size:15px;color:var(--text-muted);margin:0 0 var(--s4);padding-left:var(--s3);border-left:2px solid var(--border-strong);}
/* opciones: toda la fila es <label> */
.opciones{display:grid;gap:var(--s2);margin:0;padding:0;list-style:none;}
.opcion{display:grid;grid-template-columns:24px minmax(0,1fr);gap:var(--s3);align-items:start;min-height:var(--tap);padding:var(--s3) var(--s4);border:1.5px solid var(--stroke);border-radius:var(--r-s);background:var(--bg-elevated);font-size:16px;line-height:1.4;cursor:pointer;overflow-wrap:break-word;-webkit-tap-highlight-color:transparent;}
.opcion:hover{background:var(--bg-sunken);}
.opcion input{width:22px;height:22px;margin:0;accent-color:var(--text);cursor:pointer;}
.opcion:has(input:checked){border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text);background:var(--bg-sunken);font-weight:600;}
.opcion:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px;}
.opcion input:focus-visible{outline:none;}
/* número */
.num-campo{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s3);}
.num-campo input{width:12ch;height:var(--tap);padding:0 var(--s3);border:1.5px solid var(--stroke);border-radius:var(--r-s);background:var(--bg);color:var(--text);font:600 18px var(--font-mono);}
.num-campo input:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--text);}
.num-unidad{font-size:16px;color:var(--text-muted);}
/* error de validación: borde + ícono + texto, nunca solo color */
.error-campo{display:flex;gap:var(--s2);align-items:flex-start;margin:var(--s3) 0 0;padding:var(--s2) var(--s3);border-left:3px solid var(--error);background:var(--st-rojo-bg);border-radius:0 var(--r-s) var(--r-s) 0;color:var(--error);font-size:15px;font-weight:600;line-height:1.4;}
.error-campo::before{content:"";width:18px;height:18px;margin-top:1px;flex:0 0 auto;background:currentColor;-webkit-mask:var(--ico-error) center/contain no-repeat;mask:var(--ico-error) center/contain no-repeat;}
.con-error .opcion{border-color:var(--error);}
.num-campo input[aria-invalid="true"]{border-color:var(--error);border-width:2px;}

/* ============ 8. ÍNDICE DE ÁREAS (S3) ============ */
.areas-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s2);}
.areas-head h1,.areas-head h2{font-size:21px;margin:0;}
.areas-total{font-size:13px;color:var(--text-muted);margin:0 0 var(--s3);}
.areas-lista{list-style:none;margin:0 0 var(--s4);padding:0;border-top:1px solid var(--border);}
.areas-lista li{margin:0;border-bottom:1px solid var(--border);}
.area-fila{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:var(--s3);align-items:center;min-height:var(--tap);padding:var(--s2) var(--s3);color:var(--text);text-decoration:none;font-size:15px;line-height:1.3;}
a.area-fila:hover{background:var(--bg-sunken);}
a.area-fila::after{content:"";grid-column:4;width:12px;height:12px;background:currentColor;-webkit-mask:var(--ico-chev) center/contain no-repeat;mask:var(--ico-chev) center/contain no-repeat;color:var(--text-faint);}
a.area-fila{grid-template-columns:18px minmax(0,1fr) auto 12px;}
.area-fila .ico{width:16px;height:16px;}
.area-fila .cuenta{font:13px var(--font-mono);color:var(--text-muted);white-space:nowrap;}
.area-fila[data-estado="completa"] .ico{--i:var(--ico-check);}
.area-fila[data-estado="actual"]{background:var(--bg-sunken);box-shadow:inset 3px 0 0 var(--text);font-weight:700;}
.area-fila[data-estado="actual"] .ico{--i:var(--ico-dot);}
.area-fila[data-estado="pendientes"] .ico{--i:var(--ico-half);}
.area-fila[data-estado="no-alcanzada"]{color:var(--text-muted);cursor:default;}
.area-fila[data-estado="no-alcanzada"] .ico{--i:var(--ico-ring);color:var(--text-faint);}
.areas .acciones{margin-top:var(--s4);}
@media (min-width:1024px){
  .areas-lado .area-fila{padding:var(--s2);font-size:14px;}
  .areas-lado .acciones{flex-direction:column;align-items:stretch;}
  .areas-lado .acciones .btn{width:100%;}
}

/* ============ 9. DIÁLOGOS (D1 / D2) ============ */
.dlg{width:min(100% - 2 * var(--s4), 460px);max-height:calc(100dvh - 2 * var(--s4));padding:var(--s5);border:1px solid var(--border-strong);border-radius:var(--r-m);background:var(--bg-elevated);color:var(--text);box-shadow:var(--shadow);overflow-wrap:break-word;}
.dlg::backdrop{background:var(--backdrop);}
.dlg h2{font-size:20px;margin-bottom:var(--s3);}
.dlg p{font-size:15px;margin-bottom:var(--s2);}
.dlg .acciones{margin-top:var(--s5);}
@media (min-width:600px){.dlg .acciones{justify-content:flex-end;}}  /* DOM: Cancelar, Confirmar */
@media (prefers-reduced-motion:no-preference){
  .dlg[open]{animation:dlg-in .15s ease-out;}
  @keyframes dlg-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
}

/* ============ 10. RESULTADO (S4) ============ */
.res-head{padding-bottom:var(--s4);margin-bottom:var(--s5);border-bottom:1px solid var(--border);}
.res-head h1{margin-bottom:var(--s2);}
.res-perfil{font-size:15px;color:var(--text-muted);margin:0;}
.res-perfil time{color:var(--text);}
.res-head .acciones{margin-top:var(--s4);}
@media (min-width:1024px){
  .res-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s2) var(--s5);align-items:end;}
  .res-head .acciones{margin:0;flex-wrap:nowrap;}
}
/* avisos neutros (destino no_ue / no_se, redirección, actualización) */
.aviso{display:grid;grid-template-columns:20px minmax(0,1fr);gap:var(--s3);padding:var(--s3) var(--s4);margin:0 0 var(--s5);border:1.5px solid var(--stroke);border-radius:var(--r-m);background:var(--bg-sunken);font-size:15px;}
.aviso::before{content:"";width:20px;height:20px;margin-top:2px;background:currentColor;-webkit-mask:var(--ico-info) center/contain no-repeat;mask:var(--ico-info) center/contain no-repeat;}
.aviso p:last-child{margin:0;}
/* resumen: bloqueantes a la izquierda, fecha y conteo a la derecha (≥1024) */
.res-resumen{display:grid;gap:var(--s5);margin-bottom:var(--s6);}
@media (min-width:1024px){.res-resumen{grid-template-columns:minmax(0,1fr) 360px;align-items:start;}}
.res-bloqueantes{display:grid;gap:var(--s4);}
/* bloques de bloqueantes: tres tratamientos distintos por forma, ícono, texto y posición */
.bloq{padding:var(--s4);border-radius:var(--r-m);}
.bloq-titulo{display:flex;align-items:flex-start;gap:var(--s3);margin-bottom:var(--s3);}
.bloq-titulo::before{content:"";width:28px;height:28px;flex:0 0 auto;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;}
.bloq-titulo h2{margin:2px 0 0;font:700 15px/1.3 var(--font-sans);text-transform:uppercase;letter-spacing:.05em;}
.bloq > p{font-size:15px;}
.bloq-lista{list-style:none;margin:0;padding:0;}
.bloq-lista li{margin:0;padding:var(--s3) 0;border-top:1px solid var(--border-strong);font-size:15px;overflow-wrap:break-word;}
.bloq-lista a{font-weight:600;}
.bloq-lista .flecha{color:var(--text-muted);}
.bloq-lista .nota{display:block;margin-top:var(--s1);font-size:14px;color:var(--text-muted);}
.bloq-sin{border:3px solid var(--st-rojo-line);background:var(--st-rojo-bg);}
.bloq-sin .bloq-titulo{color:var(--st-rojo-ink);--i:var(--ico-sin);}
.bloq-con{border:2.5px dashed var(--st-rojo-line);background:var(--bg-elevated);}
.bloq-con .bloq-titulo{color:var(--st-rojo-ink);--i:var(--ico-con);}
.bloq-ninguno{border:1.5px solid var(--stroke);background:var(--bg-sunken);}
.bloq-ninguno .bloq-titulo{color:var(--text);--i:var(--ico-gris);}
/* fecha límite */
.fecha-limite{padding:var(--s4);border:2px solid var(--text);border-radius:var(--r-m);background:var(--bg-elevated);}
.fecha-limite h2{display:flex;align-items:center;gap:var(--s2);font:700 13px/1.3 var(--font-sans);text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:var(--s2);}
.fecha-limite h2::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:var(--ico-clock) center/contain no-repeat;mask:var(--ico-clock) center/contain no-repeat;}
.fecha-grande{display:block;font:700 clamp(30px,8vw,38px)/1.1 var(--font-mono);font-variant-numeric:tabular-nums;margin:0 0 var(--s2);}
.fechas-dobles{margin:0 0 var(--s2);}
.fechas-dobles > div{padding:var(--s2) 0;border-top:1px solid var(--border);}
.fechas-dobles > div:first-child{border-top:0;padding-top:0;}
.fechas-dobles dt{font-size:13px;font-weight:600;color:var(--text-muted);}
.fechas-dobles dd{margin:0;font:700 26px/1.2 var(--font-mono);font-variant-numeric:tabular-nums;}
.fecha-nota{font-size:14px;color:var(--text-muted);}
.fecha-fuente{font-size:13px;color:var(--text-faint);}
.otras-fechas{margin:var(--s3) 0 0;padding-top:var(--s3);border-top:1px solid var(--border);font-size:14px;color:var(--text-muted);}
.otras-fechas time{color:var(--text);}
.etq-ref{display:inline-block;padding:0 5px;border:1px dashed var(--text-muted);border-radius:4px;font-size:12px;font-weight:600;color:var(--text-muted);white-space:nowrap;}
/* conteo del semáforo */
.conteo-caja{margin-top:var(--s4);}
.conteo-caja h2{font:700 13px/1.3 var(--font-sans);text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:var(--s2);}
.conteo{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin:0 0 var(--s2);padding:0;}
.conteo li{margin:0;}
.conteo a{display:flex;align-items:center;gap:var(--s2);min-height:var(--tap);padding:var(--s2) var(--s3);border:1.5px solid var(--c-line);border-radius:var(--r-s);background:var(--c-bg);color:var(--c-ink);text-decoration:none;font-size:14px;font-weight:600;line-height:1.25;}
.conteo a::before{content:"";width:18px;height:18px;flex:0 0 auto;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;}
.conteo a:hover{text-decoration:underline;}
.conteo strong{font:700 20px var(--font-mono);font-variant-numeric:tabular-nums;}
.conteo-bp{font-size:14px;color:var(--text-muted);margin:0;}
/* mapa de estado → tokens (se aplica a .conteo a, .area y .estado) */
[data-st="rojo-sin"]{--c-ink:var(--st-rojo-ink);--c-bg:var(--st-rojo-bg);--c-line:var(--st-rojo-line);--i:var(--ico-sin);}
[data-st="rojo-con"]{--c-ink:var(--st-rojo-ink);--c-bg:var(--st-rojo-bg);--c-line:var(--st-rojo-line);--i:var(--ico-con);}
[data-st="rojo"]{--c-ink:var(--st-rojo-ink);--c-bg:var(--st-rojo-bg);--c-line:var(--st-rojo-line);--i:var(--ico-rojo);}
[data-st="amarillo"]{--c-ink:var(--st-amar-ink);--c-bg:var(--st-amar-bg);--c-line:var(--st-amar-line);--i:var(--ico-amar);}
[data-st="verde"]{--c-ink:var(--st-verde-ink);--c-bg:var(--st-verde-bg);--c-line:var(--st-verde-line);--i:var(--ico-verde);}
[data-st="gris"]{--c-ink:var(--st-gris-ink);--c-bg:var(--st-gris-bg);--c-line:var(--st-gris-line);--i:var(--ico-gris);}
/* tarjetas de área */
.res-areas{display:grid;gap:var(--s4);margin:0 0 var(--s5);padding:0;list-style:none;}
.res-areas > li{margin:0;}
@media (min-width:1200px){.res-areas{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;}}
.area{border:1.5px solid var(--c-line);border-radius:var(--r-m);background:var(--bg-elevated);overflow:hidden;scroll-margin-top:var(--s4);}
.area[data-st^="rojo"]{border-width:2.5px;}
.area[data-st="rojo-con"]{border-style:dashed;}
.area[data-st="gris"]{border-style:dashed;}
.area-head{padding:var(--s3) var(--s4);background:var(--c-bg);border-bottom:1px solid var(--c-line);}
.estado{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s2);margin:0 0 var(--s2);color:var(--c-ink);font:700 12.5px/1.3 var(--font-sans);text-transform:uppercase;letter-spacing:.05em;}
.estado::before{content:"";width:20px;height:20px;flex:0 0 auto;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;}
.area[data-st="rojo-sin"] .area-head{background:var(--st-rojo-line);border-bottom-color:var(--st-rojo-line);}
.area[data-st="rojo-sin"] .area-head,.area[data-st="rojo-sin"] .estado{color:var(--st-rojo-on);}
.area[data-st="rojo-sin"] .area-head .etq-bp,.area[data-st="rojo-sin"] .area-head .por-confirmar{color:var(--text);}
.area-head h3{margin:0;font-size:19px;overflow-wrap:break-word;}
.area-head .etq-bp{margin:var(--s2) 0 0;}
.area-cuerpo{padding:var(--s4);font-size:15px;}
.area-msg{margin-bottom:var(--s3);}
.area-fecha{display:flex;align-items:center;gap:var(--s2);font-size:14px;margin:0 0 var(--s3);}
.area-fecha::before{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:var(--ico-clock) center/contain no-repeat;mask:var(--ico-clock) center/contain no-repeat;}
.area-fecha time{font-weight:700;}
.area-cuerpo h4{font:700 12px/1.3 var(--font-sans);text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);margin:var(--s4) 0 var(--s2);}
.area-acciones{margin:0 0 var(--s3);padding-left:1.4em;}
.area-acciones li{margin-bottom:var(--s2);padding-left:var(--s1);}
.area-acciones li::marker{font-family:var(--font-mono);font-weight:700;}
.area-quien{margin:0;}
/* etiqueta "por confirmar" (efecto con verificar:true) — gris, borde discontinuo, ícono "?" */
.por-confirmar{display:inline-flex;align-items:center;gap:4px;padding:1px 6px;border:1px dashed var(--text-muted);border-radius:4px;background:var(--bg-elevated);color:var(--text-muted);font:600 12px/1.4 var(--font-sans);white-space:nowrap;vertical-align:1px;text-transform:none;letter-spacing:0;}
.por-confirmar::before{content:"";width:12px;height:12px;background:currentColor;-webkit-mask:var(--ico-duda) center/contain no-repeat;mask:var(--ico-duda) center/contain no-repeat;}
.por-confirmar-nota{font-size:13px;color:var(--text-muted);margin:var(--s1) 0 0;}
/* plegables (<details>) */
.plegable{border-top:1px solid var(--border);}
.plegable > summary{display:flex;align-items:center;gap:var(--s2);min-height:var(--tap);padding:0 var(--s4);cursor:pointer;font-weight:600;font-size:14.5px;list-style:none;}
.plegable > summary::-webkit-details-marker{display:none;}
.plegable > summary::before{content:"";width:12px;height:12px;flex:0 0 auto;background:currentColor;-webkit-mask:var(--ico-chev) center/contain no-repeat;mask:var(--ico-chev) center/contain no-repeat;transition:transform .15s;}
.plegable[open] > summary::before{transform:rotate(90deg);}
.plegable > summary:hover{background:var(--bg-sunken);}
.plegable > summary .cuenta{font-family:var(--font-mono);font-weight:400;color:var(--text-muted);}
.plegable-cuerpo{padding:0 var(--s4) var(--s4);font-size:14px;overflow-wrap:break-word;}
.porque{list-style:none;margin:0;padding:0;}
.porque li{margin:0;padding:var(--s3) 0;border-top:1px solid var(--border);}
.porque li:first-child{border-top:0;padding-top:0;}
.porque .qr{font-weight:600;}
.porque .nota{display:block;margin-top:var(--s1);color:var(--text-muted);}
.porque .etqs{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2);}
.porque .etq-bp{margin:0;}
.ref-lista{margin:0;padding-left:1.25em;}
.ref-lista li{margin-bottom:var(--s3);overflow-wrap:anywhere;}
/* grupo de áreas que no aplican */
.grupo-na{border:1.5px dashed var(--st-gris-line);border-radius:var(--r-m);margin:0 0 var(--s5);}
.grupo-na > summary{border-radius:var(--r-m);}
.grupo-na .res-areas{padding:0 var(--s4) var(--s4);margin:0;}
/* pie y acciones finales */
.res-final .acciones{margin-top:0;}
.alt-imprimir{font-size:13px;color:var(--text-muted);margin:var(--s2) 0 0;}
.res-contacto{margin:var(--s5) 0;font-size:15px;}
.pie-legal{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--border);font-size:13px;color:var(--text-muted);}
.pie-legal p{max-width:none;}

/* ============ 11. ESTADOS: CARGA, ERROR, GUARDADO ============ */
/* botón cargando: <button class="btn btn-pri" aria-busy="true"> + texto visible "Cargando preguntas…" */
.btn[aria-busy="true"]{cursor:progress;background:var(--bg-sunken);color:var(--text);border-color:var(--stroke);}
.btn[aria-busy="true"]::before{content:"";width:16px;height:16px;flex:0 0 auto;border:2px solid var(--stroke);border-top-color:var(--text);border-radius:50%;}
@media (prefers-reduced-motion:no-preference){.btn[aria-busy="true"]::before{animation:giro .8s linear infinite;}}
@keyframes giro{to{transform:rotate(360deg);}}
.aviso-lento{display:flex;align-items:center;gap:var(--s2);margin:var(--s3) 0 0;font-size:14px;color:var(--text-muted);}
.aviso-lento::before{content:"";width:16px;height:16px;flex:0 0 auto;background:currentColor;-webkit-mask:var(--ico-clock) center/contain no-repeat;mask:var(--ico-clock) center/contain no-repeat;}
/* S0-E error de carga (red / herramienta) */
.error-carga{padding:var(--s4);margin:var(--s5) 0 0;border:1.5px solid var(--stroke);border-left:4px solid var(--error);border-radius:var(--r-m);background:var(--bg-elevated);}
.error-carga h2{display:flex;align-items:flex-start;gap:var(--s2);font-size:19px;}
.error-carga h2::before{content:"";width:22px;height:22px;margin-top:1px;flex:0 0 auto;background:var(--error);-webkit-mask:var(--ico-error) center/contain no-repeat;mask:var(--ico-error) center/contain no-repeat;}
.error-carga p{font-size:15px;}
.error-carga .guardadas{font-size:14px;color:var(--text-muted);}
.error-carga .acciones{margin-top:var(--s4);}
noscript p{padding:var(--s4);border:1.5px solid var(--stroke);border-radius:var(--r-m);background:var(--bg-sunken);}
/* esqueleto (solo si el cálculo del resultado tarda > 300 ms) */
.esqueleto{display:grid;gap:var(--s3);}
.esqueleto span{display:block;height:14px;border-radius:4px;background:var(--bg-sunken);}
.esqueleto span:nth-child(1){width:60%;height:28px;}
.esqueleto span:nth-child(3){width:85%;}
.esqueleto span:nth-child(4){width:40%;}
@media (prefers-reduced-motion:no-preference){.esqueleto span{animation:latido 1.2s ease-in-out infinite alternate;}}
@keyframes latido{from{opacity:1;}to{opacity:.45;}}

/* ============ 12. MOVIMIENTO ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important;}
}

/* ============ 13. IMPRESIÓN (resultado completo, B/N) ============ */
@media print{
  /* tokens a escala de grises: el estado se lee por ícono + texto + trazo */
  :root{
    color-scheme:light;
    --st-rojo-ink:var(--text);  --st-rojo-bg:transparent;  --st-rojo-line:var(--text);
    --st-amar-ink:var(--text);  --st-amar-bg:transparent;  --st-amar-line:var(--text);
    --st-verde-ink:var(--text); --st-verde-bg:transparent; --st-verde-line:var(--text);
    --st-gris-ink:var(--text);  --st-gris-bg:transparent;  --st-gris-line:var(--text-muted);
    --st-rojo-on:var(--text);
    --bg-sunken:transparent; --bg-elevated:var(--bg);
  }
  @page{margin:14mm 12mm;}
  body{font-size:11pt;line-height:1.45;min-height:0;}
  .app-head,.areas-lado,.saltar,.acciones,.alt-imprimir,.estado-guardado,.dlg,.btn,.res-contacto .ext::after{display:none !important;}
  .solo-print{display:block;}
  .wrap{max-width:none;padding:0;}
  .app-main{padding:0;}
  a{color:var(--text);text-decoration:none;}
  /* íconos son máscaras sobre background: forzar que se impriman */
  .ico,.estado::before,.bloq-titulo::before,.conteo a::before,.fecha-limite h2::before,.area-fecha::before,.etq-bp::before,.por-confirmar::before,.aviso::before,.error-campo::before{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  /* resumen en una columna */
  .res-resumen{display:block;}
  .res-resumen > * + *{margin-top:var(--s4);}
  .res-head{display:block;}
  /* bloqueantes: sin arreglo = trazo 3 pt continuo; con trámite = 2 pt discontinuo */
  .bloq-sin{border:3pt solid var(--text);}
  .bloq-con{border:2pt dashed var(--text);}
  .bloq-ninguno{border:1pt solid var(--text-muted);}
  .fecha-limite{border:2pt solid var(--text);}
  .conteo{grid-template-columns:repeat(3,1fr);}
  .conteo a{min-height:0;border-width:1pt;}
  /* tarjetas: grosor y estilo de borde por estado */
  .res-areas{display:block;}
  .res-areas > li + li{margin-top:var(--s3);}
  .area{border:1pt solid var(--text);break-inside:avoid;page-break-inside:avoid;}
  .area[data-st="rojo-sin"]{border:3pt solid var(--text);}
  .area[data-st="rojo-con"]{border:2pt dashed var(--text);}
  .area[data-st="rojo"]{border:2pt solid var(--text);}
  .area[data-st="gris"]{border:1pt dotted var(--text-muted);}
  .area-head{border-bottom:1pt solid var(--text-muted);}
  .area[data-st="rojo-sin"] .area-head{background:transparent;}
  h2,h3,h4,.area-head,.bloq-titulo{break-after:avoid;page-break-after:avoid;}
  /* plegables desplegados y sin chevron */
  details > :not(summary){display:block !important;}
  @supports selector(::details-content){details::details-content{content-visibility:visible;display:block;}}
  .plegable > summary,.grupo-na > summary{min-height:0;padding:var(--s2) var(--s4) var(--s1);}
  .plegable > summary::before,.grupo-na > summary::before{display:none;}
  .grupo-na{border:0;}
  .grupo-na .res-areas{padding:0;}
  /* pie del impreso: URL, fecha, versión, aviso legal */
  .pie-print{margin-top:var(--s5);padding-top:var(--s3);border-top:1pt solid var(--text-muted);font-size:9pt;color:var(--text);}
}

/* ============ 14. AJUSTES DE IMPLEMENTACIÓN (@ic-dev; solo tokens) ============ */
.cab-contacto{display:none;font-size:15px;}
@media (min-width:1024px){.cab-contacto{display:inline-flex;}}
.res-head .acciones{display:none;}
@media (min-width:1024px){.res-head .acciones{display:flex;}}
.areas-pagina .areas-lista{margin-top:var(--s2);}
.puntos li > div span{display:block;margin-top:var(--s1);}
.otras-fechas span + span::before{content:" · ";}
.area-nota-extra{font-size:14px;color:var(--text-muted);margin:0 0 var(--s3);}
.q-aviso{margin-bottom:var(--s4);}
@media print{.res-head .acciones{display:none !important;}}
/* evita desborde a 320–390 px: columnas del resumen y del conteo pueden encogerse */
@media screen and (max-width:1023px){.res-resumen{grid-template-columns:minmax(0,1fr);}}
.res-resumen > *{min-width:0;}
@media screen{.conteo{grid-template-columns:repeat(2,minmax(0,1fr));}}
.conteo a{overflow-wrap:anywhere;}
@media (min-width:1024px){.app-bar .btn-areas{display:none;}}
/* v0.3 (7 materias): ayuda por opción, pantallas de salida, banner de entrada de ganado */
.opcion .op-ayuda{display:block;margin-top:var(--s1);font-size:14px;font-weight:400;color:var(--text-muted);}
.salida{margin:var(--s4) 0;}
.salida > p,.salida-razones{font-size:16px;}
.salida-razones{padding-left:1.2em;margin:0 0 var(--s3);}
.salida-razones li{margin-bottom:var(--s2);}
.salida .acciones{margin-top:var(--s4);}
.bloq-entrada{margin-bottom:var(--s4);}
.bloq-entrada .nota{font-size:14px;color:var(--text-muted);}
.res-preparar{margin:var(--s5,32px) 0 var(--s3);font:700 18px/1.3 var(--font-sans);}