/* =============================================================
   Custodios del Meridiano — CSS Principal
   Estética: archivo clandestino / terminal táctico forense ibérico
   Paleta y variables tomadas de la Guía Visual UI/UX (Documentos/) y
   validadas contra el prototipo elegido (Prototipo UI/prototipo_terminal_home_index.html).
   Fase 7 de la transición — 31-jul-2026: solo VALORES de variable, mismos NOMBRES
   que usaba WarpWalker, para que las ~15 páginas existentes se repinten solas sin
   tocar su HTML. El renombrado de componentes (tarjetas/cabeceras al estilo
   "ci-card"/"ci-header" de la guía) es un paso posterior, no este.
   ============================================================= */

:root {
    --negro:        #080704;   /* Obsidiana — fondo base */
    --fondo:        #100d09;   /* Carbón Meridiano — fondo secundario */
    --fondo-panel:  #100d09;   /* Asfalto Quemado — tarjetas y bloques */
    --panel-elevado:#151109;   /* Bronce Oscuro — modales/tarjetas activas (nuevo, aditivo) */
    --oro:          #c28a1d;   /* Ámbar Meridiano — acento principal */
    --oro-claro:    #e2b653;   /* dorado brillante — cabeceras, informe */
    --oro-oscuro:   rgba(209, 151, 33, .35);  /* borde translúcido, técnica del prototipo */
    --oro-apagado:  #786038;   /* dorado apagado — etiquetas pequeñas */
    --rojo:         #a5342a;
    --rojo-vivo:    #D94A3A;   /* Rojo Deriva — alerta/crítico */
    --verde-ico:    #8faa72;   /* Verde Anclaje — éxito/estable */
    --gris:         #786038;   /* gris cálido — bordes neutros */
    --texto:        #ecd7aa;   /* texto principal */
    --texto-dim:    #b59050;   /* texto secundario */
    --blanco-sucio: #ecd7aa;   /* texto destacado/cifras grandes (igual que --texto en esta paleta) */
    --ink:          #171006;   /* texto oscuro sobre fondos dorados sólidos */
    /* Antes monoespaciado (Courier). El prototipo elegido usa un único sans-serif
       (Inter) también para códigos/números — sin fuente de terminal separada. */
    --fuente:       'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    /* Sans-serif del sistema: botones, etiquetas, navegación */
    --fuente-ui:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    /* Serif: texto narrativo largo, informes, crónicas */
    --fuente-texto: Georgia, 'Times New Roman', serif;
}

* {
    box-sizing: border-box;
    margin:     0;
    padding:    0;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    height:      100%;
    background:  var(--negro);
    color:       var(--texto);
    font-family: var(--fuente-ui);
    font-size:   16px;
    line-height: 1.5;
    overflow-x:  hidden;
}

/* Textura sutil de fondo (retícula + resplandor ámbar) — misma idea que el
   prototipo elegido (radial-gradient + líneas finas), pero en CSS puro, sin la
   imagen de ruido incrustada en base64 del prototipo (~200KB innecesarios en
   cada carga de página para un efecto que debe ser casi invisible). */
body {
    background:
        radial-gradient(circle at 50% -6%, rgba(215, 161, 50, .13), transparent 20rem),
        linear-gradient(rgba(215, 161, 50, .022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(215, 161, 50, .018) 1px, transparent 1px),
        var(--negro);
    background-size: auto, 32px 32px, 32px 32px, auto;
    background-attachment: fixed;
}

/* --- Estructura general --- */
#app {
    min-height: 100vh;
    display:    flex;
    flex-direction: column;
    max-width:  480px;
    margin:     0 auto;
    padding:    0;
}

/* --- Pantallas (index.php) --- */
.pantalla {
    display:    none;
    flex-direction: column;
    min-height: 100vh;
    padding:    16px;
}
.pantalla.activa { display: flex; }

/* Barra inferior — al final del contenido, sin posición fija */
.barra-inferior-fija {
    width:      100%;
    max-width:  480px;
    box-sizing: border-box;
    margin:     24px auto 0;
    padding:    12px 16px 8px;
    border-top: 1px solid var(--gris);
}
/* Botón/enlace dentro de barra: ancho completo, centrado */
.barra-inferior-fija .btn {
    margin:          0;
    display:         block;
    width:           100%;
    box-sizing:      border-box;
    text-align:      center;
    text-decoration: none;
}

