/* =============================================================
   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 fija: respeta el max-width de 480px en PC */
.barra-inferior-fija {
    position:   fixed;
    bottom:     0;
    left:       0;
    right:      0;
    max-width:  480px;
    margin:     0 auto;
    padding:    12px 16px;
    background: var(--fondo);
    border-top: 1px solid var(--gris);
}

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

/* --- 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);
    white-space: pre-wrap;
    margin:      12px 0;
}
.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);
}

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

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