/* ------------------------------------------------------------------
   Sistema de inspección de edificaciones post-sismo — UGR
   Hoja de estilos única, sin dependencias externas.
------------------------------------------------------------------ */

:root {
    --azul-900: #0b2d4d;
    --azul-800: #12456f;
    --azul-600: #1c6ba4;
    --azul-100: #e7f0f8;
    --gris-900: #1f2933;
    --gris-700: #3e4c59;
    --gris-500: #7b8794;
    --gris-300: #cbd2d9;
    --gris-100: #f4f6f8;
    --blanco: #ffffff;

    /* Colores de habitabilidad de la Guía AIS. Los tonos se ajustaron
       para que las parejas contiguas —naranja/rojo y amarillo/naranja—
       se distingan también con daltonismo; el amarillo de la norma no
       alcanza 3:1 contra el blanco, así que nunca va sin su etiqueta. */
    --verde: #2f8f46;
    --amarillo: #cfae00;
    --naranja: #d05e10;
    --rojo: #a32020;

    /* Rampa ordinal de un solo tono (grado de daño, periodos). */
    --ordinal-1: #8fb7d6;
    --ordinal-2: #6a9bc4;
    --ordinal-3: #4a7fae;
    --ordinal-4: #2e6091;
    --ordinal-5: #12456f;

    --radio: 8px;
    --sombra: 0 1px 3px rgba(15, 35, 60, .12);
    --sombra-alta: 0 6px 20px rgba(15, 35, 60, .16);
}

* { box-sizing: border-box; }

/* El atributo hidden pierde contra cualquier regla de display escrita
   por nosotros (flex, grid…), así que se refuerza aquí. */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--gris-900);
    background: var(--gris-100);
}

a { color: var(--azul-600); }
h1, h2, h3, h4 { margin: 0 0 .6rem; line-height: 1.25; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }

/* --- Estructura --- */

.barra {
    background: var(--azul-900);
    color: var(--blanco);
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 58px;
    flex-wrap: wrap;
}

.barra__marca {
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--blanco);
    text-decoration: none;
    font-size: 1.05rem;
}

.barra__marca small {
    display: block;
    font-weight: 400;
    font-size: .72rem;
    opacity: .75;
    letter-spacing: 0;
}

.barra nav { display: flex; gap: .25rem; flex-wrap: wrap; }

.barra nav a {
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
    padding: .45rem .75rem;
    border-radius: var(--radio);
    font-size: .92rem;
}

.barra nav a:hover { background: rgba(255, 255, 255, .12); color: var(--blanco); }
.barra nav a.activo { background: var(--azul-600); color: var(--blanco); }

.barra__usuario {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .88rem;
}

.barra__usuario span { opacity: .85; }

.contenido { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

.encabezado-pagina {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.encabezado-pagina p { margin: 0; color: var(--gris-500); font-size: .92rem; }

/* --- Tarjetas --- */

.tarjeta {
    background: var(--blanco);
    border: 1px solid var(--gris-300);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    margin-bottom: 1.25rem;
}

.tarjeta__titulo {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--gris-300);
    font-weight: 600;
    font-size: .95rem;
    color: var(--azul-900);
    background: var(--azul-100);
    border-radius: var(--radio) var(--radio) 0 0;
}

.tarjeta__cuerpo { padding: 1rem; }

/* --- Cifras del tablero --- */

.cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.cifra {
    background: var(--blanco);
    border: 1px solid var(--gris-300);
    border-left: 4px solid var(--azul-600);
    border-radius: var(--radio);
    padding: .9rem 1rem;
    box-shadow: var(--sombra);
}

.cifra__valor { font-size: 1.9rem; font-weight: 700; line-height: 1; color: var(--azul-900); }
.cifra__texto { font-size: .82rem; color: var(--gris-500); text-transform: uppercase; letter-spacing: .04em; margin-top: .35rem; }

.cifra--verde { border-left-color: var(--verde); }
.cifra--verde .cifra__valor { color: var(--verde); }
.cifra--amarillo { border-left-color: var(--amarillo); }
.cifra--amarillo .cifra__valor { color: var(--amarillo); }
.cifra--naranja { border-left-color: var(--naranja); }
.cifra--naranja .cifra__valor { color: var(--naranja); }
.cifra--rojo { border-left-color: var(--rojo); }
.cifra--rojo .cifra__valor { color: var(--rojo); }

/* --- Tablero: secciones y cifras destacadas --- */

.seccion-tablero {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--gris-500);
    margin: 1.75rem 0 .85rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--gris-300);
}

