/*
 * Hoja de estilos responsive global — WEBLOCALSOLO
 * Se enlaza desde includes/header.php y desde las paginas standalone.
 * Breakpoints estandar: 1200 / 992 / 768 / 576 px.
 * No reemplaza los <style> por pagina existentes; los complementa.
 */

/* 1) Guard global anti-overflow horizontal.
   Requiere que toda tabla/elemento ancho tenga su propio contenedor
   con overflow-x:auto (ver .table-responsive) — de lo contrario esto
   recortaria contenido en vez de dejarlo scrollear. */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

img, video, iframe {
    max-width: 100%;
}

/* Contenedores con scroll horizontal intencional quedan exentos del max-width global */
.table-responsive,
.table-responsive table,
.table-compact,
.preview-wrap, .preview-wrap table,
.review-wrap, .review-wrap table {
    max-width: none;
}

.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* 2) Botones: red de seguridad para filas de botones que no usan flex-wrap */
.btn-toolbar,
.btn-group {
    flex-wrap: wrap;
}

/* 3) Formularios: evita el auto-zoom de iOS Safari al enfocar un input */
@media (max-width: 768px) {
    .form-control,
    .form-select {
        font-size: 16px;
    }
}

/* 4) Objetivos tactiles y navegacion en mobile */
@media (max-width: 768px) {
    .navbar-custom .nav-link,
    .navbar-custom .dropdown-item {
        white-space: normal;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    #mainSidebar a.sb-link {
        white-space: normal;
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
    }

    .btn {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    /* Filas de botones/acciones con clases utilitarias Bootstrap:
       en desktop se quedan en una linea (comportamiento actual intacto),
       en mobile deben envolver en vez de desbordar u ocultar el ultimo boton. */
    .d-flex.gap-2,
    .d-flex.gap-3 {
        flex-wrap: wrap;
    }
}