/* =====================================================================
   SISTEMA ORA · Hoja de estilos
   =====================================================================

   PARA QUIÉN ESTÁ HECHO ESTO
   --------------------------
   Para coordinadores que pasan horas escribiendo cédulas y nombres, en
   equipos modestos y pantallas pequeñas, muchas veces sin experiencia
   previa con sistemas. La interfaz tiene que ser legible antes que
   bonita, y predecible antes que original.

   CÓMO SE USA EL COLOR
   --------------------
   Regla base: el 90% de la pantalla es neutro (papel, blanco, gris). El
   color aparece sólo cuando SIGNIFICA algo. Una pantalla donde todo
   está coloreado es una pantalla donde nada resalta.

   Se usan tres familias y ninguna más:

   1. AZUL INSTITUCIONAL — identidad y acción.
      Barra lateral, botones principales, enlaces. Es el color del
      partido y el que dice "esto se puede pulsar".

   2. SEMÁFORO (verde / ámbar / rojo) — estado de las cosas.
      Verde = completo o correcto. Ámbar = a medias, atención.
      Rojo = bloqueado o error. NUNCA se usa como decoración: si algo
      es verde, es porque está completo.

   3. GRIS — ausencia de dato. Un territorio gris no es un territorio
      malo: es uno donde todavía no hay nada registrado. Distinguir
      "cero" de "malo" evita malas lecturas en los reportes.

   DALTONISMO
   ----------
   Cerca del 8% de los hombres no distingue bien rojo de verde. Por eso:
   - Todo color va acompañado de texto o de un icono. Nunca se pide
     interpretar un color a solas.
   - El mapa NO usa la escala rojo-amarillo-verde, que es justamente la
     que se pierde. Usa una escala de un solo tono (claro → oscuro):
     todo el mundo distingue claro de oscuro.

   CONTRASTE
   ---------
   Todas las combinaciones de texto verificadas contra WCAG AA (4.5:1).
   El texto principal llega a 15.9:1 y el de la barra lateral a 13.4:1.

   TIPOGRAFÍA
   ----------
   Archivo para títulos, IBM Plex Sans para el cuerpo, y IBM Plex Mono
   para TODO lo que sea código o número: cédulas, C12-137, 1x12-482,
   conteos. Un dígito en monoespaciada se compara con otro sin
   equivocarse, y aquí equivocarse de dígito es equivocarse de persona.
   ===================================================================== */

:root {
    /* --- Neutros: el fondo de todo --------------------------------- */
    --papel:       #F7F9FC;   /* fondo de la aplicación */
    --blanco:      #FFFFFF;   /* tarjetas y campos */
    --tinta:       #0F1E2E;   /* texto principal      15.99:1 */
    --tinta-70:    #4A5A6E;   /* texto secundario      6.68:1 */
    --tinta-45:    #5E6E82;   /* texto tenue           4.94:1 */
    --linea:       #D9E1EC;   /* bordes visibles */
    --linea-suave: #ECF1F7;   /* separadores internos */

    /* --- Azul institucional: identidad y acción --------------------- */
    --azul:        #12508F;   /* botones y enlaces     8.17:1 en blanco */
    --azul-fuerte: #0D3D6E;   /* estado :hover */
    --azul-claro:  #2B72B8;   /* acentos secundarios */
    --azul-humo:   #E6F0F9;   /* fondos informativos */
    --azul-borde:  #C2D9EE;

    /* --- Semáforo: SÓLO para indicar estado ------------------------- */
    --verde:       #0E6B45;   --verde-humo: #E3F5EC;  --verde-borde: #B4E0C9;
    --ambar:       #7A4E00;   --ambar-humo: #FCF1DA;  --ambar-borde: #E8D0A0;
    --rojo:        #9E2B1B;   --rojo-humo:  #FBE9E6;  --rojo-borde:  #EFC4BC;

    /* --- Acentos de apoyo ------------------------------------------ */
    --aqua:        #0E7C8A;   /* elemento activo, foco */
    --aqua-humo:   #E1F4F6;
    --dorado:      #8A6410;   /* exclusivo de metas */
    --dorado-humo: #FBF3DE;

    /* --- Barra lateral --------------------------------------------- */
    --barra-fondo: #0F1E2E;
    --barra-texto: #DCE6F2;   /* 13.36:1 sobre el fondo */
    --barra-tenue: #8FA3BC;

    /* --- Escala del mapa: un solo tono, claro a oscuro -------------- */
    /* Se lee igual con cualquier tipo de daltonismo, porque lo que
       cambia es la luminosidad, no el matiz. */
    --mapa-0: #E9EEF4;   /* sin datos: gris, no es "malo", es "vacío" */
    --mapa-1: #E8F0F7;
    --mapa-2: #BCD5EA;
    --mapa-3: #7FB0D8;
    --mapa-4: #3F82BE;
    --mapa-5: #12508F;

    /* --- Tipografía ------------------------------------------------ */
    --display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
    --cuerpo:  'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    --dato:    'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

    /* --- Medidas --------------------------------------------------- */
    --barra:       248px;
    --radio:       10px;
    --radio-s:     6px;
    --sombra:      0 1px 2px rgba(15,30,46,.05), 0 6px 20px rgba(15,30,46,.05);
    --sombra-alta: 0 12px 40px rgba(15,30,46,.16);
}

