/* ======== TEMA OSCURO ELEGANTE ======== */

:root {
    --bg-main: #121212;        /* Fondo general: negro suave */
    --bg-panel: #1e1e1e;       /* Paneles: gris oscuro */
    --bg-summary: #0f0f0f;     /* Parte inferior fija */
    --text-main: #e6e6e6;      /* Texto principal */
    --text-muted: #b3b3b3;     /* Texto secundario */
    --accent: #3a82f7;         /* Azul elegante para botones */
    --accent-glow: rgba(58,130,247,0.35);
    --border-soft: #2a2a2a;
    --radius: 12px;
}

/* ======== CONFIGURACIÓN GENERAL ======== */

body {
    background: var(--bg-main);
    color: var(--text-main);
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow: hidden; /* Evita scroll global */
}

/* ======== PANEL SUPERIOR (scrollable) ======== */

#top-panel {
    height: 66vh;
    overflow-y: auto;
    padding: 20px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-soft);
    box-sizing: border-box;
}

/* Scroll elegante */
#top-panel::-webkit-scrollbar {
    width: 6px;
}
#top-panel::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 10px;
}

/* ======== PANEL INFERIOR (fijo) ======== */

#bottom-summary {
    height: 20vh; /* 1/6 del alto total */
    background: rgba(20, 20, 20, 0.55);
    border-top: 1px solid rgba(120, 170, 255, 0.35);
    backdrop-filter: blur(14px);
    box-shadow: 0 -4px 18px rgba(0,0,0,0.45);
    padding: 12px 20px;
}

.summary-row {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    flex-wrap: nowrap;
}

.summary-block {
    font-size: 18px;
    line-height: 1.3;
    color: var(--text-main);
}

.summary-block .sub {
    font-size: 18px;
    margin-top: 4px;
    color: var(--text-muted);
}

.summary-block strong {
    color: var(--accent);
}

/* === PANEL INFERIOR FORMAL === */
#session-output {
    font-family: "SF Mono", "Consolas", "Roboto Mono", monospace;
    font-size: 12px;
    line-height: 1.35;
    color: #e6e6e6;
}

.session-title-inline {
    font-size: 14px;
    letter-spacing: 1px;
    color: #9ec3ff;
    text-transform: uppercase;
}

.session-separator {
    height: 1px;
    background: rgba(120, 170, 255, 0.25);
    margin: 6px 0 12px 0;
}

.session-block {
    margin-bottom: 8px;
}

.session-label {
    color: #b7c7d9;
    margin-right: 6px;
}

.session-value {
    color: #e6e6e6;
    font-weight: 500;
}

.session-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 6px;
    font-size: 0.75rem;      /* letra más pequeña */
}

.session-table th,
.session-table td {
    border-bottom: 1px solid rgba(255,255,255,0.15);
    padding: 4px 6px;
    text-align: left;
}

.session-table th {
    font-weight: 600;
    opacity: 0.85;
}

.session-table td {
    opacity: 0.9;
}


/* ======== TITULOS ======== */

h2 {
    margin-top: 0;
    font-weight: 500;
    color: var(--text-main);
}

/* ======== BOTÓN CRISTAL AZUL ======== */

.button-cristal {
    background: rgba(58,130,247,0.15);
    border: 1px solid var(--accent-glow);
    color: var(--accent);
    padding: 10px 10px;
    border-radius: var(--radius);
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: 0.2s;
    font-size: 16px;
}

.button-cristal:hover {
    background: rgba(58,130,247,0.25);
    box-shadow: 0 0 12px var(--accent-glow);
}
/* ======== BOTÓN TARJETA DE MATRÍCULA ======== */

.matricula-card {
    width: 100px;
    padding: 10px 10px;
    background: rgba(58,130,247,0.12); /* cristal azul suave */
    border: 1px solid rgba(58,130,247,0.25);
    border-radius: var(--radius);
    backdrop-filter: blur(8px);
    color: var(--text-main);
    cursor: pointer;
    text-align: center;
    transition: 0.25s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.25);
}