/* --- Cabecera imperial --- */
.cabecera {
    border-bottom: 1px solid var(--oro-oscuro);
    padding-bottom: 12px;
    margin-bottom:  16px;
    text-align:     center;
}
.cabecera-titulo {
    font-family:    var(--fuente);
    font-size:      10px;
    letter-spacing: 2px;
    color:          var(--oro-apagado);
    text-transform: uppercase;
}
.cabecera-subtitulo {
    font-family:    var(--fuente);
    font-size:      18px;
    color:          var(--oro);
    letter-spacing: 2px;
    margin-top:     6px;
    text-shadow:    0 0 12px rgba(194, 138, 29, 0.45), 0 0 4px rgba(194, 138, 29, 0.25);
}

/* --- Panel / tarjeta --- */
.panel {
    background:    var(--fondo-panel);
    border:        1px solid var(--gris);
    border-left:   3px solid var(--oro-oscuro);
    padding:       16px;
    margin-bottom: 12px;
}
.panel-titulo {
    font-family:    var(--fuente);
    font-size:      10px;
    letter-spacing: 2px;
    color:          var(--texto-dim);
    text-transform: uppercase;
    margin-bottom:  8px;
}
.panel-valor {
    font-size:  22px;
    color:      var(--blanco-sucio);
}

/* --- Barra de Terra segmentada --- */
.terra-segmentos {
    display: flex;
    gap:     3px;
}
.terra-segmento {
    flex:       1;
    height:     6px;
    background: var(--gris);
    transition: background 0.4s ease;
}
.terra-segmento.activo {
    background: var(--oro-oscuro);
}
.terra-segmento.activo-alto {
    background: var(--oro);
}
.terra-segmento.activo-critico {
    background: var(--oro-claro);
    box-shadow: 0 0 4px rgba(194, 138, 29, 0.4);
}

/* --- Línea separadora ornamental --- */
.separador {
    border:     none;
    border-top: 1px solid var(--gris);
    margin:     16px 0;
}
.separador-oro {
    border-color: var(--oro-oscuro);
}

/* --- Botones principales --- */
.btn {
    display:        block;
    width:          100%;
    padding:        16px 14px;
    margin-bottom:  10px;
    background:     transparent;
    border:         1px solid var(--oro-oscuro);
    color:          var(--oro);
    font-family:    var(--fuente-ui);
    font-size:      14px;
    font-weight:    500;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor:         pointer;
    transition:     background 0.15s, color 0.15s, border-color 0.15s;
    text-align:     center;
}
.btn:active, .btn:hover {
    background:   rgba(209, 151, 33, 0.25);
    border-color: var(--oro);
    color:        var(--oro-claro);
}
.btn-primario {
    border-color: var(--oro);
    border-width: 2px;
    font-size:    15px;
    font-weight:  600;
    padding:      20px;
    color:        var(--oro-claro);
}
.btn-primario:active, .btn-primario:hover {
    background: rgba(194, 138, 29, 0.2);
}
.btn-peligro {
    border-color: var(--rojo);
    color:        #e05050;
}
.btn-peligro:active, .btn-peligro:hover {
    background: rgba(165, 52, 42, 0.3);
    color:      #ff7070;
}

/* --- Botón de despliegue (acción principal dominante) --- */
.btn-despliegue {
    display:        block;
    width:          100%;
    padding:        22px 16px;
    margin-bottom:  12px;
    background:     var(--oro);
    border:         2px solid var(--oro-claro);
    color:          var(--ink);
    font-family:    var(--fuente-ui);
    font-size:      17px;
    font-weight:    700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor:         pointer;
    text-align:     center;
    animation:      pulso-despliegue 2.5s ease-in-out infinite;
    transition:     background 0.15s, transform 0.1s;
}
.btn-despliegue:active {
    background:  var(--oro-claro);
    transform:   scale(0.98);
    animation:   none;
}
@keyframes pulso-despliegue {
    0%, 100% { box-shadow: 0 0 0 0 rgba(194, 138, 29, 0); }
    50%       { box-shadow: 0 0 16px 4px rgba(194, 138, 29, 0.30); }
}