.rejilla-tablero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.cifras--principal { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.cifra__pie {
    font-size: .78rem;
    color: var(--gris-500);
    margin-top: .3rem;
}

.cifra--hero { grid-column: span 1; }
.cifra--hero .cifra__valor { font-size: 2.6rem; }
.cifra--alerta { border-left-color: var(--rojo); }
.cifra--alerta .cifra__valor { color: var(--rojo); }

/* --- Gráficos --- */

.grafico__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.grafico__ver-datos {
    border: 1px solid var(--gris-300);
    background: var(--blanco);
    border-radius: 5px;
    font: inherit;
    font-size: .74rem;
    font-weight: 600;
    color: var(--gris-700);
    padding: .12rem .5rem;
    cursor: pointer;
}

.grafico__ver-datos:hover { background: var(--blanco); color: var(--azul-800); }
.grafico__nota { font-size: .78rem; color: var(--gris-500); margin: .7rem 0 0; }
.grafico__vacio { color: var(--gris-500); font-size: .88rem; margin: .5rem 0; }
.grafico__tabla { margin-top: .9rem; border-top: 1px solid var(--gris-300); padding-top: .5rem; overflow-x: auto; }

/* Barras horizontales: una serie, etiqueta y valor siempre visibles. */
.barras { display: flex; flex-direction: column; gap: .45rem; }

.barras__fila {
    display: grid;
    grid-template-columns: minmax(90px, 34%) 1fr auto;
    gap: .6rem;
    align-items: center;
    font-size: .84rem;
}

/* La etiqueta se ajusta en dos líneas antes que recortarse: un rótulo
   cortado a mitad de palabra se lee peor que una fila más alta. */
.barras__etiqueta {
    color: var(--gris-700);
    line-height: 1.25;
    hyphens: auto;
}

.barras__pista { background: var(--gris-100); border-radius: 4px; height: 18px; overflow: hidden; }

.barras__marca {
    display: block;
    height: 100%;
    border-radius: 0 4px 4px 0;
    transition: filter .12s;
}

.barras__marca:hover { filter: brightness(1.08); }
.barras__valor { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--gris-900); min-width: 3.2rem; text-align: right; }

/* Barra apilada: partes de un total. */
.apilada {
    display: flex;
    height: 26px;
    border-radius: 5px;
    overflow: hidden;
    background: var(--gris-100);
    gap: 2px; /* la separación la hace el fondo, no un borde */
}

.apilada__parte { display: block; height: 100%; transition: filter .12s; }
.apilada__parte:hover { filter: brightness(1.08); }

.leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.1rem;
    margin-top: .75rem;
    font-size: .82rem;
    color: var(--gris-700);
}

.leyenda__item { display: inline-flex; align-items: center; gap: .3rem; }

