/* =================================================================
   JFS-MOBILE.CSS — Adaptación responsive compartida v1
   Se aplica a todos los módulos del Sistema de Gestión CT.
   Breakpoints:  768px  →  tablet / teléfono horizontal
                 480px  →  teléfono portrait (uso principal)
   ================================================================= */

/* ──────────────────────────────────────────────────────────────────
   768 px — tablet y landscape
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* BODY */
    body {
        height: auto !important;
        min-height: 100vh;
        padding-top: 120px !important;
        padding-bottom: 100px !important;
        overflow-x: hidden;
    }

    /* HEADER */
    .header-global {
        height: auto !important;
        min-height: 60px;
        padding: 0.6rem 1rem !important;
        flex-wrap: wrap;
        gap: 0.3rem;
    }
    .header-global h1 {
        font-size: 1rem !important;
        line-height: 1.3;
    }
    .btn-logout {
        padding: 0.3rem 0.7rem !important;
        font-size: 0.8rem !important;
    }
    .btn-manual {
        padding: 0.3rem 0.6rem !important;
        font-size: 0.8rem !important;
    }
    .btn-theme {
        padding: 0.3rem 0.6rem !important;
        font-size: 1rem !important;
    }

    /* CONTENEDOR */
    .container {
        padding: 0.75rem !important;
    }

    /* FIXED CONTROLS (barra superior con botones en módulos) */
    .fixed-controls-row {
        padding: 0.5rem 0.75rem !important;
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
        position: static !important;      /* No fija en mobile — evita solaparse */
    }
    .section-header {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        padding: 0.5rem 0.75rem !important;
    }
    .section-title {
        font-size: 1.1rem !important;
    }

    /* GRIDS GENÉRICOS */
    .grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    /* TARJETAS */
    .card,
    .card-previred,
    .card-sii {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
    }

    /* RESULT / RESUMEN */
    .result-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
    }
    .res-val {
        font-size: 1.3rem !important;
    }

    /* INPUTS — 1rem (16px) para evitar zoom automático en iOS */
    input[type="text"],
    input[type="number"],
    input[type="email"],
    select,
    textarea {
        font-size: 1rem !important;
    }

    /* BOTONES — touch target mínimo 44 px */
    .btn {
        min-height: 44px !important;
        font-size: 0.9rem !important;
        padding: 0.5rem 0.9rem !important;
    }
    .btn-sm {
        min-height: 38px !important;
    }
    /* Grupos de botones: que envuelvan */
    .btn-group,
    [style*="display: flex"][style*="gap"]:not(.dock-container):not(.dock-item):not(.rit-selector):not(.compact-row):not(.time-row) {
        flex-wrap: wrap !important;
    }

    /* TABLAS */
    table {
        font-size: 0.85rem !important;
    }
    /* Envolver tablas para scroll horizontal */
    .deuda-table,
    .results-table,
    .tabla-wrapper {
        display: block;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* STATUS MESSAGE */
    .status-message {
        left: 0.75rem !important;
        right: 0.75rem !important;
        top: auto !important;
        bottom: 85px !important;
        width: auto !important;
        font-size: 0.9rem !important;
    }

    /* DOCK FLOTANTE */
    .dock-container {
        padding: 6px 8px !important;
        gap: 4px !important;
    }
    .dock-label {
        font-size: 0.65rem !important;
    }
    .dock-icon {
        font-size: 1.2rem !important;
    }
    .dock-item {
        padding: 5px 6px !important;
    }

    /* ── DASHBOARD ── */
    .dashboard-main-columns {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    .access-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.5rem !important;
    }
    .access-card {
        min-height: 52px !important;
        padding: 0.4rem 0.3rem !important;
        flex-direction: column !important;
        gap: 0.2rem !important;
    }
    .access-card span {
        font-size: 1.2rem !important;
    }
    .access-card p {
        font-size: 0.72rem !important;
    }
    .calendario-grid .day-cell {
        min-height: 40px !important;
        padding: 0.2rem 0.3rem !important;
        font-size: 0.8rem !important;
    }
    .calendario-grid .day-name {
        font-size: 0.7rem !important;
    }
    .compact-row {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    .time-row {
        flex-wrap: wrap !important;
    }

    /* ── ALIMENTOS ── */
    /* Panel TNRH flotante: que no flote en mobile */
    #panel-tnrh,
    .panel-puente {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        margin-top: 0.5rem;
    }
    /* Modal del asistente de cuidados */
    .modal-content {
        width: 96% !important;
        max-width: 96% !important;
        margin: 2% !important;
        max-height: 90vh;
        overflow-y: auto;
    }
    .modal-body {
        padding: 1rem !important;
    }

    /* ── SII ── */
    /* Wrap tabla de resultados */
    #resultSII-1,
    #resultSII-2,
    [id^="resultSII-"] {
        overflow-x: auto !important;
    }

    /* ── ACUERDOS ── */
    /* Selección de materia */
    .module-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
    }
    /* Layout principal editor */
    .main-container {
        grid-template-columns: 1fr !important;
    }
    /* Editor de texto */
    #editor-textarea {
        padding: 0.75rem !important;
        min-height: 180px !important;
        font-size: 0.95rem !important;
    }
    /* Panel de posiciones */
    .posiciones-grid {
        grid-template-columns: 1fr !important;
    }
    .posiciones-panel {
        padding: 0.75rem !important;
    }

    /* ── INFLACIÓN ── */
    /* Cards con flex-basis fijo: liberar a 100% */
    .subject-card {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: auto !important;
        width: 100% !important;
    }
    .subject-group {
        flex-direction: column !important;
    }

    /* ── DEUDA ── */
    /* Input de pago parcial con ancho fijo */
    .partial-input {
        width: 100% !important;
        max-width: 140px !important;
    }
    /* Tabla de deuda horizontal scrolleable */
    #tablaCard .deuda-table {
        min-width: 480px;
    }
    #tablaCard {
        overflow-x: auto !important;
    }

    /* ── PREVIRED ── */
    .card-previred {
        width: 100% !important;
    }
    .chart-container {
        height: 220px !important;
    }
    .textarea {
        min-height: 100px !important;
    }

    /* ── HIPOTECARIO ── */
    .input-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ──────────────────────────────────────────────────────────────────
   480 px — teléfono portrait (uso más común en sala)
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

    body {
        padding-top: 105px !important;
    }

    /* Header: título más corto */
    .header-global {
        padding: 0.5rem 0.75rem !important;
    }
    .header-global h1 {
        font-size: 0.88rem !important;
    }

    .container {
        padding: 0.5rem !important;
    }

    /* Accesos: mantener 4 col pero solo icono */
    .access-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.3rem !important;
    }
    .access-card {
        min-height: 48px !important;
    }
    .access-card span {
        font-size: 1.1rem !important;
    }
    .access-card p {
        display: none !important;      /* Solo iconos */
    }

    /* Result grid: 1 columna */
    .result-grid {
        grid-template-columns: 1fr !important;
    }

    /* Dock: solo iconos para ahorrar espacio */
    .dock-label {
        display: none !important;
    }
    .dock-item {
        padding: 7px 6px !important;
    }
    .dock-icon {
        font-size: 1.35rem !important;
        margin-bottom: 0 !important;
    }
    .dock-container {
        gap: 2px !important;
        padding: 6px 6px !important;
    }
    .dock-separator {
        margin: 0 2px !important;
    }

    /* Acuerdos: 1 col en pantalla pequeña */
    .module-grid {
        grid-template-columns: 1fr !important;
    }
    .module-card {
        padding: 1rem !important;
    }

    /* Sección título */
    .section-title {
        font-size: 1rem !important;
    }

    /* Botones en grupos: fullwidth */
    .fixed-controls-row .btn,
    .section-header .btn {
        flex: 1 1 auto !important;
    }

    /* Calendario: celdas más pequeñas */
    .calendario-grid .day-cell {
        min-height: 32px !important;
        font-size: 0.75rem !important;
    }
    .event-dot {
        width: 6px !important;
        height: 6px !important;
    }

    /* Formulario agendar: forzar columna */
    .compact-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .folder-group-compact {
        width: 100% !important;
    }
    .btn-folder-full {
        width: 100% !important;
    }
}