/* --- Grid de navegación secundaria --- */
.nav-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   8px;
    margin-bottom:         16px;
}
.btn-nav {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    gap:            6px;
    padding:        12px 8px;
    background:     transparent;
    border:         1px solid var(--gris);
    color:          var(--texto-dim);
    font-family:    var(--fuente-ui);
    font-size:      11px;
    font-weight:    500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor:         pointer;
    text-align:     center;
    min-height:     64px;
    transition:     background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-nav img {
    width:   26px;
    height:  26px;
    opacity: 0.55;
    transition: opacity 0.15s;
}
.btn-nav:active, .btn-nav:hover {
    background:   rgba(209, 151, 33, 0.15);
    border-color: var(--oro-oscuro);
    color:        var(--oro);
}
.btn-nav:active img, .btn-nav:hover img {
    opacity: 0.9;
}

/* --- Botones de decisión (durante expedición) --- */
#panel-decision {
    display:    none;
    flex-wrap:  wrap;
    gap:        8px;
    margin-top: 16px;
}
.btn-decision {
    flex:           1 1 45%;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    gap:            4px;
    padding:        14px 8px;
    background:     var(--fondo-panel);
    border:         1px solid var(--gris);
    color:          var(--texto);
    font-family:    var(--fuente-ui);
    font-size:      13px;
    font-weight:    500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor:         pointer;
    min-height:     56px;
    transition:     background 0.15s;
}
.btn-decision:active { background: var(--gris); color: var(--blanco-sucio); }
.btn-decision-label { display: block; font-family: var(--fuente-ui); font-size: 13px; letter-spacing: 1px; color: var(--oro-claro); font-weight: 700; text-transform: uppercase; margin-bottom: 2px; }
.btn-decision-sub   { display: block; font-family: var(--fuente-texto); font-size: 10px; color: var(--texto-dim); letter-spacing: 0; text-transform: none; font-style: italic; font-weight: 400; line-height: 1.4; }

/* --- Overlay de PÁNICO (decisiones de bioma) --- */
#overlay-panico {
    display:         none;
    position:        fixed;
    inset:           0;
    background:      rgba(8, 3, 0, 0.97);
    z-index:         9999;
    flex-direction:  column;
    justify-content: center;
    align-items:     center;
    padding:         24px;
}
.panico-contenedor {
    width:     100%;
    max-width: 480px;
    text-align: center;
}
.panico-alerta {
    font-family:    var(--fuente);
    font-size:      11px;
    letter-spacing: 3px;
    color:          var(--rojo-vivo);
    margin-bottom:  16px;
    animation:      pulso-rojo 1s ease-in-out infinite;
}
@keyframes pulso-rojo {
    0%,100% { opacity: 1; }
    50%      { opacity: 0.4; }
}
.panico-descripcion {
    font-family:   var(--fuente-texto);
    font-size:     16px;
    line-height:   1.8;
    color:         var(--blanco-sucio);
    margin-bottom: 28px;
    border:        1px solid var(--rojo);
    padding:       16px;
    background:    var(--fondo-panel);
    text-align:    left;
}
.panico-botones {
    display:        flex;
    flex-direction: column;
    gap:            12px;
    margin-bottom:  20px;
}
.btn-panico {
    width:          100%;
    padding:        20px 16px;
    font-family:    var(--fuente-ui);
    font-size:      16px;
    font-weight:    700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background:     var(--fondo-panel);
    color:          var(--oro);
    border:         2px solid var(--oro-oscuro);
    cursor:         pointer;
    min-height:     64px;
    transition:     background 0.15s;
}
.btn-panico:active {
    background: rgba(209, 151, 33, 0.35);
    color:      var(--blanco-sucio);
}
.panico-cuenta {
    font-size:  13px;
    color:      var(--texto-dim);
    letter-spacing: 1px;
}

/* --- Temporizador y distancia (pantalla expedición) --- */
.metricas {
    display:         flex;
    gap:             10px;
    justify-content: center;
    margin:          20px 0;
}
.metrica {
    flex:       1;
    text-align: center;
    padding:    14px 8px;
    background: var(--fondo-panel);
    border:     1px solid var(--gris);
}
.metrica-label {
    font-family:    var(--fuente);
    font-size:      10px;
    letter-spacing: 2px;
    color:          var(--texto-dim);
    text-transform: uppercase;
    display:        block;
    margin-bottom:  6px;
}
.metrica-valor {
    font-size:   30px;
    font-weight: 300;
    color:       var(--oro);
    display:     block;
    font-family: var(--fuente);
}