/* Texto principal (matrícula) */
.matricula-main {
    font-size: 24x;
    font-weight: 600;
    margin-bottom: 4px;
}

/* Texto secundario (DOW/DOI) */
.matricula-sub {
    font-size: 12px;
    color: var(--text-muted);
}

/* Efecto al pulsar */
.matricula-card:active {
    transform: scale(0.97);
    background: rgba(58,130,247,0.25);
    box-shadow: 0 0 14px rgba(58,130,247,0.35);
}


/* Estado seleccionado (lo usaremos con JS más adelante) */
.matricula-card.selected {
    background: rgba(0, 180, 90, 0.25); /* verde suave */
    border-color: rgba(0, 180, 90, 0.45);
    box-shadow: none; /* sin halo */
    color: #b6ffcf; /* texto ligeramente verdoso */
}

/* MATRIZ DE BOTONES DE MATRÍCULA */
#matricula-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 14px;
    margin-top: 10px;
}

#matricula-seleccionada {
    margin-top: 10px;
    font-size: 24px;
    color: var(--text-main);
}

#matricula-seleccionada .sub {
    font-size: 24px;
    color: var(--text-muted);
}

.input-edit {
    width: 100%;
    padding: 12px;
    margin-top: 6px;
    margin-bottom: 14px;
    font-size: 18px;
    border-radius: var(--radius);
    border: 1px solid var(--border-soft);
    background: #1c1c1c;
    color: var(--text-main);
}
/* ============================================================
   Layout preparado para Telegram WebApp
   ============================================================ */

@media (max-width: 600px) {

    /* Telegram WebApp necesita scroll global */
    body {
        overflow: auto;
    }

    /* El panel superior debe crecer según contenido */
    #top-panel {
        height: auto;
        max-height: calc(100vh - 34vh);
        overflow-y: auto;
    }
}

/* Inputs con ancho exacto según caracteres */
#input-dow {
    width: 6ch;   /* 5 cifras + margen */
}

#input-doi {
    width: 5ch;   /* 4 cifras + punto */
}

/* Evitar estiramiento en Chrome / WebView */
.input-edit {
    min-width: 0;
    max-width: none;
    box-sizing: content-box;
}
#btn-aceptar {
    
    background: linear-gradient(135deg, rgba(58,130,247,0.35), rgba(58,130,247,0.18));
    border: 1px solid rgba(58,130,247,0.55);  /* borde más visible */
    color: var(--accent);
    padding: 16px 16px;                       /* más grande */
    font-size: 16px;
    font-weight: 500;
    border-radius: 14px;
    box-shadow: 0 0 14px rgba(58,130,247,0.45); /* halo azul suave */
    backdrop-filter: blur(10px);
    transition: 0.25s;
}

#btn-aceptar:hover {
    background: rgba(58,130,247,0.38);
    box-shadow: 0 0 18px rgba(58,130,247,0.55);
    transform: translateY(-1px);
}

.equip-panel {
    margin-top: 20px;
    padding: 14px 16px;
    background: rgba(40,40,40,0.45);
    border: 1px solid rgba(58,130,247,0.35);
    border-radius: 14px;
    backdrop-filter: blur(10px);
}

.equip-title {
    font-size: 18px;
    margin-bottom: 10px;
    color: var(--accent);
    font-weight: 500;
}

/* === GRID DE 3 COLUMNAS COMPACTAS === */
.equip-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px; /* muy compacto */
}

.equip-col label {
    display: block;
    text-align: center;
    font-size: 15px;
    margin-bottom: 4px;
    color: var(--accent);
}

.equip-col {
    display: flex;
    flex-direction: column;
    align-items: center;   /* centra título e input */
    justify-content: flex-start;
}


