/* ==========================================================================
   TRIPCONTROL - ESTILOS RESPONSIVE Y MOBILE-FIRST GLOBALES
   Optimizado para celulares (360px - 576px) y tablets (768px - 1024px)
   Aplica a: Cotizadores, Dashboard, Login, Estadística Gerencial y Maestros
   ========================================================================== */

/* 1. Touch targets accesibles en móviles (mínimo 40-44px para dedos) */
@media (max-width: 767.98px) {
    /* Botones y controles más fáciles de pulsar */
    .btn, .form-control, .custom-select, .input-group-text {
        font-size: 14px;
    }
    
    .btn-group .btn {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    /* Píldoras y botones de acción rápida */
    .btn-sm, .btn-group-sm > .btn {
        padding: 6px 10px;
        font-size: 13px;
    }

    /* 2. Encabezados y Hero Banners compactos */
    .hero-banner, .hero-header, .page-hero, .hero-gerencial {
        padding: 16px 14px !important;
        border-radius: 12px !important;
        margin-bottom: 16px !important;
    }
    .hero-banner h3, .hero-header h3, .page-hero h2, .hero-gerencial h3 {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
    }
    .hero-banner small, .hero-header small, .page-hero p, .hero-gerencial p {
        font-size: 11.5px !important;
    }
    .hero-banner .btn, .hero-header .btn, .hero-gerencial .btn {
        width: 100%;
        margin-top: 6px;
    }

    /* 3. Tarjetas KPI superiores (Estadísticas 2x2 en celulares) */
    .kpi-card, .metric-card, .summary-mini-card {
        padding: 12px 10px !important;
        margin-bottom: 10px;
    }
    .kpi-card .h3, .metric-card .h3, .kpi-card h3 {
        font-size: 1.35rem !important;
    }
    .kpi-card .small, .metric-card .small {
        font-size: 10.5px !important;
    }

    /* 4. Wizard Timeline (Hoteles, Paquetes, Traslados) con Scroll Horizontal Táctil */
    .wizard-steps {
        padding: 12px 10px !important;
        border-radius: 12px !important;
        margin-bottom: 16px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: flex !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        scrollbar-width: none;
    }
    .wizard-steps::-webkit-scrollbar {
        display: none;
    }
    .wizard-step {
        flex: 0 0 auto !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }
    .wizard-step .step-number {
        width: 24px !important;
        height: 24px !important;
        font-size: 11px !important;
    }

    /* 5. Tarjetas y Cajas de Formularios */
    .card-tc, .tc-card, .card {
        border-radius: 12px !important;
        margin-bottom: 16px !important;
    }
    .card-tc-header, .tc-card-header, .card-header {
        padding: 12px 14px !important;
    }
    .card-tc-header h5, .tc-card-header h5 {
        font-size: 14.5px !important;
    }
    .card-tc-body, .tc-card-body, .card-body {
        padding: 14px !important;
    }

    /* 6. Barra Resumen Inferior Fija (Sticky Summary Bar) */
    .summary-bar {
        padding: 12px 14px !important;
        border-radius: 14px 14px 0 0 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .summary-stats {
        justify-content: space-between !important;
        gap: 12px !important;
        width: 100% !important;
    }
    .summary-stat .value {
        font-size: 16px !important;
    }
    .summary-stat .value.total-value {
        font-size: 20px !important;
    }
    .summary-bar button, .summary-bar .btn {
        width: 100% !important;
        padding: 10px 14px !important;
        font-size: 14px !important;
    }

    /* 7. Navegación de Pasos (Step Navigation Atrás/Siguiente) */
    .step-nav {
        flex-direction: column-reverse !important;
        gap: 10px !important;
        margin-top: 16px !important;
        padding-top: 14px !important;
    }
    .step-nav button, .step-nav .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* 8. Terminal GDS en Boletos Aéreos */
    .gds-terminal-box {
        padding: 10px !important;
    }
    .gds-textarea {
        font-size: 12px !important;
        min-height: 140px !important;
    }

    /* 9. Píldoras de Filtro (Status Pills) */
    .filter-pills, .filter-pills-container, .nav-pills-custom {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
        flex-wrap: nowrap !important;
        padding-bottom: 6px !important;
        scrollbar-width: none;
    }
    .filter-pills::-webkit-scrollbar, .filter-pills-container::-webkit-scrollbar, .nav-pills-custom::-webkit-scrollbar {
        display: none;
    }
    .filter-pill, .nav-pills-custom .nav-link {
        flex: 0 0 auto !important;
    }

    /* 10. Tablas Responsivas con scroll táctil suave */
    .table-responsive {
        -webkit-overflow-scrolling: touch !important;
        border-radius: 8px;
        margin-bottom: 12px;
    }
    .table td, .table th {
        white-space: nowrap;
        padding: 10px 8px !important;
        font-size: 12.5px !important;
    }

    /* 11. Modal full-width en pantallas pequeñas */
    .modal-dialog {
        margin: 8px !important;
        max-width: calc(100% - 16px) !important;
    }
    .modal-content {
        border-radius: 14px !important;
    }

    /* 12. Dashboard Operativo & Estadística Gerencial en Móviles */
    .content-header .row > div {
        text-align: left !important;
        margin-bottom: 10px;
    }
    .content-header h1 {
        font-size: 1.4rem !important;
    }
    .dashboard-filter-form, .gerencial-filter-form {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
    }
    .dashboard-filter-form > div, .gerencial-filter-form > div {
        width: 100% !important;
    }

    /* Gráficos ChartJS adaptables en celular */
    .chart-container, .position-relative canvas {
        min-height: 220px !important;
        max-height: 280px !important;
    }

    /* 13. Maestros (Hoteles, Habitaciones, Paquetes, Clientes, Usuarios) */
    .page-actions-bar {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .page-actions-bar .btn, .page-actions-bar input {
        width: 100% !important;
    }
    .hotel-grid, .package-grid {
        grid-template-columns: 1fr !important;
    }
}

/* 14. Pantalla de Login en Móviles */
@media (max-width: 980px) {
    .login-shell {
        grid-template-columns: 1fr !important;
        width: calc(100% - 24px) !important;
        gap: 18px !important;
        padding: 20px 0 !important;
    }
    .hero-panel {
        text-align: center !important;
        padding: 10px 10px 0 !important;
    }
    .hero-title {
        font-size: 2rem !important;
        margin: 10px 0 !important;
    }
    .hero-subtitle {
        font-size: 0.95rem !important;
        margin-bottom: 14px !important;
    }
    .info-badges {
        justify-content: center !important;
        margin-top: 14px !important;
        gap: 6px !important;
    }
    .chip {
        font-size: 0.75rem !important;
        padding: 6px 10px !important;
    }
    .login-box {
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    .card-outline {
        border-radius: 18px !important;
    }
}

/* Ajustes para Pantallas Muy Pequeñas (< 400px - iPhone SE, Galaxy A) */
@media (max-width: 399.98px) {
    .btn-group-toggle .btn {
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: 11.5px !important;
    }
    .hero-banner h3, .hero-header h3, .hero-gerencial h3 {
        font-size: 1.1rem !important;
    }
}