.leyenda__punto {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

.leyenda__pct { color: var(--gris-500); }

/* Serie temporal. */
.serie { width: 100%; height: auto; display: block; }
.serie__rejilla { stroke: var(--gris-300); stroke-width: 1; }
.serie__tick, .serie__fecha, .serie__pico { fill: var(--gris-500); font-size: 11px; }
.serie__fecha--inicio { text-anchor: start; }
.serie__fecha--fin { text-anchor: end; }
.serie__pico { fill: var(--gris-700); font-weight: 700; text-anchor: middle; }
.serie__area { fill: var(--ordinal-4); fill-opacity: .1; }
.serie__linea { fill: none; stroke: var(--ordinal-4); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.serie__punto { fill: var(--ordinal-4); stroke: var(--blanco); stroke-width: 2; }
.serie__zona { fill: transparent; }
.serie__zona:hover { fill: var(--azul-100); fill-opacity: .5; }

/* Matriz de elementos estructurales por grado de daño. */
.matriz { display: flex; flex-direction: column; gap: .45rem; }

.matriz__fila {
    display: grid;
    grid-template-columns: minmax(90px, 32%) 1fr;
    gap: .6rem;
    align-items: center;
    font-size: .84rem;
}

.matriz__etiqueta { color: var(--gris-700); }

.matriz__pista {
    display: flex;
    height: 18px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--gris-100);
    gap: 2px;
}

.matriz__parte { display: block; height: 100%; }

/* Globo compartido por todos los gráficos. */
.globo-grafico {
    position: fixed;
    z-index: 900;
    padding: .25rem .55rem;
    background: rgba(31, 41, 51, .93);
    color: #fff;
    border-radius: 5px;
    font-size: .78rem;
    pointer-events: none;
    white-space: nowrap;
    max-width: 90vw;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Distintivos --- */

.pill {
    display: inline-block;
    padding: .18rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--blanco);
    white-space: nowrap;
}

.pill--verde { background: var(--verde); }
.pill--amarillo { background: var(--amarillo); color: #332a00; }
.pill--naranja { background: var(--naranja); }
.pill--rojo { background: var(--rojo); }
.pill--gris { background: var(--gris-500); }
.pill--azul { background: var(--azul-600); }
.pill--borde { background: transparent; border: 1px solid var(--gris-300); color: var(--gris-700); }

/* --- Tablas --- */

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

table.tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

table.tabla th,
table.tabla td {
    padding: .55rem .7rem;
    border-bottom: 1px solid var(--gris-300);
    text-align: left;
    vertical-align: top;
}

table.tabla th {
    background: var(--gris-100);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--gris-700);
    white-space: nowrap;
}

table.tabla tbody tr:hover { background: var(--azul-100); }
table.tabla td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tabla td.sin-quiebre { white-space: nowrap; }

.vacio { padding: 2rem 1rem; text-align: center; color: var(--gris-500); }

/* Tablas donde cada celda es un campo (personas del RUFE, producción). */
table.tabla-personas td { padding: .3rem .35rem; }
table.tabla-personas input,
table.tabla-personas select { min-width: 8rem; padding: .3rem .4rem; font-size: .84rem; }
table.tabla-personas input[type="number"] { min-width: 6rem; }
table.tabla-personas .fila-numero { text-align: center; color: var(--gris-500); font-variant-numeric: tabular-nums; }
table.tabla-personas .quitar-fila { line-height: 1; padding: .25rem .5rem; }

/* --- Formularios --- */

.rejilla {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: .85rem 1rem;
}

.campo { grid-column: span 12; }
.campo--1 { grid-column: span 1; }
.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,
.campo-titulo {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--gris-700);
    margin-bottom: .25rem;
}

.campo .ayuda { font-size: .76rem; color: var(--gris-500); margin-top: .2rem; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], input[type="search"], input[type="file"],
input[type="tel"], input[type="url"],
select, textarea {
    width: 100%;
    padding: .45rem .6rem;
    border: 1px solid var(--gris-300);
    border-radius: 6px;
    font: inherit;
    font-size: .9rem;
    background: var(--blanco);
    color: var(--gris-900);
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--azul-600);
    outline-offset: -1px;
    border-color: var(--azul-600);
}

textarea { min-height: 80px; resize: vertical; }

fieldset {
    border: 1px solid var(--gris-300);
    border-radius: var(--radio);
    padding: .85rem 1rem 1rem;
    margin: 0 0 1rem;
}

legend { font-weight: 600; font-size: .88rem; color: var(--azul-800); padding: 0 .4rem; }

.opciones { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; }

.opcion {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .88rem;
    cursor: pointer;
}

.opcion input { margin: 0; }

.casillas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .4rem .9rem;
}

/* --- Botones --- */

.boton {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .95rem;
    border: 1px solid transparent;
    border-radius: 6px;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    background: var(--azul-600);
    color: var(--blanco);
}

.boton:hover { background: var(--azul-800); }