/* === INPUT CRISTAL AZUL UNIFICADO === */
.equip-input,
.pax-input,
.pax-entry-input {
    width: 3ch;
    padding: 8px 12px;
    font-size: 18px;
    text-align: center;

    /* Fondo cristal más visible */
    background: rgba(90, 150, 255, 0.32);

    /* Borde más luminoso y más grueso */
    border: 2px solid rgba(140, 180, 255, 0.75);

    /* Texto dinámico según tema */
    color: var(--text-main);

    border-radius: 10px;
    backdrop-filter: blur(10px);

    /* Halo más fuerte para móvil */
    box-shadow: 0 0 10px rgba(120, 170, 255, 0.45);
}

.catering-panel {
    margin-top: 20px;
    padding: 14px 16px;
    background: rgba(40,40,40,0.45);
    border: 1px solid rgba(58,130,247,0.35);
    border-radius: 14px;
    backdrop-filter: blur(10px);
}

/* === GRID DE 2 COLUMNAS COMPACTAS === */
.equip-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.summary-block {
    margin-bottom: 12px;
}

.summary-block .sub {
    font-size: 22px;
    margin-top: 6px;
    color: var(--text-muted);
}

.summary-block span {
    color: var(--accent);
}

/* === ANIMACIÓN SUAVE DE CAMBIO DE VALORES === */

