/* ==========================================================================
   MOBILE RESPONSIVE FIXES
   Corrige desbordamientos en vista móvil para todas las templates del CRM.
   Se carga DESPUÉS de styles.css para sobrescribir estilos problemáticos.
   ========================================================================== */

/* --- GLOBAL: Prevención de overflow horizontal --- */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

main {
    overflow-x: hidden;
}

/* ==========================================================================
   TABLET (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {

    /* --- Contabilidad: search inputs y combobox fluidos --- */
    .search-input,
    .combobox {
        width: 100% !important;
        min-width: 0 !important;
    }

    .search-inputs {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: stretch;
    }

    .search-group {
        width: 100%;
    }

    /* --- Grids de KPI generales --- */
    .grid-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* --- Comunicaciones new: sidebar 350px -> full width --- */
    .comunicaciones-main {
        grid-template-columns: 1fr !important;
    }

    /* --- Stats row: compactar --- */
    .stats-row {
        gap: 0.5rem;
    }

    .stat-card .number {
        font-size: 1.2rem;
    }

    /* --- Fichajes stats grid --- */
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-xs);
    }

    .stat-box h3 {
        font-size: 1.1rem;
    }

    .stat-box p {
        font-size: 0.7rem;
    }

    /* --- Filter bar: stack filters --- */
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group {
        width: 100%;
    }

    .filter-group select,
    .filter-group input {
        flex: 1;
        min-width: 0;
    }

    /* --- Tables: ensure horizontal scroll --- */
    .table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        position: relative;
    }

    /* Table scroll shadow indicator */
    .table-container::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 30px;
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8));
        pointer-events: none;
        z-index: 1;
        transition: opacity 0.3s;
    }

    .table-container.scrolled-end::after {
        opacity: 0;
    }

    /* Admin servicios / profesionales: table-layout auto en tablet */
    .table-container table[style*="table-layout: fixed"],
    .table-container table {
        table-layout: auto !important;
    }

    /* --- Contabilidad: filtros --- */
    .filtros-row {
        flex-direction: column;
    }

    .filtro-group {
        width: 100%;
        min-width: 0 !important;
    }

    .toggle-group {
        min-width: 0 !important;
        width: 100%;
    }
}

/* ==========================================================================
   MOBILE (max-width: 600px)
   ========================================================================== */
