/* ==========================================================================
   ÓNIX · LAYOUT BASE
   Ámbito: Header (Topbar), Sidebar, Notificaciones y estilos compartidos
   Nota: Los widgets del dashboard y vistas específicas viven en sus propias hojas
   ========================================================================== */

/* Tipografías */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Manrope:wght@300;400;600;800&display=swap');

html, body{ height:100%; }

/* ==========================================================================
   1) TOKENS / VARIABLES (modo claro)
   ========================================================================== */
:root{
  --color-fondo:#F1F1F6;
  --color-primario:#FF8A00;
  --color-texto:#1F2937;
  --color-texto-secundario:#667085;
  --color-blanco:#FFFFFF;

  --bg: var(--color-fondo);
  --surface: var(--color-blanco);
  --texto: var(--color-texto);
  --muted: var(--color-texto-secundario);
  --sidebar-bg: var(--color-blanco);
  --line:#E5E7ED;
  --shadow:0 6px 18px rgba(15,23,42,.08);
  --radius:16px;

    /* Panels / subtle surfaces (ej. acc-upcard) */
  --panel-subtle-bg: rgba(15, 23, 42, 0.04);
  --panel-subtle-border: rgba(15, 23, 42, 0.10);

  --link-inactivo: var(--color-texto-secundario);
  --link-activo: var(--color-primario);
  --link-activo-bg:#f7f7f9;
  --link-logout-activo:#b91c1c;

  --btn-primario-bg: var(--color-primario);
  --btn-primario-texto: var(--color-blanco);
  --btn-hover-bg:#FF9C1F;
  --btn-disabled-bg:#FFD8A6;
  --btn-logout-bg-hover:#fee2e2;

  --pill-bg:#FFF5E8;
  --pill-borde:#FFD6A6;
  --pill-texto:#9B5B00;

  --capacitaciones-color:#EF4444;
  --capacitaciones-fondo:rgba(239,68,68,.12);
  --capacitaciones-borde:rgba(239,68,68,.35);
  --capacitaciones-texto:#7A1616;

  --circular-color:#8B5CF6;
  --circular-fondo:rgba(139,92,246,.12);
  --circular-borde:rgba(139,92,246,.35);
  --circular-texto:#4C1D95;

  --contrasenas-color:#22C55E;
  --contrasenas-fondo:rgba(34,197,94,.12);
  --contrasenas-borde:rgba(34,197,94,.35);
  --contrasenas-texto:#14532D;

  --asuetos-color:#E11D48;
  --asuetos-fondo:rgba(225,29,72,.12);
  --asuetos-borde:rgba(225,29,72,.35);
  --asuetos-texto:#7F1D1D;

  --vacaciones-color:#3B82F6;
  --vacaciones-fondo:rgba(59,130,246,.12);
  --vacaciones-borde:rgba(59,130,246,.35);
  --vacaciones-texto:#0B2A6B;

  --otros-color:#9CA3AF;
  --otros-fondo:#F1F2F4;
  --otros-borde:#D7DADF;
  --otros-texto:#374151;

  --bar-circular:linear-gradient(180deg,#8B5CF6 0%,#A78BFA 100%);
  --bar-contrasenas:linear-gradient(180deg,#22C55E 0%,#6EE7B7 100%);
  --bar-asueto:linear-gradient(180deg,#E11D48 0%,#F472B6 100%);
  --bar-vacaciones:linear-gradient(180deg,#3B82F6 0%,#93C5FD 100%);
  --bar-capacitaciones:linear-gradient(180deg,#EF4444 0%,#FCA5A5 100%);
  --bar-otros:linear-gradient(180deg,#667085 0%,#a3a8b3 100%);

  --vigente-fondo:#ECFDF5;
  --vigente-borde:#BBF7D0;
  --vigente-texto:#166534;

  --expirado-fondo:#FEF2F2;
  --expirado-borde:#FECACA;
  --expirado-texto:#7A1616;

  --rango-fondo:#E0F2FE;
  --rango-borde:#BAE6FD;
  --rango-texto:#0C4A6E;

  --perfil-admin-bg:#0C4A6E;
  --perfil-empleado-bg:#6f92dd;
  --perfil-usuario-bg:var(--color-primario);
  --progreso-bg:linear-gradient(90deg,#FFB547 0%,#FF8A00 100%);
  --sidebar-w:260px;

  --page-gutters: 10px;

  --fondo-sin-leer:#EFF0F2;
  --read-bg:var(--fondo-sin-leer);
  --read-text:var(--color-texto-secundario);

  --kebab-action-bg:#E0F2FE;
  --kebab-action-text:#0C4A6E;

  --kebab-danger-bg:var(--btn-logout-bg-hover);
  --kebab-danger-text:var(--link-logout-activo);

  --card-hover-shadow:0 6px 18px rgba(15,23,42,.12);
  --card-hover-shadow-read:0 3px 8px rgba(0,0,0,.08);
  --card-hover-translate:-1.5px;

  --fs-welcome:clamp(20px,1.4vw + 8px,28px);
  --fs-subtle:clamp(12px,.45vw + 9px,14px);
  --fs-menu:clamp(13px,.4vw + 10px,15px);
  --fs-badge:clamp(10px,.3vw + 8px,12px);
  --fs-user-name:clamp(12px,.4vw + 9px,14px);
  --fs-user-pos:clamp(10px,.35vw + 8px,12px);
  --fs-button:clamp(12px,.35vw + 9px,13px);

  --onx-pill-scale:1;
  --onx-scroll-max-h:70vh;

  --onx-drawer-w: min(420px, 92vw);
  --onx-drawer-z: 4000;
}

/* ==========================================================================
   1.1) TOKENS responsive
   ========================================================================== */
@media (max-width: 480px){ :root{ --page-gutters: 6px; } }
@media (max-width: 360px){ :root{ --page-gutters: 6px; } }
@media (min-width: 1800px){ :root{ --fs-welcome: 28px; } }

/* ==========================================================================
   2) BASE
   ========================================================================== */
body{
  background:var(--bg);
  color:var(--texto);
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
.wrapper{ min-height:100vh; }
a:focus, a:hover{ text-decoration:none; }

/* ==========================================================================
   3) SWITCH DE TEMA
   ========================================================================== */
.theme-toggle{
  --h:36px; --w:74px; --pad:6px;
  position:relative;
  width:var(--w);
  height:var(--h);
  border-radius:999px;
  padding:var(--pad);
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  display:inline-block;
  cursor:pointer;
  outline:0;
}
.theme-toggle .icon{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  color:var(--texto);
  opacity:.55;
}
.theme-toggle .icon.left{ left:10px; }
.theme-toggle .icon.right{ right:10px; }
.theme-toggle .knob{
  position:absolute;
  top:var(--pad);
  left:var(--pad);
  width:calc(var(--h) - var(--pad)*2);
  height:calc(var(--h) - var(--pad)*2);
  border-radius:999px;
  background:var(--color-primario);
  display:grid;
  place-items:center;
  transition:transform .22s ease;
}
.theme-toggle .knob .active-icon{ color:#fff; font-size:18px; }
body.dark .theme-toggle .knob{ transform:translateX(calc(var(--w) - var(--h))); }

/* ==========================================================================
   4) TEMA OSCURO (tokens override)
   ========================================================================== */
body.dark{
  --bg:#1F1F1F;
  --surface:#181818;
  --texto:#f1f5f9;
  --muted:#afb0b8;
  --sidebar-bg:#181818;
  --line:#2c2d33;
  --link-inactivo:#afb0b8;
  --link-activo-bg:#242529;
  --btn-logout-bg-hover:rgba(185,28,28,.18);

    /* Panels / subtle surfaces (ej. acc-upcard) */
  --panel-subtle-bg: rgba(255, 255, 255, 0.04);
  --panel-subtle-border: rgba(255, 255, 255, 0.10);

  --pill-bg:rgba(253,186,116,.12);
  --pill-borde:rgba(253,186,116,.35);
  --pill-texto:#FFD6A6;

  --capacitaciones-fondo:rgba(239,68,68,.20);
  --capacitaciones-borde:rgba(239,68,68,.45);
  --capacitaciones-texto:#fca5a5;

  --circular-fondo:rgba(139,92,246,.20);
  --circular-borde:rgba(139,92,246,.45);
  --circular-texto:#ddd6fe;

  --contrasenas-fondo:rgba(34,197,94,.20);
  --contrasenas-borde:rgba(34,197,94,.45);
  --contrasenas-texto:#bbf7d0;

  --asuetos-fondo:rgba(225,29,72,.20);
  --asuetos-borde:rgba(225,29,72,.45);
  --asuetos-texto:#fecaca;

  --vacaciones-fondo:rgba(59,130,246,.20);
  --vacaciones-borde:rgba(59,130,246,.45);
  --vacaciones-texto:#bfdbfe;

  --otros-fondo:#2a2a2a;
  --otros-borde:#3a3a3a;
  --otros-texto:#e5e7eb;

  --vigente-fondo:rgba(16,185,129,.20);
  --vigente-borde:rgba(16,185,129,.45);
  --vigente-texto:#a7f3d0;

  --expirado-fondo:rgba(239,68,68,.20);
  --expirado-borde:rgba(239,68,68,.45);
  --expirado-texto:#fecaca;

  --rango-fondo:rgba(56,189,248,.20);
  --rango-borde:rgba(186,230,253,.45);
  --rango-texto:#BAE6FD;

  --fondo-sin-leer:#1F1F1F;
  --read-bg:var(--fondo-sin-leer);
  --read-text:var(--color-texto-secundario);

  --kebab-action-bg:rgba(56,189,248,.20);
  --kebab-action-text:#BAE6FD;

  --kebab-danger-bg:var(--btn-logout-bg-hover);
  --kebab-danger-text:var(--link-logout-activo);

  --card-hover-shadow:0 4px 12px rgba(0,0,0,.28), 0 1px 3px rgba(255,255,255,.05);
  --card-hover-shadow-read:0 3px 8px rgba(0,0,0,.25);
}

/* ==========================================================================
   5) HEADLINES
   ========================================================================== */
.onx-headline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap: wrap;
  gap:16px;
  margin:10px 0;
}
.onx-headline__title{
  margin:0;
  font-weight:800;
  font-size:20px;
}

/* ==========================================================================
   6) BOTONES (sistema)
   ========================================================================== */
.onx-btn{
  --onx-btn-h:36px;
  --onx-btn-pad-x:16px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  min-height:var(--onx-btn-h);
  padding:8px var(--onx-btn-pad-x);

  border-radius:999px;
  font-weight:700;
  font-size:var(--fs-button);
  line-height:1;

  border:1px solid var(--line);
  background:var(--surface);
  color:var(--texto);

  cursor:pointer;
  text-decoration:none;

  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}
.onx-btn ion-icon, .onx-btn svg{ width:18px; height:18px; display:inline-block; color:currentColor; }

.onx-btn--primary{
  background:var(--btn-primario-bg);
  color:var(--btn-primario-texto);
  border-color:var(--btn-primario-bg);
}
.onx-btn--primary:hover{
  background:var(--btn-hover-bg);
  border-color:var(--btn-hover-bg);
}

.onx-btn--ghost{
  background:var(--surface);
  color:var(--texto);
  border-color:var(--line);
}
.onx-btn--ghost:hover{
  background:var(--link-activo-bg);
  color:var(--link-activo);
}

.onx-btn[disabled], .onx-btn:disabled{
  background:var(--btn-disabled-bg);
  border-color:var(--btn-disabled-bg);
  color:rgba(255,255,255,.85);
  cursor:not-allowed;
  opacity:.9;
}

.onx-btn--sm{ --onx-btn-h:30px; --onx-btn-pad-x:12px; font-weight:700; }
.onx-btn--lg{ --onx-btn-h:44px; --onx-btn-pad-x:20px; }
.onx-btn--block{ display:inline-flex; width:100%; }

.onx-btn:focus{ outline:none; }
.onx-btn:focus-visible{
  outline:2px solid var(--link-activo);
  outline-offset:2px;
  border-radius:999px;
}

.onx-btn-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:var(--fs-button);
  color:var(--muted);
  text-decoration:none;

  padding:6px;
  border-radius:12px;
  border:1px solid var(--line);
  background:transparent;

  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.onx-btn-link:hover,
.onx-btn-link:focus-visible{
  background:var(--link-activo-bg);
  color:var(--link-activo);
  outline:none;
}
.onx-btn-link:active{ transform:scale(.98); }

.onx-link-cta{
  font-weight:800;
  color:var(--link-activo);
  text-decoration:none;
  position:relative;
  background-image:linear-gradient(var(--link-activo), var(--link-activo));
  background-position:left bottom;
  background-size:0% 2px;
  background-repeat:no-repeat;
  transition:color .2s ease, background-size .25s ease;
}
.onx-link-cta:hover{
  color:var(--texto);
  background-size:100% 2px;
}

a.onx-btn:not(.onx-btn-link):not(.onx-btn--primary),
a.onx-btn:not(.onx-btn-link):not(.onx-btn--primary):visited{
  color:inherit;
  text-decoration:none;
}
a.onx-btn:not(.onx-btn-link):not(.onx-btn--primary):hover,
a.onx-btn:not(.onx-btn-link):not(.onx-btn--primary):focus,
a.onx-btn:not(.onx-btn-link):not(.onx-btn--primary):focus-visible{
  color:inherit;
  text-decoration:none;
}
a.onx-btn.onx-btn--primary,
a.onx-btn.onx-btn--primary:hover,
a.onx-btn.onx-btn--primary:focus,
a.onx-btn.onx-btn--primary:focus-visible{
  color:var(--btn-primario-texto);
}

/* ==========================================================================
   7) BUSCADOR (input)
   ========================================================================== */
.onx-search{ position:relative; }
.onx-search__icon{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  opacity:.6;
  pointer-events:none;
}
.onx-search__input{
  width:240px;
  max-width:52vw;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 12px 8px 36px;
  outline:none;
  color:var(--texto);
  transition:border-color .18s ease, box-shadow .18s ease;
}

/* ==========================================================================
   8) DROPDOWNS Y FILTROS
   ========================================================================== */
.onx-dd{ position:relative; }
.onx-filter--dd{ display:inline-flex; align-items:center; gap:8px; }
.onx-filter--dd .dd-caret{ transition:transform .18s ease; opacity:.7; }
.onx-dd.open .onx-filter--dd .dd-caret{ transform:rotate(180deg); }

/* =========================
   Menú dropdown (apertura suave)
   ========================= */
.onx-dd__menu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  z-index:20;

  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:6px;

  width:max-content;
  min-width:200px;
  max-width:clamp(240px,48vw,420px);

  --onx-dd-open-max: min(70vh, 460px);

  max-height:0;
  overflow:hidden;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transform:translateY(-6px) scale(.985);
  transform-origin: top left;

  will-change: transform, opacity, max-height;

  transition:
    max-height .26s cubic-bezier(.2,.8,.2,1),
    opacity .18s ease,
    transform .26s cubic-bezier(.2,.8,.2,1),
    visibility 0s linear .18s;
}
.onx-dd.open .onx-dd__menu{
  max-height:var(--onx-dd-open-max);
  overflow:auto;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
  transition:
    max-height .28s cubic-bezier(.2,.8,.2,1),
    opacity .18s ease,
    transform .28s cubic-bezier(.2,.8,.2,1),
    visibility 0s;
}
@media (prefers-reduced-motion: reduce){
  .onx-dd__menu{
    transition:none !important;
    transform:none !important;
  }
}

.onx-dd.open-up .onx-dd__menu{
  top:auto;
  bottom:calc(100% + 8px);
  transform-origin: bottom left;
}

/* =========================
   Stagger de items
   ========================= */
@keyframes onx-dd-item-in{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:translateY(0); }
}
.onx-dd__menu .onx-dd__item{ will-change: transform, opacity; }
.onx-dd.open .onx-dd__menu .onx-dd__item{
  animation: onx-dd-item-in .22s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: var(--dd-stagger, 0ms);
}
.onx-dd.open .onx-dd__menu .onx-dd__item:nth-child(1){  --dd-stagger:  0ms; }
.onx-dd.open .onx-dd__menu .onx-dd__item:nth-child(2){  --dd-stagger: 18ms; }
.onx-dd.open .onx-dd__menu .onx-dd__item:nth-child(3){  --dd-stagger: 36ms; }
.onx-dd.open .onx-dd__menu .onx-dd__item:nth-child(4){  --dd-stagger: 54ms; }
.onx-dd.open .onx-dd__menu .onx-dd__item:nth-child(5){  --dd-stagger: 72ms; }
.onx-dd.open .onx-dd__menu .onx-dd__item:nth-child(6){  --dd-stagger: 90ms; }
.onx-dd.open .onx-dd__menu .onx-dd__item:nth-child(7){  --dd-stagger: 108ms; }
.onx-dd.open .onx-dd__menu .onx-dd__item:nth-child(8){  --dd-stagger: 126ms; }
.onx-dd.open .onx-dd__menu .onx-dd__item:nth-child(9){  --dd-stagger: 144ms; }
.onx-dd.open .onx-dd__menu .onx-dd__item:nth-child(10){ --dd-stagger: 162ms; }
.onx-dd.open .onx-dd__menu .onx-dd__item:nth-child(11){ --dd-stagger: 180ms; }
.onx-dd.open .onx-dd__menu .onx-dd__item:nth-child(12){ --dd-stagger: 198ms; }
.onx-dd.open .onx-dd__menu .onx-dd__item:nth-child(13){ --dd-stagger: 216ms; }
.onx-dd.open .onx-dd__menu .onx-dd__item:nth-child(14){ --dd-stagger: 234ms; }
.onx-dd.open .onx-dd__menu .onx-dd__item:nth-child(15){ --dd-stagger: 252ms; }
.onx-dd.open .onx-dd__menu .onx-dd__item:nth-child(16){ --dd-stagger: 270ms; }

@media (prefers-reduced-motion: reduce){
  .onx-dd.open .onx-dd__menu .onx-dd__item{ animation:none !important; }
}

/* =========================
   Item base
   ========================= */
.onx-dd__item{
  display:flex;
  align-items:flex-start;
  gap:6px;

  width:100%;
  text-align:left;
  padding:8px 10px;

  border-radius:8px;
  border:0;
  background:transparent;
  cursor:pointer;

  white-space:normal;
  word-break:break-word;
  line-height:1.3;

  font-weight:600;
  color:var(--texto);

  transition:background .15s ease, color .15s ease, transform .12s cubic-bezier(.2,.9,.2,1);
}
.onx-dd__item:hover,
.onx-dd__item.is-active{
  background:var(--link-activo-bg);
  color:var(--link-activo);
}
.onx-dd__item.is-active{ font-weight:700; }

/* =========================
   Checkbox premium (sutil / sin halo)
   ========================= */
.onx-dd__item:not([data-clear]){
  position:relative;
  padding-left:34px;
}

/* cuadro */
.onx-dd__item:not([data-clear])::before{
  content:"";
  position:absolute;
  left:8px;
  top:50%;
  transform:translateY(-50%) scale(1);
  width:16px;
  height:16px;

  border:2px solid var(--line);
  border-radius:4px;
  background:var(--surface);

  transition:
    background-color .16s ease,
    border-color .16s ease,
    transform .14s cubic-bezier(.2,.9,.2,1);
}

/* hover MUY sutil: solo borde un poquito más “firme” (sin glow) */
.onx-dd__item:hover:not([data-clear])::before{
  border-color: color-mix(in srgb, var(--texto) 18%, var(--line));
}

/* activo: relleno + micro pop */
.onx-dd__item.is-active:not([data-clear])::before{
  border-color:var(--link-activo);
  background:var(--link-activo);
  transform:translateY(-50%) scale(1.02);
}

/* check SVG */
.onx-dd__item.is-active:not([data-clear])::after{
  content:"";
  position:absolute;
  left:8px;
  top:50%;
  width:16px;
  height:16px;

  opacity:0;
  transform:translateY(-50%) scale(.78);

  background-repeat:no-repeat;
  background-position:center;
  background-size:12px 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='M7.667 13.2 4.5 10.033l-1.06 1.06 4.227 4.227L16.56 6.427l-1.06-1.06z'/%3E%3C/svg%3E");

  transition:
    opacity .12s ease,
    transform .16s cubic-bezier(.2,.9,.2,1);
}
.onx-dd__item.is-active:not([data-clear])::after{
  opacity:1;
  transform:translateY(-50%) scale(1);
}

/* press micro (checkbox) */
.onx-dd__item:active:not([data-clear])::before{
  transform:translateY(-50%) scale(.94);
}

/* press micro (item completo) */
.onx-dd__item:active{
  transform: scale(.99);
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .onx-dd__item:not([data-clear])::before,
  .onx-dd__item.is-active:not([data-clear])::after{
    transition:none !important;
    transform:translateY(-50%) !important;
  }
  .onx-dd__item:active{ transform:none !important; }
}

/* =========================
   Botón base de filtro
   ========================= */
.onx-filter{
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--texto);

  padding:8px 14px;
  border-radius:999px;
  cursor:pointer;
  font-weight:600;

  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.onx-filter:hover,
.onx-filter.is-active{
  background:var(--pill-bg);
  border-color:var(--pill-borde);
  color:var(--pill-texto);
}

.onx-filter.onx-filter--dd{ height:auto; white-space:normal; align-items:center; }
.onx-filter--dd .onx-dd__label{
  display:block;
  max-width:clamp(120px,22vw,260px);
  white-space:normal;
  overflow-wrap:anywhere;
}

/* ==========================================================================
   9) TOOLBAR (responsive inteligente)
   ========================================================================== */
.onx-toolbar{
  --tb-gap-y: 6px;
  --onx-search-anim: .22s;
  --onx-search-ease: cubic-bezier(.2,.8,.2,1);
  --onx-search-w: min(72vw, 420px);

  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;

  row-gap:var(--tb-gap-y);

  margin-bottom:16px;
  padding:10px 12px;

  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.onx-toolbar.is-wrapped{ --tb-gap-y: 12px; }

.onx-toolbar__left{
  display:flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items:center;
  justify-content: flex-start;
  gap: 5px;

  min-width:0;
  flex:1 1 0%;
}
.onx-toolbar__left > *{
  min-width:0;
}

.onx-toolbar__right{
  display:flex;
  align-items:center;
  gap:10px;

  flex:0 0 auto;
  margin-left:auto;
  justify-content:flex-start;
}

/* =========================
   Truncado general de labels de dropdown en toolbar
   ========================= */

/* Permite que los hijos en flex puedan encogerse (CLAVE para ellipsis) */
.onx-toolbar__left,
.onx-toolbar__right,
.onx-dd,
.onx-filter--dd {
  min-width: 0;
}

/* El label se trunca con ... si no cabe */
.onx-filter--dd .onx-dd__label {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* En modo compacto/wrapped, limita más el ancho para que no rompa layout */
.onx-toolbar.is-compact .onx-filter--dd .onx-dd__label,
.onx-toolbar.is-wrapped .onx-filter--dd .onx-dd__label {
  max-width: 140px; /* ajusta si quieres */
}

/* En pantallas chicas aunque sea “desktop”, también limita */
@media (max-width: 1366px){
  body:not(.sidebar-collapsed) .onx-toolbar .onx-filter--dd .onx-dd__label{
    max-width: 160px;
  }
}

@media (min-width: 601px){
  .onx-toolbar__right .onx-btn--icon .onx-btn__text{ display:inline; }
}

@media (max-width: 600px){
  .onx-toolbar__right .onx-btn--icon{
    --onx-btn-pad-x: 10px;
    width:36px;
    min-width:36px;
    padding:0;
    justify-content:center;
    gap:0;
  }
  .onx-toolbar__right .onx-btn--icon .onx-btn__text{ display:none; }
}

.onx-toolbar__filtersBtn{
  position:relative;

  display:inline-flex;
  align-items:center;
  gap:8px;

  border:1px solid var(--line);
  background:var(--surface);
  color:var(--texto);

  border-radius:999px;
  cursor:pointer;
  font-weight:700;
  white-space:nowrap;

  max-width:0;
  opacity:0;
  transform:translateY(-4px);
  padding:0;
  border-color:transparent;
  margin:0;

  overflow:hidden;
  pointer-events:none;

  transition:
    max-width var(--onx-search-anim) var(--onx-search-ease),
    opacity .18s ease,
    transform var(--onx-search-anim) var(--onx-search-ease),
    padding var(--onx-search-anim) var(--onx-search-ease),
    border-color var(--onx-search-anim) var(--onx-search-ease),
    margin var(--onx-search-anim) var(--onx-search-ease),
    background .18s ease,
    color .18s ease;
}
.onx-toolbar__filtersBtn:hover{
  background:var(--link-activo-bg);
  border-color:var(--pill-borde);
  color:var(--link-activo);
}

.onx-toolbar.is-compact .onx-toolbar__filtersBtn{
  max-width:220px;
  opacity:1;
  transform:translateY(0);
  padding:8px 14px;
  border-color:var(--line);
  pointer-events:auto;
}

.onx-toolbar__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:20px;
  height:20px;
  padding:0 6px;

  border-radius:999px;
  font-size:12px;
  font-weight:800;

  background:var(--pill-bg);
  color:var(--pill-texto);
  border:1px solid var(--pill-borde);
}
.onx-toolbar__badge[hidden]{ display:none !important; }
.onx-toolbar__filtersBtn .onx-toolbar__badge{
  min-width:18px;
  height:18px;
  padding:0 6px;
  font-size:11px;
  line-height:1;
}

@keyframes onx-pop{
  0%{ transform:scale(1); }
  35%{ transform:scale(1.18); }
  100%{ transform:scale(1); }
}
.onx-toolbar__badge.is-pop{ animation:onx-pop .22s cubic-bezier(.2,.9,.2,1); }
@media (prefers-reduced-motion: reduce){
  .onx-toolbar__badge.is-pop{ animation:none !important; }
}

.onx-toolbar.is-compact .onx-toolbar__left{ min-width:0; }
.onx-toolbar.is-compact .onx-toolbar__right{ margin-left:auto; justify-content:flex-start; }
.onx-toolbar.is-compact .onx-search__input{
  width:clamp(160px,22vw,240px);
  max-width:100%;
}

.onx-toolbar.is-layout-switch .onx-toolbar__filtersBtn,
.onx-toolbar.is-layout-switch .onx-toolbar__right{ transition:none !important; }
.onx-toolbar.is-layout-switch{ flex-wrap:nowrap !important; }
.onx-toolbar.is-layout-switch .onx-toolbar__left{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
}
.onx-toolbar.is-layout-switch .onx-toolbar__right{
  flex:0 0 auto;
  white-space:nowrap;
}

/* =========================
   Toolbar: botón Filtros como ícono en móvil
   ========================= */
@media (max-width: 600px){
  .onx-toolbar__filtersBtn{
    padding: 10px;              /* más compacto */
    gap: 0;                     /* no hace falta espacio para texto */
  }

  .onx-toolbar__filtersBtn .onx-toolbar__filtersText{
    display: none;              /* oculta "Filtros" */
  }

  /* Badge sigue visible y pegado al botón */
  .onx-toolbar__filtersBtn .onx-toolbar__badge{
    margin-left: 6px;
  }
}

/* ==========================================================================
   9.1) SEARCH COLLAPSE (móvil)
   ========================================================================== */
.onx-search__toggle{
  display:none;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--texto);
  width:36px;
  height:36px;
  border-radius:999px;
  cursor:pointer;
  place-items:center;
}

@media (max-width: 600px){
  .onx-search.onx-search--collapse{
    display:flex;
    align-items:center;
  }
  .onx-search.onx-search--collapse .onx-search__toggle{ display:grid; }

  .onx-search.onx-search--collapse .onx-search__icon,
  .onx-search.onx-search--collapse .onx-search__input{
    width:0;
    max-width:0;
    opacity:0;
    padding-left:0;
    padding-right:0;
    border-color:transparent;
    pointer-events:none;

    transition:
      width var(--onx-search-anim) var(--onx-search-ease),
      max-width var(--onx-search-anim) var(--onx-search-ease),
      opacity .18s ease,
      padding var(--onx-search-anim) var(--onx-search-ease),
      border-color var(--onx-search-anim) var(--onx-search-ease);
  }

  .onx-toolbar.is-search-open .onx-search.onx-search--collapse .onx-search__icon{
    opacity:.6;
    width:auto;
    max-width:none;
  }
  .onx-toolbar.is-search-open .onx-search.onx-search--collapse .onx-search__input{
    width:var(--onx-search-w);
    max-width:var(--onx-search-w);
    opacity:1;
    padding:8px 12px 8px 36px;
    border-color:var(--line);
    pointer-events:auto;
  }

  .onx-toolbar.is-search-open .onx-toolbar__left > :not(.onx-search){
    display:none !important;
  }
  .onx-toolbar.is-search-open .onx-toolbar__filtersBtn{
    display:none !important;
  }

  .onx-toolbar.is-search-closing .onx-toolbar__left > :not(.onx-search){
    display:none !important;
  }
  .onx-toolbar.is-search-closing .onx-toolbar__filtersBtn{
    display:none !important;
  }
}

/* ==========================================================================
   10) FILTER DRAWER (panel lateral derecho)
   ========================================================================== */
.onx-filtersOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
  z-index:var(--onx-drawer-z);
}

.onx-filtersDrawer{
  position:fixed;
  top:0;
  right:0;
  height:100dvh;
  width:var(--onx-drawer-w);

  background:color-mix(in srgb, var(--surface) 92%, var(--bg));
  border-left:1px solid var(--line);
  box-shadow:0 20px 60px rgba(0,0,0,.25);

  transform:translateX(105%);
  opacity:1;
  transition:transform .28s cubic-bezier(.2,.8,.2,1);

  z-index:calc(var(--onx-drawer-z) + 1);

  display:flex;
  flex-direction:column;
}

body.onx-filters-open .onx-filtersOverlay{
  opacity:1;
  pointer-events:auto;
}
body.onx-filters-open .onx-filtersDrawer{
  transform:translateX(0);
}
body.onx-filters-open{ overflow:hidden; }

.onx-filtersDrawer__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding:14px 14px 10px;
  border-bottom:1px solid var(--line);
}

.onx-filtersDrawer__title{
  margin:0;
  font-weight:900;
  font-size:14px;
  color:var(--texto);
  letter-spacing:.2px;
}

.onx-filtersDrawer__actions{
  display:flex;
  align-items:center;
  gap:8px;
}

/* si Limpiar está en el top, se ve igual */
.onx-filtersDrawer__clear{
  border:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  font-weight:800;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.onx-filtersDrawer__clear:hover{
  background:var(--link-activo-bg);
  color:var(--link-activo);
  border-color:var(--pill-borde);
}

.onx-filtersDrawer__close{
  border:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  width:38px;
  height:38px;
  border-radius:12px;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.onx-filtersDrawer__close:hover{
  background:var(--link-activo-bg);
  color:var(--link-activo);
  border-color:var(--pill-borde);
}

/* ✅ BODY: es el área que scrollea (clave para que el footer quede abajo real) */
.onx-filtersDrawer__body{
  padding:12px 14px 14px;
  overflow:auto;
  flex: 1 1 auto;   /* clave */
  min-height: 0;    /* clave en contenedores flex para que overflow funcione */
}

.onx-filtersDrawer__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
}

.onx-filtersDrawer__grid > .onx-dd{
  border:0;
  border-radius:0;
  padding:0;
  background:transparent;
  box-shadow:none;
}
.onx-filtersDrawer__grid > .onx-dd + .onx-dd{
  border-top:1px solid var(--line);
  padding-top:8px;
  margin-top:8px;
}

.onx-filtersDrawer [data-onx-dd-inline="true"] .onx-dd__menu{
  position:static !important;

  width:100%;
  min-width:0;
  max-width:none;

  box-shadow:none;
  margin-top:0;

  border-radius:14px;
  border:1px solid var(--line);
  background:var(--surface);
  padding:8px;

  max-height:0;
  overflow:hidden;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transform:translateY(-4px);
  transform-origin: top;

  transition:
    max-height .28s cubic-bezier(.2,.8,.2,1),
    opacity .18s ease,
    transform .28s cubic-bezier(.2,.8,.2,1),
    visibility 0s linear .18s;
}

.onx-filtersDrawer [data-onx-dd-inline="true"] .onx-dd.open .onx-dd__menu{
  max-height: var(--onx-dd-open-max, 420px);
  overflow: auto;

  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);

  transition:
    max-height .30s cubic-bezier(.2,.8,.2,1),
    opacity .18s ease,
    transform .30s cubic-bezier(.2,.8,.2,1),
    visibility 0s;
}

.onx-filtersDrawer [data-onx-dd-inline="true"] .onx-filter--dd{
  width:100%;
  justify-content:space-between;
}
.onx-filtersDrawer [data-onx-dd-inline="true"] .onx-filter--dd .onx-dd__label{
  max-width:none;
}

.onx-filter--dd ion-icon[name="funnel-outline"]{
  font-size:18px;
  opacity:.72;

  transform-origin:50% 55%;
  transform:rotate(0deg);

  transition:
    transform .28s cubic-bezier(.2,.9,.2,1),
    opacity .18s ease,
    color .18s ease;

  will-change: transform;
}
.onx-dd.open > .onx-filter--dd ion-icon[name="funnel-outline"]{
  transform:rotate(180deg) translateY(-1px);
  opacity:.95;
  color:var(--link-activo);
}
.onx-filter--dd:active ion-icon[name="funnel-outline"]{ transform:scale(.95); }

@media (prefers-reduced-motion: reduce){
  .onx-filter--dd ion-icon[name="funnel-outline"]{
    transition:none !important;
    transform:none !important;
  }
}

/* =========================
   Drawer footer (acciones abajo)
   ========================= */
.onx-filtersDrawer__footer{
  margin-top: auto; /* ✅ empuja el footer hasta abajo */
  padding: 12px 14px 14px;
  border-top: 1px solid var(--line);

  background: color-mix(in srgb, var(--surface) 92%, var(--bg));
  /* backdrop-filter: blur(8px);  -> opcional, pero ya no es necesario */
}

.onx-filtersDrawer__footerActions{
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:center;
}
.onx-filtersDrawer__footerActions > *{
  flex:1 1 0%;
}

/* si "Limpiar" vive abajo en footer, que se vea como botón normal */
.onx-filtersDrawer__footerActions .onx-filtersDrawer__clear{
  padding:10px 14px;
  border-radius:999px;
}

/* ==========================================================================
   11) PILLS (sistema)
   ========================================================================== */
.onx-pill{
  --onx-pill-fs:12px;
  --onx-pill-pad-y:4px;
  --onx-pill-pad-x:10px;
  --onx-pill-radius:999px;

  display:inline-block;
  font-weight:700;
  font-size:calc(var(--onx-pill-fs) * var(--onx-pill-scale));
  padding:
    calc(var(--onx-pill-pad-y) * var(--onx-pill-scale))
    calc(var(--onx-pill-pad-x) * var(--onx-pill-scale));

  border-radius:var(--onx-pill-radius);
  background:var(--pill-bg);
  color:var(--pill-texto);
  border:1px solid var(--pill-borde);

  line-height:1;
  white-space:nowrap;
}
.onx-pill--sm{ --onx-pill-fs:11px; --onx-pill-pad-y:3px; --onx-pill-pad-x:8px; }
.onx-pill--lg{ --onx-pill-fs:13px; --onx-pill-pad-y:6px; --onx-pill-pad-x:12px; }

.onx-pill--vigente{ background:var(--vigente-fondo); color:var(--vigente-texto); border-color:var(--vigente-borde); }
.onx-pill--expirado{ background:var(--expirado-fondo); color:var(--expirado-texto); border-color:var(--expirado-borde); }

.onx-pill--capacitaciones{ background:var(--capacitaciones-fondo); color:var(--capacitaciones-texto); border-color:var(--capacitaciones-borde); }
.onx-pill--circular{ background:var(--circular-fondo); color:var(--circular-texto); border-color:var(--circular-borde); }
.onx-pill--contrasenas{ background:var(--contrasenas-fondo); color:var(--contrasenas-texto); border-color:var(--contrasenas-borde); }
.onx-pill--asuetos{ background:var(--asuetos-fondo); color:var(--asuetos-texto); border-color:var(--asuetos-borde); }
.onx-pill--vacaciones{ background:var(--vacaciones-fondo); color:var(--vacaciones-texto); border-color:var(--vacaciones-borde); }
.onx-pill--otros{ background:var(--otros-fondo); color:var(--otros-texto); border-color:var(--otros-borde); }

.onx-pill--puesto{ background:var(--pill-bg); color:var(--pill-texto); border-color:var(--pill-borde); }
.onx-pill--rango{ background:var(--rango-fondo); color:var(--rango-texto); border-color:var(--rango-borde); }
.onx-pill--today{ background:var(--pill-bg); color:var(--pill-texto); border-color:var(--pill-borde); }

/* ==========================================================================
   12) PAGINACIÓN genérica
   ========================================================================== */
.onx-pag{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
  color:var(--muted);
}
.onx-pag__left{ display:flex; align-items:center; gap:10px; }
.onx-pag__label,
.onx-pag__of{ white-space:nowrap; }
.onx-pag__range{ color:var(--texto); }
.onx-perpage__select:focus{ outline:none; }

.onx-pages{ display:flex; align-items:center; gap:6px; }
.onx-pages__list{
  display:flex;
  align-items:center;
  gap:6px;
  list-style:none;
  margin:0;
  padding:0;
}
.onx-page{
  min-width:28px;
  height:28px;
  padding:0 8px;

  display:grid;
  place-items:center;

  border-radius:8px;
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--texto);

  cursor:pointer;
}
.onx-page:hover{ border-color:var(--pill-borde); background:var(--pill-bg); color: var(--pill-texto);}
.onx-page.is-current{
  border-color:var(--pill-borde);
  background:var(--pill-bg);
  color:var(--pill-texto);
  font-weight:700;
}
.onx-page.is-ellipsis{ cursor:default; }
.onx-page[disabled]{ opacity:.5; pointer-events:none; }
.onx-page--nav{ font-weight:700; }

.onx-select,
.onx-perpage__select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  background:var(--surface);
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:8px;
  padding:6px 28px 6px 10px;
  font-size:14px;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;

  background-image:url("data:image/svg+xml;utf8,<svg fill='currentColor' viewBox='0 0 24 24' width='16' height='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5'/></svg>");
  background-repeat:no-repeat;
  background-position:right 8px center;
  background-size:14px;
}

.onx-select:hover,
.onx-perpage__select:hover{
  background:var(--link-activo-bg);
  border-color:var(--link-activo);
}

.onx-select:focus,
.onx-perpage__select:focus{
  outline:none;
  border-color:var(--link-activo);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--link-activo) 25%, transparent);
}