.summary-block {
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.summary-block.updated {
    transform: scale(1.03);
    opacity: 0.85;
}

/* === PANEL DE TRIPULACIÓN === */
.crew-panel {
    margin-top: 20px;
    padding: 14px 16px;
    background: rgba(40,40,40,0.45);
    border: 1px solid rgba(58,130,247,0.35);
    border-radius: 14px;
    backdrop-filter: blur(10px);
}

/* GRID de 4 columnas */
.crew-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

/* === CREW INLINE PANEL === */
.crew-inline {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 18px;
}

/* Título */
.crew-title {
    font-size: 18px;
    color: var(--accent);
    font-weight: 500;
}

.crew-check-wrapper {
    display: flex;
    align-items: center;   /* 🔥 centrado real */
}

/* Contenedor del checkbox + texto */
.crew-check-label {
    display: flex;
    align-items: center;   /* 🔥 centrado vertical real */
    gap: 8px;
}

.crew-check-text {
    font-size: 16px;
    line-height: 16px;     /* 🔥 altura real del texto */
}



/* Checkbox cristal-azul */
.crew-check {
    width: 32px;
    height: 32px;
    cursor: pointer;

    background: rgba(90, 150, 255, 0.32);
    border: 2px solid rgba(140, 180, 255, 0.75);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 10px rgba(120, 170, 255, 0.45);

    appearance: none;
    -webkit-appearance: none;

    position: relative;
}

/* Tic interno */
.crew-check::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 8px;

    border-left: 3px solid transparent;
    border-bottom: 3px solid transparent;

    transform: rotate(-45deg);
    top: 8px;
    left: 8px;

    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Marcado */
.crew-check:checked {
    background: rgba(0, 180, 90, 0.35);
    border-color: rgba(0, 180, 90, 0.65);
    box-shadow: 0 0 12px rgba(0, 180, 90, 0.45);
}

/* Tic visible */
.crew-check:checked::after {
    border-left-color: rgba(255,255,255,0.95);
    border-bottom-color: rgba(255,255,255,0.95);
    opacity: 1;
}

.extra-panel {
    margin-top: 20px;
    padding: 14px 16px;
    background: rgba(40,40,40,0.45);
    border: 1px solid rgba(58,130,247,0.35);
    border-radius: 14px;
    backdrop-filter: blur(10px);
}

.extra-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* === WRAPPER PARA SELECT CRISTAL-AZUL === */
.extra-select-wrapper {
    position: relative;
    display: inline-block;
}

/* === SELECT CRISTAL-AZUL === */
.extra-select {
    padding: 10px 40px 10px 12px;
    font-size: 16px;

    background: rgba(90,150,255,0.32);
    border: 2px solid rgba(140,180,255,0.75);
    border-radius: 10px;
    backdrop-filter: blur(10px);

    color: var(--accent);
    box-shadow: 0 0 10px rgba(120,170,255,0.45);

    appearance: none;
    -webkit-appearance: none;

    width: 150px;

    /* 🔥 Esto centra el texto verticalmente */
    height: 44px;
    line-height: 44px;

    /* 🔥 Evita que el navegador aplaste el select */
    box-sizing: border-box;
}


/* === WRAPPER PARA SELECT CRISTAL-AZUL === */
.extra-select-wrapper {
    position: relative;
    display: inline-block;
}

/* === SELECT CRISTAL-AZUL (versión optimizada) === */
.extra-select {
    height: 38px;                 /* más compacto */
    padding: 0 28px 0 10px;       /* menos inflado */
    font-size: 15px;              /* más proporcionado */

    background: rgba(90,150,255,0.32);
    border: 2px solid rgba(140,180,255,0.75);
    border-radius: 10px;
    backdrop-filter: blur(10px);

    color: var(--accent);
    box-shadow: 0 0 10px rgba(120,170,255,0.45);

    appearance: none;
    -webkit-appearance: none;

    width: 110px;                 /* más estrecho y elegante */

    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* === FLECHA ▼ (más pequeña y más cerca) === */
.extra-select-wrapper::after {
    content: "▼";
    position: absolute;
    right: 8px;                   /* antes 12px */
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;              /* antes 16px */
    color: var(--accent);
    pointer-events: none;
}


/* === BOTÓN ADD ALINEADO === */
#extra-add {
    height: 44px;            /* igual que el select */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
}


.extra-list {
    margin-top: 14px;
    font-size: 16px;
    color: var(--text-main);
}

.extra-item {
    padding: 8px;
    margin-bottom: 6px;
    background: rgba(58,130,247,0.12);
    border: 1px solid rgba(58,130,247,0.25);
    border-radius: 10px;
    backdrop-filter: blur(8px);
}

.extra-delete {
    margin-left: 12px;
    padding: 6px 10px;
    font-size: 14px;

    background: rgba(255, 80, 80, 0.25);
    border: 1px solid rgba(255, 120, 120, 0.45);
    color: #ffb6b6;

    border-radius: 10px;
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: 0.25s;
}

.extra-delete:hover {
    background: rgba(255, 80, 80, 0.35);
    box-shadow: 0 0 10px rgba(255, 120, 120, 0.45);
}



/* === PANEL DE FUEL === */
.fuel-panel {
    margin-top: 20px;
    padding: 14px 16px;
    background: rgba(40,40,40,0.45);
    border: 1px solid rgba(58,130,247,0.35);
    border-radius: 14px;
    backdrop-filter: blur(10px);
}

.fuel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.fuel-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fuel-col label {
    display: block;
    text-align: center;
    font-size: 15px;
    margin-bottom: 4px;
    color: var(--accent);
}

.fuel-limit {
    margin-top: 4px;
    font-size: 14px;
    color: #3E8E41; /* mismo verde elegante */
    text-align: center;
}


/* === PANEL PAX === */
.pax-panel, .pax-entry-panel, .cabina-panel {
    margin-top: 20px;
    padding: 14px 16px;
    background: rgba(40,40,40,0.45);
    border: 1px solid rgba(58,130,247,0.35);
    border-radius: 14px;
    backdrop-filter: blur(10px);
}

.pax-total-display {
    margin-left: 12px;
    font-size: 20px;
    color: #5FD1FF; /* azul turquesa elegante */
}

.pax-total-display small {
    font-size: 14px;
    color: #5FD1FF; /* verde elegante para Babies */
}



/* Filas horizontales */
.pax-row, .pax-entry-row, .cabina-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

/* Cajas */
.pax-box, .cabina-box {
    flex: 1;
    padding: 12px;
    background: rgba(58,130,247,0.12);
    border: 1px solid rgba(58,130,247,0.25);
    border-radius: var(--radius);
    backdrop-filter: blur(8px);
    text-align: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.25);
}

