html.auth-pending body{visibility:hidden}
:root{
  --bg:#EDF1F0;
  --sidebar:#151A1C;
  --sidebar-soft:#1D2326;
  --card:#FFFFFF;
  --ink:#17212B;
  --muted:#6A7683;
  --border:#DDE4E9;
  --line:#E8EDF1;
  --accent:#11B25C;
  --accent-soft:#E8F8EF;
  --teal:#0F8F7A;
  --amber:#F0A83A;
  --amber-soft:#FFF4E6;
  --coral:#E65A4E;
  --coral-soft:#FFEDEB;
  --blue:#3F67FF;
  --radius:16px;
  --shadow:0 10px 30px rgba(19,33,43,.07);
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink)}
.app{display:flex;min-height:100vh}
.sidebar{width:258px;flex:0 0 258px;height:100vh;height:100dvh;align-self:flex-start;background:linear-gradient(180deg,var(--sidebar),#1F2528);color:#fff;display:flex;flex-direction:column;position:sticky;top:0;overflow:hidden;transition:width .25s ease,flex-basis .25s ease}
.sidebar.hidden{width:0;flex-basis:0}
.brand{display:flex;align-items:center;flex:0 0 auto;padding:25px 24px;border-bottom:1px solid rgba(255,255,255,.08);min-width:258px}
.brand strong{font-size:28px;letter-spacing:.09em}
.nav{padding:18px 12px;display:flex;flex-direction:column;gap:8px;flex:1;min-width:258px;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable}
.nav.permissions-pending{visibility:hidden}
.nav::-webkit-scrollbar{width:6px}
.nav::-webkit-scrollbar-track{background:transparent}
.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:999px}
.nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.24)}
.nav-group-trigger,.nav-subitem{display:flex;align-items:center;border-radius:12px;text-decoration:none}
.nav-group-trigger{padding:12px 14px;color:rgba(255,255,255,.92);font-size:13px;font-weight:800;cursor:pointer;border:1px solid transparent;background:none;width:100%;text-align:left}
.nav-group-trigger:hover,.nav-subitem:hover{background:rgba(255,255,255,.05)}
.nav-group{display:flex;flex-direction:column;gap:7px}
.nav-group.open .nav-sub{display:flex}
.nav-sub{display:none;flex-direction:column;gap:6px;padding-left:10px}
.nav-subitem{padding:11px 14px;color:rgba(255,255,255,.74);font-size:12px;font-weight:750}
.nav-subitem.active,.nav-group-trigger.active{background:rgba(17,178,92,.16);border:1px solid rgba(17,178,92,.36);color:#fff}
.sidebar-footer{flex:0 0 auto;padding:18px 18px 24px;border-top:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.6);font-size:11px;font-weight:700;letter-spacing:.03em;min-width:258px}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{background:linear-gradient(90deg,#202628,#2B3032);color:#fff;padding:18px 26px;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.top-left{display:flex;align-items:center;gap:14px;min-width:0}
.sidebar-toggle{height:38px;min-width:44px;padding:0 10px;border-radius:10px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);color:#fff;font-size:16px;font-weight:900;letter-spacing:-.06em;cursor:pointer;transition:background .2s ease,border-color .2s ease}
.sidebar-toggle:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.42)}
.top-title h1{font-size:30px;line-height:1;margin:0;font-weight:900;letter-spacing:-.02em}
.top-title .eyebrow{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#FF5C33;margin-bottom:6px}
.top-meta{display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.meta-chip{font-size:12px;font-weight:700;color:#D6E0E5}
.meta-chip b{color:#fff}
.content{padding:22px}
.surface{background:#F7FAF9;border:1px solid #D8E1E4;border-radius:22px;padding:18px;box-shadow:var(--shadow)}
.filters-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr auto;gap:12px;align-items:end;margin-bottom:16px}

.rrhh-segment-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:0 0 12px;
  padding:9px 10px 9px 14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--card);
  box-shadow:0 3px 12px rgba(25,35,40,.035);
}

.rrhh-segment-copy{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:190px;
}

.rrhh-segment-copy span{
  color:var(--muted);
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.rrhh-segment-copy strong{
  color:var(--ink);
  font-size:12px;
  font-weight:850;
}

.rrhh-segment-tabs{
  display:grid;
  grid-template-columns:repeat(3,minmax(118px,1fr));
  gap:5px;
  min-width:min(100%,410px);
  padding:4px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#F2F5F7;
}

.rrhh-segment-tab{
  min-height:34px;
  padding:0 14px;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  letter-spacing:.035em;
  cursor:pointer;
  transition:
    color .16s ease,
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}

.rrhh-segment-tab:hover{
  color:var(--ink);
  background:rgba(255,255,255,.62);
}

.rrhh-segment-tab.active{
  color:#FF5C33;
  border-color:rgba(255,92,51,.22);
  background:var(--card);
  box-shadow:0 4px 12px rgba(25,35,40,.08);
}

.rrhh-segment-tab:focus-visible{
  outline:3px solid rgba(255,92,51,.18);
  outline-offset:2px;
}
.filter-box{background:#fff;border:1px solid var(--border);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:7px;min-height:74px}
.filter-box label{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.select, .search-input{height:40px;border:1px solid var(--border);border-radius:10px;padding:0 12px;background:#F8FAFB;color:var(--ink);font-size:14px;font-weight:700;outline:none;width:100%}
.actions{display:flex;align-items:flex-end;background:#fff;border:1px solid var(--border);border-radius:14px;padding:10px 12px;min-height:74px}
.btn{height:40px;width:100%;min-width:150px;padding:0 18px;border-radius:10px;border:1px solid var(--border);background:#F8FAFB;font-weight:800;cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.ghost{background:#fff}
.summary{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:8px 0 18px;flex-wrap:wrap}
.summary h2{margin:0;font-size:16px;font-weight:800}
.summary h2 span{color:var(--accent)}
.summary-meta{font-size:12px;color:var(--muted);font-weight:700}
.notice{display:flex;justify-content:space-between;gap:14px;align-items:center;background:#fff;border:1px dashed #C7D3DA;border-radius:14px;padding:12px 14px;margin-bottom:18px;color:var(--muted);font-size:12.5px}
.notice strong{color:var(--ink)}
.notice .pill{background:var(--amber-soft);color:#A56608;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:900;white-space:nowrap}
.person-card{display:none;background:linear-gradient(135deg,#EFFCF4,#fff);border:1px solid #D5F1E0;border-radius:16px;padding:16px 18px;margin-bottom:18px;justify-content:space-between;gap:18px;align-items:center;flex-wrap:wrap}
.person-card.show{display:flex}
.person-title{font-size:19px;font-weight:900;margin:0}
.person-meta{font-size:12px;color:var(--muted);margin-top:4px}
.person-stats{display:flex;gap:16px;flex-wrap:wrap}
.person-stat{background:#fff;border:1px solid #E2ECE6;border-radius:12px;padding:10px 12px;min-width:120px}
.person-stat b{display:block;font-size:17px}
.person-stat span{font-size:10.5px;color:var(--muted);font-weight:700}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.kpi{background:#fff;border:1px solid var(--border);border-radius:18px;padding:18px 18px 16px;position:relative;min-height:132px}
.kpi:before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;border-radius:18px 0 0 18px;background:var(--blue)}
.kpi.k2:before{background:var(--coral)} .kpi.k3:before{background:var(--amber)} .kpi.k4:before{background:var(--teal)}
.kpi .label{font-size:12px;color:var(--muted);font-weight:800}
.kpi .value{font-size:36px;font-weight:900;letter-spacing:-.02em;margin-top:6px}
.kpi .delta{font-size:12px;font-weight:800;margin-top:8px}
.kpi .hint{font-size:10.5px;color:var(--muted);margin-top:5px}
.up{color:var(--accent)} .down{color:var(--coral)} .flat{color:var(--muted)}
.layout-2{display:grid;grid-template-columns:1.35fr 1fr;gap:16px}
.section{background:#fff;border:1px solid var(--border);border-radius:18px;padding:18px;margin-bottom:16px}
.section-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px;flex-wrap:wrap}
.section-title{font-size:16px;font-weight:900;display:flex;gap:8px;align-items:center}
.section-note{font-size:12px;color:var(--muted);margin-top:3px}
.tag{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:#EEF4F6;color:#52616E;font-size:10.5px;font-weight:900}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.dot.amber{background:var(--amber)} .dot.teal{background:var(--teal)} .dot.green{background:var(--accent)}
.chartbox{min-height:240px;position:relative}
.chartbox.small{min-height:190px}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:15px}
.stat{background:#F6FAF9;border:1px solid #E4ECE8;border-radius:12px;padding:12px 14px}
.stat .n{font-size:22px;font-weight:900}
.stat .l{font-size:11px;color:var(--muted);margin-top:4px;font-weight:700}
.legend{display:flex;flex-direction:column;gap:9px}
.legend-item{display:grid;grid-template-columns:12px 1fr auto;gap:8px;align-items:center;font-size:12.5px}
.sw{width:10px;height:10px;border-radius:3px}
.legend-item .v{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:800;color:var(--muted)}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{padding:11px 10px;background:#F8FBFC;color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;text-align:left;border-bottom:1px solid var(--line)}
td{padding:11px 10px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:none}

.badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;background:var(--amber-soft);color:#AB6A0C;font-weight:900;font-size:11px}
.motivos-details{position:relative;display:inline-block}
.motivos-details summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  padding:5px 9px;border:1px solid var(--line);border-radius:9px;
  background:#fff;font-size:11px;font-weight:900;color:var(--ink);
  white-space:nowrap;user-select:none
}
.motivos-details summary::-webkit-details-marker{display:none}
.motivos-details summary::after{content:"▾";font-size:10px;color:var(--muted)}
.motivos-details[open] summary::after{content:"▴"}
.motivos-pop{
  position:absolute;right:0;top:calc(100% + 6px);z-index:30;
  min-width:250px;padding:10px;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 12px 30px rgba(20,28,35,.14)
}
.motivo-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:7px 4px;border-bottom:1px solid #eef1f3;font-size:11px
}
.motivo-row:last-child{border-bottom:0}
.motivo-row span:first-child{font-weight:800;color:var(--ink)}
.motivo-count{
  min-width:25px;text-align:center;padding:3px 7px;border-radius:999px;
  background:var(--amber-soft);color:#AB6A0C;font-weight:900
}

.pop-note{display:none;background:#F9FBFB;border:1px solid var(--line);border-radius:10px;padding:8px 10px;color:var(--muted);font-size:11.5px}
.pop-note.show{display:block}
.role-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.role{background:#F7FAF9;border:1px solid #E2E9EC;border-radius:14px;padding:14px}
.role-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.role-name{font-size:13px;font-weight:900}
.vac{background:#fff;border:1px solid var(--border);color:var(--muted);padding:4px 8px;border-radius:999px;font-size:10.5px;font-weight:800}
.step{margin:9px 0}.step-top{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);font-weight:800}.track{height:8px;border-radius:6px;background:#fff;border:1px solid #E3EAED;overflow:hidden;margin-top:4px}.fill{height:100%;background:linear-gradient(90deg,var(--accent),#69D698);border-radius:4px}
.contract{display:flex;justify-content:space-between;align-items:center;border-top:1px dashed #D6E0E5;margin-top:10px;padding-top:10px;font-size:11px;font-weight:800;color:var(--muted)}
.contract b{font-size:16px;color:var(--ink)}
.future{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.future-card{background:#FBFDFC;border:1px dashed #CDD8DE;border-radius:14px;padding:14px;color:var(--muted)}.future-card b{display:block;color:#46525D;margin-bottom:4px}.future-tag{display:inline-block;margin-top:8px;font-size:10px;font-weight:900;background:#EEF2F4;color:#56636F;padding:4px 8px;border-radius:999px}
.footer{margin-top:6px;color:var(--muted);font-size:10.5px;text-align:center;font-weight:700}
.msel-wrap{position:relative}
.msel-trigger{height:40px;width:100%;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border:1px solid var(--border);border-radius:10px;background:#F8FAFB;font-size:14px;font-weight:800;color:var(--ink);cursor:pointer}
.msel-panel{position:absolute;top:calc(100% + 8px);left:0;z-index:20;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 14px 30px rgba(17,33,43,.12);padding:14px;width:350px}
.msel-panel[hidden]{display:none}
.msel-year-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.msel-year-label{font-size:11.5px;font-weight:900;color:#48606F}
.msel-year-select{height:34px;min-width:112px;padding:0 32px 0 10px;border:1px solid var(--border);border-radius:9px;background:#F8FAFB;color:var(--ink);font-size:12.5px;font-weight:900;cursor:pointer}
.msel-presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.preset{height:30px;padding:0 12px;border-radius:999px;border:none;background:#EEF3F6;color:#48606F;font-size:11.5px;font-weight:900;cursor:pointer}.preset:hover{background:#DCEBF2}
.msel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.msel-opt{display:flex;align-items:center;gap:8px;padding:8px;border-radius:10px;font-size:12.5px;color:#4C5B68;cursor:pointer}.msel-opt:hover{background:#F5F8FA}.msel-opt.checked{background:#EEF8F2;color:#1E6B45;font-weight:800}
.msel-opt input{accent-color:var(--accent)}
.msel-opt.disabled{opacity:.38;cursor:not-allowed;background:transparent;color:#6A7683}
.msel-opt.disabled:hover{background:transparent}
.msel-opt.disabled input{cursor:not-allowed}
.msel-footer{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.msel-footer span{font-size:11.5px;color:var(--muted);font-weight:800}.link-btn{border:none;background:none;color:var(--coral);font-size:11.5px;font-weight:900;cursor:pointer}
@media(max-width:1280px){.filters-grid{grid-template-columns:1fr 1fr 1fr}.actions{grid-column:1 / -1}.actions .btn{max-width:220px}.role-grid,.future{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1020px){.sidebar{position:fixed;left:0;top:0;bottom:0;z-index:50;width:258px;flex-basis:258px;box-shadow:16px 0 36px rgba(0,0,0,.24);transform:translateX(0);transition:transform .25s ease}.sidebar.hidden{width:258px;flex-basis:258px;transform:translateX(-100%)}.content{padding:14px}.kpis{grid-template-columns:repeat(2,1fr)}.layout-2{grid-template-columns:1fr}.filters-grid{grid-template-columns:1fr}.actions{grid-column:auto}.actions .btn{max-width:none}.topbar{padding:16px 18px}}
@media(max-width:620px){.kpis,.stat-grid,.role-grid,.future{grid-template-columns:1fr}.surface{padding:12px}.top-title h1{font-size:25px}}

  .motivo-chip{
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    padding:4px 9px;
    font-size:11px;
    font-weight:800;
    line-height:1.2;
    border:1px solid transparent;
    white-space:normal;
  }

  .ausencia-justificada{
    background:#E9F8EF;
    color:#167A42;
    border-color:#BDE8CC;
  }

  .ausencia-injustificada{
    background:#FDEDEC;
    color:#B33A32;
    border-color:#F4C8C4;
  }

  .ausencia-sin-clasificacion{
    background:#EEF1F4;
    color:#5E6873;
    border-color:#D8DEE4;
  }

  .motivo-estado-texto{
    display:block;
    margin-top:2px;
    font-size:9px;
    font-weight:700;
    color:var(--muted);
  }


  /* V1 · Ranking de ausencias:
     se ven aproximadamente 10 filas y el resto queda en scroll interno. */
  .ranking-ausencias-scroll{
    height: 445px;
    overflow-y: auto;
    overflow-x: auto;
  }

  .ranking-ausencias-scroll thead th{
    position: sticky;
    top: 0;
    z-index: 4;
    background: #F6F8F9;
  }

  .ranking-ausencias-scroll::-webkit-scrollbar{
    width: 8px;
    height: 8px;
  }

  .ranking-ausencias-scroll::-webkit-scrollbar-thumb{
    background: #C9D1D8;
    border-radius: 999px;
  }

  .ranking-ausencias-scroll::-webkit-scrollbar-track{
    background: transparent;
  }

  /* V1 · Motivos más compactos:
     no agrupamos categorías; solo eliminamos 0 h y reducimos altura visual. */
  #motLegend{
    gap: 5px;
  }

  #motLegend .legend-item{
    padding: 1px 0;
    line-height: 1.12;
  }

  #motLegend .legend-item > span:nth-child(2){
    font-size: 10px;
  }

  #motLegend .legend-item .v{
    font-size: 10px;
    white-space: nowrap;
  }

  #motLegend .motivo-estado-texto{
    margin-top: 1px;
    font-size: 8px;
  }



/* =====================================================
   CORE RRHH · VISUAL MVP PROFESIONAL · 24/08/2026
   Capa visual sobre la lógica existente.
   ===================================================== */
:root{
  --core-orange:#FF5C33;
  --core-charcoal:#333333;
  --core-black:#000000;
  --core-white:#FFFFFF;
  --core-green:#0D8C52;
  --bg:#F3F6F5;
  --sidebar:#101618;
  --sidebar-soft:#172022;
  --card:#FFFFFF;
  --ink:#161D22;
  --muted:#68747E;
  --border:#DDE4E7;
  --line:#E9EEF0;
  --accent:#0D9B58;
  --coral:#FF5C33;
  --amber:#FF9D1F;
  --teal:#17A985;
  --blue:#FF5C33;
  --radius:14px;
  --shadow:0 10px 28px rgba(21,29,33,.06);
}

body{
  font-family:Roboto,Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--bg);
}

.sidebar{
  width:230px;
  flex:0 0 230px;
  background:linear-gradient(180deg,#101719 0%,#111A1D 100%);
  border-right:1px solid rgba(255,255,255,.06);
}
.sidebar.hidden{width:0;flex-basis:0}
.brand{min-width:230px;padding:23px 26px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand strong{font-size:26px;letter-spacing:.18em;color:#fff;font-weight:900}
.nav{min-width:230px;padding:16px 14px;gap:7px}
.nav-label{display:flex;align-items:center;gap:10px}
.nav-icon{width:24px;height:24px;border-radius:8px;border:1px solid rgba(255,255,255,.12);display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:900;color:#D9E0E3;background:rgba(255,255,255,.025)}
.nav-group-trigger,.nav-module{min-height:42px;padding:9px 11px;border-radius:10px;color:#F2F5F6;font-size:12px;font-weight:800;text-decoration:none;display:flex;align-items:center;gap:10px;border:1px solid transparent}
.nav-group-trigger{justify-content:space-between}
.nav-module:hover{background:rgba(255,255,255,.045)}
.nav-group-trigger.active{background:rgba(13,140,82,.18);border-color:rgba(24,183,105,.55)}
.nav-sub{padding-left:9px;padding-top:3px}
.nav-subitem{min-height:37px;padding:8px 12px;border-radius:9px;font-size:11px;gap:8px}
.nav-subitem.active{background:rgba(13,140,82,.14);border-color:rgba(24,183,105,.42)}
.nav-dot{width:6px;height:6px;border-radius:50%;background:#19BD70;box-shadow:0 0 0 3px rgba(25,189,112,.08)}
.sidebar-footer{min-width:230px;padding:14px;border-top:1px solid rgba(255,255,255,.07)}
.sidebar-footer-button{width:100%;display:flex;align-items:center;gap:9px;border:0;background:transparent;color:#C7D0D4;font-size:10.5px;font-weight:800;cursor:pointer;padding:7px 5px}
.sidebar-footer-button span:first-child{width:24px;height:24px;border:1px solid rgba(255,255,255,.14);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:16px}
.sidebar-footer-copy{font-size:9px;color:rgba(255,255,255,.35);padding:8px 5px 0}

.topbar{background:linear-gradient(90deg,#101719,#151C1F);padding:14px 22px;align-items:center;min-height:72px;box-shadow:0 1px 0 rgba(255,255,255,.04);flex-wrap:nowrap}
.top-left{align-items:center}
.sidebar-toggle{height:38px;min-width:44px;border-radius:10px;font-size:14px;background:#1C2528}
.top-title .eyebrow{font-size:10px;color:var(--core-orange);margin-bottom:4px}
.title-line{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.top-title h1{font-size:23px;letter-spacing:-.018em}
.title-line>span{font-size:11px;color:#B7C1C6;font-weight:600}
.top-actions{display:flex;align-items:center;gap:14px;margin-left:auto}
.user-panel{display:flex;align-items:center;gap:9px;padding-left:14px;border-left:1px solid rgba(255,255,255,.1);min-width:185px}
.user-avatar{width:36px;height:36px;border-radius:50%;background:#2A3235;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;border:1px solid rgba(255,255,255,.08)}
.user-copy{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.user-copy strong{font-size:11px;color:#fff}
.user-copy span{font-size:9.5px;color:#AEB8BD;margin-top:4px}
.user-panel{
  position:relative;
  cursor:pointer;
  user-select:none;
}
.user-panel:hover{
  background:rgba(255,255,255,.035);
}
.user-panel:focus-visible{
  outline:2px solid rgba(255,92,51,.75);
  outline-offset:4px;
  border-radius:10px;
}
.user-chevron{
  font-size:15px;
  color:#AEB8BD;
  margin-left:auto;
  transition:transform .16s ease;
}
.user-panel.open .user-chevron{
  transform:rotate(180deg);
}

.user-menu{
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  z-index:100;
  width:260px;
  padding:8px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:#151C1F;
  box-shadow:0 18px 45px rgba(0,0,0,.28);
}
.user-menu[hidden]{
  display:none;
}
.user-menu-head{
  padding:10px 11px 11px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.user-menu-head strong{
  display:block;
  color:#FFFFFF;
  font-size:11px;
  line-height:1.25;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.user-menu-head span{
  display:block;
  margin-top:5px;
  color:#93A0A6;
  font-size:9.5px;
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.user-menu-action{
  width:100%;
  margin-top:6px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 11px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#F2F5F6;
  font:inherit;
  font-size:10.5px;
  font-weight:800;
  text-align:left;
  cursor:pointer;
}
.user-menu-action:hover{
  background:rgba(255,92,51,.10);
  color:#FF8065;
}
.user-menu-action svg{
  width:16px;
  height:16px;
  flex:0 0 16px;
}

.content{padding:18px 20px 26px}
.surface{background:#fff;border:1px solid #E0E6E8;border-radius:18px;padding:15px;box-shadow:var(--shadow)}

.period-toolbar{display:grid;grid-template-columns:118px 1fr;gap:16px;padding:12px 14px;background:#fff;border:1px solid var(--border);border-radius:14px;margin-bottom:10px;align-items:stretch}
.period-toolbar label,.filters-secondary label{font-size:10px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:#63707A}
.period-year-block{display:flex;flex-direction:column;gap:8px;padding-right:15px;border-right:1px solid var(--line)}
.period-year-block .msel-year-select{height:38px;width:100%;min-width:0;border-radius:9px;background:#FAFBFB;font-size:12px}
.period-months-block{min-width:0}
.period-months-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:9px}
.period-months-head>div:first-child{display:flex;align-items:baseline;gap:10px;min-width:0}
.period-selected-text{font-size:10.5px;color:#87929A;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.period-count{font-size:9.5px;color:#7A858D;background:#F3F6F7;border-radius:999px;padding:4px 8px;font-weight:800;white-space:nowrap}
.msel-grid{display:grid;grid-template-columns:repeat(12,minmax(46px,1fr));gap:6px}
.msel-opt{height:34px;padding:0 5px;border-radius:8px;justify-content:center;border:1px solid #E4E9EB;background:#F8FAFA;color:#7A858D;font-size:9.5px;font-weight:800;transition:.15s ease;user-select:none}
.msel-opt input{display:none}
.msel-opt:hover{background:#FFF7F4;border-color:#FFD3C6;color:#E14E29}
.msel-opt.checked{background:#FFF4EF;border-color:var(--core-orange);color:#EE4D25;box-shadow:inset 0 0 0 1px rgba(255,92,51,.08)}
.msel-opt.checked:after{content:'✓';margin-left:4px;width:13px;height:13px;border-radius:50%;background:var(--core-orange);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:8px}
.msel-opt.disabled{opacity:1;background:#F4F5F6;border-color:#ECEFF0;color:#BCC3C7;cursor:not-allowed}
.msel-opt.disabled:hover{background:#F4F5F6;border-color:#ECEFF0;color:#BCC3C7}
.period-tools-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px}
.msel-presets{display:flex;gap:6px;flex-wrap:wrap;margin:0}
.preset{height:25px;padding:0 9px;background:#F1F4F5;color:#66737C;font-size:9.5px;border:1px solid transparent}
.preset:hover{background:#FFF2ED;color:#D94D29;border-color:#FFD5C8}
.link-btn{color:#D94D29;font-size:9.5px;padding:4px 0}

.filters-secondary{grid-template-columns:minmax(180px,.8fr) minmax(260px,1.25fr) auto;margin:0 0 12px;gap:10px}
.filter-box,.actions{min-height:64px;border-radius:12px;padding:8px 10px;background:#fff}
.select{height:36px;border-radius:8px;background:#FAFBFB;font-size:11.5px}
.actions{padding:8px 10px;align-items:flex-end}
.btn{height:36px;min-width:132px;border-radius:8px;font-size:10.5px;gap:7px}
.btn-filter-icon{font-size:16px;color:#6D7880}

.notice{border:1px solid #F5DDCF;border-radius:11px;background:#FFF9F6;padding:9px 12px;margin-bottom:10px;font-size:10.5px;color:#5D6870}
.notice:before{content:'i';flex:0 0 18px;width:18px;height:18px;border:1px solid var(--core-orange);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--core-orange);font-size:10px;font-weight:900}
.notice>div{flex:1}
.notice .pill{background:#FFF0E9;color:#EA4B22;font-size:9.5px;padding:5px 9px}

.person-card{background:linear-gradient(110deg,#11181B,#1B2326);border:1px solid #202B2F;border-radius:12px;padding:12px 14px;margin-bottom:12px;box-shadow:0 7px 20px rgba(12,18,20,.10)}
.person-card.show{display:flex}
.person-identity{display:flex;align-items:center;gap:12px;min-width:0}
.person-avatar{width:42px;height:42px;flex:0 0 42px;border-radius:50%;background:linear-gradient(145deg,#FF6C42,#FF4E20);color:transparent;position:relative;box-shadow:0 8px 18px rgba(255,92,51,.18)}
.person-avatar:before{content:'';position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;left:15px;top:9px}
.person-avatar:after{content:'';position:absolute;width:22px;height:11px;border-radius:12px 12px 7px 7px;background:#fff;left:10px;bottom:8px}
.person-title{font-size:17px;color:#fff}
.person-meta{font-size:10px;color:#C0C8CC}
.person-stats{gap:8px;margin-left:auto;padding-left:16px;border-left:1px solid rgba(255,255,255,.1)}
.person-stat{min-width:104px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.11);border-radius:9px;padding:8px 10px}
.person-stat b{font-size:15px;color:#fff}
.person-stat span{font-size:8.8px;color:#B7C0C4}

.kpis{gap:10px;margin-bottom:12px}
.kpi{border-radius:12px;padding:13px 13px 12px 12px;min-height:108px;display:flex;gap:10px;align-items:flex-start;box-shadow:0 3px 12px rgba(25,35,40,.035)}
.kpi:before{width:3px;border-radius:12px 0 0 12px;background:var(--core-orange)}
.kpi.k1:before{background:var(--core-orange)}
.kpi.k2:before{background:#F06456}.kpi.k3:before{background:#FFAA27}.kpi.k4:before{background:#17A985}
.kpi-icon{width:30px;height:30px;flex:0 0 30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#FFF0EA;color:#F15A32;font-size:8.5px;font-weight:900;margin-top:1px}
.kpi.k2 .kpi-icon{background:#FFF0EE;color:#DF564B}.kpi.k3 .kpi-icon{background:#FFF5E7;color:#F39A10}.kpi.k4 .kpi-icon{background:#EAF8F4;color:#16977A}
.kpi-body{min-width:0}
.kpi .label{font-size:11px;color:#4E5A63;line-height:1.25;min-height:27px}
.kpi .value{font-size:27px;margin-top:2px;color:#12181C}
.kpi .delta{font-size:9.5px;margin-top:3px}
.kpi .hint{font-size:9px;margin-top:3px;line-height:1.25}

.section{border-radius:13px;padding:14px;margin-bottom:12px;box-shadow:0 3px 12px rgba(25,35,40,.025)}
.section-head{margin-bottom:10px}
.section-title{font-size:14px}.section-note{font-size:10.5px}.tag{font-size:9px;height:23px}
.layout-2{gap:12px}.chartbox{min-height:220px}.chartbox.small{min-height:175px}
.stat-grid{gap:9px;margin-top:10px}.stat{border-radius:10px;padding:10px 11px}.stat .n{font-size:19px}.stat .l{font-size:9.5px}
.ranking-ausencias-scroll{height:320px;border-radius:10px}
table{font-size:10.5px}th{font-size:8.8px;padding:9px}td{padding:9px}

@media(max-width:1380px){
  .msel-grid{grid-template-columns:repeat(6,1fr)}
  .period-toolbar{grid-template-columns:105px 1fr}
  .user-panel{min-width:150px}
}
@media(max-width:1100px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:50;width:230px;flex-basis:230px;box-shadow:16px 0 36px rgba(0,0,0,.24);transform:translateX(0);transition:transform .25s ease}
  .sidebar.hidden{width:230px;flex-basis:230px;transform:translateX(-100%)}
  .top-actions .user-copy{display:none}.user-panel{min-width:auto;padding-left:10px}
  .filters-secondary{grid-template-columns:1fr 1fr}.actions{grid-column:1/-1}.actions .btn{max-width:170px}
}
@media(max-width:760px){
  .period-toolbar{grid-template-columns:1fr}.period-year-block{border-right:0;border-bottom:1px solid var(--line);padding:0 0 10px}.period-year-block .msel-year-select{max-width:150px}
  .msel-grid{grid-template-columns:repeat(4,1fr)}
  .filters-secondary{grid-template-columns:1fr}.actions{grid-column:auto}.actions .btn{max-width:none}
  .top-actions{gap:4px}.user-panel{display:none}.top-title h1{font-size:19px}.title-line>span{display:none}
  .person-stats{border-left:0;padding-left:0;width:100%}
}


/* =========================================================
   CORE RRHH · Visual polish V4 — cards
   Solo capa visual. No altera IDs, cálculos ni API.
   ========================================================= */

body{
  font-family:Roboto,Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* KPI principales */
.kpis{
  gap:12px;
  margin-bottom:14px;
}
.kpi{
  --kpi-accent:#FF5C33;
  --kpi-soft:#FFF1EC;
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  align-items:start;
  gap:12px;
  min-height:126px;
  padding:16px 16px 14px 15px;
  border:1px solid #E1E7E9;
  border-radius:15px;
  background:linear-gradient(180deg,#FFFFFF 0%,#FCFDFD 100%);
  box-shadow:0 7px 20px rgba(27,38,43,.055);
  overflow:hidden;
  isolation:isolate;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.kpi:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 25px rgba(27,38,43,.075);
  border-color:#D7DEE1;
}
.kpi.k1{--kpi-accent:#FF5C33;--kpi-soft:#FFF0EA}
.kpi.k2{--kpi-accent:#E85D52;--kpi-soft:#FFF0EF}
.kpi.k3{--kpi-accent:#F4A022;--kpi-soft:#FFF6E9}
.kpi.k4{--kpi-accent:#18A984;--kpi-soft:#EAF9F4}
.kpi:before{
  width:4px;
  border-radius:15px 0 0 15px;
  background:var(--kpi-accent)!important;
  z-index:2;
}
.kpi:after{
  content:"";
  position:absolute;
  width:94px;
  height:94px;
  border-radius:50%;
  right:-38px;
  top:-42px;
  background:var(--kpi-accent);
  opacity:.055;
  z-index:-1;
}
.kpi-icon,
.kpi.k2 .kpi-icon,
.kpi.k3 .kpi-icon,
.kpi.k4 .kpi-icon{
  width:44px;
  height:44px;
  flex:0 0 44px;
  margin:0;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--kpi-soft);
  color:var(--kpi-accent);
  border:1px solid color-mix(in srgb,var(--kpi-accent) 15%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.kpi-icon svg{
  width:22px;
  height:22px;
  display:block;
}
.kpi-body{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.kpi .label{
  min-height:0;
  font-size:12px;
  line-height:1.3;
  color:#526069;
  font-weight:850;
  letter-spacing:-.005em;
}
.kpi .value{
  margin-top:5px;
  color:#11171A;
  font-size:32px;
  line-height:1;
  letter-spacing:-.035em;
  font-weight:950;
}
.kpi .delta{
  min-height:0;
  margin-top:5px;
  font-size:10px;
}
.kpi .delta:empty{display:none}
.kpi .hint{
  margin-top:auto;
  padding-top:7px;
  font-size:9.7px;
  line-height:1.35;
  color:#7B878E;
  font-weight:650;
}

/* Tarjeta individual + mini tarjetas */
.person-card{
  position:relative;
  overflow:hidden;
  border-radius:15px;
  padding:14px 16px;
  background:
    radial-gradient(circle at 90% 15%,rgba(255,92,51,.08),transparent 26%),
    linear-gradient(110deg,#111719 0%,#172024 56%,#111719 100%);
  border:1px solid #263135;
  box-shadow:0 10px 24px rgba(12,18,20,.14);
}
.person-card:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.018),transparent 45%);
}
.person-identity,.person-stats{position:relative;z-index:1}
.person-avatar{
  width:48px;
  height:48px;
  flex-basis:48px;
  box-shadow:0 8px 22px rgba(255,92,51,.24);
}
.person-avatar:before{left:18px;top:10px}
.person-avatar:after{left:12px;bottom:9px;width:24px}
.person-title{
  font-size:18px;
  letter-spacing:-.015em;
}
.person-meta{
  margin-top:5px;
  font-size:10px;
  color:#BCC6CA;
}
.person-stats{
  gap:9px;
  padding-left:18px;
}
.person-stat{
  position:relative;
  min-width:118px;
  min-height:58px;
  padding:10px 12px 9px;
  border-radius:11px;
  background:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  overflow:hidden;
}
.person-stat:before{
  content:"";
  position:absolute;
  width:30px;
  height:30px;
  border-radius:50%;
  right:-10px;
  top:-11px;
  background:#FF5C33;
  opacity:.12;
}
.person-stat-rate:before{background:#F4A022}
.person-stat-status:before{background:#18A984}
.person-stat b{
  font-size:17px;
  line-height:1.1;
  letter-spacing:-.02em;
}
.person-stat span{
  display:block;
  margin-top:6px;
  font-size:9px;
  line-height:1.2;
  color:#B8C2C7;
}

/* Sección ausencias: chart cards + métricas laterales */
.absence-overview-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr) minmax(205px,.58fr);
  gap:12px;
  align-items:stretch;
}
.visual-data-card{
  min-width:0;
  border:1px solid #E3E8EA;
  border-radius:13px;
  background:linear-gradient(180deg,#FFFFFF,#FCFDFD);
  padding:12px 13px;
  box-shadow:0 4px 14px rgba(25,35,40,.035);
}
.visual-card-heading{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:4px;
}
.visual-card-heading span{
  font-size:11px;
  font-weight:900;
  color:#354149;
}
.visual-card-heading small{
  font-size:8.8px;
  font-weight:750;
  color:#939DA3;
  white-space:nowrap;
}
.visual-data-card .chartbox{min-height:215px}
.visual-data-card .chartbox.small{min-height:165px}
.absence-motives-card .legend{
  margin-top:1px;
  padding-top:8px;
  border-top:1px solid #EFF2F3;
}

.absence-side-cards{
  display:grid;
  grid-template-rows:repeat(4,1fr);
  gap:10px;
}
.absence-metric-card{
  --metric-accent:#FF5C33;
  --metric-soft:#FFF1EC;
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:10px;
  align-items:center;
  min-height:82px;
  padding:12px;
  border-radius:13px;
  border:1px solid #E3E8EA;
  background:linear-gradient(180deg,#FFFFFF,#FCFDFD);
  box-shadow:0 4px 14px rgba(25,35,40,.035);
  position:relative;
  overflow:hidden;
}
.absence-metric-card:after{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  bottom:12px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:var(--metric-accent);
}
.metric-hours{--metric-accent:#FF5C33;--metric-soft:#FFF0EA}
.metric-priority{--metric-accent:#8A5CF6;--metric-soft:#F3EEFF}
.metric-people{--metric-accent:#3F67FF;--metric-soft:#EEF2FF}
.metric-average{--metric-accent:#18A984;--metric-soft:#EAF9F4}
.metric-card-icon{
  width:42px;
  height:42px;
  border-radius:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--metric-accent);
  background:var(--metric-soft);
}
.metric-card-icon svg{
  width:21px;
  height:21px;
}
.metric-card-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.metric-card-copy span{
  font-size:9px;
  line-height:1.25;
  color:#69757D;
  font-weight:800;
}
.metric-card-copy b{
  margin-top:3px;
  font-size:22px;
  line-height:1;
  color:#11171A;
  letter-spacing:-.025em;
}
.metric-card-copy small{
  margin-top:5px;
  color:#929CA2;
  font-size:8.4px;
  line-height:1.2;
  font-weight:650;
}

/* Tarjetas estadísticas del resto del dashboard */
.stat-grid{
  gap:10px;
}
.stat{
  position:relative;
  overflow:hidden;
  min-height:74px;
  padding:12px 13px;
  border-radius:12px;
  background:linear-gradient(180deg,#FFFFFF,#F9FBFA);
  border:1px solid #E1E8E5;
  box-shadow:0 3px 11px rgba(25,35,40,.03);
}
.stat:before{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  bottom:12px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:#18A984;
  opacity:.8;
}
.stat .n{
  font-size:21px;
  letter-spacing:-.02em;
  color:#152024;
}
.stat .l{
  margin-top:6px;
  font-size:9.5px;
  line-height:1.3;
}

/* Ranking */
.ranking-section-head{
  margin-top:17px;
  margin-bottom:10px;
}
.ranking-title-wrap{
  display:flex;
  align-items:center;
  gap:10px;
}
.ranking-title-icon{
  width:32px;
  height:32px;
  flex:0 0 32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  color:#F1971C;
  background:#FFF5E6;
  border:1px solid #FCE6BF;
}
.ranking-title-icon svg{
  width:17px;
  height:17px;
}
.ranking-ausencias-scroll{
  border:1px solid #E3E8EA;
  box-shadow:0 3px 12px rgba(25,35,40,.025);
}
.ranking-ausencias-scroll thead th{
  background:#FAFBFB;
}

/* Responsive */
@media(max-width:1450px){
  .absence-overview-grid{
    grid-template-columns:minmax(0,1.25fr) minmax(260px,.9fr);
  }
  .absence-side-cards{
    grid-column:1/-1;
    grid-template-columns:repeat(4,1fr);
    grid-template-rows:none;
  }
}
@media(max-width:1000px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .absence-overview-grid{grid-template-columns:1fr}
  .absence-side-cards{
    grid-column:auto;
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:700px){
  .kpis{grid-template-columns:1fr}
  .absence-side-cards{grid-template-columns:1fr}
  .person-stats{grid-template-columns:1fr}
}


/* =========================================================
   V5 · AUSENCIAS — cierre visual de la primera etapa
   - mantiene el tamaño del gráfico mensual
   - compacta motivos al estilo del mockup
   - elimina altura vacía del ranking
   ========================================================= */
.absence-chart-card{
  /* El gráfico principal conserva su dimensión de la V4. */
  min-width:0;
}
.absence-chart-card .chartbox{
  min-height:215px;
}

.absence-motives-card{
  padding:12px 14px;
}
.absence-motives-card .visual-card-heading{
  margin-bottom:10px;
}
.absence-motives-card .visual-card-heading em{
  font-style:normal;
  font-weight:700;
  color:#7D878D;
}
.motives-card-body{
  display:grid;
  grid-template-columns:minmax(145px,.78fr) minmax(180px,1.22fr);
  gap:15px;
  align-items:center;
  min-height:205px;
}
.motives-donut-wrap{
  position:relative;
  width:100%;
  max-width:190px;
  aspect-ratio:1/1;
  justify-self:center;
}
.absence-motives-card .motives-chartbox{
  min-height:0;
  width:100%;
  height:100%;
}
.motives-center{
  position:absolute;
  inset:50% auto auto 50%;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.motives-center b{
  font-size:25px;
  line-height:1;
  letter-spacing:-.035em;
  color:#12181B;
}
.motives-center span{
  margin-top:5px;
  font-size:9px;
  font-weight:800;
  color:#778188;
}
.absence-motives-card .motives-legend{
  border-top:0;
  padding-top:0;
  margin-top:0;
  gap:0;
}
.absence-motives-card .motives-legend .legend-item{
  display:grid;
  grid-template-columns:9px minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  padding:7px 0;
  border-bottom:1px solid #EEF1F2;
}
.absence-motives-card .motives-legend .legend-item:last-child{
  border-bottom:0;
}
.absence-motives-card .motives-legend .sw{
  width:8px;
  height:8px;
  border-radius:50%;
}
.absence-motives-card .motives-legend .legend-item > span:nth-child(2){
  font-size:9.5px;
  font-weight:750;
  color:#465158;
  line-height:1.15;
}
.absence-motives-card .motives-legend .legend-item .v{
  font-size:10px;
  font-weight:900;
  color:#20272B;
}
.absence-motives-card .motivo-estado-texto{
  margin-top:2px;
  font-size:7.8px;
  font-weight:800;
}

/* Ranking compacto, equivalente al mockup: sin gran bloque vacío. */
.ranking-section-head{
  margin-top:14px;
  margin-bottom:8px;
}
.ranking-ausencias-scroll{
  height:auto !important;
  max-height:360px;
  min-height:0;
  overflow-y:auto;
  overflow-x:auto;
  border-radius:11px;
  background:#fff;
}
.ranking-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
.ranking-table thead th{
  position:sticky;
  top:0;
  z-index:4;
  height:34px;
  padding:8px 10px;
  background:#FBFCFC !important;
  border-bottom:1px solid #E5EAEC;
  font-size:8.5px;
  line-height:1;
  color:#66727A;
  text-transform:uppercase;
  letter-spacing:.025em;
  white-space:nowrap;
}
.ranking-table tbody td{
  padding:9px 10px;
  border-bottom:1px solid #EDF0F1;
  font-size:9.7px;
  color:#313A3F;
  vertical-align:middle;
}
.ranking-table tbody tr:last-child td{
  border-bottom:0;
}
.ranking-table tbody tr:hover td{
  background:#FCFDFD;
}
.ranking-position{
  display:inline-flex;
  width:22px;
  height:22px;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  background:#F4F6F7;
  color:#475159;
  font-size:9px;
  font-weight:900;
}
.ranking-share{
  font-weight:850;
  color:#4C565D;
  white-space:nowrap;
}
.ranking-table .badge{
  background:#FFF2E8;
  color:#B85A12;
  border-color:#FFD9BD;
}

@media(max-width:1250px){
  .motives-card-body{
    grid-template-columns:150px minmax(0,1fr);
  }
  .motives-donut-wrap{max-width:160px}
}
@media(max-width:760px){
  .motives-card-body{
    grid-template-columns:1fr;
  }
  .motives-donut-wrap{max-width:175px}
}


/* =========================================================
   V6 · ROTACIÓN — cierre visual
   - conserva el tamaño del gráfico
   - alinea métricas y motivos con el sistema visual CORE
   ========================================================= */
.rotation-section{
  overflow:hidden;
}
.rotation-pop-note.show{
  margin-bottom:10px;
  border-color:#DDE9E5;
  background:#F7FBF9;
  color:#61706A;
}
.rotation-chart-card{
  padding:12px 14px 10px;
  margin-top:2px;
}
.rotation-chart-card .visual-card-heading{
  margin-bottom:6px;
}
.rotation-chartbox{
  min-height:220px !important;
  height:220px;
}
.rotation-metrics-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}
.rotation-metric-card{
  --rotation-accent:#18A984;
  --rotation-soft:#EAF9F4;
  position:relative;
  min-height:82px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #E1E8E5;
  background:linear-gradient(180deg,#FFFFFF 0%,#FBFCFC 100%);
  box-shadow:0 3px 11px rgba(25,35,40,.03);
  overflow:hidden;
}
.rotation-metric-card:before{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  bottom:12px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:var(--rotation-accent);
}
.metric-rotation-altas{--rotation-accent:#12AD64;--rotation-soft:#EAF9F1}
.metric-rotation-bajas{--rotation-accent:#EF5B50;--rotation-soft:#FFF0EE}
.metric-rotation-tasa{--rotation-accent:#18A984;--rotation-soft:#EAF9F4}
.rotation-metric-icon{
  width:40px;
  height:40px;
  flex:0 0 40px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--rotation-accent);
  background:var(--rotation-soft);
}
.rotation-metric-icon svg{width:20px;height:20px}
.rotation-metric-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.rotation-metric-copy span{
  font-size:9.2px;
  color:#66727A;
  font-weight:800;
  line-height:1.2;
}
.rotation-metric-copy b{
  margin-top:3px;
  font-size:22px;
  line-height:1;
  letter-spacing:-.025em;
  color:#131A1D;
}
.rotation-metric-copy small{
  margin-top:5px;
  font-size:8.2px;
  line-height:1.2;
  color:#929CA2;
  font-weight:650;
}
.rotation-reasons-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}
.rotation-reason-card{
  --reason-accent:#EF5B50;
  --reason-soft:#FFF0EE;
  border:1px solid #E2E8E6;
  border-radius:12px;
  background:#FFFFFF;
  padding:12px 14px;
  box-shadow:0 3px 11px rgba(25,35,40,.025);
}
.rotation-reason-card.reason-altas{
  --reason-accent:#12AD64;
  --reason-soft:#EAF9F1;
}
.rotation-reason-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:10px;
  border-bottom:1px solid #EDF1EF;
}
.rotation-reason-icon{
  width:32px;
  height:32px;
  flex:0 0 32px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--reason-accent);
  background:var(--reason-soft);
}
.rotation-reason-icon svg{width:16px;height:16px}
.rotation-reason-head b{
  display:block;
  color:#20272B;
  font-size:11px;
  line-height:1.15;
}
.rotation-reason-head span{
  display:block;
  margin-top:3px;
  color:#8A949A;
  font-size:8.5px;
  line-height:1.2;
}
.rotation-legend{
  gap:0;
  padding-top:4px;
}
.rotation-legend .legend-item{
  min-height:31px;
  display:grid;
  grid-template-columns:9px minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  padding:6px 0;
  border-bottom:1px solid #F0F2F2;
  font-size:9.4px;
  line-height:1.25;
}
.rotation-legend .legend-item:last-child{border-bottom:0}
.rotation-legend .legend-item .sw{
  width:8px;
  height:8px;
  border-radius:3px;
}
.rotation-legend .legend-item > span:nth-child(2){
  min-width:0;
  color:#4A555B;
  font-weight:700;
}
.rotation-legend .legend-item .v{
  font-size:9.5px;
  color:#273036;
  font-weight:900;
}
@media(max-width:900px){
  .rotation-metrics-grid{grid-template-columns:1fr}
  .rotation-reasons-grid{grid-template-columns:1fr}
}



/* =========================================================
   V7 · TEMA CLARO / OSCURO
   - conserva la versión clara actual
   - agrega modo oscuro persistente
   ========================================================= */
.theme-switch{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:3px;
  border:1px solid rgba(255,255,255,.14);
  background:#0D1316;
  border-radius:11px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}
.theme-option{
  height:30px;
  min-width:72px;
  padding:0 10px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#AEB8BD;
  font-size:10px;
  font-weight:850;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
.theme-option:hover{color:#fff;background:rgba(255,255,255,.045)}
.theme-option.active{
  color:#fff;
  background:#20292D;
  box-shadow:0 1px 5px rgba(0,0,0,.26),inset 0 0 0 1px rgba(255,255,255,.08);
}
.theme-option svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}

html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0C1215;
  --sidebar:#0A1013;
  --sidebar-soft:#11191D;
  --card:#151D21;
  --ink:#F1F5F6;
  --muted:#9AA6AD;
  --border:#2A3439;
  --line:#252F34;
  --accent:#16B96C;
  --accent-soft:#123125;
  --teal:#19B38E;
  --amber:#FFAA31;
  --amber-soft:#352816;
  --coral:#FF6353;
  --coral-soft:#3A1E1B;
  --blue:#FF5C33;
  --shadow:0 12px 32px rgba(0,0,0,.26);
}
html[data-theme="dark"] body{background:#0C1215;color:var(--ink)}
html[data-theme="dark"] .main{background:#0C1215}
html[data-theme="dark"] .content{background:#0C1215}
html[data-theme="dark"] .surface{
  background:#10171B;
  border-color:#263137;
  box-shadow:0 10px 34px rgba(0,0,0,.28);
}
html[data-theme="dark"] .topbar{
  background:linear-gradient(90deg,#0B1114,#11191D);
  border-bottom:1px solid #242E33;
}
html[data-theme="dark"] .sidebar{
  background:linear-gradient(180deg,#080E11 0%,#0C1418 100%);
  border-right-color:#202A2F;
}
html[data-theme="dark"] .nav-group-trigger.active,
html[data-theme="dark"] .nav-subitem.active{
  background:rgba(255,92,51,.09);
  border-color:rgba(255,92,51,.25);
}
html[data-theme="dark"] .nav-dot{background:#FF5C33;box-shadow:0 0 0 3px rgba(255,92,51,.08)}

html[data-theme="dark"] .period-toolbar,
html[data-theme="dark"] .filter-box,
html[data-theme="dark"] .actions,
html[data-theme="dark"] .section,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .visual-data-card,
html[data-theme="dark"] .absence-metric-card,
html[data-theme="dark"] .rotation-metric-card,
html[data-theme="dark"] .rotation-reason-card,
html[data-theme="dark"] .role,
html[data-theme="dark"] .future-card,
html[data-theme="dark"] .stat{
  background:linear-gradient(180deg,#171F23 0%,#141B1F 100%);
  border-color:#2A3439;
  box-shadow:0 4px 14px rgba(0,0,0,.13);
}
html[data-theme="dark"] .period-year-block{border-right-color:#2A3439}
html[data-theme="dark"] .period-toolbar label,
html[data-theme="dark"] .filters-secondary label{color:#9BA7AE}
html[data-theme="dark"] .period-selected-text{color:#8F9AA1}
html[data-theme="dark"] .period-count,
html[data-theme="dark"] .tag{
  color:#B7C2C8;
  background:#202A2F;
  border-color:#303B41;
}
html[data-theme="dark"] .select,
html[data-theme="dark"] .search-input,
html[data-theme="dark"] .msel-year-select,
html[data-theme="dark"] select{
  background:#11181C !important;
  color:#EEF3F5 !important;
  border-color:#303A40 !important;
}
html[data-theme="dark"] select option{background:#11181C;color:#EEF3F5}
html[data-theme="dark"] .btn,
html[data-theme="dark"] .btn.ghost{
  background:#151D21;
  color:#E7ECEE;
  border-color:#303A40;
}
html[data-theme="dark"] .btn:hover{background:#1D272C}
html[data-theme="dark"] .msel-opt{
  background:#131B1F;
  color:#9AA5AB;
  border-color:#2C363C;
}
html[data-theme="dark"] .msel-opt:hover{
  background:#241813;
  border-color:#7E3A27;
  color:#FF8A68;
}
html[data-theme="dark"] .msel-opt.checked{
  background:#251813;
  border-color:#FF5C33;
  color:#FF815F;
  box-shadow:inset 0 0 0 1px rgba(255,92,51,.10);
}
html[data-theme="dark"] .msel-opt.disabled,
html[data-theme="dark"] .msel-opt.disabled:hover{
  background:#11171A;
  border-color:#222B30;
  color:#566168;
}
html[data-theme="dark"] .preset{
  background:#151D21;
  color:#AEB8BE;
  border-color:#2D373C;
}
html[data-theme="dark"] .preset:hover{background:#211813;color:#FF8767;border-color:#74402F}

html[data-theme="dark"] .notice{
  background:linear-gradient(90deg,rgba(255,92,51,.09),rgba(255,157,31,.035));
  border-color:#493024;
  color:#D8DFE2;
}
html[data-theme="dark"] .notice strong{color:#F3F6F7}
html[data-theme="dark"] .notice-pill{
  background:#2B1B15;
  color:#FF7955;
  border-color:#6C3424;
}

html[data-theme="dark"] .person-card{
  background:linear-gradient(110deg,#0E1519 0%,#151D21 100%);
  border-color:#29343A;
  box-shadow:0 10px 25px rgba(0,0,0,.22);
}
html[data-theme="dark"] .person-stat{
  background:linear-gradient(180deg,#1A2328,#151D21);
  border-color:#303A40;
}
html[data-theme="dark"] .person-meta,
html[data-theme="dark"] .person-stat span{color:#AEB9BF}

html[data-theme="dark"] .kpi .label,
html[data-theme="dark"] .kpi .hint,
html[data-theme="dark"] .section-note,
html[data-theme="dark"] .metric-card-copy span,
html[data-theme="dark"] .metric-card-copy small,
html[data-theme="dark"] .rotation-metric-copy span,
html[data-theme="dark"] .rotation-metric-copy small,
html[data-theme="dark"] .visual-card-heading small,
html[data-theme="dark"] .motives-center span,
html[data-theme="dark"] .rotation-reason-head small,
html[data-theme="dark"] .footer,
html[data-theme="dark"] .stat .l,
html[data-theme="dark"] .future-card,
html[data-theme="dark"] .role .step-top,
html[data-theme="dark"] .contract{color:#98A4AB !important}
html[data-theme="dark"] .kpi .value,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .visual-card-heading span,
html[data-theme="dark"] .metric-card-copy b,
html[data-theme="dark"] .rotation-metric-copy b,
html[data-theme="dark"] .motives-center b,
html[data-theme="dark"] .rotation-reason-head b,
html[data-theme="dark"] .role-name,
html[data-theme="dark"] .contract b,
html[data-theme="dark"] .future-card b{color:#F1F5F6 !important}

html[data-theme="dark"] .visual-card-heading,
html[data-theme="dark"] .ranking-section-head,
html[data-theme="dark"] .rotation-reason-head{border-color:#2A3439}
html[data-theme="dark"] .absence-motives-card .motives-legend,
html[data-theme="dark"] .absence-motives-card .motives-legend .legend-item,
html[data-theme="dark"] .motivo-row{border-color:#293338}
html[data-theme="dark"] .absence-motives-card .motives-legend .legend-item > span:nth-child(2){color:#C3CDD2}
html[data-theme="dark"] .absence-motives-card .motives-legend .legend-item .v{color:#F0F4F5}
html[data-theme="dark"] .ranking-ausencias-scroll,
html[data-theme="dark"] .table-wrap{
  background:#131B1F;
  border-color:#29343A;
  box-shadow:none;
}
html[data-theme="dark"] .ranking-table thead th,
html[data-theme="dark"] th{
  background:#11181C !important;
  color:#98A4AB !important;
  border-bottom-color:#2B353A !important;
}
html[data-theme="dark"] .ranking-table tbody td,
html[data-theme="dark"] td{
  color:#DCE3E6;
  border-bottom-color:#242E33;
}
html[data-theme="dark"] .ranking-table tbody tr:hover td{background:#192226}
html[data-theme="dark"] .ranking-position{background:#202A2F;color:#D7DEE1}
html[data-theme="dark"] .ranking-share{color:#CBD4D8}
html[data-theme="dark"] .ranking-table .badge,
html[data-theme="dark"] .badge{
  background:#332318;
  color:#FFB260;
  border-color:#5A3A20;
}
html[data-theme="dark"] .motivos-details summary{
  background:#171F23;
  color:#E9EEF0;
  border-color:#303A40;
}
html[data-theme="dark"] .motivos-pop{
  background:#151D21;
  border-color:#303A40;
  box-shadow:0 14px 34px rgba(0,0,0,.36);
}
html[data-theme="dark"] .motivo-row span:first-child{color:#E8EDEF}

html[data-theme="dark"] .metric-hours{--metric-soft:#332019}
html[data-theme="dark"] .metric-priority{--metric-soft:#271E3D}
html[data-theme="dark"] .metric-people{--metric-soft:#182239}
html[data-theme="dark"] .metric-average{--metric-soft:#143129}
html[data-theme="dark"] .metric-rotation-altas{--rotation-soft:#143128}
html[data-theme="dark"] .metric-rotation-bajas{--rotation-soft:#381E1C}
html[data-theme="dark"] .metric-rotation-tasa{--rotation-soft:#143129}
html[data-theme="dark"] .rotation-reason-card.reason-altas{--reason-soft:#143128}
html[data-theme="dark"] .rotation-reason-card.reason-bajas{--reason-soft:#381E1C}
html[data-theme="dark"] .rotation-reason-head{border-bottom-color:#293338}
html[data-theme="dark"] .rotation-pop-note.show,
html[data-theme="dark"] .pop-note.show{
  background:#121B1F;
  border-color:#2A363B;
  color:#9FAAB0;
}
html[data-theme="dark"] .vac,
html[data-theme="dark"] .future-tag{
  background:#202A2F;
  border-color:#303B41;
  color:#AEB8BE;
}
html[data-theme="dark"] .track{background:#10171B;border-color:#2A3439}
html[data-theme="dark"] .footer{border-top-color:#263137}

@media(max-width:900px){
  .theme-option{min-width:38px;padding:0 8px}
  .theme-option .theme-label{display:none}
}


html[data-theme="dark"] .k1{--kpi-soft:#352018}
html[data-theme="dark"] .kpi.k2{--kpi-soft:#381E1C}
html[data-theme="dark"] .kpi.k3{--kpi-soft:#352817}
html[data-theme="dark"] .kpi.k4{--kpi-soft:#143129}
html[data-theme="dark"] .kpi-icon,
html[data-theme="dark"] .kpi.k2 .kpi-icon,
html[data-theme="dark"] .kpi.k3 .kpi-icon,
html[data-theme="dark"] .kpi.k4 .kpi-icon{
  box-shadow:none;
}
html[data-theme="dark"] .rotation-legend .legend-item{border-bottom-color:#293338}
html[data-theme="dark"] .rotation-legend .legend-item > span:nth-child(2){color:#C0C9CD}
html[data-theme="dark"] .rotation-legend .legend-item .v{color:#EFF3F4}
html[data-theme="dark"] .rotation-reason-head span{color:#929DA3}


/* =========================================================
   CORE · CONFIGURACIÓN · PROTOTIPO INTEGRADO V1
   Navegación + usuarios + rol base + permisos por módulo.
   Las modificaciones todavía no persisten en Supabase.
   ========================================================= */

.view-hidden{display:none!important}

.config-view{
  padding:18px 20px 26px;
}

.config-shell{
  display:grid;
  grid-template-columns:minmax(330px,.78fr) minmax(620px,1.45fr);
  gap:14px;
  align-items:start;
}

.config-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:15px;
  box-shadow:0 5px 18px rgba(20,29,33,.045);
  overflow:hidden;
}

.config-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:16px 17px;
  border-bottom:1px solid var(--line);
}

.config-card-title{
  margin:0;
  font-size:14px;
  font-weight:950;
  color:var(--ink);
}

.config-card-copy{
  margin-top:4px;
  font-size:9.8px;
  line-height:1.45;
  color:var(--muted);
  font-weight:650;
}

.config-primary-button{
  height:36px;
  padding:0 14px;
  border:1px solid #FF5C33;
  border-radius:9px;
  background:#FF5C33;
  color:#fff;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
  box-shadow:0 7px 16px rgba(255,92,51,.16);
}

.config-primary-button:hover{background:#FF6A45}

.config-toolbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) 150px;
  gap:9px;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
}

.config-input,
.config-select{
  width:100%;
  height:37px;
  border:1px solid var(--border);
  border-radius:9px;
  background:#FAFBFB;
  color:var(--ink);
  padding:0 11px;
  outline:none;
  font-size:10.5px;
  font-weight:700;
}

.config-input:focus,
.config-select:focus{
  border-color:#FF8A6B;
  box-shadow:0 0 0 3px rgba(255,92,51,.09);
}

.config-users-list{
  min-height:400px;
  max-height:600px;
  overflow:auto;
}

.config-user-row{
  display:grid;
  grid-template-columns:40px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  width:100%;
  padding:11px 14px;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  text-align:left;
  color:var(--ink);
  cursor:pointer;
}

.config-user-row:hover{background:#FAFBFB}
.config-user-row.selected{
  background:#FFF6F2;
  box-shadow:inset 3px 0 0 #FF5C33;
}

.config-user-avatar{
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  background:#F1F4F5;
  color:#354149;
  font-size:9px;
  font-weight:950;
}

.config-user-main{min-width:0}
.config-user-name{
  display:block;
  font-size:10.5px;
  font-weight:900;
  color:var(--ink);
}
.config-user-email{
  display:block;
  margin-top:3px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:9px;
  color:var(--muted);
}

.config-status{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-width:62px;
  justify-content:center;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid #CFEADD;
  background:#F2FBF6;
  color:#16804B;
  font-size:8.5px;
  font-weight:900;
}

.config-status:before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:#18A984;
}

.config-status.inactive{
  border-color:#DDE3E6;
  background:#F6F7F8;
  color:#78838A;
}
.config-status.inactive:before{background:#9BA5AA}

.config-empty{
  padding:26px 18px;
  text-align:center;
  color:var(--muted);
  font-size:10px;
}

.config-editor{
  padding:15px 16px 17px;
}

.config-editor-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.config-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.config-field.full{grid-column:1/-1}

.config-field label{
  font-size:9px;
  color:var(--muted);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.055em;
}

.config-account-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
}

.config-switch-row{
  height:58px;
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 11px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:#FBFCFC;
}

.config-switch-copy b{
  display:block;
  font-size:9.7px;
  color:var(--ink);
}
.config-switch-copy span{
  display:block;
  margin-top:3px;
  font-size:8.3px;
  color:var(--muted);
}

.config-toggle{
  appearance:none;
  width:34px;
  height:19px;
  border-radius:999px;
  background:#CBD3D7;
  cursor:pointer;
  position:relative;
  transition:.15s;
}
.config-toggle:after{
  content:"";
  position:absolute;
  width:15px;
  height:15px;
  border-radius:50%;
  left:2px;
  top:2px;
  background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.18);
  transition:.15s;
}
.config-toggle:checked{background:#18A984}
.config-toggle:checked:after{transform:translateX(15px)}

.config-password-box{
  margin-top:12px;
  padding:11px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#FBFCFC;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.config-password-copy b{
  display:block;
  font-size:9.7px;
  color:var(--ink);
}
.config-password-copy span{
  display:block;
  margin-top:3px;
  font-size:8.3px;
  color:var(--muted);
}

.config-secondary-button{
  height:33px;
  padding:0 11px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
  color:var(--ink);
  font-size:9px;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
}
.config-secondary-button:hover{border-color:#FF9B80;color:#E9522D}

.permissions-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin:18px 0 9px;
}

.permissions-head h3{
  margin:0;
  font-size:12px;
  font-weight:950;
  color:var(--ink);
}

.permissions-head p{
  margin:3px 0 0;
  font-size:8.8px;
  color:var(--muted);
}

.permissions-note{
  font-size:8.3px;
  color:var(--muted);
  text-align:right;
}

.permission-module{
  margin-bottom:8px;
  border:1px solid var(--border);
  border-radius:11px;
  overflow:hidden;
  background:#fff;
}

.permission-module.open{
  border-color:#FFB19C;
  box-shadow:0 0 0 1px rgba(255,92,51,.04);
}

.permission-module-head{
  width:100%;
  height:43px;
  padding:0 12px;
  border:0;
  background:#FAFBFB;
  color:var(--ink);
  display:flex;
  align-items:center;
  gap:9px;
  cursor:pointer;
  text-align:left;
}

.permission-module.open .permission-module-head{
  background:#FFF7F4;
}

.permission-module-icon{
  width:25px;
  height:25px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#F1F4F5;
  color:#4C5960;
  font-size:8px;
  font-weight:950;
}

.permission-module.open .permission-module-icon{
  background:#FFE7DE;
  color:#EE542E;
}

.permission-module-name{
  flex:1;
  font-size:10px;
  font-weight:950;
}

.permission-summary{
  font-size:8px;
  color:var(--muted);
  font-weight:800;
  white-space:nowrap;
}

.permission-chevron{
  color:#8A959B;
  font-size:12px;
  transition:.15s;
}
.permission-module.open .permission-chevron{transform:rotate(180deg)}

.permission-module-body{display:none}
.permission-module.open .permission-module-body{display:block}

.permission-grid-head,
.permission-subtype{
  display:grid;
  grid-template-columns:minmax(180px,1.8fr) repeat(4,minmax(65px,.55fr));
  align-items:center;
  gap:5px;
}

.permission-grid-head{
  padding:8px 11px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#FCFDFD;
  color:#7A858B;
  font-size:7.8px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
  text-align:center;
}
.permission-grid-head span:first-child{text-align:left}

.permission-subtype{
  padding:9px 11px;
  border-bottom:1px solid var(--line);
}
.permission-subtype:last-child{border-bottom:0}

.permission-subtype-copy b{
  display:block;
  font-size:9.3px;
  color:var(--ink);
}
.permission-subtype-copy span{
  display:block;
  margin-top:2px;
  font-size:7.7px;
  color:var(--muted);
}

.permission-check-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
}

.permission-check{
  appearance:none;
  width:18px;
  height:18px;
  border:1px solid #BFC8CD;
  border-radius:5px;
  background:#fff;
  cursor:pointer;
  position:relative;
}

.permission-check:checked{
  background:#FF5C33;
  border-color:#FF5C33;
}
.permission-check:checked:after{
  content:"✓";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:11px;
  font-weight:950;
}

.config-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--line);
}

.config-prototype-note{
  margin-top:8px;
  text-align:right;
  color:var(--muted);
  font-size:7.8px;
}

html[data-theme="dark"] .config-card,
html[data-theme="dark"] .permission-module,
html[data-theme="dark"] .permission-check{
  background:#151D20;
  border-color:#2B363B;
}
html[data-theme="dark"] .config-card-head,
html[data-theme="dark"] .config-toolbar,
html[data-theme="dark"] .config-account-row,
html[data-theme="dark"] .config-actions,
html[data-theme="dark"] .permission-grid-head,
html[data-theme="dark"] .permission-subtype{
  border-color:#293438;
}
html[data-theme="dark"] .config-input,
html[data-theme="dark"] .config-select,
html[data-theme="dark"] .config-switch-row,
html[data-theme="dark"] .config-password-box,
html[data-theme="dark"] .permission-module-head,
html[data-theme="dark"] .permission-grid-head{
  background:#11191C;
  border-color:#2B363B;
  color:#EEF2F3;
}
html[data-theme="dark"] .config-user-row{border-bottom-color:#293438}
html[data-theme="dark"] .config-user-row:hover{background:#192225}
html[data-theme="dark"] .config-user-row.selected{background:#2B1C17}
html[data-theme="dark"] .config-user-avatar{background:#202A2E;border-color:#344046;color:#E7ECEE}
html[data-theme="dark"] .config-secondary-button{background:#11191C;border-color:#344046;color:#E7ECEE}
html[data-theme="dark"] .permission-module.open .permission-module-head{background:#2A1B17}
html[data-theme="dark"] .permission-subtype-copy b,
html[data-theme="dark"] .config-card-title,
html[data-theme="dark"] .config-field label,
html[data-theme="dark"] .config-switch-copy b,
html[data-theme="dark"] .config-password-copy b,
html[data-theme="dark"] .permissions-head h3,
html[data-theme="dark"] .permission-module-name,
html[data-theme="dark"] .config-user-name{color:#EEF2F3}
html[data-theme="dark"] .permission-check{background:#11191C;border-color:#536168}
html[data-theme="dark"] .permission-check:checked{background:#FF5C33;border-color:#FF5C33}

@media(max-width:1250px){
  .config-shell{grid-template-columns:1fr}
  .config-users-list{min-height:220px;max-height:350px}
}
@media(max-width:760px){
  .config-editor-grid,
  .config-account-row{grid-template-columns:1fr}
  .permission-grid-head,
  .permission-subtype{
    grid-template-columns:minmax(120px,1.5fr) repeat(4,48px);
  }
  .permission-summary{display:none}
  .config-toolbar{grid-template-columns:1fr}
}


/* =========================================================
   CONFIGURACIÓN V2 · navegación lista -> edición full screen
   ========================================================= */
.config-shell{
  grid-template-columns:1fr !important;
}
.config-card-users{
  width:100%;
}
.config-card-editor{
  width:100%;
}
.config-editor-hidden{
  display:none !important;
}
.config-users-hidden{
  display:none !important;
}

.config-user-row{
  grid-template-columns:40px minmax(0,1fr) auto auto !important;
}

.config-edit-user-button{
  height:30px;
  padding:0 10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
  color:var(--ink);
  font-size:8.8px;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
}
.config-edit-user-button:hover{
  border-color:#FF9A7D;
  color:#E9532E;
  background:#FFF8F5;
}

.config-editor-topline{
  display:flex;
  align-items:center;
  gap:10px;
}
.config-back-button{
  width:34px;
  height:34px;
  border-radius:9px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--ink);
  font-size:15px;
  font-weight:900;
  cursor:pointer;
}
.config-back-button:hover{
  border-color:#FF9A7D;
  color:#E9532E;
}

html[data-theme="dark"] .config-edit-user-button,
html[data-theme="dark"] .config-back-button{
  background:#11191C;
  border-color:#344046;
  color:#E7ECEE;
}
html[data-theme="dark"] .config-edit-user-button:hover,
html[data-theme="dark"] .config-back-button:hover{
  border-color:#FF8A6B;
  color:#FF8065;
  background:#201713;
}


/* Ajuste visual V2.1 · acción Editar en usuarios */
.config-user-row{
  grid-template-columns:40px minmax(0,1fr) auto !important;
}

.config-user-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

.config-edit-user-button{
  height:28px;
  min-width:62px;
  padding:0 12px;
  border:1px solid rgba(255,92,51,.42);
  border-radius:8px;
  background:rgba(255,92,51,.08);
  color:#FF6B48;
  font-size:8.8px;
  font-weight:950;
  cursor:pointer;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
}

.config-edit-user-button:hover{
  background:#FF5C33;
  border-color:#FF5C33;
  color:#fff;
  transform:translateY(-1px);
}

html[data-theme="light"] .config-edit-user-button{
  background:#FFF6F2;
  color:#E9532E;
}

html[data-theme="dark"] .config-edit-user-button{
  background:rgba(255,92,51,.08);
  border-color:rgba(255,92,51,.38);
  color:#FF8065;
}
html[data-theme="dark"] .config-edit-user-button:hover{
  background:#FF5C33;
  border-color:#FF5C33;
  color:#fff;
}


.config-primary-button:disabled{
  opacity:.62;
  cursor:not-allowed;
  transform:none!important;
  box-shadow:none;
}


.config-status.pending{
  border-color:#F0D8A8;
  background:#FFF8E8;
  color:#A66A00;
}
.config-status.pending:before{
  background:#F0A83A;
}

html[data-theme="dark"] .config-status.pending{
  border-color:#6B5730;
  background:#2B2417;
  color:#F2C46F;
}


.refresh-data-button{
  height:40px;
  padding:0 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  color:var(--text);
  font-weight:800;
  font-size:12px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:.16s ease;
}
.refresh-data-button:hover{
  border-color:var(--accent);
  color:var(--accent);
}
.refresh-data-button:disabled{
  cursor:not-allowed;
  opacity:.62;
}
.refresh-data-button.is-loading .refresh-data-icon{
  display:inline-block;
  animation:coreRefreshSpin .9s linear infinite;
}
@keyframes coreRefreshSpin{
  to{transform:rotate(360deg)}
}


/* =========================================================
   VENTAS · TABLERO DE SEDE · PLACEHOLDER DE ARQUITECTURA
   Solo prueba de navegación. Sin datos ni lógica comercial.
   ========================================================= */
.ventas-placeholder-surface{
  min-height:calc(100vh - 132px);
}
.ventas-placeholder-hero{
  display:flex;
  align-items:center;
  gap:16px;
  padding:22px;
  border:1px solid var(--border);
  border-radius:15px;
  background:linear-gradient(135deg,#FFFFFF 0%,#FFF8F5 100%);
}
.ventas-placeholder-icon{
  width:48px;
  height:48px;
  flex:0 0 48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:#FFF0EA;
  border:1px solid #FFD3C5;
  color:#FF5C33;
  font-size:16px;
  font-weight:950;
}
.ventas-placeholder-kicker{
  margin-bottom:4px;
  color:#FF5C33;
  font-size:9px;
  font-weight:950;
  letter-spacing:.11em;
}
.ventas-placeholder-hero h2{
  margin:0;
  font-size:22px;
  color:var(--ink);
  letter-spacing:-.02em;
}
.ventas-placeholder-hero p{
  max-width:760px;
  margin:6px 0 0;
  color:var(--muted);
  font-size:10.5px;
  line-height:1.5;
  font-weight:650;
}
.ventas-placeholder-badge{
  margin-left:auto;
  padding:6px 10px;
  border-radius:999px;
  background:#FFF0EA;
  color:#E9532E;
  border:1px solid #FFD3C5;
  font-size:8px;
  font-weight:950;
  white-space:nowrap;
}
.ventas-placeholder-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
.ventas-placeholder-card{
  min-height:126px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--card);
}
.ventas-placeholder-card > span{
  display:inline-flex;
  width:27px;
  height:27px;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:#FFF0EA;
  color:#FF5C33;
  font-size:8px;
  font-weight:950;
}
.ventas-placeholder-card b{
  display:block;
  margin-top:15px;
  font-size:11px;
  color:var(--ink);
}
.ventas-placeholder-card small{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:9px;
  line-height:1.4;
}
html[data-theme="dark"] .ventas-placeholder-hero{
  background:linear-gradient(135deg,#171F23 0%,#211713 100%);
  border-color:#2A3439;
}
html[data-theme="dark"] .ventas-placeholder-card{
  background:linear-gradient(180deg,#171F23,#141B1F);
  border-color:#2A3439;
}
html[data-theme="dark"] .ventas-placeholder-icon,
html[data-theme="dark"] .ventas-placeholder-card > span,
html[data-theme="dark"] .ventas-placeholder-badge{
  background:#352018;
  border-color:#6C3424;
  color:#FF8065;
}
@media(max-width:1100px){
  .ventas-placeholder-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .ventas-placeholder-hero{align-items:flex-start;flex-wrap:wrap}
  .ventas-placeholder-badge{margin-left:0}
  .ventas-placeholder-grid{grid-template-columns:1fr}
}


/* =========================================================
   VENTAS · TABLERO DE SEDE · DEMO VISUAL CON DATOS FICTICIOS
   Referencia temporal. Sin API ni lógica comercial real.
   ========================================================= */
.ventas-demo-surface{
  padding:14px;
}
.ventas-demo-toolbar{
  display:grid;
  grid-template-columns:210px minmax(360px,1fr) 180px;
  gap:12px;
  align-items:stretch;
  margin-bottom:12px;
}
.ventas-demo-filter{
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card);
  padding:10px 12px;
}
.ventas-demo-filter label{
  display:block;
  margin-bottom:6px;
  font-size:8.5px;
  font-weight:900;
  color:var(--muted);
  text-transform:uppercase;
}
.ventas-demo-filter select{
  width:100%;
  border:0;
  background:transparent;
  color:var(--ink);
  font-size:10.5px;
  font-weight:900;
  outline:none;
}
.ventas-demo-total{
  border-radius:12px;
  padding:10px 18px;
  color:#fff;
  background:
    linear-gradient(90deg,rgba(255,255,255,.02),rgba(255,255,255,.01)),
    #111719;
  border:1px solid #273237;
  position:relative;
  overflow:hidden;
}
.ventas-demo-total:after{
  content:"";
  position:absolute;
  right:16px;
  top:15px;
  width:42%;
  height:30px;
  opacity:.65;
  background:
    linear-gradient(165deg,transparent 0 10%,#20B774 11% 13%,transparent 14% 22%,#20B774 23% 25%,transparent 26% 36%,#20B774 37% 39%,transparent 40% 50%,#20B774 51% 53%,transparent 54%);
}
.ventas-demo-total span,
.ventas-demo-total small{
  display:block;
  font-size:8px;
  color:#B9C3C7;
  font-weight:800;
}
.ventas-demo-total strong{
  display:block;
  margin:2px 0 3px;
  font-size:21px;
  letter-spacing:-.025em;
}
.ventas-demo-total small b{color:#1CC779}

.ventas-demo-kpis{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:9px;
  margin-bottom:12px;
}
.ventas-demo-kpi{
  min-width:0;
  min-height:88px;
  display:flex;
  gap:10px;
  align-items:center;
  padding:11px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card);
}
.ventas-demo-kpi-icon{
  width:32px;
  height:32px;
  flex:0 0 32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#FFF0EA;
  color:#FF5C33;
  font-size:14px;
  font-weight:950;
}
.ventas-demo-kpi div{min-width:0}
.ventas-demo-kpi small,
.ventas-demo-selected small,
.ventas-demo-progress small,
.ventas-demo-trend small,
.ventas-demo-goals > small{
  display:block;
  color:var(--muted);
  font-size:7.3px;
  font-weight:900;
  text-transform:uppercase;
}
.ventas-demo-kpi strong{
  display:block;
  margin-top:3px;
  font-size:12px;
  color:var(--ink);
  white-space:nowrap;
}
.ventas-demo-kpi em{
  display:block;
  margin-top:4px;
  font-style:normal;
  color:var(--muted);
  font-size:7.5px;
  font-weight:700;
}

.ventas-demo-main-grid{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:10px;
  margin-bottom:10px;
}
.ventas-demo-card{
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card);
  overflow:hidden;
}
.ventas-demo-section-head{
  min-height:39px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid var(--line);
}
.ventas-demo-section-head h3{
  margin:0;
  font-size:10px;
  color:var(--ink);
  text-transform:uppercase;
  letter-spacing:.02em;
}
.ventas-demo-section-head button{
  border:0;
  background:none;
  color:#FF5C33;
  font-size:8px;
  font-weight:900;
  cursor:pointer;
}
.ventas-demo-mini-legend{
  color:var(--muted);
  font-size:7px;
  font-weight:700;
}
.ventas-demo-table-wrap{overflow:auto}
.ventas-demo-table{
  width:100%;
  border-collapse:collapse;
}
.ventas-demo-table th{
  padding:8px 9px;
  background:#FAFBFB;
  color:var(--muted);
  font-size:7px;
  text-transform:uppercase;
  white-space:nowrap;
}
.ventas-demo-table td{
  padding:8px 9px;
  border-bottom:1px solid var(--line);
  color:var(--ink);
  font-size:8px;
  white-space:nowrap;
}
.ventas-demo-table tbody tr:last-child td{border-bottom:0}
.ventas-demo-cat{
  display:inline-flex;
  min-width:26px;
  justify-content:center;
  padding:3px 7px;
  border-radius:999px;
  background:#FFE3E3;
  color:#A44747;
  font-weight:900;
}
.ventas-demo-positive{color:#16A366!important;font-weight:900}
.ventas-demo-negative{color:#E05248!important;font-weight:900}
.ventas-demo-total-row td{
  background:#FFF6E8;
  font-weight:900;
}

.ventas-demo-selected{
  border-left:3px solid #FF5C33;
}
.ventas-demo-selected-top{
  display:grid;
  grid-template-columns:1.15fr 1.15fr .75fr .85fr;
  gap:0;
}
.ventas-demo-selected-top > div{
  min-width:0;
  padding:14px;
  border-right:1px solid var(--line);
}
.ventas-demo-selected-top > div:last-child{border-right:0}
.ventas-demo-selected h3{
  margin:4px 0 10px;
  font-size:12px;
  color:var(--ink);
}
.ventas-demo-selected-metrics{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:9px;
}
.ventas-demo-selected-metrics span{min-width:0}
.ventas-demo-selected-metrics b{
  display:block;
  margin-top:4px;
  color:var(--ink);
  font-size:11px;
}
.ventas-demo-progress-bar{
  height:9px;
  margin-top:10px;
  border-radius:999px;
  background:#ECEFF0;
  overflow:hidden;
}
.ventas-demo-progress-bar span{
  display:block;
  height:100%;
  border-radius:999px;
  background:#FF6A2A;
}
.ventas-demo-progress-copy{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:7px;
  color:var(--muted);
  font-size:7.3px;
  font-weight:700;
}
.ventas-demo-trend b{
  display:block;
  margin-top:7px;
  font-size:10px;
}
.ventas-demo-spark{
  margin-top:12px;
  color:#FF6A2A;
  font-size:17px;
  letter-spacing:-4px;
  overflow:hidden;
}
.ventas-demo-goals{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.ventas-demo-goals > small{margin-bottom:2px}
.ventas-demo-goals span{
  display:flex;
  justify-content:space-between;
  gap:8px;
  color:var(--muted);
  font-size:7.6px;
}
.ventas-demo-goals b{color:var(--ink)}
.ventas-demo-members{
  border-top:1px solid var(--line);
}
.ventas-demo-no-bonus{
  padding:3px 7px;
  border-radius:5px;
  background:#FFE8E8;
  color:#C14A45;
  font-weight:900;
}
.ventas-demo-footer{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  color:var(--muted);
  font-size:7.5px;
  font-weight:700;
}

/* Dark */
html[data-theme="dark"] .ventas-demo-filter,
html[data-theme="dark"] .ventas-demo-kpi,
html[data-theme="dark"] .ventas-demo-card{
  background:linear-gradient(180deg,#171F23,#141B1F);
  border-color:#2A3439;
}
html[data-theme="dark"] .ventas-demo-kpi-icon{
  background:#352018;
  color:#FF8065;
}
html[data-theme="dark"] .ventas-demo-table th{
  background:#11181C;
  color:#98A4AB;
}
html[data-theme="dark"] .ventas-demo-table td{
  border-bottom-color:#242E33;
  color:#DCE3E6;
}
html[data-theme="dark"] .ventas-demo-total-row td{
  background:#2C2418;
}
html[data-theme="dark"] .ventas-demo-progress-bar{
  background:#252F34;
}
html[data-theme="dark"] .ventas-demo-section-head,
html[data-theme="dark"] .ventas-demo-members,
html[data-theme="dark"] .ventas-demo-selected-top > div{
  border-color:#2A3439;
}

@media(max-width:1450px){
  .ventas-demo-kpis{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:1150px){
  .ventas-demo-toolbar{grid-template-columns:1fr 1fr}
  .ventas-demo-total{grid-column:1/-1;grid-row:1}
  .ventas-demo-main-grid{grid-template-columns:1fr}
  .ventas-demo-selected-top{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .ventas-demo-toolbar{grid-template-columns:1fr}
  .ventas-demo-kpis{grid-template-columns:1fr 1fr}
  .ventas-demo-selected-top{grid-template-columns:1fr}
  .ventas-demo-selected-top > div{border-right:0;border-bottom:1px solid var(--line)}
  .ventas-demo-selected-metrics{grid-template-columns:1fr 1fr}
}


/* =========================================================
   FIX · MOTIVOS DE AUSENCIA EN MODO OSCURO
   Mantiene la semántica de estado, pero unifica la pastilla
   con el lenguaje visual naranja de CORE.
   ========================================================= */
html[data-theme="dark"] .motivo-chip,
html[data-theme="dark"] .motivo-chip.ausencia-justificada,
html[data-theme="dark"] .motivo-chip.ausencia-injustificada,
html[data-theme="dark"] .motivo-chip.ausencia-sin-clasificacion{
  background:rgba(255,92,51,.14) !important;
  border-color:rgba(255,92,51,.34) !important;
  color:#FF9A7E !important;
  box-shadow:inset 0 0 0 1px rgba(255,92,51,.035);
}

html[data-theme="dark"] .motivos-pop .motivo-count{
  background:rgba(255,157,31,.16) !important;
  color:#FFB35C !important;
  border:1px solid rgba(255,157,31,.18);
}

html[data-theme="dark"] .motivos-pop .motivo-row{
  border-bottom-color:#293338;
}

html[data-theme="dark"] .motivos-pop{
  background:#151D21;
  border-color:#303A40;
}

/* =========================================================
   HOME · Pantalla inicial de plataforma
   ========================================================= */
.home-view{
  padding:20px;
}
.home-hero{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  min-height:210px;
  padding:34px 38px;
  border:1px solid var(--line);
  border-radius:20px;
  background:
    radial-gradient(circle at 88% 18%, rgba(255,92,51,.16), transparent 30%),
    var(--panel);
}
.home-hero-copy{
  position:relative;
  z-index:1;
  max-width:720px;
}
.home-kicker{
  display:block;
  margin-bottom:10px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  color:var(--accent);
}
.home-hero h2{
  margin:0;
  font-size:clamp(28px,3vw,44px);
  line-height:1.05;
}
.home-hero p{
  margin:12px 0 0;
  color:var(--muted);
  font-size:15px;
}
.home-hero-mark{
  position:absolute;
  right:28px;
  bottom:-22px;
  font-size:clamp(84px,11vw,150px);
  font-weight:950;
  letter-spacing:.12em;
  color:rgba(255,255,255,.035);
  pointer-events:none;
  user-select:none;
}
[data-theme="light"] .home-hero-mark{
  color:rgba(20,30,35,.045);
}
.home-modules{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:18px;
}
.home-module-card{
  display:flex;
  flex-direction:column;
  min-height:255px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
}
.home-module-head{
  display:flex;
  align-items:center;
  gap:12px;
}
.home-module-icon{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid rgba(255,92,51,.28);
  background:rgba(255,92,51,.11);
  color:var(--accent);
  font-size:12px;
  font-weight:900;
}
.home-module-label{
  display:block;
  font-size:9px;
  font-weight:900;
  letter-spacing:.11em;
  color:var(--muted);
}
.home-module-card h3{
  margin:2px 0 0;
  font-size:19px;
}
.home-module-card > p{
  margin:16px 0 20px;
  color:var(--muted);
  line-height:1.45;
}
.home-submodule-button{
  width:100%;
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 15px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--surface);
  color:var(--text);
  text-align:left;
  cursor:pointer;
  transition:border-color .18s ease, transform .18s ease, background .18s ease;
}
.home-submodule-button:hover{
  transform:translateY(-1px);
  border-color:rgba(255,92,51,.55);
  background:rgba(255,92,51,.06);
}
.home-submodule-button span:first-child{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.home-submodule-button b{
  font-size:12px;
}
.home-submodule-button small{
  color:var(--muted);
  font-size:10px;
}

/* Gráfico mensual: evita tarjeta excesivamente alta por el contenido vecino. */
.absence-overview-grid{
  align-items:start;
}
.absence-chart-card{
  align-self:start;
}
.absence-chart-card .chartbox{
  height:300px;
  min-height:300px;
  max-height:300px;
}
.absence-chart-card canvas{
  width:100% !important;
  height:100% !important;
}

@media(max-width:1000px){
  .home-modules{grid-template-columns:1fr}
}
@media(max-width:700px){
  .home-view{padding:12px}
  .home-hero{padding:26px 22px; min-height:180px}
  .home-modules{gap:12px}
  .absence-chart-card .chartbox{
    height:260px;
    min-height:260px;
    max-height:260px;
  }
}


/* =========================================================
   HOME · Ajuste visual v2
   ========================================================= */
.home-view{
  min-height:calc(100vh - 74px);
  padding:20px;
}

.home-hero{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  min-height:calc(100vh - 135px);
  padding:42px 38px;
  border:1px solid var(--line);
  border-radius:20px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,92,51,.07), transparent 34%),
    var(--panel);
}

.home-hero-copy{
  position:relative;
  z-index:2;
  max-width:720px;
}

.home-hero-mark{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-family:"Roboto", Arial, sans-serif;
  font-size:clamp(110px,18vw,260px);
  line-height:1;
  font-weight:900;
  letter-spacing:.16em;
  color:rgba(255,255,255,.045);
  transform:none;
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
}

[data-theme="light"] .home-hero-mark{
  color:rgba(20,30,35,.055);
}

@media(max-width:700px){
  .home-view{
    min-height:auto;
    padding:12px;
  }

  .home-hero{
    min-height:520px;
    padding:28px 22px;
  }

  .home-hero-mark{
    font-size:clamp(72px,24vw,130px);
    letter-spacing:.11em;
  }
}


/* =========================================================
   HOME · Workspace personal v3
   ========================================================= */
.home-view{
  min-height:calc(100vh - 74px);
  padding:20px;
}

.home-hero{
  position:relative;
  overflow:hidden;
  min-height:250px;
  padding:38px 40px;
  border:1px solid var(--line);
  border-radius:20px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,92,51,.055), transparent 38%),
    var(--panel);
}

.home-hero-copy{
  position:relative;
  z-index:2;
  max-width:680px;
}

.home-kicker{
  color:#FF6A3D;
}

html[data-theme="light"] .home-kicker{
  color:#A94A32;
}

.home-hero-mark{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-family:"Roboto", Arial, sans-serif;
  font-size:clamp(96px,14vw,210px);
  line-height:1;
  font-weight:900;
  letter-spacing:.16em;
  color:rgba(255,255,255,.035);
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
}

html[data-theme="light"] .home-hero-mark{
  color:rgba(20,30,35,.045);
}

.home-workspace-grid{
  display:grid;
  grid-template-columns:minmax(0,1.75fr) minmax(300px,.75fr);
  gap:16px;
  margin-top:16px;
  align-items:stretch;
}

.home-calendar-card,
.home-activity-card{
  min-width:0;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
}

.home-calendar-card{
  padding:20px;
}

.home-activity-card{
  display:flex;
  flex-direction:column;
  padding:20px;
}

.home-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}

.home-card-head h3{
  margin:4px 0 4px;
  font-size:18px;
}

.home-card-head p{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}

.home-card-kicker{
  display:block;
  color:var(--accent);
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
}

html[data-theme="light"] .home-card-kicker{
  color:#A94A32;
}

.home-coming-soon{
  flex:0 0 auto;
  padding:6px 9px;
  border-radius:999px;
  border:1px solid rgba(255,92,51,.22);
  background:rgba(255,92,51,.08);
  color:var(--accent);
  font-size:9px;
  font-weight:900;
  letter-spacing:.03em;
}

.home-calendar-layout{
  display:grid;
  grid-template-columns:minmax(320px,1fr) minmax(300px,.9fr);
  gap:16px;
}

.home-calendar-month,
.home-agenda{
  min-width:0;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--surface);
}

.home-calendar-month{
  padding:16px;
}

.home-calendar-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:15px;
}

.home-calendar-toolbar strong{
  font-size:13px;
}

.home-calendar-nav{
  width:30px;
  height:30px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--panel);
  color:var(--muted);
  font-size:19px;
  cursor:not-allowed;
}

.home-calendar-weekdays,
.home-calendar-days{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:6px;
}

.home-calendar-weekdays{
  margin-bottom:7px;
}

.home-calendar-weekdays span{
  padding:4px 0;
  color:var(--muted);
  text-align:center;
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
}

.home-calendar-days span{
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:1.2;
  min-height:34px;
  border-radius:9px;
  color:var(--text);
  font-size:11px;
  font-weight:700;
}

.home-calendar-days .is-muted{
  opacity:.35;
}

.home-calendar-days .has-event::after{
  content:"";
  position:absolute;
  bottom:5px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--accent);
}

.home-calendar-days .is-today{
  background:rgba(255,92,51,.12);
  color:var(--accent);
  box-shadow:inset 0 0 0 1px rgba(255,92,51,.25);
}

.home-agenda{
  display:flex;
  flex-direction:column;
  padding:16px;
}

.home-agenda-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:10px;
  font-weight:800;
}

.home-agenda-list{
  display:flex;
  flex-direction:column;
  gap:0;
}

.home-agenda-item{
  position:relative;
  display:grid;
  grid-template-columns:58px minmax(0,1fr) 8px;
  gap:12px;
  align-items:center;
  padding:15px 0;
  border-bottom:1px solid var(--line);
}

.home-agenda-time{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.home-agenda-time b{
  font-size:12px;
}

.home-agenda-time span,
.home-agenda-copy span{
  color:var(--muted);
  font-size:9px;
}

.home-agenda-copy{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}

.home-agenda-copy b{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
}

.home-agenda-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
}

.home-calendar-actions{
  display:flex;
  gap:8px;
  margin-top:auto;
  padding-top:14px;
}

.home-calendar-actions button{
  flex:1 1 0;
  padding:10px 11px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel);
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  cursor:not-allowed;
  opacity:.72;
}

.home-empty-state{
  flex:1 1 auto;
  min-height:260px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:28px 20px;
  text-align:center;
  border:1px dashed var(--line);
  border-radius:15px;
  background:var(--surface);
}

.home-empty-icon{
  display:grid;
  place-items:center;
  width:50px;
  height:50px;
  border-radius:15px;
  background:rgba(255,92,51,.09);
  color:var(--accent);
  font-size:24px;
}

.home-empty-state b{
  margin-top:3px;
  font-size:12px;
}

.home-empty-state span{
  max-width:230px;
  color:var(--muted);
  font-size:10px;
  line-height:1.5;
}

@media(max-width:1150px){
  .home-workspace-grid{
    grid-template-columns:1fr;
  }

  .home-calendar-layout{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:820px){
  .home-calendar-layout{
    grid-template-columns:1fr;
  }

  .home-hero{
    min-height:220px;
    padding:30px 24px;
  }

  .home-hero-mark{
    font-size:clamp(78px,20vw,150px);
    letter-spacing:.12em;
  }
}

@media(max-width:560px){
  .home-view{
    padding:12px;
  }

  .home-hero{
    min-height:210px;
  }

  .home-calendar-card,
  .home-activity-card{
    padding:14px;
  }

  .home-card-head{
    flex-direction:column;
  }

  .home-calendar-actions{
    flex-direction:column;
  }
}


/* =========================================================
   HOME · Ajuste visual v4
   - CORE alineado a la derecha y centrado verticalmente
   - Paleta dark consistente con identidad CORE
   ========================================================= */

/* CORE como marca de agua: extremo derecho, centrado vertical */
.home-hero-mark{
  inset:auto 4.5% auto auto;
  top:50%;
  transform:translateY(-50%);
  display:block;
  width:auto;
  height:auto;
  place-items:unset;
  text-align:right;
  font-family:"Roboto", Arial, sans-serif;
  font-size:clamp(96px,13vw,195px);
  line-height:.88;
  font-weight:900;
  letter-spacing:.13em;
  color:rgba(255,255,255,.038);
}

/* Mantener margen visual equivalente arriba y abajo */
.home-hero{
  display:flex;
  align-items:center;
}

.home-hero-copy{
  align-self:flex-start;
}

/* Identidad CORE en modo oscuro: evitar verdes en labels de Home/Calendar */
html[data-theme="dark"] .home-kicker,
html[data-theme="dark"] .home-card-kicker{
  color:#FF6A3D;
}

html[data-theme="dark"] .home-coming-soon{
  color:#FF8A67;
  border-color:rgba(255,92,51,.28);
  background:rgba(255,92,51,.09);
}

/* Eventos del calendario */
html[data-theme="dark"] .home-calendar-days .has-event::after,
html[data-theme="dark"] .home-agenda-dot{
  background:#FF6A3D;
}

html[data-theme="dark"] .home-calendar-days .is-today{
  color:#FF7A55;
  background:rgba(255,92,51,.13);
  box-shadow:inset 0 0 0 1px rgba(255,92,51,.30);
}

/* Tipografía del calendario más integrada al resto de la UI */
html[data-theme="dark"] .home-calendar-toolbar strong,
html[data-theme="dark"] .home-calendar-weekdays span,
html[data-theme="dark"] .home-calendar-days span,
html[data-theme="dark"] .home-agenda-head,
html[data-theme="dark"] .home-agenda-time b,
html[data-theme="dark"] .home-agenda-copy b{
  color:var(--text);
}

html[data-theme="dark"] .home-calendar-weekdays span,
html[data-theme="dark"] .home-agenda-head{
  opacity:.78;
}

html[data-theme="dark"] .home-agenda-time span,
html[data-theme="dark"] .home-agenda-copy span{
  color:var(--muted);
}

/* Icono de actividad también en naranja para dark */
html[data-theme="dark"] .home-empty-icon{
  color:#FF6A3D;
  background:rgba(255,92,51,.10);
}

/* Mobile: recentrar para que no choque con el texto */
@media(max-width:820px){
  .home-hero-mark{
    right:50%;
    top:67%;
    transform:translate(50%,-50%);
    text-align:center;
    font-size:clamp(76px,22vw,140px);
  }

  .home-hero{
    align-items:flex-start;
  }
}


/* =========================================================
   LIGHT MODE · Identidad visual CORE v5
   Objetivo: reducir blanco puro, mejorar jerarquía y lectura
   ========================================================= */

html[data-theme="light"]{
  --bg:#EEF1F3;
  --panel:#F7F8F9;
  --surface:#FFFFFF;
  --text:#172027;
  --muted:#68737B;
  --line:#D9DEE2;
  --accent:#D95A34;
}

/* Fondo general menos blanco y más institucional */
html[data-theme="light"] body{
  background:
    linear-gradient(
      180deg,
      #EEF1F3 0%,
      #E9EDF0 100%
    );
  color:var(--text);
}

/* Header y sidebar conservan contraste */
html[data-theme="light"] .topbar,
html[data-theme="light"] .sidebar{
  background:#F9FAFB;
  border-color:#D9DEE2;
}

/* Hero con tono marfil/gris muy suave */
html[data-theme="light"] .home-hero{
  background:
    radial-gradient(
      circle at 76% 48%,
      rgba(217,90,52,.07),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #FAFBFB 0%,
      #F2F5F6 100%
    );
  border-color:#D8DEE2;
  box-shadow:
    0 1px 0 rgba(255,255,255,.75) inset;
}

/* CORE watermark más elegante y menos lavado */
html[data-theme="light"] .home-hero-mark{
  color:rgba(23,32,39,.055);
}

/* Kicker con identidad CORE sin saturación */
html[data-theme="light"] .home-kicker,
html[data-theme="light"] .home-card-kicker{
  color:#B64F31;
}

/* Tarjetas principales */
html[data-theme="light"] .home-calendar-card,
html[data-theme="light"] .home-activity-card{
  background:
    linear-gradient(
      180deg,
      #F9FAFB 0%,
      #F4F6F7 100%
    );
  border-color:#D9DEE2;
  box-shadow:
    0 1px 0 rgba(255,255,255,.75) inset;
}

/* Subtarjetas */
html[data-theme="light"] .home-calendar-month,
html[data-theme="light"] .home-agenda,
html[data-theme="light"] .home-empty-state{
  background:#FFFFFF;
  border-color:#DDE2E5;
}

/* Encabezados y textos secundarios */
html[data-theme="light"] .home-card-head p,
html[data-theme="light"] .home-agenda-time span,
html[data-theme="light"] .home-agenda-copy span,
html[data-theme="light"] .home-empty-state span{
  color:#748089;
}

/* Calendario: tipografía con más jerarquía */
html[data-theme="light"] .home-calendar-toolbar strong{
  color:#1A232A;
}

html[data-theme="light"] .home-calendar-weekdays span{
  color:#5D6971;
}

html[data-theme="light"] .home-calendar-days span{
  color:#1C252C;
}

html[data-theme="light"] .home-calendar-days .is-muted{
  color:#A6AFB5;
  opacity:1;
}

/* Día actual: naranja sobrio */
html[data-theme="light"] .home-calendar-days .is-today{
  color:#A9492E;
  background:#FBE9E2;
  box-shadow:
    inset 0 0 0 1px #E7B7A7;
}

html[data-theme="light"] .home-calendar-days .has-event::after,
html[data-theme="light"] .home-agenda-dot{
  background:#D95A34;
}

/* Badge próximamente sin verde */
html[data-theme="light"] .home-coming-soon{
  color:#B64F31;
  border-color:#E6B6A7;
  background:#FCECE6;
}

/* Botones mock con contraste legible */
html[data-theme="light"] .home-calendar-actions button{
  background:#F5F7F8;
  border-color:#D8DEE2;
  color:#7A858D;
}

/* Actividad */
html[data-theme="light"] .home-empty-icon{
  color:#B64F31;
  background:#FBE9E2;
}

/* Navegación lateral: selected states más claros */
html[data-theme="light"] .nav-module.active,
html[data-theme="light"] .nav-group-trigger.active,
html[data-theme="light"] .nav-subitem.active{
  background:#F8E9E3;
  border-color:#E8B8A8;
  color:#8E3D27;
}

/* Evitar que todo se vea plano */
html[data-theme="light"] .home-calendar-card,
html[data-theme="light"] .home-activity-card,
html[data-theme="light"] .home-hero{
  box-shadow:
    0 8px 24px rgba(22,31,37,.035);
}

/* Línea sutil entre agenda y contenido */
html[data-theme="light"] .home-agenda-head,
html[data-theme="light"] .home-agenda-item{
  border-color:#E2E6E9;
}


/* =========================================================
   LIGHT MODE · Identidad CORE v6
   Inspirada en tableros operativos CORE:
   negro + blanco + gris claro + naranja
   ========================================================= */

html[data-theme="light"]{
  --bg:#F1F2F3;
  --panel:#F7F7F7;
  --surface:#FFFFFF;
  --text:#111820;
  --muted:#66717A;
  --line:#D8DDE1;
  --accent:#FF6A2A;
}

html[data-theme="light"] body{
  background:#ECEFF1;
  color:var(--text);
}

/* Header principal claro, pero con identidad fuerte */
html[data-theme="light"] .topbar{
  background:#FFFFFF;
  border-bottom:1px solid #D7DBDE;
}

/* Sidebar inspirado en bloque de cabecera negro */
html[data-theme="light"] .sidebar{
  background:#0B1013;
  border-right:1px solid #20272C;
  color:#FFFFFF;
}

html[data-theme="light"] .sidebar .brand,
html[data-theme="light"] .sidebar .nav-module,
html[data-theme="light"] .sidebar .nav-group-trigger,
html[data-theme="light"] .sidebar .nav-subitem,
html[data-theme="light"] .sidebar .sidebar-footer{
  color:#FFFFFF;
}

html[data-theme="light"] .sidebar .nav-icon{
  color:#FFFFFF;
}

html[data-theme="light"] .nav-module.active,
html[data-theme="light"] .nav-group-trigger.active,
html[data-theme="light"] .nav-subitem.active{
  background:rgba(255,106,42,.14);
  border-color:#FF6A2A;
  color:#FFFFFF;
}

html[data-theme="light"] .nav-module.active .nav-icon,
html[data-theme="light"] .nav-group-trigger.active .nav-icon,
html[data-theme="light"] .nav-subitem.active .nav-icon{
  color:#FF6A2A;
}

/* HERO: negro pleno, como las cabeceras del tablero de ventas */
html[data-theme="light"] .home-hero{
  background:#050708;
  border-color:#050708;
  box-shadow:none;
}

html[data-theme="light"] .home-hero-copy h2{
  color:#FFFFFF;
}

html[data-theme="light"] .home-hero-copy p{
  color:#C8D0D5;
}

html[data-theme="light"] .home-kicker{
  color:#FF6A2A;
}

html[data-theme="light"] .home-hero-mark{
  color:rgba(255,255,255,.075);
}

/* Cards principales: cuerpo blanco/gris, encabezados visualmente definidos */
html[data-theme="light"] .home-calendar-card,
html[data-theme="light"] .home-activity-card{
  background:#F8F8F8;
  border-color:#D4D8DC;
  box-shadow:none;
}

/* Títulos tipo "franja" visual del tablero */
html[data-theme="light"] .home-card-kicker{
  color:#FF6A2A;
}

html[data-theme="light"] .home-card-head h3{
  color:#111820;
}

html[data-theme="light"] .home-card-head p{
  color:#66717A;
}

/* Subcards */
html[data-theme="light"] .home-calendar-month,
html[data-theme="light"] .home-agenda,
html[data-theme="light"] .home-empty-state{
  background:#FFFFFF;
  border-color:#D8DDE1;
}

/* Separador superior naranja en Calendar y Actividad */
html[data-theme="light"] .home-calendar-card,
html[data-theme="light"] .home-activity-card{
  position:relative;
  overflow:hidden;
}

html[data-theme="light"] .home-calendar-card::before,
html[data-theme="light"] .home-activity-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:#FF6A2A;
}

/* Badge */
html[data-theme="light"] .home-coming-soon{
  color:#A8421D;
  border-color:#F3B59A;
  background:#FFF0E9;
}

/* Calendario */
html[data-theme="light"] .home-calendar-toolbar strong{
  color:#111820;
}

html[data-theme="light"] .home-calendar-weekdays span{
  color:#4C5961;
}

html[data-theme="light"] .home-calendar-days span{
  color:#111820;
}

html[data-theme="light"] .home-calendar-days .is-muted{
  color:#A5ADB3;
}

html[data-theme="light"] .home-calendar-days .has-event::after,
html[data-theme="light"] .home-agenda-dot{
  background:#FF6A2A;
}

html[data-theme="light"] .home-calendar-days .is-today{
  color:#B34720;
  background:#FFE8DD;
  box-shadow:inset 0 0 0 1px #FFB493;
}

/* Agenda */
html[data-theme="light"] .home-agenda-head{
  color:#4D5961;
  border-color:#E0E3E6;
}

html[data-theme="light"] .home-agenda-item{
  border-color:#E5E7E9;
}

html[data-theme="light"] .home-agenda-time b,
html[data-theme="light"] .home-agenda-copy b{
  color:#111820;
}

html[data-theme="light"] .home-agenda-time span,
html[data-theme="light"] .home-agenda-copy span{
  color:#6B757D;
}

/* Botones mock */
html[data-theme="light"] .home-calendar-actions button{
  background:#F3F4F5;
  border-color:#D5DADF;
  color:#7C858C;
}

/* Actividad */
html[data-theme="light"] .home-empty-icon{
  color:#FF6A2A;
  background:#FFF0E9;
}

html[data-theme="light"] .home-empty-state b{
  color:#111820;
}

html[data-theme="light"] .home-empty-state span{
  color:#6A747C;
}

/* Contenido principal: mantener gris de base, como hoja operativa */
html[data-theme="light"] .home-view{
  background:#ECEFF1;
}

/* Topbar: conservar texto oscuro legible */
html[data-theme="light"] .page-head .eyebrow{
  color:#FF6A2A;
}

html[data-theme="light"] #pageTitle{
  color:#111820;
}

html[data-theme="light"] #pageSubtitle{
  color:#6B757D;
}

/* Botones de tema */
html[data-theme="light"] .theme-toggle{
  background:#0B1013;
  border-color:#20272C;
}

html[data-theme="light"] .theme-toggle button{
  color:#FFFFFF;
}

html[data-theme="light"] .theme-toggle button.active{
  background:#FFFFFF;
  color:#111820;
}


/* =========================================================
   HOME · CORE watermark v7
   Más pequeño, blanco y más desplazado a la derecha
   en ambos temas.
   ========================================================= */

.home-hero-mark,
html[data-theme="dark"] .home-hero-mark,
html[data-theme="light"] .home-hero-mark{
  right:2.2%;
  top:50%;
  transform:translateY(-50%);
  font-family:"Roboto", Arial, sans-serif;
  font-size:clamp(82px,10.5vw,160px);
  line-height:.9;
  font-weight:900;
  letter-spacing:.12em;
  text-align:right;
  color:rgba(255,255,255,.11);
}

/* En dark puede tolerar apenas más presencia */
html[data-theme="dark"] .home-hero-mark{
  color:rgba(255,255,255,.09);
}

/* En light, el hero es negro: mantener CORE blanco */
html[data-theme="light"] .home-hero-mark{
  color:rgba(255,255,255,.12);
}

@media(max-width:820px){
  .home-hero-mark,
  html[data-theme="dark"] .home-hero-mark,
  html[data-theme="light"] .home-hero-mark{
    right:3%;
    top:64%;
    transform:translateY(-50%);
    font-size:clamp(66px,18vw,118px);
    text-align:right;
  }
}


/* =========================================================
   AJUSTES VISUALES v8
   1) CORE blanco en hero
   2) Inicio activo sin borde naranja
   3) Alturas sincronizadas en Ausentismo
   ========================================================= */

/* 1) CORE del hero siempre blanco en ambos temas */
.home-hero-mark,
html[data-theme="dark"] .home-hero-mark,
html[data-theme="light"] .home-hero-mark{
  color:rgba(255,255,255,.13) !important;
}

/* 2) Inicio seleccionado: sin borde naranja */
#homeNav.active{
  border-color:var(--line) !important;
}

html[data-theme="dark"] #homeNav.active{
  background:rgba(255,255,255,.035);
  color:var(--text);
}

html[data-theme="light"] #homeNav.active{
  background:#F3F4F5;
  color:#111820;
  border-color:#D8DDE1 !important;
}

/* 3) Ausentismo: ambas tarjetas principales con la misma altura */
.absence-overview-grid{
  align-items:stretch !important;
}

.absence-overview-grid > *{
  height:100%;
}

.absence-chart-card,
.absence-motives-card{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:470px;
}

/* El gráfico ocupa el alto disponible de su tarjeta */
.absence-chart-card .chartbox{
  flex:1 1 auto;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  display:flex;
  align-items:stretch;
}

.absence-chart-card .chartbox canvas{
  width:100% !important;
  height:100% !important;
  flex:1 1 auto;
}

/* Mantener el bloque de motivos con altura natural equivalente */
.absence-motives-card{
  min-height:470px;
}

@media(max-width:1100px){
  .absence-chart-card,
  .absence-motives-card{
    min-height:420px;
  }
}

@media(max-width:760px){
  .absence-overview-grid{
    align-items:start !important;
  }

  .absence-chart-card,
  .absence-motives-card{
    height:auto;
    min-height:360px;
  }

  .absence-chart-card .chartbox{
    min-height:300px !important;
  }
}


/* =========================================================
   AJUSTES VISUALES v9
   - Inicio igual al resto de módulos activos
   - Icono de casa monocromo
   - CORE blanco pleno
   - Ausentismo con altura dinámica según contenido
   ========================================================= */

/* CORE: blanco pleno, manteniendo tamaño de watermark */
.home-hero-mark,
html[data-theme="dark"] .home-hero-mark,
html[data-theme="light"] .home-hero-mark{
  color:#FFFFFF !important;
}

/* Icono Inicio */
.home-nav-icon{
  display:grid;
  place-items:center;
}

.home-nav-icon svg{
  display:block;
}

/* Inicio activo debe comportarse como cualquier módulo seleccionado */
html[data-theme="dark"] #homeNav.active{
  background:rgba(255,92,51,.09) !important;
  border-color:rgba(255,92,51,.25) !important;
  color:#FFFFFF !important;
}

html[data-theme="dark"] #homeNav.active .nav-icon{
  color:#FF5C33 !important;
}

html[data-theme="light"] #homeNav.active{
  background:rgba(255,106,42,.14) !important;
  border-color:#FF6A2A !important;
  color:#FFFFFF !important;
}

html[data-theme="light"] #homeNav.active .nav-icon{
  color:#FF6A2A !important;
}

/* =========================================================
   AUSENTISMO · Altura dinámica
   La tarjeta de motivos define la altura natural de la fila.
   El gráfico mensual se estira para igualarla.
   ========================================================= */

.absence-overview-grid{
  align-items:stretch !important;
}

/* Quitamos las alturas mínimas forzadas de v8 */
.absence-chart-card,
.absence-motives-card{
  min-height:0 !important;
  height:auto !important;
}

/* La tarjeta izquierda se estira al alto natural de la fila */
.absence-chart-card{
  display:flex;
  flex-direction:column;
  align-self:stretch;
}

/* La tarjeta de motivos conserva su altura según su contenido */
.absence-motives-card{
  display:block;
  align-self:start;
}

/* El área del gráfico absorbe el espacio sobrante */
.absence-chart-card .chartbox{
  flex:1 1 auto;
  height:auto !important;
  min-height:215px !important;
  max-height:none !important;
  display:flex;
  align-items:stretch;
}

/* Chart.js ocupa exactamente el alto disponible */
.absence-chart-card .chartbox canvas{
  width:100% !important;
  height:100% !important;
  flex:1 1 auto;
}

/* Desktop: ambas tarjetas comparten la altura de la fila */
@media(min-width:761px){
  .absence-overview-grid > .absence-chart-card{
    height:100% !important;
  }
}

/* Mobile: vuelven a crecer independientemente */
@media(max-width:760px){
  .absence-overview-grid{
    align-items:start !important;
  }

  .absence-chart-card,
  .absence-motives-card{
    height:auto !important;
  }

  .absence-chart-card .chartbox{
    min-height:280px !important;
  }
}


/* =========================================================
   AJUSTES FINALES LIGHT v10
   - Topbar igual al sidebar en modo claro
   - Hero menos negro
   - CORE menos intenso
   ========================================================= */

/* Topbar en light: mismo tono que sidebar para no retocar iconografía */
html[data-theme="light"] .topbar{
  background:#0B1013 !important;
  border-bottom:1px solid #20272C !important;
  color:#FFFFFF;
}

html[data-theme="light"] .page-head .eyebrow{
  color:#FF6A2A;
}

html[data-theme="light"] #pageTitle{
  color:#FFFFFF;
}

html[data-theme="light"] #pageSubtitle{
  color:#B9C2C8;
}

html[data-theme="light"] .user-menu-name,
html[data-theme="light"] .user-menu-email{
  color:#FFFFFF;
}

html[data-theme="light"] .user-menu-email{
  opacity:.72;
}

/* Hero en light: negro suavizado */
html[data-theme="light"] .home-hero{
  background:#11171B !important;
  border-color:#20282D !important;
}

/* CORE más suave, manteniendo blanco */
html[data-theme="light"] .home-hero-mark{
  color:rgba(255,255,255,.38) !important;
}

/* Dark también un poco menos intenso para mantener consistencia */
html[data-theme="dark"] .home-hero{
  background:#0E1418 !important;
}

html[data-theme="dark"] .home-hero-mark{
  color:rgba(255,255,255,.28) !important;
}


/* =========================================================
   AJUSTE CORE watermark v11
   Más blanco, sin llegar a brillo pleno
   ========================================================= */

html[data-theme="light"] .home-hero-mark{
  color:rgba(255,255,255,.56) !important;
}

html[data-theme="dark"] .home-hero-mark{
  color:rgba(255,255,255,.42) !important;
}


/* =========================================================
   AJUSTE CORE watermark v12
   Dos tonos más blanco, sin llegar a blanco pleno
   ========================================================= */

html[data-theme="light"] .home-hero-mark{
  color:rgba(255,255,255,.90) !important;
}

html[data-theme="dark"] .home-hero-mark{
  color:rgba(255,255,255,.90) !important;
}

/* =========================================================
   HOME · CORE watermark v13
   - arriba a la derecha
   - más chico
   - profesional y delicado
   - mantiene blanco actual en ambos temas
   ========================================================= */

.home-hero-mark,
html[data-theme="light"] .home-hero-mark,
html[data-theme="dark"] .home-hero-mark{
  top:26px !important;
  right:34px !important;
  bottom:auto !important;
  left:auto !important;
  transform:none !important;

  font-family:"Roboto", Arial, sans-serif;
  font-size:clamp(58px,7.2vw,118px) !important;
  line-height:.92 !important;
  font-weight:900 !important;
  letter-spacing:.10em !important;

  color:rgba(255,255,255,.90) !important;
  text-align:right !important;
  white-space:nowrap;
}

/* deja margen visual para nombres largos */
.home-hero-copy{
  max-width:58% !important;
}

/* responsive */
@media(max-width:980px){
  .home-hero-mark,
  html[data-theme="light"] .home-hero-mark,
  html[data-theme="dark"] .home-hero-mark{
    top:24px !important;
    right:26px !important;
    font-size:clamp(48px,8vw,90px) !important;
  }

  .home-hero-copy{
    max-width:62% !important;
  }
}

@media(max-width:700px){
  .home-hero-mark,
  html[data-theme="light"] .home-hero-mark,
  html[data-theme="dark"] .home-hero-mark{
    top:22px !important;
    right:20px !important;
    font-size:clamp(42px,12vw,72px) !important;
    opacity:.78;
  }

  .home-hero-copy{
    max-width:100% !important;
    padding-top:76px;
  }
}


/* =========================================================
   HOME · CORE watermark v14
   Más pequeño y delicado
   ========================================================= */

.home-hero-mark,
html[data-theme="light"] .home-hero-mark,
html[data-theme="dark"] .home-hero-mark{
  top:28px !important;
  right:30px !important;
  font-size:clamp(50px,6.2vw,96px) !important;
  font-weight:800 !important;
  letter-spacing:.14em !important;
  color:rgba(255,255,255,.78) !important;
}

/* =========================================================
   HOME · Google Calendar OAuth v1
   Estado real de conexión + CTA de vinculación
   ========================================================= */

.home-google-status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 11px;
  border-radius:999px;
  border:1px solid rgba(255,106,42,.32);
  background:rgba(255,106,42,.09);
  color:#FF7A4D;
  font-size:10.5px;
  font-weight:900;
  letter-spacing:.03em;
  white-space:nowrap;
}

.home-google-status-badge.is-connected{
  border-color:rgba(58,181,105,.34);
  background:rgba(58,181,105,.10);
  color:#42C777;
}

.home-google-status-badge.is-error{
  border-color:rgba(230,90,78,.34);
  background:rgba(230,90,78,.10);
  color:#E65A4E;
}

.home-google-connection{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:4px 0 2px;
  padding:16px 17px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.025);
}

.home-google-connection-copy{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
}

.home-google-connection-copy b{
  font-size:13px;
  line-height:1.35;
}

.home-google-connection-copy span{
  color:var(--muted);
  font-size:11.5px;
  line-height:1.45;
}

.home-google-connect-button{
  flex:0 0 auto;
  min-height:38px;
  padding:0 15px;
  border:1px solid #FF6A2A;
  border-radius:10px;
  background:#FF6A2A;
  color:#FFFFFF;
  font-size:11.5px;
  font-weight:900;
  cursor:pointer;
}

.home-google-connect-button:hover:not(:disabled){
  filter:brightness(1.04);
}

.home-google-connect-button:disabled{
  cursor:not-allowed;
  opacity:.62;
}

.home-google-oauth-message{
  display:none;
  margin-top:10px;
  padding:10px 12px;
  border-radius:10px;
  font-size:11.5px;
  font-weight:800;
}

.home-google-oauth-message:not(:empty){
  display:block;
}

.home-google-oauth-message.is-success{
  background:rgba(58,181,105,.10);
  color:#36B86A;
  border:1px solid rgba(58,181,105,.25);
}

.home-google-oauth-message.is-warning{
  background:rgba(240,168,58,.10);
  color:#C88A25;
  border:1px solid rgba(240,168,58,.25);
}

.home-google-oauth-message.is-error{
  background:rgba(230,90,78,.10);
  color:#E65A4E;
  border:1px solid rgba(230,90,78,.25);
}

html[data-theme="light"] .home-google-connection{
  background:#FFFFFF;
  border-color:#DDE2E6;
}

html[data-theme="light"] .home-google-connection-copy b{
  color:#111820;
}

html[data-theme="light"] .home-google-connection-copy span{
  color:#66717A;
}

@media(max-width:700px){
  .home-google-connection{
    align-items:stretch;
    flex-direction:column;
  }

  .home-google-connect-button{
    width:100%;
  }
}

/* =========================================================
   HOME · Google Calendar V2
   Navegación mensual + día seleccionado + agenda contextual
   ========================================================= */

.home-calendar-days{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:6px;
}

.home-calendar-day-button{
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:1.2;
  min-height:34px;
  padding:0;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--text);
  font:inherit;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  transition:
    background .16s ease,
    box-shadow .16s ease,
    color .16s ease,
    transform .16s ease;
}

.home-calendar-day-button:hover{
  transform:translateY(-1px);
  background:rgba(255,92,51,.07);
}

.home-calendar-day-button.is-muted{
  opacity:.35;
}

.home-calendar-day-button.has-event::after{
  content:"";
  position:absolute;
  bottom:5px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#FF6A3D;
}

.home-calendar-day-button.is-today{
  color:#FF7A55;
  box-shadow:inset 0 0 0 1px rgba(255,92,51,.28);
}

.home-calendar-day-button.is-selected{
  background:rgba(255,92,51,.16);
  color:#FF7A55;
  box-shadow:
    inset 0 0 0 1px rgba(255,92,51,.42),
    0 5px 14px rgba(255,92,51,.08);
}

.home-calendar-nav{
  cursor:pointer;
}

.home-calendar-nav:disabled{
  cursor:default;
  opacity:.45;
}

.home-agenda-item-button{
  width:100%;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
}

.home-agenda-item-button:hover{
  background:rgba(255,92,51,.035);
}

.home-agenda-empty{
  min-height:180px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:24px 16px;
  text-align:center;
}

.home-agenda-empty b{
  font-size:11px;
}

.home-agenda-empty span{
  max-width:220px;
  color:var(--muted);
  font-size:9.5px;
  line-height:1.45;
}

.home-calendar-actions{
  display:flex;
  justify-content:flex-end;
}

.home-calendar-actions .home-calendar-open-google{
  flex:1 1 auto;
  cursor:pointer;
  opacity:1;
}

.home-calendar-actions .home-calendar-open-google:hover{
  border-color:rgba(255,92,51,.45);
  color:#FF7A55;
  background:rgba(255,92,51,.05);
}

html[data-theme="light"] .home-calendar-day-button{
  color:#111820;
}

html[data-theme="light"] .home-calendar-day-button.is-selected{
  color:#A8421D;
  background:#FFE9DF;
  box-shadow:
    inset 0 0 0 1px #FFB493,
    0 5px 14px rgba(255,92,51,.06);
}

html[data-theme="light"] .home-calendar-day-button.is-today{
  color:#B34720;
}

html[data-theme="light"] .home-agenda-item-button:hover{
  background:#FFF7F3;
}

/* =========================================================
   HOME · DARK ALIGNMENT + CARD ACCENT FINAL
   - alinea Inicio con la base cromática de RRHH
   - mantiene el detalle naranja de light
   - agrega firma CORE sutil en dark
   ========================================================= */

html[data-theme="dark"] .home-view{
  background:#0C1215 !important;
}

html[data-theme="dark"] .home-hero{
  background:
    radial-gradient(
      circle at 78% 26%,
      rgba(255,92,51,.045),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #141B1F 0%,
      #10171B 100%
    ) !important;
  border-color:#263137 !important;
  box-shadow:
    0 10px 30px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.018);
}

html[data-theme="dark"] .home-calendar-card,
html[data-theme="dark"] .home-activity-card{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(
      180deg,
      #171F23 0%,
      #141B1F 100%
    ) !important;
  border-color:#2A3439 !important;
  box-shadow:
    0 4px 14px rgba(0,0,0,.13),
    inset 0 1px 0 rgba(255,255,255,.018);
}

html[data-theme="dark"] .home-calendar-card::before,
html[data-theme="dark"] .home-activity-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  z-index:2;
  background:
    linear-gradient(
      90deg,
      #FF5C33 0%,
      #FF7654 26%,
      rgba(255,92,51,.30) 62%,
      rgba(255,92,51,0) 100%
    );
  box-shadow:
    0 1px 10px rgba(255,92,51,.08);
}

html[data-theme="dark"] .home-google-connection,
html[data-theme="dark"] .home-calendar-month,
html[data-theme="dark"] .home-agenda,
html[data-theme="dark"] .home-empty-state{
  background:#11181C !important;
  border-color:#2A3439 !important;
}

html[data-theme="dark"] .home-google-connection{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018);
}

html[data-theme="dark"] .home-card-head h3,
html[data-theme="dark"] .home-google-connection-copy b,
html[data-theme="dark"] .home-empty-state b{
  color:#F1F5F6;
}

html[data-theme="dark"] .home-card-head p,
html[data-theme="dark"] .home-google-connection-copy span,
html[data-theme="dark"] .home-empty-state span{
  color:#98A4AB;
}

html[data-theme="dark"] .home-google-status-badge.is-connected{
  background:rgba(58,181,105,.08);
  border-color:rgba(58,181,105,.28);
  color:#48C77B;
}

/* Light: mantener la firma naranja, más refinada */
html[data-theme="light"] .home-calendar-card::before,
html[data-theme="light"] .home-activity-card::before{
  height:3px;
  background:
    linear-gradient(
      90deg,
      #FF6A2A 0%,
      #FF8654 30%,
      rgba(255,106,42,.48) 68%,
      rgba(255,106,42,.12) 100%
    );
}

/* ======================================================
   SIDEBAR · SUBMÓDULOS EN MAYÚSCULA
   Agregar dentro de public/platform/styles/dashboard.css
   ====================================================== */

.nav-subitem {
  text-transform: uppercase;
}


/* ======================================================
   ANALÍTICA RRHH · SEGMENTACIÓN DE POBLACIÓN
   ====================================================== */

html[data-theme="dark"] .rrhh-segment-toolbar{
  background:#11181C;
  border-color:#283238;
  box-shadow:none;
}

html[data-theme="dark"] .rrhh-segment-tabs{
  background:#0E1519;
  border-color:#283238;
}

html[data-theme="dark"] .rrhh-segment-tab:hover{
  background:#142027;
}

html[data-theme="dark"] .rrhh-segment-tab.active{
  color:#FF7A59;
  background:#17232A;
  border-color:rgba(255,92,51,.34);
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}

@media(max-width:760px){
  .rrhh-segment-toolbar{
    align-items:stretch;
    flex-direction:column;
    gap:9px;
  }

  .rrhh-segment-tabs{
    min-width:0;
    width:100%;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .rrhh-segment-tab{
    padding:0 7px;
    font-size:9px;
  }
}


/* Configuración · selector de rol y catálogo histórico */
.config-role-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
}

.config-role-feedback{
  min-height:14px;
  font-size:8.3px;
  line-height:1.35;
  color:var(--muted);
}

@media (max-width:720px){
  .config-role-row{
    grid-template-columns:1fr;
  }
}