.onx-perpage__select option{
  background-color:var(--surface);
  color:var(--texto);
}

/* =========================
   PAGINACIÓN · Móvil compacta (‹ 1/10 ›)
   ========================= */
.onx-pages__mini{ display:none; }

@media (max-width: 560px){

  .onx-pag{
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    padding-top: 10px;
    margin-top: 12px;
  }

  /* Arriba: rango + perPage en una sola línea */
  .onx-pag__left{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
  }
  .onx-pag__label{ display:none; }
  .onx-pag__range,
  .onx-pag__of{ font-size: 13px; }

  .onx-perpage{ margin-left:auto; }
  .onx-perpage__select{
    height: 34px;
    border-radius: 12px;
    padding: 6px 30px 6px 10px;
    font-weight: 800;
  }

  /* Abajo: SOLO prev + mini + next (sin caja grande) */
  .onx-pages{
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 5px;

    padding: 0;          /* clave: no “tarjeta” */
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .onx-pages__list{ display:none; }

  .onx-pages__mini{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width: 70px;
    height: 34px;
    padding: 0 10px;

    border-radius: 999px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 88%, var(--bg));
    color: var(--muted);

    font-weight: 900;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
  }

  .onx-pages__mini.is-hidden{ display:none !important; }

  .onx-page--nav{
    min-width: 40px;
    height: 34px;
    border-radius: 12px;
    font-weight: 900;
  }
}

