/* ==========================================================================
   Custom Responsive overrides
   Ajustes para uso cómodo en teléfono y tablet, agregados sobre el CSS
   compilado del template (no requiere recompilar SCSS/gulp).
   ========================================================================== */

/* Evitar scroll horizontal accidental de toda la página */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* -----------------------------------------------------------------------
   Barras de búsqueda / filtros (search-box + selects + botones de acción)
   ----------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .card-body .row.g-3 > [class*="col-"],
    .card-body .row.g-4 > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .search-box,
    .search-box .form-control,
    .input-group,
    .input-group .form-select,
    .input-group .form-control {
        width: 100%;
    }

    .card-header .d-flex.gap-2,
    .card-body .d-flex.gap-2 {
        flex-wrap: wrap;
    }

    .card-header .d-flex.gap-2 > .btn,
    .card-header .d-flex.gap-2 > a.btn {
        flex: 1 1 auto;
    }
}

/* -----------------------------------------------------------------------
   Tablas anchas (RegistroVacunacion, Entrada, CentroAtencion, Pacientes,
   Insumo, Usuarios): mantener el scroll horizontal pero hacerlo más
   cómodo y mantener contexto con la primera columna fija.
   ----------------------------------------------------------------------- */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
    .table-responsive table {
        font-size: 0.8125rem;
    }

    .table-responsive table th,
    .table-responsive table td {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        white-space: nowrap;
    }

    .table-responsive table th:first-child,
    .table-responsive table td:first-child {
        position: sticky;
        left: 0;
        background-color: var(--vz-card-bg, #fff);
        z-index: 1;
        box-shadow: 2px 0 3px -2px rgba(0, 0, 0, 0.15);
    }
}

/* -----------------------------------------------------------------------
   Tablas de catálogos de Configuración (Insumos, Aseguradoras, Centros de
   Atención, Condición Usuaria, Pertenencia Étnica, Régimen Afiliación,
   Tipo de Carnet, Tipos de Identificación, Entradas, Registro de
   Vacunación): varias celdas de texto libre (nombre, descripción, notas,
   etc.) heredaban white-space: nowrap de .table-nowrap, así que un texto
   largo estiraba toda la tabla y obligaba a hacer scroll horizontal para
   ver el resto de columnas. Se limita su ancho y se permite el ajuste de
   línea en vez de desbordar.
   ----------------------------------------------------------------------- */
.table-nowrap td.nombre,
.table-nowrap td.descripcion,
.table-nowrap td.insumo,
.table-nowrap td.notas,
.table-nowrap td.centro,
.table-nowrap td.paciente {
    white-space: normal;
    max-width: 320px;
}

.table-nowrap td.rango_dosis {
    white-space: normal;
    max-width: 220px;
}

/* -----------------------------------------------------------------------
   Wizard de Registro de Vacunación: navegación de pasos con scroll
   horizontal en vez de desbordar/apretar la pantalla.
   ----------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .nav-tabs-custom {
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs-custom .nav-item {
        flex: 0 0 auto;
    }

    /* Navegación de pasos del wizard de Registro de Vacunación:
       en vez de comprimir 7 pasos en el ancho de un teléfono, se
       vuelve una fila con scroll horizontal. */
    .step-nav {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start !important;
        gap: 1.25rem;
        padding-bottom: 0.25rem;
    }

    .step-nav .step-indicator {
        flex: 0 0 auto;
        min-width: 82px;
    }

    .step-nav .step-indicator::after {
        display: none;
    }
}

/* -----------------------------------------------------------------------
   Objetivos táctiles: controles y botones un poco más altos en pantallas
   pequeñas para facilitar el toque.
   ----------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .form-control,
    .form-select,
    .btn {
        min-height: 42px;
    }

    .side-nav-link {
        min-height: 44px;
    }
}