@charset "utf-8";
/* ================================================================
   CORRECCIONES RESPONSIVE GLOBALES - migracion PHP 8.2 (2026-11)
   Se carga DESPUES de estilo.css. Solo reglas de adaptacion movil,
   no altera el diseno en escritorio.
   ================================================================ */

/* --- Nunca permitir que ningun control/bloque se salga de la pantalla --- */
input, select, textarea, img, video, iframe { max-width: 100%; }
.box, .table, .dataTables_wrapper { max-width: 100%; }

/* --- Cualquier caja que contenga tabla ancha: scroll horizontal --- */
section.content .box-body,
section.content .box-body .row > div[class*="col-"],
#app > div[class*="col-"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- Fancybox (modales de ajax con width fijo en JS): nunca mas ancho que la pantalla --- */
#fancybox-wrap, #fancybox-wrap table, #fancybox-content,
.fancybox-inner, .fancybox-outer, .fancybox-skin {
    max-width: 96vw !important;
}
#fancybox-wrap { left: 2vw !important; }
#fancybox-content, #fancybox-content > div, .fancybox-inner > div,
#fancybox-frame { width: auto !important; max-width: 100% !important; }

/* --- Textarea del colaborador con ancho fijo 570px --- */
.form_textboxes_txtarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

@media (max-width: 768px) {
    /* Caja de login centrada: que no se corte en pantallas chicas */
    .login {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
        margin: 8vh auto 20px auto;
        max-width: 94vw;
        width: 94vw;
    }
    .form_usu { width: 100%; margin-top: 10px; }

    /* Contenido principal sin margen lateral exagerado */
    .content-wrapper, .right-side { margin-left: 0; }
    section.content { padding: 10px 8px; }
    .content-header { padding: 10px 8px 5px; }
    .content-header > .breadcrumb { position: static; margin: 4px 0 0; }

    /* Columnas bootstrap del formulario: apiladas a todo lo ancho */
    section.content .row > div[class*="col-"] { padding-left: 5px; padding-right: 5px; }

    /* Botones con texto legible y zona tactil >= 40px */
    .btn { white-space: normal; word-wrap: break-word; }
    .btn { min-height: 34px; }
    .box-footer .btn, .pull-right .btn { margin-bottom: 6px; }

    /* DataTables: envoltura a todo el ancho + scroll horizontal interno */
    div.dataTables_wrapper { width: 100% !important; }
    div.dataTables_wrapper .row > div[class*="col-"] { overflow-x: auto; }
    .dataTables_length, .dataTables_filter { text-align: left; margin-bottom: 6px; }
    .dataTables_filter input { width: 100%; max-width: 220px; }
    .dataTables_length select { max-width: 100%; }

    /* Tablas: permitir scroll suave en vez de romper layout */
    table.table, .table-bordered { min-width: 480px; }
    .table > thead > tr > th, .table > tbody > tr > td { font-size: 12px; padding: 5px; }

    /* Modales bootstrap nativos: alto controlado */
    .modal-dialog { margin: 10px auto; width: auto; max-width: 96vw; }
    .modal-body { max-height: 72vh; overflow-y: auto; }

    /* Fancybox adicional en pantalla chica */
    #fancybox-wrap { top: 2vh !important; }
    #fancybox-content, .fancybox-inner { max-height: 92vh !important; overflow-y: auto !important; }
    #fancybox-close { top: -8px !important; right: -8px !important; }

    /* Menu superior AdminLTE compacto */
    .navbar-custom-menu .navbar-nav > li > a { padding: 12px 8px; }
    .main-header .logo { height: 50px; font-size: 16px; line-height: 46px; padding: 0 5px; }

    /* Titulos de pagina */
    .content-header h1 { font-size: 20px; }

    /* Formularios: etiquetas y grupos apilados comodos */
    .form-group label { margin-bottom: 4px; }
    .form-horizontal .form-group { margin-left: 0; margin-right: 0; }

    /* Panels/box con menos padding interno */
    .box-header.with-border { padding: 8px; }
    .box-header > .box-tools { right: 6px; }

    /* Datepicker y select2 no deben desbordar */
    .datepicker.dropdown-menu { max-width: 90vw; }
    .select2-container { max-width: 100%; }
    .select2-dropdown { max-width: 96vw; }

    /* Wizard de pasos (formwizard): pasos mas chicos */
    .steps li { font-size: 16px; padding: 6px; }
}

@media (max-width: 480px) {
    body { font-size: 13px; }
    .content-header h1 { font-size: 17px; }
    .btn { font-size: 12px; padding: 6px 8px; }
    .btn-lg { font-size: 14px; padding: 8px 10px; }
    table.table, .table-bordered { min-width: 420px; }
    .main-header .navbar { margin-left: 0; }
}