/* ================================================================
   VALMAR — responsive.css
   Reglas globales de responsive para móvil y tablet.
   Complementa style.css, header.css y footer.css.
   Breakpoints: 1024px (tablet grande) · 768px (móvil) · 480px (pequeño)
   ================================================================ */

/* ── UTILIDADES GLOBALES ────────────────────────────────────── */
.table-responsive-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Botones táctiles: mínimo 44x44px */
button, .btn, [role="button"] { touch-action: manipulation; }

/* ── SEPARACIÓN DEL HEADER FIJO EN MÓVIL ───────────────────── */
/*
   Header fijo móvil ≈ 90px (tablet) / 79px (480px).
   Para que el contenido respire igual que en desktop,
   el padding-top debe ser: altura header + espacio visual deseado.
   Desktop tiene ~8rem con header de ~65px = 3rem de aire.
   Móvil: 90px header + 3rem aire = ~8.6rem → usamos 9.5rem.
*/
@media (max-width: 768px) {
    /* Hero principal (index) */
    .hero {
        padding-top: 10rem !important;
        padding-bottom: 4rem !important;
        min-height: auto !important;
    }

    /* Heros de páginas secundarias */
    .horarios-hero,
    .reservas-hero,
    .perfil-hero,
    .contacto-hero  { padding-top: 9rem !important; padding-bottom: 3rem !important; }

    /* Heros de paneles admin/empleado */
    .panel-hero     { padding-top: 11rem !important; padding-bottom: 2.5rem !important; }

    /* Auth (login, registro) */
    .auth-page      { padding-top: 9.5rem !important; }

    /* Billete */
    body.billete-page { padding-top: 7rem !important; }
}

@media (max-width: 480px) {
    .hero {
        padding-top: 9rem !important;
        padding-bottom: 3rem !important;
    }
    .horarios-hero,
    .reservas-hero,
    .perfil-hero,
    .contacto-hero  { padding-top: 8rem !important; padding-bottom: 2.5rem !important; }
    .panel-hero     { padding-top: 10rem !important; padding-bottom: 2rem !important; }
    .auth-page      { padding-top: 8.5rem !important; }
    body.billete-page { padding-top: 6rem !important; }
}

/* ── NEWSLETTER FAB ─────────────────────────────────────────── */
@media (max-width: 480px) {
    .nl-fab {
        bottom: 1rem !important;
        right: 1rem !important;
        padding: .6rem 1rem !important;
        font-size: .82rem !important;
    }
    .nl-panel {
        width: calc(100vw - 2rem) !important;
        right: 1rem !important;
        bottom: 4.5rem !important;
    }
    .nl-fab-badge {
        right: 1rem !important;
        bottom: 4.2rem !important;
        font-size: .68rem !important;
    }
}

/* ── PANEL HERO (paneles admin/empleado) ────────────────────── */
@media (max-width: 768px) {
    .panel-hero { padding: 11rem 0 2rem !important; }
    .panel-hero h1 { font-size: 1.6rem !important; }
    .panel-hero p { font-size: .85rem !important; }
    .panel-hero-badge { font-size: .72rem !important; padding: .25rem .75rem !important; }
}
@media (max-width: 480px) {
    .panel-hero { padding: 10rem 0 1.5rem !important; }
    .panel-hero h1 { font-size: 1.4rem !important; }
}

/* ── PANEL NAV (barra de navegación de paneles) ─────────────── */
@media (max-width: 768px) {
    /* La barra de navegación de paneles se hace scrollable */
    div[style*="display:flex"][style*="gap:.4rem"] {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: .3rem;
        scrollbar-width: none;
    }
    div[style*="display:flex"][style*="gap:.4rem"]::-webkit-scrollbar { display: none; }
}

/* ── PANEL ADMIN / DATOS — tablas ───────────────────────────── */
@media (max-width: 768px) {
    /* Wrapper scrollable para todas las tablas de admin */
    .tabla-admin,
    .db-table { font-size: .8rem; }

    .section-card { border-radius: 12px; }

    /* Filter bar: column layout */
    .filter-bar { flex-direction: column; align-items: stretch; gap: .5rem; }
    .filter-bar .fb-group { width: 100%; }
    .filter-bar input,
    .filter-bar .form-control,
    .filter-bar .form-select { width: 100%; }
    .fb-count { margin-left: 0; }
    .btn-filter { width: 100%; justify-content: center; }

    /* Tabs de navegación scrollables */
    .nav.nav-pills { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .3rem; scrollbar-width: none; }
    .nav.nav-pills::-webkit-scrollbar { display: none; }
    .nav.nav-pills .nav-link { white-space: nowrap; font-size: .8rem; padding: .4rem .85rem; }

    /* Edit form grid: 1 columna */
    .edit-grid { grid-template-columns: 1fr !important; }

    /* Stat chips */
    .stat-chip { padding: .9rem 1rem; }
    .stat-chip-val { font-size: 1.4rem; }

    /* Acciones en tablas */
    .btn-accion { font-size: .72rem; padding: .22rem .55rem; }
}