.boton--secundario { background: var(--blanco); color: var(--azul-800); border-color: var(--gris-300); }
.boton--secundario:hover { background: var(--azul-100); }
.boton--peligro { background: var(--rojo); }
.boton--peligro:hover { background: #97281c; }
.boton--pequeno { padding: .3rem .6rem; font-size: .82rem; }

.acciones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* --- Avisos --- */

.aviso {
    padding: .7rem 1rem;
    border-radius: var(--radio);
    margin-bottom: 1rem;
    font-size: .92rem;
    border: 1px solid;
}

.aviso--exito { background: #e8f6ec; border-color: #a8ddb6; color: #1d6b31; }
.aviso--error { background: #fdecea; border-color: #f5b7b1; color: #922b21; }
.aviso--atencion { background: #fdf4e3; border-color: #f0d19a; color: #8a5a12; }
.aviso ul { margin: .4rem 0 0; padding-left: 1.2rem; }

/* --- Pasos del formulario --- */

.pasos {
    display: flex;
    gap: .25rem;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--gris-300);
    margin-bottom: 1.25rem;
}

.paso {
    padding: .55rem .9rem;
    border: none;
    background: transparent;
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    color: var(--gris-500);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

.paso:hover { color: var(--azul-800); }
.paso.activo { color: var(--azul-900); border-bottom-color: var(--azul-600); }

.panel { display: none; }
.panel.activo { display: block; }

/* --- Rejilla de daños estructurales --- */

.tabla-danos { width: 100%; border-collapse: collapse; font-size: .86rem; }
.tabla-danos th, .tabla-danos td { border: 1px solid var(--gris-300); padding: .3rem; text-align: center; }
.tabla-danos th { background: var(--gris-100); font-size: .76rem; }
.tabla-danos td:first-child, .tabla-danos th:first-child { text-align: left; white-space: nowrap; }
.tabla-danos input { width: 100%; min-width: 62px; text-align: right; padding: .3rem .35rem; }
.tabla-danos tfoot td { font-weight: 600; background: var(--gris-100); }

/* --- Detalle --- */

.definiciones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .7rem 1.5rem;
}

.definicion__termino {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--gris-500);
}

.definicion__valor { font-weight: 500; }

.lista-marcas { list-style: none; margin: 0; padding: 0; columns: 2; font-size: .9rem; }
.lista-marcas li { break-inside: avoid; padding: .12rem 0; }

.adjuntos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem; }

.adjunto {
    border: 1px solid var(--gris-300);
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--blanco);
    margin: 0;
}

.adjunto img { width: 100%; height: 140px; object-fit: cover; display: block; background: var(--gris-100); }
.adjunto__pie { padding: .45rem .55rem; font-size: .78rem; }
.adjunto__descripcion { margin-top: .2rem; color: var(--gris-700); }
.adjunto__meta { margin-top: .2rem; color: var(--gris-500); font-variant-numeric: tabular-nums; }
.adjunto__antes { text-decoration: line-through; }
.adjunto__pie form { margin-top: .4rem; }

.adjunto__documento {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 140px;
    background: var(--gris-100);
    color: var(--gris-700);
    font-weight: 700;
    letter-spacing: .08em;
    text-decoration: none;
}

.resumen-adjuntos {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    padding: .6rem 0 .9rem;
    font-size: .86rem;
    color: var(--gris-700);
}

.miniaturas { display: flex; gap: .5rem; flex-wrap: wrap; }

.miniatura {
    width: 110px;
    font-size: .72rem;
    color: var(--gris-500);
    word-break: break-word;
}

.miniatura img {
    width: 110px;
    height: 74px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--gris-300);
    display: block;
    margin-bottom: .2rem;
}

/* --- Acceso --- */

.acceso {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: linear-gradient(160deg, var(--azul-900), var(--azul-600));
}

.acceso__caja {
    width: 100%;
    max-width: 400px;
    background: var(--blanco);
    border-radius: 12px;
    box-shadow: var(--sombra-alta);
    padding: 2rem;
}

.acceso__marca { text-align: center; margin-bottom: 1.5rem; }
.acceso__marca h1 { color: var(--azul-900); font-size: 1.3rem; margin-bottom: .25rem; }
.acceso__marca p { margin: 0; color: var(--gris-500); font-size: .86rem; }

/* --- Barras del reporte --- */

.barra-dato { display: grid; grid-template-columns: 1fr 3fr auto; gap: .6rem; align-items: center; margin-bottom: .4rem; font-size: .88rem; }
.barra-dato__pista { background: var(--gris-100); border-radius: 999px; height: 12px; overflow: hidden; }
.barra-dato__relleno { background: var(--azul-600); height: 100%; }

/* --- Vinculación entre registros (buscar y elegir) --- */

.vinculo { position: relative; }

.vinculo__elegido {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .45rem .6rem;
    background: var(--azul-100);
    border: 1px solid var(--gris-300);
    border-radius: 6px;
    font-size: .88rem;
}

.vinculo__elegido button { margin-left: auto; }
.vinculo__buscador { position: relative; }

.vinculo__resultados {
    list-style: none;
    margin: .25rem 0 0;
    padding: 0;
    position: absolute;
    z-index: 20;
    width: 100%;
    max-height: 280px;
    overflow-y: auto;
    background: var(--blanco);
    border: 1px solid var(--gris-300);
    border-radius: 6px;
    box-shadow: var(--sombra-alta);
}

