/* ============================================================
   RESPONSIVE - DIETASFINAL (Nutrición / Clínica)
   Suave: no rompe tablas ni layouts complejos
   ============================================================ */

@media (max-width: 768px) {

    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        overflow-x: hidden;
    }

    body {
        font-size: 14px;
    }

    /* Contenedor principal (según layout usual de dietasfinal) */
    .main-content,
    .page-content,
    .contenido,
    .layout-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px 10px !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    /* Sidebar / menú lateral si existiera */
    .sidebar,
    .sidebar-container {
        width: 100% !important;
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        box-sizing: border-box;
    }

    .sidebar .menu,
    .sidebar nav {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .sidebar .menu a,
    .sidebar .menu button {
        flex: 1 1 45%;
        text-align: center;
    }

    /* Formularios de carga (inicial, dietas, controles, ingresos) */
    form,
    .form-section,
    .form-grid {
        width: 100% !important;
        box-sizing: border-box;
    }

    input,
    select,
    textarea,
    button {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        margin-bottom: 8px;
        font-size: 0.95rem;
    }

    label {
        font-size: 0.9rem;
    }

    /* Grids → una columna */
    .grid,
    .grid-2,
    .grid-3,
    .grid-4,
    .metricas-grid,
    .columnas-container {
        display: block !important;
    }

    .grid > *,
    .grid-2 > *,
    .grid-3 > *,
    .grid-4 > *,
    .metricas-grid > * {
        width: 100% !important;
        margin-bottom: 8px;
    }

    /* Tablas (no romper, solo hacer scroll) */
    .table-container,
    .tabla-admin,
    .tabla-resultados,
    .tabla-metricas,
    table {
        width: 100% !important;
        display: block !important;
        overflow-x: auto !important;
        box-sizing: border-box;
    }

    table th,
    table td {
        padding: 4px 6px !important;
        font-size: 0.8rem !important;
        white-space: nowrap;
    }

    /* Filtros a una columna (ej: buscar pacientes, buscar dietas, ingresos) */
    .filtros,
    .filtros-estudios,
    .filter-panel,
    .filters-container {
        display: block !important;
        width: 100% !important;
    }

    .filtro-item,
    .filter-item {
        width: 100% !important;
        margin-bottom: 8px;
    }

    /* Modales internos (historial, dietas, configuraciones) */
    .modal,
    .modal-backdrop {
        padding: 0 !important;
    }

    .modal-dialog,
    .modal-content {
        width: 95% !important;
        max-width: 95% !important;
        margin: 10px auto !important;
        max-height: 92vh !important;
        overflow-y: auto !important;
        box-sizing: border-box;
    }

    /* Historial de pacientes - tarjetas más legibles en mobile */
    .timeline-historial {
        padding: 0 !important;
    }

    .card-historial,
    .card-inicial,
    .card-control {
        width: 100% !important;
        margin: 0 0 12px 0 !important;
        box-sizing: border-box;
    }

    .card-historial h3,
    .card-historial h4 {
        font-size: 1rem !important;
    }

    /* Estudios en historial: reducir un poco el grid para que no explote */
    .columnas-container {
        gap: 4px !important;
    }

    .columna-resultados .item-resultado {
        padding: 3px 5px !important;
        font-size: 0.8rem !important;
    }

    /* Iframes (fichas, dietas, docs) dentro de dietasfinal */
    iframe,
    .dieta-iframe,
    .ficha-iframe,
    .doc-iframe {
        width: 100% !important;
        height: 60vh !important;
        border-radius: 8px;
    }

    /* Imágenes (fotos de pacientes / sliders) */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    .galeria-fotos-container,
    .slider-content,
    .slider-photo {
        width: 100% !important;
    }

    .slider-photo img {
        width: 100% !important;
        height: auto !important;
    }

    /* Ingresos / reportes – ajustar filtros y tablas */
    .kpi-container,
    .kpi-grid {
        display: block !important;
    }

    .kpi-card {
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    .filtros-ingresos {
        display: block !important;
    }

    .filtros-ingresos .filtro-item {
        width: 100% !important;
        margin-bottom: 8px !important;
    }
}