@media (max-width: 480px) {
    .tabla-admin th,
    .tabla-admin td,
    .db-table th,
    .db-table td { padding: .5rem .6rem; font-size: .76rem; }

    .panel-card { padding: 1.1rem; }
    .panel-card-title { font-size: .9rem; }
}

/* ── STAT CARDS (panel admin) ───────────────────────────────── */
@media (max-width: 480px) {
    .stat-card { padding: 1.1rem .9rem; }
    .stat-num  { font-size: 1.5rem; }
    .stat-label { font-size: .75rem; }
    .stat-icon { width: 38px; height: 38px; }
}

/* ── CONFIRMACION — Timer widget ────────────────────────────── */
@media (max-width: 480px) {
    #reserva-timer {
        bottom: 1rem !important;
        right: 1rem !important;
        min-width: 150px !important;
        padding: .85rem 1rem .8rem !important;
        border-radius: 14px !important;
    }
    .timer-cuenta { font-size: 1.6rem !important; }
    .timer-label  { font-size: .62rem !important; }
    .timer-sub    { font-size: .62rem !important; }
}

/* ── CONFIRMACION — Extras ──────────────────────────────────── */
@media (max-width: 480px) {
    .extra-header {
        grid-template-columns: 1.8rem 1fr auto 24px !important;
        gap: .5rem !important;
    }
    .extra-titulo { font-size: .88rem !important; }
    .extra-precio { font-size: .88rem !important; }
}

/* ── CONFIRMACION — Cupón ───────────────────────────────────── */
@media (max-width: 480px) {
    .cupon-row {
        flex-direction: column !important;
        gap: .5rem !important;
    }
    .btn-aplicar-cupon,
    .btn-quitar-cupon { width: 100% !important; }
}

/* ── CONFIRMACION — Premium banner ─────────────────────────── */
@media (max-width: 480px) {
    .premium-banner { flex-direction: column; gap: .5rem; text-align: center; }
    .premium-upsell { flex-direction: column; gap: .5rem; }
    .premium-upsell a { justify-content: center; }
}

/* ── MIS RESERVAS — resultado card ─────────────────────────── */
@media (max-width: 480px) {
    .resultado-header { padding: 1rem 1.2rem; }
    .localizador-grande { font-size: 1.4rem; letter-spacing: .08em; }
    .resultado-body { padding: 1rem 1.2rem; }
    .resumen-total { padding: .85rem 1.2rem; flex-direction: column; gap: .3rem; align-items: flex-start; }
    .resumen-total strong { font-size: 1.1rem; }
    .pasajero-fila { gap: .5rem; }
    .vuelo-bloque-header { flex-wrap: wrap; gap: .4rem; }
}

/* ── LOGIN / REGISTRO ───────────────────────────────────────── */
@media (max-width: 480px) {
    .auth-page { padding: 7rem .85rem 2rem; }
    .auth-top { padding: 2rem 1.5rem 1.5rem; }
    .auth-top h2 { font-size: 1.25rem; }
    .auth-body { padding: 1.5rem; }
}

/* ── HORARIOS — vuelo row ───────────────────────────────────── */
@media (max-width: 768px) {
    .vuelo-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: .6rem !important;
        padding: 1rem !important;
    }
    .vuelo-codigo { min-width: auto !important; }
    .vuelo-horario { min-width: auto !important; text-align: left !important; display: flex; gap: 1rem; align-items: center; }
    .vuelo-duracion { min-width: auto !important; text-align: left !important; }
    .vuelo-avion { min-width: auto !important; }
    .horarios-hero h1 { font-size: 1.8rem !important; }
    .horarios-hero p { font-size: .9rem !important; }
    .filtro-bar { padding: 1.2rem !important; }
}
@media (max-width: 480px) {
    .horarios-hero { padding: 7rem 0 2rem !important; }
    .horarios-hero h1 { font-size: 1.5rem !important; }
    .filtro-bar { padding: 1rem !important; border-radius: 14px !important; }
}