/* ------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--cuerpo);
    font-size: 15px;
    line-height: 1.55;
    color: var(--tinta);
    background: var(--papel);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 600;
    letter-spacing: -.015em;
    margin: 0 0 .4em;
    line-height: 1.2;
}
h1 { font-size: 1.55rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }

a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
    outline: 3px solid var(--aqua);
    outline-offset: 2px;
    border-radius: 3px;
}

.mono, code { font-family: var(--dato); font-variant-numeric: tabular-nums; }

.oculto { display: none !important; }
.solo-lectores {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

/* ------------------------------------------------------- estructura */

.aplicacion { display: flex; min-height: 100vh; }

.barra {
    width: var(--barra);
    flex: 0 0 var(--barra);
    background: var(--tinta);
    color: var(--barra-texto);
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    overflow-y: auto;
    transition: transform .22s ease;
}

.barra__marca {
    display: flex; align-items: center; gap: .65rem;
    padding: 1.1rem 1.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.barra__sigla {
    font-family: var(--display);
    font-weight: 700; font-size: 1.35rem; letter-spacing: .06em;
    color: var(--blanco);
    background: var(--azul);
    border-radius: var(--radio-s);
    padding: .18rem .5rem;
    line-height: 1.1;
}
.barra__nombre { font-size: .72rem; line-height: 1.25; color: var(--barra-tenue); }

.barra__grupo { padding: .9rem 0 .1rem; }
.barra__titulo {
    font-size: .66rem; text-transform: uppercase; letter-spacing: .12em;
    color: var(--barra-tenue); padding: 0 1.15rem .35rem; font-weight: 600;
}
.barra__enlace {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem 1.15rem;
    color: var(--barra-texto); font-size: .875rem;
    border-left: 3px solid transparent;
}
.barra__enlace:hover { background: rgba(255, 255, 255, .06); color: var(--blanco); text-decoration: none; }
.barra__enlace.activo {
    background: rgba(23, 179, 196, .12);
    border-left-color: var(--aqua);
    color: var(--blanco); font-weight: 500;
}
.barra__enlace svg { width: 17px; height: 17px; flex: 0 0 17px; opacity: .85; }
.barra__marca-num {
    margin-left: auto; background: var(--rojo); color: var(--blanco);
    font-family: var(--dato); font-size: .68rem; font-weight: 600;
    border-radius: 999px; padding: .05rem .38rem;
}

.barra__pie {
    margin-top: auto; padding: .9rem 1.15rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: .78rem;
}
.barra__usuario { color: var(--blanco); font-weight: 500; }
.barra__rol { color: var(--barra-tenue); font-size: .72rem; }
.barra__salir { color: var(--barra-tenue); font-size: .76rem; display: inline-block; margin-top: .4rem; }
.barra__salir:hover { color: var(--blanco); }

.lienzo {
    flex: 1;
    margin-left: var(--barra);
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.cabecera {
    background: var(--blanco);
    border-bottom: 1px solid var(--linea);
    padding: .85rem 1.6rem;
    display: flex; align-items: center; gap: 1rem;
    position: sticky; top: 0; z-index: 40;
}
.cabecera h1 { margin: 0; }
.cabecera__sub { color: var(--tinta-45); font-size: .82rem; margin-top: .1rem; }
.cabecera__acciones { margin-left: auto; display: flex; gap: .5rem; align-items: center; }

.contenido { padding: 1.6rem; flex: 1; }
.contenido > * + * { margin-top: 1.15rem; }

.menu-movil {
    display: none;
    background: none; border: 1px solid var(--linea);
    border-radius: var(--radio-s); padding: .4rem .55rem; cursor: pointer;
}

/* ------------------------------------------------------------ avisos */

.aviso {
    display: flex; gap: .65rem; align-items: flex-start;
    padding: .75rem .95rem;
    border-radius: var(--radio);
    border: 1px solid;
    font-size: .9rem;
}
.aviso + .aviso { margin-top: .5rem; }
.aviso--exito { background: var(--verde-humo); border-color: var(--verde-borde); color: var(--verde); }
.aviso--error { background: var(--rojo-humo); border-color: var(--rojo-borde); color: var(--rojo); }
.aviso--aviso { background: var(--ambar-humo); border-color: var(--ambar-borde); color: var(--ambar); }
.aviso--info  { background: var(--azul-humo);  border-color: var(--azul-borde); color: var(--azul); }
.aviso__cerrar {
    margin-left: auto; background: none; border: 0; cursor: pointer;
    color: inherit; opacity: .55; font-size: 1.1rem; line-height: 1; padding: 0 .2rem;
}
.aviso__cerrar:hover { opacity: 1; }

/* ------------------------------------------------------------ panel */

.panel {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}
.panel__cabeza {
    padding: .9rem 1.15rem;
    border-bottom: 1px solid var(--linea-suave);
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}
.panel__cabeza h2 { margin: 0; font-size: 1rem; }
.panel__nota { color: var(--tinta-45); font-size: .8rem; }
.panel__cuerpo { padding: 1.15rem; }
.panel__cuerpo--liso { padding: 0; }
.panel__pie {
    padding: .8rem 1.15rem; border-top: 1px solid var(--linea-suave);
    background: #FAFCFE; border-radius: 0 0 var(--radio) var(--radio);
    display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
}

/* ============================================================
   LA ESCALERA · el elemento propio de este sistema
   ------------------------------------------------------------
   Muestra los tres eslabones (Estructura → Casa de 12 → 1x12) y,
   dentro de cada uno, doce marcas: una por cupo. De un vistazo se
   sabe cuántas personas faltan para completar una casa, que es la
   pregunta que un coordinador se hace todo el día.
   ============================================================ */

.escalera {
    display: flex; align-items: stretch; gap: 0;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    overflow: hidden;
}
.escalon {
    flex: 1; padding: .8rem 1rem; min-width: 0;
    border-right: 1px solid var(--linea-suave);
    position: relative;
}
.escalon:last-child { border-right: 0; }
.escalon--activo { background: var(--aqua-humo); }
.escalon--activo::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--aqua);
}
.escalon__nivel {
    font-size: .64rem; text-transform: uppercase; letter-spacing: .11em;
    color: var(--tinta-45); font-weight: 600;
}
.escalon__titulo {
    font-family: var(--display); font-weight: 600; font-size: .95rem;
    margin: .1rem 0 .05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.escalon__codigo {
    font-family: var(--dato); font-size: .78rem; color: var(--azul);
    letter-spacing: -.01em;
}
.escalon__cupos { display: flex; gap: 3px; margin-top: .5rem; }
.cupo {
    flex: 1; height: 6px; border-radius: 2px;
    background: var(--linea);
}
.cupo--lleno { background: var(--azul); }
.cupo--completo { background: var(--verde); }
.escalon__leyenda {
    font-size: .72rem; color: var(--tinta-70); margin-top: .35rem;
    font-family: var(--dato);
}
.escalon--vacio .escalon__titulo { color: var(--tinta-45); font-weight: 400; }

/* ----------------------------------------------------- indicadores */

.tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: .85rem;
}
.dato {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: .95rem 1.05rem;
    box-shadow: var(--sombra);
}
.dato__etiqueta {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--tinta-45); font-weight: 600;
}
.dato__cifra {
    font-family: var(--dato); font-size: 1.75rem; font-weight: 600;
    letter-spacing: -.03em; line-height: 1.15; margin-top: .25rem;
    font-variant-numeric: tabular-nums;
}
.dato__pie { font-size: .78rem; color: var(--tinta-70); margin-top: .15rem; }
.dato--meta .dato__cifra { color: var(--dorado); }
.dato--destacado { border-left: 3px solid var(--azul); }