/* Etiquetas */
.pax-box label, .cabina-box label {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    color: var(--accent);
}

/* === STRETCHER INLINE (versión mejorada) === */
.stretcher-inline {
    margin-top: 20px;
    padding: 14px 16px;
    background: rgba(40,40,40,0.45);
    border: 1px solid rgba(58,130,247,0.35);
    border-radius: 14px;
    backdrop-filter: blur(10px);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

/* Título igual que los demás labels */
.stretcher-title {
    font-size: 18px;
    color: var(--accent);
    font-weight: 500;
}

/* === PAX EN JUMPSEAT (checkbox junto a Cabin Distribution) === */
.jumpseat-pax-inline {
    margin-top: 12px;
    display: flex;
    justify-content: center;
}

.jumpseat-pax-inline .crew-check-label span {
    color: var(--accent);
}

/* Checkbox estilo cristal-azul */
#stretcher {
    width: 32px;
    height: 32px;
    cursor: pointer;

    background: rgba(90, 150, 255, 0.32);
    border: 2px solid rgba(140, 180, 255, 0.75);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 10px rgba(120, 170, 255, 0.45);

    appearance: none;
    -webkit-appearance: none;

    position: relative; /* necesario para el tic */
}

/* === TIC INTERNO === */
#stretcher::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 8px;

    border-left: 3px solid transparent;
    border-bottom: 3px solid transparent;

    transform: rotate(-45deg);
    top: 8px;
    left: 8px;

    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Estado marcado */
#stretcher:checked {
    background: rgba(0, 180, 90, 0.35);
    border-color: rgba(0, 180, 90, 0.65);
    box-shadow: 0 0 12px rgba(0, 180, 90, 0.45);
}

/* Tic visible cuando está marcado */
#stretcher:checked::after {
    border-left-color: rgba(255,255,255,0.95);
    border-bottom-color: rgba(255,255,255,0.95);
    opacity: 1;
}



/* === ANCHOS EXACTOS POR TIPO === */

/* Cargas (equipaje + catering) → 3 cifras */
.equip-input {
    width: 3ch;
}

/* Pax y cabina → 2 cifras */
.pax-input {
    width: 2ch;
}

/* === Fuel inputs: ancho correcto para 4 cifras === */
#fuel-fob,
#fuel-trip {
    width: 5.2ch;              /* ahora sí caben 4 dígitos */
    padding: 6px 10px;       /* un pelín menos de padding horizontal */
    font-size: 16px;         /* más proporcionado */
    text-align: center;
}
.cab-limit {
    margin-top: 4px;
    font-size: 14px;
    color: #3E8E41; /* verde elegante */
    text-align: center;
}
.cargo-total-panel {
    margin-top: 20px;
}

.cargo-total-box {
    margin-bottom: 10px;
}

.cargo-limit {
    margin-top: 4px;
    font-size: 14px;
    color: #3E8E41; /* verde elegante */
    text-align: center;
}


.cargo-total-row {
    display: flex;
    align-items: flex-start;
    gap: 12px; /* separación elegante */
}

/* Botón más estrecho pero con el mismo estilo */
.action-button-narrow {
    padding: 8px 12px;              /* más estrecho */
    background-color: #5FD1FF;       /* mismo color */
    border: none;
    border-radius: 6px;              /* mismo borde redondeado */
    color: #000;
    font-size: 16px;                 /* misma tipografía */
    cursor: pointer;
    height: 40px;                    /* misma altura que el input */
    white-space: normal;             /* evita que se parta el texto */
    margin-left: 60px;
}

.action-button {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    background-color: #5FD1FF; /* azul turquesa elegante */
    border: none;
    border-radius: 6px;
    color: #000;
    font-size: 16px;
    cursor: pointer;
}