@media (max-width: 600px) {

    /* === FICHA CLIENTE === */
    /* Form grid con minmax(300px) -> 1 columna */
    .ficha-form-grid {
        grid-template-columns: 1fr !important;
    }

    /* RGPD info grid -> 1 columna */
    .rgpd-grid {
        grid-template-columns: 1fr !important;
    }

    /* Tutor info grid -> 1 columna */
    .tutor-grid {
        grid-template-columns: 1fr !important;
    }

    /* Contenedores con max-width fijo */
    .card[style*="max-width"] {
        max-width: 100% !important;
    }

    /* === COMUNICACIONES === */
    .stats-row {
        grid-template-columns: 1fr !important;
        gap: 0.5rem;
    }

    /* === COMUNICACIONES NEW === */
    .filtro-row {
        grid-template-columns: 1fr !important;
    }

    /* === CONTABILIDAD === */
    .grid-container {
        grid-template-columns: 1fr !important;
    }

    /* === CONTABILIDAD PROFESIONAL === */
    .cp-kpis {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .cp-content-grid {
        grid-template-columns: 1fr !important;
    }

    .chart-wrapper,
    .cp-chart-wrapper {
        height: 220px !important;
    }

    /* === FICHAJES === */
    .stats-grid {
        grid-template-columns: 1fr !important;
    }

    .fichajes-table {
        font-size: 0.75rem;
    }

    .fichajes-table thead th,
    .fichajes-table tbody td {
        padding: 6px 8px;
    }

    /* === INDEX === */
    .section-cards-grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .section-cards-centered > a,
    .section-cards-centered > div:not(:empty) > a {
        flex: 1 1 calc(50% - var(--spacing-md)) !important;
        width: auto !important;
        min-width: 120px !important;
    }

    /* === ADMIN TABLES: all tables scrollable === */
    .admin-category .table-container,
    .card .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .admin-category table {
        font-size: 0.75rem;
    }

    .admin-category table th,
    .admin-category table td {
        padding: 6px 8px;
        white-space: nowrap;
    }

    /* === MODALS ON MOBILE === */
    .modal-content[style*="max-width: 700px"],
    .modal-content[style*="max-width: 600px"],
    .modal-content[style*="max-width: 550px"],
    .modal-content[style*="max-width: 500px"] {
        max-width: calc(100vw - 24px) !important;
    }
}

/* ==========================================================================
   SMALL MOBILE (max-width: 480px)
   ========================================================================== */
@media (max-width: 480px) {

    /* --- Header: ocultar kiosco buttons --- */
    .header-center {
        display: none;
    }

    /* --- Ficha cliente: minmax(300px) -> 1fr --- */
    .ficha-form-grid {
        grid-template-columns: 1fr !important;
    }

    /* --- Contabilidad Profesional --- */
    .cp-kpis {
        grid-template-columns: 1fr !important;
    }

    /* --- Index cards --- */
    .section-cards-grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--spacing-sm) !important;
    }

    .section-cards-centered > a,
    .section-cards-centered > div:not(:empty) > a {
        flex: 1 1 calc(50% - 8px) !important;
        min-width: 100px !important;
    }

    /* --- Comunicaciones New: programación --- */
    .programacion-row {
        grid-template-columns: 1fr !important;
    }

    /* --- Agenda Variable --- */
    .av-container {
        max-width: 100% !important;
        padding: var(--spacing-sm) !important;
    }

    .av-modal-box {
        max-width: calc(100vw - 20px) !important;
        width: 100% !important;
    }

    .av-tramo {
        gap: 6px !important;
        padding: 8px 10px !important;
    }

    .av-tramo input[type="time"] {
        font-size: 1rem !important;
        padding: 6px 4px !important;
        flex: 1 !important;
        width: auto !important;
        min-width: 0 !important;
    }

    .av-tramo-arrow {
        font-size: 1rem !important;
    }

    .av-tramo-del {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        font-size: 0.7rem !important;
    }

    /* --- Contabilidad: tabla min-width reducido --- */
    .ingresos-table {
        min-width: 500px;
    }

    /* --- ALL TABLES: compact on mobile --- */
    table {
        font-size: 0.75rem !important;
    }

    th, td {
        padding: 4px 6px !important;
    }

    /* Ocultar columnas menos importantes con clase */
    table .hide-mobile,
    table [data-hide-mobile] {
        display: none !important;
    }

    /* --- Buttons: full width group --- */
    .btn-group-mobile {
        flex-direction: column;
        width: 100%;
    }

    .btn-group-mobile .btn {
        width: 100%;
    }

    /* --- Search containers --- */
    .search-container {
        padding: var(--spacing-md);
    }

    /* --- Contabilidad: combobox dropdown como bottom sheet --- */
    .combobox .combo-options {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        width: 100%;
        max-height: 50vh;
        border-radius: 12px 12px 0 0;
        z-index: 9999;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
    }

    /* --- Admin Servicios: scroll tabla --- */
    .servicios-category-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* --- Configuración: grids --- */
    .config-grid,
    .settings-grid {
        grid-template-columns: 1fr !important;
    }

    /* --- Documentación paciente --- */
    .doc-grid {
        grid-template-columns: 1fr !important;
    }

    /* --- Admin Dashboard KPI --- */
    .dashboard-kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* --- Nueva consulta: form grid --- */
    .consulta-form-grid {
        grid-template-columns: 1fr !important;
    }

    /* --- Profesionales selector grid --- */
    .profesionales-selector {
        grid-template-columns: 1fr !important;
    }

    /* --- Admin profesionales: form grid --- */
    .prof-form-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   VERY SMALL MOBILE (max-width: 380px)
   ========================================================================== */
@media (max-width: 380px) {

    main {
        padding: var(--spacing-xs) !important;
    }

    .card {
        padding: var(--spacing-sm) !important;
    }

    .category-header {
        padding: var(--spacing-xs) var(--spacing-sm) !important;
        font-size: 0.9rem !important;
    }

    .category-header .btn {
        font-size: 0.75rem !important;
        padding: 4px 8px !important;
    }

    .admin-btn {
        height: 55px !important;
        font-size: 0.7rem !important;
    }

    .admin-btn i {
        font-size: 0.9rem !important;
    }

    .section-header {
        padding: var(--spacing-xs) var(--spacing-sm) !important;
        font-size: 0.9rem !important;
    }

    .index-card {
        min-height: 70px !important;
        padding: var(--spacing-xs) !important;
    }

    .index-card i {
        font-size: 1.3rem !important;
    }

    .index-card span {
        font-size: 0.75rem !important;
    }

    .index-bg-logo {
        display: none !important;
    }

    .stat-card {
        padding: 0.5rem !important;
    }

    .stat-card .number {
        font-size: 1rem !important;
    }

    .stat-card .label {
        font-size: 0.65rem !important;
    }

    .stat-box h3 {
        font-size: 0.9rem !important;
    }

    .stat-box p {
        font-size: 0.6rem !important;
    }

    h1 { font-size: 1.3rem !important; }
    h2 { font-size: 1.1rem !important; }
    h3 { font-size: 1rem !important; }
}