/* =========================================================================
   responsive.css — Capa de Adaptación Móvil y Tablets (Clinent)
   ========================================================================= */

/* --- BOTÓN MENÚ HAMBURGUESA --- */
.nav-menu-toggle {
    display: none !important;
}
.nav-landing-toggle {
    display: none !important;
}

@media (max-width: 768px) {
    .nav-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        padding: 8px 16px !important;
        margin: 10px 15px !important;
        border-radius: 10px !important;
        color: #475569 !important;
        cursor: pointer !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
        gap: 8px !important;
        width: calc(100% - 30px) !important;
        box-sizing: border-box !important;
        transition: all 0.2s ease !important;
    }
    .nav-menu-toggle:hover {
        background: #f8fafc !important;
        border-color: #94a3b8 !important;
    }
    
    /* Ocultar el menú de navegación por defecto en móvil */
    .nav-menu {
        display: none !important;
        flex-direction: column !important;
        background: #ffffff !important;
        padding: 10px 15px !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        border-bottom: 2px solid #e2e8f0 !important;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
        z-index: 2000 !important;
        gap: 8px !important;
        white-space: normal !important;
    }
    
    /* Mostrar menú al tener la clase activa */
    .nav-menu.nav-menu-open {
        display: flex !important;
    }
    
    .nav-menu > a, .dropbtn {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px 16px !important;
        font-size: 15px !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    
    .nav-dropdown {
        width: 100% !important;
    }
    
    .dropdown-content {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        width: 100% !important;
        min-width: 100% !important;
        display: none !important; /* Por defecto ocultos en móvil */
        background: #f8fafc !important;
        border-radius: 8px !important;
        margin-top: 5px !important;
    }
    
    /* Mostrar submenús al expandirse */
    .nav-dropdown.expanded .dropdown-content {
        display: flex !important;
    }
    
    .dropdown-content a {
        padding: 10px 20px !important;
        font-size: 14px !important;
    }
    
    /* Alinear las acciones rápidas absolutas en el menú vertical */
    .qa-dropdown-v2,
    .nav-menu > div[style*="position: absolute"],
    .nav-menu > div[style*="position:absolute"] {
        position: relative !important;
        transform: none !important;
        right: auto !important;
        top: auto !important;
        margin: 10px 0 !important;
        width: 100% !important;
        display: flex !important;
    }
    
    .btn-qa-v2 {
        width: 100% !important;
        justify-content: center !important;
        padding: 12px !important;
        font-size: 15px !important;
    }
    
    .qa-content-v2 {
        width: 100% !important;
        position: relative !important;
        top: 5px !important;
        right: auto !important;
        box-shadow: none !important;
        border: 1px solid #cbd5e1 !important;
    }
    
    #dropdown-notificaciones {
        width: calc(100vw - 30px) !important;
        position: fixed !important;
        top: 70px !important;
        left: 15px !important;
        right: 15px !important;
        max-width: 100% !important;
    }
}

/* --- ADAPTACIONES DE TABLAS (SCROLL HORIZONTAL) --- */
@media (max-width: 900px) {
    .table-card, 
    .table-responsive,
    div[style*="overflow-x"],
    div[style*="overflow-x: auto"] {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 15px !important;
    }
    
    .table-card table, 
    .table-responsive table,
    div[style*="overflow-x"] table,
    div[style*="overflow-x: auto"] table {
        min-width: 600px !important;
    }
}

/* --- EVITAR ZOOM AUTOMÁTICO EN SAFARI (iOS) --- */
@media (max-width: 768px) {
    input[type="text"],
    input[type="number"],
    input[type="date"],
    input[type="email"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important; /* Forzar 16px mínimo para evitar zoom en inputs de iOS */
        padding: 10px 12px !important;
        box-sizing: border-box !important;
    }
}

