/* =============================================================
   Warpwalker Chronicles — CSS Principal
   Estética: documento imperial clasificado / terminal Warhammer
   ============================================================= */

:root {
    --negro:        #0d0500;
    --fondo:        #110800;
    --fondo-panel:  #1c1008;
    --oro:          #c8960c;
    --oro-claro:    #ddb030;
    --oro-oscuro:   #8a6408;
    --oro-apagado:  #7a5a10;
    --rojo:         #8b1a1a;
    --rojo-vivo:    #cc2200;
    --verde-ico:    #3a8a3a;
    --gris:         #4a3c28;
    --texto:        #d4b483;
    --texto-dim:    #a08060;   /* era #7a6040 — mejorado para contraste */
    --blanco-sucio: #eedfc0;
    /* Monoespaciado: solo para sellos, códigos, clasificados, números */
    --fuente:       'Courier New', Courier, monospace;
    /* Sans-serif del sistema: botones, etiquetas, navegación */
    --fuente-ui:    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;
}

/* --- 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(200, 150, 12, 0.45), 0 0 4px rgba(200, 150, 12, 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(200, 150, 12, 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(138, 100, 8, 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(200, 150, 12, 0.2);
}
.btn-peligro {
    border-color: var(--rojo);
    color:        #e05050;
}
.btn-peligro:active, .btn-peligro:hover {
    background: rgba(139, 26, 26, 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:          #1a0800;
    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(200, 150, 12, 0); }
    50%       { box-shadow: 0 0 16px 4px rgba(200, 150, 12, 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(138, 100, 8, 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:    flex-start;
    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(138, 100, 8, 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;
}

/* --- 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(200,150,12,0.15), rgba(200,150,12,0.75));
}
.informe-sep::after {
    background: linear-gradient(to left, rgba(200,150,12,0.15), rgba(200,150,12,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(138, 100, 8, 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;
}
/* Retrato fijo de Malcador — un solo asset, no varia por cuenta/expedicion.
   Como pseudo-elemento con background-image (no <img>): si el archivo aun no
   existe, degrada a un circulo vacio en vez de un icono de imagen rota. */
.comentario-malcador::before {
    content:          '';
    width:            44px;
    height:           44px;
    flex-shrink:      0;
    border-radius:    50%;
    background:       url('../img/malcador_retrato.png') center/cover no-repeat, var(--fondo-panel);
    border:           1px solid var(--oro-oscuro);
}
/* Variante Salto Warp — borde y fondo morado en vez de dorado */
.comentario-malcador.salto-warp {
    border-left-color:  #9a5ab8;
    border-top-color:   #9a5ab8;
    background:         rgba(80, 20, 110, 0.15);
}
.comentario-malcador.salto-warp::before { border-color: #9a5ab8; }
.salto-warp-badge {
    display:        block;
    font-family:    var(--fuente);
    font-style:     normal;
    font-size:      9px;
    letter-spacing: 3px;
    color:          #b078d0;
    margin-bottom:  10px;
}

/* --- Pantalla de transición Warp --- */
#pantalla-warp {
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      #0a0015;
    animation:       warp-pulso 1.2s ease-in-out infinite alternate;
}
@keyframes warp-pulso {
    from { background: #0a0015; }
    to   { background: #1a0035; }
}
.warp-contenido {
    text-align: center;
    padding:    24px 16px;
}
.warp-sello {
    font-size:   64px;
    line-height: 1;
    filter:      drop-shadow(0 0 20px #9a5ab8);
    animation:   warp-brillo 0.8s ease-in-out infinite alternate;
}
@keyframes warp-brillo {
    from { filter: drop-shadow(0 0 10px #9a5ab8); }
    to   { filter: drop-shadow(0 0 30px #cc88ff); }
}
.warp-titulo {
    font-family:    var(--fuente);
    font-size:      22px;
    letter-spacing: 4px;
    color:          #cc88ff;
    text-shadow:    0 0 20px #9a5ab8;
    margin:         16px 0 8px;
    line-height:    1.3;
}
.warp-subtitulo {
    font-family:    var(--fuente);
    font-size:      8px;
    letter-spacing: 2px;
    color:          #7a5a8a;
    margin-bottom:  24px;
}
.warp-sector-anterior {
    font-family: var(--fuente-texto);
    font-size:   13px;
    color:       #a08060;
    font-style:  italic;
}
.warp-flecha {
    font-size:  28px;
    color:      #9a5ab8;
    margin:     8px 0;
    animation:  warp-bajada 0.6s ease-in-out infinite alternate;
}
@keyframes warp-bajada {
    from { transform: translateY(-4px); opacity: 0.6; }
    to   { transform: translateY(4px);  opacity: 1; }
}
.warp-sector-nuevo {
    font-family:    var(--fuente);
    font-size:      16px;
    letter-spacing: 3px;
    color:          #e0b8ff;
    text-shadow:    0 0 12px #9a5ab8;
    margin-bottom:  24px;
}
.warp-aviso {
    font-family: var(--fuente);
    font-size:   9px;
    letter-spacing: 2px;
    color:       #5a3a6a;
    animation:   warp-parpadeo 1s step-end infinite;
}
@keyframes warp-parpadeo {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* --- 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;
}