/* =========================================================
   MOBILE - Reglas específicas para pantallas pequeñas
   Solo se aplican por debajo de 768px. No afectan a escritorio.
========================================================= */

@media (max-width: 768px) {

    /* ---------- HEADER ---------- */
    header {
        padding: 10px 15px;
        flex-wrap: wrap;
        gap: 8px;
    }
    header h1 {
        font-size: 1em;
    }
    header > div {
        font-size: 0.7em;
    }
    .btn-icon {
        width: 32px;
        height: 32px;
        font-size: 0.9em;
    }

    /* ---------- LAYOUT ---------- */
    main {
        padding: 15px;
    }

    /* ---------- SIDEBAR ---------- */
    .sidebar {
        width: 200px;
    }
    .sidebar.collapsed {
        margin-left: -200px;
    }
    .sidebar a {
        padding: 10px 18px;
        font-size: 0.9em;
    }
    .sidebar .menu-title {
        padding: 8px 18px;
        font-size: 0.7em;
    }

    /* ---------- SECTION HEADER ---------- */
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .section-header h2 {
        font-size: 1.1em;
    }
    .section-header .actions {
        width: 100%;
        flex-wrap: wrap;
    }

    /* ---------- BOTONES ---------- */
    .btn {
        padding: 9px 14px;
        font-size: 0.85em;
    }
    .btn-sm {
        padding: 5px 10px;
        font-size: 0.75em;
    }

    /* ---------- TABLAS: scroll horizontal ---------- */
    .card[style*="padding:0"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .card[style*="padding:0"] table {
        min-width: 600px;
    }

    /* ---------- FORM GRID ---------- */
    .form-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* ---------- MODALES ---------- */
    .modal {
        width: 95%;
        padding: 18px;
        max-height: 90vh;
    }
    .modal.wide {
        max-width: 95%;
        width: 95%;
    }
    .modal .actions {
        flex-direction: column-reverse;
        gap: 8px;
    }
    .modal .actions button {
        width: 100%;
    }

    /* ---------- PREVIEW WORD ---------- */
    #previewWordContent {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .preview-word {
        min-width: 700px;
    }

    /* ---------- CUADRO RATER ---------- */
    .rater-cell {
        font-size: 0.85em;
    }

    /* ---------- TABs ---------- */
    .tab {
        padding: 8px 12px;
        font-size: 0.85em;
    }

    /* ---------- OPCIONES DE CAMBIO ---------- */
    .opcion-cambio {
        padding: 10px;
    }
    .opcion-info {
        font-size: 0.85em;
    }

    /* ---------- DETALLE DEL PACIENTE ---------- */
    .visit-row {
        grid-template-columns: 60px 1fr;
        gap: 6px;
        padding: 10px;
        font-size: 0.8em;
    }

    /* ---------- HINT ---------- */
    .hint {
        font-size: 0.8em;
        padding: 10px 12px;
    }
}