/* --- OPTIMIZACIÓN DE FORMULARIOS A UNA COLUMNA --- */
@media (max-width: 768px) {
    /* Desactivar layouts multi-columna en móviles */
    .form-grid-5,
    .form-grid-4,
    .form-grid-3,
    .form-grid-2,
    .form-grid,
    .drawer-grid,
    div[style*="display: grid; grid-template-columns"],
    div[style*="display:grid; grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    /* Campos que abarcan varias columnas se fuerzan a 1 columna */
    div[style*="grid-column: span"],
    div[style*="grid-column:span"] {
        grid-column: span 1 !important;
    }
    
    .form-old-group, .form-group {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* --- OPTIMIZACIÓN DE CARDS Y CONTENEDORES --- */
@media (max-width: 768px) {
    .container, .main-container {
        padding: 10px 12px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .card, .panel-blanco {
        padding: 15px !important;
        border-radius: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 15px !important;
    }
    
    /* Layouts del Perfil de Paciente */
    .layout-paciente {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .sidebar-paciente {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* --- MODALES OPTIMIZADOS --- */
@media (max-width: 768px) {
    .modal, .modal-caja {
        align-items: flex-end !important; /* Se abre desde abajo tipo bottom sheet en celulares */
    }
    
    .modal-content, .modal-dialog {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
}

/* --- MODO OSCURO PARA MENÚ HAMBURGUESA --- */
body.dark-mode .nav-menu-toggle {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}
body.dark-mode .nav-menu-toggle:hover {
    background: #334155 !important;
}
body.dark-mode .nav-menu {
    background: #1e293b !important;
    border-color: #334155 !important;
}
body.dark-mode .dropdown-content {
    background: #0f172a !important;
}
body.dark-mode .nav-dropdown.expanded .dropdown-content {
    border-left-color: #334155 !important;
}

/* =========================================================================
   LANDING PAGE (INDEX.PHP) RESPONSIVE OVERRIDES
   ========================================================================= */

@media (max-width: 900px) {
    /* Ocultar insignias flotantes que se salen de la pantalla y el vector de fondo de persona */
    .floating-badge, .floating-person-anchor-2 {
        display: none !important;
    }
    
    /* Evitar desbordamiento horizontal general */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
    }
    
    /* Adaptar Showcase de dispositivos para tablets y móviles */
    .devices-showcase {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
        height: auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 20px auto 60px !important;
    }

    .devices-group {
        position: relative !important;
        width: 100% !important;
        max-width: 700px !important;
        aspect-ratio: 16 / 10.5 !important;
        height: auto !important;
        margin: 0 auto !important;
        transform: none !important;
        display: block !important;
    }

    .laptop-mockup {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        right: auto !important;
        bottom: auto !important;
        margin: 0 !important;
        transform: none !important;
        z-index: 1 !important;
    }

    .tablet-mockup,
    .hero-person-img,
    .floating-badge {
        display: none !important;
    }

    .phone-mockup {
        position: absolute !important;
        width: 24% !important;
        max-width: 170px !important;
        aspect-ratio: 9 / 19 !important;
        right: -2% !important;
        bottom: -6% !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        opacity: 1 !important;
        z-index: 10 !important;
        margin: 0 !important;
        box-shadow: 0 25px 50px -10px rgba(0, 0, 0, 0.6) !important;
    }

    /* Evitar desplazamiento del fondo en sección de registro y permitir que las columnas colapsen */
    .registration-section {
        padding: 60px 10px !important;
        overflow: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .registration-section::before {
        left: -15px !important;
        right: -15px !important;
    }
    .checkout-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }
    .plans-side, .form-side {
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 900px) {
    /* Desactivar barra sticky fija en móviles y iPad vertical para evitar que ocupe media pantalla */
    .navbar.sticky-nav {
        position: relative !important;
        padding: 15px !important;
        background: #ffffff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }
    
    /* Navbar de index.php */
    .navbar {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 15px 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
    }
    
    .nav-landing-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        color: #0ea5e9 !important;
        padding: 8px !important;
        border-radius: 10px !important;
        cursor: pointer !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
        transition: all 0.2s ease !important;
        outline: none !important;
    }
    
    .nav-landing-toggle:hover {
        background: #f8fafc !important;
    }
    
    .logo-container {
        margin-bottom: 0 !important;
    }
    
    .logo-container img {
        max-width: 150px !important;
    }
    
    .nav-right {
        display: none !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        gap: 12px !important;
        margin: 0 !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        background: #ffffff !important;
        padding: 20px !important;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
        border-bottom: 2px solid #e2e8f0 !important;
        z-index: 1000 !important;
        box-sizing: border-box !important;
    }
    
    .nav-right.nav-landing-open {
        display: flex !important;
    }
    
    .nav-right a, .nav-right div {
        width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
    
    .login-pill {
        flex-direction: column !important;
        gap: 5px !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
    }
    
    /* Hero section */
    .hero {
        padding: 60px 15px 30px !important;
    }
    
    .hero h1 {
        font-size: 32px !important;
        line-height: 1.2 !important;
        letter-spacing: -1px !important;
    }
    
    .hero p {
        font-size: 16px !important;
        margin-bottom: 30px !important;
    }
    
    .hero-buttons {
        flex-direction: column !important;
        width: 100% !important;
        gap: 12px !important;
    }
    
    .btn-hero-primary {
        width: 100% !important;
        justify-content: center !important;
        padding: 15px 25px !important;
        font-size: 16px !important;
    }
    
    /* Checkout container and grids */
    .checkout-container {
        width: 100% !important;
        border-radius: 16px !important;
    }
    
    .plans-wrapper {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .plan-option {
        width: 100% !important;
    }

    .features-comparison {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-top: 20px !important;
    }

    .comparison-table {
        min-width: 550px !important;
    }

    .terms-group label {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        display: inline !important;
    }

    /* --- OPTIMIZACIÓN DEL DASHBOARD DE DOCTORES (SAAS) --- */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }

    .dashboard-layout {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 15px !important;
    }

    .dashboard-layout > div {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .panel-blanco, .table-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        border-radius: 12px !important;
    }

    .nav-menu-wrapper {
        position: relative !important;
        width: 100% !important;
    }
    
    .contenedor-pacientes-recientes {
        grid-template-columns: 1fr !important;
        padding: 10px !important;
        gap: 10px !important;
    }
    
    .card-paciente-reciente {
        width: 100% !important;
        min-width: 0 !important;
        flex-direction: row !important;
        align-items: center !important;
        text-align: left !important;
        padding: 12px 15px !important;
        gap: 15px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
    }
    
    .avatar-reciente {
        width: 45px !important;
        height: 45px !important;
        font-size: 14px !important;
    }

    /* Topbar y acciones de usuario en móviles y tablets verticales */
    .topbar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        height: auto !important;
        min-height: 56px !important;
        padding: 8px 14px !important;
        gap: 8px !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
        z-index: 1001 !important;
    }
    
    .logo-flotante-wrapper {
        width: auto !important;
        height: 38px !important;
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        position: relative !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
    }
    
    .logo-flotante-img {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        max-height: 34px !important;
        width: auto !important;
        margin: 0 !important;
    }
    
    .user-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        margin: 0 !important;
        width: auto !important;
        min-width: unset !important;
        flex-shrink: 0 !important;
    }
    
    .user-actions > span {
        display: none !important;
    }

    .btn-profile,
    .btn-logout {
        padding: 6px 10px !important;
        font-size: 11px !important;
        border-radius: 6px !important;
        white-space: nowrap !important;
    }

    .search-container {
        order: 3 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 4px 0 0 0 !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: center !important;
        position: relative !important;
    }

    input.search-bar-top[type="text"] {
        width: 100% !important;
        max-width: 100% !important;
        height: 38px !important;
        font-size: 13px !important;
        padding: 8px 16px 8px 36px !important;
        border-radius: 20px !important;
        box-sizing: border-box !important;
    }

    #search-results {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 99999 !important;
    }

    /* Menú de navegación en tablet vertical (pantallas > 768px): deslizamiento horizontal puro */
    @media (min-width: 769px) {
        .nav-menu {
            display: flex !important;
            flex-wrap: nowrap !important;
            white-space: nowrap !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
            touch-action: pan-x !important;
            overscroll-behavior-y: none !important;
            overscroll-behavior-x: contain !important;
            -webkit-overflow-scrolling: touch !important;
            scrollbar-width: none !important;
            height: 48px !important;
            max-height: 48px !important;
            box-sizing: border-box !important;
            padding: 0 15px !important;
            gap: 5px !important;
            align-items: center !important;
            background: white !important;
            border-bottom: 1px solid #e2e8f0 !important;
            position: relative !important;
            z-index: 1000 !important;
        }
        .nav-menu::-webkit-scrollbar {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
        }
        .nav-dropdown {
            position: relative !important;
            flex-shrink: 0 !important;
        }
        .nav-menu > a,
        .dropbtn {
            font-size: 13px !important;
            padding: 6px 10px !important;
            gap: 4px !important;
            flex-shrink: 0 !important;
            border-radius: 6px !important;
        }
        .dropdown-content {
            background: #ffffff !important;
            min-width: 260px !important;
            border-radius: 12px !important;
            box-shadow: 0 15px 35px rgba(0,0,0,0.18) !important;
            border: 1px solid #e2e8f0 !important;
            z-index: 999999 !important;
            padding: 8px 0 !important;
            display: none;
            flex-direction: column !important;
        }
        .nav-dropdown:hover .dropdown-content,
        .nav-dropdown.expanded .dropdown-content,
        .nav-dropdown.is-active .dropdown-content {
            display: flex !important;
        }
        .dropdown-content a {
            padding: 10px 16px !important;
            font-size: 13px !important;
            color: #334155 !important;
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
            text-decoration: none !important;
        }
        .dropdown-content a:hover {
            background: #f8fafc !important;
            color: #0ea5e9 !important;
        }
    }

    #financeChart {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
    }

    /* Ajustes para la tarjeta Resumen General (.header-dash) */
    .header-dash {
        margin-top: 15px !important;
        padding: 16px !important;
        box-sizing: border-box !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    .header-dash > div:last-child {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 10px !important;
        margin-top: 10px !important;
    }
    
    .progress-wrapper {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Selector de Sucursales en topbar */
    .sucursal-switcher-php {
        position: relative !important;
        width: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }
    
    .sucursal-switcher-php > a {
        display: inline-flex !important;
        width: auto !important;
    }

    .sw-dropdown-inner {
        position: absolute !important;
        right: 0 !important;
        left: auto !important;
        top: calc(100% + 6px) !important;
        width: 270px !important;
        min-width: 240px !important;
        max-width: 90vw !important;
        transform: none !important;
        box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
        box-sizing: border-box !important;
    }
}

/* --- ESTILOS ADICIONALES PARA EL SWITCHER DE SUCURSALES --- */
.sw-dropdown-inner {
    display: none !important;
}
.sw-dropdown-inner.is-active {
    display: flex !important;
}
@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
    .sucursal-switcher-php:hover .sw-dropdown-inner {
        display: flex !important;
    }
}

/* --- REGLAS DE RESPONSIVIDAD PARA LA AGENDA --- */
@media (max-width: 768px) {
    .layout-agenda {
        flex-direction: column !important;
        gap: 20px !important;
        padding: 0 15px !important;
        margin: 15px 0 !important;
    }
    .panel-filtros {
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 0 !important;
    }
    .panel-principal {
        width: 100% !important;
        min-width: 0 !important;
    }
    .header-agenda {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 15px !important;
        gap: 15px !important;
    }
    .control-fecha {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
    }
    .grupo-vistas {
        display: flex !important;
        justify-content: space-between !important;
        width: 100% !important;
        gap: 5px !important;
    }
    .btn-vista {
        flex: 1 !important;
        justify-content: center !important;
        font-size: 12px !important;
        padding: 8px 4px !important;
    }
    .agenda-clinent-wrapper {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .vista-semanal {
        overflow-x: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .vista-mensual {
        overflow-x: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .calendario-mensual {
        min-width: 600px !important;
    }

    /* Ajustes para el Modal de Cita en Móvil */
    .modal-overlay {
        width: 100vw !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        box-sizing: border-box !important;
        align-items: flex-start !important;
        overflow-y: auto !important;
        padding: 20px 10px !important;
    }
    .modal-caja {
        width: 100% !important;
        max-width: 95% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        padding: 20px !important;
    }
    .form-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    #form-cita div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    #form-cita div[style*="display: flex; justify-content: space-between"] {
        flex-direction: column-reverse !important;
        gap: 15px !important;
        align-items: stretch !important;
    }
    #form-cita div[style*="display: flex; gap: 10px"] {
        width: 100% !important;
        margin-left: 0 !important;
    }
    #form-cita div[style*="display: flex; gap: 10px"] button {
        flex: 1 !important;
    }
    #btn-borrar-cita {
        text-align: center !important;
        width: 100% !important;
    }

    /* ── REGLAS DE RESPONSIVIDAD PARA ADMINISTRACIÓN Y FINANZAS ── */
    .header-banner {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 15px !important;
        padding: 15px !important;
        text-align: center !important;
    }
    .header-banner-info {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .header-banner div[style*="display: flex; gap: 10px"] {
        justify-content: center !important;
        width: 100% !important;
    }
    .header-banner button {
        width: 100% !important;
        justify-content: center !important;
    }
    .kpi-row-1, .kpi-row-2, .kpi-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    .card-group, .card-group.four-cols {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    .admin-layout {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .lista-modulos {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        padding: 10px 0 !important;
    }
    .tabs-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding: 8px 5px !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .tab-btn {
        flex: 0 0 auto !important;
        padding: 10px 16px !important;
    }
    .panel-blanco {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }
    .table-responsive-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 15px !important;
    }
    .table-responsive-wrapper table,
    .table-responsive-wrapper .tabla-premium,
    .table-responsive-wrapper .god-table,
    .table-responsive-wrapper .tabla-hacker {
        min-width: 650px !important;
        width: 100% !important;
        display: table !important;
    }
    .panel-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 15px !important;
    }
    .panel-header > h3 {
        text-align: center !important;
        width: 100% !important;
    }
    .panel-header > div {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 8px !important;
        overflow-x: visible !important;
        flex-wrap: wrap !important;
    }
    .panel-header > div > .search-table-bar {
        max-width: 100% !important;
        width: 100% !important;
    }
    .panel-header > div > a,
    .panel-header > div > button {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Forzar todas las cuadrículas inline y contenedores de formularios a 1 columna en móvil */
    div[style*="grid-template-columns"],
    form[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .config-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    .modal-caja table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .modal-caja.ancho, .modal-caja.ayuda, .modal-caja.oscuro {
        width: 95% !important;
        max-width: 95% !important;
    }
    .modal-caja.gigante {
        width: 98vw !important;
        max-width: 98vw !important;
        height: 95vh !important;
        flex-direction: column !important;
    }
    .modal-god-layout {
        flex-direction: column !important;
        height: 100% !important;
        overflow-y: auto !important;
    }
    .god-sidebar {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid #334155 !important;
    }
    .god-main {
        width: 100% !important;
        padding: 15px !important;
        overflow-x: auto !important;
    }
}

/* ==========================================================================
   RESPONSIVE GLOBAL — iPAD (769px – 1024px)
   Este rango era el "punto ciego": mayor que móvil pero sin reglas propias.
   Cubre iPad Mini, iPad Air, iPad Pro 11" en portrait y landscape.
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Evitar desbordamiento horizontal */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    /* Contenedores principales */
    .container,
    .main-container {
        padding: 0 clamp(12px, 2vw, 24px) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Grids de formularios → 2 columnas en tablet */
    .form-grid-5,
    .form-grid-4,
    .form-grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    /* Grid 2 columnas se mantiene */
    .form-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    /* KPI → 2 columnas en tablet */
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    /* Dashboard → 1 columna */
    .dashboard-layout {
        grid-template-columns: 1fr !important;
    }

    /* Tablas: scroll horizontal con wrapper visible */
    .table-card {
        overflow: visible !important;
    }
    .table-card table,
    #lp-table-wrap table {
        min-width: 700px !important;
    }
    #lp-table-wrap,
    #lp-table-wrap > div,
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
    }

    /* Topbar tablet: fila fluida y elegante */
    .topbar {
        display: flex !important;
        flex-wrap: nowrap !important;
        height: 60px !important;
        padding: 0 18px !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }
    .search-container {
        order: unset !important;
        flex: 1 1 240px !important;
        max-width: 380px !important;
        min-width: 160px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    input.search-bar-top[type="text"] {
        width: 100% !important;
        max-width: 100% !important;
        height: 36px !important;
        font-size: 13px !important;
        padding-left: 36px !important;
        border-radius: 20px !important;
    }
    .logo-flotante-wrapper {
        width: 160px !important;
        height: 100% !important;
        position: relative !important;
        flex-shrink: 0 !important;
    }
    .logo-flotante-img {
        left: 0 !important;
        max-height: 42px !important;
    }
    .user-actions {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
        min-width: unset !important;
    }
    .user-actions > span { display: none !important; }
    .btn-profile,
    .btn-logout {
        padding: 7px 10px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
    }

    /* Menú de navegación: una sola fila horizontal en tablet con desplazamiento suave puro (pan-x) */
    .nav-menu {
        display: flex !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        touch-action: pan-x !important;
        overscroll-behavior-y: none !important;
        overscroll-behavior-x: contain !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        height: 52px !important;
        max-height: 52px !important;
        box-sizing: border-box !important;
        padding: 0 15px !important;
        gap: 6px !important;
        align-items: center !important;
        position: relative !important;
        z-index: 1000 !important;
    }
    .nav-menu::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    .nav-dropdown {
        position: relative !important;
        flex-shrink: 0 !important;
    }
    .nav-menu > a,
    .dropbtn {
        font-size: 13px !important;
        padding: 6px 10px !important;
        gap: 5px !important;
        flex-shrink: 0 !important;
        border-radius: 8px !important;
    }
    .dropdown-content {
        background: #ffffff !important;
        min-width: 260px !important;
        border-radius: 12px !important;
        box-shadow: 0 15px 35px rgba(0,0,0,0.18) !important;
        border: 1px solid #e2e8f0 !important;
        z-index: 999999 !important;
        padding: 8px 0 !important;
        display: none;
        flex-direction: column !important;
    }
    .nav-dropdown:hover .dropdown-content,
    .nav-dropdown.expanded .dropdown-content,
    .nav-dropdown.is-active .dropdown-content {
        display: flex !important;
    }
    .dropdown-content a {
        padding: 10px 16px !important;
        font-size: 13px !important;
        color: #334155 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        text-decoration: none !important;
    }
    .dropdown-content a:hover {
        background: #f8fafc !important;
        color: #0ea5e9 !important;
    }

    /* Botones de acción rápida: alineados al final sin desbordar */
    .qa-dropdown-v2 {
        position: relative !important;
        transform: none !important;
        right: auto !important;
        top: auto !important;
        margin: 0 0 0 auto !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
    }
    .btn-qa-v2 {
        padding: 6px 14px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }
    .nav-menu > div[style*="position: absolute"],
    .nav-menu > div[style*="position:absolute"],
    .nav-menu > div[style*="right: 90px"],
    .nav-menu > div[style*="right: 80px"],
    .nav-menu > div[style*="right: 55px"],
    .nav-menu > div[style*="right: 48px"],
    .nav-menu > div[style*="right: 20px"],
    .nav-menu > div[style*="right: 15px"],
    .nav-menu > div[style*="right: 130px"] {
        position: relative !important;
        transform: none !important;
        right: auto !important;
        top: auto !important;
        margin: 0 2px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Cards y paneles */
    .card,
    .panel-blanco {
        padding: 25px 20px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    /* Page header tablet */
    .page-header-card {
        flex-wrap: wrap !important;
        gap: 12px !important;
        padding: 16px 20px !important;
    }
    .btn-nuevo {
        margin-left: auto !important;
    }

    /* Sidebar paciente */
    .layout-paciente {
        flex-direction: column !important;
    }
    .sidebar-paciente {
        width: 100% !important;
        margin-bottom: 16px !important;
    }

    /* Inputs — 16px mínimo para evitar zoom en iOS/iPadOS */
    input[type="text"],
    input[type="email"],
    input[type="date"],
    input[type="number"],
    input[type="tel"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Modales */
    .modal-caja {
        width: 90% !important;
        max-width: 600px !important;
        padding: 25px !important;
    }

    /* Ficha selector tablet */
    .ficha-selector {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }
    .ficha-option {
        min-width: 0 !important;
        padding: 18px 14px !important;
    }

    /* Check-grid tablet */
    .check-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    }

    /* Barra búsqueda tabla */
    .search-table-bar {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    .input-search-table {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Botón Generar PDF & Compartir en Receta para iPad (vertical y horizontal) */
    .btn-pdf-movil {
        display: flex !important;
    }
    #fila-botones-imprimir {
        display: none !important;
    }
}

/* Soporte específico para iPad en modo horizontal (hasta 1366px / touch) */
@media screen and (max-width: 1366px) and (hover: none), screen and (max-width: 1366px) and (pointer: coarse), screen and (max-width: 1200px) {
    .btn-pdf-movil {
        display: flex !important;
    }
    #fila-botones-imprimir {
        display: none !important;
    }
}

/* ═════════════════════════════════════════════════════════════════
   REGLA SUPREMA DE IMPRESIÓN Y EXPORTACIÓN A PDF
   ═════════════════════════════════════════════════════════════════ */
@media print {
    .topbar,
    .topbar-wrapper,
    .nav-menu-wrapper,
    .nav-menu,
    .nav-menu-toggle,
    .sucursal-switcher-php,
    .user-actions,
    .search-container,
    .logo-flotante-wrapper,
    .panel-controles,
    .sidebar-paciente,
    .no-print,
    .no-imprimir,
    .btn-pdf-movil,
    .btn-imprimir,
    .qa-dropdown-v2,
    .nav-dropdown,
    .dropdown-content,
    #dropdown-notificaciones,
    #btn-notificaciones,
    #btn-dark-mode,
    button[title="Centro de Ayuda"],
    div[class*="swal"],
    .swal2-container,
    .chat-widget,
    #chat-widget-container {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        opacity: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}