/*
 * TÍTULO: assets/css/movil.css (ARCHIVO NUEVO)
 * PEDIDO: Vista en celulares (10/11/2026): que todas las pantallas se puedan usar en un celular.
 * FECHA Y HORA DE MODIFICACIÓN: 2026-11-10 17:30 (hora de Argentina)
 * QUÉ HACE: estilos comunes que SOLO actúan en pantallas chicas (menos de 768 px de ancho). En la computadora no
 *   cambia nada. Se carga después de bootstrap.min.css en cada pantalla (no en las impresiones).
 *   - Márgenes y letra un poco más compactos.
 *   - Encabezados con muchos botones: los botones bajan de renglón.
 *   - Campos y selectores nunca más anchos que la pantalla.
 *   - Ventanas emergentes (modales) a todo el ancho.
 *   - Las tablas anchas se deslizan de costado (lo hace assets/js/movil.js envolviéndolas).
 */
@media (max-width: 767.98px) {
    /* Nada se sale de costado (clip no crea un contenedor de desplazamiento: no rompe las barras fijas) */
    html, body { overflow-x: clip; }
    body { font-size: 15px; }
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    body.p-4, body.p-3, body.p-5 { padding: 0.6rem !important; }
    .container, .container-fluid { padding-left: 0.6rem; padding-right: 0.6rem; }
    main.p-4, div.p-4.container-fluid, div.container.p-4 { padding: 0.6rem !important; }

    h1, .h1 { font-size: 1.5rem; }
    h2, .h2 { font-size: 1.35rem; }
    h3, .h3 { font-size: 1.2rem; }
    h4, .h4 { font-size: 1.1rem; }

    /* Encabezados con título y botones: que bajen de renglón en lugar de salirse de la pantalla */
    .d-flex.justify-content-between,
    .d-flex.justify-content-end,
    .d-flex.gap-1, .d-flex.gap-2, .d-flex.gap-3,
    .btn-toolbar { flex-wrap: wrap; row-gap: 0.4rem; }
    .btn-group { flex-wrap: wrap; }

    /* Nada más ancho que la pantalla */
    img, video, canvas { max-width: 100%; height: auto; }
    .form-control, .form-select, .input-group, select, input, textarea { max-width: 100%; }
    .card { max-width: 100%; }

    /* Ventanas emergentes a todo el ancho */
    .modal-dialog { margin: 0.4rem; max-width: none !important; }
    .modal-body { padding: 0.75rem; }

    /* Tablas: letra un poco más chica; el desplazamiento lo agrega movil.js */
    .table { font-size: 0.85rem; }
    .movil-tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

    /* Botones e ítems de lista un poco más altos para el dedo */
    .btn { min-height: 34px; }
    .btn-sm { min-height: 30px; }
}