:root{
  --sidebar:272px;
  --by-navy:#071b3a;
  --by-navy-2:#0b2a57;
  --by-blue:#1565d8;
  --by-cyan:#18a7d8;
  --by-bg:#f4f7fb;
  --by-surface:#ffffff;
  --by-border:#dfe6ef;
  --by-text:#15243a;
  --by-muted:#6d7b8f;
  --by-success:#14845b;
  --by-warning:#b7791f;
  --by-danger:#c43d4b;
  --bs-primary:#1565d8;
  --bs-primary-rgb:21,101,216;
}
*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body{background:var(--by-bg);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--by-text);font-size:.94rem}
img,svg,video,canvas{max-width:100%;height:auto}

/* Shell / top command bar */
.navbar.by-topbar{height:64px;background:#fff!important;border-bottom:1px solid var(--by-border);box-shadow:0 1px 5px rgba(22,38,62,.05);z-index:1035}
.navbar .container-fluid{gap:.7rem}
.navbar-brand{white-space:nowrap;color:var(--by-navy)!important;display:flex;align-items:center;gap:.7rem;font-weight:700;letter-spacing:-.02em}
.brand-mark{width:34px;height:34px;border-radius:8px;background:linear-gradient(145deg,var(--by-blue),var(--by-cyan));display:grid;place-items:center;color:#fff;box-shadow:0 5px 12px rgba(21,101,216,.22)}
.brand-copy{display:flex;flex-direction:column;line-height:1.05}
.brand-copy small{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--by-muted);font-weight:700;margin-top:3px}
.topbar-menu-btn{border:1px solid var(--by-border)!important;color:var(--by-navy)!important;background:#fff!important}
.user-area{display:flex;align-items:center;gap:.6rem;min-width:0}
.user-meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:380px;color:#42526a}
.user-chip{background:#f4f7fb;border:1px solid var(--by-border);border-radius:8px;padding:.4rem .65rem;display:flex;align-items:center;gap:.45rem}
.user-chip i{color:var(--by-blue)}
.logout-btn{border-color:var(--by-border)!important;color:#526175!important;background:#fff!important}
.logout-btn:hover{background:#f6f8fb!important;color:var(--by-danger)!important}

/* Navigation */
.sidebar{width:var(--sidebar);min-height:calc(100vh - 64px);background:linear-gradient(180deg,var(--by-navy) 0%,#08172f 100%);position:sticky;top:64px;flex:0 0 var(--sidebar);overflow-y:auto;color:#fff}
.sidebar .menu-caption{padding:1.15rem 1.1rem .45rem;color:#7f98bd;font-size:.68rem;text-transform:uppercase;letter-spacing:.13em;font-weight:700}
.sidebar .nav{padding:.6rem .75rem 1.2rem!important}
.sidebar .nav-link{color:#c7d5e8;border-radius:7px;padding:.68rem .8rem;display:flex;align-items:center;min-height:42px;font-size:.9rem;border-left:3px solid transparent}
.sidebar .nav-link i{width:22px;color:#93b5df;font-size:1rem}
.sidebar .nav-link:hover{background:rgba(255,255,255,.07);color:#fff}
.sidebar .nav-link.active{background:linear-gradient(90deg,rgba(24,167,216,.21),rgba(21,101,216,.13));color:#fff;border-left-color:var(--by-cyan);font-weight:600}
.sidebar .nav-link.active i{color:#62d0f0}
.offcanvas{max-width:88vw;background:var(--by-navy);color:#fff}
.offcanvas .offcanvas-header{background:#fff;color:var(--by-text)}
.offcanvas .offcanvas-body{overflow-y:auto;background:var(--by-navy)}
.offcanvas .nav-link{color:#c7d5e8;border-radius:7px;padding:.7rem .85rem;display:flex;align-items:center}
.offcanvas .nav-link.active,.offcanvas .nav-link:hover{background:rgba(24,167,216,.14);color:#fff}

/* Content */
.content{min-width:0;width:100%;max-width:100%}
.content .container-fluid{padding:1.55rem 1.65rem!important}
h1,h2,h3,h4,h5,h6{color:var(--by-navy);font-weight:650}
h3{font-size:1.45rem;letter-spacing:-.015em}
.text-secondary{color:var(--by-muted)!important}
.page-heading{border-bottom:1px solid var(--by-border);padding-bottom:1rem;margin-bottom:1.2rem!important}

/* Cards / KPIs */
.card{border:1px solid var(--by-border);border-radius:8px;box-shadow:0 2px 8px rgba(22,38,62,.045);max-width:100%;background:var(--by-surface)}
.card h5{font-size:1rem}
.kpi-icon{width:44px;height:44px;border-radius:7px;display:grid;place-items:center;background:#eaf2fd;color:var(--by-blue);font-size:1.18rem;flex:0 0 auto;border:1px solid #d8e8fb}
.card:hover .kpi-icon{background:#e4f6fb;color:#087fa8}

/* Tables */
.table-responsive{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:7px}
.table{margin-bottom:0;min-width:max-content;color:#263850}
.table>:not(caption)>*>*{padding:.67rem .72rem;vertical-align:middle;white-space:nowrap;border-color:#e7ecf2}
.table thead th{background:#eef3f8;color:#44546a;font-size:.74rem;text-transform:uppercase;letter-spacing:.045em;font-weight:700;border-bottom:1px solid #d8e0ea}
.table tbody tr:hover{background:#f7faff}
.table-striped>tbody>tr:nth-of-type(odd)>*{--bs-table-bg-type:#fbfcfe}
.table td.text-wrap,.table th.text-wrap{white-space:normal;min-width:180px}

/* Forms */
.form-label{font-size:.8rem;font-weight:650;color:#40516a;margin-bottom:.35rem}
.form-control,.form-select{border-radius:6px;min-height:40px;max-width:100%;border-color:#cfd8e5;color:#24364c;background-color:#fff}
.form-control:focus,.form-select:focus{border-color:#74a9ed;box-shadow:0 0 0 .2rem rgba(21,101,216,.10)}
textarea.form-control{min-height:90px}
.input-group{max-width:100%}.input-group>.form-control,.input-group>.form-select{min-width:0}

/* Buttons */
.btn{border-radius:6px;min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:.3rem;font-weight:600;font-size:.88rem}
.btn-sm{min-height:32px;font-size:.8rem}
.btn-primary{background:var(--by-blue);border-color:var(--by-blue)}
.btn-primary:hover{background:#0d56bd;border-color:#0d56bd}
.btn-dark{background:var(--by-navy);border-color:var(--by-navy)}
.btn-outline-secondary{border-color:#cbd5e1;color:#4a5b72}

/* Alerts / badges */
.alert{border-radius:7px;border-width:1px;box-shadow:none}
.badge{border-radius:5px;font-weight:650;letter-spacing:.01em}
.badge-work{background:#dff5ec;color:#0f7250}.badge-rest{background:#e9edf3;color:#596579}
.bg-success{background-color:var(--by-success)!important}.bg-warning{background-color:#d99a2b!important}.bg-danger{background-color:var(--by-danger)!important}

/* Calendar */
.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(42px,1fr));gap:6px;min-width:0}
.cal-day{min-height:80px;background:#fff;border:1px solid #dde5ef;border-radius:7px;padding:6px;font-size:.82rem;min-width:0;overflow:hidden}
.cal-day.work{border-top:3px solid var(--by-success)}.cal-day.rest{border-top:3px solid #8a96a8}

/* Login */
.login-shell{background:linear-gradient(135deg,#061832 0%,#0b2b58 55%,#0e5275 100%);position:relative;overflow:hidden}
.login-shell:before,.login-shell:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.05)}
.login-shell:before{width:430px;height:430px;right:-160px;top:-120px}.login-shell:after{width:300px;height:300px;left:-120px;bottom:-100px}
.login-card{position:relative;z-index:1;border-radius:10px!important;border:1px solid rgba(255,255,255,.17)!important;box-shadow:0 22px 50px rgba(0,0,0,.25)!important;padding:2rem!important}
.login-title{display:flex;align-items:center;gap:.75rem;margin-bottom:.25rem}
.login-title .brand-mark{width:42px;height:42px}

.modal-dialog{max-width:min(500px,calc(100vw - 2rem))}

@media(max-width:991.98px){
  .content .container-fluid{padding:1rem!important}
  .navbar-brand{font-size:1.02rem}.brand-copy small{display:none}
  .user-meta{max-width:220px}
  h1,h2,h3{line-height:1.2}h3{font-size:1.35rem}
}
@media(max-width:767.98px){
  .navbar.by-topbar{height:58px}.sidebar{top:58px;min-height:calc(100vh - 58px)}
  .content .container-fluid{padding:.85rem!important}
  .navbar .container-fluid{flex-wrap:nowrap}.navbar-brand{font-size:.98rem;margin-right:auto}
  .user-meta{display:none}.user-chip{padding:.32rem .45rem}.user-area .btn{padding:.35rem .5rem;min-height:34px}
  .card{padding:1rem!important}.table{font-size:.88rem}.table>:not(caption)>*>*{padding:.62rem .6rem}
  .row.g-3,.row.g-2{--bs-gutter-x:.85rem}
  form .col-12.d-flex,.mobile-stack-actions{flex-wrap:wrap}
  form .col-12.d-flex>.btn,form .col-12.d-flex>a.btn,.mobile-stack-actions>.btn,.mobile-stack-actions>a.btn{flex:1 1 150px}
  .input-group{flex-wrap:wrap;gap:.5rem}.input-group>.form-control,.input-group>.form-select{width:100%;flex:1 1 100%;border-radius:6px!important}.input-group>.btn{width:100%;border-radius:6px!important}
  .calendar-grid{gap:4px;grid-template-columns:repeat(7,minmax(34px,1fr))}.cal-day{min-height:66px;font-size:.72rem;padding:4px}.cal-day .badge{font-size:.62rem;padding:.28rem .35rem;white-space:normal;line-height:1.05}
}
@media(max-width:575.98px){
  .content .container-fluid{padding:.7rem!important}h3{font-size:1.2rem}h5{font-size:1rem}.text-secondary{overflow-wrap:anywhere}.card{padding:.85rem!important}
  .btn:not(.btn-sm){width:100%}.brand-copy{display:none}
  .d-flex.justify-content-between:not(.navbar .container-fluid){flex-wrap:wrap!important;gap:.65rem!important}
  .d-flex.justify-content-between:not(.navbar .container-fluid)>a.btn,.d-flex.justify-content-between:not(.navbar .container-fluid)>.d-flex{width:100%}
  .d-flex.justify-content-between:not(.navbar .container-fluid)>.d-flex{flex-wrap:wrap}.d-flex.justify-content-between:not(.navbar .container-fluid)>.d-flex>.btn,.d-flex.justify-content-between:not(.navbar .container-fluid)>.d-flex>a.btn{flex:1 1 100%}
  .calendar-grid{grid-template-columns:repeat(7,minmax(30px,1fr));gap:3px}.cal-day{min-height:58px;font-size:.68rem;padding:3px;border-radius:5px}.cal-day .badge{font-size:0;display:block;background:transparent!important;padding:0;margin-top:4px}.cal-day.work .badge:after{content:'T';font-size:.62rem;background:#dff5ec;color:#0f7250;border-radius:4px;padding:2px 4px}.cal-day.rest .badge:after{content:'D';font-size:.62rem;background:#e9edf3;color:#596579;border-radius:4px;padding:2px 4px}
}
@media print{.sidebar,.offcanvas,.navbar,.no-print{display:none!important}.content .container-fluid{padding:0!important}.card{box-shadow:none;border:1px solid #ddd}.table{min-width:0!important}.table>:not(caption)>*>*{white-space:normal!important}}
\n/* V1.9 calendar novelty colors */\n.badge-medical{background:#fde7e9;color:#a61b2b}.badge-vacation{background:#e5f1ff;color:#145da8}.badge-permit{background:#fff2cc;color:#805e00}.cal-day.medical{background:#fff7f8;border-top:3px solid #cf3f4f}.cal-day.vacation{background:#f5faff;border-top:3px solid #2376d2}.cal-day.permit{background:#fffaf0;border-top:3px solid #c99416}.calendar-legend{display:flex;gap:4px;flex-wrap:wrap}\n

/* V1.17 - navegación hamburguesa universal */
:root{--sidebar:0px}
.sidebar{display:none!important}
.content{width:100%;min-height:calc(100vh - 64px)}
.topbar-menu-btn{display:inline-flex!important;flex:0 0 auto}
.offcanvas{width:min(330px,90vw)!important;max-width:90vw}
.offcanvas .menu-caption{padding:1.1rem 1rem .4rem;color:#8ca5c8;font-size:.68rem;text-transform:uppercase;letter-spacing:.13em;font-weight:700}
.offcanvas .nav{padding:.55rem .7rem 1.25rem!important}
.offcanvas .nav-link{min-height:44px;padding:.72rem .85rem;border-left:3px solid transparent}
.offcanvas .nav-link i{width:22px;color:#93b5df}
.offcanvas .nav-link.active{border-left-color:var(--by-cyan);background:linear-gradient(90deg,rgba(24,167,216,.20),rgba(21,101,216,.10))}
@media(min-width:992px){.content .container-fluid{max-width:1600px;margin-inline:auto;padding:1.55rem 2rem!important}}