/* ByBConnect Design System v2
   Capa transversal: mejora el shell, la jerarquía y la respuesta adaptable
   sin acoplarse a la lógica interna de cada módulo. */

:root,
html[data-theme="light"]{
  --bb-bg:#f2f6f9;
  --bb-bg-deep:#e7eef3;
  --bb-surface:#ffffff;
  --bb-surface-soft:#f7fafc;
  --bb-surface-tint:#e4f2f8;
  --bb-sidebar:#0e2d48;
  --bb-sidebar-raised:#174563;
  --bb-sidebar-text:#f4f8fb;
  --bb-sidebar-muted:#a9c4d5;
  --bb-text:#173247;
  --bb-muted:#607485;
  --bb-border:#d3e0e7;
  --bb-border-strong:#adc4d0;
  --bb-primary:#2b8fbd;
  --bb-primary-strong:#176b94;
  --bb-primary-soft:#e4f2f8;
  --bb-accent:#39a37c;
  --bb-warning:#d89218;
  --bb-danger:#d54859;
  --bb-radius-sm:10px;
  --bb-radius:16px;
  --bb-radius-lg:24px;
  --bb-shadow-sm:0 5px 18px rgba(28,64,86,.08);
  --bb-shadow:0 16px 42px rgba(28,64,86,.13);
  --bb-shadow-lg:0 28px 80px rgba(20,48,68,.19);
  --bb-sidebar-width:286px;
  --bb-header-height:96px;
  --paper:var(--bb-bg);
  --paper-soft:var(--bb-bg-deep);
  --surface:var(--bb-surface);
  --surface-raised:var(--bb-surface);
  --surface-soft:var(--bb-surface-soft);
  --surface-accent:var(--bb-surface-tint);
  --ink:var(--bb-text);
  --text:var(--bb-text);
  --muted:var(--bb-muted);
  --line:var(--bb-border);
  --line-strong:var(--bb-border-strong);
  --border:var(--bb-border);
  --primary:var(--bb-primary);
  --primary-hover:var(--bb-primary-strong);
  --blue:var(--bb-primary);
  --navy:var(--bb-sidebar);
  --shadow-sm:var(--bb-shadow-sm);
  --shadow-md:var(--bb-shadow);
  --header-glass:rgba(242,246,249,.94);
}

html[data-theme="dark"]{
  --bb-bg:#0a1221;
  --bb-bg-deep:#0e192b;
  --bb-surface:#131f33;
  --bb-surface-soft:#17253b;
  --bb-surface-tint:#1a3158;
  --bb-sidebar:#050d1d;
  --bb-sidebar-raised:#0c1b35;
  --bb-sidebar-text:#e7efff;
  --bb-sidebar-muted:#8fa6cc;
  --bb-text:#edf3ff;
  --bb-muted:#a9b8cf;
  --bb-border:#2a3a53;
  --bb-border-strong:#40526d;
  --bb-primary:#6598ff;
  --bb-primary-strong:#82adff;
  --bb-primary-soft:#172e53;
  --bb-accent:#4fc59a;
  --bb-warning:#edb247;
  --bb-danger:#ef6876;
  --bb-shadow-sm:0 8px 22px rgba(0,0,0,.22);
  --bb-shadow:0 18px 46px rgba(0,0,0,.32);
  --bb-shadow-lg:0 34px 90px rgba(0,0,0,.48);
  --header-glass:rgba(10,18,33,.9);
}

@media(prefers-color-scheme:dark){
  html[data-theme="system"]{
    --bb-bg:#0a1221;--bb-bg-deep:#0e192b;--bb-surface:#131f33;--bb-surface-soft:#17253b;
    --bb-surface-tint:#1a3158;--bb-sidebar:#050d1d;--bb-sidebar-raised:#0c1b35;
    --bb-sidebar-text:#e7efff;--bb-sidebar-muted:#8fa6cc;--bb-text:#edf3ff;--bb-muted:#a9b8cf;
    --bb-border:#2a3a53;--bb-border-strong:#40526d;--bb-primary:#6598ff;--bb-primary-strong:#82adff;
    --bb-primary-soft:#172e53;--bb-accent:#4fc59a;--bb-warning:#edb247;--bb-danger:#ef6876;
    --bb-shadow-sm:0 8px 22px rgba(0,0,0,.22);--bb-shadow:0 18px 46px rgba(0,0,0,.32);
    --bb-shadow-lg:0 34px 90px rgba(0,0,0,.48);--header-glass:rgba(10,18,33,.9);
    --paper:var(--bb-bg);--paper-soft:var(--bb-bg-deep);--surface:var(--bb-surface);
    --surface-raised:var(--bb-surface);--surface-soft:var(--bb-surface-soft);--surface-accent:var(--bb-surface-tint);
    --ink:var(--bb-text);--text:var(--bb-text);--muted:var(--bb-muted);--line:var(--bb-border);
    --line-strong:var(--bb-border-strong);--border:var(--bb-border);--primary:var(--bb-primary);
    --primary-hover:var(--bb-primary-strong);--blue:var(--bb-primary);--navy:var(--bb-sidebar);
    --shadow-sm:var(--bb-shadow-sm);--shadow-md:var(--bb-shadow);
  }
}

html{font-size:16px;background:var(--bb-bg)}
body{min-width:320px;background:var(--bb-bg);font-family:"Segoe UI Variable","Segoe UI",Inter,system-ui,-apple-system,sans-serif;color:var(--bb-text)}
body:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 82% -8%,color-mix(in srgb,var(--bb-primary) 9%,transparent),transparent 36%)}

