/* ==========================================================================
   Caracterización Afro · Puerto Gaitán
   Hoja de estilos única. Pensada primero para teléfono, que es como se usa
   en campo, y luego para escritorio.
   ========================================================================== */

/* --------------------------------------------------------------- paleta
   Los nombres de las variables son los mismos de siempre a propósito: el
   tablero y el formulario los leen por nombre desde JavaScript, así que
   cambiarlos habría roto las gráficas. Lo que cambió son los valores.

     verde   · la Orinoquía y la naturaleza — es el color institucional
     azul    · el río Manacacías y el territorio
     ocre y dorado · la riqueza y la energía del llano
     naranja y vino · la identidad cultural
     los oscuros son azulados, no negros: contrastan sin apagar la pantalla

   Los colores vivos se usan como ACENTO. Los fondos se mantienen claros y
   con aire, que es lo que hace que una app se vea profesional y no cargada.
   Los colores de las gráficas viven aparte, en analitica.js, porque están
   verificados para daltonismo y no se tocan desde aquí. */
:root{
  --verde:#0E7A5F; --verde-claro:#12A37C; --verde-tenue:#DCF5EC;
  --azul:#1268B3;  --azul-claro:#2E92DE;  --azul-tenue:#DCEDFB;
  --tierra:#A96A3F; --ocre:#E09410; --naranja:#EC6A1E;
  --vino:#C22B4A;
  --fondo:#F4F7FA; --superficie:#ffffff; --superficie-2:#EDF2F6;
  --borde:#DBE4EB; --texto:#0F2430; --texto-tenue:#556873;
  --ok:#0E7A5F; --alerta:#A85B08; --error:#C22B4A;
  --texto-boton:#ffffff;
  --sombra:0 1px 2px rgba(15,36,48,.05), 0 6px 18px rgba(15,36,48,.07);
  --sombra-alta:0 2px 6px rgba(15,36,48,.07), 0 14px 34px rgba(15,36,48,.12);
  --anillo:0 0 0 3px rgba(18,104,179,.28);
  --radio:16px; --radio-s:11px; --radio-xs:7px;
  --transicion:.18s cubic-bezier(.4,0,.2,1);
  --ancho:1180px;
}
:root[data-tema="oscuro"]{
  --verde:#3FD6A4; --verde-claro:#68E5BF; --verde-tenue:#0D2E27;
  --azul:#5CB4F5;  --azul-claro:#8ACCFA;  --azul-tenue:#0E2637;
  --tierra:#D09A6E; --ocre:#F5B93F; --naranja:#FF9256;
  --vino:#FF7C92;
  --fondo:#0A1620; --superficie:#11232F; --superficie-2:#182F3D;
  --borde:#23404F; --texto:#E8F0F5; --texto-tenue:#94A9B6;
  --ok:#3FD6A4; --alerta:#F0B03F; --error:#FF7C92;
  --texto-boton:#052018;
  --sombra:0 1px 2px rgba(0,0,0,.45), 0 6px 20px rgba(0,0,0,.4);
  --sombra-alta:0 2px 8px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.5);
  --anillo:0 0 0 3px rgba(92,180,245,.35);
}

*,*::before,*::after{box-sizing:border-box}
/* El atributo hidden debe ganarle a cualquier display de más abajo. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fondo); color:var(--texto);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{line-height:1.25; margin:0 0 .5rem; font-weight:650}
h1{font-size:1.5rem} h2{font-size:1.2rem} h3{font-size:1.02rem}
p{margin:0 0 .75rem}
a{color:var(--verde-claro)}
:focus-visible{outline:3px solid var(--ocre); outline-offset:2px; border-radius:4px}

/* ---------------------------------------------------------------- carga */
.pantalla-carga{
  position:fixed; inset:0; display:grid; place-content:center; justify-items:center;
  gap:1rem; background:var(--fondo); z-index:100; color:var(--texto-tenue);
}
.giro{
  width:38px; height:38px; border-radius:50%;
  border:3px solid var(--borde); border-top-color:var(--verde-claro);
  animation:girar .8s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.giro{animation-duration:2.4s}}

/* ---------------------------------------------------------------- barra */
#barra{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:.75rem;
  padding:.55rem max(.75rem,env(safe-area-inset-left)) .55rem max(.75rem,env(safe-area-inset-right));
  background:var(--superficie); border-bottom:1px solid var(--borde);
  box-shadow:0 1px 0 rgba(15,36,48,.03), 0 4px 16px rgba(15,36,48,.04);
}
/* Un hilo con los colores del territorio bajo la barra. Dos píxeles, pero es
   lo que hace que la app se reconozca de un vistazo. */
#barra::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:linear-gradient(90deg,var(--verde) 0%,var(--azul) 34%,var(--dorado) 67%,var(--naranja) 100%);
}
.marca{display:flex; align-items:center; gap:.55rem; text-decoration:none; color:inherit; flex:0 0 auto}
/* El logo es una imagen, no un emoji: se le fija el tamaño para que la barra
   no dé un salto mientras carga. */
.marca-icono{width:32px; height:32px; display:block; flex:0 0 auto}
.marca-texto strong{display:block; font-size:.98rem; line-height:1.15}
.marca-texto small{color:var(--texto-tenue); font-size:.74rem}
#nav{display:flex; gap:.15rem; margin-left:.5rem; flex:1 1 auto; overflow:auto}
#nav a{
  padding:.5rem .75rem; border-radius:var(--radio-s); text-decoration:none;
  color:var(--texto-tenue); font-weight:550; font-size:.92rem; white-space:nowrap;
}
#nav a:hover{background:var(--superficie-2); color:var(--texto)}
#nav a{transition:background var(--transicion), color var(--transicion)}
#nav a[aria-current="page"]{background:var(--verde-tenue); color:var(--verde); font-weight:650}
.barra-derecha{display:flex; align-items:center; gap:.35rem; margin-left:auto}
.icono{
  background:none; border:1px solid transparent; color:var(--texto-tenue);
  font-size:1.15rem; cursor:pointer; padding:.4rem .55rem; border-radius:var(--radio-s); line-height:1;
}
.icono:hover{background:var(--superficie-2); color:var(--texto)}
#menu-movil{display:none}
.usuario{position:relative}
.chip{
  display:flex; align-items:center; gap:.5rem; background:var(--superficie-2);
  border:1px solid var(--borde); border-radius:999px; padding:.28rem .7rem .28rem .28rem;
  cursor:pointer; color:inherit; font:inherit; font-size:.88rem; max-width:200px;
}
.chip span:last-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.avatar{
  width:26px; height:26px; border-radius:50%; background:var(--verde); color:#fff;
  display:grid; place-content:center; font-weight:700; font-size:.8rem; flex:0 0 auto;
}
.menu{
  position:absolute; right:0; top:calc(100% + .4rem); min-width:230px; z-index:50;
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--radio);
  box-shadow:var(--sombra); padding:.4rem; display:grid; gap:.1rem;
}
.menu-cabeza{
  padding:.5rem .6rem; margin:0; border-bottom:1px solid var(--borde);
  font-size:.82rem; color:var(--texto-tenue); word-break:break-all;
}
.menu a,.menu button{
  display:block; width:100%; text-align:left; padding:.55rem .6rem; border:0;
  background:none; border-radius:var(--radio-s); color:inherit; font:inherit;
  font-size:.9rem; cursor:pointer; text-decoration:none;
}
.menu a:hover,.menu button:hover{background:var(--superficie-2)}

/* ------------------------------------------------------------ contenido */
#app{
  display:block; max-width:var(--ancho); margin:0 auto;
  padding:1.25rem max(.85rem,env(safe-area-inset-left)) 4rem;
}
.encabezado{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:.75rem;
  justify-content:space-between; margin-bottom:1.1rem;
}
.encabezado p{margin:0; color:var(--texto-tenue); font-size:.92rem}

/* --------------------------------------------------------------- tarjetas */
.tarjeta{
  background:var(--superficie); border:1px solid var(--borde);
  border-radius:var(--radio); box-shadow:var(--sombra); padding:1.2rem;
  transition:box-shadow var(--transicion), border-color var(--transicion);
}
.rejilla{display:grid; gap:1rem}
.rejilla.kpi{grid-template-columns:repeat(auto-fit,minmax(235px,1fr))}
.rejilla.dos{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.rejilla.kpi .tarjeta{position:relative; overflow:hidden}
/* Una cinta de color arriba de cada indicador: da jerarquía sin ensuciar el
   fondo, y los cuatro colores del territorio se turnan. */
.rejilla.kpi .tarjeta::before{
  content:''; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg,var(--verde),var(--verde-claro));
}
.rejilla.kpi .tarjeta:nth-child(4n+2)::before{background:linear-gradient(90deg,var(--azul),var(--azul-claro))}
.rejilla.kpi .tarjeta:nth-child(4n+3)::before{background:linear-gradient(90deg,var(--ocre),var(--dorado))}
.rejilla.kpi .tarjeta:nth-child(4n+4)::before{background:linear-gradient(90deg,var(--naranja),var(--dorado))}
.rejilla.kpi .tarjeta:hover{box-shadow:var(--sombra-alta); border-color:var(--azul-tenue)}
.kpi-valor{font-size:2rem; font-weight:750; line-height:1.05; color:var(--texto); letter-spacing:-.02em;
           font-variant-numeric:tabular-nums}
.kpi-nombre{color:var(--texto-tenue); font-size:.85rem; margin-top:.2rem; font-weight:550}
.kpi-nota{font-size:.78rem; color:var(--texto-tenue); margin-top:.35rem}

/* --------------------------------------------------------------- formulario */
label{display:block; font-weight:600; font-size:.87rem; margin-bottom:.3rem}
.ayuda{font-weight:400; color:var(--texto-tenue); font-size:.8rem; display:block; margin-top:.15rem}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=search],select,textarea{
  width:100%; padding:.65rem .75rem; font:inherit; font-size:.95rem; color:var(--texto);
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--radio-s);
  transition:border-color var(--transicion), box-shadow var(--transicion);
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--azul-claro); box-shadow:var(--anillo);
}
textarea{min-height:80px; resize:vertical}
select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--texto-tenue) 50%),linear-gradient(135deg,var(--texto-tenue) 50%,transparent 50%);
  background-position:calc(100% - 17px) 55%,calc(100% - 12px) 55%; background-size:5px 5px,5px 5px;
  background-repeat:no-repeat; padding-right:2rem}