/* --- Pantalla expedición activa: fondo y sello --- */
.pantalla-expedicion-activa {
    position:   relative;
    overflow:   hidden;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 28px,
        rgba(90, 70, 20, 0.07) 28px,
        rgba(90, 70, 20, 0.07) 29px
    ),
    repeating-linear-gradient(
        90deg,
        transparent,
        transparent 28px,
        rgba(90, 70, 20, 0.07) 28px,
        rgba(90, 70, 20, 0.07) 29px
    );
}

.exp-sello-fondo {
    position:   absolute;
    top:        50%;
    left:       50%;
    transform:  translate(-50%, -50%);
    width:      220px;
    height:     220px;
    object-fit: contain;
    opacity:    0.05;
    pointer-events: none;
    user-select: none;
    z-index:    0;
}

/* Todo el contenido por encima del sello de fondo */
.pantalla-expedicion-activa > *:not(.exp-sello-fondo) {
    position: relative;
    z-index:  1;
}

/* --- Panel de última señal recibida --- */
.exp-ultimo-evento {
    margin:         12px 0;
    padding:        10px 14px;
    border:         1px solid rgba(90, 70, 20, 0.4);
    border-left:    3px solid var(--oro-oscuro);
    background:     rgba(20, 14, 4, 0.6);
    min-height:     54px;
}

.exp-ultimo-evento-label {
    font-family:    var(--fuente);
    font-size:      9px;
    letter-spacing: 2px;
    color:          var(--oro-oscuro);
    margin-bottom:  5px;
}

.exp-ultimo-evento-texto {
    font-size:   12px;
    color:       var(--texto-dim);
    line-height: 1.5;
    font-style:  italic;
}

/* Historial de hasta 5 señales — la más reciente arriba y en el color normal,
   las anteriores se van apagando para marcar el orden sin necesitar timestamps. */
.exp-ultimo-evento-lista .exp-ultimo-evento-texto {
    padding-bottom: 6px;
    margin-bottom:  6px;
    border-bottom:  1px solid rgba(90, 70, 20, 0.25);
}
.exp-ultimo-evento-lista .exp-ultimo-evento-texto:last-child {
    padding-bottom: 0;
    margin-bottom:  0;
    border-bottom:  none;
}
.exp-ultimo-evento-lista .exp-ultimo-evento-texto:nth-child(n+3) { opacity: 0.7; }
.exp-ultimo-evento-lista .exp-ultimo-evento-texto:nth-child(n+5) { opacity: 0.45; }

/* --- Indicador de parada --- */
.indicador-parada {
    display:        none;
    text-align:     center;
    padding:        10px 14px;
    font-family:    var(--fuente-ui);
    font-size:      12px;
    letter-spacing: 1px;
    font-weight:    500;
    border:         1px solid;
    margin:         8px 0;
    animation:      pulso 1.5s infinite;
}
.parada-escaneo_rapido    { border-color: var(--texto-dim); color: var(--texto-dim); }
.parada-analisis_zona     { border-color: var(--oro-oscuro); color: var(--oro); }
.parada-hallazgo_especial { border-color: var(--oro); color: var(--blanco-sucio); }