.btn-finalizar {
    /* Centrado en el eje X, tamaño parecido a Optimize Cargo
       (.action-button-narrow: padding 8px/12px, altura 40px) pero un poco
       más ancho/alto para que el tick grande respire. El color/borde/fondo
       los pone .btn-glass + .btn-glass-green (más abajo), no esta clase. */
    display: block;
    margin: 12px auto 0;
    padding: 8px 28px;
    font-size: 16px;
    font-weight: bold;
    height: 44px;
}

.btn-finalizar-tick {
    font-size: 24px;
    vertical-align: middle;
    margin-right: 4px;
}

/* === BOTONES DE CRISTAL (Optimize Cargo / SAVE) ===
   Mismo lenguaje visual que #bottom-summary (fondo translúcido + blur +
   borde suave) en vez del relleno sólido plano que tenían antes — un marco
   fino con brillo de color en vez de un bloque de color macizo. El color de
   fondo/borde/texto es lo único que distingue cada variante; el resto
   (blur, sombra, transición) es compartido. */
.btn-glass {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 0.2px;
    transition: transform 0.15s ease, box-shadow 0.15s ease,
                background 0.15s ease, border-color 0.15s ease;
}
.btn-glass:hover {
    transform: translateY(-1px);
}
.btn-glass:active {
    transform: translateY(0) scale(0.97);
}

.btn-glass-blue {
    background: linear-gradient(145deg, rgba(95,209,255,0.22), rgba(95,209,255,0.07));
    border: 1px solid rgba(95,209,255,0.45);
    color: #bdeeff;
    box-shadow: 0 4px 14px rgba(95,209,255,0.16), inset 0 1px 0 rgba(255,255,255,0.1);
}
.btn-glass-blue:hover {
    background: linear-gradient(145deg, rgba(95,209,255,0.3), rgba(95,209,255,0.1));
    box-shadow: 0 6px 18px rgba(95,209,255,0.26), inset 0 1px 0 rgba(255,255,255,0.14);
}

.btn-glass-green {
    background: linear-gradient(145deg, rgba(110,210,110,0.24), rgba(110,210,110,0.08));
    border: 1px solid rgba(130,220,130,0.5);
    color: #cdf5cd;
    box-shadow: 0 4px 14px rgba(110,210,110,0.18), inset 0 1px 0 rgba(255,255,255,0.1);
}
.btn-glass-green:hover {
    background: linear-gradient(145deg, rgba(110,210,110,0.32), rgba(110,210,110,0.12));
    box-shadow: 0 6px 18px rgba(110,210,110,0.28), inset 0 1px 0 rgba(255,255,255,0.14);
}

.btn-glass-amber {
    /* Botón MANUAL: ámbar a propósito, distinto del azul/verde de los
       otros dos — es el botón de emergencia (sistema normal caído), tiene
       que destacar como "modo distinto", no como una opción más. */
    background: linear-gradient(145deg, rgba(240,173,78,0.26), rgba(240,173,78,0.09));
    border: 1px solid rgba(240,173,78,0.55);
    color: #ffdca3;
    box-shadow: 0 4px 14px rgba(240,173,78,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
}
.btn-glass-amber:hover {
    background: linear-gradient(145deg, rgba(240,173,78,0.34), rgba(240,173,78,0.13));
    box-shadow: 0 6px 18px rgba(240,173,78,0.3), inset 0 1px 0 rgba(255,255,255,0.14);
}

.sugerencia-box {
    margin-top: 15px;
    font-size: 16px;
    color: #5FD1FF; /* azul elegante */
}
#cargo-total{
    width:6ch
}

.bodegas-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto auto;
    gap: 22px 28px; /* filas y columnas */
}

.bodega-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.bodega-box label {
    font-size: 13px;
    color: var(--accent);
    margin-bottom: 6px;
}
.bodegas-grid-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    row-gap: 22px;
    column-gap:14px;
}
/* === CABINAS SIN MARCO === */
.cabina-box {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

#session-output {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.75rem;
    line-height: 0.5;
}

.terminal-line {
    white-space: pre-wrap;
    margin-bottom: 1px;
}

