/* ===== responsive.css ===== */
/* Responsive stylesheet intentionally reserved for layout breakpoints. */

/* =========================
   SIDEBAR RESPONSIVE
   El sidebar solo se colapsa en escritorio (> 980px).
   En 980px o menos funciona como menú móvil off-canvas.
========================= */
@media (max-width: 980px){
    .app-shell,
    .app-shell.is-collapsed{
        grid-template-columns: minmax(0, 1fr);
    }

    .main-area{
        grid-column: 1;
        padding: 16px;
    }

    .sidebar{
        position: fixed;
        inset: 0 auto 0 0;
        width: min(var(--sidebar-w), calc(100vw - 48px));
        max-width: 320px;
        height: 100vh;
        transform: translateX(-100%);
        transition: transform var(--transition);
        z-index:10020;
    }

    .sidebar-top{
        display:grid;
        grid-template-columns:minmax(0, 1fr) 40px;
        align-items:start;
        gap:10px;
    }

    .sidebar-top .brand{
        width:auto;
        min-width:0;
    }

    body.sidebar-open .sidebar{
        transform: translateX(0);
    }

    body.sidebar-open .sidebar-overlay{
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        z-index:10010;
    }

    .collapse-btn{
        display: none;
    }

    .mobile-menu-btn,
    .mobile-close{
        display: grid;
    }
}

@media (min-width: 981px){
    .mobile-menu-btn,
    .mobile-close{
        display: none;
    }
}


/* =========================================
   THEME BASE RESPONSIVE
   Breakpoints para componentes reutilizables.
   ========================================= */