@keyframes pulso {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

/* --- Evento narrativo --- */
#evento-narrativo {
    display:     none;
    background:  rgba(28, 16, 8, 0.98);
    border:      1px solid var(--oro-oscuro);
    border-left: 3px solid var(--oro);
    padding:     16px;
    font-family: var(--fuente-texto);
    font-size:   15px;
    line-height: 1.75;
    margin:      12px 0;
    animation:   aparecerTexto 0.4s ease;
    color:       var(--blanco-sucio);
}
@keyframes aparecerTexto {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Informe narrativo (resultado) --- */
.informe {
    font-family: var(--fuente-texto);
    font-size:   15px;
    line-height: 1.9;
    color:       var(--texto);
    margin:      12px 0;
}
.informe-parrafo { margin: 0; padding: 0; }
.informe-cabecera {
    font-family:    var(--fuente);
    font-size:      13px;
    letter-spacing: 2px;
    color:          var(--oro-claro);
    margin:         10px 0 4px;
}
.informe-sep {
    display:        flex;
    align-items:    center;
    gap:            12px;
    margin:         22px 0;
    color:          var(--oro-claro);
    font-size:      12px;
}
.informe-sep::before,
.informe-sep::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: linear-gradient(to right, rgba(194,138,29,0.15), rgba(194,138,29,0.75));
}
.informe-sep::after {
    background: linear-gradient(to left, rgba(194,138,29,0.15), rgba(194,138,29,0.75));
}
.informe-tabla        { margin: 6px 0; border-left: 2px solid var(--oro-oscuro); padding-left: 8px; }
.informe-tabla-fila   { display: flex; gap: 12px; padding: 3px 0; border-bottom: 1px solid rgba(139,90,0,0.18); font-family: var(--fuente); font-size: 11px; }
.informe-tabla-celda  { flex: 1; color: var(--texto); }
.comentario-malcador {
    border-top:       1px solid var(--oro-oscuro);
    margin-top:       16px;
    padding-top:      16px;
    padding:          14px;
    background:       rgba(209, 151, 33, 0.07);
    font-family:      var(--fuente-texto);
    font-style:       italic;
    color:            var(--blanco-sucio);
    font-size:        15px;
    line-height:      1.85;
    border-left:      3px solid var(--oro-oscuro);
    display:          flex;
    align-items:      flex-start;
    gap:              12px;
}
/* --- Recursos obtenidos --- */
.recursos-grid {
    display:   grid;
    grid-template-columns: repeat(3, 1fr);
    gap:       8px;
    margin:    12px 0;
}
.recurso-item {
    text-align: center;
    padding:    12px 4px;
    background: var(--fondo-panel);
    border:     1px solid var(--gris);
}
.recurso-nombre {
    display:        block;
    font-family:    var(--fuente);
    font-size:      9px;
    letter-spacing: 1.5px;
    color:          var(--texto-dim);
    text-transform: uppercase;
    margin-bottom:  4px;
}
.recurso-valor {
    display:     block;
    font-size:   24px;
    font-weight: 300;
    color:       var(--oro);
    font-family: var(--fuente);
}