/* Acceso */
.login-view{min-height:100dvh;padding:28px;background:
  radial-gradient(circle at 8% 10%,rgba(68,119,228,.24),transparent 30%),
  radial-gradient(circle at 90% 95%,rgba(41,151,119,.16),transparent 30%),
  linear-gradient(145deg,#061127,#0b2148 54%,#0b1830)}
.login-shell{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(390px,.8fr);width:min(1080px,100%);min-height:650px;overflow:hidden;border:1px solid rgba(255,255,255,.13);border-radius:30px;background:rgba(255,255,255,.06);box-shadow:0 35px 100px rgba(0,0,0,.38);backdrop-filter:blur(16px)}
.login-showcase{display:flex;min-width:0;flex-direction:column;justify-content:space-between;padding:58px;color:#fff;background:
  linear-gradient(135deg,rgba(36,95,215,.34),transparent 50%),
  radial-gradient(circle at 85% 22%,rgba(93,145,255,.35),transparent 26%)}
.login-product{display:inline-flex;align-self:flex-start;padding:8px 12px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.08);font-size:.69rem;font-weight:800;letter-spacing:.15em}
.login-showcase h2{max-width:610px;margin:0 0 22px;font-size:clamp(2.3rem,4.2vw,4rem);line-height:1.03;letter-spacing:-.055em}
.login-showcase p{max-width:550px;margin:0;color:#c9d8f3;font-size:1.02rem;line-height:1.7}
.login-capabilities{display:flex;flex-wrap:wrap;gap:10px}
.login-capabilities span{padding:9px 12px;border:1px solid rgba(255,255,255,.15);border-radius:10px;background:rgba(4,15,38,.25);color:#dce8ff;font-size:.75rem;font-weight:700}
.login-card{display:flex;width:auto;min-width:0;flex-direction:column;justify-content:center;padding:58px;background:var(--bb-surface);border-radius:0;box-shadow:none}
.login-logo{width:min(210px,72%);height:94px;margin:0 auto 28px;object-fit:contain}
.login-card .lead{margin:0;color:var(--bb-primary);font-size:.72rem;font-weight:800;letter-spacing:.12em;text-align:center;text-transform:uppercase}
.login-card h1{margin:22px 0 8px;color:var(--bb-text);font-size:2rem;letter-spacing:-.035em;text-align:center}
.login-card .help{max-width:330px;margin:0 auto;color:var(--bb-muted);font-size:.84rem;line-height:1.6;text-align:center}
.login-card form{margin:28px 0 0}
.login-card label{margin:17px 0 0;color:var(--bb-text);font-size:.76rem}
.login-card input{min-height:48px;margin-top:8px;padding:0 14px;border:1px solid var(--bb-border-strong);border-radius:12px;background:var(--bb-surface-soft);font-size:.9rem}
.login-card input::placeholder{color:color-mix(in srgb,var(--bb-muted) 70%,transparent)}
.login-card form button{display:flex;min-height:50px;align-items:center;justify-content:center;gap:12px;margin-top:24px;border-radius:12px;background:linear-gradient(135deg,var(--bb-primary),var(--bb-primary-strong));box-shadow:0 12px 24px color-mix(in srgb,var(--bb-primary) 28%,transparent);font-size:.86rem}
#login-form button[type="submit"]{width:100%!important}
.login-card form button span{font-size:1.1rem;transition:transform .18s ease}
.login-card form button:hover span{transform:translateX(4px)}
.login-card .error{margin:10px 0 0;text-align:center}
.login-security{margin:22px 0 0;color:var(--bb-muted);font-size:.69rem;text-align:center}

/* Shell general */
.app-view{min-height:100dvh;background:var(--bb-bg)}
.app-view>aside{width:var(--bb-sidebar-width);padding:0 14px 14px;background:linear-gradient(180deg,var(--bb-sidebar),color-mix(in srgb,var(--bb-sidebar) 90%,#17366b));border-right:1px solid rgba(147,174,219,.13);box-shadow:10px 0 36px rgba(3,12,30,.08);transition:width .22s ease,transform .25s ease}
.sidebar-brand{display:flex;height:92px;align-items:center;gap:12px;padding:16px 10px 12px;border-bottom:1px solid rgba(160,184,224,.15)}
.sidebar-brand .sidebar-logo{width:62px;height:58px;flex:0 0 62px;margin:0;object-fit:contain}
.sidebar-brand>div{display:grid;min-width:0;gap:3px}
.sidebar-brand b{color:#fff;font-size:.86rem;letter-spacing:.075em}
.sidebar-brand span{color:var(--bb-sidebar-muted);font-size:.68rem;white-space:nowrap}
.app-view>aside .company{margin:0;padding:15px 10px 10px;border:0;color:var(--bb-sidebar-muted);font-size:.61rem;font-weight:700;letter-spacing:.11em}
.app-view>aside nav{padding:0 2px 8px;scrollbar-width:thin;scrollbar-color:rgba(142,166,205,.35) transparent}
.app-view>aside nav::-webkit-scrollbar{width:5px}.app-view>aside nav::-webkit-scrollbar-thumb{border-radius:9px;background:rgba(142,166,205,.35)}
.nav-item,.sidebar-group>summary{position:relative;display:flex!important;width:100%;min-height:44px;align-items:center;gap:11px;margin:3px 0;padding:10px 12px!important;border:1px solid transparent;border-radius:11px!important;background:transparent!important;color:var(--bb-sidebar-text)!important;font-size:.79rem!important;font-weight:700;line-height:1.3;list-style:none;box-shadow:none!important;transform:none!important}
.nav-item:before,.sidebar-group>summary:before{content:attr(data-area-icon);display:grid;width:26px;height:26px;flex:0 0 26px;place-items:center;border-radius:8px;background:rgba(255,255,255,.065);color:#9fc0ff;font-size:.79rem;font-weight:900}
.sidebar-group>summary:after{content:"⌄";margin-left:auto;color:var(--bb-sidebar-muted);font-size:.9rem;transition:transform .18s ease}
.sidebar-group[open]>summary:after{transform:rotate(180deg)}
.nav-item:hover,.sidebar-group>summary:hover{border-color:rgba(135,171,234,.16);background:rgba(255,255,255,.055)!important;color:#fff!important}
.nav-item.active,.sidebar-group[open]>summary{border-color:rgba(112,158,242,.22);background:linear-gradient(135deg,rgba(48,105,220,.34),rgba(47,92,183,.16))!important;color:#fff!important}
.nav-item.active:before,.sidebar-group[open]>summary:before{background:var(--bb-primary);color:#fff;box-shadow:0 5px 14px rgba(37,96,215,.3)}
.sidebar-group{margin:1px 0;border:0!important}
.sidebar-group>div{display:grid;gap:2px;margin:2px 0 8px;padding:3px 4px 3px 38px!important}
.sidebar-section-label{margin:9px 0 3px!important;padding:8px 8px 3px!important;border:0!important;color:var(--bb-sidebar-muted)!important;font-size:.56rem!important;letter-spacing:.11em}
.sidebar-subitem{position:relative;min-height:34px!important;margin:0!important;padding:8px 9px 8px 16px!important;border:1px solid transparent!important;border-radius:9px!important;background:transparent!important;color:#aebed8!important;font-size:.73rem!important;font-weight:600!important;line-height:1.35;text-align:left;box-shadow:none!important;transform:none!important}
.sidebar-subitem:before{content:"";position:absolute;left:4px;top:50%;width:4px;height:4px;border-radius:50%;background:#5e769d;transform:translateY(-50%)}
.sidebar-subitem:hover{padding-left:18px!important;background:rgba(255,255,255,.05)!important;color:#fff!important}
.sidebar-subitem.active{background:rgba(70,125,232,.18)!important;color:#fff!important}
.sidebar-subitem.active:before{height:16px;border-radius:4px;background:#6f9fff}
.sidebar-footer{display:grid;grid-template-columns:42px 1fr;gap:8px;padding-top:12px;border-top:1px solid rgba(160,184,224,.15)}
.sidebar-collapse,.logout{min-height:42px!important;margin:0!important;border:1px solid rgba(157,181,221,.2)!important;border-radius:11px!important;background:rgba(255,255,255,.035)!important;color:var(--bb-sidebar-text)!important;box-shadow:none!important;transform:none!important}
.sidebar-collapse{padding:0!important;font-size:1.4rem!important}
.logout{display:flex;align-items:center;justify-content:center;gap:9px;padding:8px 10px!important;font-size:.72rem!important}
.logout:hover,.sidebar-collapse:hover{border-color:rgba(157,181,221,.38)!important;background:rgba(255,255,255,.08)!important}

.app-view>main{width:calc(100% - var(--bb-sidebar-width));max-width:none;margin-left:var(--bb-sidebar-width);padding:0 38px 48px;transition:width .22s ease,margin-left .22s ease}
.app-view main>header{z-index:15;min-height:var(--bb-header-height);align-items:center;margin:0 -6px 28px;padding:14px 6px;background:var(--header-glass);border-bottom:1px solid color-mix(in srgb,var(--bb-border) 78%,transparent);backdrop-filter:blur(18px)}
.header-title{display:flex;min-width:0;align-items:center;gap:14px}
.header-title>div{min-width:0}
.header-title .eyebrow{margin:0 0 5px;color:var(--bb-muted);font-size:.6rem;letter-spacing:.13em}
#page-title{max-width:min(680px,52vw);overflow:hidden;color:var(--bb-text);font-size:clamp(1.45rem,2.1vw,2rem);line-height:1.15;letter-spacing:-.035em;text-overflow:ellipsis;white-space:nowrap}
.page-context{margin:5px 0 0;color:var(--bb-muted);font-size:.7rem}
.mobile-menu{display:none;width:40px;height:40px;flex:0 0 40px;place-content:center;gap:4px;padding:0;border:1px solid var(--bb-border);border-radius:11px;background:var(--bb-surface);box-shadow:var(--bb-shadow-sm)}
.mobile-menu span{display:block;width:17px;height:2px;border-radius:2px;background:var(--bb-text)}
.top-actions{flex-wrap:nowrap!important;gap:8px!important}
.top-icon,.notification-button{width:40px!important;height:40px!important;min-height:40px!important;flex:0 0 40px;padding:0!important;border:1px solid var(--bb-border)!important;border-radius:12px!important;background:var(--bb-surface)!important;color:var(--bb-primary)!important;box-shadow:var(--bb-shadow-sm)!important;font-size:1rem!important;transform:none!important}
.top-icon:hover,.notification-button:hover{border-color:color-mix(in srgb,var(--bb-primary) 45%,var(--bb-border))!important;background:var(--bb-primary-soft)!important;color:var(--bb-primary-strong)!important;box-shadow:0 8px 20px color-mix(in srgb,var(--bb-primary) 16%,transparent)!important}
.top-icon:after{top:48px!important}
.notification-button i{top:-6px!important;right:-5px!important;display:grid;min-width:18px;height:18px;place-items:center;padding:0!important;border:2px solid var(--bb-bg);border-radius:999px;background:var(--bb-danger)!important;font-size:.57rem!important}
.profile-button{display:flex!important;min-width:180px;max-width:240px;min-height:46px!important;align-items:center;gap:10px;margin-left:4px;padding:3px 6px!important;border:0!important;background:transparent!important;color:var(--bb-text)!important;text-align:left!important;box-shadow:none!important;transform:none!important}
.profile-button>span:last-child{display:grid;min-width:0;gap:2px}
.profile-button b,.profile-button small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-button b{font-size:.76rem}.profile-button small{margin:0;font-size:.64rem}
.profile-avatar{display:grid;width:38px;height:38px;flex:0 0 38px;place-items:center;border:2px solid var(--bb-surface);border-radius:12px;background:linear-gradient(145deg,var(--bb-primary),#72a1ff);box-shadow:0 0 0 1px var(--bb-border),var(--bb-shadow-sm)}
.profile-avatar:after{content:"";width:16px;height:16px;border-radius:50% 50% 42% 42%;background:linear-gradient(#fff 0 38%,transparent 39%),radial-gradient(circle at 50% 73%,#fff 0 45%,transparent 46%)}
.profile-avatar.has-initials{color:#fff;font-size:.68rem;font-weight:900;letter-spacing:.03em}
.profile-avatar.has-initials:after{display:none}
.notification-panel{top:84px!important;right:34px!important;width:min(360px,calc(100vw - 28px))!important;padding:18px!important;border:1px solid var(--bb-border)!important;border-radius:16px!important;background:var(--bb-surface)!important;box-shadow:var(--bb-shadow-lg)!important}
.notification-panel>b{display:block;margin-bottom:8px;font-size:.86rem}
.notification-panel p{padding:11px 3px!important;border-color:var(--bb-border)!important;color:var(--bb-muted);transition:background .15s,color .15s}
.notification-panel p:hover{color:var(--bb-primary)}

/* Contenido y componentes */
#content{width:100%;max-width:1580px;margin:0 auto;gap:22px!important;animation:bb-page-in .22s ease both}
#content.bb-page-changing{opacity:.4;transform:translateY(4px)}
@keyframes bb-page-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.module-hero{min-height:164px;padding:30px 34px!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:var(--bb-radius-lg)!important;background:
  radial-gradient(circle at 92% 10%,rgba(255,255,255,.15),transparent 26%),
  linear-gradient(125deg,#165b82 0%,#2b8fbd 54%,#53a9cf 100%)!important;box-shadow:0 18px 42px rgba(25,91,126,.19)!important}
.module-hero:before{content:"";position:absolute;right:58px;bottom:-95px;width:190px;height:190px;border:1px solid rgba(255,255,255,.1);border-radius:50%;pointer-events:none}
.module-hero:after{right:-65px!important;top:-98px!important;width:235px!important;height:235px!important;background:rgba(255,255,255,.09)!important}
.module-hero h2{max-width:860px;margin:4px 0 10px!important;color:#fff!important;font-size:clamp(1.55rem,2.3vw,2.15rem)!important;line-height:1.15;letter-spacing:-.04em!important}
.module-hero p{max-width:760px!important;color:#dbe8ff!important;font-size:.83rem!important;line-height:1.7!important}
.module-hero .eyebrow{color:#b9d0ff!important}
.module-hero>button{z-index:2;min-height:42px!important;padding:9px 14px!important;border:1px solid rgba(255,255,255,.85)!important;border-radius:11px!important;background:#fff!important;color:#174ba9!important;box-shadow:0 10px 24px rgba(3,15,45,.2)!important}
.card,.hr-welcome,.hr-metrics article,.hr-process-grid article,.employee-profile,.profile-onboarding,.profile-medical,.profile-assets,.ssoma-training,.request-item,.project-location,.inline-contract-form,.edit-contract-form{border:1px solid var(--bb-border)!important;border-radius:var(--bb-radius)!important;background:var(--bb-surface)!important;box-shadow:var(--bb-shadow-sm)!important}
.card{padding:22px!important}
.card:hover{border-color:var(--bb-border-strong)!important;box-shadow:var(--bb-shadow)!important}
.card h2,.card h3{letter-spacing:-.018em}
.card h3{font-size:1rem}
.card p{font-size:.78rem!important;line-height:1.58}
.metrics{grid-template-columns:repeat(4,minmax(190px,1fr))!important;gap:15px!important}
.metrics>.card{position:relative;min-height:138px;overflow:hidden;padding:20px!important}
.metrics>.card:before{content:"";position:absolute;left:0;top:18px;width:3px;height:40px;border-radius:0 4px 4px 0;background:var(--bb-primary)}
.metrics>.card>p{color:var(--bb-muted);font-size:.7rem!important;font-weight:700}
.metrics>.card>h2{margin:13px 0 7px;color:var(--bb-text);font-size:clamp(1.35rem,2vw,1.85rem);font-variant-numeric:tabular-nums}
.grid{gap:18px!important}
.panel-title{align-items:flex-start!important;margin-bottom:17px!important}
.panel-title h3{font-size:1rem!important}
.panel-title p{margin-top:5px!important}
.tag{margin-top:0!important;padding:6px 10px!important;border-radius:999px!important;font-size:.62rem!important;letter-spacing:.02em}
.compact-list{overflow:hidden;border:1px solid var(--bb-border)!important;border-radius:12px!important;background:var(--bb-surface-soft)}
.compact-list>p,.compact-list>.project-row,.compact-list>.organization-record{margin:0!important;padding:13px 14px!important;border-bottom:1px solid var(--bb-border)!important}
.compact-list>:last-child{border-bottom:0!important}
.project-row{gap:12px;border-color:var(--bb-border)!important}
.project-row:hover{background:var(--bb-primary-soft)}

input,select,textarea{min-height:44px!important;padding:10px 12px!important;border:1px solid var(--bb-border-strong)!important;border-radius:10px!important;background:var(--bb-surface-soft)!important;color:var(--bb-text)!important;font-size:.82rem!important}
textarea{min-height:104px!important}
label{margin-top:15px;color:var(--bb-text);font-size:.72rem!important;letter-spacing:.005em}
input:focus,select:focus,textarea:focus{border-color:var(--bb-primary)!important;background:var(--bb-surface)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--bb-primary) 18%,transparent)!important}
button,.button-link{border-radius:10px!important;font-weight:750!important}
button:not(.top-icon):not(.notification-button):not(.profile-button):not(.mobile-menu):not(.sidebar-collapse):not(.logout):not(.area-kpi-card):not(.area-dashboard-group-metric):not(.area-alert){min-height:38px;padding:8px 13px;background:var(--bb-primary);font-size:.73rem;box-shadow:0 5px 14px color-mix(in srgb,var(--bb-primary) 16%,transparent)}
button.secondary,a.button-link.secondary{background:var(--bb-surface-soft)!important;color:var(--bb-text)!important;border:1px solid var(--bb-border-strong)!important}

/* Calendario: los días no heredan el botón primario del sistema. */
#pending-calendar,#worker-pending-calendar{overflow:hidden}
.calendar-board-head{display:grid;grid-template-columns:auto minmax(180px,1fr) auto;align-items:center;gap:14px;margin-bottom:14px}
.calendar-board-head>div{text-align:center}.calendar-board-head>div>span{display:block;margin-bottom:3px;color:var(--bb-muted);font-size:.58rem;font-weight:850;letter-spacing:.1em}.calendar-board-head h3{margin:0;font-size:1.08rem;text-transform:capitalize}
.calendar-board-head>button{width:auto!important;margin:0!important;white-space:nowrap;box-shadow:none!important}
.calendar-scroll{overflow-x:auto;padding-bottom:4px}.calendar-weekdays,.calendar-grid{min-width:700px}.calendar-weekdays{margin:0 0 7px!important}.calendar-weekdays span{padding:5px;color:var(--bb-muted)!important;font-size:.66rem!important;text-transform:uppercase}
#pending-calendar .calendar-day,#worker-pending-calendar .calendar-day{position:relative;display:flex!important;min-width:0!important;min-height:102px!important;flex-direction:column;align-items:stretch!important;justify-content:flex-start!important;gap:7px!important;margin:0!important;padding:10px!important;border:1px solid var(--bb-border)!important;border-radius:12px!important;background:var(--bb-surface-soft)!important;color:var(--bb-text)!important;text-align:left!important;box-shadow:none!important;transform:none!important}
#pending-calendar .calendar-day:hover,#worker-pending-calendar .calendar-day:hover{border-color:var(--bb-primary)!important;background:var(--bb-primary-soft)!important}
#pending-calendar .calendar-day.has-events,#worker-pending-calendar .calendar-day.has-events{border-color:color-mix(in srgb,var(--bb-primary) 42%,var(--bb-border))!important;background:color-mix(in srgb,var(--bb-primary) 9%,var(--bb-surface))!important}
#pending-calendar .calendar-day.selected,#worker-pending-calendar .calendar-day.selected{border-color:var(--bb-primary)!important;background:color-mix(in srgb,var(--bb-primary) 17%,var(--bb-surface))!important;box-shadow:inset 0 0 0 2px var(--bb-primary)!important}
#pending-calendar .calendar-day.overdue,#worker-pending-calendar .calendar-day.overdue{border-color:color-mix(in srgb,var(--bb-danger) 48%,var(--bb-border))!important;background:color-mix(in srgb,var(--bb-danger) 11%,var(--bb-surface))!important}
.calendar-day-number{display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:.88rem;font-weight:900}.calendar-day-number em{padding:3px 5px;border-radius:999px;background:var(--bb-primary);color:#fff;font-size:.48rem;font-style:normal;letter-spacing:.04em}
.calendar-day-count{color:var(--bb-text);font-size:.68rem;font-weight:900}.calendar-day-types{display:flex;align-items:center;gap:5px;color:var(--bb-muted);font-size:.58rem;font-weight:800;line-height:1.25;text-transform:uppercase}.calendar-day-types>i,.calendar-event-kind>i{display:inline-block;width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--bb-primary)}.calendar-day-free{margin-top:auto;color:color-mix(in srgb,var(--bb-muted) 75%,transparent);font-size:.58rem}
.calendar-day[data-calendar-type="PAGO"] .calendar-day-types>i,.calendar-event-row[data-calendar-type="PAGO"] .calendar-event-kind>i,.calendar-day[data-calendar-type="SUNAT"] .calendar-day-types>i,.calendar-event-row[data-calendar-type="SUNAT"] .calendar-event-kind>i{background:var(--bb-warning)}
.calendar-day[data-calendar-type="CONTRATO"] .calendar-day-types>i,.calendar-event-row[data-calendar-type="CONTRATO"] .calendar-event-kind>i,.calendar-day[data-calendar-type="EMO"] .calendar-day-types>i,.calendar-event-row[data-calendar-type="EMO"] .calendar-event-kind>i,.calendar-day[data-calendar-type="SCTR"] .calendar-day-types>i,.calendar-event-row[data-calendar-type="SCTR"] .calendar-event-kind>i{background:#8d67d8}
.calendar-day[data-calendar-type="COBRANZA"] .calendar-day-types>i,.calendar-event-row[data-calendar-type="COBRANZA"] .calendar-event-kind>i{background:var(--bb-accent)}
.calendar-day.overdue .calendar-day-types>i,.calendar-event-row.overdue .calendar-event-kind>i{background:var(--bb-danger)}
.calendar-legend{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:13px;border-top:1px solid var(--bb-border);color:var(--bb-muted);font-size:.68rem}.calendar-legend>b{color:var(--bb-text)}.calendar-legend>span{display:inline-flex;align-items:center;gap:5px}.calendar-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--bb-primary)}.calendar-legend i.today{box-shadow:0 0 0 2px color-mix(in srgb,var(--bb-primary) 30%,transparent)}.calendar-legend i.overdue{background:var(--bb-danger)}.calendar-legend small{margin-left:auto;color:var(--bb-muted)}
#calendar-event-list,#worker-calendar-events{display:grid;gap:10px}.calendar-event-row{display:grid!important;grid-template-columns:110px minmax(220px,1fr) auto auto!important;align-items:center!important;gap:14px!important;padding:14px!important;border:1px solid var(--bb-border)!important;border-radius:13px!important;background:var(--bb-surface-soft)!important}.calendar-event-kind{display:flex;align-items:center;gap:7px;color:var(--bb-primary);font-size:.67rem;font-weight:900;letter-spacing:.04em}.calendar-event-copy{display:grid;gap:4px;min-width:0}.calendar-event-copy b{font-size:.8rem}.calendar-event-copy small{color:var(--bb-muted);font-size:.66rem}.calendar-event-row .tag,.calendar-event-row .row-actions,.calendar-event-row button{margin:0!important}.calendar-event-row button{width:auto!important;white-space:nowrap}.calendar-empty-day{padding:28px;border:1px dashed var(--bb-border-strong);border-radius:13px;text-align:center}.calendar-empty-day p{margin:6px 0 0;color:var(--bb-muted)}
@media(max-width:800px){.calendar-weekdays,.calendar-grid{min-width:0}.calendar-day-free{display:none}#pending-calendar .calendar-day,#worker-pending-calendar .calendar-day{min-height:96px!important;padding:8px!important}.calendar-event-row{grid-template-columns:1fr auto!important}.calendar-event-copy{grid-column:1/-1;grid-row:2}.calendar-event-row .row-actions{justify-self:end}.calendar-legend small{width:100%;margin-left:0}}
@media(max-width:560px){.calendar-board-head{grid-template-columns:1fr 1fr}.calendar-board-head>div{grid-column:1/-1;grid-row:1}.calendar-board-head>button:first-child{justify-self:start}.calendar-board-head>button:last-child{justify-self:end}.calendar-weekdays,.calendar-grid{min-width:630px}.calendar-event-row{grid-template-columns:1fr!important}.calendar-event-copy{grid-column:auto;grid-row:auto}.calendar-event-row .row-actions{justify-self:stretch}.calendar-event-row button{width:100%!important}}
.row-actions{gap:9px!important;margin-top:16px!important}

.area-dashboard-kpis{grid-template-columns:repeat(4,minmax(190px,1fr))!important;gap:15px!important}
.area-dashboard-kpis.executive-kpi-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important}
.area-kpi-card{min-height:156px!important;padding:20px!important;border:1px solid var(--bb-border)!important;border-left:0!important;border-radius:var(--bb-radius)!important;background:var(--bb-surface)!important;box-shadow:var(--bb-shadow-sm)!important}
.area-kpi-card:before{content:"";position:absolute;left:0;top:20px;width:4px;height:38px;border-radius:0 5px 5px 0;background:var(--bb-primary)}
.area-kpi-card.positive:before{background:var(--bb-accent)}.area-kpi-card.warning:before{background:var(--bb-warning)}.area-kpi-card.danger:before{background:var(--bb-danger)}
.area-kpi-card:after{width:92px!important;height:92px!important;right:-32px!important;top:-34px!important}
.area-kpi-card>span{font-size:.65rem!important;letter-spacing:.055em!important}
.area-kpi-card>strong{margin:14px 0 7px!important;font-size:clamp(1.45rem,2vw,1.95rem)!important}
.area-dashboard-chart{padding:24px!important}
.dynamic-donut{max-width:210px;box-shadow:0 14px 34px color-mix(in srgb,var(--bb-primary) 14%,transparent)!important}
.dynamic-donut-legend-row{border-color:var(--bb-border)!important;background:var(--bb-surface-soft)!important}
.area-chart-track,.kpi-track{height:9px!important;background:var(--bb-bg-deep)!important}

table{border-collapse:separate;border-spacing:0;width:100%;font-size:.76rem}
.bb-responsive-table{max-width:100%;overflow:auto;border:1px solid var(--bb-border);border-radius:12px;scrollbar-width:thin;scrollbar-color:var(--bb-border-strong) transparent}
.bb-responsive-table table{min-width:680px}
th{padding:11px 14px;background:var(--bb-surface-soft);color:var(--bb-muted);font-size:.64rem;letter-spacing:.055em;text-align:left;text-transform:uppercase}
td{padding:12px 14px;border-top:1px solid var(--bb-border);color:var(--bb-text)}
tbody tr{transition:background .15s ease}tbody tr:hover{background:var(--bb-primary-soft)}

/* Menú contraído en escritorio */
body.bb-sidebar-collapsed{--bb-sidebar-width:84px}
body.bb-sidebar-collapsed .sidebar-brand{justify-content:center;padding-inline:4px}
body.bb-sidebar-collapsed .sidebar-brand .sidebar-logo{width:52px;flex-basis:52px}
body.bb-sidebar-collapsed .sidebar-brand>div,body.bb-sidebar-collapsed .company,body.bb-sidebar-collapsed .sidebar-group>summary{font-size:0!important}
body.bb-sidebar-collapsed .sidebar-group>summary{justify-content:center;padding:8px!important}
body.bb-sidebar-collapsed .nav-item{justify-content:center;font-size:0!important;padding:8px!important}
body.bb-sidebar-collapsed .nav-item:before,body.bb-sidebar-collapsed .sidebar-group>summary:before{width:32px;height:32px;flex-basis:32px;font-size:.85rem}
body.bb-sidebar-collapsed .sidebar-group>summary:after{display:none}
body.bb-sidebar-collapsed .sidebar-group>div{display:none}
body.bb-sidebar-collapsed .sidebar-footer{grid-template-columns:1fr}
body.bb-sidebar-collapsed .logout b{display:none}
body.bb-sidebar-collapsed .sidebar-collapse{transform:rotate(180deg)!important}

.sidebar-scrim{position:fixed;inset:0;z-index:39;width:100%;height:100%;padding:0!important;border:0!important;border-radius:0!important;background:rgba(3,10,24,.58)!important;box-shadow:none!important;backdrop-filter:blur(2px)}

@media(max-width:1240px){
  :root{--bb-sidebar-width:260px}
  .app-view>main{padding-inline:27px}
  .area-dashboard-kpis,.metrics{grid-template-columns:repeat(2,minmax(190px,1fr))!important}
  .profile-button{min-width:46px;max-width:46px}.profile-button>span:last-child{display:none}
}

@media(max-width:900px){
  :root{--bb-sidebar-width:286px}
  body.bb-sidebar-collapsed{--bb-sidebar-width:286px}
  .app-view>aside,body.bb-sidebar-collapsed .app-view>aside{width:var(--bb-sidebar-width);padding:0 14px 14px;transform:translateX(-105%)}
  body.bb-mobile-nav-open .app-view>aside{z-index:40;transform:translateX(0);box-shadow:20px 0 60px rgba(2,9,22,.35)}
  body.bb-sidebar-collapsed .sidebar-brand{justify-content:flex-start;padding:16px 10px 12px}
  body.bb-sidebar-collapsed .sidebar-brand>div{display:grid}
  body.bb-sidebar-collapsed .company{display:block;font-size:.61rem!important}
  body.bb-sidebar-collapsed .nav-item,body.bb-sidebar-collapsed .sidebar-group>summary{justify-content:flex-start;font-size:.79rem!important;padding:10px 12px!important}
  body.bb-sidebar-collapsed .sidebar-group>summary:after{display:block}
  body.bb-sidebar-collapsed .sidebar-group>div{display:grid}
  body.bb-sidebar-collapsed .logout b{display:inline}
  .sidebar-collapse{display:none}
  .app-view>main,body.bb-sidebar-collapsed .app-view>main{width:100%;margin-left:0;padding:0 22px 40px}
  .mobile-menu{display:grid}
  .app-view main>header{margin-bottom:22px}
  #page-title{max-width:48vw}
  .top-actions{gap:6px!important}
  .top-icon,.notification-button{width:38px!important;height:38px!important;min-height:38px!important;flex-basis:38px}
}

@media(max-width:680px){
  .login-view{padding:14px}
  .login-shell{grid-template-columns:1fr;min-height:0;border-radius:23px}
  .login-showcase{display:none}
  .login-card{padding:38px 25px;border-radius:23px}
  .login-logo{height:80px;margin-bottom:20px}
  .app-view>main{padding-inline:14px}
  .app-view main>header{min-height:82px;align-items:flex-start;gap:12px;margin-inline:0;padding:12px 0}
  .header-title{width:100%}
  .header-title .page-context{display:none}
  #page-title{max-width:calc(100vw - 105px);font-size:1.3rem}
  .top-actions{width:auto!important;flex:0 0 auto;justify-content:flex-end!important}
  .top-actions .top-icon{display:none!important}
  .top-actions #calendar-button{display:grid!important}
  .profile-button{display:none!important}
  .notification-panel{top:72px!important;right:14px!important}
  #content{gap:16px!important}
  .module-hero{min-height:144px;padding:24px 20px!important;border-radius:19px!important}
  .module-hero h2{font-size:1.48rem!important}
  .area-dashboard-kpis,.metrics{grid-template-columns:1fr!important;gap:12px!important}
  .area-kpi-card{min-height:138px!important}
  .grid{grid-template-columns:1fr!important}
  .card{padding:18px!important;border-radius:14px!important}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* --------------------------------------------------------------------------
   Patrones internos compartidos por todos los dominios
   -------------------------------------------------------------------------- */

/* Pestañas: una sola gramática visual, desplazable en pantallas estrechas. */
:where(
  [class$="-tabs"],[class*="-tabs "],.hr-tabs,.accounting-tabs,.supplier-tabs,
  .inventory-tabs,.commercial-tabs,.project-cost-tabs,.schedule-tabs,.sctr-tabs,
  .people-workspace-tabs,.expense-tabs,.patrimonial-tabs,.field-type-tabs,.incident-tabs,
  .training-tabs,.commercial-detail-tabs
){
  display:flex!important;
  width:100%;
  min-width:0;
  align-items:center!important;
  gap:6px!important;
  margin:0!important;
  padding:6px!important;
  overflow-x:auto;
  border:1px solid var(--bb-border)!important;
  border-radius:14px!important;
  background:color-mix(in srgb,var(--bb-surface) 82%,var(--bb-bg) 18%)!important;
  box-shadow:none!important;
  scrollbar-width:thin;
}
:where(
  [class$="-tabs"],[class*="-tabs "],.hr-tabs,.accounting-tabs,.supplier-tabs,
  .inventory-tabs,.commercial-tabs,.project-cost-tabs,.schedule-tabs,.sctr-tabs,
  .people-workspace-tabs,.expense-tabs,.patrimonial-tabs,.field-type-tabs,.incident-tabs,
  .training-tabs,.commercial-detail-tabs
) > :where(button,a){
  width:auto!important;
  min-width:max-content!important;
  min-height:36px!important;
  flex:0 0 auto!important;
  margin:0!important;
  padding:8px 12px!important;
  border:1px solid transparent!important;
  border-radius:9px!important;
  background:transparent!important;
  color:var(--bb-muted)!important;
  box-shadow:none!important;
  font-size:.7rem!important;
  font-weight:800!important;
  text-decoration:none;
  transform:none!important;
}
:where(
  [class$="-tabs"],[class*="-tabs "],.hr-tabs,.accounting-tabs,.supplier-tabs,
  .inventory-tabs,.commercial-tabs,.project-cost-tabs,.schedule-tabs,.sctr-tabs,
  .people-workspace-tabs,.expense-tabs,.patrimonial-tabs,.field-type-tabs,.incident-tabs,
  .training-tabs,.commercial-detail-tabs
) > :where(button,a):hover{
  background:var(--bb-surface)!important;
  color:var(--bb-text)!important;
}
:where(
  [class$="-tabs"],[class*="-tabs "],.hr-tabs,.accounting-tabs,.supplier-tabs,
  .inventory-tabs,.commercial-tabs,.project-cost-tabs,.schedule-tabs,.sctr-tabs,
  .people-workspace-tabs,.expense-tabs,.patrimonial-tabs,.field-type-tabs,.incident-tabs,
  .training-tabs,.commercial-detail-tabs
) > :where(.active,[aria-selected="true"]){
  border-color:color-mix(in srgb,var(--bb-primary) 18%,var(--bb-border))!important;
  background:var(--bb-surface)!important;
  color:var(--bb-primary-strong)!important;
  box-shadow:0 4px 12px color-mix(in srgb,var(--bb-primary) 11%,transparent)!important;
}

/* Filtros: etiquetas alineadas y anchuras útiles, sin columnas comprimidas. */
:where(
  [class$="-filters"],[class*="-filters "],.filters,.attendance-admin-filters,
  .historical-library-filters,.historical-active-filters,.area-library-filters,
  .ssoma-dashboard-filters,.training-filters,.bank-filters,.human-directory-filters,
  .cbw-collection-filters
){
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))!important;
  align-items:end!important;
  gap:12px!important;
  min-width:0;
  margin:0!important;
  padding:16px!important;
  border:1px solid var(--bb-border)!important;
  border-radius:14px!important;
  background:var(--bb-surface-soft)!important;
}
:where([class$="-filters"],[class*="-filters "],.filters) > :where(label,div){min-width:0;margin:0!important}
:where([class$="-filters"],[class*="-filters "],.filters) :where(input,select){width:100%;margin-top:7px}
:where([class$="-filters"],[class*="-filters "],.filters) > button{width:auto!important;align-self:end;margin:0!important}

/* Barras de herramientas: acciones juntas, sin bloques desalineados. */
:where(
  [class$="-toolbar"],[class*="-toolbar "],.loan-toolbar,.location-map-toolbar,
  .hr-payroll-toolbar,.hr-payslip-toolbar,.training-toolbar,.catalog-toolbar,
  .sgi-audit-toolbar,.fifth-toolbar,.incident-toolbar,.field-control-toolbar,
  .expense-toolbar,.bank-toolbar,.sap-toolbar,.area-library-toolbar
){
  display:flex!important;
  min-width:0;
  align-items:flex-end!important;
  justify-content:flex-start!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  margin:0!important;
  padding:14px 16px!important;
  border:1px solid var(--bb-border)!important;
  border-radius:14px!important;
  background:var(--bb-surface-soft)!important;
}
:where([class$="-toolbar"],[class*="-toolbar "]) :where(label){min-width:min(180px,100%);flex:1 1 180px;margin:0!important}
:where([class$="-toolbar"],[class*="-toolbar "]) :where(button,a){width:auto!important;flex:0 0 auto;margin:0!important}

/* Formularios: secciones visibles y campos consistentes. */
#content form.bb-form{min-width:0;margin-top:18px}
#content form.bb-form > :where(.grid,.item-grid,[class$="-grid"],[class*="-grid "]){gap:12px 16px!important}
#content form.bb-form fieldset{min-width:0;margin:18px 0 0;padding:17px;border:1px solid var(--bb-border);border-radius:14px;background:var(--bb-surface-soft)}
#content form.bb-form legend{padding:0 8px;color:var(--bb-text);font-size:.75rem;font-weight:850}
#content form.bb-form > h3:not(:first-child){margin:24px 0 4px;padding-top:20px;border-top:1px solid var(--bb-border)}
#content form.bb-form small{color:var(--bb-muted);line-height:1.45}
#content input[type="file"]{padding:8px!important;border-style:dashed!important;background:color-mix(in srgb,var(--bb-primary) 4%,var(--bb-surface))!important}
#content input[type="checkbox"],#content input[type="radio"]{width:17px!important;height:17px!important;min-height:17px!important;accent-color:var(--bb-primary)}

/* Encabezados internos y separación de secciones. */
.bb-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--bb-border)}
.bb-card-heading > :where(h2,h3){margin:0!important}
.bb-card-heading > p{margin:5px 0 0!important}
.card > :where(h2,h3):first-child{margin-top:0}
.card > :where(h2,h3):first-child + p{margin-top:6px!important}

/* Estados de carga, vacíos y errores con significado visual. */
:where(.empty-state,.area-empty-state,.mail-empty,.loan-empty,.commercial-empty,.patrimonial-empty,.cbw-empty,.attendance-summary-empty,.bb-empty-state){
  display:grid!important;
  min-height:150px;
  place-content:center;
  justify-items:center;
  gap:7px;
  margin:0!important;
  padding:26px!important;
  border:1px dashed var(--bb-border-strong)!important;
  border-radius:14px!important;
  background:color-mix(in srgb,var(--bb-surface-soft) 88%,transparent)!important;
  color:var(--bb-muted)!important;
  text-align:center!important;
}
:where(.empty-state,.area-empty-state,.mail-empty,.loan-empty,.commercial-empty,.patrimonial-empty,.cbw-empty,.attendance-summary-empty,.bb-empty-state):before{
  content:"";
  width:34px;
  height:34px;
  border:1px solid color-mix(in srgb,var(--bb-primary) 24%,var(--bb-border));
  border-radius:11px;
  background:linear-gradient(145deg,var(--bb-primary-soft),var(--bb-surface));
  box-shadow:inset 0 0 0 8px var(--bb-surface),inset 0 0 0 9px color-mix(in srgb,var(--bb-primary) 22%,var(--bb-border));
}
:where(.empty-state,.area-empty-state,.mail-empty,.loan-empty,.commercial-empty,.patrimonial-empty,.cbw-empty,.attendance-summary-empty,.bb-empty-state) :where(h2,h3,h4,b,strong){color:var(--bb-text)!important}
:where(.empty-state,.area-empty-state,.mail-empty,.loan-empty,.commercial-empty,.patrimonial-empty,.cbw-empty,.attendance-summary-empty,.bb-empty-state) p{max-width:520px;margin:0!important;color:var(--bb-muted)!important}
.bb-loading-copy{display:flex!important;min-height:150px;align-items:center;justify-content:center;gap:12px;margin:0!important;padding:25px;color:var(--bb-muted)!important}
.bb-loading-copy:before{content:"";width:20px;height:20px;flex:0 0 20px;border:3px solid var(--bb-border);border-top-color:var(--bb-primary);border-radius:50%;animation:bb-spin .75s linear infinite}
@keyframes bb-spin{to{transform:rotate(360deg)}}

/* Estados de negocio compartidos. */
.bb-status{display:inline-flex!important;width:max-content!important;max-width:100%;align-items:center;gap:6px;padding:5px 9px!important;border:1px solid var(--bb-border);border-radius:999px!important;background:var(--bb-surface-soft);color:var(--bb-muted);font-size:.62rem!important;font-weight:850!important;line-height:1.2;letter-spacing:.025em;text-transform:uppercase}
.bb-status:before{content:"";width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:currentColor}
.bb-tone-success{border-color:color-mix(in srgb,var(--bb-accent) 36%,var(--bb-border))!important;background:color-mix(in srgb,var(--bb-accent) 10%,var(--bb-surface))!important;color:color-mix(in srgb,var(--bb-accent) 82%,var(--bb-text))!important}
.bb-tone-warning{border-color:color-mix(in srgb,var(--bb-warning) 38%,var(--bb-border))!important;background:color-mix(in srgb,var(--bb-warning) 11%,var(--bb-surface))!important;color:color-mix(in srgb,var(--bb-warning) 84%,var(--bb-text))!important}
.bb-tone-danger{border-color:color-mix(in srgb,var(--bb-danger) 38%,var(--bb-border))!important;background:color-mix(in srgb,var(--bb-danger) 10%,var(--bb-surface))!important;color:color-mix(in srgb,var(--bb-danger) 84%,var(--bb-text))!important}
.bb-tone-info{border-color:color-mix(in srgb,var(--bb-primary) 34%,var(--bb-border))!important;background:var(--bb-primary-soft)!important;color:var(--bb-primary-strong)!important}
.bb-tone-neutral{color:var(--bb-muted)!important}

/* Ventanas modales con cabecera y acciones visibles. */
dialog{width:min(880px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:22px!important;border:1px solid var(--bb-border)!important;border-radius:20px!important;background:var(--bb-surface)!important;color:var(--bb-text)!important;box-shadow:var(--bb-shadow-lg)!important}
dialog::backdrop{background:rgba(3,10,24,.62);backdrop-filter:blur(4px)}
dialog :where(.dialog-heading,.modal-heading){position:sticky;top:-22px;z-index:2;margin:-22px -22px 18px!important;padding:18px 22px!important;border-bottom:1px solid var(--bb-border);background:color-mix(in srgb,var(--bb-surface) 94%,transparent);backdrop-filter:blur(15px)}
dialog :where(.dialog-actions,.modal-actions){position:sticky;bottom:-22px;z-index:2;margin:20px -22px -22px!important;padding:14px 22px!important;border-top:1px solid var(--bb-border);background:color-mix(in srgb,var(--bb-surface) 94%,transparent);backdrop-filter:blur(15px)}

/* Maestros y detalles: filas respirables y selección visible. */
:where([class$="-workspace"],[class*="-workspace "]){min-width:0}
:where(.employee-master-card,.sgi-program-card,.loan-record,.commercial-record,details.card)>summary{outline-offset:-2px}
:where(.employee-master-card,.sgi-program-card,.loan-record,.commercial-record,details.card)[open]{border-color:color-mix(in srgb,var(--bb-primary) 42%,var(--bb-border))!important;box-shadow:var(--bb-shadow)!important}

/* Vista previa de navegación por rol. */
.role-experience-preview{display:grid;gap:18px;margin:0 0 24px;padding:20px;border:1px solid color-mix(in srgb,var(--bb-primary) 28%,var(--bb-border));border-radius:18px;background:linear-gradient(145deg,var(--bb-primary-soft),var(--bb-surface) 44%)}
.role-experience-preview .panel-title{margin:0!important;padding-bottom:14px;border-bottom:1px solid var(--bb-border)}
.role-preview-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.role-preview-metrics article{display:grid;align-content:start;gap:3px;min-width:0;padding:14px;border:1px solid var(--bb-border);border-radius:13px;background:var(--bb-surface)}
.role-preview-metrics b{overflow:hidden;color:var(--bb-primary-strong);font-size:1.15rem;text-overflow:ellipsis;white-space:nowrap}
.role-preview-metrics span{color:var(--bb-muted);font-size:.72rem;font-weight:750}
.role-preview-areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:11px}
.role-preview-areas article{min-width:0;padding:15px;border:1px solid var(--bb-border);border-radius:14px;background:var(--bb-surface)}
.role-preview-areas h4{margin:0 0 9px;color:var(--bb-text);font-size:.86rem}
.role-preview-areas ul{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.role-preview-areas li{position:relative;padding-left:13px;color:var(--bb-muted);font-size:.74rem;line-height:1.35}
.role-preview-areas li:before{content:"";position:absolute;top:.52em;left:0;width:5px;height:5px;border-radius:50%;background:var(--bb-primary)}
.role-preview-areas p{margin:0!important;color:var(--bb-muted)!important;font-size:.74rem}
.role-admin-note{padding:16px;border:1px solid color-mix(in srgb,var(--bb-accent) 32%,var(--bb-border));border-radius:14px;background:color-mix(in srgb,var(--bb-accent) 8%,var(--bb-surface))}
.role-admin-note p{margin:5px 0 0!important;color:var(--bb-muted)!important}
.role-permission-heading{margin-top:24px!important;padding-top:20px;border-top:1px solid var(--bb-border)}

@media(max-width:760px){
  .role-preview-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  :where([class$="-filters"],[class*="-filters "],.filters){grid-template-columns:1fr!important;padding:13px!important}
  :where([class$="-toolbar"],[class*="-toolbar "]){align-items:stretch!important;padding:12px!important}
  :where([class$="-toolbar"],[class*="-toolbar "]) :where(label,button,a){width:100%!important;flex:1 1 100%!important}
  dialog{width:calc(100vw - 18px);max-height:calc(100dvh - 18px);padding:17px!important;border-radius:16px!important}
  dialog :where(.dialog-heading,.modal-heading){top:-17px;margin:-17px -17px 16px!important;padding:15px 17px!important}
  dialog :where(.dialog-actions,.modal-actions){bottom:-17px;margin:18px -17px -17px!important;padding:13px 17px!important}
}