/* ==========================================================================
   13) CHECKBOX genérico (con Ionicon check)
   ========================================================================== */
.chk{
  position:relative;
  display:inline-flex;
  align-items:center;
}

/* input accesible pero invisible */
.chk input{
  position:absolute;
  opacity:0;
  inset:0;
  margin:0;
  width:100%;
  height:100%;
}

/* caja visual */
.chk .box{
  width:18px;
  height:18px;
  border:1.5px solid color-mix(in srgb, var(--muted) 70%, var(--line));
  border-radius:6px;
  background:var(--surface);

  display:inline-flex;
  align-items:center;
  justify-content:center;

  transition:
    background-color .16s ease,
    border-color .16s ease,
    transform .14s cubic-bezier(.2,.9,.2,1),
    box-shadow .18s ease;
}

/* icono check (oculto por default) */
.chk .box .chk-ico{
  width:16px;
  height:16px;
  color:#fff;

  opacity:0;
  transform:scale(.78);
  transition:
    opacity .12s ease,
    transform .16s cubic-bezier(.2,.9,.2,1);
}

/* hover: se siente clickeable */
.chk:hover .box{
  border-color: color-mix(in srgb, var(--texto) 22%, var(--line));
  transform: translateY(-1px);
}

/* checked: fondo primario + check visible */
.chk input:checked + .box{
  background:var(--btn-primario-bg);
  border-color:var(--btn-primario-bg);
  box-shadow: 0 6px 14px rgba(15,23,42,.10);
}
.chk input:checked + .box .chk-ico{
  opacity:1;
  transform:scale(1);
}