.vinculo__resultados li {
    padding: .45rem .6rem;
    font-size: .86rem;
    cursor: pointer;
    border-bottom: 1px solid var(--gris-100);
}

.vinculo__resultados li:last-child { border-bottom: none; }
.vinculo__resultados li:hover { background: var(--azul-100); }
.vinculo__vacio { color: var(--gris-500); cursor: default !important; }
.vinculo__vacio:hover { background: transparent !important; }

.vinculo__meta {
    display: block;
    color: var(--gris-500);
    font-size: .78rem;
    margin-top: .1rem;
}

/* --- Mapa --- */

.mapa {
    position: relative;
    width: 100%;
    height: 420px;
    border: 1px solid var(--gris-300);
    border-radius: var(--radio);
    overflow: hidden;
    background: #eef3f7;
    z-index: 0; /* mantiene los paneles de Leaflet por debajo de la barra */
}

.mapa--alto { height: 620px; }
.mapa--bajo { height: 260px; }
.mapa--seleccion { cursor: crosshair; }

/* Aviso flotante sobre el mapa (carga, falta de conexión, GPS). */
.mapa__aviso {
    position: absolute;
    left: .5rem;
    bottom: 2.2rem;
    z-index: 500;
    padding: .3rem .6rem;
    background: rgba(255, 255, 255, .96);
    border: 1px solid var(--gris-300);
    border-radius: 6px;
    font-size: .8rem;
    display: none;
    max-width: 70%;
}

.mapa__aviso.visible { display: block; }

.mapa__gps a {
    font-size: 1.1rem;
    line-height: 30px;
    text-align: center;
    font-weight: 700;
}

/* Ajustes de Leaflet al resto de la interfaz. */
.mapa .leaflet-container {
    font: inherit;
    font-size: .84rem;
    background: #eef3f7;
}

.mapa .leaflet-bar a {
    color: var(--gris-900);
}

.mapa .leaflet-control-attribution {
    font-size: .7rem;
    background: rgba(255, 255, 255, .82);
}

.mapa .leaflet-tooltip {
    font-size: .78rem;
    padding: .18rem .45rem;
}

.mapa__punto--enlace { cursor: pointer; }

.mapa-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    align-items: center;
    font-size: .8rem;
    color: var(--gris-700);
    margin-top: .6rem;
}

.mapa-leyenda__punto {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--gris-300);
    margin-right: .3rem;
    vertical-align: -1px;
}

.mapa-leyenda__rampa {
    display: inline-block;
    width: 120px;
    height: 11px;
    border-radius: 3px;
    vertical-align: -1px;
    background: linear-gradient(90deg, #0c5ab4, #1ea0aa, #dcbe28, #dc781e, #be1e1e);
}

/* Campo que se llenó desde la cartografía: se marca para que el inspector
   sepa qué revisar antes de dar por buena la ficha.
   Se nombran el elemento y la clase porque «input[type=text]» pesa más
   que una clase sola y ganaría el fondo blanco. */
input.campo--del-catastro,
select.campo--del-catastro {
    background: #fdf5e0;
    border-color: #c9a227;
    border-left-width: 3px;
}

.ubicacion-detectada {
    font-size: .82rem;
    color: var(--gris-700);
    margin-top: .4rem;
    min-height: 1.2em;
}

/* --- Paginación --- */

.paginacion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.paginacion__resumen {
    margin: 0;
    font-size: .84rem;
    color: var(--gris-500);
}

.paginacion__resumen strong { color: var(--gris-900); font-variant-numeric: tabular-nums; }

.paginacion__paginas {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    padding: 0;
    margin: 0 0 0 auto;
}

.paginacion__paginas a,
.paginacion__paginas span {
    display: block;
    min-width: 2.1rem;
    padding: .35rem .7rem;
    border: 1px solid var(--gris-300);
    border-radius: 6px;
    text-decoration: none;
    background: var(--blanco);
    color: var(--azul-800);
    font-size: .86rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.paginacion__paginas a:hover { background: var(--azul-100); }

.paginacion__paginas .activa span {
    background: var(--azul-600);
    border-color: var(--azul-600);
    color: var(--blanco);
    font-weight: 600;
}

@media (max-width: 560px) {
    .paginacion { justify-content: center; }
    .paginacion__paginas { margin: 0; }
}

/* --- Impresión --- */

@media print {
    .barra, .encabezado-pagina .acciones, .no-imprimir { display: none !important; }
    .creditos { display: flex !important; }
    body { background: var(--blanco); font-size: 11px; }
    .contenido { max-width: none; padding: 0; }
    .tarjeta { box-shadow: none; break-inside: avoid; margin-bottom: .6rem; }
    .tarjeta__titulo { background: var(--gris-100); }
    a { color: inherit; text-decoration: none; }
}

@media (max-width: 780px) {
    .campo--1, .campo--2, .campo--3, .campo--4 { grid-column: span 6; }
    .campo--6, .campo--8, .campo--9 { grid-column: span 12; }
    .lista-marcas { columns: 1; }
    .barra__usuario { margin-left: 0; width: 100%; }
}

/* --- Créditos ---------------------------------------------------------
   Pie de todas las pantallas. Discreto: es una firma, no contenido. */
.creditos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .35rem;
    padding: 1.4rem 1rem 1.8rem;
    color: var(--gris-500);
    font-size: .78rem;
}

.creditos a {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--gris-700);
    font-weight: 600;
    text-decoration: none;
}

