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

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

/* Tarjetas de tripulación (igual estilo que matrícula) */
.crew-card {
    padding: 14px 10px;
    background: rgba(58,130,247,0.12);
    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;
    font-size: 18px;
    box-shadow: 0 0 10px rgba(0,0,0,0.25);
}

.crew-card:hover {
    background: rgba(58,130,247,0.25);
    box-shadow: 0 0 14px rgba(58,130,247,0.35);
}

.crew-card.selected {
    background: rgba(0, 180, 90, 0.25);
    border-color: rgba(0, 180, 90, 0.45);
    color: #b6ffcf;
}

/* === 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);
    backdrop-filter: blur(10px);
}

.fuel-grid {
    display: grid;
    grid-template-columns: repeat(2, 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);
}

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

/* 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 === */
.stretcher-inline {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.stretcher-title {
    font-size: 16px;
    color: var(--accent);
}

#stretcher {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    cursor: pointer;
}

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

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

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

/* Combustible → 4 cifras */
#fuel-fob,
#fuel-trip {
    width: 4ch;
}