/* --- Niveles de riesgo --- */
.riesgo {
    display:        inline-block;
    padding:        3px 10px;
    font-family:    var(--fuente-ui);
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 1px;
    text-transform: uppercase;
    border:         1px solid;
    border-radius:  2px;
}
.riesgo-bajo      { border-color: var(--verde-ico); color: var(--verde-ico); }
.riesgo-moderado  { border-color: var(--texto-dim); color: var(--texto-dim); }
.riesgo-alto      { border-color: #cc7700; color: #cc7700; }
.riesgo-critico   { border-color: var(--rojo-vivo); color: var(--rojo-vivo); }

/* --- Badges de estado/entidad — componente reutilizable en todas las pantallas --- */
/* Base: chip compacto con fondo semitransparente + borde de color */
.badge {
    display:        inline-block;
    padding:        2px 8px;
    border-radius:  3px;
    font-family:    var(--fuente-ui);
    font-size:      10px;
    letter-spacing: 1px;
    font-weight:    bold;
    text-transform: uppercase;
    border:         1px solid;
    white-space:    nowrap;
}
/* Estados de personaje */
.badge-leal, .badge-activo     { background: rgba(40,100,40,0.4);   border-color: #4a8a4a; color: #8fdf8f; }
.badge-sospechoso               { background: rgba(100,80,0,0.4);    border-color: #8a7a00; color: #dfcf5f; }
.badge-desconocido              { background: rgba(60,60,60,0.4);    border-color: #555;    color: #999; }
.badge-hereje, .badge-activa-org{ background: rgba(100,20,20,0.4);   border-color: #8a3a3a; color: #df8f8f; }
.badge-enemigo                  { background: rgba(110,50,0,0.4);    border-color: #9a5500; color: #e09040; }
.badge-desmantelada             { background: rgba(30,30,80,0.4);    border-color: #3a3a8a; color: #8f8fdf; }
.badge-en-estudio               { background: rgba(0,60,100,0.4);    border-color: #0a5a8a; color: #5fafd9; }
.badge-resuelto                 { background: rgba(20,80,20,0.4);    border-color: #2a6a2a; color: #7fcf7f; }
/* Rareza de reliquia */
.badge-legendaria               { background: rgba(100,60,0,0.4);    border-color: #9a7000; color: var(--oro); }
.badge-rara                     { background: rgba(60,0,100,0.4);    border-color: #6a0a8a; color: #cf8fdf; }
.badge-inusual                  { background: rgba(0,60,60,0.4);     border-color: #0a7a7a; color: #5fcfcf; }
/* Badge de entidad histórica */
.historico-badge {
    display:        inline-block;
    font-family:    var(--fuente-ui);
    font-size:      9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color:          var(--oro);
    border:         1px solid var(--oro-oscuro);
    padding:        1px 6px;
    border-radius:  2px;
}
/* Niveles de campaña (mismo patrón visual que .riesgo pero para campaña) */
.nivel-badge {
    display:        inline-block;
    font-family:    var(--fuente-ui);
    font-size:      8px;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding:        2px 8px;
    border:         1px solid;
    border-radius:  2px;
    white-space:    nowrap;
    margin-bottom:  6px;
}
.nivel-1 { border-color: var(--texto-dim);  color: var(--texto-dim); }
.nivel-2 { border-color: var(--oro-oscuro); color: var(--oro-oscuro); }
.nivel-3 { border-color: var(--oro);        color: var(--oro); }
.nivel-4 { border-color: var(--rojo-vivo);  color: var(--rojo-vivo); }
/* Estados de campaña */
.estado-badge {
    display:        inline-block;
    font-family:    var(--fuente-ui);
    font-size:      9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding:        3px 10px;
    border:         1px solid;
    border-radius:  2px;
    white-space:    nowrap;
}
.estado-activa     { border-color: var(--oro);        color: var(--oro); }
.estado-completada { border-color: var(--verde-ico);  color: var(--verde-ico); }
.estado-inactiva   { border-color: var(--texto-dim);  color: var(--texto-dim); }
.estado-fallida    { border-color: var(--rojo-vivo);  color: var(--rojo-vivo); }

/* --- Estado vacío — componente reutilizable en todas las pantallas --- */
.estado-vacio {
    padding:      16px 14px;
    border-left:  2px solid rgba(139,90,0,0.22);
    margin:       8px 0;
}
.estado-vacio-icono {
    display:      inline;
    font-size:    13px;
    color:        var(--oro-oscuro);
    opacity:      0.75;
    margin-right: 5px;
    font-style:   normal;
}
.estado-vacio-titulo {
    display:       inline;
    font-family:   var(--fuente);
    font-size:     9px;
    letter-spacing: 2px;
    color:         var(--texto-dim);
    text-transform: uppercase;
}
.estado-vacio-texto {
    font-family:  var(--fuente-texto);
    font-size:    12px;
    color:        var(--texto-dim);
    line-height:  1.75;
    margin-top:   8px;
}
.estado-vacio-accion {
    display:      block;
    margin-top:   5px;
    font-size:    11px;
    color:        rgba(160,128,80,0.5);
    font-style:   italic;
}

/* --- Mensajes del sistema --- */
.mensaje-sistema {
    display:         none;
    position:        fixed;
    top:             16px;
    left:            50%;
    transform:       translateX(-50%);
    max-width:       90%;
    padding:         12px 20px;
    font-family:     var(--fuente-ui);
    font-size:       13px;
    font-weight:     500;
    letter-spacing:  0.3px;
    border:          1px solid;
    border-radius:   3px;
    background:      rgba(17, 8, 0, 0.97);
    z-index:         1000;
    text-align:      center;
    box-shadow:      0 4px 20px rgba(0,0,0,0.6);
}
.mensaje-info    { border-color: var(--gris);      color: var(--texto); }
.mensaje-exito   { border-color: var(--verde-ico); color: #5aba5a; }
.mensaje-aviso   { border-color: #cc7700;          color: #e89030; }
.mensaje-error   { border-color: var(--rojo-vivo); color: #ff5050; }

/* --- Pantalla de carga --- */
#pantalla-cargando {
    align-items:     center;
    justify-content: center;
    gap:             24px;
}
.spinner {
    width:  44px;
    height: 44px;
    border: 2px solid var(--gris);
    border-top-color: var(--oro);
    border-radius:    50%;
    animation:        girar 0.9s linear infinite;
}
@keyframes girar {
    to { transform: rotate(360deg); }
}
#cargando-texto {
    font-family:    var(--fuente);
    font-size:      11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:          var(--texto-dim);
}

/* --- Sellos y texto decorativo --- */
.clasificado {
    font-family:    var(--fuente);
    font-size:      9px;
    letter-spacing: 2.5px;
    color:          var(--texto-dim);
    text-transform: uppercase;
    text-align:     center;
    margin:         8px 0;
}
.numero-operacion {
    font-family:    var(--fuente);
    font-size:      36px;
    font-weight:    normal;
    color:          var(--blanco-sucio);
    text-align:     center;
    letter-spacing: 4px;
}

/* --- Pie --- */
.pie {
    margin-top:     auto;
    padding-top:    20px;
    text-align:     center;
    font-family:    var(--fuente);
    font-size:      9px;
    letter-spacing: 1.5px;
    color:          var(--oro-apagado);
}

/* --- Lightbox de imagenes (informes, legados de sector, archivo fotografico) ---
   Pulsar cualquier .exp-foto / .dossier-foto / .sector-portada abre esto a pantalla
   completa. abrirLightbox() añade la clase .rotada via JS solo si la imagen es
   apaisada Y el movil esta en vertical — asi una foto vertical de mascota no se
   rota sin sentido, pero una portada 16:9 generada por IA aprovecha el ancho. */
.exp-foto, .dossier-foto, .sector-portada {
    cursor: pointer;
}
.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(8, 5, 0, 0.94);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.lightbox-overlay.activo { display: flex; }
.lightbox-overlay img {
    max-width: 96vw;
    max-height: 92vh;
    object-fit: contain;
    touch-action: none; /* el zoom lo gestiona JS (doble-tap + pinch) — sin esto el navegador
                            compite con el gesto y el zoom nativo de pagina interfiere */
}
.lightbox-overlay img.rotada {
    max-width: 92vh;
    max-height: 96vw;
    transform: rotate(90deg);
}
.lightbox-cerrar {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10000;
    padding: 8px 14px;
    font-family: var(--fuente);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--oro-claro);
    border: 1px solid var(--oro-oscuro);
    background: rgba(8, 5, 0, 0.6);
}

/* Eco Historico — paleta oro/sigilita (no rojo, eso es panico/amenaza) para que se
   sienta solemne y especial, no peligroso. */
#overlay-eco-historico {
    display:         none;
    position:        fixed;
    inset:           0;
    background:      rgba(5, 4, 0, 0.97);
    z-index:         9999;
    flex-direction:  column;
    justify-content: center;
    align-items:     center;
    padding:         24px;
}
.eco-historico-contenedor {
    width:      100%;
    max-width:  480px;
    text-align: center;
}
.eco-historico-sello {
    font-family:    var(--fuente);
    font-size:      11px;
    letter-spacing: 3px;
    color:          var(--oro);
    margin-bottom:  16px;
}
.eco-historico-foto {
    width:         100%;
    max-height:    50vh;
    object-fit:    cover;
    border:        2px solid var(--oro-oscuro);
    margin-bottom: 16px;
}
.eco-historico-nombre {
    font-family:    var(--fuente-ui);
    font-size:      18px;
    font-weight:    700;
    letter-spacing: 1px;
    color:          var(--oro-claro);
    margin-bottom:  12px;
}
.eco-historico-texto {
    font-family:   var(--fuente-texto);
    font-size:     15px;
    line-height:   1.8;
    color:         var(--blanco-sucio);
    margin-bottom: 24px;
    border:        1px solid var(--oro-oscuro);
    padding:       16px;
    background:    var(--fondo-panel);
    text-align:    left;
}
.btn-eco-continuar {
    width:          100%;
    padding:        18px 16px;
    font-family:    var(--fuente-ui);
    font-size:      14px;
    font-weight:    700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background:     var(--fondo-panel);
    color:          var(--oro);
    border:         2px solid var(--oro-oscuro);
    cursor:         pointer;
    min-height:     56px;
}

/* =============================================================
   Utilidades CSP (02-ago-2026) — Punto 3 del cierre de Alpha Custodios.
   Sin esto, cada barra de progreso o show/hide necesitaria un style="..."
   inline, bloqueado por CSP style-src sin 'unsafe-inline'. Con clases fijas
   (incluidas asignaciones .style.xxx= por JS, que CSP trata igual que el
   atributo HTML) no hace falta ningun mecanismo nuevo (nonces/hashes).
   ============================================================= */
.pg-hidden { display: none !important; }
.pg-visible-block { display: block !important; }
.pg-visible-flex { display: flex !important; }
.pg-visible-inline { display: inline !important; }
.pg-opacity-0  { opacity: 0 !important; }
.pg-opacity-60 { opacity: 0.6 !important; }
.pg-color-oro   { color: var(--oro); }
.pg-color-dim   { color: var(--texto-dim); }
.pg-color-verde { color: var(--verde-ico); }
.pg-pe-none { pointer-events: none !important; }
.pg-overflowy-hidden { overflow-y: hidden !important; }
/* Escala de texto (ajustes.js/errores.js) — 5 pasos fijos, sustituye document.documentElement.style.zoom */
.pg-zoom-125 { zoom: 1.25; }
.pg-zoom-150 { zoom: 1.5; }
.pg-zoom-175 { zoom: 1.75; }
.pg-zoom-200 { zoom: 2; }
/* Botón flotante de reset de escala (errores.js, se inyecta en cualquier página) */
.pg-btn-reset-zoom {
    position: fixed; top: 8px; right: 8px; z-index: 9999;
    background: #1c1008; border: 1px solid #8a6408; color: #c8960c;
    font-size: 11px; padding: 5px 10px; cursor: pointer;
    font-family: system-ui; border-radius: 2px; opacity: 0.9;
    touch-action: manipulation;
}
/* Clases de ancho de barra de progreso, 0-100% en pasos de 1 (redondeo
   imperceptible en una barra). Uso: class="barra-fill pg-w-${Math.round(pct)}" */
.pg-w-0{width:0%}.pg-w-1{width:1%}.pg-w-2{width:2%}.pg-w-3{width:3%}.pg-w-4{width:4%}.pg-w-5{width:5%}.pg-w-6{width:6%}.pg-w-7{width:7%}.pg-w-8{width:8%}.pg-w-9{width:9%}.pg-w-10{width:10%}.pg-w-11{width:11%}.pg-w-12{width:12%}.pg-w-13{width:13%}.pg-w-14{width:14%}.pg-w-15{width:15%}.pg-w-16{width:16%}.pg-w-17{width:17%}.pg-w-18{width:18%}.pg-w-19{width:19%}.pg-w-20{width:20%}.pg-w-21{width:21%}.pg-w-22{width:22%}.pg-w-23{width:23%}.pg-w-24{width:24%}.pg-w-25{width:25%}.pg-w-26{width:26%}.pg-w-27{width:27%}.pg-w-28{width:28%}.pg-w-29{width:29%}.pg-w-30{width:30%}.pg-w-31{width:31%}.pg-w-32{width:32%}.pg-w-33{width:33%}.pg-w-34{width:34%}.pg-w-35{width:35%}.pg-w-36{width:36%}.pg-w-37{width:37%}.pg-w-38{width:38%}.pg-w-39{width:39%}.pg-w-40{width:40%}.pg-w-41{width:41%}.pg-w-42{width:42%}.pg-w-43{width:43%}.pg-w-44{width:44%}.pg-w-45{width:45%}.pg-w-46{width:46%}.pg-w-47{width:47%}.pg-w-48{width:48%}.pg-w-49{width:49%}.pg-w-50{width:50%}.pg-w-51{width:51%}.pg-w-52{width:52%}.pg-w-53{width:53%}.pg-w-54{width:54%}.pg-w-55{width:55%}.pg-w-56{width:56%}.pg-w-57{width:57%}.pg-w-58{width:58%}.pg-w-59{width:59%}.pg-w-60{width:60%}.pg-w-61{width:61%}.pg-w-62{width:62%}.pg-w-63{width:63%}.pg-w-64{width:64%}.pg-w-65{width:65%}.pg-w-66{width:66%}.pg-w-67{width:67%}.pg-w-68{width:68%}.pg-w-69{width:69%}.pg-w-70{width:70%}.pg-w-71{width:71%}.pg-w-72{width:72%}.pg-w-73{width:73%}.pg-w-74{width:74%}.pg-w-75{width:75%}.pg-w-76{width:76%}.pg-w-77{width:77%}.pg-w-78{width:78%}.pg-w-79{width:79%}.pg-w-80{width:80%}.pg-w-81{width:81%}.pg-w-82{width:82%}.pg-w-83{width:83%}.pg-w-84{width:84%}.pg-w-85{width:85%}.pg-w-86{width:86%}.pg-w-87{width:87%}.pg-w-88{width:88%}.pg-w-89{width:89%}.pg-w-90{width:90%}.pg-w-91{width:91%}.pg-w-92{width:92%}.pg-w-93{width:93%}.pg-w-94{width:94%}.pg-w-95{width:95%}.pg-w-96{width:96%}.pg-w-97{width:97%}.pg-w-98{width:98%}.pg-w-99{width:99%}.pg-w-100{width:100%}