:root { --touch-size: 48px; }
        body { min-height: 100vh; background: var(--bs-tertiary-bg); }
        .app-shell { max-width: 1180px; }
        /* Escritorio: ocupar el ancho disponible sin alterar la vista movil. */
        @media (min-width:900px) {
            html:not(.view-mobile) .container.app-shell { width:100%; max-width:none; padding-left:clamp(12px,1.2vw,24px); padding-right:clamp(12px,1.2vw,24px); }
            html:not(.view-mobile) #app { width:100%; max-width:none!important; }
            html:not(.view-mobile) #app>.card-body { min-width:0; }
        }
        html.view-desktop .container.app-shell { width:100%; max-width:none; padding-left:clamp(12px,1.2vw,24px); padding-right:clamp(12px,1.2vw,24px); }
        html.view-desktop #app { width:100%; max-width:none!important; }
        .top-actions { gap: .5rem; flex-wrap: wrap; }
        .summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; margin-bottom:1rem; }
        .summary-card { border:1px solid var(--bs-border-color); border-radius:.8rem; background:var(--bs-body-bg); padding:.85rem 1rem; text-align:center; box-shadow:0 .125rem .35rem rgba(0,0,0,.04); }
        .summary-card .summary-label { display:block; color:var(--bs-secondary-color); font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.25rem; }
        .summary-card h6 { margin:0!important; font-size:1.1rem; }
        #mobileCards { display:none; }
        .record-card { border:1px solid var(--bs-border-color); border-radius:1rem; background:var(--bs-body-bg); padding:1rem; margin-bottom:.8rem; box-shadow:0 .2rem .65rem rgba(0,0,0,.06); }
        .record-card.is-paid { opacity:.82; }
        .record-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:.75rem; margin-bottom:.8rem; }
        .record-card-date { font-weight:700; font-size:1.05rem; }
        .record-card-user { font-size:.82rem; color:var(--bs-secondary-color); }
        .record-card-grid { display:grid; grid-template-columns:1fr 1fr; gap:.65rem; }
        .record-field { min-width:0; }
        .record-field.full { grid-column:1/-1; }
        .record-label { display:block; font-size:.72rem; color:var(--bs-secondary-color); text-transform:uppercase; letter-spacing:.04em; margin-bottom:.1rem; }
        .record-value { font-weight:600; overflow-wrap:anywhere; }
        .record-actions { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.9rem; padding-top:.8rem; border-top:1px solid var(--bs-border-color); }
        .record-actions .btn { min-height:42px; flex:1 1 120px; }
        .mobile-bottom-nav { display:none; }
        .view-mode-manual { font-weight:600; }

        html.view-mobile .container { max-width:100%!important; padding-left:.75rem; padding-right:.75rem; }
        html.view-mobile #app { max-width:760px!important; border:0; background:transparent; margin-top:.5rem!important; }
        html.view-mobile #app>.card-body { padding:.35rem; }
        html.view-mobile .desktop-records { display:none!important; }
        html.view-mobile #mobileCards { display:block; }
        html.view-mobile .summary-grid { grid-template-columns:1fr; gap:.55rem; }
        html.view-mobile .summary-card { display:flex; align-items:center; justify-content:space-between; text-align:left; padding:.75rem .9rem; }
        html.view-mobile .summary-card .summary-label { margin:0; }
        html.view-mobile .summary-card h6 { font-size:1.05rem; }
        html.view-mobile .form-control, html.view-mobile .form-select, html.view-mobile .btn { min-height:var(--touch-size); font-size:1rem; }
        html.view-mobile label.form-label { font-weight:600; margin-bottom:.3rem; }
        html.view-mobile #writeActions { flex-direction:column; }
        html.view-mobile #writeActions .btn { width:100%; }
        html.view-mobile .export-controls > [class*="col-"] { width:100%; }
        html.view-mobile .app-header { align-items:flex-start!important; gap:.75rem; }
        html.view-mobile .app-header .btn-group { width:100%; }
        html.view-mobile .app-header .btn-group .btn { flex:1; }
        html.view-mobile #adminUsersBox .table thead { display:none; }
        html.view-mobile #adminUsersBox .table, html.view-mobile #adminUsersBox tbody, html.view-mobile #adminUsersBox tr, html.view-mobile #adminUsersBox td { display:block; width:100%; }
        html.view-mobile #adminUsersBox tr { padding:.8rem; border-bottom:1px solid var(--bs-border-color); }
        html.view-mobile #adminUsersBox td { border:0; padding:.25rem .1rem; text-align:left!important; }
        html.view-mobile #adminUsersBox td:last-child { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.45rem; }
        html.view-mobile #adminUsersBox td:last-child .btn { flex:1 1 150px; }
        html.view-mobile body { padding-bottom:16px; }
        html.view-mobile .mobile-bottom-nav { display:flex; position:fixed; z-index:1030; left:0; right:0; bottom:0; gap:.4rem; padding:.55rem max(.6rem, env(safe-area-inset-right)) calc(.55rem + env(safe-area-inset-bottom)) max(.6rem, env(safe-area-inset-left)); background:rgba(var(--bs-body-bg-rgb),.96); border-top:1px solid var(--bs-border-color); backdrop-filter:blur(12px); }
        html.view-mobile .mobile-bottom-nav .btn { flex:1; min-height:48px; font-size:.84rem; padding:.35rem; }

        @media (max-width: 899.98px) {
            html:not(.view-desktop) .container { max-width:100%!important; padding-left:.75rem; padding-right:.75rem; }
            html:not(.view-desktop) #app { max-width:760px!important; border:0; background:transparent; margin-top:.5rem!important; }
            html:not(.view-desktop) #app>.card-body { padding:.35rem; }
            html:not(.view-desktop) .desktop-records { display:none!important; }
            html:not(.view-desktop) #mobileCards { display:block; }
            html:not(.view-desktop) .summary-grid { grid-template-columns:1fr; gap:.55rem; }
            html:not(.view-desktop) .summary-card { display:flex; align-items:center; justify-content:space-between; text-align:left; padding:.75rem .9rem; }
            html:not(.view-desktop) .summary-card .summary-label { margin:0; }
            html:not(.view-desktop) .summary-card h6 { font-size:1.05rem; }
            html:not(.view-desktop) .form-control, html:not(.view-desktop) .form-select, html:not(.view-desktop) .btn { min-height:var(--touch-size); font-size:1rem; }
            html:not(.view-desktop) label.form-label { font-weight:600; margin-bottom:.3rem; }
            html:not(.view-desktop) #writeActions { flex-direction:column; }
            html:not(.view-desktop) #writeActions .btn { width:100%; }
            html:not(.view-desktop) .export-controls > [class*="col-"] { width:100%; }
            html:not(.view-desktop) .app-header { align-items:flex-start!important; gap:.75rem; }
            html:not(.view-desktop) .app-header .btn-group { width:100%; }
            html:not(.view-desktop) .app-header .btn-group .btn { flex:1; }
            html:not(.view-desktop) #adminUsersBox .table thead { display:none; }
            html:not(.view-desktop) #adminUsersBox .table, html:not(.view-desktop) #adminUsersBox tbody, html:not(.view-desktop) #adminUsersBox tr, html:not(.view-desktop) #adminUsersBox td { display:block; width:100%; }
            html:not(.view-desktop) #adminUsersBox tr { padding:.8rem; border-bottom:1px solid var(--bs-border-color); }
            html:not(.view-desktop) #adminUsersBox td { border:0; padding:.25rem .1rem; text-align:left!important; }
            html:not(.view-desktop) #adminUsersBox td:last-child { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.45rem; }
            html:not(.view-desktop) #adminUsersBox td:last-child .btn { flex:1 1 150px; }
            html:not(.view-desktop) body { padding-bottom:16px; }
            html:not(.view-desktop) .mobile-bottom-nav { display:flex; position:fixed; z-index:1030; left:0; right:0; bottom:0; gap:.4rem; padding:.55rem .6rem calc(.55rem + env(safe-area-inset-bottom)); background:rgba(var(--bs-body-bg-rgb),.96); border-top:1px solid var(--bs-border-color); backdrop-filter:blur(12px); }
            html:not(.view-desktop) .mobile-bottom-nav .btn { flex:1; min-height:48px; font-size:.84rem; padding:.35rem; }
        }
        @media (min-width:900px) { html.view-desktop #mobileCards { display:none!important; } }
        .feature-card{border:1px solid var(--bs-border-color);border-radius:.9rem;background:var(--bs-body-bg)}
        .calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.35rem}
        .calendar-day{min-height:95px;border:1px solid var(--bs-border-color);border-radius:.6rem;padding:.45rem;background:var(--bs-body-bg);overflow:hidden}
        .calendar-day.muted{opacity:.45}.calendar-day .day-number{font-weight:700;font-size:.85rem}
        .calendar-item{font-size:.72rem;margin-top:.2rem;padding:.15rem .25rem;border-radius:.3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.calendar-item.cobrar{background:#fff3cd;color:#664d03;border-left:4px solid #ffc107}.calendar-item.bolsa{background:#cff4fc;color:#055160;border-left:4px solid #0dcaf0}.calendar-item.consumir{background:#f8d7da;color:#842029;border-left:4px solid #dc3545}.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:.65rem}.dashboard-card{border:1px solid var(--bs-border-color);border-radius:.75rem;padding:.75rem;background:var(--bs-body-bg)}.dashboard-card small{display:block;color:var(--bs-secondary-color)}.dashboard-card strong{font-size:1.25rem}.impersonation-banner{position:sticky;top:0;z-index:1080}.pagination-bar{display:flex;gap:.5rem;justify-content:center;align-items:center;flex-wrap:wrap}
        .chart-wrap{position:relative;min-height:300px}
        .bulk-toolbar{position:sticky;top:.5rem;z-index:5}
        .approval-badge{min-width:88px}
        html.view-mobile .calendar-day{min-height:70px;padding:.25rem}.calendar-item{font-size:.62rem}
        html.view-mobile .calendar-grid{gap:.2rem}
        .audit-json{font-family:ui-monospace,monospace;font-size:.72rem;white-space:pre-wrap;max-width:360px}

        /* Identidad corporativa 2i · naranja */
        :root{
            --i2-ink:#20252b;
            --i2-ink-2:#111417;
            --i2-orange:#f58220;
            --i2-orange-dark:#d9680b;
            --i2-orange-soft:#fff1e4;
            --i2-paper:#f5f6f7;
            --bs-primary:#f58220;
            --bs-primary-rgb:245,130,32;
            --bs-link-color:#c95f09;
            --bs-link-hover-color:#934300;
        }
        [data-bs-theme="dark"]{
            --bs-primary:#ff9b45;
            --bs-primary-rgb:255,155,69;
            --bs-link-color:#ffae68;
            --bs-link-hover-color:#ffd0aa;
        }
        body{
            background:
              radial-gradient(circle at 8% 0%,rgba(245,130,32,.13),transparent 29rem),
              linear-gradient(180deg,#fafafa 0,var(--i2-paper) 48%,#fff 100%);
            font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
        }
        [data-bs-theme="dark"] body{
            background:radial-gradient(circle at 8% 0%,rgba(245,130,32,.13),transparent 29rem),#0f1114;
        }
        .corporate-masthead{
            display:flex;align-items:center;justify-content:space-between;gap:1rem;
            margin-bottom:1rem;padding:1rem 1.2rem;border-radius:1rem;
            background:linear-gradient(118deg,var(--i2-ink-2),var(--i2-ink));color:#fff;
            border-top:4px solid var(--i2-orange);
            box-shadow:0 .9rem 2.2rem rgba(17,20,23,.20);overflow:hidden;position:relative;
        }
        .corporate-masthead:before{
            content:"";position:absolute;right:-4rem;top:-7rem;width:20rem;height:20rem;
            border:1px solid rgba(245,130,32,.45);border-radius:50%;
            box-shadow:0 0 0 3.4rem rgba(245,130,32,.065),0 0 0 7rem rgba(245,130,32,.025);
        }
        .corporate-masthead:after{
            content:"";position:absolute;left:0;bottom:0;width:38%;height:2px;
            background:linear-gradient(90deg,var(--i2-orange),transparent);
        }
        .corporate-brand{display:flex;align-items:center;gap:.9rem;position:relative;z-index:1}
        .corporate-logo{
            display:grid;place-items:center;width:3.35rem;height:3.35rem;border-radius:.7rem;
            background:var(--i2-orange);color:#fff;font-size:1.62rem;font-weight:900;
            letter-spacing:-.13em;padding-right:.12em;
            box-shadow:inset 0 0 0 1px rgba(255,255,255,.26),0 .35rem 1rem rgba(0,0,0,.18);
        }
        .corporate-name{font-weight:780;font-size:1.02rem;line-height:1.15;letter-spacing:.005em}
        .corporate-tagline{font-size:.7rem;text-transform:uppercase;letter-spacing:.18em;color:#ff9b45;margin-top:.2rem;font-weight:650}
        .corporate-appname{position:relative;z-index:1;text-align:right;font-size:.77rem;color:rgba(255,255,255,.68)}
        .corporate-appname strong{display:block;color:#fff;font-size:1rem}
        #auth,.feature-card,#app,.summary-card,.record-card,.dashboard-card{
            box-shadow:0 .5rem 1.5rem rgba(32,37,43,.075);border-color:rgba(32,37,43,.10)
        }
        #auth{overflow:hidden;border:0}
        #auth:before{content:"";display:block;height:.42rem;background:linear-gradient(90deg,var(--i2-orange) 0 76%,var(--i2-ink) 76%)}
        .auth-heading{font-weight:820;color:var(--i2-ink);letter-spacing:-.035em}
        [data-bs-theme="dark"] .auth-heading{color:#fff}
        .btn-primary{
            --bs-btn-color:#fff;--bs-btn-bg:var(--i2-orange);--bs-btn-border-color:var(--i2-orange);
            --bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--i2-orange-dark);--bs-btn-hover-border-color:var(--i2-orange-dark);
            --bs-btn-active-bg:#bd5705;--bs-btn-active-border-color:#bd5705;
        }
        [data-bs-theme="dark"] .btn-primary{--bs-btn-bg:#ff9138;--bs-btn-border-color:#ff9138;--bs-btn-hover-bg:#f58220;--bs-btn-hover-border-color:#f58220}
        .btn-success{--bs-btn-bg:#2f7d4a;--bs-btn-border-color:#2f7d4a;--bs-btn-hover-bg:#26653c;--bs-btn-hover-border-color:#26653c}
        .btn-outline-primary{--bs-btn-color:var(--i2-orange-dark);--bs-btn-border-color:var(--i2-orange);--bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--i2-orange);--bs-btn-hover-border-color:var(--i2-orange)}
        [data-bs-theme="dark"] .btn-outline-primary{--bs-btn-color:#ff9b45;--bs-btn-border-color:#ff9b45;--bs-btn-hover-color:#16191d;--bs-btn-hover-bg:#ff9b45;--bs-btn-hover-border-color:#ff9b45}

        /* Colores semánticos: el naranja queda reservado para la identidad y acciones principales. */
        .btn-edit{
            --bs-btn-color:#0b63b6;--bs-btn-border-color:#0b63b6;
            --bs-btn-hover-color:#fff;--bs-btn-hover-bg:#0b63b6;--bs-btn-hover-border-color:#0b63b6;
            --bs-btn-active-color:#fff;--bs-btn-active-bg:#084f91;--bs-btn-active-border-color:#084f91;
        }
        .btn-export-pdf{
            --bs-btn-color:#fff;--bs-btn-bg:#374151;--bs-btn-border-color:#374151;
            --bs-btn-hover-color:#fff;--bs-btn-hover-bg:#1f2937;--bs-btn-hover-border-color:#1f2937;
        }
        .btn-export-bolsa{
            --bs-btn-color:#374151;--bs-btn-border-color:#6b7280;
            --bs-btn-hover-color:#fff;--bs-btn-hover-bg:#4b5563;--bs-btn-hover-border-color:#4b5563;
        }
        .btn-export-csv{
            --bs-btn-color:#4f46a5;--bs-btn-border-color:#6366f1;
            --bs-btn-hover-color:#fff;--bs-btn-hover-bg:#4f46a5;--bs-btn-hover-border-color:#4f46a5;
        }
        .btn-export-excel{
            --bs-btn-color:#166534;--bs-btn-border-color:#198754;
            --bs-btn-hover-color:#fff;--bs-btn-hover-bg:#198754;--bs-btn-hover-border-color:#198754;
        }
        .btn-state-action{
            --bs-btn-color:#fff;--bs-btn-bg:#2563eb;--bs-btn-border-color:#2563eb;
            --bs-btn-hover-color:#fff;--bs-btn-hover-bg:#1d4ed8;--bs-btn-hover-border-color:#1d4ed8;
        }
        .btn-payment{
            --bs-btn-color:#2f2400;--bs-btn-bg:#f5c542;--bs-btn-border-color:#e6b72f;
            --bs-btn-hover-color:#211900;--bs-btn-hover-bg:#e6b72f;--bs-btn-hover-border-color:#d4a51e;
        }
        [data-bs-theme="dark"] .btn-edit{--bs-btn-color:#74b9ff;--bs-btn-border-color:#4da3f5;--bs-btn-hover-color:#07111b;--bs-btn-hover-bg:#74b9ff;--bs-btn-hover-border-color:#74b9ff}
        [data-bs-theme="dark"] .btn-export-pdf{--bs-btn-bg:#4b5563;--bs-btn-border-color:#6b7280;--bs-btn-hover-bg:#6b7280;--bs-btn-hover-border-color:#6b7280}
        [data-bs-theme="dark"] .btn-export-bolsa{--bs-btn-color:#d1d5db;--bs-btn-border-color:#9ca3af;--bs-btn-hover-color:#111827;--bs-btn-hover-bg:#d1d5db;--bs-btn-hover-border-color:#d1d5db}
        [data-bs-theme="dark"] .btn-export-csv{--bs-btn-color:#a5b4fc;--bs-btn-border-color:#818cf8;--bs-btn-hover-color:#111827;--bs-btn-hover-bg:#a5b4fc;--bs-btn-hover-border-color:#a5b4fc}
        [data-bs-theme="dark"] .btn-export-excel{--bs-btn-color:#86efac;--bs-btn-border-color:#4ade80;--bs-btn-hover-color:#052e16;--bs-btn-hover-bg:#86efac;--bs-btn-hover-border-color:#86efac}
        .form-control:focus,.form-select:focus{border-color:var(--i2-orange);box-shadow:0 0 0 .25rem rgba(245,130,32,.18)}
        .app-header{padding-bottom:.8rem;border-bottom:1px solid var(--bs-border-color)}
        .app-header h5:before{content:"";display:inline-block;width:.32rem;height:1.25rem;border-radius:1rem;background:var(--i2-orange);vertical-align:-.2rem;margin-right:.55rem}
        .card-header{background:rgba(245,130,32,.045)}
        [data-bs-theme="dark"] .card-header{background:rgba(245,130,32,.06)}
        .summary-card{border-top:3px solid var(--i2-orange)}
        .calendar-day:hover{border-color:var(--i2-orange);box-shadow:0 .25rem .8rem rgba(245,130,32,.12)}
        .accordion-button:not(.collapsed){color:#8d3e00;background:var(--i2-orange-soft);box-shadow:inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color)}
        [data-bs-theme="dark"] .accordion-button:not(.collapsed){color:#ffb77b;background:rgba(245,130,32,.10)}
        /* Audit history button: readable in both light and dark modes. */
        [data-bs-theme="dark"] #loadAudit{--bs-btn-color:#e9ecef;--bs-btn-border-color:#adb5bd;--bs-btn-hover-color:#111827;--bs-btn-hover-bg:#e9ecef;--bs-btn-hover-border-color:#e9ecef;--bs-btn-active-color:#111827;--bs-btn-active-bg:#e9ecef;--bs-btn-active-border-color:#e9ecef;}
        .nav-pills .nav-link.active,.nav-pills .show>.nav-link{background-color:var(--i2-orange)}
        .badge.text-bg-primary{background-color:var(--i2-orange)!important}
        ::selection{background:rgba(245,130,32,.28)}
        @media(max-width:650px){
            .corporate-masthead{padding:.78rem .88rem;border-radius:.8rem}
            .corporate-logo{width:2.75rem;height:2.75rem;font-size:1.34rem}
            .corporate-appname{display:none}.corporate-name{font-size:.9rem}.corporate-tagline{font-size:.6rem}
        }

/* V4.3 · Pendientes y rechazos */
.pending-actions-box{border-left:4px solid var(--i2-orange,#f58220)!important}
.pending-action-item{padding:.55rem 0;border-bottom:1px solid rgba(128,128,128,.18)}
.pending-action-item:last-child{border-bottom:0}
.pending-action-item span{font-size:.9rem}
.pending-action-link{appearance:none;border:0;background:transparent;color:inherit;cursor:pointer;border-radius:.45rem;}
.pending-action-link:hover,.pending-action-link:focus-visible{background:var(--bs-tertiary-bg);outline:2px solid transparent;}
.pending-action-link:focus-visible{box-shadow:0 0 0 .2rem rgba(var(--bs-primary-rgb),.2);}

/* V4.4 · periodos cerrados */
.period-closed-row{opacity:.78}
.period-closed-row td{background:rgba(108,117,125,.06)}
#periodPreview .card{border-left:4px solid var(--bs-primary)}

/* V4.7 · espacio de trabajo del gestor y estadísticas globales */
.manager-work-summary{display:flex;flex-wrap:wrap;gap:.5rem}
.manager-work-counters{display:flex;flex-wrap:wrap;gap:.55rem}
.manager-work-counters span{padding:.4rem .65rem;border:1px solid var(--bs-border-color);border-radius:.65rem;background:var(--bs-tertiary-bg)}
.manager-work-item{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.7rem 0;border-top:1px solid var(--bs-border-color)}
.manager-work-item:first-child{border-top:0}
.manager-work-main{display:grid;gap:.12rem;min-width:0}.manager-work-main small{color:var(--bs-secondary-color)}
.manager-work-actions{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:flex-end}
#allUsersStatsContent th,#allUsersStatsContent td{white-space:nowrap}
@media(max-width:760px){.manager-work-item{align-items:flex-start;flex-direction:column}.manager-work-actions{justify-content:flex-start;width:100%}.manager-work-actions .btn{flex:1 1 auto}}

/* V4.8 · Panel de gestión visible para Gestor/Admin */
.manager-control-panel{
  border:1px solid color-mix(in srgb, var(--bs-primary) 35%, var(--bs-border-color));
  border-left:5px solid var(--bs-primary);
  border-radius:.8rem;
  padding:1rem;
  background:color-mix(in srgb, var(--bs-primary-bg-subtle) 55%, var(--bs-body-bg));
  box-shadow:0 .25rem .8rem rgba(0,0,0,.06);
}
.manager-control-main{display:grid;grid-template-columns:minmax(220px,1fr) minmax(320px,1.15fr);gap:1rem;align-items:end}
.manager-control-title{display:flex;flex-direction:column;gap:.2rem}
.manager-control-title strong{font-size:1.1rem}
.manager-control-title span{font-size:.9rem;color:var(--bs-secondary-color)}
.manager-user-scope .form-select{font-weight:700;border-width:2px}
.manager-quick-actions{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--bs-border-color)}
.period-management-card{border-left:5px solid var(--bs-primary);scroll-margin-top:1rem}
#managerWorkspace,#allUsersStatsBox,#adminToolsItem{scroll-margin-top:1rem}
@media (max-width:767.98px){
  .manager-control-main{grid-template-columns:1fr}
  .manager-quick-actions{display:grid;grid-template-columns:1fr 1fr}
  .manager-quick-actions .btn{width:100%}
}
@media (max-width:480px){.manager-quick-actions{grid-template-columns:1fr}}
/* V5.2: navegación por rol; sin duplicar controles ni alterar IDs existentes. */
.section-navigation{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;border-bottom:2px solid var(--bs-border-color,#ddd);padding-bottom:.65rem;margin:0 0 1.1rem;position:sticky;top:0;z-index:15;background:var(--bs-body-bg,#fff)}
.section-tab{border:1px solid var(--bs-border-color,#ddd);background:var(--bs-body-bg,#fff);color:var(--bs-body-color,#222);border-radius:.6rem;padding:.6rem .85rem;font-weight:600;white-space:nowrap}
.section-tab.active{background:#f58220;color:#171717;border-color:#f58220;box-shadow:inset 0 -2px 0 #b65300}
.section-tab:focus-visible{outline:3px solid #f58220;outline-offset:2px}
.section-pane{min-height:180px;scroll-margin-top:5rem}
.navigation-scope{margin-bottom:.75rem}
.navigation-audit .accordion-body{padding:0}
#section-admin .feature-card,#section-admin #adminUsersBox{margin-bottom:1rem}
#section-admin .accordion-collapse.show,#section-audit .accordion-collapse.show{display:block}
@media(max-width:700px){.section-pane{scroll-margin-top:5rem}}

/* V5.13: los filtros del calendario se adaptan al espacio disponible. */
#calendarTypeFilterBox,#calendarStatusFilterBox{min-width:155px}
@media(max-width:575.98px){#calendarTypeFilterBox,#calendarStatusFilterBox{min-width:0}}

/* V5.20: cabeceras visibles y notas extensas sin ensanchar la tabla. */
@media (min-width: 992px) {
  #tbody tr td { vertical-align: middle; }
  table:has(#tbody) thead th { position: sticky; top: 3.25rem; z-index: 6; background: var(--bs-body-bg,#fff); box-shadow: 0 1px 0 var(--bs-border-color,#ddd); }
  #tbody td { overflow-wrap: anywhere; }
}

/* V5.24.4: controles compactos en vista móvil, sin alterar escritorio. */
.refresh-icon { display:none; }
html.view-mobile .top-actions { flex-wrap:nowrap; gap:.3rem; align-items:center; }
html.view-mobile .top-actions .btn { min-height:36px; font-size:.75rem; padding:.3rem .45rem; line-height:1.15; white-space:nowrap; }
html.view-mobile .top-actions .view-mode-manual { font-size:.72rem; }
html.view-mobile .app-header { flex-wrap:nowrap!important; align-items:center!important; gap:.4rem; }
html.view-mobile .app-header h5 { min-width:0; flex:1 1 auto; font-size:clamp(.87rem,3.7vw,1.15rem); overflow-wrap:anywhere; }
html.view-mobile .app-header .header-actions { width:auto!important; flex:0 0 auto; }
html.view-mobile .app-header #refresh { display:inline-flex; justify-content:center; align-items:center; width:38px; height:38px; min-height:38px; padding:0; flex:none; font-size:1.65rem; line-height:1; }
html.view-mobile .app-header #refresh .refresh-icon { display:inline; }
html.view-mobile .app-header #refresh .refresh-label,
html.view-mobile .app-header #logout { display:none; }
@media (max-width:370px) {
 html.view-mobile .top-actions { gap:.2rem; }
 html.view-mobile .top-actions .btn { padding:.3rem .3rem; font-size:.69rem; }
}

@media (max-width:899.98px) {
/* V5.24.4: controles compactos en vista móvil, sin alterar escritorio. */
.refresh-icon { display:none; }
html:not(.view-desktop) .top-actions { flex-wrap:nowrap; gap:.3rem; align-items:center; }
html:not(.view-desktop) .top-actions .btn { min-height:36px; font-size:.75rem; padding:.3rem .45rem; line-height:1.15; white-space:nowrap; }
html:not(.view-desktop) .top-actions .view-mode-manual { font-size:.72rem; }
html:not(.view-desktop) .app-header { flex-wrap:nowrap!important; align-items:center!important; gap:.4rem; }
html:not(.view-desktop) .app-header h5 { min-width:0; flex:1 1 auto; font-size:clamp(.87rem,3.7vw,1.15rem); overflow-wrap:anywhere; }
html:not(.view-desktop) .app-header .header-actions { width:auto!important; flex:0 0 auto; }
html:not(.view-desktop) .app-header #refresh { display:inline-flex; justify-content:center; align-items:center; width:38px; height:38px; min-height:38px; padding:0; flex:none; font-size:1.65rem; line-height:1; }
html:not(.view-desktop) .app-header #refresh .refresh-icon { display:inline; }
html:not(.view-desktop) .app-header #refresh .refresh-label,
html:not(.view-desktop) .app-header #logout { display:none; }
@media (max-width:370px) {
 html:not(.view-desktop) .top-actions { gap:.2rem; }
 html:not(.view-desktop) .top-actions .btn { padding:.3rem .3rem; font-size:.69rem; }
}

}

/* V5.27: controles y tablas fluidos en móvil sin desbordar la pantalla. */
@media (max-width:899.98px){
 html:not(.view-desktop) .app-shell,html:not(.view-desktop) .card-body,html:not(.view-desktop) .accordion-body{min-width:0}
 html:not(.view-desktop) .table-responsive{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
 html:not(.view-desktop) .dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 html:not(.view-desktop) .dashboard-card{min-width:0;overflow-wrap:anywhere}
 html:not(.view-desktop) .dashboard-card strong{font-size:1.05rem}
 html:not(.view-desktop) #allUsersStatsContent,html:not(.view-desktop) #periodComparisonContent{max-width:100%;overflow-x:auto}
 html:not(.view-desktop) #calendarGrid{min-width:0}
 html:not(.view-desktop) .calendar-day{min-width:0;min-height:62px;padding:.2rem}
 html:not(.view-desktop) .calendar-item{font-size:.6rem}
 html:not(.view-desktop) #adminSubsections .accordion-body .btn{max-width:100%;white-space:normal}
 html:not(.view-desktop) .form-control,html:not(.view-desktop) .form-select{max-width:100%;min-width:0}
}
html.view-mobile .table-responsive{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
html.view-mobile .dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
html.view-mobile .dashboard-card{min-width:0;overflow-wrap:anywhere}
html.view-mobile .dashboard-card strong{font-size:1.05rem}
html.view-mobile #allUsersStatsContent,html.view-mobile #periodComparisonContent{max-width:100%;overflow-x:auto}
html.view-mobile .calendar-day{min-width:0;min-height:62px;padding:.2rem}
html.view-mobile #adminSubsections .accordion-body .btn{max-width:100%;white-space:normal}

/* V5.35: cabecera de Horas sin solapamiento con el primer movimiento. */
.desktop-records table:has(#tbody) thead th {position:static!important;top:auto!important;z-index:auto!important;vertical-align:middle;white-space:normal;}
.desktop-records table:has(#tbody) thead th,.desktop-records table:has(#tbody) tbody td {line-height:1.4;}
/* El botón Actualizar comparte fila con Vista escritorio y se alinea a la izquierda. */
.top-actions {align-items:center;gap:.4rem;flex-wrap:wrap;}
.top-actions #refresh {margin-right:auto!important;}
.top-actions #refresh.d-none {display:none!important;}
html:not(.view-desktop) .top-actions #refresh {min-height:36px;width:38px;padding:.2rem;display:inline-flex;justify-content:center;align-items:center;}
html:not(.view-desktop) .top-actions #refresh .refresh-icon {display:inline;font-size:1.5rem;line-height:1;}
html:not(.view-desktop) .top-actions #refresh .refresh-label {display:none;}
html:not(.view-desktop) .top-actions #openUserMenu {max-width:38vw;overflow:hidden;text-overflow:ellipsis;}

/* V5.36: compactar únicamente el espacio entre controles y navegación. */
.top-actions.mb-3 { margin-bottom:0!important; }
#app.mt-4 { margin-top:.4rem!important; }
/* En vista móvil el encabezado interno no contiene texto visible y no debe reservar altura. */
html.view-mobile #app .app-header,
html:not(.view-desktop) #app .app-header { margin-bottom:0!important; min-height:0; }

/* V5.37: salida junto al usuario en escritorio y masthead menos alto. */
.corporate-masthead { padding:.58rem .95rem; margin-bottom:.55rem; border-top-width:3px; border-radius:.8rem; }
.corporate-brand { gap:.65rem; }
.corporate-logo { width:2.65rem; height:2.65rem; font-size:1.35rem; border-radius:.55rem; }
.corporate-name { font-size:.94rem; }
.corporate-tagline { font-size:.61rem; margin-top:.12rem; }
.corporate-appname strong { font-size:.92rem; }
#logout { display:inline-flex; align-items:center; justify-content:center; }
#logout.d-none { display:none!important; }
html.view-mobile #logout { display:none!important; }
@media(max-width:899.98px) { html:not(.view-desktop) #logout { display:none!important; } }
@media(max-width:650px) { .corporate-masthead { padding:.55rem .72rem; } .corporate-logo { width:2.45rem; height:2.45rem; font-size:1.25rem; } }

/* V5.74: navegación centrada. En móvil los iconos SVG reparten todo el ancho disponible. */
.section-tab{display:inline-flex;align-items:center;justify-content:center;gap:.42rem}
.section-tab .nav-label-short{display:none}
.nav-icon{display:inline-flex;align-items:center;justify-content:center;line-height:0}
.nav-icon svg{width:1.12rem;height:1.12rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
html.view-mobile .section-navigation{flex-wrap:nowrap;overflow:hidden;width:100%;gap:.22rem;padding-left:0;padding-right:0}
html.view-mobile .section-tab{flex:1 1 0;min-width:0;min-height:48px;padding:.48rem .1rem;border-radius:.55rem}
html.view-mobile .section-tab .nav-label-full,
html.view-mobile .section-tab .nav-label-short{display:none}
html.view-mobile .section-tab .nav-icon svg{width:1.42rem;height:1.42rem;stroke-width:1.9}
html.view-mobile .section-tab.active{box-shadow:inset 0 -3px 0 #b65300,0 .15rem .35rem rgba(0,0,0,.08)}
@media(max-width:899.98px){
  html:not(.view-desktop) .section-navigation{flex-wrap:nowrap;overflow:hidden;width:100%;gap:.22rem;padding-left:0;padding-right:0}
  html:not(.view-desktop) .section-tab{flex:1 1 0;min-width:0;min-height:48px;text-align:center;padding:.48rem .1rem;border-radius:.55rem}
  html:not(.view-desktop) .section-tab .nav-label-full,
  html:not(.view-desktop) .section-tab .nav-label-short{display:none}
  html:not(.view-desktop) .section-tab .nav-icon svg{width:1.42rem;height:1.42rem;stroke-width:1.9}
  html:not(.view-desktop) .section-tab.active{box-shadow:inset 0 -3px 0 #b65300,0 .15rem .35rem rgba(0,0,0,.08)}
}

/* V5.43: contraste de cabeceras en modo oscuro. */
[data-bs-theme="dark"] .table > thead,
[data-bs-theme="dark"] .table > thead > tr > th,
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light > tr > th {
  --bs-table-color: var(--bs-body-color);
  --bs-table-bg: #24282d;
  --bs-table-border-color: #454b52;
  color: var(--bs-body-color) !important;
  background-color: #24282d !important;
  border-color: #454b52 !important;
}
[data-bs-theme="dark"] .card-header {
  color: var(--bs-body-color);
  background-color: rgba(255,155,69,.10);
  border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .accordion-button {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
}
[data-bs-theme="dark"] .accordion-button.collapsed {
  color: var(--bs-body-color);
  background-color: #1b1f23;
}

#editRecordBanner{border-left:4px solid var(--bs-warning);}
#upcomingConsumptionsBox .pending-action-item:last-child{border-bottom:0;}

/* V5.59 · Ayuda integrada */
.help-manual-frame{width:100%;min-height:68vh;border:1px solid var(--bs-border-color);border-radius:.75rem;background:var(--bs-body-bg)}
#helpResourceList .btn.active{box-shadow:0 0 0 .18rem rgba(245,130,32,.18)}
@media(max-width:700px){.help-manual-frame{min-height:72vh}#helpResourceList .btn{flex:1 1 46%;white-space:normal}}

/* V5.71 · Centro operativo */
.notification-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.25rem}
.notification-bell.has-alerts{border-color:var(--bs-danger);}
.notification-bell .badge{font-size:.62rem;line-height:1;min-width:1.25rem}
.notification-center-item{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:center;border:0;border-bottom:1px solid var(--bs-border-color);background:transparent;color:inherit;padding:.8rem .35rem;border-radius:.45rem}
.notification-center-item:last-child{border-bottom:0}
.notification-center-item:hover,.notification-center-item:focus-visible{background:var(--bs-tertiary-bg)}
.notification-center-item.is-unread{box-shadow:inset 3px 0 0 var(--bs-primary)}
.notification-center-copy{display:grid;gap:.12rem;min-width:0}.notification-center-copy small{color:var(--bs-secondary-color);overflow-wrap:anywhere}
.backup-catalog code{font-size:.72rem;overflow-wrap:anywhere}
.audit-change{display:grid;grid-template-columns:minmax(7rem,auto) minmax(5rem,1fr) auto minmax(5rem,1fr);gap:.35rem;align-items:center;margin:.15rem 0}
.audit-before{padding:.1rem .25rem;border-radius:.25rem;background:rgba(var(--bs-danger-rgb),.09);text-decoration:line-through}
.audit-after{padding:.1rem .25rem;border-radius:.25rem;background:rgba(var(--bs-success-rgb),.10);font-weight:600}
#periodPreview details summary{cursor:pointer}
@media(max-width:700px){
 .notification-center-item{grid-template-columns:auto 1fr auto;padding:.7rem .15rem}
 .audit-change{grid-template-columns:1fr}.audit-change>span[aria-hidden="true"]{display:none}
 .backup-catalog .btn-group{display:grid;width:100%}
 html:not(.view-desktop) #notificationBell{min-width:38px;padding:.2rem .3rem}
}

/* V5.73 · simplificación operativa */
.section-purpose{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem;padding:.65rem .8rem;margin:0 0 .9rem;border:1px solid var(--bs-border-color);border-radius:.65rem;background:var(--bs-tertiary-bg)}
.section-purpose strong{display:block;font-size:.95rem}.section-purpose span{display:block;font-size:.82rem;color:var(--bs-secondary-color)}
.ui-notice-stack{position:fixed;z-index:1095;right:1rem;top:1rem;display:flex;flex-direction:column;gap:.5rem;width:min(420px,calc(100vw - 2rem));pointer-events:none}
.ui-notice{pointer-events:auto;box-shadow:0 .4rem 1.2rem rgba(0,0,0,.18);margin:0;white-space:pre-line}
.dialog-message{white-space:pre-line;overflow-wrap:anywhere}
#appDialogModal .modal-footer{gap:.5rem}
html.view-mobile #appDialogModal .modal-dialog,html:not(.view-desktop) #appDialogModal .modal-dialog{margin:.65rem;max-width:calc(100% - 1.3rem)}
html.view-mobile #appDialogModal .modal-footer,html:not(.view-desktop) #appDialogModal .modal-footer{display:grid;grid-template-columns:1fr 1fr}
html.view-mobile #appDialogModal .modal-footer .btn,html:not(.view-desktop) #appDialogModal .modal-footer .btn{width:100%;min-height:48px}
html.view-mobile .section-purpose,html:not(.view-desktop) .section-purpose{padding:.6rem .7rem;margin-bottom:.7rem}

/* V5.74 · sesión móvil y centrado de acciones */
.mobile-account-logout{display:none!important}
@media(max-width:899.98px){
 html:not(.view-desktop) .mobile-account-logout{display:inline-flex!important;align-items:center;justify-content:center}
 html:not(.view-desktop) .session-actions{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto}
 html:not(.view-desktop) .session-actions .btn{min-height:44px;white-space:normal}
 html:not(.view-desktop) #userMenuModal .card-header{align-items:stretch!important}
}
html.view-mobile .mobile-account-logout{display:inline-flex!important;align-items:center;justify-content:center}
html.view-mobile .session-actions{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto}
html.view-mobile .session-actions .btn{min-height:44px;white-space:normal}
html.view-mobile #userMenuModal .card-header{align-items:stretch!important}
@media(min-width:900px){html:not(.view-mobile) .section-navigation{justify-content:center}}


/* V5.74.2 · comparativa global contraída por defecto */
.period-comparison-box{overflow:hidden}
.period-comparison-summary{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.85rem 1rem;cursor:pointer;list-style:none;font-weight:600;user-select:none}
.period-comparison-summary::-webkit-details-marker{display:none}
.period-comparison-summary::marker{content:""}
.period-comparison-summary:hover,.period-comparison-summary:focus-visible{background:var(--bs-tertiary-bg)}
.period-comparison-title{min-width:0}
.period-comparison-chevron{flex:0 0 auto;font-size:1.2rem;line-height:1;transition:transform .18s ease}
.period-comparison-box[open] .period-comparison-chevron{transform:rotate(180deg)}
.period-comparison-body{padding:0 1rem 1rem;border-top:1px solid var(--bs-border-color)}
.period-comparison-body #periodComparisonContent{padding-top:.85rem}
html.view-mobile .period-comparison-summary,html:not(.view-desktop) .period-comparison-summary{min-height:48px;padding:.75rem .85rem}

/* V5.74.3 · gestión de roles */
#adminUsersBox .admin-role-select{min-width:9rem}
html.view-mobile #adminUsersBox .admin-role-select{min-width:0;width:100%}
@media (max-width:767.98px){html:not(.view-desktop) #adminUsersBox .admin-role-select{min-width:0;width:100%}}

/* V5.8 · consolidación estable de producción */

/* V5.8.6 · formulario móvil de Horas */
html.view-mobile .section-purpose-hours span{display:none}
html.view-mobile .section-purpose-hours{padding:.5rem .7rem;margin-bottom:.55rem;align-items:center}
@media(max-width:899.98px){html:not(.view-desktop) .section-purpose-hours span{display:none}html:not(.view-desktop) .section-purpose-hours{padding:.5rem .7rem;margin-bottom:.55rem;align-items:center}}

/* V5.8.11: Jira y Comentario comparten la antigua columna de Comentario.
   Solo se divide internamente ese espacio: el resto de columnas conserva su reparto original. */
@media (min-width: 900px) {
  .desktop-records table:has(#tbody) .record-jira-comment-col {
    padding: 0 !important;
    min-width: 0;
  }
  .desktop-records table:has(#tbody) .record-jira-comment-grid {
    display: grid;
    grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
    align-items: stretch;
    width: 100%;
    min-width: 0;
  }
  .desktop-records table:has(#tbody) .record-jira-comment-grid > * {
    min-width: 0;
    padding: .25rem .35rem;
  }
  .desktop-records table:has(#tbody) .record-jira-part {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }
  .desktop-records table:has(#tbody) .record-comment-part {
    border-left: 1px solid var(--bs-border-color);
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
  }
  .desktop-records table:has(#tbody) .record-jira-comment-head > span {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    text-align: center;
  }
  .desktop-records table:has(#tbody) .record-jira-comment-head > span + span {
    border-left: 1px solid var(--bs-border-color);
  }
}

/* V5.9 · dashboard del Gestor y configuración de avisos */
.manager-overview-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem}
.manager-overview-card{display:grid;gap:.18rem;padding:.75rem .85rem;border:1px solid var(--bs-border-color);border-radius:.8rem;background:var(--bs-tertiary-bg);min-width:0}
.manager-overview-card small{color:var(--bs-secondary-color);font-weight:600}.manager-overview-card strong{font-size:1.28rem;line-height:1.1}.manager-overview-card span{font-size:.78rem;color:var(--bs-secondary-color);overflow-wrap:anywhere}
.manager-overview-panel{border:1px solid var(--bs-border-color);border-radius:.8rem;padding:.7rem .85rem;background:var(--bs-body-bg)}
.manager-overview-heading{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding-bottom:.45rem;border-bottom:1px solid var(--bs-border-color)}
.manager-overview-heading span{font-size:.78rem;color:var(--bs-secondary-color)}
.manager-overview-user{display:grid;width:100%;gap:.08rem;text-align:left;border:0;border-bottom:1px solid var(--bs-border-color);background:transparent;padding:.48rem .15rem;color:inherit}.manager-overview-user:last-child{border-bottom:0}.manager-overview-user:hover{background:var(--bs-tertiary-bg)}.manager-overview-user small,.manager-overview-recent small{color:var(--bs-secondary-color)}
.manager-overview-recent{display:grid;gap:.08rem;padding:.48rem .15rem;border-bottom:1px solid var(--bs-border-color)}.manager-overview-recent:last-child{border-bottom:0}
.notification-recipient-row .nr-users{min-height:5.1rem}.notification-recipient-row .form-check{margin-bottom:.1rem}
.auto-close-card .form-text{font-size:.76rem}
@media(max-width:1100px){.manager-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.manager-overview-grid{grid-template-columns:1fr 1fr;gap:.45rem}.manager-overview-card{padding:.62rem .68rem}.manager-overview-card strong{font-size:1.08rem}.notification-recipient-row .nr-users{min-height:4.5rem}}
@media(max-width:420px){.manager-overview-grid{grid-template-columns:1fr}}