.progreso {
    height: 7px; background: var(--linea); border-radius: 99px;
    overflow: hidden; margin-top: .55rem;
}
.progreso__barra { height: 100%; background: var(--azul); border-radius: 99px; }
.progreso__barra--meta { background: var(--dorado); }
.progreso__barra--completo { background: var(--verde); }

/* --------------------------------------------------------- tablas */

.tabla-contenedor { overflow-x: auto; }

table.tabla {
    width: 100%; border-collapse: collapse; font-size: .875rem;
}
.tabla th {
    text-align: left; font-weight: 600; font-size: .7rem;
    text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-45);
    padding: .6rem .8rem; border-bottom: 1px solid var(--linea);
    background: #FAFCFE; white-space: nowrap; position: sticky; top: 0;
}
.tabla td {
    padding: .6rem .8rem; border-bottom: 1px solid var(--linea-suave);
    vertical-align: middle;
}
.tabla tbody tr:hover { background: #F7FAFD; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla .num {
    font-family: var(--dato); font-variant-numeric: tabular-nums; text-align: right;
}
.tabla .cod { font-family: var(--dato); font-size: .82rem; color: var(--azul); }
.tabla--compacta td, .tabla--compacta th { padding: .42rem .65rem; }

.puesto {
    font-family: var(--dato); font-weight: 600; color: var(--tinta-45);
    width: 2.2rem; text-align: right;
}
.mov { font-family: var(--dato); font-size: .78rem; }
.mov--sube  { color: var(--verde); }
.mov--baja  { color: var(--rojo); }
.mov--igual { color: var(--tinta-45); }

/* ------------------------------------------------------ etiquetas */