@media (max-width: 1100px){
    .ui-grid,
    .module-grid{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
    .ui-col-8,
    .ui-col-6,
    .ui-col-4,
    .ui-col-3{ grid-column:span 6; }
    .ui-indicator-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
    .ui-kpi-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px){
    .ui-toolbar,
    .module-toolbar,
    .ui-row-between,
    .ui-module-head,
    .ui-card-head,
    .module-card-head{ align-items:flex-start; }
    .ui-search{ width:100%; }
    .ui-calendar,
    .calendar-grid{ grid-template-columns:repeat(7, minmax(124px, 1fr)); overflow:auto; }
    .ui-calendar-weekdays,
    .calendar-weekdays{ grid-template-columns:repeat(7, 124px); overflow:auto; }
    .ui-table-card{ --table-pad-x:16px; }
}

@media (max-width: 720px){
    .main-area{ padding:14px; }
    .ui-section,
    .module-section{ gap:14px; }
    .ui-card,
    .module-card,
    .filter-card,
    .calendar-card{ border-radius:18px; }
    .ui-card-head,
    .module-card-head,
    .ui-module-head{ padding:16px; }
    .ui-title,
    .module-title,
    .ui-module-title{ font-size:20px; }
    .ui-topbar{ padding:10px; border-radius:16px; }
    .ui-topbar-tabs,
    .ui-tabs{ gap:8px; }
    .ui-tab{ min-height:34px; padding:0 11px; }
    .ui-switch,
    .ui-view-switch{ max-width:100%; overflow:auto; }
    .ui-switch button,
    .ui-switch label,
    .ui-switch .ui-switch-item,
    .ui-view-switch button,
    .ui-view-switch .ui-switch-item{ min-width:max-content; }
    .ui-hidden-columns{ padding:14px; }
    .ui-table-card .ui-table-scroll{ margin-left:var(--table-pad-x); margin-right:var(--table-pad-x); }
}

@media (max-width: 620px){
    .ui-grid,
    .module-grid{ grid-template-columns:1fr; }
    .ui-col-12,
    .ui-col-8,
    .ui-col-6,
    .ui-col-4,
    .ui-col-3{ grid-column:1 / -1; }
    .ui-form-grid,
    .module-form-grid{ grid-template-columns:1fr; }
    .ui-form-grid > *,
    .module-form-grid > *,
    .ui-form-grid .span-6,
    .module-form-grid .span-6{ grid-column:1 / -1; }
    .ui-indicator-grid,
    .ui-kpi-grid,
    .ui-kpi-grid.is-base{ grid-template-columns:1fr; }
    .ui-kpi-main,
    .ui-kpi-simple{ min-height:auto; padding:20px; }
    .ui-kpi-chip{ position:static; width:max-content; margin-bottom:14px; }
    .ui-record-grid{ grid-template-columns:1fr; }
    .ui-record-actions{ justify-content:flex-start; }
    .ui-table-card{ --table-pad-x:12px; }
    .ui-table-card .ui-modal-body{ padding-top:16px; }
}

/* Responsive: dentro de ui-module-body el padding ya existe; no agregar margenes extra */
.ui-table-card .ui-module-body .ui-table-scroll,
.ui-table-card .ui-module-body .ui-table-filters,
.ui-table-card .ui-module-body .ui-hidden-columns{
    margin-left:0;
    margin-right:0;
}

/* =========================================================
   Fase 8: responsive profundo global
   Objetivo: corregir desbordes comunes sin tocar logica PHP/JS.
   ========================================================= */

*,
*::before,
*::after{
    box-sizing:border-box;
}

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

input,
select,
textarea,
button{
    max-width:100%;
}

.ui-table-card,
.ui-card,
.module-card,
.ui-module-body,
.ui-modal,
.ui-modal-body,
.content,
.main-area,
.page-heading,
.topbar-left,
.topbar-right{
    min-width:0;
}

.ui-table-scroll,
.table-wrap,
.table-responsive{
    max-width:100%;
    -webkit-overflow-scrolling:touch;
}

@media (max-width: 1180px){
    .layout-grid{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
    .span-12,
    .span-8,
    .span-7,
    .span-6,
    .span-5,
    .span-4{ grid-column:1 / -1; }

    .direcciones-grupo-kpis,
    .ui-table-filter-grid.cinco-cols{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px){
    .topbar{
        margin:-16px -16px 16px;
        padding:10px 16px;
        gap:12px;
    }

    .topbar-left{
        flex:1 1 auto;
        justify-content:flex-start;
        overflow:hidden;
    }

    .topbar-right{
        flex:0 1 auto;
        justify-content:flex-end;
        flex-wrap:nowrap;
        width:auto;
    }

    .search-box{
        flex:1 1 260px;
        width:auto;
        min-width:0;
    }

    .module-top-nav{
        overflow-x:auto;
        overflow-y:hidden;
        flex-wrap:nowrap;
        scrollbar-width:thin;
    }

    .module-top-nav-item{
        flex:0 0 auto;
        white-space:nowrap;
    }

    .programas-shell-grid,
    .asistencia-capture-grid,
    .asistencia-layout,
    .direcciones-map-layout{
        grid-template-columns:1fr !important;
    }
}

@media (max-width: 900px){
    .ui-module-head,
    .ui-card-head,
    .module-card-head,
    .actividades-section-head,
    .asistencia-section-head,
    .programas-head,
    .organigrama-head{
        grid-template-columns:1fr !important;
        gap:12px;
    }

    .ui-module-head > *,
    .ui-card-head > *,
    .module-card-head > *{
        min-width:0;
    }

    .ui-module-actions,
    .ui-card-actions,
    .module-actions,
    .actividades-head-actions,
    .asistencia-head-actions,
    .programas-head-actions{
        width:100%;
        justify-content:flex-start;
        flex-wrap:wrap;
    }

    .ui-table-filter-grid,
    .ui-table-filter-grid.dos-cols,
    .ui-table-filter-grid.tres-cols,
    .ui-table-filter-grid.cuatro-cols,
    .ui-table-filter-grid.cinco-cols,
    .direcciones-grupo-kpis,
    .actividades-responsables,
    .organigrama-modal-grid,
    .programas-config-grid,
    .hogares-form-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    }

    .ui-modal.is-lg,
    .ui-modal.is-md,
    .ui-modal.is-sm,
    .programas-config-dialog{
        width:min(100%, calc(100vw - 28px));
        max-height:calc(100vh - 28px);
    }

    .ui-modal-head,
    .ui-modal-footer{
        gap:12px;
    }

    .ui-modal-footer{
        flex-wrap:wrap;
    }

    .ui-calendar,
    .calendar-grid,
    .ui-calendar-weekdays,
    .calendar-weekdays,
    .actividades-calendar-grid,
    .actividades-calendar-weekdays,
    .aniversarios-calendar-weekdays{
        max-width:100%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }
}

@media (max-width: 720px){
    .topbar{
        margin:-14px -14px 14px;
        padding:10px 14px;
    }

    .page-heading h1{
        font-size:clamp(18px, 5.4vw, 22px);
    }

    .page-heading p{
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .profile-btn{
        max-width:100%;
    }

    .profile-copy{
        display:none;
    }

    .ui-modal{
        border-radius:18px;
    }

    .ui-modal-grid,
    .ui-form-grid,
    .module-form-grid,
    .ui-table-filter-grid,
    .ui-table-filter-grid.dos-cols,
    .ui-table-filter-grid.tres-cols,
    .ui-table-filter-grid.cuatro-cols,
    .ui-table-filter-grid.cinco-cols,
    .actividades-responsables,
    .organigrama-modal-grid,
    .programas-config-grid,
    .hogares-form-grid,
    .aniversarios-week-grid,
    .aniversarios-search-results,
    .direcciones-grupo-kpis{
        grid-template-columns:1fr !important;
    }

    .ui-modal-grid > *,
    .ui-form-grid > *,
    .module-form-grid > *,
    .span-12,
    .span-8,
    .span-7,
    .span-6,
    .span-5,
    .span-4,
    .span-3{
        grid-column:1 / -1 !important;
    }

    .btn,
    .button,
    .ui-btn{
        min-height:42px;
    }

    .ui-modal-footer .btn,
    .actividades-modal-footer .btn,
    .programas-config-footer .btn{
        flex:1 1 160px;
    }
}

@media (max-width: 620px){
    .main-area{
        padding:12px;
        gap:14px;
    }

    .content{
        gap:14px;
    }

    .topbar{
        margin:-12px -12px 12px;
        padding:10px 12px;
    }

    .topbar-left{
        gap:10px;
    }

    .icon-btn{
        width:42px;
        height:42px;
        flex-basis:42px;
        border-radius:14px;
    }

    .search-box{
        flex-basis:100%;
        order:5;
    }

    .module-top-nav{
        padding:7px;
        border-radius:16px;
    }

    .module-top-nav-item{
        padding:8px 11px;
        font-size:12px;
    }

    .ui-table-card,
    .ui-card,
    .module-card,
    .filter-card,
    .calendar-card{
        border-radius:16px;
    }

    .ui-table-card .ui-module-body,
    .ui-card-body,
    .module-card-body{
        padding-left:12px;
        padding-right:12px;
    }

    .table-wrap,
    .ui-table-scroll{
        margin-left:0 !important;
        margin-right:0 !important;
    }

    .ui-div-table .ui-div-tbody .ui-div-row,
    .data-table-div .data-table-body .data-row{
        grid-template-columns:1fr !important;
    }

    .ui-div-table .ui-div-cell[data-label="Acciones"],
    .data-table-div .data-cell[data-label="Acciones"],
    .table-cell-action{
        justify-content:flex-start !important;
        align-items:flex-start !important;
    }

    .table-actions,
    .ui-table-actions{
        width:100%;
        justify-content:flex-start !important;
    }

    .table-actions .btn,
    .ui-table-actions .btn{
        flex:1 1 132px;
    }

    .ui-switch,
    .ui-view-switch{
        width:100%;
        justify-content:flex-start;
    }

    .ui-switch button,
    .ui-switch label,
    .ui-switch .ui-switch-item,
    .ui-view-switch button,
    .ui-view-switch .ui-switch-item{
        flex:1 0 auto;
    }
}

@media (max-width: 480px){
    .main-area{ padding:10px; }
    .topbar{ margin:-10px -10px 10px; padding:9px 10px; }

    .mobile-menu-btn,
    .mobile-close,
    .icon-btn{
        width:40px;
        height:40px;
        flex-basis:40px;
    }

    .sidebar{
        width:calc(100vw - 32px);
        max-width:none;
    }

    .ui-title,
    .module-title,
    .ui-module-title{
        font-size:19px;
        line-height:1.15;
    }

    .ui-module-subtitle,
    .ui-card-subtitle,
    .module-subtitle{
        font-size:12px;
    }

    .ui-kpi-main,
    .ui-kpi-simple,
    .ui-kpi-neutral,
    .ui-kpi-neutral-secondary,
    .ui-kpi{
        padding:16px;
        border-radius:16px;
    }

    .ui-kpi-value{
        font-size:clamp(24px, 12vw, 34px);
    }

    .ui-modal-head,
    .ui-modal-body,
    .ui-modal-footer{
        padding-left:14px;
        padding-right:14px;
    }

    .ui-modal-footer{
        flex-direction:column;
        align-items:stretch;
    }

    .ui-modal-footer .btn,
    .actividades-modal-footer .btn,
    .programas-config-footer .btn{
        width:100%;
        flex-basis:auto;
    }

    .ui-calendar-nav,
    .ui-tab,
    .module-top-nav-item{
        min-height:36px;
    }
}