.check-ok {
    color: #3ddc71;
    font-weight: 700;
}

.check-fail {
    color: #ff5c5c;
    font-weight: 700;
}

.terminal-table {
    white-space: pre;
    margin-top: 1px;
    font-size: 0.75rem;
}

.terminal-row {
    border-bottom: 1px solid rgba(255,255,255,0.15);
    padding: 0;
}

.terminal-row.header {
    font-weight: 600;
    opacity: 0.85;
    padding: 0;
}

.bodegas-line {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 18px; /* separación general */
}

/* Grupo delantero (FWD) más compacto */
.fwd-group {
    margin-right: 4px;
}

/* Grupo trasero (AFT) más compacto */
.aft-group {
    margin-left: 4px;
}

/* Separación entre grupos */
.bodegas-separator {
    width: 24px;   /* espacio entre FWD y AFT */
}

.fuel-grid-2 {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.limit-default {
    color: #888;        /* gris oscuro elegante */
}

.limit-modified {
    color: #5FD1FF;
    font-weight: 600;
}



#limit-otow,
#limit-olw {
    width: 6ch;          /* suficiente para 5 cifras */
    font-size: 18px;
    padding: 6px 10px;
}

.desglose-row {
    margin-bottom: 6px;
}

.desglose-box {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.desglose-label {
    font-size: 15px;
    color: var(--accent);
    margin-bottom: 6px;
    display: block;
}

.modo-indice-box {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

/* #modo-indice reutiliza el aspecto cristal-azul de Extra Crew (.extra-select,
   más arriba) en vez de .crew-select (fondo claro/blanco) — solo se ensancha
   porque sus opciones ("Real desglosado") son más largas que las de Extra Crew. */
#modo-indice {
    width: 150px;
}

.crew-select {
    background: var(--bg-panel);
    color: var(--text-main);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 14px;
}

.empty-box {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}



/* ============================================================
   AJUSTE DE ANCHO PARA BODEGAS Y CABINAS (más estrecho)
   ============================================================ */

@media (max-width: 600px) {

    /* Zonas (equipaje D/E/F y catering E/F): necesitan 3 cifras sin cortarse */
    .equip-input {
        width: 4ch !important;
        padding: 6px 8px !important;
        font-size: 15px !important;
    }

    /* Pax y cabinas: les basta con 2 cifras */
    .pax-input,
    #cab-a,
    #cab-b,
    #cab-c {
        width: 2.6ch !important;
        padding: 6px 8px !important;
        font-size: 15px !important;
    }

    .cargo-total-input {
        width: 4.5ch !important;      /* 🔥 gana al override */
        padding: 8px 12px !important;
        font-size: 18px !important;
    }


    #fuel-fob,
    #fuel-trip {
        width: 5.2ch !important;
        padding: 6px 10px !important;
        font-size: 16px !important;
    }

    /* Grids más compactos */
    .bodegas-grid-4,
    .bodegas-grid-6 {
        column-gap: 10px !important;
        row-gap: 14px !important;
    }

    /* Cabinas más estrechas */
    .cabina-row {
        gap: 8px !important;
    }

    /* Límites verdes más compactos */
    .cab-limit,
    .cargo-limit,
    .fuel-limit {
        font-size: 12px !important;
    }

    /* Contenedores con ancho máximo suave */
    .bodega-box,
    .cabina-box {
        max-width: 110px !important;   /* 🔥 la clave del estrechamiento */
    }

    /* Botones de mover pax entre cabinas */
    .move-btn-tri {
        padding: 8px 14px !important;
        font-size: 20px !important;
    }
    .bodega-input {
        width: 3.5ch !important;          /* 🔥 perfecto para 3 cifras */
    }
    #limit-otow,
    #limit-olw {
        width: 5ch !important;   /* suficiente para 5 cifras */
        font-size: 14px !important;
        padding: 6px 10px !important;
    }
    
}
.limit-badge {
    color: #3E8E41; /* verde, tal como estaba */
}