/* ── BILLETE / BOARDING PASS ────────────────────────────────── */
@media (max-width: 720px) {
    .boarding-pass { border-radius: 14px; }
    .bp-top { padding: 1.2rem 1.2rem; }
    .bp-airline-name { font-size: 1rem; }
    .bp-body { padding: 1.2rem 1.2rem; gap: .6rem; }
    .bp-iata { font-size: 2.2rem; }
    .bp-arrow-line { width: 50px; }
    .bp-divider { margin: 0 1.2rem; }
    .bp-divider::before { left: -25px; }
    .bp-divider::after  { right: -25px; }
    .bp-details { padding: 1rem 1.2rem 1.2rem; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: .7rem; }
    .bp-seat-strip { padding: 1rem 1.2rem; }
    .bp-seat-num { font-size: 2.5rem; }
    .bp-passenger-name { font-size: .95rem; }
    .bp-baggage { padding: .7rem 1.2rem; gap: 1rem; }
    .bp-bottom { padding: .9rem 1.2rem; flex-direction: column; align-items: flex-start; gap: .7rem; }
    .bp-footer-info { text-align: left; }
    .bp-extras { padding: .6rem 1.2rem; }
}
@media (max-width: 480px) {
    body.billete-page { padding: 1rem .5rem; }
    .page-header { flex-direction: column; align-items: flex-start; gap: .5rem; }
    .bp-body { grid-template-columns: 1fr auto 1fr; }
    .bp-iata { font-size: 1.8rem; }
    .bp-city { font-size: .68rem; }
    .bp-arrow-line { width: 30px; }
    .bp-flight-code { font-size: .7rem; }
    .bp-detail-value { font-size: .85rem; }
    .bp-detail-label { font-size: .6rem; }
    .bp-seat-num { font-size: 2rem; }
    .bp-qr { width: 55px; height: 55px; }
    .bp-qr img { width: 47px; height: 47px; }
    .bp-loc-code { font-size: 1.2rem; }
    .bp-bag-item { font-size: .7rem; }
}

/* ── MI PERFIL ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Puntos y suscripción */
    .perfil-card,
    .panel-card { border-radius: 14px; padding: 1.2rem; }

    /* Historial tabla scrollable */
    .puntos-tabla { overflow-x: auto; }
}
@media (max-width: 480px) {
    .perfil-hero h1,
    .reservas-hero h1 { font-size: 1.6rem !important; }
    .perfil-hero p,
    .reservas-hero p { font-size: .88rem !important; }
}

/* ── CONTACTO ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .contacto-wrapper { flex-direction: column; }
    .info-col  { flex: none !important; width: 100%; }
    .form-col  { flex: none !important; width: 100%; }
    .btn-enviar { float: none !important; width: 100% !important; margin-top: .5rem; }
}
@media (max-width: 480px) {
    .info-col  { padding: 2rem 1.2rem !important; }
    .form-col  { padding: 1.5rem 1.2rem !important; }
}

/* ── CAMBIO ASIENTO — panel split ───────────────────────────── */
@media (max-width: 768px) {
    /* Columnas del panel de cambio asiento apiladas */
    .col-lg-4, .col-lg-8 { padding-left: .75rem; padding-right: .75rem; }
}

/* ── CUPONES EMPLEADO ───────────────────────────────────────── */
@media (max-width: 768px) {
    .panel-card .row.g-3 { gap: .5rem !important; }
}
@media (max-width: 480px) {
    /* Formulario de crear cupón: columnas en 1 */
    .panel-card .row.g-3 > [class*="col-"] { width: 100% !important; }
}

/* ── PANEL EMPLEADO — vuelos del día ────────────────────────── */
@media (max-width: 768px) {
    /* Tarjetas de vuelo en panel empleado */
    .vuelo-card-emp { flex-direction: column; }
}

/* ── TICKETS ────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .ticket-card { padding: 1rem !important; }
    .ticket-header { flex-direction: column; gap: .4rem; align-items: flex-start !important; }
}

/* ── METRICAS ADMIN ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .met-card { padding: 1.1rem; }
    .kpi-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .sesion-badge { padding: .75rem 1rem; }
    .sesion-num { font-size: 1.6rem; }
}
@media (max-width: 480px) {
    .kpi-grid { grid-template-columns: 1fr 1fr !important; }
    .kpi-chip-val { font-size: 1.2rem; }
}

/* ── NEWSLETTER EMPLEADO ────────────────────────────────────── */
@media (max-width: 768px) {
    .plantilla-card { border-radius: 14px; }
    .config-card { border-radius: 14px; }
    .stat-chip { flex-direction: column; text-align: center; gap: .4rem; padding: 1rem; }
    .stat-chip-icon { margin: 0 auto; }
}

/* ── PAGOS / STRIPE ─────────────────────────────────────────── */
@media (max-width: 480px) {
    #payment-element { font-size: .9rem; }
}

/* ── DESTINOS PAGE ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .destino-hero h1 { font-size: 1.8rem; }
    .destino-hero p  { font-size: .9rem; }
}

/* ── FLOTA PAGE ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .avion-card { padding: 1.2rem; }
    .avion-nombre { font-size: 1.1rem; }
}

/* ── FAQ PAGE ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .faq-item { padding: 1rem; }
}

/* ── PREVIENE OVERFLOW HORIZONTAL GLOBAL ────────────────────── */
@media (max-width: 768px) {
    .container { padding-left: 1rem; padding-right: 1rem; }
}
@media (max-width: 480px) {
    .container { padding-left: .85rem; padding-right: .85rem; }
}