.creditos a:hover { color: var(--azul-600); text-decoration: underline; }

/* El logotipo acompaña al texto: se ata a su altura y guarda la
   proporción original (531 × 447) para no deformarse. */
.creditos img {
    height: 1.05em;
    width: auto;
    display: block;
}

@media print {
    .creditos {
        margin-top: .6rem;
        padding: .4rem 0 0;
        border-top: 1px solid var(--gris-300);
        font-size: 9px;
    }
}

/* --- Infografía del boletín ------------------------------------------- */
.infografia {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: 1.4rem;
    align-items: start;
}

.infografia img {
    width: 100%;
    height: auto;
    border: 1px solid var(--gris-300);
    border-radius: 8px;
    display: block;
}

.infografia p { margin: 0 0 .7rem; }

@media (max-width: 780px) {
    .infografia { grid-template-columns: 1fr; }
}

/* --- Navegación de módulo -------------------------------------------
   Segunda barra, para las secciones de un módulo con muchas pantallas.
   Se distingue de la principal por ser clara y quedar bajo el título. */
.subnav {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin: 0 0 1.4rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--gris-300);
}

.subnav a {
    padding: .45rem .8rem;
    border-radius: 6px;
    color: var(--gris-700);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.subnav a:hover { background: var(--gris-100); color: var(--azul-800); }

.subnav a.activo {
    background: var(--azul-100);
    color: var(--azul-800);
    box-shadow: inset 0 -2px 0 var(--azul-600);
}

@media (max-width: 780px) {
    .subnav { overflow-x: auto; flex-wrap: nowrap; }
}

/* Sección del módulo que todavía no está construida: se muestra para que
   se sepa que está prevista, pero no enlaza a ninguna parte. */
.subnav__pendiente {
    padding: .45rem .8rem;
    color: var(--gris-500);
    font-size: .88rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: not-allowed;
}

/* --- Ficha de detalle --------------------------------------------------
   Lista de datos en dos columnas, para las fichas del módulo. */
.detalle {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .9rem 1.6rem;
    margin: 0 0 1rem;
}

.detalle dt {
    color: var(--gris-500);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.detalle dd { margin: .15rem 0 0; font-size: .95rem; }

.vacio-celda { color: var(--gris-500); }

/* Saldo por debajo del mínimo: se marca, pero la cifra sigue leyéndose. */
.saldo--bajo { color: var(--rojo); font-weight: 700; }

/* Rejilla de dos bloques que se apilan en pantalla estrecha: gráficos del
   inventario, columnas de la ficha del beneficiario. */
.rejilla-graficos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
    align-items: start;
}

/* --- Línea de tiempo ---------------------------------------------------
   Seguimientos de un hogar, del más reciente al más antiguo. La barra
   vertical y el punto dejan ver de un vistazo cuántas veces se le ha
   visitado, que es la pregunta que se le hace a la ficha. */
.linea-tiempo {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1.1rem;
    border-left: 2px solid var(--gris-300);
}

.linea-tiempo li {
    position: relative;
    padding: 0 0 .9rem;
    font-size: .9rem;
}

.linea-tiempo li:last-child { padding-bottom: 0; }

.linea-tiempo li::before {
    content: '';
    position: absolute;
    left: -1.5rem;
    top: .35rem;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--azul-600);
}