/* active: micro-press */
.chk:active .box{
  transform: translateY(0) scale(.96);
}

/* focus visible (teclado) */
.chk input:focus-visible + .box{
  outline:2px solid var(--link-activo);
  outline-offset:2px;
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .chk .box,
  .chk .box .chk-ico{
    transition:none !important;
    transform:none !important;
  }
}

@media (max-width: 520px){
  .chk .box{ width:20px; height:20px; border-radius:7px; }
  .chk .box .chk-ico{ width:18px; height:18px; }
}

/* ==========================================================================
   14) MENÚ KEBAB genérico
   ========================================================================== */
.kebab{ position:relative; }

.kebab__btn{
  border:1px solid var(--line);
  background:var(--surface);
  width:36px;
  height:36px;
  border-radius:12px;
  cursor:pointer;

  display:grid;
  place-items:center;

  color:var(--muted);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.kebab__btn:hover,
.kebab__btn:focus-visible{
  color:var(--link-activo);
  background:var(--link-activo-bg);
  outline:none;
}
.kebab__btn svg circle{ fill:currentColor; transition:fill .2s ease; }

.kebab__menu{
  position:absolute;
  right:0;
  top:40px;
  min-width:160px;

  border:1px solid var(--line);
  background:var(--surface);
  border-radius:12px;
  padding:6px;
  box-shadow:var(--shadow);

  display:none;
  z-index:5;
}
.kebab__item{
  display:block;
  width:100%;
  text-align:left;

  background:none;
  border:0;
  padding:8px 10px;
  border-radius:8px;

  color:var(--texto);
  font-weight:600;

  transition:background .18s ease, color .18s ease;
}
.kebab__item:hover,
.kebab__item:focus-visible{
  background:var(--kebab-action-bg);
  color:var(--kebab-action-text);
  outline:none;
}
.kebab__item--danger:hover,
.kebab__item--danger:focus-visible{
  background:var(--kebab-danger-bg);
  color:var(--kebab-danger-text);
}

/* =========================================================
   KEBAB · Menú flotante (portal) sin verse enorme
   ========================================================= */
.kebab__menu.is-floating{
  position:fixed !important;
  z-index:6000 !important;
  display:block;

  /* ✅ mantiene el tamaño “compacto” */
  width:max-content;
  min-width:160px;
  max-width:min(220px, calc(100vw - 16px)); /* antes 260/92vw lo hacía gigante */

  /* ✅ evita que se estire por default */
  right:auto;
  bottom:auto;

  /* mismo look */
  padding:6px;
  border-radius:12px;
  box-shadow:var(--shadow);
}

/* Opcional: si algún label es largo, que no te rompa el menú */
.kebab__menu.is-floating .kebab__item{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

/* ==========================================================================
   15) HELPERS DE SCROLL
   ========================================================================== */
.onx-scroll-y,
.onx-scroll-list{
  max-height:var(--onx-scroll-max-h, 70vh);
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:6px;
  overscroll-behavior:contain;
}

/* ==========================================================================
   16) LEYENDA genérica
   ========================================================================== */
.onx-legend{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.onx-legend__item{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-weight:600;
  font-size:12px;
}
.onx-legend__dot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
}

/* ==========================================================================
   17) CARD genérica
   ========================================================================== */
.onx-item{
  display:flex;
  gap:12px;

  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background-color .25s ease,
    border-color .25s ease;
}
.onx-item:hover{
  transform:translateY(var(--card-hover-translate));
  box-shadow:var(--card-hover-shadow);
}
.onx-item__side{
  width:6px;
  border-radius:8px;
  background:var(--pill-borde);
  margin-right:2px;
}
.onx-item__body{ flex:1; min-width:0; }
.onx-item__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}
.onx-item__title{
  margin:0;
  font-size:16px;
  font-weight:800;
}
.onx-item__time{
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
}
.onx-item__desc{
  margin:0 0 8px;
  color:var(--muted);
  font-size:13px;
}
.onx-item__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.onx-card-actions{ display:flex; gap:8px; }
.onx-iconbtn{
  border:0;
  background:transparent;
  padding:4px;
  line-height:0;
  cursor:pointer;

  color:var(--muted);
  border-radius:6px;

  transition:color .18s ease, transform .18s ease;
}
.onx-iconbtn:hover{ color:var(--link-activo); }
.onx-iconbtn:focus-visible{
  outline:2px solid var(--link-activo);
  outline-offset:2px;
  border-radius:6px;
}
.onx-iconbtn svg{
  width:18px;
  height:18px;
  display:block;
  fill:none;
  stroke:currentColor;
  transition:transform .18s ease, opacity .18s ease;
}
.onx-iconbtn[data-action="pin"]:hover svg{ transform:translateY(-1px) rotate(-12deg); }
.onx-iconbtn[data-action="archive"]:hover svg{ transform:translateY(-1px); opacity:.95; }
.onx-iconbtn:active svg{ transform:translateY(0); opacity:1; }
.onx-iconbtn.is-active{ color:var(--link-activo); }
.onx-iconbtn[data-action="pin"].is-active svg{ transform:translateY(-1px) rotate(-12deg); }

/* ==========================================================================
   18) SCROLLBAR moderno global
   ========================================================================== */
.onx-scroll-y,
.onx-scroll-list,
.onx-dd__menu,
.notif-list,
.main-col .content,
.menu-nav,
.onx-filtersDrawer__body{
  scrollbar-width:thin;
  scrollbar-color:var(--pill-borde) transparent;
}

.onx-scroll-y::-webkit-scrollbar,
.onx-scroll-list::-webkit-scrollbar,
.onx-dd__menu::-webkit-scrollbar,
.notif-list::-webkit-scrollbar,
.main-col .content::-webkit-scrollbar,
.menu-nav::-webkit-scrollbar,
.onx-filtersDrawer__body::-webkit-scrollbar{
  width:8px;
  height:8px;
  background:transparent;
}

.onx-scroll-y::-webkit-scrollbar-track,
.onx-scroll-list::-webkit-scrollbar-track,
.onx-dd__menu::-webkit-scrollbar-track,
.notif-list::-webkit-scrollbar-track,
.main-col .content::-webkit-scrollbar-track,
.menu-nav::-webkit-scrollbar-track,
.onx-filtersDrawer__body::-webkit-scrollbar-track{
  background:transparent;
}

.onx-scroll-y::-webkit-scrollbar-thumb,
.onx-scroll-list::-webkit-scrollbar-thumb,
.onx-dd__menu::-webkit-scrollbar-thumb,
.notif-list::-webkit-scrollbar-thumb,
.main-col .content::-webkit-scrollbar-thumb,
.menu-nav::-webkit-scrollbar-thumb,
.onx-filtersDrawer__body::-webkit-scrollbar-thumb{
  background-color:var(--pill-borde);
  border-radius:999px;
  border:2px solid transparent;
}

.onx-scroll-y::-webkit-scrollbar-thumb:hover,
.onx-scroll-list::-webkit-scrollbar-thumb:hover,
.onx-dd__menu::-webkit-scrollbar-thumb:hover,
.notif-list::-webkit-scrollbar-thumb:hover,
.main-col .content::-webkit-scrollbar-thumb:hover,
.menu-nav::-webkit-scrollbar-thumb:hover,
.onx-filtersDrawer__body::-webkit-scrollbar-thumb:hover{
  background-color:var(--link-activo);
}

.onx-scroll-y::-webkit-scrollbar-button,
.onx-scroll-list::-webkit-scrollbar-button,
.onx-dd__menu::-webkit-scrollbar-button,
.notif-list::-webkit-scrollbar-button,
.main-col .content::-webkit-scrollbar-button,
.menu-nav::-webkit-scrollbar-button,
.onx-filtersDrawer__body::-webkit-scrollbar-button{
  background:transparent;
  height:0;
}

/* ==========================================================================
   19) Layout base usado en vistas
   ========================================================================== */
.content{
  padding: 0 var(--page-gutters) 16px;
}
.card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 16px;
}