input:disabled,select:disabled{background:var(--superficie-2); color:var(--texto-tenue)}
.campo{margin-bottom:1rem}
.campos{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.campo-ancho{grid-column:1/-1}
.calculado{border-style:dashed}
.opciones{display:grid; gap:.4rem; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.opcion{
  display:flex; align-items:flex-start; gap:.5rem; padding:.55rem .65rem;
  border:1px solid var(--borde); border-radius:var(--radio-s); cursor:pointer; font-size:.9rem;
  transition:background var(--transicion), border-color var(--transicion);
}
.opcion:hover{background:var(--superficie-2); border-color:var(--azul-claro)}
.opcion input{margin:.2rem 0 0; flex:0 0 auto}
.opcion:has(input:checked){border-color:var(--verde-claro); background:var(--verde-tenue); color:var(--verde)}
.si-no{display:flex; gap:.4rem}
.si-no .opcion{flex:1; justify-content:center}

/* --------------------------------------------------------------- botones */
/* El degradado va en background-image y el color plano en background-color, no
   al revés: así el navegador (y la prueba de contraste) siguen viendo un color
   real detrás del texto, y si el degradado no carga el botón se ve igual. */
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.65rem 1.15rem; border-radius:var(--radio-s); border:1px solid transparent;
  background-color:var(--verde); color:var(--texto-boton); font:inherit; font-weight:650;
  font-size:.93rem; cursor:pointer; text-decoration:none; white-space:nowrap;
  background-image:linear-gradient(180deg,rgba(255,255,255,.14),rgba(0,0,0,.06));
  box-shadow:0 1px 2px rgba(15,36,48,.12);
  transition:background-color var(--transicion), box-shadow var(--transicion),
             transform var(--transicion), filter var(--transicion);
}
.boton:hover:not(:disabled){background-color:var(--verde-claro); box-shadow:var(--sombra); transform:translateY(-1px)}
.boton:active:not(:disabled){transform:translateY(0); box-shadow:0 1px 2px rgba(15,36,48,.14)}
.boton:focus-visible{box-shadow:var(--anillo)}
.boton:disabled{opacity:.45; cursor:not-allowed; box-shadow:none; background-image:none}
.boton.secundario{background-color:var(--superficie); color:var(--texto); border-color:var(--borde); background-image:none}
.boton.secundario:hover:not(:disabled){background-color:var(--superficie-2); border-color:var(--azul-claro)}
.boton.peligro{background-color:var(--vino); color:var(--texto-boton)}
.boton.peligro:hover:not(:disabled){background-color:var(--vino); filter:brightness(1.08)}
.boton.pequeno{padding:.42rem .8rem; font-size:.85rem}
.acciones{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center}

/* --------------------------------------------------------------- tablas */
.tabla-caja{overflow-x:auto; border:1px solid var(--borde); border-radius:var(--radio); background:var(--superficie)}
table{border-collapse:collapse; width:100%; font-size:.9rem}
th,td{padding:.6rem .75rem; text-align:left; border-bottom:1px solid var(--borde); vertical-align:top}
th{background:var(--superficie-2); font-size:.8rem; text-transform:uppercase; letter-spacing:.03em;
   color:var(--texto-tenue); position:sticky; top:0; white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--superficie-2)}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------- varios */