/* --- Firma en pantalla -------------------------------------------------
   El lienzo ocupa todo el ancho disponible y guarda su proporción: en una
   tableta se firma con el dedo, y una caja estrecha obliga a apretar la
   letra hasta volverla ilegible. */
.firma-lienzo {
    width: 100%;
    height: auto;
    aspect-ratio: 900 / 220;
    background: var(--blanco);
    border: 1px dashed var(--gris-300);
    border-radius: 6px;
    touch-action: none;
    cursor: crosshair;
}

.firma-vista {
    margin-top: .6rem;
    padding: .5rem;
    border: 1px solid var(--gris-300);
    border-radius: 6px;
    background: var(--blanco);
}

.firma-vista img { display: block; width: 100%; max-width: 380px; height: auto; }

/* --- Barra de la jornada (punto de entrega) ----------------------------
   Dice tres cosas que en terreno se miran de reojo: si hay señal, si el
   padrón está descargado y cuántas actas faltan por enviar. */
.jornada {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1.1rem;
    font-size: .86rem;
}

.jornada__estado {
    font-weight: 700;
    padding: .18rem .7rem;
    border-radius: 999px;
    background: var(--gris-100);
    color: var(--gris-700);
}

.jornada--linea { background: #e4f2e8; color: #1f6b33; }
.jornada--fuera { background: #f7e4e4; color: var(--rojo); }

.jornada__dato { color: var(--gris-700); }

.jornada__acciones {
    display: flex;
    gap: .5rem;
    margin-left: auto;
}

.jornada__nota { margin: .6rem 0 0; font-size: .85rem; color: var(--gris-700); }

@media (max-width: 700px) {
    .jornada__acciones { margin-left: 0; width: 100%; }
}

/* ======================================================================
   VISTA PÚBLICA
   Quien entra aquí no es un funcionario con el sistema abierto todo el
   día: es una familia buscando ayuda desde un teléfono, muchas veces con
   mala señal. Por eso todo es más grande, más espaciado y con menos
   cosas en pantalla.
   ====================================================================== */
body.publico { background: var(--gris-100); }

.publico__barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8rem 1.5rem;
    padding: .9rem 1.5rem;
    background: var(--azul-800);
    color: var(--blanco);
    border-bottom: 3px solid var(--naranja);
}

.publico__marca {
    color: var(--blanco);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.15;
}

.publico__marca small {
    display: block;
    font-weight: 400;
    font-size: .72rem;
    letter-spacing: 0;
    color: #c9d8e4;
}

.publico__nav { display: flex; flex-wrap: wrap; gap: .3rem; margin-left: auto; }

.publico__nav a {
    color: #dce7ef;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
    padding: .45rem .8rem;
    border-radius: 6px;
}

.publico__nav a:hover { background: rgba(255, 255, 255, .12); color: var(--blanco); }
.publico__entrar { border: 1px solid rgba(255, 255, 255, .35); }

.publico__contenido { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.2rem 2.5rem; }

.publico__pie {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1.2rem 2rem;
    border-top: 1px solid var(--gris-300);
    color: var(--gris-500);
    font-size: .85rem;
}

.publico__pie strong { color: var(--gris-700); }

/* --- Portada --- */
.portada { margin-bottom: 1.6rem; }
.portada h1 { font-size: 1.9rem; margin: .4rem 0 .5rem; }
.portada__entrada { font-size: 1.05rem; color: var(--gris-700); max-width: 60ch; }

.portada__puertas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    margin: 1.4rem 0;
}

/* Las dos puertas son lo único que hay que decidir al llegar: se ven
   como dos tarjetas grandes, no como dos enlaces entre el texto. */
.puerta {
    display: block;
    padding: 1.4rem 1.5rem;
    border-radius: 12px;
    text-decoration: none;
    border: 1px solid var(--gris-300);
    background: var(--blanco);
    transition: transform .12s ease, box-shadow .12s ease;
}

.puerta:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(18, 69, 111, .12); }
.puerta--ayuda { border-left: 6px solid var(--naranja); }
.puerta--donar { border-left: 6px solid var(--verde); }
.puerta--voluntario { border-left: 6px solid var(--azul-600); }

.puerta__titulo { display: block; font-size: 1.3rem; font-weight: 700; color: var(--azul-800); }
.puerta__texto { display: block; margin: .5rem 0 .8rem; color: var(--gris-700); font-size: .95rem; }
.puerta__accion { display: block; font-weight: 600; color: var(--azul-600); }