.limit-reducido {
    color: #C9A227 !important;/* ocre discreto */
}

.campo-deshabilitado {
    opacity: 0.35;
    cursor: not-allowed;
}

.limit-excedido {
    color: #d9534f !important; /* rojo, exceso de peso */
}

.input-excedido {
    border: 1px solid #d9534f !important;
}

.input-advertencia {
    border: 1px solid #d946ef !important; /* magenta: aviso, no error */
    color: #d946ef !important;
}

.aviso-fuel-margen {
    font-family: "SF Mono", "Consolas", "Roboto Mono", monospace;
    font-size: 12px;
    color: #e879f9;
    margin-top: 6px;
}

.actual-summary {
    font-family: "SF Mono", "Consolas", "Roboto Mono", monospace;
    font-size: 11px;
    color: #e6e6e6;
    margin-top: 6px;
    white-space: nowrap;   /* nunca partir la línea (antes el %MAC se
                               quedaba solo en la línea siguiente) */
    overflow-x: auto;      /* red de seguridad: scroll horizontal en vez
                               de romper, si aun así no cupiera */
    letter-spacing: -0.2px;
}

.actual-summary strong {
    font-weight: bold;
}

.actual-summary-optimizado,
.actual-summary-optimizado strong {
    color: #3ddc71; /* verde: %MAC cerca del target */
}

.actual-summary-no-optimizado,
.actual-summary-no-optimizado strong {
    color: #f0ad4e; /* ámbar: dentro de envolvente pero lejos del target */
}

.actual-summary-fuera-envolvente,
.actual-summary-fuera-envolvente strong {
    color: #d9534f; /* rojo: fuera de envolvente operacional, prioridad sobre ámbar/verde */
}

.actual-summary-confirmado,
.actual-summary-confirmado strong {
    /* Flash verde tras aceptar un reajuste de pasaje: constancia visual de
       que el cambio se aplicó, sin tener que hacer scroll hasta cabinas.
       El selector con "strong" gana en especificidad a .limit-excedido
       (rojo) para que no se quede la cifra en rojo si justo se acaba de
       corregir el exceso. Se retira solo (ver flashConfirmacionCambio en app.js). */
    color: #3ddc71 !important;
    transition: color 0.3s ease;
}

.alerta-excesos {
    background: rgba(217, 83, 79, 0.15);
    border: 1px solid #d9534f;
    color: #ff8f8a;
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
}

.advice-centrado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    /* Flotante sobre la pantalla actual: visible sin hacer scroll hasta
       la sección de cabinas, donde antes quedaba fuera de vista. */
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 1000;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

.advice-centrado.modo-ahorro {
    background: rgba(31, 26, 8, 0.96);
    border: 1px solid #FFB300;
    color: #FFB300;
}

.advice-centrado.modo-obligatorio {
    background: rgba(36, 12, 12, 0.96);
    border: 1px solid #d9534f;
    color: #ff8f8a;
}

.advice-centrado-botones {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.advice-centrado-boton {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
}

/* === DIÁLOGO HOJA DE CARGA === */
.dialogo-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
    box-sizing: border-box;
}

.dialogo-caja {
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 20px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.dialogo-caja h3 {
    margin: 0 0 14px;
    color: var(--text-main);
    font-size: 17px;
}

.dialogo-caja label {
    display: block;
    color: var(--text-muted);
    font-size: 13px;
    margin: 10px 0 4px;
}

.dialogo-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-main);
    color: var(--text-main);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 15px;
}

.dialogo-error {
    color: #ff8f8a;
    font-size: 13px;
    margin-top: 10px;
}

.dialogo-botones {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.dialogo-boton {
    background: transparent;
    border: 1px solid var(--border-soft);
    color: var(--text-main);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

.dialogo-boton-ok {
    border-color: #3ddc71;
    color: #3ddc71;
    font-weight: 700;
}

#btn-generar-hoja:disabled,
#btn-manual:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}