.etiqueta{
  display:inline-block; padding:.16rem .5rem; border-radius:999px; font-size:.75rem;
  font-weight:600; background:var(--superficie-2); color:var(--texto-tenue); border:1px solid var(--borde);
}
.etiqueta.ok{background:var(--verde-tenue); color:var(--verde); border-color:transparent}
.etiqueta.alerta{background:#fef3c7; color:#92400e; border-color:transparent}
:root[data-tema="oscuro"] .etiqueta.alerta{background:#3a2c10; color:var(--alerta)}
.filtros{display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit,minmax(175px,1fr)); margin-bottom:1rem}
.paginacion{display:flex; gap:.6rem; align-items:center; justify-content:center; margin-top:1rem; flex-wrap:wrap}
.vacio{text-align:center; padding:2.5rem 1rem; color:var(--texto-tenue)}
.vacio .emoji{font-size:2.2rem; display:block; margin-bottom:.5rem}
.grafica{position:relative; height:290px}
.modulo{margin-bottom:1.4rem}
.modulo>summary{
  cursor:pointer; padding:.85rem 1.1rem; font-weight:650; list-style:none;
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--radio);
  display:flex; justify-content:space-between; align-items:center; gap:.75rem;
}
.modulo[open]>summary{border-radius:var(--radio) var(--radio) 0 0; border-bottom:0}
.modulo>summary::-webkit-details-marker{display:none}
.modulo>summary::after{content:"▾"; color:var(--texto-tenue); transition:transform .15s}
.modulo[open]>summary::after{transform:rotate(180deg)}
.modulo-cuerpo{
  border:1px solid var(--borde); border-top:0; border-radius:0 0 var(--radio) var(--radio);
  padding:1.1rem; background:var(--superficie);
}
.lista-datos{display:grid; gap:.85rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.lista-datos dt{font-size:.78rem; color:var(--texto-tenue); margin-bottom:.15rem}
.lista-datos dd{margin:0; font-size:.94rem; overflow-wrap:anywhere}
/* Los mensajes ya no son un bloque gris con una raya: llevan el color de lo
   que dicen, con un fondo muy tenue del mismo tono para que se vean de lejos
   sin gritar. */
.nota{
  border:1px solid var(--borde); border-left:4px solid var(--ocre);
  background:var(--superficie-2); color:var(--texto);
  padding:.8rem 1rem; border-radius:var(--radio-s);
  font-size:.88rem; line-height:1.55; margin-bottom:1rem;
}
.nota.error{
  border-left-color:var(--error);
  background:var(--superficie-2);                                   /* teléfonos viejos */
  border-color:color-mix(in srgb,var(--error) 30%,var(--borde));
  background:color-mix(in srgb,var(--error) 8%,var(--superficie));
}
.nota.ok{
  border-left-color:var(--ok);
  background:var(--superficie-2);                                   /* teléfonos viejos */
  border-color:color-mix(in srgb,var(--ok) 30%,var(--borde));
  background:color-mix(in srgb,var(--ok) 9%,var(--superficie));
}

/* --------------------------------------------------------------- avisos */
.avisos{position:fixed; left:50%; bottom:1.1rem; transform:translateX(-50%); z-index:80;
  display:grid; gap:.5rem; width:min(440px,92vw)}
.aviso{
  background:var(--texto); color:var(--fondo); padding:.8rem 1rem; border-radius:var(--radio-s);
  box-shadow:var(--sombra-alta); font-size:.9rem; display:flex; gap:.6rem; align-items:flex-start;
  animation:entrar .22s cubic-bezier(.34,1.4,.64,1);
  border:1px solid rgba(255,255,255,.12); font-weight:550;
}
.aviso.error{background:#B4243F; color:#fff; border-color:rgba(255,255,255,.2)}
.aviso.ok{background:#0C6B53; color:#fff; border-color:rgba(255,255,255,.2)}
@keyframes entrar{from{opacity:0; transform:translateY(8px)}}

/* --------------------------------------------------------------- ingreso
   Pantalla partida: identidad a la izquierda sobre oscuro, formulario a la
   derecha sobre claro. En el teléfono se apilan y la franja oscura se encoge,
   porque ahí lo que importa es ver el formulario sin desplazarse. */
/* Se escribe con #app delante a propósito: el contenedor trae `#app{display:
   block; max-width; padding}` y un selector de id le gana a uno de clase. Sin
   esto la rejilla no se aplica y los dos paneles quedan uno debajo del otro
   —que fue exactamente lo que pasó la primera vez—. */
#app.ingreso{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  min-height:100vh; max-width:none; margin:0; padding:0;
  background:var(--fondo);
}
.ingreso-panel{
  display:flex; flex-direction:column; justify-content:center; gap:.9rem;
  padding:clamp(1.6rem,4vw,3.4rem); color:#EAF1F6;
  /* El verde de la Orinoquía y el azul del río sobre el marino institucional.
     Discreto: es un fondo, no un afiche. */
  background:
    radial-gradient(38rem 26rem at 18% 8%, rgba(18,104,179,.55), transparent 62%),
    radial-gradient(34rem 24rem at 88% 96%, rgba(14,122,95,.45), transparent 60%),
    var(--marino, #132C42);
}
.ingreso-logo{
  width:clamp(78px,9vw,110px); height:auto; display:block;
  border-radius:22px; box-shadow:0 10px 26px rgba(0,0,0,.38); margin-bottom:.4rem;
}
.ingreso-panel h1{
  margin:0; font-size:clamp(1.7rem,3.4vw,2.6rem); letter-spacing:-.02em; color:#fff;
}
.ingreso-lema{margin:0; max-width:34rem; line-height:1.55; color:#C4D4E0; font-size:.96rem}
.ingreso-puntos{list-style:none; margin:.6rem 0 0; padding:0; display:grid; gap:.6rem}
.ingreso-puntos li{
  display:flex; gap:.6rem; align-items:flex-start; line-height:1.45;
  color:#DCE7EF; font-size:.92rem; max-width:34rem;
}
.ingreso-puntos span{flex:0 0 auto}
.ingreso-pie{margin:1.4rem 0 0; font-size:.78rem; color:#8FA6B8}

.ingreso-lado{display:grid; place-items:center; padding:clamp(1.4rem,4vw,3rem)}
.ingreso-caja{width:min(400px,100%)}
.ingreso-caja h2{margin:0 0 .3rem; font-size:1.7rem; letter-spacing:-.02em}
.ingreso-sub{margin:0 0 1.5rem; color:var(--texto-tenue); font-size:.92rem}
.ingreso-forma{display:grid; gap:1rem}
.ingreso-olvido{margin:-.4rem 0 0; text-align:right}
.ingreso-boton{width:100%; padding:.85rem 1rem; font-size:1rem}

@media (max-width:820px){
  /* `auto 1fr`: la franja oscura mide lo que mide su contenido y el resto es
     para el formulario. Con las dos filas iguales quedaba media pantalla de
     azul vacío antes de llegar al primer campo. */
  #app.ingreso{grid-template-columns:1fr; grid-template-rows:auto 1fr; min-height:100dvh}
  .ingreso-panel{
    gap:.5rem; padding:1.6rem 1.4rem 1.5rem; text-align:left;
    align-items:flex-start; justify-content:flex-start;
  }
  .ingreso-panel h1{font-size:1.5rem}
  /* En el teléfono sobran: el lema y los tres puntos empujan el formulario
     fuera de la pantalla, y quien entra ya sabe qué es esto. */
  .ingreso-lema,.ingreso-puntos,.ingreso-pie{display:none}
  .ingreso-logo{width:64px; border-radius:16px}
  .ingreso-lado{padding:1.6rem 1.4rem 2.4rem}
}

/* --------------------------------------------------------------- móvil */
@media (max-width:820px){
  #menu-movil{display:block}
  #nav{
    position:fixed; inset:57px 0 auto 0; flex-direction:column; gap:0; overflow:visible;
    background:var(--superficie); border-bottom:1px solid var(--borde); padding:.4rem;
    box-shadow:var(--sombra); margin:0;
  }
  #nav:not(.abierto){display:none}
  #nav a{padding:.8rem 1rem}
  .marca-texto small{display:none}
  .chip span:last-child{display:none}
  .chip{padding:.28rem}
  .kpi-valor{font-size:1.5rem}
}
@media print{
  #barra,.avisos,.acciones,.paginacion{display:none!important}
  body{background:#fff}
  .tarjeta,.modulo-cuerpo{box-shadow:none; border-color:#ccc}
  .modulo>summary{background:#f4f4f4}
}

/* ==========================================================================
   OBSERVATORIO ANALÍTICO
   El azul marino y el dorado institucionales viven aquí, en la interfaz.
   Los colores de las series de datos los pone analitica.js desde una paleta
   validada para daltonismo: no se mezclan los dos sistemas.
   ========================================================================== */
:root{
  --marino:#132C42; --marino-2:#1E4360; --dorado:#FFC53D; --dorado-osc:#8A6200;
}
:root[data-tema="oscuro"]{
  --marino:#0E2233; --marino-2:#173142; --dorado:#FFD36B; --dorado-osc:#FFD36B;
}

.a-cabecera{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-end;
  justify-content:space-between; margin-bottom:1.1rem;
}
.a-cabecera h1{font-size:1.4rem; letter-spacing:-.01em; margin:0 0 .2rem}
.a-cabecera p{margin:0; color:var(--texto-tenue); font-size:.9rem}

/* --- filtros: una sola fila encima de las gráficas --- */
.a-filtros{
  display:grid; gap:.7rem; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--radio);
  padding:.9rem 1rem; margin-bottom:1rem; box-shadow:var(--sombra);
}
.a-filtros label{font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--texto-tenue); margin-bottom:.25rem}
.a-filtros select{font-size:.88rem; padding:.45rem .6rem}

/* --- navegación de módulos --- */
.a-modulos{display:flex; gap:.4rem; overflow-x:auto; margin-bottom:1.2rem;
  padding-bottom:.3rem; scrollbar-width:thin}
.a-mod{
  flex:0 0 auto; border:1px solid var(--borde); background:var(--superficie);
  color:var(--texto-tenue); font:inherit; font-size:.9rem; font-weight:600;
  padding:.55rem .95rem; border-radius:999px; cursor:pointer; white-space:nowrap;
}
.a-mod:hover{background:var(--superficie-2); color:var(--texto)}
.a-mod.activo{background:var(--marino); border-color:var(--marino); color:#fff}
:root[data-tema="oscuro"] .a-mod.activo{color:var(--dorado)}

/* --- KPIs: banda de color arriba, como en el informe --- */
.k-rejilla{display:grid; gap:.85rem; grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  margin-bottom:1.1rem}
.k-rejilla.compacta{grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); margin:0}
.k-tarjeta{
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--radio);
  padding:1rem 1.05rem; box-shadow:var(--sombra); border-top:3px solid var(--kc,#2a78d6);
}
.k-tarjeta.t0{--kc:#2a78d6} .k-tarjeta.t1{--kc:#eb6834} .k-tarjeta.t2{--kc:#1baf7a}
.k-tarjeta.t3{--kc:#eda100} .k-tarjeta.t4{--kc:#e34948} .k-tarjeta.t5{--kc:#4a3aa7}
.k-tarjeta.t6{--kc:#008300} .k-tarjeta.t7{--kc:#e87ba4}
.k-valor{font-size:1.6rem; font-weight:750; line-height:1.1; color:var(--kc);
  font-variant-numeric:tabular-nums}
.k-nombre{font-size:.82rem; font-weight:600; margin-top:.2rem}
.k-nota{font-size:.75rem; color:var(--texto-tenue); margin-top:.3rem; line-height:1.4}

/* --- aviso metodológico --- */
.aviso-metodo{
  border-left:3px solid var(--dorado-osc); background:var(--superficie-2);
  padding:.8rem 1rem; border-radius:0 var(--radio-s) var(--radio-s) 0;
  font-size:.86rem; line-height:1.55; margin-bottom:1.2rem;
}
.aviso-metodo b{font-variant-numeric:tabular-nums}

/* --- tarjeta de gráfica --- */
.g-rejilla{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  margin-bottom:1rem}
.g-tarjeta{
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--radio);
  box-shadow:var(--sombra); padding:1rem 1.05rem 0.85rem; margin-bottom:1rem;
  break-inside:avoid;
}
.g-rejilla .g-tarjeta{margin-bottom:0}
.g-tarjeta.ancha{grid-column:1/-1}
.g-cabeza{display:flex; align-items:flex-start; gap:.75rem; justify-content:space-between;
  margin-bottom:.15rem}
.g-cabeza h3{font-size:.92rem; font-weight:650; margin:0; line-height:1.35}
.g-tag{
  flex:0 0 auto; font-size:.68rem; text-transform:uppercase; letter-spacing:.07em;
  font-weight:700; padding:.22rem .55rem; border-radius:999px;
  background:var(--superficie-2); color:var(--texto-tenue); border:1px solid var(--borde);
  font-variant-numeric:tabular-nums;
}
.g-sub{font-size:.8rem; color:var(--texto-tenue); margin:.35rem 0 .1rem; line-height:1.5}
.g-cuerpo{position:relative; margin-top:.6rem}
.g-nota{font-size:.78rem; color:var(--texto-tenue); margin:.6rem 0 0; line-height:1.5}

/* --- tabla de frecuencias desplegable --- */
.g-tabla{margin-top:.55rem; border-top:1px solid var(--borde); padding-top:.5rem}
.g-tabla>summary{
  cursor:pointer; font-size:.78rem; color:var(--texto-tenue); font-weight:600;
  list-style:none; padding:.25rem 0;
}
.g-tabla>summary::-webkit-details-marker{display:none}
.g-tabla>summary::before{content:"▸ "; display:inline-block; transition:transform .15s}
.g-tabla[open]>summary::before{content:"▾ "}
.g-tabla>summary:hover{color:var(--texto)}
.g-tabla .tabla-caja{margin-top:.5rem; border:0; box-shadow:none}
.g-tabla table{font-size:.84rem}
.g-tabla th{background:transparent; border-bottom:1px solid var(--borde); padding:.35rem .5rem}
.g-tabla td{padding:.38rem .5rem}
.g-tabla tfoot td{font-weight:700; border-top:1px solid var(--borde); background:var(--superficie-2)}
.punto{display:inline-block; width:9px; height:9px; border-radius:50%; vertical-align:baseline}
.pct{color:var(--dorado-osc); font-weight:700}
.barrita{background:var(--superficie-2); border-radius:999px; height:7px; overflow:hidden}
.barrita i{display:block; height:100%; border-radius:999px}

/* --- tabla estilo informe: encabezado marino, rótulos dorados --- */
.tabla-informe{border:0}
.tabla-informe table{font-size:.87rem}
.tabla-informe thead th{
  background:var(--marino); color:var(--dorado); border-bottom:0;
  font-size:.72rem; letter-spacing:.07em; padding:.65rem .75rem;
}
.tabla-informe thead th:first-child{border-radius:var(--radio) 0 0 0}
.tabla-informe thead th:last-child{border-radius:0 var(--radio) 0 0}
.tabla-informe tbody tr:nth-child(even){background:var(--superficie-2)}
.tabla-informe td.grupo{vertical-align:top; padding-top:.7rem; background:var(--superficie)}
.tabla-informe td.grupo strong{display:block; font-size:.88rem}
.tabla-informe td.grupo small{color:var(--texto-tenue); font-size:.74rem}
.tabla-informe tfoot .total td{
  background:var(--marino); color:#fff; font-weight:700; border:0;
  font-size:.85rem; letter-spacing:.04em;
}
:root[data-tema="oscuro"] .tabla-informe tfoot .total td{color:var(--dorado)}
.tabla-informe tfoot .total td:first-child{border-radius:0 0 0 var(--radio)}
.tabla-informe tfoot .total td:last-child{border-radius:0 0 var(--radio) 0}

@media (max-width:640px){
  .g-rejilla{grid-template-columns:1fr}
  .k-valor{font-size:1.35rem}
  .a-filtros{grid-template-columns:1fr 1fr}
}
@media print{
  .a-filtros,.a-modulos,.g-tabla>summary{display:none!important}
  .g-tabla[open]{display:block}
  .g-tarjeta{page-break-inside:avoid; box-shadow:none}
}

/* Un lienzo de Chart.js conserva su ancho en píxeles hasta que la librería
   reacciona al cambio de tamaño. Sin esto, al girar el teléfono o cambiar de
   ventana la tarjeta se estira y arrastra toda la página. */
.g-tarjeta,.g-cuerpo,.g-rejilla>*,.k-rejilla>*{min-width:0}
.g-cuerpo canvas{max-width:100%!important}

/* --- segundo nivel del menú: secciones del grupo activo --- */
.a-secciones{
  display:flex; gap:.35rem; overflow-x:auto; margin:-.7rem 0 1.1rem;
  padding:.45rem .55rem; scrollbar-width:thin;
  background:var(--superficie-2); border:1px solid var(--borde); border-radius:999px;
}
.a-secciones.vacia{display:none}
.a-sec{
  flex:0 0 auto; border:0; background:none; color:var(--texto-tenue);
  font:inherit; font-size:.85rem; font-weight:600; padding:.42rem .85rem;
  border-radius:999px; cursor:pointer; white-space:nowrap;
}
.a-sec:hover{background:var(--superficie); color:var(--texto)}
.a-sec.activo{background:var(--superficie); color:var(--verde); box-shadow:var(--sombra)}
:root[data-tema="oscuro"] .a-sec.activo{color:var(--dorado)}

/* --- título de la sección abierta --- */
.a-titulo{display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; margin-bottom:.9rem}
.a-titulo h2{margin:0; font-size:1.12rem}
.a-titulo span{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; font-weight:700;
  color:var(--texto-tenue); border-left:2px solid var(--borde); padding-left:.6rem;
}

/* --- pivote territorial con subtotales --- */
.tabla-pivote tbody .fila-area td{
  background:var(--marino); color:var(--dorado); font-weight:700;
  font-size:.85rem; letter-spacing:.03em;
}
.tabla-pivote tbody .fila-zona td{
  background:var(--marino-2); color:#fff; font-weight:650; font-size:.83rem;
}
:root[data-tema="oscuro"] .tabla-pivote tbody .fila-zona td{color:var(--dorado)}
.tabla-pivote tbody tr:nth-child(even){background:inherit}
.tabla-pivote tbody tr:not(.fila-area):not(.fila-zona):nth-of-type(even){background:var(--superficie-2)}
small.sub{display:block; color:var(--texto-tenue); font-size:.74rem; margin-top:.1rem}

@media (max-width:640px){
  .a-secciones{border-radius:var(--radio)}
  .a-titulo h2{font-size:1rem}
}
@media print{ .a-secciones{display:none!important} }

/* ==========================================================================
   Láminas del informe: composición por sexo, pirámide en barras, treemap y
   la ventana de detalle. Todo va al final y solo agrega clases nuevas: no
   toca ni una regla de lo que ya estaba.
   ========================================================================== */

/* --- nota de análisis --- */
.a-analisis{
  border-left:3px solid var(--verde-claro); background:var(--superficie-2);
  padding:.85rem 1.05rem; border-radius:0 var(--radio-s) var(--radio-s) 0;
  margin:.2rem 0 1.2rem; font-size:.87rem; line-height:1.6;
}
.a-analisis h4{
  margin:0 0 .3rem; font-size:.74rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--texto-tenue);
}
.a-analisis p{margin:0}

/* --- composición por sexo --- */
.sx-panel{
  display:grid; gap:1rem; align-items:center; margin:.9rem 0 1rem;
  grid-template-columns:minmax(150px,1fr) minmax(240px,1.6fr) minmax(150px,1fr);
}
.sx-centro{height:300px; min-width:0; position:relative}
.sx-centro canvas{max-width:100%!important}
.sx-lado{
  text-align:center; padding:1rem .7rem; border-radius:var(--radio);
  background:var(--superficie-2); border:1px solid var(--borde);
  border-top:4px solid var(--sx); min-width:0;
}
.sx-titulo{
  font-size:.74rem; font-weight:800; letter-spacing:.09em; color:var(--texto-tenue);
}
.sx-icono{width:40px; height:40px; display:block; margin:.5rem auto .2rem}
.sx-cifra{
  font-size:2rem; font-weight:800; line-height:1.05; color:var(--sx);
  font-variant-numeric:tabular-nums;
}
.sx-personas{font-size:.76rem; color:var(--texto-tenue); margin-bottom:.5rem}
.sx-pct{
  font-size:1.15rem; font-weight:750; font-variant-numeric:tabular-nums;
  padding-top:.45rem; border-top:1px dashed var(--borde);
}
.sx-pie{font-size:.66rem; font-weight:700; letter-spacing:.08em; color:var(--texto-tenue)}

@media (max-width:760px){
  .sx-panel{grid-template-columns:1fr 1fr}
  .sx-centro{grid-column:1/-1; order:-1; height:260px}
}

/* --- pirámide en barras (HTML, no lienzo) --- */
.pir-leyenda{
  display:flex; gap:1.1rem; justify-content:center; margin:.5rem 0 .7rem;
  font-size:.8rem; color:var(--texto-tenue);
}
.pir-leyenda span{display:inline-flex; align-items:center; gap:.4rem}
.pir-leyenda i{width:11px; height:11px; border-radius:3px; display:inline-block}

.pir{display:grid; gap:.3rem; position:relative}
.pir-fila{
  display:grid; align-items:center; gap:.45rem;
  grid-template-columns:1fr 11.5rem 1fr;
  cursor:help;                 /* avisa de que la fila esconde más datos */
  border-radius:5px;
}
.pir-fila:focus{outline:none}
.pir-fila:focus-visible{outline:2px solid var(--verde-claro); outline-offset:2px}
.pir.ancha .pir-fila{grid-template-columns:1fr 13rem 1fr}

/* La etiqueta viaja con la punta de la barra, flotando sobre el riel. No ocupa
   sitio en el flujo a propósito: si lo ocupara le robaría ancho a la barra y
   dos filas con el mismo valor se dibujarían de distinto largo. */
.pir-dato{
  position:absolute; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:baseline; gap:.3rem;
  padding:0 .4rem; white-space:nowrap; font-variant-numeric:tabular-nums;
  pointer-events:none;
}
.pir-dato b{font-size:.82rem; font-weight:700; color:var(--texto)}
.pir-dato em{font-size:.72rem; font-style:normal; color:var(--texto-tenue)}
.pir-dato.cero b{color:var(--texto-tenue); font-weight:600}
/* Barra larga: no queda espacio afuera, la etiqueta entra sobre el color. */
.pir-dato.dentro b{color:#fff}
.pir-dato.dentro em{color:rgba(255,255,255,.85)}
/* La columna del centro: el nombre del rango arriba y su dato debajo. Se apila
   en vez de ir en un solo renglón porque los nombres largos —«Archipiélago de
   San Andrés»— ya llenan el ancho ellos solos, y la cifra quedaría cortada. */
.pir-eti{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.02rem; padding:0 .2rem; min-width:0; text-align:center;
}
.pir-eti-n{
  max-width:100%; font-size:.78rem; font-weight:600; line-height:1.2;
  color:var(--texto); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pir-eti-d{
  display:inline-flex; align-items:baseline; gap:.28rem; line-height:1.15;
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.pir-eti-d b{font-size:.74rem; font-weight:700; color:var(--texto)}
.pir-eti-d em{font-size:.68rem; font-style:normal; color:var(--texto-tenue)}
.pir-eti-d.cero b{color:var(--texto-tenue); font-weight:600}
.pir-ala{
  position:relative; display:flex; align-items:stretch; height:19px;
  background:var(--superficie-2); border-radius:4px;
}
.pir-ala.izq{justify-content:flex-end}
.pir-ala i{display:block; min-width:2px; transition:width .35s ease}
.pir-ala.izq i{border-radius:4px 0 0 4px}
.pir-ala.der i{border-radius:0 4px 4px 0}
@media (prefers-reduced-motion:reduce){.pir-ala i{transition:none}}
/* Al imprimir, el navegador quita los fondos por ahorrar tinta. Aquí no se
   puede: la barra ES el dato, y la etiqueta de las barras largas va en blanco
   encima de ella —sin el color de fondo se volvería invisible—. */
@media print{
  .pir-ala,.pir-ala i{-webkit-print-color-adjust:exact; print-color-adjust:exact}
}

/* --- globo de detalle de la fila -----------------------------------------
   Mismo aire que el globo del mapa (.mc-globo): panel oscuro, esquina
   redondeada. Oscuro en los dos temas a propósito —un globo que cambia de
   color con el tema deja de leerse como algo que flota por encima—. */
.pir-globo{
  position:absolute; z-index:6; pointer-events:none;
  /* Se ajusta a lo que mide su tabla, con tope. Un ancho fijo obligaba a las
     columnas a salirse por la derecha en la lámina de procedencia, donde la
     cabecera dice «DEL DEPARTAMENTO» y no «DEL RANGO». */
  width:max-content; min-width:14rem; max-width:min(22rem,94%);
  padding:.6rem .7rem .55rem;
  /* Opaco, no translúcido: detrás del globo hay barras de colores y cifras, y
     cualquier transparencia las deja asomar entre los números del panel. En un
     globo decorativo da igual; en uno que se lee, no. */
  background:#141a17; color:#fff;
  border:1px solid rgba(255,255,255,.12); border-radius:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.32);
  font-size:.76rem; line-height:1.35;
}
.pir-globo[hidden]{display:none}
.pir-globo-cabeza h4{margin:0; font-size:.84rem; font-weight:700; line-height:1.25}
.pir-globo-cabeza p{margin:.12rem 0 .5rem; font-size:.68rem; color:rgba(255,255,255,.58)}
/* La hoja trae reglas globales para `table` —fondo gris en los `th`, texto en
   MAYÚSCULAS, `position:sticky`, borde inferior— pensadas para las tablas de
   la aplicación. Dentro de un globo oscuro no sirven ninguna, así que se
   apagan todas aquí en vez de andar peleando con la especificidad. */
.pir-globo-tabla{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums;
  font-size:.76rem}
.pir-globo-tabla th,.pir-globo-tabla td{
  padding:.17rem .3rem; text-align:right; white-space:nowrap;
  background:none; border:0; position:static; text-transform:none;
  letter-spacing:normal; color:inherit; vertical-align:baseline;
}
.pir-globo-tabla tbody tr:hover{background:none}
.pir-globo-tabla thead th{
  font-size:.62rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  color:rgba(255,255,255,.55); padding-bottom:.25rem;
  border-bottom:1px solid rgba(255,255,255,.16);
  /* Las cabeceras sí se parten en dos renglones; las cifras nunca. Es lo que
     permite que «Del departamento» quepa sin estirar todo el panel. */
  white-space:normal; line-height:1.15; vertical-align:bottom;
}
.pir-globo-tabla tbody th,.pir-globo-tabla tfoot th{
  text-align:left; font-weight:600; padding-left:0; font-size:.76rem;
}
.pir-globo-tabla tbody th i{
  display:inline-block; width:9px; height:9px; border-radius:2px;
  margin-right:.4rem; vertical-align:baseline;
}
.pir-globo-tabla tbody tr:first-child th,.pir-globo-tabla tbody tr:first-child td{padding-top:.3rem}
.pir-globo-tabla tfoot th,.pir-globo-tabla tfoot td{
  border-top:1px solid rgba(255,255,255,.16); padding-top:.28rem; font-weight:700;
}
.pir-globo-pie{
  margin:.45rem 0 0; padding-top:.4rem;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:.69rem; color:rgba(255,255,255,.74);
}
.pir-globo-pie em{font-style:normal; color:rgba(255,255,255,.5)}
/* Al imprimir no hay puntero: el globo no pinta nada y solo estorbaría. */
@media print{ .pir-globo{display:none!important} }

.pir-pie{
  display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem;
  margin:1rem 0 .3rem;
}
.pir-total{
  text-align:center; padding:.7rem .5rem; border-radius:var(--radio-s);
  background:var(--superficie-2); border:1px solid var(--borde); border-top-width:3px;
}
.pir-total.h{border-top-color:#2a78d6}
.pir-total.m{border-top-color:#e34948}
.pir-total.g{border-top-color:var(--verde-claro)}
:root[data-tema="oscuro"] .pir-total.h{border-top-color:#3987e5}
:root[data-tema="oscuro"] .pir-total.m{border-top-color:#e66767}
.pir-total-n{
  display:block; font-size:1.35rem; font-weight:800; line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.pir-total-t{display:block; font-size:.74rem; color:var(--texto-tenue); margin-top:.1rem}
.pir-total-p{
  display:block; font-size:.9rem; font-weight:700; margin-top:.25rem;
  font-variant-numeric:tabular-nums;
}

@media (max-width:640px){
  .pir-fila,.pir.ancha .pir-fila{grid-template-columns:1fr 7.2rem 1fr; gap:.3rem}
  .pir-eti-n{font-size:.68rem}
  .pir-eti-d b{font-size:.68rem}
  .pir-eti-d em{font-size:.62rem}
  /* En pantalla angosta el porcentaje de cada ala se esconde: el conteo es el
     dato que nadie puede deducir por su cuenta, y el porcentaje sí sale del
     pie. El del rango, en cambio, se queda: es el que resume la fila. */
  .pir-dato{padding:0 .25rem; gap:.2rem}
  .pir-dato b{font-size:.72rem}
  .pir-dato em{display:none}
  .pir-ala{height:16px}
  .pir-total-n{font-size:1.1rem}
  /* El globo en el teléfono: mismas cuatro columnas, apretadas. Se prefiere
     encoger la letra antes que quitar una columna, porque las dos bases de
     porcentaje son justamente lo que el globo viene a explicar. */
  .pir-globo{min-width:0; max-width:97%; padding:.5rem .55rem; font-size:.72rem}
  .pir-globo-cabeza h4{font-size:.78rem}
  .pir-globo-tabla{font-size:.72rem}
  .pir-globo-tabla th,.pir-globo-tabla td{padding:.15rem .14rem}
  .pir-globo-tabla tbody th,.pir-globo-tabla tfoot th{font-size:.72rem}
  .pir-globo-tabla thead th{font-size:.56rem; letter-spacing:0}
  .pir-globo-tabla tbody th i{width:8px; height:8px; margin-right:.3rem}
}

/* --- treemap --- */
.tm-caja{margin:.7rem 0 .3rem}
.tm{
  position:relative; width:100%; aspect-ratio:1000/620;
  border-radius:var(--radio-s); overflow:hidden; background:var(--superficie-2);
}
.tm-t{
  position:absolute; overflow:hidden; text-align:left; font:inherit;
  padding:.35rem .45rem; border:1px solid var(--superficie);
  display:flex; flex-direction:column; justify-content:flex-start; gap:.05rem;
}
.tm-t.pulsable{cursor:pointer}
.tm-t.pulsable:hover{filter:brightness(1.12); z-index:2}
.tm-t.pulsable:focus-visible{outline:3px solid var(--ocre); outline-offset:-3px; z-index:3}
.tm-n{font-size:.74rem; font-weight:700; line-height:1.15; overflow-wrap:anywhere}
.tm-v{font-size:.92rem; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.1}
.tm-p{font-size:.7rem; opacity:.85; font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .tm{aspect-ratio:1000/900}
  .tm-n{font-size:.66rem}
  .tm-v{font-size:.78rem}
}

/* --- ventana de detalle --- */
.mv-fondo{
  position:fixed; inset:0; z-index:60; background:rgba(8,22,32,.62);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  padding:max(1rem,env(safe-area-inset-top)) 1rem;
  animation:mvEntra .18s ease;
}
@keyframes mvEntra{from{opacity:0}to{opacity:1}}
@keyframes mvSube{from{opacity:0; transform:translateY(14px) scale(.985)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  .mv-fondo,.mv-caja{animation:none!important}
}
.mv-caja{
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--radio);
  box-shadow:var(--sombra-alta); width:min(760px,100%);
  max-height:min(86vh,900px); display:flex; flex-direction:column; overflow:hidden;
  animation:mvSube .22s cubic-bezier(.34,1.2,.64,1);
}
.mv-cabeza{
  display:flex; align-items:flex-start; gap:.75rem; justify-content:space-between;
  padding:1rem 1.1rem .85rem; border-bottom:1px solid var(--borde);
  background:linear-gradient(180deg,var(--superficie-2),var(--superficie));
  position:relative;
}
/* el mismo hilo del territorio, arriba del modal */
.mv-cabeza::before{
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--verde) 0%,var(--azul) 34%,var(--dorado) 67%,var(--naranja) 100%);
}
.mv-cabeza h3{margin:0}
.mv-cabeza p{margin:.3rem 0 0; font-size:.82rem; color:var(--texto-tenue); line-height:1.5}
.mv-cerrar{
  flex:0 0 auto; border:1px solid var(--borde); background:var(--superficie-2);
  color:var(--texto); border-radius:50%; width:32px; height:32px; cursor:pointer;
  font-size:.9rem; line-height:1;
}
.mv-cerrar{transition:background var(--transicion), color var(--transicion)}
.mv-cerrar:hover{background:var(--borde)}
.mv-cuerpo{padding:1rem 1.1rem 1.1rem; overflow:auto}
.mv-cuerpo .tabla-caja{max-height:none}
td.orden{color:var(--texto-tenue); font-variant-numeric:tabular-nums; width:2.4rem}

@media print{
  .mv-fondo{display:none!important}
  .tm-t{border-color:#fff}
}

/* ==========================================================================
   Georreferenciación y análisis. Igual que el bloque anterior: solo clases
   nuevas, nada de lo que ya funcionaba se toca.
   ========================================================================== */

/* --- mapa local (Leaflet) --- */
.mapa-caja{
  height:min(62vh,560px); min-height:340px; border-radius:var(--radio-s);
  border:1px solid var(--borde); overflow:hidden; background:var(--superficie-2);
  z-index:0;                      /* que el mapa no se monte sobre la barra */
}
.mapa-leyenda{
  display:flex; flex-wrap:wrap; gap:.35rem 1rem; margin:.5rem 0 .7rem;
  font-size:.8rem; color:var(--texto-tenue);
}
.mapa-leyenda span{display:inline-flex; align-items:center; gap:.4rem}
.mapa-leyenda i{width:11px; height:11px; border-radius:50%; display:inline-block;
  border:2px solid var(--superficie)}
.leaflet-container{background:var(--superficie-2); font:inherit}
.leaflet-popup-content-wrapper,.leaflet-tooltip{
  background:var(--superficie); color:var(--texto); border-color:var(--borde);
}
.leaflet-control-zoom a{
  background:var(--superficie); color:var(--texto); border-color:var(--borde);
}
.leaflet-control-zoom a:hover{background:var(--superficie-2)}
.leaflet-control-attribution{
  background:var(--superficie); color:var(--texto-tenue); font-size:.68rem;
}
.leaflet-control-attribution a{color:var(--verde-claro)}
.tabla-punto th{
  background:var(--superficie-2); color:var(--texto-tenue); text-transform:none;
  letter-spacing:0; font-size:.8rem; width:42%; position:static;
}

/* --- mapa de Colombia --- */
.mc-rejilla{
  display:grid; gap:1rem; margin:.7rem 0 .4rem;
  grid-template-columns:minmax(0,1fr) 290px; align-items:stretch;
}
.mc-lienzo{
  position:relative; background:var(--superficie-2); border:1px solid var(--borde);
  border-radius:var(--radio-s); overflow:hidden; min-width:0; display:flex;
}
/* El mapa se estira hasta la altura que pida el panel de al lado: así no queda
   un hueco blanco debajo del lienzo cuando la lista de departamentos es larga. */
.mc-svg{display:block; width:100%; flex:1; min-height:min(70vh,620px);
  touch-action:none; cursor:grab}
.mc-svg.moviendo{cursor:grabbing}
.mc-dep{stroke-linejoin:round; transition:fill .15s ease}
.mc-dep.con-dato{cursor:pointer}
.mc-dep.con-dato:hover{fill:var(--ocre)!important}
.mc-dep.con-dato:focus-visible{outline:none; stroke:var(--ocre); stroke-width:40}
.mc-cifra{font-weight:800; pointer-events:none; paint-order:stroke}
.mc-nombre{font-weight:600; opacity:.85; pointer-events:none}
.mc-globo{
  position:absolute; pointer-events:none; z-index:5; font-size:.78rem; line-height:1.35;
  background:rgba(20,26,23,.94); color:#fff; padding:.4rem .55rem; border-radius:8px;
  max-width:190px;
}
.mc-controles{position:absolute; left:.6rem; top:.6rem; display:grid; gap:.3rem; z-index:4}
.mc-btn{
  width:32px; height:32px; border-radius:8px; border:1px solid var(--borde);
  background:var(--superficie); color:var(--texto); font:inherit; font-size:1rem;
  cursor:pointer; line-height:1;
}
.mc-btn:hover{background:var(--superficie-2)}
.mc-panel{display:grid; gap:.8rem; min-width:0}
.mc-resumen{
  font-size:.8rem; font-weight:600; padding:.6rem .75rem; border-radius:var(--radio-s);
  background:var(--superficie-2); border:1px solid var(--borde);
}
.mc-lista{border:1px solid var(--borde); border-radius:var(--radio-s); padding:.7rem .75rem}
.mc-lista h4{
  margin:0 0 .5rem; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--texto-tenue);
}
.mc-lista ol,.mc-lista ul{margin:0; padding:0; list-style:none; display:grid; gap:.35rem}
.mc-lista ol{counter-reset:mc}
.mc-lista ol li{counter-increment:mc}
.mc-lista ol li::before{
  content:counter(mc); font-size:.7rem; color:var(--texto-tenue); margin-right:.35rem;
  font-variant-numeric:tabular-nums;
}
.mc-fila{
  display:inline-flex; justify-content:space-between; align-items:baseline; gap:.5rem;
  width:calc(100% - 1.4rem); border:0; background:none; color:var(--texto); font:inherit;
  font-size:.82rem; padding:0; cursor:pointer; text-align:left;
}
.mc-fila:hover .mc-nom{text-decoration:underline}
.mc-nom{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mc-val{font-weight:700; font-variant-numeric:tabular-nums; flex:0 0 auto}
.mc-pct{font-size:.74rem; color:var(--texto-tenue); font-variant-numeric:tabular-nums}
.mc-lista .barrita{height:5px; margin-top:.15rem; margin-left:1.4rem}
.mc-reg{display:flex; align-items:center; gap:.45rem; font-size:.82rem}
.mc-reg i{width:10px; height:10px; border-radius:3px; flex:0 0 auto}
.mc-reg .mc-nom{flex:1}
.mc-escala{display:flex; align-items:center; gap:.6rem; font-size:.74rem;
  color:var(--texto-tenue); margin:.2rem 0 .3rem}
.mc-escala i{flex:1; height:8px; border-radius:999px}

@media (max-width:900px){
  .mc-rejilla{grid-template-columns:1fr}
  .mc-svg{height:min(58vh,460px)}
}

/* --- árbol zonal --- */
.arbol-filtros{display:flex; flex-wrap:wrap; gap:.35rem; margin:.6rem 0 .2rem}
.arbol-chip{
  border:1px solid var(--borde); background:var(--superficie); color:var(--texto-tenue);
  font:inherit; font-size:.8rem; font-weight:600; padding:.32rem .75rem;
  border-radius:999px; cursor:pointer;
}
.arbol-chip:hover{background:var(--superficie-2); color:var(--texto)}
.arbol-chip.activo{background:var(--marino); color:var(--dorado); border-color:var(--marino)}
.arbol-caja{
  border:1px solid var(--borde); border-radius:var(--radio-s); background:var(--superficie);
  padding:.6rem; overflow:auto; max-height:min(78vh,760px);
}
.arbol-caja.ajustada{
  height:min(74vh,700px); max-height:none; overflow:hidden; display:grid;
}
.arbol-svg{display:block}
.arbol-link{fill:none; stroke:var(--borde); stroke-width:1.4}
.arbol-nodo{cursor:pointer}
.arbol-nodo:hover circle{fill:currentColor}
.arbol-nodo:hover .arbol-eti{text-decoration:underline}
.arbol-nodo:focus-visible{outline:none}
.arbol-nodo:focus-visible circle{stroke-width:5}
.arbol-eti{font-size:11px; fill:var(--texto); font-weight:600}
.arbol-eti.n0{font-size:13px; font-weight:750}
.arbol-eti.n3{font-size:10px; font-weight:500; fill:var(--texto-tenue)}

/* --- análisis IA --- */
.ia-filtros{display:flex; flex-wrap:wrap; gap:.35rem; margin:0 0 1rem}
.ia-chip{
  border:1px solid var(--borde); background:var(--superficie); color:var(--texto-tenue);
  font:inherit; font-size:.8rem; font-weight:600; padding:.32rem .75rem;
  border-radius:999px; cursor:pointer;
}
.ia-chip:hover{background:var(--superficie-2); color:var(--texto)}
.ia-chip.activo{background:var(--marino); color:var(--dorado); border-color:var(--marino)}
.ia-grupo{margin-bottom:1.4rem}
.ia-grupo h3{
  display:flex; align-items:baseline; gap:.55rem; font-size:.78rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--verde-claro); margin:0 0 .6rem;
}
.ia-grupo h3 small{
  font-size:.72rem; text-transform:none; letter-spacing:0; color:var(--texto-tenue);
  font-weight:500;
}
.ia-rejilla{display:grid; gap:.9rem; grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.ia-tarjeta{
  display:flex; gap:.8rem; align-items:flex-start; background:var(--superficie);
  border:1px solid var(--borde); border-radius:var(--radio); box-shadow:var(--sombra);
  padding:.9rem 1rem; min-width:0; break-inside:avoid;
}
.ia-icono{
  flex:0 0 auto; width:38px; height:38px; border-radius:10px; display:grid;
  place-content:center; background:var(--superficie-2); font-size:1.15rem;
}
.ia-tarjeta h4{
  margin:0 0 .25rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--texto-tenue);
}
.ia-tarjeta p{margin:0; font-size:.87rem; line-height:1.55}

@media print{
  .ia-filtros,.arbol-filtros,.mc-controles{display:none!important}
  .arbol-caja{max-height:none; overflow:visible}
}

/* ==========================================================================
   Asistente de nueva ficha. Solo clases nuevas: el formulario de edición,
   que sigue siendo el acordeón de módulos, no cambia en nada.
   ========================================================================== */

/* --- barra de pasos --- */
.as-pasos{
  display:flex; gap:.35rem; overflow-x:auto; margin:0 0 1rem; padding:.55rem .6rem;
  background:var(--superficie-2); border:1px solid var(--borde); border-radius:var(--radio);
  scrollbar-width:thin; box-shadow:inset 0 1px 2px rgba(15,36,48,.04);
}
.as-paso{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:.45rem;
  border:0; background:none; color:var(--texto-tenue); font:inherit; font-size:.84rem;
  font-weight:600; padding:.42rem .8rem; border-radius:999px; cursor:pointer;
  white-space:nowrap;
}
.as-paso{transition:background var(--transicion), color var(--transicion), box-shadow var(--transicion)}
.as-paso:hover{background:var(--superficie); color:var(--texto)}
.as-paso.activo{background:var(--marino); color:var(--dorado); box-shadow:var(--sombra)}
.as-paso.hecho{color:var(--ok)}
.as-paso.hecho .as-num{background:var(--ok); color:#fff; border-color:var(--ok)}
.as-paso.bloqueado{opacity:.5; cursor:not-allowed}
.as-paso.bloqueado:hover{background:none}
.as-num{
  display:grid; place-content:center; width:22px; height:22px; border-radius:50%;
  border:1px solid var(--borde); font-size:.72rem; font-weight:700; background:var(--superficie);
  color:var(--texto); transition:background var(--transicion), border-color var(--transicion);
}
.as-paso.activo .as-num{background:var(--dorado); color:var(--marino); border-color:var(--dorado)}
.as-nombre{display:none}
@media(min-width:620px){ .as-nombre{display:inline} }

/* --- cuerpo del paso --- */
.as-cuerpo{
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--radio);
  box-shadow:var(--sombra); padding:1.1rem 1.15rem 1.3rem;
}
.as-titulo{display:flex; gap:.85rem; align-items:flex-start; margin-bottom:1.1rem}
.as-titulo h2{margin:0; font-size:1.12rem}
.as-titulo p{margin:.2rem 0 0; font-size:.83rem; color:var(--texto-tenue); line-height:1.5}
.as-icono{
  flex:0 0 auto; width:40px; height:40px; border-radius:11px; display:grid;
  place-content:center; background:var(--superficie-2); font-size:1.2rem;
}
.as-bloque{margin-top:1.2rem}
.as-obligatorio{color:var(--error); font-weight:700}
.campo-fijado input,.campo-fijado select{
  background:var(--superficie-2); color:var(--texto-tenue); cursor:not-allowed;
}
/* Nombre y tipo de documento no se piden hasta validar la cédula. */
.as-oculto-hasta-validar{display:none!important}

/* --- pie de navegación --- */
.as-pie{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  margin-top:1rem; flex-wrap:wrap;
}
.as-progreso{font-size:.82rem; color:var(--texto-tenue); font-variant-numeric:tabular-nums}
.as-pie .boton{min-width:120px; justify-content:center}

/* --- identificación del encuestador --- */
.as-ident{
  display:grid; gap:.6rem; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  background:var(--superficie-2); border:1px solid var(--borde);
  border-radius:var(--radio-s); padding:.8rem .9rem; margin-bottom:1.1rem;
}
.as-ident dt{font-size:.7rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--texto-tenue); font-weight:700}
.as-ident dd{margin:.15rem 0 0; font-size:.9rem; font-weight:600}

/* --- validación del documento --- */
.as-doc{margin-top:.45rem; font-size:.82rem; line-height:1.5; display:grid; gap:.2rem}
.as-doc-bien{color:var(--ok); font-weight:600}
.as-doc-mal{color:var(--error); font-weight:600}
.as-doc-aviso{color:var(--alerta); font-weight:600}
.as-doc-espera{color:var(--texto-tenue)}

/* --- certificado de autorreconocimiento --- */
.as-certificado{
  border:1px solid var(--borde); border-left:3px solid var(--ocre);
  border-radius:0 var(--radio-s) var(--radio-s) 0; padding:.9rem 1rem; margin-top:1rem;
}
.as-certificado h3{margin:0 0 .3rem; font-size:.98rem}
.as-adjunto-estado{margin-top:.6rem; display:grid; gap:.25rem; font-size:.83rem; line-height:1.5}
.as-previa{margin-top:.6rem}
.as-mini{max-width:190px; max-height:190px; border-radius:var(--radio-s);
  border:1px solid var(--borde)}
.as-manual{margin-top:.75rem}
.as-manual-fila{display:flex; gap:.5rem; flex-wrap:wrap}
.as-manual-fila input{flex:1; min-width:200px}
.as-descripcion{margin-top:.3rem; font-style:italic}

/* --- calculado --- */
.as-calculado{
  margin-top:1.2rem; background:var(--superficie-2); border:1px solid var(--borde);
  border-radius:var(--radio-s); padding:.8rem .9rem;
}
.as-calculado h4{
  margin:0 0 .5rem; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--texto-tenue);
}

/* --- núcleo familiar --- */
.as-integrantes{margin:.8rem 0 1rem}

/* --- política y firma --- */
.as-politica{
  border:1px solid var(--borde); border-radius:var(--radio-s); padding:.9rem 1rem;
  margin-bottom:1rem;
}
.as-politica h3{margin:0 0 .4rem; font-size:.98rem}
.as-politica p{font-size:.84rem; line-height:1.6; color:var(--texto-tenue)}
.as-firma-caja h3{margin:0 0 .3rem; font-size:.98rem}
.as-firma{
  display:block; width:100%; height:200px; border:1px dashed var(--borde);
  border-radius:var(--radio-s); background:var(--superficie); touch-action:none;
  cursor:crosshair; margin-bottom:.6rem;
}
:root[data-tema="oscuro"] .as-firma{background:#eef1ee}

/* --- pie de la ventana modal (reutiliza .mv-*) --- */
.mv-pie{
  display:flex; gap:.6rem; justify-content:flex-end; flex-wrap:wrap;
  padding:.85rem 1.1rem; border-top:1px solid var(--borde); background:var(--superficie-2);
}

@media (max-width:640px){
  .as-cuerpo{padding:.9rem .85rem 1.1rem}
  .as-pie .boton{min-width:0; flex:1}
  .as-progreso{order:-1; width:100%; text-align:center}
}
@media print{ .as-pasos,.as-pie{display:none!important} }

/* --- verificación del certificado de autorreconocimiento --- */
.as-verificacion{
  margin-top:.8rem; padding-top:.8rem; border-top:1px dashed var(--borde);
  display:grid; gap:.5rem; font-size:.84rem; line-height:1.55;
}
.as-verificacion p{margin:0}
.as-enlace{word-break:break-all; font-size:.82rem}
.as-qr-crudo{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.78rem;
  background:var(--superficie-2); border:1px solid var(--borde);
  border-radius:var(--radio-s); padding:.5rem .6rem; word-break:break-all;
}
.as-verificacion .boton{justify-self:start}

/* ==========================================================================
   Compuerta de autorreconocimiento y visor de documento.
   ========================================================================== */

/* --- zona de carga --- */
.as-archivo-real{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.as-soltar{
  display:grid; place-items:center; gap:.25rem; text-align:center; cursor:pointer;
  border:2px dashed var(--borde); border-radius:var(--radio); padding:1.6rem 1rem;
  background:var(--superficie-2); color:var(--texto-tenue); margin-top:.6rem;
  transition:border-color .15s ease, background .15s ease;
}
.as-soltar:hover{border-color:var(--verde-claro); background:var(--superficie)}
.as-soltar-icono{font-size:1.7rem; line-height:1; color:var(--verde-claro)}
.as-soltar-texto{font-size:.9rem; font-weight:600; color:var(--texto)}
.as-soltar small{font-size:.76rem}

/* --- tarjeta del archivo adjuntado --- */
.as-archivo{
  margin-top:.7rem; border:1px solid var(--borde); border-radius:var(--radio);
  background:var(--superficie-2); padding:.8rem .9rem;
}
.as-archivo-fila{display:flex; gap:.85rem; align-items:center; flex-wrap:wrap}
.as-archivo-icono{font-size:1.6rem; line-height:1}
.as-archivo-datos{flex:1; min-width:180px; display:grid; gap:.15rem}
.as-archivo-datos strong{font-size:.9rem; word-break:break-all}
.as-archivo-datos small{font-size:.75rem; color:var(--texto-tenue); word-break:break-all}
.as-archivo-estado{display:flex; align-items:center; gap:.4rem; font-size:.8rem; margin-top:.2rem}
.as-archivo-acciones{display:flex; gap:.5rem; flex-wrap:wrap}

/* --- insignia de estado --- */
.as-insignia{
  display:inline-block; padding:.16rem .6rem; border-radius:999px;
  font-size:.7rem; font-weight:800; letter-spacing:.05em;
}
.as-insignia.pend{background:#fdf0d5; color:#8a5a00}
.as-insignia.ok{background:#dcf3e4; color:#1b6b3a}
:root[data-tema="oscuro"] .as-insignia.pend{background:#463519; color:#f0c26a}
:root[data-tema="oscuro"] .as-insignia.ok{background:#1c3b28; color:#8ddcae}

/* --- semáforo de la compuerta --- */
.as-compuerta{
  display:flex; gap:.85rem; align-items:flex-start; margin-top:1rem;
  padding:.95rem 1.05rem; border-radius:var(--radio-s); border:1px solid var(--borde);
  border-left-width:5px; font-size:.86rem; line-height:1.55;
  transition:border-color var(--transicion), background var(--transicion);
}
.as-compuerta p{margin:.15rem 0 0; color:var(--texto-tenue)}
.as-compuerta-icono{font-size:1.1rem; line-height:1.3}
.as-compuerta.espera{border-left-color:var(--alerta); background:var(--superficie-2)}
.as-compuerta.cerrada{border-left-color:var(--error); background:var(--superficie-2)}
.as-compuerta.abierta{border-left-color:var(--ok); background:var(--superficie-2)}

/* --- pregunta obligatoria sin responder --- */
.campo-falta input,.campo-falta select,.campo-falta .si-no,.campo-falta .opciones{
  outline:2px solid var(--error); outline-offset:2px; border-radius:var(--radio-s);
}
.campo-falta > label{color:var(--error)}

/* --- visor de documento --- */
.vd{display:grid; gap:1rem}
.vd-previa{
  background:var(--superficie-2); border:1px solid var(--borde);
  border-radius:var(--radio-s); padding:1rem; display:grid; place-items:center;
  min-height:180px;
}
.vd-previa-img{max-width:100%; max-height:340px; border-radius:6px; background:#fff}
.vd-previa-pdf{display:grid; place-items:center; gap:.5rem; text-align:center}
.vd-previa-pdf span{font-size:2.4rem; line-height:1}
.vd-previa-pdf p{margin:0; font-size:.85rem; word-break:break-all}
.vd-resultado h4{
  margin:0 0 .35rem; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--texto-tenue);
}
.vd-enlace{
  margin:0 0 .6rem; font-size:.82rem; word-break:break-all; line-height:1.5;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.vd-abrir{width:100%; justify-content:center; margin-bottom:.4rem}
.vd-estado{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap}
.vd-estado-rotulo{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--texto-tenue); font-weight:700;
}
.vd-estado .ayuda{width:100%; margin:.2rem 0 0}
.vd-validar{background:#e8b21a; color:#241c04; font-weight:800; letter-spacing:.03em}
.vd-validar:hover:not(:disabled){filter:brightness(1.06)}
.vd-validar.validado{background:#7cc79a; color:#0f2e1c; cursor:default; opacity:1}
.vd-validar:disabled{opacity:1}

/* ==========================================================================
   Consulta RUI y SISBÉN · validación en tres pasos
   Vive dentro de .mv-caja, así que hereda el ancho y el desplazamiento del
   modal. Todo en variables de tema para que funcione igual en claro y oscuro.
   ========================================================================== */
.rui{display:grid; gap:1rem}

/* --- tira de los tres pasos --- */
.rui-tira{
  display:flex; align-items:center; gap:.3rem;
  background:var(--superficie-2); border:1px solid var(--borde);
  border-radius:var(--radio-s); padding:.65rem .75rem;
}
.rui-paso{display:flex; align-items:center; gap:.4rem; min-width:0}
.rui-num{
  display:grid; place-items:center; flex:0 0 auto;
  width:1.6rem; height:1.6rem; border-radius:50%;
  background:var(--borde); color:var(--texto-tenue);
  font-size:.78rem; font-weight:800; line-height:1;
  transition:background var(--transicion), color var(--transicion), box-shadow var(--transicion);
}
.rui-rotulo{
  font-size:.74rem; font-weight:700; letter-spacing:.02em;
  color:var(--texto-tenue); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.rui-paso.activo .rui-num{
  background:var(--azul); color:#fff; box-shadow:0 0 0 4px var(--azul-tenue);
}
.rui-paso.activo .rui-rotulo{color:var(--texto); font-weight:800}
.rui-paso.hecho .rui-num{background:var(--ok); color:var(--texto-boton)}
.rui-paso.fallo .rui-num{background:var(--error); color:#fff}
.rui-paso.fallo .rui-rotulo{color:var(--error)}
/* El cuarto no es un paso del modal sino la meta: va en verde y apagado
   hasta que de verdad se llega. */
.rui-paso.meta .rui-num{background:transparent; border:1.5px dashed var(--borde); color:var(--texto-tenue)}
.rui-paso.meta.activo .rui-num,
.rui-paso.meta.hecho .rui-num{background:var(--ok); border-color:var(--ok); color:var(--texto-boton)}
.rui-linea{flex:1 1 auto; height:2px; background:var(--borde); border-radius:2px; min-width:.6rem}

.rui-cuerpo{min-height:9rem}
.rui-seccion{display:grid; gap:.85rem}
.rui-pie{display:flex; gap:.5rem; flex-wrap:wrap; justify-content:flex-end; width:100%}

/* --- la cédula que se está validando --- */
.rui-cedula{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  background:var(--superficie-2); border:1px solid var(--borde);
  border-radius:var(--radio-s); padding:.7rem .85rem;
}
.rui-cedula-rotulo{
  font-size:.66rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--texto-tenue); font-weight:700; width:100%;
}
.rui-cedula strong{
  font-size:1.35rem; letter-spacing:.06em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.rui-ok-pastilla{
  font-size:.7rem; font-weight:700; padding:.2rem .5rem; border-radius:999px;
  background:var(--verde-tenue); color:var(--ok);
}

.rui-espera{color:var(--texto-tenue); font-size:.85rem; margin:0}
.rui-guia{margin:0; font-size:.86rem; line-height:1.55}
.rui-instrucciones{margin:0; padding-left:1.15rem; font-size:.85rem; line-height:1.6}
.rui-instrucciones li{margin-bottom:.25rem}
.rui-acciones{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center}
.rui-copiado{font-size:.76rem; color:var(--ok); font-weight:700}

/* --- fin del proceso y registro correcto --- */
.rui-fin,.rui-listo{
  border-radius:var(--radio-s); padding:1rem 1.05rem; border:1px solid;
}
.rui-fin{background:rgba(164,19,60,.07); border-color:rgba(164,19,60,.35)}
.rui-listo{background:var(--verde-tenue); border-color:var(--verde-claro)}
@keyframes ruiLogro{from{opacity:0; transform:scale(.97)}to{opacity:1; transform:none}}
.rui-listo{animation:ruiLogro .25s cubic-bezier(.34,1.3,.64,1)}
@media (prefers-reduced-motion:reduce){.rui-listo{animation:none}}
.rui-fin h4{margin:0 0 .45rem; color:var(--error); font-size:1rem}
.rui-listo h4{margin:0 0 .45rem; color:var(--ok); font-size:1rem}
.rui-fin p,.rui-listo p{margin:0 0 .4rem; font-size:.87rem; line-height:1.55}
.rui-fin p:last-child,.rui-listo p:last-child{margin-bottom:0}
.rui-fin-sello{
  font-size:.68rem!important; text-transform:uppercase; letter-spacing:.09em;
  font-weight:800; color:var(--error); margin-top:.6rem!important;
}

/* --- captura, lectura y comprobaciones --- */
.rui-previa{
  display:grid; gap:.4rem; justify-items:center; padding:.6rem;
  background:var(--superficie-2); border:1px solid var(--borde);
  border-radius:var(--radio-s);
}
.rui-previa img{max-width:100%; max-height:260px; border-radius:6px; background:#fff}
.rui-previa small{color:var(--texto-tenue); font-size:.72rem; text-align:center; word-break:break-all}

.rui-progreso{display:grid; gap:.4rem; font-size:.8rem; color:var(--texto-tenue)}
.rui-barra{height:6px; background:var(--borde); border-radius:99px; overflow:hidden}
.rui-barra i{display:block; height:100%; width:0; background:var(--verde-claro); transition:width .2s}

.rui-checks{
  display:grid; gap:.4rem; padding:.75rem .85rem;
  background:var(--superficie-2); border:1px solid var(--borde);
  border-radius:var(--radio-s);
}
.rui-checks h5{
  margin:0 0 .2rem; font-size:.66rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--texto-tenue);
}
.rui-checks .ayuda{margin:.35rem 0 0}
.rui-check{display:flex; gap:.5rem; align-items:flex-start; font-size:.84rem; line-height:1.45}
.rui-check-icono{
  flex:0 0 auto; width:1.15rem; height:1.15rem; border-radius:50%;
  display:grid; place-items:center; font-size:.72rem; font-weight:800; margin-top:.1rem;
}
.rui-check.si{color:var(--texto)}
.rui-check.si .rui-check-icono{background:var(--verde-tenue); color:var(--ok)}
.rui-check.no{color:var(--error); font-weight:600}
.rui-check.no .rui-check-icono{background:rgba(194,43,74,.14); color:var(--error)}
/* Informativo: el nombre leído no es una condición, es un dato. */
.rui-check.aviso{color:var(--texto-tenue)}
.rui-check.aviso .rui-check-icono{background:var(--superficie-2); color:var(--texto-tenue)}
.rui-check.si b{color:var(--texto)}
.rui-leido-aviso{
  margin:0; font-size:.82rem; line-height:1.55; color:var(--texto-tenue);
  background:var(--verde-tenue); border-radius:var(--radio-s); padding:.65rem .8rem;
}
.rui-leido-aviso b{color:var(--ok)}

.rui-leido summary{cursor:pointer; font-size:.78rem; color:var(--texto-tenue)}
.rui-texto{
  margin:.5rem 0 0; max-height:11rem; overflow:auto; white-space:pre-wrap;
  font-size:.74rem; line-height:1.5; background:var(--superficie-2);
  border:1px solid var(--borde); border-radius:var(--radio-s); padding:.6rem .7rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}

.rui-manual{
  display:grid; gap:.45rem; padding:.8rem .85rem; border:1px dashed var(--borde);
  border-radius:var(--radio-s);
}
.rui-manual h5{margin:0; font-size:.85rem}
.rui-manual .ayuda{margin:0}
.rui-manual textarea{width:100%}
.rui-manual .boton{justify-self:start}

.rui-resumen{
  display:grid; gap:.6rem; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  background:var(--superficie-2); border:1px solid var(--borde);
  border-radius:var(--radio-s); padding:.8rem .85rem;
}
.rui-resumen dt{
  font-size:.64rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--texto-tenue); font-weight:700;
}
.rui-resumen dd{margin:.15rem 0 0; font-size:.87rem; font-weight:600}

@media (max-width:520px){
  .rui-rotulo{display:none}
  .rui-paso.activo .rui-rotulo{display:inline}
  .rui-cedula strong{font-size:1.15rem}
  .rui-pie{justify-content:stretch}
  .rui-pie>*{flex:1 1 auto; justify-content:center}
}
.rui-atajo{
  justify-self:start; background:none; border:0; padding:.2rem 0; cursor:pointer;
  color:var(--verde-claro); font:inherit; font-size:.8rem; text-decoration:underline;
}
.rui-atajo:hover{color:var(--verde)}

/* ==========================================================================
   Equipo · fotografías y firmas
   ========================================================================== */
.avatar-eq{
  position:relative; flex:0 0 auto; border-radius:50%; overflow:hidden;
  background:linear-gradient(145deg,var(--verde),var(--azul));
  display:grid; place-items:center; box-shadow:0 0 0 2px var(--superficie), var(--sombra);
}
.avatar-eq-txt{
  color:#fff; font-weight:750; letter-spacing:.02em;
  font-size:clamp(.72rem,38%,1.15rem); line-height:1; user-select:none;
}
.avatar-eq img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.firma-eq{
  background:#fff; border:1px solid var(--borde); border-radius:var(--radio-s);
  padding:.6rem; min-height:70px; display:grid; place-items:center;
}
.firma-eq img{max-width:100%; max-height:120px; display:block}

.eq-resumen{margin-bottom:1.1rem}
.eq-rejilla{display:grid; gap:.8rem; grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.eq-tarjeta{display:flex; align-items:center; gap:.85rem; padding:.9rem}
.eq-tarjeta.apagada{opacity:.62}
.eq-datos{min-width:0; flex:1 1 auto; display:grid; gap:.1rem}
.eq-datos strong{font-size:.95rem; line-height:1.25}
.eq-datos small{color:var(--texto-tenue); font-size:.78rem; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.eq-rol{font-size:.78rem; color:var(--azul); font-weight:650}
.eq-marcas{display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.25rem}
.eq-forma{display:grid; gap:1rem}
.eq-previa{display:grid; gap:.5rem; justify-items:center; text-align:center}
.eq-previa .ayuda{max-width:42ch}
:root[data-tema="oscuro"] .firma-eq{background:#f4f6f8}
.eq-acceso{
  border:1px solid var(--borde); border-left:4px solid var(--azul);
  border-radius:var(--radio-s); padding:.95rem 1.05rem; display:grid; gap:.7rem;
  background:var(--superficie-2);
}
.eq-acceso h4{margin:0; font-size:.95rem}
.eq-acceso .ayuda{margin:0}
.eq-ver{justify-self:start; font-size:.83rem; padding:.35rem .55rem}
.eq-estado-acceso p{margin:0; font-size:.85rem}
.diag-resumen{display:flex; gap:.8rem; margin-bottom:1rem; flex-wrap:wrap}
.diag-cifra{
  flex:1 1 8rem; display:grid; gap:.1rem; padding:.8rem .9rem;
  border:1px solid var(--borde); border-radius:var(--radio-s); background:var(--superficie-2);
  border-left-width:4px;
}
.diag-cifra strong{font-size:1.6rem; line-height:1; font-variant-numeric:tabular-nums}
.diag-cifra span{font-size:.8rem; color:var(--texto-tenue)}
.diag-cifra.ok{border-left-color:var(--ok)} .diag-cifra.ok strong{color:var(--ok)}
.diag-cifra.mal{border-left-color:var(--error)} .diag-cifra.mal strong{color:var(--error)}
.diag-motivo{font-size:.84rem; color:var(--error); font-weight:600}

/* ==========================================================================
   Fotografía y firma · campos de captura
   ========================================================================== */
.img-campo,.firma-campo{display:grid; gap:.6rem; justify-items:start}
.img-previa{display:grid; gap:.35rem; justify-items:center; justify-self:stretch}
.img-previa img{
  max-width:130px; max-height:130px; border-radius:14px; object-fit:cover;
  border:1px solid var(--borde); box-shadow:var(--sombra); background:#fff;
}
.img-previa small{color:var(--texto-tenue); font-size:.74rem; text-align:center}
.img-vacia{
  width:110px; height:110px; border-radius:50%; display:grid; place-items:center;
  font-size:2.4rem; background:var(--superficie-2); border:1px dashed var(--borde);
}
.img-botones{display:flex; gap:.4rem; flex-wrap:wrap; align-items:center}
.img-botones label{margin:0; font-weight:600; cursor:pointer}
.firma-campo .as-firma{width:100%; max-width:420px}

/* ==========================================================================
   Perfil · Mi cuenta
   ========================================================================== */
.perfil-cabeza{display:flex; gap:1rem; align-items:center; margin-bottom:1rem; flex-wrap:wrap}
.perfil-rol{margin:0 0 .15rem; color:var(--azul); font-weight:650; font-size:.86rem}
.perfil-firma{margin-top:1rem}
.perfil-firma h4{margin:0 0 .45rem; font-size:.68rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--texto-tenue)}
.perfil-firma .ayuda{margin-top:.45rem}
.avatar.avatar-foto,.avatar .avatar-foto{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  border-radius:50%; display:block;
}
.avatar{position:relative; overflow:hidden}

/* ==========================================================================
   Documentos de consentimiento
   ========================================================================== */
.doc-tarjetas{display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.doc-tarjeta{
  display:flex; gap:.85rem; padding:1rem; background:var(--superficie);
  border:1px solid var(--borde); border-left:4px solid var(--borde);
  border-radius:var(--radio); box-shadow:var(--sombra);
  transition:border-color var(--transicion), box-shadow var(--transicion);
}
.doc-tarjeta:hover{box-shadow:var(--sombra-alta)}
.doc-tarjeta.aceptado{border-left-color:var(--ok)}
.doc-icono{font-size:1.7rem; line-height:1; flex:0 0 auto}
.doc-datos{display:grid; gap:.25rem; min-width:0; align-content:start}
.doc-etiqueta{
  font-size:.65rem; text-transform:uppercase; letter-spacing:.09em;
  color:var(--texto-tenue); font-weight:800;
}
.doc-datos h4{margin:0; font-size:1rem; line-height:1.25}
.doc-datos p{margin:0; font-size:.84rem; color:var(--texto-tenue); line-height:1.5}
.doc-aceptado{color:var(--ok)!important; font-weight:650}
.doc-pendiente{color:var(--alerta)!important; font-weight:650}
.enlace-boton{
  background:none; border:0; padding:0; cursor:pointer; font:inherit;
  color:var(--azul); font-weight:650; text-align:left;
}
.enlace-boton:hover{text-decoration:underline}
.doc-ver{font-size:.86rem; margin-top:.2rem}
.doc-aceptar{margin-top:.5rem; justify-self:start}

.doc-cuerpo{display:grid; gap:1.1rem; font-size:.9rem; line-height:1.65}
.doc-identidad{
  background:var(--superficie-2); border-radius:var(--radio-s); padding:.85rem 1rem;
  border:1px solid var(--borde);
}
.doc-identidad p{margin:0}
.doc-seccion h4{
  display:flex; align-items:center; gap:.5rem; margin:0 0 .4rem; font-size:.95rem;
}
.doc-num{
  flex:0 0 auto; width:1.5rem; height:1.5rem; border-radius:50%;
  display:grid; place-items:center; background:var(--azul); color:#fff;
  font-size:.75rem; font-weight:800;
}
.doc-seccion p{margin:0 0 .5rem}
.doc-seccion ul{margin:.2rem 0 0; padding-left:1.15rem}
.doc-seccion li{margin-bottom:.3rem}
.doc-aceptacion{
  display:flex; gap:.7rem; align-items:flex-start; padding:.9rem 1rem;
  background:var(--verde-tenue); border-radius:var(--radio-s);
}
.doc-aceptacion p{margin:0; font-weight:600}
.doc-visto{
  flex:0 0 auto; width:1.5rem; height:1.5rem; border-radius:50%; display:grid;
  place-items:center; background:var(--ok); color:var(--texto-boton); font-weight:800;
}
.doc-plaza{
  display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  background:var(--superficie-2); border:1px solid var(--borde);
  border-radius:var(--radio-s); padding:.8rem .9rem;
}
.doc-plaza dt{font-size:.64rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--texto-tenue); font-weight:700}
.doc-plaza dd{margin:.15rem 0 0; font-weight:650}

.doc-firmas{
  display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  margin-top:.4rem;
}
.doc-firmas-resumen{margin-top:1.2rem}
.doc-firma{display:grid; gap:.15rem; justify-items:center; text-align:center}
.doc-firma-lamina{
  width:100%; min-height:88px; display:grid; place-items:center; background:#fff;
  border-radius:var(--radio-s); padding:.4rem;
}
.doc-firma-lamina img{max-width:100%; max-height:80px; display:block}
.doc-firma-falta{color:#9aa8a0; font-size:.8rem}
.doc-firma-linea{width:100%; height:1px; background:var(--texto-tenue); margin:.2rem 0 .4rem}
.doc-firma strong{font-size:.8rem}
.doc-firma span{font-size:.86rem; color:var(--texto)}
.doc-firma small{font-size:.76rem; color:var(--texto-tenue)}

/* La fotografía de quien levantó la ficha, junto a su nombre y debajo de la
   línea. Pequeña a propósito: acompaña a la firma, no compite con ella. */
.doc-firma-quien{display:flex; align-items:center; gap:.45rem; justify-content:center}
.doc-firma-quien span{font-size:.86rem; color:var(--texto)}
.doc-firma-retrato{flex:0 0 auto}
.doc-firma-nota{font-style:italic; max-width:22ch; line-height:1.3}

/* El pie de la ficha: la cara de quien la levantó junto a la línea de siempre. */
.ficha-autor{display:flex; align-items:center; gap:.6rem; margin-top:1rem}
.ficha-autor .kpi-nota{margin:0}
.doc-modulo .modulo-cuerpo{display:grid; gap:1rem}

@media print{
  .doc-tarjeta{box-shadow:none; break-inside:avoid}
  .doc-firmas{break-inside:avoid}
  .doc-ver,.doc-aceptar{display:none!important}
}

/* ─────────────────────────────────────────── los dos mapas de la ficha ──
   Uno al lado del otro en pantalla ancha, uno debajo del otro en el teléfono.
   Alto fijo: si el mapa creciera con el contenido, en el teléfono se comería
   la pantalla y habría que hacer scroll dentro del mapa para salir de él. */
.mapas-ficha{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.mapa-ficha{display:flex; flex-direction:column; gap:.4rem}
.mapa-ficha-titulo{display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem}
.mapa-ficha-titulo strong{font-size:.95rem; color:var(--texto)}
.mapa-ficha-titulo span{font-size:.82rem; color:var(--texto-tenue)}
.mapa-ficha-lienzo{
  height:230px; border-radius:var(--radio-s); overflow:hidden;
  border:1px solid var(--borde); background:var(--fondo-suave);
}
.mapa-ficha-pie{margin:0; font-size:.78rem; color:var(--texto-tenue); font-family:var(--mono,monospace)}
.mapa-ficha-vacio{
  padding:.9rem 1rem; border:1px dashed var(--borde); border-radius:var(--radio-s);
  color:var(--texto-tenue); font-size:.86rem; line-height:1.4; background:var(--fondo-suave);
}
.mapa-ficha-vacio code{font-size:.82rem; color:var(--vino)}

/* Al imprimir, el mapa no sirve: sale un recuadro gris o a medio cargar.
   Se deja la coordenada, que es el dato. */
@media print{
  .mapa-ficha-lienzo{display:none}
  .mapas-ficha{grid-template-columns:1fr 1fr}
}
.mapa-alfiler{background:none; border:0}
.mapa-alfiler svg{filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}