.etiqueta {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .72rem; font-weight: 600;
    padding: .16rem .5rem; border-radius: 99px;
    border: 1px solid transparent; white-space: nowrap;
}
.etiqueta--azul   { background: var(--azul-humo);   color: var(--azul); border-color: var(--azul-borde); }
.etiqueta--aqua   { background: var(--aqua-humo);   color: var(--aqua); border-color: var(--aqua-borde, #B6E5EA); }
.etiqueta--verde  { background: var(--verde-humo);  color: var(--verde); border-color: var(--verde-borde); }
.etiqueta--dorado { background: var(--ambar-humo); color: var(--ambar); border-color: var(--ambar-borde); }
.etiqueta--roja   { background: var(--rojo-humo);   color: var(--rojo); border-color: var(--rojo-borde); }
.etiqueta--gris   { background: #EFF3F8; color: var(--tinta-70); border-color: var(--linea); }

/* ------------------------------------------------------ formulario */

.campos {
    display: grid; grid-template-columns: repeat(12, 1fr); gap: .9rem 1rem;
}
.campo { grid-column: span 12; min-width: 0; }
.campo--2  { grid-column: span 2; }
.campo--3  { grid-column: span 3; }
.campo--4  { grid-column: span 4; }
.campo--6  { grid-column: span 6; }
.campo--8  { grid-column: span 8; }
.campo--9  { grid-column: span 9; }

.campo label, .etiqueta-campo {
    display: block; font-size: .78rem; font-weight: 600;
    color: var(--tinta-70); margin-bottom: .28rem;
}
.campo label .req { color: var(--rojo); }

input[type="text"], input[type="number"], input[type="password"],
input[type="search"], input[type="date"], input[type="email"],
select, textarea {
    width: 100%;
    font-family: inherit; font-size: .9rem; color: var(--tinta);
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio-s);
    padding: .5rem .65rem;
    transition: border-color .12s ease, box-shadow .12s ease;
}
input[type="number"], input.mono, .campo--codigo input {
    font-family: var(--dato); font-variant-numeric: tabular-nums;
}
input:hover, select:hover, textarea:hover { border-color: #C3CFDE; }
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--azul-claro);
    box-shadow: 0 0 0 3px rgba(22, 104, 184, .14);
}
input:disabled, select:disabled, textarea:disabled {
    background: #F2F5F9; color: var(--tinta-45); cursor: not-allowed;
}
select { appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C8CA3' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .5rem center; background-size: 15px;
    padding-right: 1.9rem;
}
textarea { min-height: 90px; resize: vertical; }

.pista { font-size: .76rem; color: var(--tinta-45); margin-top: .25rem; }
.pista--error { color: var(--rojo); font-weight: 500; }
.pista--ok    { color: var(--verde); font-weight: 500; }

.campo--fijo input, .campo--fijo select { background: #F2F5F9; }
.candado {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .7rem; color: var(--tinta-45); font-weight: 500;
}

fieldset.bloque {
    border: 0; padding: 0; margin: 0 0 1.4rem;
}
fieldset.bloque:last-of-type { margin-bottom: 0; }
.bloque__titulo {
    display: flex; align-items: baseline; gap: .55rem;
    font-family: var(--display); font-weight: 600; font-size: .92rem;
    padding-bottom: .5rem; margin-bottom: .9rem;
    border-bottom: 1px solid var(--linea-suave);
}
.bloque__paso {
    font-family: var(--dato); font-size: .74rem; color: var(--blanco);
    background: var(--azul); border-radius: 4px; padding: .05rem .35rem;
}
.bloque__ayuda { font-size: .78rem; color: var(--tinta-45); font-weight: 400; margin-left: auto; }

.opciones { display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.opcion {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .85rem; cursor: pointer;
}
.opcion input { width: auto; }

/* --------------------------------------------------------- botones */

.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    font-family: var(--cuerpo); font-size: .875rem; font-weight: 600;
    padding: .5rem .95rem; border-radius: var(--radio-s);
    border: 1px solid transparent; cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
    text-decoration: none; white-space: nowrap;
}
.boton:hover { text-decoration: none; }
.boton--principal { background: var(--azul); color: var(--blanco); }
.boton--principal:hover { background: var(--azul-fuerte); }
.boton--secundario { background: var(--blanco); color: var(--tinta); border-color: var(--linea); }
.boton--secundario:hover { background: #F4F7FB; border-color: #C3CFDE; }
.boton--peligro { background: var(--blanco); color: var(--rojo); border-color: var(--rojo-borde); }
.boton--peligro:hover { background: var(--rojo-humo); }
.boton--fantasma { background: none; color: var(--azul); padding: .35rem .5rem; }
.boton--fantasma:hover { background: var(--azul-humo); }
.boton--pequeno { font-size: .78rem; padding: .3rem .6rem; }
.boton[disabled], .boton[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.boton svg { width: 15px; height: 15px; }

.acciones { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.acciones--fin { justify-content: flex-end; }

/* ------------------------------------------------------ contenedores */

.rejilla { display: grid; gap: 1.15rem; }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.rejilla--lateral { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }

.pila > * + * { margin-top: .9rem; }

.vacio {
    text-align: center; padding: 2.4rem 1.2rem; color: var(--tinta-45);
}
.vacio__titulo { font-family: var(--display); font-size: 1rem; color: var(--tinta-70); margin-bottom: .3rem; }
.vacio__accion { margin-top: .9rem; }

.ficha-persona { display: flex; gap: .85rem; align-items: center; }
.retrato {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--azul-humo); color: var(--azul);
    display: grid; place-items: center;
    font-family: var(--display); font-weight: 600; font-size: .88rem;
    flex: 0 0 44px; overflow: hidden;
}
.retrato img { width: 100%; height: 100%; object-fit: cover; }
.retrato--g { width: 64px; height: 64px; flex-basis: 64px; font-size: 1.15rem; }

.lista-limpia { list-style: none; margin: 0; padding: 0; }
.lista-limpia li + li { border-top: 1px solid var(--linea-suave); }
.lista-limpia li { padding: .6rem .2rem; display: flex; gap: .7rem; align-items: center; }

.filtros {
    display: flex; gap: .7rem; flex-wrap: wrap; align-items: flex-end;
}
.filtros .campo { grid-column: auto; min-width: 165px; flex: 0 1 auto; }

/* ------------------------------------------------------ acceso */

.acceso {
    min-height: 100vh;
    display: grid; grid-template-columns: 1.05fr 1fr;
    background: var(--tinta);
}
.acceso__relato {
    padding: 3rem; color: var(--barra-texto); display: flex; flex-direction: column; justify-content: center;
    background:
        radial-gradient(1100px 520px at 12% 8%, rgba(23,179,196,.16), transparent 62%),
        radial-gradient(760px 480px at 88% 92%, rgba(14,76,138,.42), transparent 60%),
        var(--tinta);
}
.acceso__sigla {
    font-family: var(--display); font-weight: 700; font-size: 3.4rem;
    letter-spacing: .04em; color: var(--blanco); line-height: 1;
}
.acceso__nombre { font-size: 1rem; margin-top: .4rem; color: #9FB6CF; }
.acceso__lema {
    font-family: var(--display); font-size: 1.35rem; color: var(--blanco);
    margin-top: 2.2rem; max-width: 24ch; line-height: 1.3; font-weight: 500;
}
.acceso__cadena { margin-top: 2.4rem; display: flex; align-items: center; gap: .8rem; }
.acceso__eslabon {
    font-family: var(--dato); font-size: .82rem; color: #9FB6CF;
    border: 1px solid rgba(255,255,255,.16); border-radius: 99px; padding: .3rem .8rem;
}
.acceso__flecha { color: var(--aqua); font-size: .9rem; }

.acceso__caja {
    background: var(--blanco); display: flex; align-items: center; justify-content: center;
    padding: 2.5rem;
}
.acceso__form { width: 100%; max-width: 330px; }
.acceso__form h1 { font-size: 1.4rem; }
.acceso__pie { margin-top: 1.6rem; font-size: .76rem; color: var(--tinta-45); text-align: center; }

/* --------------------------------------------------- gráfico simple */

.linea-tiempo { display: flex; align-items: flex-end; gap: 3px; height: 92px; }
.linea-tiempo__barra {
    flex: 1; background: var(--azul-humo); border-radius: 2px 2px 0 0; min-height: 3px;
    position: relative;
}
.linea-tiempo__barra:hover { background: var(--azul-claro); }
.linea-tiempo__barra span {
    position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
    background: var(--tinta); color: var(--blanco); font-family: var(--dato);
    font-size: .7rem; padding: .15rem .4rem; border-radius: 4px;
    white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s;
}
.linea-tiempo__barra:hover span { opacity: 1; }

/* ---------------------------------------------------------- impresión */

@media print {
    .barra, .cabecera__acciones, .filtros, .menu-movil, .panel__pie { display: none !important; }
    .lienzo { margin-left: 0; }
    body { background: #fff; font-size: 11px; }
    .panel { border: 0; box-shadow: none; }
    .tabla th { background: #eee !important; }
    a { color: inherit; text-decoration: none; }
}

/* ---------------------------------------------------------- pantallas */

@media (max-width: 1080px) {
    .rejilla--lateral { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .barra { transform: translateX(-100%); box-shadow: var(--sombra-alta); }
    body.menu-abierto .barra { transform: translateX(0); }
    body.menu-abierto::after {
        content: ''; position: fixed; inset: 0; background: rgba(11,31,51,.5); z-index: 50;
    }
    .lienzo { margin-left: 0; }
    .menu-movil { display: inline-flex; }
    .contenido { padding: 1rem; }
    .cabecera { padding: .7rem 1rem; }
    .campo--2, .campo--3, .campo--4 { grid-column: span 6; }
    .campo--8, .campo--9 { grid-column: span 12; }
    .escalera { flex-direction: column; }
    .escalon { border-right: 0; border-bottom: 1px solid var(--linea-suave); }
    .acceso { grid-template-columns: 1fr; }
    .acceso__relato { padding: 2rem 1.5rem; }
    .acceso__lema { margin-top: 1.2rem; font-size: 1.15rem; }
    .acceso__cadena { margin-top: 1.2rem; flex-wrap: wrap; }
}

@media (max-width: 560px) {
    .campo--6, .campo--2, .campo--3, .campo--4 { grid-column: span 12; }
    .dato__cifra { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* =====================================================================
   MAPA DEMOGRÁFICO
   ---------------------------------------------------------------------
   Tres piezas que trabajan juntas: la barra de navegación territorial
   (dónde estoy mirando), el mapa en sí, y la tabla del costado. Todo lo
   que se toca en una se refleja en las otras.
   ===================================================================== */

.mapa-marco {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 1.15rem;
    align-items: start;
}

/* --- Migas: País › Estado › Municipio --- */
.migas {
    display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
    font-size: .85rem;
}
.migas a {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .25rem .55rem; border-radius: var(--radio-s);
    background: var(--azul-humo); color: var(--azul); font-weight: 600;
}
.migas a:hover { background: var(--azul-borde); text-decoration: none; }
.migas .actual {
    padding: .25rem .55rem; font-weight: 600; color: var(--tinta);
}
.migas .sep { color: var(--tinta-45); }

/* --- El lienzo del mapa --- */
.mapa-lienzo {
    position: relative;
    height: 560px;
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--papel);
}
.mapa-lienzo svg { width: 100%; height: 100%; display: block; }

.mapa-forma {
    stroke: var(--blanco);
    stroke-width: .8;
    cursor: pointer;
    transition: fill .15s ease, stroke-width .1s ease;
}
.mapa-forma:hover { stroke: var(--tinta); stroke-width: 1.8; }
.mapa-forma.activa { stroke: var(--tinta); stroke-width: 2.4; }
.mapa-forma.sin-datos { cursor: default; }

/* Etiqueta con el número, encima de cada territorio */
.mapa-globo {
    font-family: var(--dato);
    font-size: 11px; font-weight: 600;
    fill: var(--blanco);
    paint-order: stroke;
    stroke: rgba(15,30,46,.55);
    stroke-width: 2.5px;
    stroke-linejoin: round;
    pointer-events: none;
    text-anchor: middle;
}
.mapa-globo.oscuro { fill: var(--tinta); stroke: rgba(255,255,255,.8); }

/* Recuadro flotante al pasar el cursor */
.mapa-tarjeta {
    position: absolute; z-index: 20; pointer-events: none;
    background: var(--blanco); border: 1px solid var(--linea);
    border-radius: var(--radio); box-shadow: var(--sombra-alta);
    padding: .65rem .8rem; min-width: 190px; font-size: .82rem;
    opacity: 0; transition: opacity .12s ease;
}
.mapa-tarjeta.visible { opacity: 1; }
.mapa-tarjeta h4 {
    font-family: var(--display); font-size: .92rem; margin: 0 0 .35rem;
}
.mapa-tarjeta dl {
    margin: 0; display: grid; grid-template-columns: auto auto; gap: .12rem .7rem;
}
.mapa-tarjeta dt { color: var(--tinta-45); }
.mapa-tarjeta dd {
    margin: 0; font-family: var(--dato); font-weight: 600; text-align: right;
}
.mapa-tarjeta .pie {
    margin: .45rem 0 0; padding-top: .4rem; border-top: 1px solid var(--linea-suave);
    color: var(--azul); font-weight: 600; font-size: .76rem;
}

/* --- Leyenda: siempre visible, con números, no sólo colores --- */
.mapa-leyenda {
    position: absolute; left: .8rem; bottom: .8rem; z-index: 15;
    background: rgba(255,255,255,.96); border: 1px solid var(--linea);
    border-radius: var(--radio); padding: .6rem .7rem;
    box-shadow: var(--sombra); max-width: 250px;
}
.mapa-leyenda__titulo {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
    color: var(--tinta-45); font-weight: 600; margin-bottom: .4rem;
}
.mapa-leyenda__escala { display: flex; gap: 2px; margin-bottom: .3rem; }
.mapa-leyenda__paso { flex: 1; height: 12px; border-radius: 2px; }
.mapa-leyenda__topes {
    display: flex; justify-content: space-between;
    font-family: var(--dato); font-size: .68rem; color: var(--tinta-70);
}
.mapa-leyenda__nota {
    display: flex; align-items: center; gap: .4rem;
    margin-top: .45rem; padding-top: .4rem;
    border-top: 1px solid var(--linea-suave);
    font-size: .72rem; color: var(--tinta-45);
}
.mapa-leyenda__muestra {
    width: 14px; height: 14px; border-radius: 3px;
    border: 1px solid var(--linea); flex: 0 0 14px;
}

/* --- Selector de qué mide el color --- */
.mapa-metricas { display: flex; gap: .3rem; flex-wrap: wrap; }
.mapa-metrica {
    border: 1px solid var(--linea); background: var(--blanco);
    color: var(--tinta-70); border-radius: 99px;
    padding: .28rem .75rem; font-size: .8rem; font-weight: 600;
    cursor: pointer; font-family: inherit;
}
.mapa-metrica:hover { border-color: var(--azul-claro); color: var(--azul); }
.mapa-metrica[aria-pressed="true"] {
    background: var(--azul); border-color: var(--azul); color: var(--blanco);
}

/* --- Tabla lateral que acompaña al mapa --- */
.mapa-rank { max-height: 560px; overflow-y: auto; }
.mapa-rank tr { cursor: pointer; }
.mapa-rank tr.activa { background: var(--aqua-humo); }
.mapa-rank .barrita {
    height: 5px; border-radius: 99px; background: var(--linea);
    margin-top: .25rem; overflow: hidden;
}
.mapa-rank .barrita span { display: block; height: 100%; background: var(--azul); }

.mapa-cargando {
    position: absolute; inset: 0; z-index: 30;
    display: grid; place-items: center;
    background: rgba(247,249,252,.85);
    font-size: .85rem; color: var(--tinta-70);
}

@media (max-width: 1080px) {
    .mapa-marco { grid-template-columns: 1fr; }
    .mapa-lienzo { height: 420px; }
    .mapa-rank { max-height: 340px; }
}

/* =====================================================================
   CENTRO DE AYUDA (pantalla de Inicio)
   ===================================================================== */

.bienvenida {
    background: linear-gradient(120deg, var(--barra-fondo), var(--azul));
    color: var(--blanco);
    border-radius: var(--radio);
    padding: 1.6rem 1.8rem;
}
.bienvenida h2 {
    font-size: 1.5rem; color: var(--blanco); margin: 0 0 .3rem;
}
.bienvenida p { margin: 0; color: #C6D6E9; max-width: 62ch; font-size: .92rem; }
.bienvenida__acciones { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.1rem; }
.bienvenida .boton--principal { background: var(--blanco); color: var(--azul); }
.bienvenida .boton--principal:hover { background: #E9F1FA; }
.bienvenida .boton--secundario {
    background: transparent; color: var(--blanco); border-color: rgba(255,255,255,.35);
}
.bienvenida .boton--secundario:hover { background: rgba(255,255,255,.12); }

/* --- Accesos directos grandes: el camino de siempre, a un clic --- */
.atajos {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .85rem;
}
.atajo {
    display: flex; gap: .8rem; align-items: flex-start;
    background: var(--blanco); border: 1px solid var(--linea);
    border-left: 4px solid var(--azul);
    border-radius: var(--radio); padding: 1rem;
    box-shadow: var(--sombra); text-decoration: none; color: inherit;
    transition: border-color .12s ease, transform .12s ease;
}
.atajo:hover {
    text-decoration: none; transform: translateY(-2px);
    border-color: var(--azul-claro); border-left-color: var(--azul);
}
.atajo__icono {
    width: 38px; height: 38px; flex: 0 0 38px; border-radius: 9px;
    background: var(--azul-humo); color: var(--azul);
    display: grid; place-items: center;
}
.atajo__icono svg { width: 19px; height: 19px; }
.atajo__titulo { font-family: var(--display); font-weight: 600; font-size: .95rem; }
.atajo__texto { font-size: .8rem; color: var(--tinta-70); margin-top: .12rem; }
.atajo__paso {
    font-family: var(--dato); font-size: .7rem; color: var(--tinta-45);
    display: block; margin-bottom: .15rem;
}

/* --- Guías paso a paso --- */
.guia { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); }
.guia + .guia { margin-top: .7rem; }
.guia__cabeza {
    display: flex; gap: .75rem; align-items: center; width: 100%;
    padding: .9rem 1rem; background: none; border: 0; cursor: pointer;
    font-family: inherit; text-align: left; color: inherit;
}
.guia__cabeza:hover { background: #FAFCFE; }
.guia__icono {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: 8px;
    background: var(--azul-humo); color: var(--azul);
    display: grid; place-items: center;
}
.guia__icono svg { width: 17px; height: 17px; }
.guia__titulo { font-family: var(--display); font-weight: 600; font-size: .95rem; }
.guia__resumen { font-size: .8rem; color: var(--tinta-70); }
.guia__flecha { margin-left: auto; color: var(--tinta-45); transition: transform .18s ease; }
.guia[open] .guia__flecha { transform: rotate(180deg); }
.guia__cuerpo { padding: 0 1rem 1rem 3.5rem; }

.pasos { list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.pasos li {
    position: relative; padding: 0 0 1rem 2rem; counter-increment: paso;
}
.pasos li::before {
    content: counter(paso);
    position: absolute; left: 0; top: 0;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--azul); color: var(--blanco);
    font-family: var(--dato); font-size: .72rem; font-weight: 600;
    display: grid; place-items: center;
}
.pasos li::after {
    content: ''; position: absolute; left: 10.5px; top: 26px; bottom: 4px;
    width: 1px; background: var(--linea);
}
.pasos li:last-child { padding-bottom: 0; }
.pasos li:last-child::after { display: none; }
.pasos__titulo { font-weight: 600; font-size: .9rem; margin-bottom: .12rem; }
.pasos__detalle { font-size: .85rem; color: var(--tinta-70); }
.pasos__aviso {
    display: flex; gap: .45rem; align-items: flex-start;
    margin-top: .45rem; padding: .45rem .6rem;
    background: var(--ambar-humo); border: 1px solid var(--ambar-borde);
    border-radius: var(--radio-s); font-size: .8rem; color: var(--ambar);
}

/* --- Preguntas frecuentes --- */
.faq-cat {
    font-family: var(--display); font-weight: 600; font-size: .82rem;
    text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-45);
    margin: 1.3rem 0 .55rem;
}
.faq-cat:first-child { margin-top: 0; }
.faq {
    border: 1px solid var(--linea); border-radius: var(--radio);
    background: var(--blanco); overflow: hidden;
}
.faq + .faq { margin-top: .5rem; }
.faq__pregunta {
    display: flex; gap: .6rem; align-items: flex-start; width: 100%;
    padding: .8rem 1rem; background: none; border: 0; cursor: pointer;
    font-family: inherit; font-size: .9rem; font-weight: 600;
    text-align: left; color: var(--tinta);
}
.faq__pregunta:hover { background: #FAFCFE; }
.faq__pregunta .signo {
    margin-left: auto; color: var(--azul); font-size: 1.1rem; line-height: 1;
    flex: 0 0 auto; transition: transform .18s ease;
}
.faq[open] .faq__pregunta .signo { transform: rotate(45deg); }
.faq__respuesta {
    padding: 0 1rem 1rem; font-size: .88rem; color: var(--tinta-70);
    line-height: 1.6;
}
.faq__util {
    display: flex; gap: .5rem; align-items: center;
    margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--linea-suave);
    font-size: .78rem; color: var(--tinta-45);
}

.buscador-ayuda { position: relative; }
.buscador-ayuda input { padding-left: 2.2rem; }
.buscador-ayuda svg {
    position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; color: var(--tinta-45); pointer-events: none;
}

/* =====================================================================
   FORMULARIOS: estados de validación
   ---------------------------------------------------------------------
   Un campo con problema tiene que gritar tres cosas a la vez: color,
   icono y texto. Con color solo, quien no distingue rojo de verde se
   queda sin la información.
   ===================================================================== */

.campo--error input, .campo--error select, .campo--error textarea {
    border-color: var(--rojo); background: #FFFBFA;
}
.campo--ok input, .campo--ok select { border-color: var(--verde); }

.pista--error, .pista--ok, .pista--cargando {
    display: flex; align-items: flex-start; gap: .3rem;
}
.pista--error::before { content: '✕'; font-weight: 700; }
.pista--ok::before    { content: '✓'; font-weight: 700; }
.pista--cargando { color: var(--tinta-45); }
.pista--cargando::before { content: '…'; }

/* Resumen de errores arriba del formulario: qué falló y dónde */
.errores-resumen {
    background: var(--rojo-humo); border: 1px solid var(--rojo-borde);
    border-left: 4px solid var(--rojo);
    border-radius: var(--radio); padding: .9rem 1.05rem;
}
.errores-resumen h3 {
    font-size: .92rem; color: var(--rojo); margin: 0 0 .4rem;
    display: flex; align-items: center; gap: .4rem;
}
.errores-resumen ol { margin: 0; padding-left: 1.2rem; font-size: .86rem; }
.errores-resumen li { margin-bottom: .2rem; }
.errores-resumen a { color: var(--rojo); font-weight: 600; }

/* Franja de progreso del formulario */
.progreso-form {
    display: flex; align-items: center; gap: .5rem;
    font-size: .78rem; color: var(--tinta-45);
}
.progreso-form__puntos { display: flex; gap: .3rem; }
.progreso-form__punto {
    width: 8px; height: 8px; border-radius: 50%; background: var(--linea);
}
.progreso-form__punto.listo { background: var(--verde); }
.progreso-form__punto.actual { background: var(--azul); box-shadow: 0 0 0 3px var(--azul-humo); }

/* Guardado en curso: evita el doble envío */
.boton--guardando { position: relative; color: transparent !important; }
.boton--guardando::after {
    content: 'Guardando…'; position: absolute; inset: 0;
    display: grid; place-items: center; color: var(--blanco);
    font-size: .85rem; font-weight: 600;
}

/* Ayuda contextual junto a un campo */
.ayuda-campo {
    border: 0; background: none; cursor: pointer; padding: 0 0 0 .25rem;
    color: var(--azul); font-size: .78rem; font-family: inherit;
}
.ayuda-campo:hover { text-decoration: underline; }

/* Modo pantalla completa del mapa: se esconde todo lo demás */
body.mapa-solo .barra,
body.mapa-solo .cabecera__sub,
body.mapa-solo .migas,
body.mapa-solo .mapa-marco > aside { display: none; }
body.mapa-solo .lienzo { margin-left: 0; }
body.mapa-solo .mapa-marco { grid-template-columns: 1fr; }
body.mapa-solo .mapa-lienzo { height: calc(100vh - 190px); }

/* Campo con advertencia: ámbar, no rojo. No impide guardar. */
.campo--aviso input, .campo--aviso select, .campo--aviso textarea {
    border-color: var(--ambar-borde); background: #FFFDF8;
}
.campo--aviso label::after {
    content: ' ⚠'; color: var(--ambar); font-size: .9em;
}
/* El campo al que se acaba de saltar desde el resumen de errores */
.campo--destacado { animation: latido 1.2s ease 2; }
@keyframes latido {
    0%, 100% { box-shadow: 0 0 0 0 rgba(158,43,27,0); }
    50%      { box-shadow: 0 0 0 5px rgba(158,43,27,.18); }
}