/* --- Solicitudes publicadas --- */
.tarjetas-solicitud {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.solicitud__cabecera { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.solicitud__tiempo { color: var(--gris-500); font-size: .78rem; }
.solicitud__lugar { font-size: 1.05rem; margin: .6rem 0 .2rem; }
.solicitud__lugar small { display: block; font-weight: 400; font-size: .82rem; color: var(--gris-500); }
.solicitud__texto { color: var(--gris-700); font-size: .92rem; }
.solicitud__hogar { color: var(--gris-500); font-size: .82rem; margin-bottom: .8rem; }

/* --- Casillas de autorización ---
   Se leen antes de marcarlas: por eso ocupan un bloque y no una línea. */
.opcion--bloque {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .8rem;
    border: 1px solid var(--gris-300);
    border-radius: 8px;
    margin-bottom: .6rem;
    font-size: .9rem;
    line-height: 1.45;
}

.opcion--bloque input { margin-top: .2rem; }
.opcion--bloque strong { display: block; color: var(--gris-900); margin-bottom: .15rem; }

/* Número de radicado: es lo que la gente anota o fotografía. */
.comprobante__numero {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--azul-800);
    margin: 0 0 .6rem;
}

@media (max-width: 640px) {
    .publico__nav { width: 100%; margin-left: 0; }
    .portada h1 { font-size: 1.5rem; }
}

/* Mensajes de donantes y candidatos de vinculación en la bandeja. */
.contacto {
    padding: .8rem 0;
    border-bottom: 1px solid var(--gris-300);
}

.contacto:last-of-type { border-bottom: 0; }

.vinculo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--gris-300);
}

/* Aviso para el funcionario que está mirando la cara pública del sistema:
   sin él, es fácil confundir una pantalla con la otra. */
.publico__interno {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin-bottom: 1rem;
    padding: .6rem .9rem;
    border: 1px dashed var(--azul-600);
    border-radius: 8px;
    background: var(--azul-100);
    color: var(--azul-800);
    font-size: .85rem;
}

.publico__interno a { font-weight: 600; }

/* --- Panel de transparencia -------------------------------------------
   El aviso de datos de demostración va arriba y sin sutilezas: unas
   cifras de prueba sin advertencia son una mentira. */
.aviso-demostracion {
    padding: .9rem 1.1rem;
    margin-bottom: 1.2rem;
    border: 2px dashed var(--naranja);
    border-radius: 8px;
    background: #fdf3d8;
    color: #6b4310;
    font-size: .92rem;
}

.aviso-demostracion strong { display: block; margin-bottom: .2rem; }

/* La huella de la cadena: se muestra como un código, para que se pueda
   anotar y comparar después. */
.huella {
    padding: .9rem 1rem;
    border: 1px solid var(--gris-300);
    border-radius: 8px;
    background: var(--blanco);
}

.huella__titulo {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--gris-500);
}

.huella__cifra { font-size: 1.1rem; font-weight: 700; color: var(--azul-800); margin: .25rem 0; }

.huella__codigo {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1rem;
    letter-spacing: .08em;
    color: var(--gris-900);
    background: var(--gris-100);
    padding: .35rem .6rem;
    border-radius: 5px;
    display: inline-block;
    margin: .2rem 0 .35rem;
}

.huella__pie { font-size: .78rem; color: var(--gris-500); }

/* --- Ocupación de albergues ---
   Una barra dice de un vistazo lo que un porcentaje obliga a leer. Se
   pone en ámbar al pasar el umbral de aviso: el hacinamiento no es un
   detalle estético. */
.barra-ocupacion {
    height: 8px;
    border-radius: 4px;
    background: var(--gris-200, #e6eaee);
    overflow: hidden;
    margin-bottom: .2rem;
}

.barra-ocupacion span {
    display: block;
    height: 100%;
    background: var(--azul-600);
}

.barra-ocupacion--alerta span { background: #d98014; }

/* Marca cuadrada de un sitio en el mapa (albergues, acopios). El
   cuadrado los separa de los puntos de inspección, que son círculos:
   son cosas distintas y no deben leerse igual. */
.mapa__sitio-marca {
    display: block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--blanco);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(15, 35, 60, .45);
}

.mapa-leyenda__cuadro {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid var(--blanco);
    box-shadow: 0 0 0 1px var(--gris-300);
    vertical-align: -2px;
    margin-right: .3rem;
}