/* ============================================================
   VORECOL DESIGN SYSTEM
   custom.css — Tabler / Bootstrap 5.3 override layer
   ============================================================ */

/* ============================================================
   §01. CSS Custom Properties — Brand Tokens
   ============================================================ */
:root {
  --vorecol-primary:        #1A67B7;
  --vorecol-primary-dark:   #1A5797;
  --vorecol-primary-light:  #4090CB;
  --vorecol-primary-50:     #EBF2FB;
  --vorecol-gray-50:   #F8FAFC;
  --vorecol-gray-100:  #F1F5F9;
  --vorecol-gray-200:  #E2E8F0;
  --vorecol-gray-300:  #CBD5E1;
  --vorecol-gray-400:  #94A3B8;
  --vorecol-gray-500:  #64748B;
  --vorecol-gray-600:  #475569;
  --vorecol-gray-700:  #334155;
  --vorecol-gray-800:  #1E293B;
  --vorecol-gray-900:  #0F172A;
  --vorecol-blue-50:   #EBF2FB;
  --vorecol-blue-100:  #C5D9F2;
  --vorecol-blue-500:  #1A67B7;
  --vorecol-blue-700:  #0F3D6B;
  --vorecol-blue-900:  #0A2540;
  --vorecol-body-bg:    #F1F5F9;
  --vorecol-radius:     0.75rem;
  --vorecol-radius-sm:  0.5rem;
  --vorecol-radius-xs:  0.25rem;
  --vorecol-shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --vorecol-shadow:    0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -1px rgba(0,0,0,.05);
  --vorecol-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -2px rgba(0,0,0,.04);
  --vorecol-transition: 0.15s ease;
  --tblr-primary:          #1A67B7;
  --tblr-primary-darken:   #1A5797;
  --tblr-primary-lighten:  #4090CB;
  --tblr-primary-rgb:      26, 103, 183;
  /* Variante DE — Unificar barras + rail 48px (2026-04-23).
     Las 2 barras (rail + nav) del MISMO azul intermedio cohesivo.
     Resuelve "dos barras pegadas" sin perder los íconos del rail. */
  --vorecol-sidebar-bg:     #14253c;  /* azul intermedio entre blue-700 y blue-900 */
  --vorecol-sidebar-active: var(--vorecol-blue-500);  /* azul brillante para active */
}

/* ============================================================
   §02. Base / Body
   ============================================================ */
body { background-color: var(--vorecol-body-bg); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--vorecol-gray-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--vorecol-gray-400); }

/* ============================================================
   §03. Sidebar — Dual Panel (App Rail + Main Nav)
   ============================================================
   Estructura enterprise multi-producto (Rippling/Workday pattern):
     [rail 64px] módulos como iconos
     [nav 240px] menú del módulo activo
   Total: 304px en desktop.  Mobile: solo el nav (drawer clásico).
   ============================================================ */

/* menu_sistems_all: módulos contratados / activables (super_usuario)
   Por default escondidos. Visibilidad controlada por .menu-visible (cerrado)
   o .menu-active (abierto) — ver sidebar.php para la lógica de cuándo aplicar
   cada clase. */
.menu_sistems_all { display: none; }

/* ───────── App Rail (columna izquierda, icon-only) ───────── */
.app-rail {
  position: fixed;
  top: 0;
  left: 0;
  width: 56px;                              /* FLYOUT-LIGHT: rail angosto pero cómodo para clickear */
  height: 100vh;
  z-index: 1032;                            /* encima del panel fly-out */
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 0 0.75rem 0;
  background: var(--vorecol-sidebar-bg);    /* azul oscuro Vorecol */
  border-right: 1px solid rgba(255,255,255,0.04);
  overflow: hidden;
}

.app-rail .rail-brand {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--vorecol-radius-sm);
  margin-bottom: 1rem;
  overflow: hidden;
}
.app-rail .rail-brand img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.app-rail .rail-modules {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  align-items: center;
  padding: 0.25rem 0;
}
.app-rail .rail-modules::-webkit-scrollbar { width: 0; }

.app-rail .rail-link {
  position: relative;
  width: 40px;                              /* FLYOUT-LIGHT: 40px dentro del rail de 56 */
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: background var(--vorecol-transition), color var(--vorecol-transition), transform var(--vorecol-transition);
  flex-shrink: 0;
}
.app-rail .rail-link i {
  font-size: 1.15rem;
  line-height: 1;
}
.app-rail .rail-link:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.app-rail .rail-link.active {
  background: var(--vorecol-sidebar-active); /* DE: azul-500 brillante para destacar */
  color: #fff;
  box-shadow: 0 2px 8px rgba(26,103,183,0.35);
}
.app-rail .rail-link.active::before {
  content: "";
  position: absolute;
  left: -8px;                               /* FLYOUT-LIGHT: accent al borde del rail */
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 22px;
  background: var(--vorecol-blue-100);
  border-radius: 0 3px 3px 0;
}
/* Módulos activables (no contratados, super_usuario):
   más atenuados + badge "+" para indicar que se puede activar.
   Click abre el dialog "Mi cuenta y vigencia" para solicitar activación. */
.app-rail .rail-link-activable {
  opacity: 0.35;
  filter: saturate(0.4);
  transition: opacity var(--vorecol-transition), filter var(--vorecol-transition);
}
.app-rail .rail-link-activable:hover {
  opacity: 0.95;
  filter: saturate(1);
  background: rgba(255,255,255,0.08);
}
.app-rail .rail-link-activable .rail-link-plus {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--vorecol-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--vorecol-sidebar-bg);
  pointer-events: none;
}

.app-rail .rail-footer {
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  width: 100%;
  display: flex;
  justify-content: center;
}
.app-rail .rail-user {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-decoration: none;
  transition: transform var(--vorecol-transition);
}
.app-rail .rail-user:hover { transform: scale(1.08); }
.app-rail .rail-avatar-initials {
  background: var(--vorecol-primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  width: 36px;
  height: 36px;
}

/* ───────── Main Nav (menú del módulo activo) ─────────
   Nota: base dark — se usa tal cual en mobile drawer. En desktop (≥992px)
   se repinta BLANCO desde §03.5 FLYOUT-LIGHT más abajo. */
.app-nav.navbar-vertical {
  left: 56px;                       /* FLYOUT-LIGHT: rail 56 */
  width: 240px;
  background: var(--vorecol-sidebar-bg);  /* dark — override desktop en §03.5 */
  border-right: 1px solid rgba(255,255,255,0.04);
  box-shadow: var(--vorecol-shadow);
}
.app-nav.navbar-vertical .navbar-brand { padding: 1rem 1.25rem; }
.app-nav.navbar-vertical .navbar-brand-image { filter: brightness(0) invert(1); }

/* Collapse de submenús: Tabler fuerza display:flex en .navbar-collapse — restablecer block.
   Solo en desktop: en mobile el toggler debe controlar visibilidad (show/hide) del menú. */
@media (min-width: 992px) {
  .app-nav.navbar-vertical .navbar-collapse { display: block !important; }
}

/* El submenu del módulo activo SIEMPRE visible — defensa en profundidad:
   el JS intenta expandir el sb-mod-<id> vía BS5 Collapse, pero si falla
   (initialId vacío, colisión con legacy JS, script diferido), este CSS
   asegura que el usuario vea los items. */
.app-nav .menu_sistems_all.menu-active > .collapse { display: block !important; }

/* nav-link flex para alinear icono + texto (Tabler solo aplica a expand-sm) */
.app-nav.navbar-vertical .nav-link {
  display: flex !important;
  align-items: center;
  white-space: normal;
  word-break: break-word;
  border-radius: var(--vorecol-radius-sm);
  transition: background var(--vorecol-transition), color var(--vorecol-transition);
}

.app-nav.navbar-vertical .nav-link-icon {
  flex-shrink: 0 !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  margin: 0 0.625rem 0 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  opacity: 0.95;
}
.app-nav.navbar-vertical .nav-link-icon .ti,
.app-nav.navbar-vertical .nav-link-icon i {
  font-size: 1.05rem !important;
  line-height: 1;
  color: inherit !important;
  display: inline-block !important;
  min-width: 1rem;
  text-align: center;
}
/* Fallback cuando no hay .nav-link-icon wrapper (íconos directos en .nav-link) */
.app-nav.navbar-vertical .nav-link > i {
  color: #fff !important;
  font-size: 1.05rem !important;
  margin-right: 0.625rem;
  flex-shrink: 0;
  display: inline-block;
  min-width: 1rem;
  text-align: center;
  opacity: 0.95;
}

.app-nav.navbar-vertical .nav-link-title {
  flex: 1;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}
.app-nav.navbar-vertical .nav-link-toggle { flex-shrink: 0; margin-left: auto; }
.app-nav.navbar-vertical .nav-link-toggle::after {
  content: "";
  display: inline-block;
  width: 0.5rem; height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.7;
  transition: transform 0.2s ease;
}
.app-nav.navbar-vertical .nav-link[aria-expanded="true"] .nav-link-toggle::after,
.app-nav.navbar-vertical .nav-link.nav-link-toggle[aria-expanded="true"]::after {
  transform: rotate(45deg);
}

/* ── Nivel 1: módulo raíz (directo en .navbar-nav) ── */
.app-nav.navbar-vertical .navbar-nav > li.nav-item > .nav-link {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.6rem 0.85rem;
  margin: 0.15rem 0.5rem;
}
.app-nav.navbar-vertical .navbar-nav > li.nav-item > .nav-link:hover {
  color: #fff;
  background: rgba(255,255,255,0.06);
}
.app-nav.navbar-vertical .navbar-nav > li.nav-item > .nav-link.active {
  color: #fff;
  background: var(--vorecol-sidebar-active); /* DE: azul-500 brillante para destacar */
}

/* ── Nivel 2: dentro del primer collapse (sb-mod-N) ── */
.app-nav.navbar-vertical .collapse > ul.nav > li > .nav-link {
  color: rgba(255,255,255,0.88);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.45rem 0.75rem 0.45rem 1rem !important;
  margin: 0.1rem 0.5rem;
  position: relative;
}
.app-nav.navbar-vertical .collapse > ul.nav > li > .nav-link:hover {
  color: #fff;
  background: rgba(255,255,255,0.06);
}
.app-nav.navbar-vertical .collapse > ul.nav > li > .nav-link.active {
  color: #fff;
  background: var(--vorecol-sidebar-active); /* DE: azul-500 brillante */
  font-weight: 600;
}
/* Accent lateral en estado activo (patrón Microsoft Fluent) */
.app-nav.navbar-vertical .collapse > ul.nav > li > .nav-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 1.125rem;
  background: var(--vorecol-primary-light);
  border-radius: 0 3px 3px 0;
}

/* ── Nivel 3: dentro del segundo collapse (sb-sub-N-M) ── */
.app-nav.navbar-vertical .collapse .collapse > ul.nav {
  border-left: 1px solid rgba(255,255,255,0.15);
  margin-left: 1.375rem;
  padding-left: 0;
}
.app-nav.navbar-vertical .collapse .collapse > ul.nav > li > .nav-link,
.app-nav.navbar-vertical .collapse .collapse > ul.nav > li > a.nav-link-child {
  color: rgba(255,255,255,0.78);
  font-size: 0.8rem;
  font-weight: 400;
  padding: 0.38rem 0.75rem 0.38rem 0.875rem !important;
  margin: 0.06rem 0.25rem 0.06rem 0;
}
.app-nav.navbar-vertical .collapse .collapse > ul.nav > li > .nav-link:hover,
.app-nav.navbar-vertical .collapse .collapse > ul.nav > li > a.nav-link-child:hover {
  color: #fff;
  background: rgba(255,255,255,0.05);
}
.app-nav.navbar-vertical .collapse .collapse > ul.nav > li > .nav-link.active,
.app-nav.navbar-vertical .collapse .collapse > ul.nav > li > a.nav-link-child.active {
  color: #fff;
  background: var(--vorecol-sidebar-active); /* DE: azul-500 brillante */
}
/* Iconos en nivel 2: un pelo más atenuados */
.app-nav.navbar-vertical .collapse .nav-link-icon,
.app-nav.navbar-vertical .collapse .nav-link > i {
  opacity: 0.85;
}

.app-nav.navbar-vertical .form-select { background-color: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.15); color: #fff; font-size: 0.8125rem; }
.app-nav.navbar-vertical .form-select option { background-color: var(--vorecol-blue-900); color: #fff; }
.app-nav.navbar-vertical hr { border-color: rgba(255,255,255,0.1); }
.app-nav.navbar-vertical .nav-item .badge.bg-azure-lt { font-size: 0.6rem; padding: 0.2em 0.5em; }

/* ═══════════════════════════════════════════════════════════════════════
   §03.5  FLYOUT-LIGHT — Rail azul + panel blanco al hover (desktop only)
   Patrón: VS Code / Adobe CC / AWS Console / Azure Portal / MS Dynamics.
   ─ Default (desktop): solo rail visible. Panel aparece al hover del rail
     o del propio panel (delay 150ms abrir / 400ms cerrar, evita triangle bug).
   ─ Modo pinned (body.app-nav-pinned): panel fijo en layout clásico 2 cols.
     Persistido en localStorage 'vorecol-appnav-pinned'.
   ─ Mobile (<992px): NO aplica — queda el offcanvas drawer original.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───── Botón pin (en rail-footer) ───── */
.app-rail .rail-collapse-toggle {
  width: 40px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: rgba(255,255,255,0.55);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background var(--vorecol-transition), color var(--vorecol-transition), transform 0.25s ease;
  margin-bottom: 0.5rem;
}
.app-rail .rail-collapse-toggle:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.app-rail .rail-collapse-toggle i { font-size: 1.05rem; line-height: 1; transition: transform 0.25s ease; }
/* Pinned: rotar 45° para indicar "fijado" (como tachuela clavada) */
body.app-nav-pinned .app-rail .rail-collapse-toggle {
  color: var(--vorecol-blue-100);
  background: rgba(255,255,255,0.1);
}
body.app-nav-pinned .app-rail .rail-collapse-toggle i { transform: rotate(-45deg); }

/* ───── Hint flotante descubribilidad (primera vez) ───── */
.flyout-hint {
  position: fixed;
  left: 64px;
  top: 80px;
  background: var(--vorecol-blue-900);
  color: #fff;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 1033;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.flyout-hint::before {
  content: '';
  position: absolute;
  left: -5px; top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: var(--vorecol-blue-900);
}
body.show-flyout-hint .flyout-hint { opacity: 1; }
@media (max-width: 991.98px) { .flyout-hint { display: none !important; } }

/* ═══════════════════════════════════════════════════════════════════════
   Desktop (≥992px) — FLYOUT-LIGHT overrides
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
  /* Panel flotante: position fixed, oculto por default (translateX -100%) */
  .app-nav.navbar-vertical {
    background: #ffffff !important;
    color: var(--vorecol-gray-800);
    border-right: 1px solid var(--vorecol-gray-200);
    box-shadow: 4px 0 16px rgba(10,37,64,0.08);
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
    /* Cierre: delay de 400ms para tolerar movimiento diagonal rail→panel */
    transition: transform 0.22s ease, opacity 0.22s ease;
    transition-delay: 0.4s;
    z-index: 1031;
  }

  /* Hover del rail o del panel → abrir con delay corto */
  .app-rail:hover ~ .app-nav.navbar-vertical,
  .app-nav.navbar-vertical:hover {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0.15s;
  }

  /* Excepción: si el ícono hovered es ACTIVABLE (no contratado), NO abrir
     el panel — no tiene submenu real, solo se usa para disparar el dialog
     "Mi cuenta y vigencia" al clickear. Evita el flash de panel vacío. */
  .app-rail:has(.rail-link-activable:hover) ~ .app-nav.navbar-vertical:not(:hover) {
    transform: translateX(-100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition-delay: 0s !important;
  }

  /* Pinned: panel siempre visible, sin transición, sombra mínima */
  body.app-nav-pinned .app-nav.navbar-vertical {
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    box-shadow: var(--vorecol-shadow-sm);
    transition: none;
  }

  /* ──── Repintar el nav a claro (desktop only) ──── */
  .app-nav.navbar-vertical .navbar-brand-image { filter: none; }

  /* Nivel 1 — módulo raíz (Generales / módulo activo) */
  .app-nav.navbar-vertical .navbar-nav > li.nav-item > .nav-link {
    color: var(--vorecol-gray-900);
    font-weight: 700;
  }
  .app-nav.navbar-vertical .navbar-nav > li.nav-item > .nav-link:hover {
    color: var(--vorecol-blue-500);
    background: var(--vorecol-blue-50);
  }
  .app-nav.navbar-vertical .navbar-nav > li.nav-item > .nav-link.active {
    color: var(--vorecol-blue-500);
    background: var(--vorecol-blue-50);
  }

  /* Nivel 2 — dentro de sb-mod-N */
  .app-nav.navbar-vertical .collapse > ul.nav > li > .nav-link {
    color: var(--vorecol-gray-700);
    font-weight: 500;
  }
  .app-nav.navbar-vertical .collapse > ul.nav > li > .nav-link:hover {
    color: var(--vorecol-blue-500);
    background: var(--vorecol-blue-50);
  }
  .app-nav.navbar-vertical .collapse > ul.nav > li > .nav-link.active {
    color: var(--vorecol-blue-500);
    background: var(--vorecol-blue-50);
    font-weight: 600;
  }
  .app-nav.navbar-vertical .collapse > ul.nav > li > .nav-link.active::before {
    background: var(--vorecol-blue-500);
  }

  /* Nivel 3 — sub-submenu */
  .app-nav.navbar-vertical .collapse .collapse > ul.nav {
    border-left-color: var(--vorecol-gray-200);
  }
  .app-nav.navbar-vertical .collapse .collapse > ul.nav > li > .nav-link,
  .app-nav.navbar-vertical .collapse .collapse > ul.nav > li > a.nav-link-child {
    color: var(--vorecol-gray-600);
  }
  .app-nav.navbar-vertical .collapse .collapse > ul.nav > li > .nav-link:hover,
  .app-nav.navbar-vertical .collapse .collapse > ul.nav > li > a.nav-link-child:hover {
    color: var(--vorecol-blue-500);
    background: var(--vorecol-blue-50);
  }
  .app-nav.navbar-vertical .collapse .collapse > ul.nav > li > .nav-link.active,
  .app-nav.navbar-vertical .collapse .collapse > ul.nav > li > a.nav-link-child.active {
    color: var(--vorecol-blue-500);
    background: var(--vorecol-blue-50);
    font-weight: 600;
  }

  /* Iconos en panel claro: grises por default, azules en active */
  .app-nav.navbar-vertical .nav-link-icon { color: var(--vorecol-gray-500) !important; opacity: 1; }
  .app-nav.navbar-vertical .nav-link > i { color: var(--vorecol-gray-500) !important; opacity: 1; }
  .app-nav.navbar-vertical .nav-link.active .nav-link-icon,
  .app-nav.navbar-vertical .nav-link.active > i { color: var(--vorecol-blue-500) !important; }
  .app-nav.navbar-vertical .nav-link-toggle::after { opacity: 0.55; }

  /* Separadores y controles secundarios */
  .app-nav.navbar-vertical hr { border-color: var(--vorecol-gray-200); }
  .app-nav.navbar-vertical .form-select {
    background-color: var(--vorecol-gray-50);
    border-color: var(--vorecol-gray-200);
    color: var(--vorecol-gray-800);
  }
  .app-nav.navbar-vertical .form-select option { background-color: #fff; color: var(--vorecol-gray-800); }
  .app-nav.navbar-vertical .nav-item .badge.bg-azure-lt { font-size: 0.6rem; padding: 0.2em 0.5em; }

  /* Scrollbar del panel (ahora claro) */
  .app-nav.navbar-vertical ::-webkit-scrollbar-thumb { background: var(--vorecol-gray-300); }
  .app-nav.navbar-vertical ::-webkit-scrollbar-thumb:hover { background: var(--vorecol-gray-400); }

  /* ──── Page wrapper / topbar margins ──── */
  /* Default (fly-out): solo se reserva el rail */
  .app-nav ~ .page-wrapper,
  .page:has(.app-nav) .page-wrapper { margin-left: 56px !important; transition: margin-left 0.22s ease; }
  body:has(.app-rail) .topbar .navbar-custom { margin-left: 56px !important; transition: margin-left 0.22s ease; }
  .app-nav ~ header.navbar { margin-left: 56px !important; transition: margin-left 0.22s ease; }

  /* Veltrix (psicosmart): evitar doble offset del .content-page */
  .page-wrapper .content-page { margin-left: 0 !important; }

  /* Veltrix (recruiting + otros legacy): el .footer estaba hardcoded con
     position:absolute + left:240px (ancho del sidebar legacy). Con FLYOUT-LIGHT
     ese left:240px choca con el rail (56px) o el nav pinned (296px) —
     queda cortado o con hueco lateral. Restaurar al flow Tabler normal:
     position:static + sin offsets fijos + ancho 100% del page-wrapper. */
  .page-wrapper > .footer,
  .page-wrapper .footer.footer-transparent {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    background: transparent !important;
    padding: 1rem 0 !important;
  }

  /* Pinned: reservar rail + panel (56 + 240 = 296px) */
  body.app-nav-pinned .app-nav ~ .page-wrapper,
  body.app-nav-pinned .page:has(.app-nav) .page-wrapper { margin-left: 296px !important; }
  body.app-nav-pinned:has(.app-rail) .topbar .navbar-custom { margin-left: 296px !important; }
  body.app-nav-pinned .app-nav ~ header.navbar { margin-left: 296px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   §03.6  FLYOUT-LIGHT — overrides para modo oscuro (data-bs-theme=dark)
   Cuando el usuario activa el tema oscuro, el panel blanco se convierte
   en un panel gris-oscuro con texto claro, manteniendo el patrón fly-out.
   El rail sigue siendo azul Vorecol en ambos modos (siempre dark).
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
  /* Panel: dark bg + light text */
  [data-bs-theme="dark"] .app-nav.navbar-vertical {
    background: var(--vorecol-sidebar-bg) !important;   /* azul intermedio oscuro */
    color: rgba(255,255,255,0.88);
    border-right: 1px solid rgba(255,255,255,0.05);
    box-shadow: 4px 0 16px rgba(0,0,0,0.35);
  }
  /* Nivel 1 */
  [data-bs-theme="dark"] .app-nav.navbar-vertical .navbar-nav > li.nav-item > .nav-link {
    color: #fff;
  }
  [data-bs-theme="dark"] .app-nav.navbar-vertical .navbar-nav > li.nav-item > .nav-link:hover {
    color: #fff;
    background: rgba(255,255,255,0.08);
  }
  [data-bs-theme="dark"] .app-nav.navbar-vertical .navbar-nav > li.nav-item > .nav-link.active {
    color: #fff;
    background: var(--vorecol-sidebar-active);          /* azul-500 brillante */
  }
  /* Nivel 2 */
  [data-bs-theme="dark"] .app-nav.navbar-vertical .collapse > ul.nav > li > .nav-link {
    color: rgba(255,255,255,0.82);
  }
  [data-bs-theme="dark"] .app-nav.navbar-vertical .collapse > ul.nav > li > .nav-link:hover {
    color: #fff;
    background: rgba(255,255,255,0.06);
  }
  [data-bs-theme="dark"] .app-nav.navbar-vertical .collapse > ul.nav > li > .nav-link.active {
    color: #fff;
    background: var(--vorecol-sidebar-active);
  }
  [data-bs-theme="dark"] .app-nav.navbar-vertical .collapse > ul.nav > li > .nav-link.active::before {
    background: var(--vorecol-primary-light);
  }
  /* Nivel 3 */
  [data-bs-theme="dark"] .app-nav.navbar-vertical .collapse .collapse > ul.nav {
    border-left-color: rgba(255,255,255,0.12);
  }
  [data-bs-theme="dark"] .app-nav.navbar-vertical .collapse .collapse > ul.nav > li > .nav-link,
  [data-bs-theme="dark"] .app-nav.navbar-vertical .collapse .collapse > ul.nav > li > a.nav-link-child {
    color: rgba(255,255,255,0.75);
  }
  [data-bs-theme="dark"] .app-nav.navbar-vertical .collapse .collapse > ul.nav > li > .nav-link:hover,
  [data-bs-theme="dark"] .app-nav.navbar-vertical .collapse .collapse > ul.nav > li > a.nav-link-child:hover {
    color: #fff;
    background: rgba(255,255,255,0.05);
  }
  [data-bs-theme="dark"] .app-nav.navbar-vertical .collapse .collapse > ul.nav > li > .nav-link.active,
  [data-bs-theme="dark"] .app-nav.navbar-vertical .collapse .collapse > ul.nav > li > a.nav-link-child.active {
    color: #fff;
    background: var(--vorecol-sidebar-active);
  }
  /* Iconos, separadores, form-select en dark */
  [data-bs-theme="dark"] .app-nav.navbar-vertical .nav-link-icon,
  [data-bs-theme="dark"] .app-nav.navbar-vertical .nav-link > i { color: rgba(255,255,255,0.85) !important; }
  [data-bs-theme="dark"] .app-nav.navbar-vertical .nav-link.active .nav-link-icon,
  [data-bs-theme="dark"] .app-nav.navbar-vertical .nav-link.active > i { color: #fff !important; }
  [data-bs-theme="dark"] .app-nav.navbar-vertical hr { border-color: rgba(255,255,255,0.1); }
  [data-bs-theme="dark"] .app-nav.navbar-vertical .form-select {
    background-color: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
    color: #fff;
  }
  [data-bs-theme="dark"] .app-nav.navbar-vertical .form-select option {
    background-color: var(--vorecol-blue-900);
    color: #fff;
  }
  /* Logo del nav (d-lg-none en desktop, pero por si acaso) */
  [data-bs-theme="dark"] .app-nav.navbar-vertical .navbar-brand-image { filter: brightness(0) invert(1); }
}

@media (max-width: 991.98px) {
  .app-rail { display: none !important; }
  /* En mobile: el <aside navbar-vertical> queda como top-bar compacta con
     hamburger + brand + controles user. El contenido del menu se abre como
     DRAWER LATERAL IZQUIERDO (no como collapse hacia abajo). */
  .app-nav.navbar-vertical {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: auto;
    bottom: auto;
    padding: 0.25rem 0.5rem;
    box-shadow: var(--vorecol-shadow-sm);
    /* z-index normal: debajo de los offcanvas de contenido (manual, notif, etc)
       que usan 1045 por default, para no tapar su boton de cerrar. */
    z-index: 1030;
  }
  /* Cuando el drawer del sidebar esta abierto, elevar el aside encima del
     backdrop (1040) y del drawer (1045) para que el hamburger/X siga
     clickeable. Solo aplica con drawer activo. */
  body.sidebar-drawer-open .app-nav.navbar-vertical {
    z-index: 1050;
  }
  .app-nav.navbar-vertical > .container-fluid {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.25rem;
  }
  .app-nav.navbar-vertical .navbar-toggler {
    color: rgba(255,255,255,0.85);
    border-color: rgba(255,255,255,0.15);
    background: transparent;
    padding: 0.375rem 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Swap hamburger <-> X segun aria-expanded del toggler */
  .app-nav .nav-toggler-icons .toggler-ico-open,
  .app-nav .nav-toggler-icons .toggler-ico-close {
    font-size: 1.5rem;
    line-height: 1;
    color: rgba(255,255,255,0.9);
  }
  .app-nav .nav-toggler-icons .toggler-ico-close { display: none; }
  .app-nav .nav-toggler-icons[aria-expanded="true"] .toggler-ico-open { display: none; }
  .app-nav .nav-toggler-icons[aria-expanded="true"] .toggler-ico-close { display: inline-block; }
  .app-nav.navbar-vertical .navbar-brand-image { height: 1.75rem; }
  /* Drawer lateral: #sidebar-menu fixed left, slide-in con transform.
     padding-top amplio para que el contenido no quede tapado por el topbar
     (aside navbar-vertical) que queda visible encima del drawer. */
  .app-nav.navbar-vertical .navbar-collapse {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 85vw !important;
    max-width: 320px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    background: var(--vorecol-sidebar-bg);  /* DE: drawer mobile mismo color cohesivo */
    box-shadow: 4px 0 20px rgba(0,0,0,0.3);
    z-index: 1045 !important;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    overflow-y: auto !important;
    display: block !important;
    padding-top: 60px;
    flex-basis: auto;
  }
  .app-nav.navbar-vertical .navbar-collapse.show {
    transform: translateX(0) !important;
  }
  /* Backdrop real (div) para que el tap cierre el drawer en mobile */
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1040;
    opacity: 0;
    transition: opacity 0.2s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .sidebar-backdrop.show { opacity: 1; }
  /* Padding del menu en mobile drawer */
  .app-nav.navbar-vertical .navbar-nav { padding: 0.25rem 0; }
  .app-nav.navbar-vertical .navbar-nav > li.nav-item > .nav-link {
    margin: 0.1rem 0.25rem;
  }
  .app-rail .rail-collapse-toggle { display: none; }
  /* Topbar: oculto en mobile — los controles viven en el app-nav mobile */
  body .app-nav ~ header.navbar { margin-left: 0 !important; }
  /* Boton cerrar drawer mobile (top-right del panel) */
  .app-nav.navbar-vertical .navbar-collapse .btn-close-drawer {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    z-index: 2;
    cursor: pointer;
  }
  .app-nav.navbar-vertical .navbar-collapse .btn-close-drawer:hover,
  .app-nav.navbar-vertical .navbar-collapse .btn-close-drawer:active {
    background: rgba(255,255,255,0.22);
  }
}

/* DE: Retro-compat: estilos legacy sin .app-nav (en páginas que aún no actualizaron su header) */
.navbar-vertical:not(.app-nav) {
  background: var(--vorecol-sidebar-bg);
  border-right: none;
  box-shadow: var(--vorecol-shadow);
}

/* ───────── Anti-FOUC sidebar — fix "el menú se abre al recargar" (2026-04-23) ─────────
   Causa H1 (PENDING_sidebar_fixes.md): el primer paint puede mostrar los .collapse
   abiertos por una fracción de segundo antes de que el CSS termine de aplicar.
   Forzar display:none !important asegura que el primer paint ya tenga el estado
   correcto. Los handlers BS5 Collapse manuales (al click del user) siguen animando
   normalmente porque toggleamos la clase .show desde JS. */
.app-nav .collapse:not(.show) {
  display: none !important;
}
/* FLYOUT-LIGHT (2026-04-24): específicidad extra para que la regla de
   .menu-active > .collapse gane a la anti-FOUC de arriba. Sin esto, hover
   sobre un módulo mostraba el título pero no abría su submenu. */
body .app-nav .menu_sistems_all.menu-active > .collapse {
  display: block !important;
}
.navbar-vertical:not(.app-nav) .nav-link { display: flex !important; align-items: center; }

/* ============================================================
   §04. Topbar
   ============================================================ */
header.navbar.navbar-expand-lg { border-bottom: 1px solid var(--vorecol-gray-200); background: #fff; box-shadow: var(--vorecol-shadow-sm); }
.topbar-search { display: none !important; }
.topbar-search .search-icon { position: absolute; left: 0.75rem; color: var(--vorecol-gray-400); font-size: 1rem; pointer-events: none; }
.topbar-search .form-control { padding-left: 2.25rem; border-radius: 2rem; background: var(--vorecol-gray-100); border-color: transparent; width: 220px; font-size: 0.875rem; transition: width var(--vorecol-transition), background var(--vorecol-transition); }
.topbar-search .form-control:focus { width: 280px; background: #fff; border-color: var(--vorecol-primary); box-shadow: 0 0 0 3px rgba(26,103,183,.12); }
.badge-notification { position: absolute; top: 4px; right: 4px; min-width: 1rem; height: 1rem; font-size: 0.625rem; padding: 0.15rem 0.3rem; border-radius: 10rem; border: 2px solid #fff; }

/* ============================================================
   §05. Cards
   ============================================================ */
.card { border-radius: var(--vorecol-radius); border: 1px solid var(--vorecol-gray-200); box-shadow: var(--vorecol-shadow-sm); transition: box-shadow var(--vorecol-transition); }
.card:hover { box-shadow: var(--vorecol-shadow); }
.card-header { border-bottom: 1px solid var(--vorecol-gray-200); background: transparent; padding: 1rem 1.25rem; }
.card-footer { border-top: 1px solid var(--vorecol-gray-200); background: transparent; }
.stat-card { border-left: 3px solid var(--vorecol-primary); border-radius: var(--vorecol-radius); }

/* ============================================================
   §06. Tables
   ============================================================ */
.table thead th { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--vorecol-gray-500); border-bottom: 2px solid var(--vorecol-gray-200); }
.table tbody tr:hover { background-color: var(--vorecol-gray-50); }

/* ============================================================
   §07. Buttons
   ============================================================ */
.btn { border-radius: var(--vorecol-radius-sm); font-weight: 500; font-size: 0.875rem; transition: all var(--vorecol-transition); }
.btn-rounded, .btn-pill { border-radius: 50rem !important; }
.btn-icon-label { display: inline-flex; align-items: center; gap: 0.375rem; }
.btn-ripple { position: relative; overflow: hidden; }
.btn-icon { white-space: normal; }
.waves-effect { position: relative; overflow: hidden; }

/* ============================================================
   §08. Badges
   ============================================================ */
.badge { border-radius: var(--vorecol-radius-xs); }

/* ============================================================
   §09. Forms
   ============================================================ */
.form-control, .form-select { border-radius: var(--vorecol-radius-sm); border-color: var(--vorecol-gray-300); font-size: 0.875rem; }
.form-control:focus, .form-select:focus { border-color: var(--vorecol-primary); box-shadow: 0 0 0 3px rgba(26,103,183,.12); }
.form-label { font-weight: 500; font-size: 0.875rem; }

/* ============================================================
   §10. Alerts
   ============================================================ */
.alert { border-radius: var(--vorecol-radius-sm); border: none; }

/* ============================================================
   §11. List Groups
   ============================================================ */
.list-group-item { border-color: var(--vorecol-gray-200); }

/* ============================================================
   §12. Modals / jQuery UI Dialogs
   ============================================================ */
.modal-content { border-radius: var(--vorecol-radius); border: none; box-shadow: var(--vorecol-shadow-lg); }
.modal-header { border-bottom: 1px solid var(--vorecol-gray-200); }
.modal-footer { border-top: 1px solid var(--vorecol-gray-200); }
.ui-dialog { border-radius: var(--vorecol-radius) !important; border: none !important; box-shadow: var(--vorecol-shadow-lg) !important; }
.ui-dialog-titlebar { border-radius: var(--vorecol-radius) var(--vorecol-radius) 0 0 !important; background: var(--vorecol-primary) !important; color: #fff !important; }
.ui-dialog-titlebar-close { color: #fff !important; }
.ui-dialog-buttonset .ui-button { border-radius: var(--vorecol-radius-sm) !important; }
.ui-widget-overlay { background: rgba(0,0,0,0.5) !important; }

/* ============================================================
   §13. Page Header
   ============================================================ */
.page-header { padding: 1.5rem 0; }
.page-pretitle { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--vorecol-gray-400); margin-bottom: 0.25rem; }
.page-title { font-size: 1.25rem; font-weight: 700; color: var(--vorecol-gray-900); margin: 0; }

/* ============================================================
   §14. Login — Split Layout
   ============================================================ */
.login-split { min-height: calc(100vh - 58px); }
.login-brand-panel { background: linear-gradient(135deg, var(--vorecol-blue-900) 0%, var(--vorecol-blue-700) 60%, var(--vorecol-primary) 100%); display: flex; align-items: center; justify-content: center; padding: 3rem; position: relative; overflow: hidden; }
.login-brand-panel::before { content: ''; position: absolute; top: -50%; right: -20%; width: 80%; height: 80%; background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%); border-radius: 50%; }
.brand-content { position: relative; z-index: 1; max-width: 420px; color: #fff; }
.brand-content img { height: 2.5rem; margin-bottom: 2rem; filter: brightness(0) invert(1); }
.brand-tagline { font-size: 1.875rem; font-weight: 700; line-height: 1.25; margin-bottom: 1rem; }
.brand-subtitle { font-size: 1rem; color: rgba(255,255,255,0.75); margin-bottom: 2rem; line-height: 1.6; }
.brand-features { display: flex; flex-direction: column; gap: 0.875rem; }
.brand-feature { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9375rem; color: rgba(255,255,255,0.85); }
.brand-feature .ti { font-size: 1.125rem; color: rgba(255,255,255,0.6); }
.login-form-panel { display: flex; align-items: center; justify-content: center; background: #fff; padding: 2rem 1.5rem; }
.login-form-wrapper { width: 100%; max-width: 420px; }

/* ============================================================
   §15. Error Pages
   ============================================================ */
.error-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--vorecol-body-bg); padding: 2rem; }
.error-page-container { text-align: center; max-width: 480px; }
.error-page-illustration { font-size: 5rem; color: var(--vorecol-gray-300); margin-bottom: 1.5rem; line-height: 1; }
.error-page-code { font-size: 6rem; font-weight: 800; line-height: 1; background: linear-gradient(135deg, var(--vorecol-primary) 0%, var(--vorecol-blue-700) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.5rem; }
.error-page-title { font-size: 1.5rem; font-weight: 700; color: var(--vorecol-gray-800); margin-bottom: 0.75rem; }
.error-page-text { font-size: 0.9375rem; color: var(--vorecol-gray-500); margin-bottom: 2rem; line-height: 1.6; }

/* ============================================================
   §16. Skeleton Loading
   ============================================================ */
.skeleton { background: linear-gradient(90deg, var(--vorecol-gray-100) 25%, var(--vorecol-gray-200) 50%, var(--vorecol-gray-100) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s infinite; border-radius: var(--vorecol-radius-xs); display: block; }
.skeleton-text { height: 1em; margin-bottom: 0.5em; }
.skeleton-text:last-child { width: 60%; }
.skeleton-title { height: 1.5em; margin-bottom: 0.75em; }
.skeleton-avatar { border-radius: 50%; }
.skeleton-card { height: 120px; border-radius: var(--vorecol-radius); }

/* ============================================================
   §16b. Avatares circulares (estandar Microsoft 365 / Google / LinkedIn).
   Override del default Tabler que es rounded square.
   Aplica a .avatar en topbar, listas, preview del upload, etc.
   aspect-ratio + flex-shrink: 0 previenen que se deforme en óvalo
   cuando el avatar está en un flex container con texto largo al lado.
   ============================================================ */
.avatar {
    border-radius: 50% !important;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
}

/* ============================================================
   §17. Sparklines
   ============================================================ */
.sparkline { display: block; overflow: visible; }
.sparkline-path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sparkline-area { opacity: 0.15; stroke: none; }

/* ============================================================
   §18. Progress Rings
   ============================================================ */
.progress-ring-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.progress-ring__track { stroke: var(--vorecol-gray-200); fill: none; }
.progress-ring__fill { fill: none; stroke-linecap: round; transition: stroke-dashoffset 0.6s ease; transform: rotate(-90deg); transform-origin: 50% 50%; }
.progress-ring__label { position: absolute; font-weight: 700; font-size: 0.875rem; }

/* ============================================================
   §19. Empty States
   ============================================================ */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3rem 1.5rem; color: var(--vorecol-gray-400); }
.empty-state-icon { font-size: 3.5rem; margin-bottom: 1.25rem; opacity: 0.5; }
.empty-state-title { font-size: 1.125rem; font-weight: 600; color: var(--vorecol-gray-700); margin-bottom: 0.5rem; }
.empty-state-text { font-size: 0.875rem; max-width: 320px; line-height: 1.6; }
.empty-state .btn { margin-top: 1.5rem; }

/* ============================================================
   §20. Toasts
   ============================================================ */
.toast { border-radius: var(--vorecol-radius-sm); box-shadow: var(--vorecol-shadow-lg); border: none; overflow: hidden; }
.toast-progress { height: 3px; background: rgba(255,255,255,0.4); position: absolute; bottom: 0; left: 0; animation: toast-progress-bar linear forwards; }

/* ============================================================
   §21. Module Accent Colors
   ============================================================ */
.module-accent-psicosmart    { --module-accent: #7B61FF; }
.module-accent-360           { --module-accent: #0EA5E9; }
.module-accent-learning      { --module-accent: #10B981; }
.module-accent-performance   { --module-accent: #F59E0B; }
.module-accent-climate       { --module-accent: #06B6D4; }
.module-accent-compensations { --module-accent: #EC4899; }
.module-accent-recruiting    { --module-accent: #8B5CF6; }
.module-accent-035           { --module-accent: #EF4444; }
.module-accent-attendance    { --module-accent: #F97316; }

/* ============================================================
   §22. Keyboard Shortcuts
   ============================================================ */
kbd { background: var(--vorecol-gray-100); border: 1px solid var(--vorecol-gray-300); border-bottom-width: 2px; border-radius: var(--vorecol-radius-xs); color: var(--vorecol-gray-600); font-family: inherit; font-size: 0.75em; padding: 0.1em 0.4em; }

/* ============================================================
   §23. Command Palette
   ============================================================ */
.command-palette-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9998; display: flex; align-items: flex-start; justify-content: center; padding-top: 8vh; }
.command-palette { background: #fff; border-radius: var(--vorecol-radius); box-shadow: var(--vorecol-shadow-lg); width: 100%; max-width: 560px; overflow: hidden; }
.command-palette-input { border: none; border-bottom: 1px solid var(--vorecol-gray-200); padding: 1rem 1.25rem; font-size: 1rem; width: 100%; outline: none; }
.command-palette-results { max-height: 360px; overflow-y: auto; }
.command-palette-item { padding: 0.75rem 1.25rem; cursor: pointer; display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; }
.command-palette-item:hover { background: var(--vorecol-gray-50); }

/* ============================================================
   §24. Session Timeout Warning
   ============================================================ */
.session-warning-modal .modal-header { background: #f59e0b; color: #fff; }
.session-warning-countdown { font-size: 3rem; font-weight: 800; text-align: center; color: #f59e0b; }

/* ============================================================
   §25. Stepper / Wizard
   ============================================================ */
.stepper { display: flex; align-items: flex-start; }
.stepper-item { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; }
.stepper-item:not(:last-child)::after { content: ''; position: absolute; top: 1.125rem; left: calc(50% + 1.25rem); right: calc(-50% + 1.25rem); height: 2px; background: var(--vorecol-gray-200); }
.stepper-item.completed::after { background: var(--vorecol-primary); }
.stepper-icon { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--vorecol-gray-200); color: var(--vorecol-gray-500); display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 700; position: relative; z-index: 1; transition: background var(--vorecol-transition), color var(--vorecol-transition); }
.stepper-item.active .stepper-icon,
.stepper-item.completed .stepper-icon { background: var(--vorecol-primary); color: #fff; }
.stepper-title { font-size: 0.75rem; font-weight: 600; margin-top: 0.5rem; text-align: center; }

/* ============================================================
   §26. NProgress
   ============================================================ */
#nprogress .bar { background: var(--vorecol-primary) !important; height: 3px !important; }
#nprogress .peg { box-shadow: 0 0 10px var(--vorecol-primary), 0 0 5px var(--vorecol-primary) !important; }
#nprogress .spinner-icon { border-top-color: var(--vorecol-primary) !important; border-left-color: var(--vorecol-primary) !important; }

/* ============================================================
   §27. Rate / feedback / botones de módulo
   ============================================================ */
.rate_vorecol { display: flex; gap: 0.25rem; }
.div_rate { cursor: pointer; }
.button_psicosmart  { background: linear-gradient(135deg, #7B61FF 0%, #5B3FFF 100%); color: #fff; border: none; }
.button_human       { background: linear-gradient(135deg, #10B981 0%, #059669 100%); color: #fff; border: none; }
.button_performance { background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%); color: #fff; border: none; }
.button_climate     { background: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%); color: #fff; border: none; }
.button_360         { background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%); color: #fff; border: none; }

/* ============================================================
   §28. File Upload / Drag & Drop
   ============================================================ */
.dropzone { border: 2px dashed var(--vorecol-gray-300); border-radius: var(--vorecol-radius); padding: 2.5rem; text-align: center; transition: border-color var(--vorecol-transition), background var(--vorecol-transition); cursor: pointer; }
.dropzone:hover, .dropzone.drag-over { border-color: var(--vorecol-primary); background: var(--vorecol-primary-50, #EBF2FB); }
.dropzone-icon { font-size: 2.5rem; color: var(--vorecol-gray-300); margin-bottom: 0.75rem; }

/* ============================================================
   §29. Animaciones
   ============================================================ */
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes toast-progress-bar { from { width: 100%; } to { width: 0%; } }
@keyframes pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.7; } }
@keyframes float-up { 0% { transform: translateY(0); } 50% { transform: translateY(-6px); } 100% { transform: translateY(0); } }
@keyframes pop-in { 0% { transform: scale(0.8); opacity: 0; } 70% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } }
@keyframes chart-fade-in { from { opacity: 0; transform: scaleY(0.85); } to { opacity: 1; transform: scaleY(1); } }
@keyframes celebration-bounce { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-12px) rotate(-3deg); } 75% { transform: translateY(-8px) rotate(3deg); } }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

.animate-stagger > * { animation: pop-in 0.3s ease both; }
.animate-stagger > *:nth-child(1) { animation-delay: 0.05s; }
.animate-stagger > *:nth-child(2) { animation-delay: 0.10s; }
.animate-stagger > *:nth-child(3) { animation-delay: 0.15s; }
.animate-stagger > *:nth-child(4) { animation-delay: 0.20s; }
.animate-stagger > *:nth-child(5) { animation-delay: 0.25s; }
.animate-stagger > *:nth-child(6) { animation-delay: 0.30s; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

.btn-ripple::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255,255,255,0.4); border-radius: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0; }
.btn-ripple:active::after { animation: ripple 0.4s ease-out; }
.pulse-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: pulse-dot 1.5s ease-in-out infinite; }

/* ============================================================
   §30. Dark Mode
   ============================================================ */
[data-bs-theme="dark"] { --vorecol-body-bg: #141414; --vorecol-gray-50: #1a1a1a; --vorecol-gray-100: #242424; --vorecol-gray-200: #2e2e2e; --vorecol-gray-300: #3a3a3a; --vorecol-gray-400: #6b6b6b; --vorecol-gray-500: #8a8a8a; --vorecol-gray-600: #a0a0a0; --vorecol-gray-700: #c0c0c0; --vorecol-gray-800: #d8d8d8; --vorecol-gray-900: #f0f0f0; }
[data-bs-theme="dark"] body { background-color: var(--vorecol-body-bg); }
[data-bs-theme="dark"] .card { background: var(--vorecol-gray-50); border-color: var(--vorecol-gray-200); }
[data-bs-theme="dark"] header.navbar.navbar-expand-lg { background: #1a1a1a; border-bottom-color: var(--vorecol-gray-200); }
[data-bs-theme="dark"] .topbar-search .form-control { background: var(--vorecol-gray-100); color: var(--vorecol-gray-700); border-color: transparent; }
[data-bs-theme="dark"] .modal-content { background: var(--vorecol-gray-50); border-color: var(--vorecol-gray-200); }
[data-bs-theme="dark"] .modal-header, [data-bs-theme="dark"] .modal-footer { border-color: var(--vorecol-gray-200); }
[data-bs-theme="dark"] .table thead th { color: var(--vorecol-gray-500); border-bottom-color: var(--vorecol-gray-200); }
[data-bs-theme="dark"] .table tbody tr:hover { background: var(--vorecol-gray-50); }
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background: var(--vorecol-gray-100); border-color: var(--vorecol-gray-300); color: var(--vorecol-gray-800); }
[data-bs-theme="dark"] .login-form-panel { background: #1a1a1a; }
[data-bs-theme="dark"] .command-palette { background: var(--vorecol-gray-50); }
[data-bs-theme="dark"] .command-palette-input { background: var(--vorecol-gray-50); color: var(--vorecol-gray-800); border-bottom-color: var(--vorecol-gray-200); }
[data-bs-theme="dark"] .command-palette-item:hover { background: var(--vorecol-gray-100); }
[data-bs-theme="dark"] .dropzone { border-color: var(--vorecol-gray-300); }
[data-bs-theme="dark"] .error-page { background: var(--vorecol-body-bg); }
[data-bs-theme="dark"] .error-page-title { color: var(--vorecol-gray-800); }
[data-bs-theme="dark"] .error-page-text { color: var(--vorecol-gray-500); }
[data-bs-theme="dark"] kbd { background: var(--vorecol-gray-100); border-color: var(--vorecol-gray-300); color: var(--vorecol-gray-600); }

/* ============================================================
   §31. Responsive
   ============================================================ */
@media (max-width: 991.98px) { .navbar-vertical { border-radius: 0; } .login-split { min-height: auto; } .login-form-panel { padding: 2rem 1rem; } .page-header { padding: 1rem 0; } .page-title { font-size: 1.125rem; } }
@media (max-width: 767.98px) { .topbar-search { display: none; } .brand-tagline { font-size: 1.5rem; } .error-page-code { font-size: 4rem; } .stepper-title { display: none; } }
@media (max-width: 575.98px) { .error-page-container { padding: 1rem; } .card-body { padding: 1rem; } }
@media print { .navbar, aside { display: none !important; } .page-wrapper { margin: 0 !important; } .card { box-shadow: none !important; border: 1px solid #ddd !important; } }

/* ============================================================
   §32. Bootstrap 4 → Bootstrap 5 Compatibility Shims
   ============================================================ */

/* input-group-prepend / input-group-append */
.input-group-prepend, .input-group-append { display: contents; }
.input-group-prepend[class*="select-"], .input-group-append[class*="select-"] { display: flex; flex: 1 1 auto; }
.input-group-prepend[class*="select-"] select, .input-group-append[class*="select-"] select { width: 100%; }

/* Spacing ml-/mr-/pl-/pr- */
.ml-0{margin-left:0!important}.ml-1{margin-left:.25rem!important}.ml-2{margin-left:.5rem!important}.ml-3{margin-left:1rem!important}.ml-4{margin-left:1.5rem!important}.ml-5{margin-left:3rem!important}
.mr-0{margin-right:0!important}.mr-1{margin-right:.25rem!important}.mr-2{margin-right:.5rem!important}.mr-3{margin-right:1rem!important}.mr-4{margin-right:1.5rem!important}.mr-5{margin-right:3rem!important}
.pl-0{padding-left:0!important}.pl-1{padding-left:.25rem!important}.pl-2{padding-left:.5rem!important}.pl-3{padding-left:1rem!important}.pl-4{padding-left:1.5rem!important}.pl-5{padding-left:3rem!important}
.pr-0{padding-right:0!important}.pr-1{padding-right:.25rem!important}.pr-2{padding-right:.5rem!important}.pr-3{padding-right:1rem!important}.pr-4{padding-right:1.5rem!important}.pr-5{padding-right:3rem!important}

/* float / text alignment */
.float-left{float:left!important}.float-right{float:right!important}
.text-left{text-align:left!important}.text-right{text-align:right!important}

/* no-gutters / media */
.no-gutters{--bs-gutter-x:0;--bs-gutter-y:0}
.media{display:flex;align-items:flex-start}.media-body{flex:1}

/* custom-select */
.custom-select { display: block; width: 100%; padding: 0.375rem 2.25rem 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.5; color: var(--bs-body-color); background-color: var(--bs-body-bg); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px 12px; border: 1px solid var(--vorecol-gray-300); border-radius: var(--vorecol-radius-sm); appearance: none; }
.custom-select:focus { border-color: var(--vorecol-primary); box-shadow: 0 0 0 3px rgba(26,103,183,.12); outline: none; }

/* .close (BS4) */
.close { background: transparent; border: 0; padding: 0.5rem; font-size: 1.25rem; font-weight: 700; line-height: 1; color: var(--vorecol-gray-500); opacity: 0.5; cursor: pointer; float: right; }
.close:hover { opacity: 0.75; color: var(--vorecol-gray-700); }

/* badge-pill */
.badge-pill { border-radius: 50rem !important; }

/* Tabler Icons: forzar font-family sobre Themify legacy (carga primero) */
.ti { font-family: "tabler-icons" !important; }

/* input-group-text: inline height:35px rompe stretch de BS5 */
.input-group > .input-group-text { height: auto !important; align-self: stretch !important; }

/* dropdown-item.btn: BS5 centra contenido, forzar alineación izquierda */
.dropdown-menu .dropdown-item.btn { justify-content: flex-start; text-align: left; }

/* img[height]: BS5 tiene img{height:auto} que sobreescribe el atributo HTML */
img[height] { height: revert; }

/* badge-* colores (BS4) */
.badge-primary  {background-color:var(--tblr-primary,  #1A67B7)!important;color:#fff!important}
.badge-secondary{background-color:var(--tblr-secondary,#6c757d)!important;color:#fff!important}
.badge-success  {background-color:var(--tblr-success,  #2fb344)!important;color:#fff!important}
.badge-danger   {background-color:var(--tblr-danger,   #d63939)!important;color:#fff!important}
.badge-warning  {background-color:var(--tblr-warning,  #f76707)!important;color:#fff!important}
.badge-info     {background-color:var(--tblr-info,     #4299e1)!important;color:#fff!important}
.badge-light    {background-color:#f8f9fa!important;color:#1e293b!important}
.badge-dark     {background-color:#1e293b!important;color:#fff!important}

/* embed-responsive */
.embed-responsive{position:relative;width:100%}
.embed-responsive::before{display:block;content:""}
.embed-responsive-16by9::before{padding-top:56.25%}
.embed-responsive-4by3::before{padding-top:75%}
.embed-responsive-1by1::before{padding-top:100%}
.embed-responsive .embed-responsive-item,.embed-responsive iframe,.embed-responsive embed,.embed-responsive object,.embed-responsive video{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

/* custom-control */
.custom-control{display:flex;align-items:center;gap:.5rem;min-height:1.5rem}
.custom-control-input{flex-shrink:0;width:1rem;height:1rem;accent-color:var(--tblr-primary,#1a67b7);cursor:pointer}
.custom-control-label{cursor:pointer;margin-bottom:0}
.custom-switch .custom-control-input{width:2rem;height:1rem}

/* form-group / sr-only */
.form-group{margin-bottom:1rem}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* ============================================================
   §sidebar-collapse-fix
   Prevent the module-selector nav (ul.navbar-nav direct child of
   .navbar-collapse) from flex-growing and pushing module items
   to the bottom when content fits the viewport.
   ============================================================ */
.navbar-vertical .navbar-collapse > .navbar-nav {
  flex-grow: 0 !important;
}

/* ============================================================
   §psicosmart-icon-sizing
   Tabler's  img { height: auto }  overrides HTML height="" attr.
   Restore expected sizes for psicosmart status/indicator images.
   ============================================================ */
/* filter-row status icons */
.td_filtro img {
  height: 25px !important;
  width: auto !important;
}
/* candidate-row status icons rendered by JS (id="avance{id}") */
img[id^="avance"] {
  height: 25px !important;
  width: auto !important;
}
/* warning / misc content icons that use height attr (invalid "px" suffix ignored by browsers) */
img[src*="warn.png"],
img[src*="arrow_rtl.png"] {
  height: 25px !important;
  width: auto !important;
}

/* ============================================================
   §psicosmart-dropdown-icons
   Dropdown action menus: fix oversized icons and left-align.
   height attr "28;" (with semicolon) is invalid HTML → ignored
   by browser → Tabler's height:auto shows at native SVG size.
   ============================================================ */
.dropdown-menu .dropdown-item {
  display: flex !important;
  align-items: center;
}
.dropdown-menu .dropdown-item img {
  height: 20px !important;
  width: auto !important;
  flex-shrink: 0;
  margin-right: 0.4rem;
}

/* ============================================================
   §scrollbar-mac
   Scrollbar siempre visible en Mac (Safari/Chrome ocultan por defecto).
   Aplica a: offcanvas, sidebar, tablas con overflow, page body.
   ============================================================ */
:root {
  --scrollbar-width: 6px;
  --scrollbar-thumb: rgba(0,0,0,0.22);
  --scrollbar-thumb-hover: rgba(0,0,0,0.42);
}
.offcanvas-body,
.navbar-vertical .navbar-collapse,
.table-responsive,
.page-wrapper {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}
.offcanvas-body::-webkit-scrollbar,
.navbar-vertical .navbar-collapse::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.page-wrapper::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}
.offcanvas-body::-webkit-scrollbar-track,
.navbar-vertical .navbar-collapse::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
.page-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.offcanvas-body::-webkit-scrollbar-thumb,
.navbar-vertical .navbar-collapse::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.page-wrapper::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
}
.offcanvas-body::-webkit-scrollbar-thumb:hover,
.navbar-vertical .navbar-collapse::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover,
.page-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}
[data-bs-theme="dark"] {
  --scrollbar-thumb: rgba(255,255,255,0.2);
  --scrollbar-thumb-hover: rgba(255,255,255,0.4);
}

/* ============================================================
   §41. Bootstrap Notify z-index fix (temporal — ver §41c para reemplazo)
   Los avisos legacy del sistema (aviso/mensaje/error1) usan bootstrap-notify
   que inyecta <div data-notify="container"> con z-index bajo por default.
   Tapados por offcanvas (1045) / modal (1055). Subir a >1060.
   ============================================================ */
body > [data-notify="container"],
body > .alert[data-notify="container"] {
  z-index: 1070 !important;
}

/* ============================================================
   §41c. Toasts Vorecol (notificaciones modernas — Sonner/Fluent style)
   Reemplaza bootstrap-notify legacy. Ver /app/js/notificaciones_len.js
   Estilo: bordes redondeados, sombra suave, border-left color semántico,
   slide-in desde la derecha en desktop, arriba full-width en mobile.
   ============================================================ */
#vorecol-toast-container {
  z-index: 1080;
  bottom: 0;
  right: 0;
  max-width: 100%;
  pointer-events: none; /* los eventos pasan — el toast individual los captura */
}
#vorecol-toast-container .toast { pointer-events: auto; }

.vorecol-toast {
  min-width: 320px;
  max-width: 400px;
  background: var(--tblr-bg-surface, #fff);
  color: var(--tblr-body-color, #232e3c);
  border: 1px solid var(--tblr-border-color, #e4e6e9);
  border-radius: 0.5rem;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.15), 0 4px 12px -4px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  animation: vorecolToastSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-bs-theme="dark"] .vorecol-toast {
  background: #1a2232;
  border-color: rgba(255,255,255,0.08);
}

/* Border-left color por tipo (señal semántica Fluent/Sonner) */
.vorecol-toast-success { border-left: 3px solid var(--tblr-success, #2fb344); }
.vorecol-toast-warning { border-left: 3px solid var(--tblr-warning, #f59f00); }
.vorecol-toast-danger  { border-left: 3px solid var(--tblr-danger,  #d63939); }
.vorecol-toast-info    { border-left: 3px solid var(--tblr-info,    #4299e1); }

.vorecol-toast-icon {
  font-size: 1.25rem;
  line-height: 1.25;
  margin-top: 0.0625rem;
}
.vorecol-toast-content { min-width: 0; }
.vorecol-toast-title {
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.3;
  margin-bottom: 0.125rem;
}
.vorecol-toast-msg {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--tblr-secondary, #667080);
  word-wrap: break-word;
}
.vorecol-toast-close {
  font-size: 0.7rem;
  opacity: 0.5;
  transition: opacity 0.15s ease;
  margin-top: 0.125rem;
}
.vorecol-toast-close:hover { opacity: 1; }

@keyframes vorecolToastSlideIn {
  from { transform: translateX(24px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

/* Mobile: toasts arriba full-width (sidebar drawer sale desde la izquierda,
   abajo-derecha puede quedar oculto por otras UI). */
@media (max-width: 575.98px) {
  #vorecol-toast-container {
    top: 0;
    bottom: auto;
    right: 0;
    left: 0;
    padding: 0.75rem !important;
  }
  .vorecol-toast {
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }
  @keyframes vorecolToastSlideIn {
    from { transform: translateY(-16px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
  }
}

/* ============================================================
   §41a. Tabla "persona+acciones" stack mobile (assign_privileges)
   En mobile (<576px) cada fila se apila verticalmente: usuario arriba,
   acciones debajo alineadas a la derecha. Evita scroll horizontal y
   hace los botones mas tocables. Patron Gmail/LinkedIn/Twitter mobile.
   ============================================================ */
@media (max-width: 575.98px) {
  #tab-cuentas,
  #tab-cuentas tbody,
  #tab-cuentas tr,
  #tab-cuentas td {
    display: block;
    width: 100%;
  }
  #tab-cuentas thead { display: none; }
  #tab-cuentas tr {
    border-bottom: 1px solid var(--tblr-border-color, #e4e6e9);
    padding: 0.75rem 0.5rem;
  }
  #tab-cuentas tr:last-child { border-bottom: 0; }
  #tab-cuentas td {
    border: 0;
    padding: 0.25rem 0;
  }
  /* Acciones alineadas al borde derecho, debajo del usuario */
  #tab-cuentas td.text-end .btn-list {
    justify-content: flex-end !important;
  }
}

/* ============================================================
   §41b. Meta links (email/tel clickeable en listas)
   Gris inherit por default, underline + color primary on hover.
   Patron Gmail / Slack / Intercom: señal clara de interactividad
   sin saturar la tabla con azul fuerte.
   ============================================================ */
.meta-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.meta-link:hover,
.meta-link:focus-visible {
  color: var(--tblr-primary, #1A67B7);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================================================
   §42. Responsive width utilities (faltan en Bootstrap base)
   Necesarios para layouts mobile-first donde w-100 en mobile y
   w-auto en sm+ (ej: card-header con bloques que apilan).
   ============================================================ */
@media (min-width: 576px) {
  .w-sm-auto { width: auto !important; }
  .w-sm-100  { width: 100% !important; }
}
@media (min-width: 768px) {
  .w-md-auto { width: auto !important; }
  .w-md-100  { width: 100% !important; }
}
@media (min-width: 992px) {
  .w-lg-auto { width: auto !important; }
  .w-lg-100  { width: 100% !important; }
}

/* ============================================================
   §21. Row flash highlight (return-from-detail) — shared.
   Al volver de editar un elemento, JS aplica .row-just-edited
   a la fila. Efecto amarillo con border-left que se desvanece.
   Estandar Notion/Linear/Google Sheets. Ver docs/nueva_imagen/19 §21.
   ============================================================ */
@keyframes rowJustEditedFlash {
    0%   { background-color: rgba(250, 204, 21, .35); box-shadow: inset 3px 0 0 var(--tblr-yellow); }
    60%  { background-color: rgba(250, 204, 21, .12); box-shadow: inset 3px 0 0 var(--tblr-yellow); }
    100% { background-color: transparent; box-shadow: inset 3px 0 0 transparent; }
}
.row-just-edited {
    animation: rowJustEditedFlash 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ============================================================
   §22. Offcanvas responsive — Fluent-style enterprise standard.
   Ver docs/nueva_imagen/19 §26.
   ============================================================
   Reglas (alineadas a Microsoft Fluent UI <Panel> y Linear side panel):
   1. Footer (sibling de .offcanvas-body) siempre sticky al fondo.
   2. Altura: 100dvh con fallback 100vh (evita problemas con barra dinamica
      de Safari iOS y Chrome Android).
   3. Padding reducido del body en <576px (Fluent narrow).
   4. Scrollbar delgado (ya definido en §scrollbar-mac para offcanvas-body).
   ============================================================ */

/* Altura dinamica para manejar barras de browser mobile */
.offcanvas.offcanvas-end,
.offcanvas.offcanvas-start,
.offcanvas.offcanvas-top,
.offcanvas.offcanvas-bottom {
    height: 100vh;           /* fallback */
    height: 100dvh;          /* navegadores modernos */
}

/* Footer sticky: cualquier div sibling DESPUES de .offcanvas-body
   (patron: border-top + p-3 + bg-body-tertiary). Bootstrap 5 ya usa
   flex-direction:column en .offcanvas, por lo que el sibling queda
   naturalmente al fondo — esta regla refuerza el comportamiento
   agregando sombra sutil y manteniendo estructura aunque el body
   tenga contenido corto. */
.offcanvas > .offcanvas-body {
    flex: 1 1 auto;
    min-height: 0;
}
.offcanvas > .offcanvas-body ~ .border-top {
    position: sticky;
    bottom: 0;
    z-index: 2;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
}

/* Padding reducido en mobile narrow (<576px) */
@media (max-width: 575.98px) {
    .offcanvas-body { padding: 0.75rem; }
    .offcanvas-header { padding: 0.75rem 1rem; }
    .offcanvas > .offcanvas-body ~ .border-top { padding: 0.75rem !important; }
}

/* ============================================================
   §23. Tabla de permisos responsive — cards apiladas en mobile.
   Ver docs/nueva_imagen/19 §26.
   ============================================================
   Patron Microsoft Entra / Google Admin: en <768px cada <tr> se renderiza
   como tarjeta apilada. Requiere que cada <td> tenga atributo data-label
   con el nombre de la columna (se agrega desde JS al generar el HTML).
   Sin data-label igual funciona, solo que no aparecen labels — es fallback
   seguro no rompe nada si se aplica antes del cambio en JS.

   Primer <td> (sin data-label) actua como "titulo" de la card:
   full-width + border-bottom + padding extra. Resto de <td>s apilados
   como "label: control" estilo Fluent Panel.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Reset completo de table-layout: browsers fuerzan display:table-row-group
       en tbody aunque tr tenga display:block — hay que resetear toda la cadena
       para que el flex en td funcione consistente en Safari iOS / Chrome mobile. */
    .perm-table-responsive > table,
    .perm-table-responsive > table > tbody,
    .perm-table-responsive > table > tbody > tr,
    .perm-table-responsive > table > tbody > tr > td {
        display: block !important;
        width: 100% !important;
    }
    .perm-table-responsive > table > thead { display: none !important; }

    /* Cada <tr> = card */
    .perm-table-responsive > table > tbody > tr {
        padding: 0.875rem !important;
        margin-bottom: 0.5rem !important;
        border: 1px solid var(--tblr-border-color, #e6e7e9) !important;
        border-radius: var(--vorecol-radius-sm, 0.5rem) !important;
        background: var(--tblr-bg-surface, #fff) !important;
    }

    /* Cada <td> = fila "label | control" */
    .perm-table-responsive > table > tbody > tr > td {
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem !important;
        padding: 0.4rem 0 !important;
        border: 0 !important;
        text-align: left !important; /* override .text-center Bootstrap */
    }

    /* Label como ::before — absorbe espacio, empuja el control al borde derecho */
    .perm-table-responsive > table > tbody > tr > td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6c757d;
        font-size: 0.8125rem;
        flex: 1 1 auto;
        text-align: left;
        line-height: 1.3;
    }
    .perm-table-responsive > table > tbody > tr > td:not([data-label])::before {
        content: none !important;
    }

    /* TODO hijo directo del td queda a la derecha, ancho natural, sin margenes.
       Regla amplia (aplica a <input>, <button>, <select>, <div> de controles). */
    .perm-table-responsive > table > tbody > tr > td > * {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    /* Primer <td> sin data-label = card title (full-width, sin ::before) */
    .perm-table-responsive > table > tbody > tr > td:first-child:not([data-label]) {
        padding: 0 0 0.625rem 0 !important;
        margin-bottom: 0.625rem !important;
        border-bottom: 1px solid var(--tblr-border-color, #e6e7e9) !important;
    }
    .perm-table-responsive > table > tbody > tr > td:first-child:not([data-label]) > * {
        flex: 1 1 auto !important;
        min-width: 0;
    }
}

/* ============================================================
   §24. Scroll-shadow en .table-responsive — hint visual de overflow.
   Ver docs/nueva_imagen/19 §27.
   ============================================================
   Problema: en iOS Safari y Chrome Android el scrollbar nativo se oculta,
   usuario no sabe que hay mas contenido a la derecha. Patron clasico Lea
   Verou con background-attachment: local + scroll para gradientes que
   aparecen/desaparecen segun posicion de scroll:

   - Al inicio: sombra derecha visible (hay mas →)
   - Mitad: ambas sombras visibles
   - Al final: sombra izquierda visible (hay mas ←)
   - Sin overflow: ninguna sombra

   Excluye .perm-table-responsive (esas se convierten a cards, no scrollean).
   ============================================================ */
.table-responsive:not(.perm-table-responsive) {
    background:
        /* Cobertor blanco local (scrollea con contenido) — tapa sombra izq al inicio */
        linear-gradient(to right, var(--tblr-bg-surface, #fff) 30%, transparent) 0 center / 40px 100% no-repeat local,
        /* Cobertor blanco local — tapa sombra der al final */
        linear-gradient(to left, var(--tblr-bg-surface, #fff) 30%, transparent) 100% center / 40px 100% no-repeat local,
        /* Sombra izquierda fija (visible cuando scrolleado a derecha) */
        radial-gradient(ellipse farthest-side at 0% 50%, rgba(0,0,0,0.18), transparent) 0 center / 16px 100% no-repeat scroll,
        /* Sombra derecha fija (visible al inicio, desaparece al final) */
        radial-gradient(ellipse farthest-side at 100% 50%, rgba(0,0,0,0.18), transparent) 100% center / 16px 100% no-repeat scroll;
    background-color: var(--tblr-bg-surface, #fff);
}

/* ============================================================
   §25. Select2 inside Bootstrap input-group — integration fix.
   Ver docs/nueva_imagen/19 §28.
   ============================================================
   Problema: Select2 reemplaza el <select> con un <div.select2-container>.
   Ese div no hereda el flex:1 que Bootstrap asigna a .form-select dentro
   de .input-group. Resultado: ancho incorrecto, bordes cortados, altura
   desalineada con el icono .input-group-text.

   Fix: tratar el select2-container como un flex item valido, alinear
   altura con .form-control, quitar border-radius izquierdo (la
   .input-group-text de la izquierda ya lo provee). */
.input-group > .select2-container {
    /* flex: 1 1 0% con min-width:0 permite que Select2 tome todo el espacio
       sobrante del input-group sin depender del option width:'100%' del JS
       init. Antes quedaba con ancho minimo cuando el init no lo especificaba
       (ver filtros de employees.php). */
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: 100% !important;
}
.input-group > .select2-container .select2-selection--single {
    height: calc(2.3125rem + 2px) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-color: var(--tblr-border-color, #dadcde);
    background: var(--tblr-bg-forms, #fff);
}
.input-group > .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: calc(2.3125rem + 2px) !important;
    padding-left: 0.75rem;
    padding-right: 1.75rem;
    color: var(--tblr-body-color, #1e293b);
}
.input-group > .select2-container .select2-selection--single .select2-selection__arrow {
    height: calc(2.3125rem + 2px) !important;
}
/* Dark mode: Select2 usa bg y border claros por default — fuerza dark */
[data-bs-theme="dark"] .input-group > .select2-container .select2-selection--single,
[data-bs-theme="dark"] .select2-dropdown {
    background: var(--tblr-bg-forms, #1e293b) !important;
    border-color: var(--tblr-border-color, #344358) !important;
    color: var(--tblr-body-color, #e5e7eb) !important;
}
[data-bs-theme="dark"] .select2-selection__rendered,
[data-bs-theme="dark"] .select2-results__option {
    color: var(--tblr-body-color, #e5e7eb) !important;
}

/* ============================================================
   §37. VorecolFileUpload — Drop zone reusable (Tabler style).
   Usado por carga_logo.js (upload_logo) y potencialmente otros
   uploads single/multi-file. Ver docs/nueva_imagen/19 §19, §30.
   ============================================================ */
.file-upload-zone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 2rem;
    min-height: 240px;
    border: 2px dashed var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    background-color: var(--tblr-bg-surface-secondary);
    cursor: pointer;
    user-select: none;
    text-align: center;
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.file-upload-zone:hover,
.file-upload-zone.dragover {
    border-color: var(--tblr-primary);
    background-color: var(--tblr-primary-lt);
}
.file-upload-zone.dragover { transform: scale(1.01); }
.file-upload-zone input[type="file"] {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0; cursor: pointer; z-index: 1;
}
.file-upload-icon {
    font-size: 3rem; line-height: 1;
    color: var(--tblr-primary);
    margin-bottom: .75rem;
}
.file-upload-title {
    font-size: 1.0625rem; font-weight: 600;
    color: var(--tblr-body-color);
    margin-bottom: .25rem;
}
.file-upload-text {
    font-size: .875rem;
    color: var(--tblr-secondary);
    margin-bottom: 1rem;
}
.file-upload-text .link {
    color: var(--tblr-primary);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
    /* NO z-index: dejar que el <input> absoluto (z-index:1) capture clicks.
       Si le damos z-index mayor al link, bloquea el click al input y abre
       nada (el span no es label). Estetica se preserva igual. */
}
.file-upload-formats {
    display: flex; flex-wrap: wrap; gap: .375rem;
    justify-content: center; margin-top: .25rem;
    /* Mismo motivo que .link: sin z-index para no interceptar clicks */
}
.file-upload-formats > span {
    display: inline-flex; align-items: center;
    padding: .125rem .5rem;
    font-size: .6875rem; font-weight: 600;
    letter-spacing: .03em;
    color: var(--tblr-secondary);
    background-color: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: 4px;
    text-transform: uppercase;
}
.file-preview-list {
    display: flex; flex-direction: column; gap: .5rem;
    margin-top: 1rem;
}
.file-preview-list:empty { margin-top: 0; }
.file-preview-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .75rem;
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
}
.file-preview-icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.125rem;
}
.file-preview-info { flex: 1; min-width: 0; }
.file-preview-name {
    font-weight: 500; font-size: .875rem;
    color: var(--tblr-body-color);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.file-preview-size {
    font-size: .75rem;
    color: var(--tblr-secondary);
    margin-top: 2px;
}
.file-preview-progress {
    height: 4px;
    background: var(--tblr-bg-surface-secondary);
    border-radius: 2px; overflow: hidden;
    margin-top: .5rem;
}
.file-preview-progress-bar {
    height: 100%;
    background: var(--tblr-primary);
    transition: width .2s ease;
}
.file-preview-actions {
    flex-shrink: 0;
    display: flex; gap: .25rem;
}

/* ============================================================
   §26. Popover Vorecol — estilo para badges clickables con breakdown.
   Ver docs/nueva_imagen/19 §30.
   ============================================================
   Usado por badges interactivos con Bootstrap 5 Popover (customClass:
   'popover-vorecol'). Pattern Linear/GitHub para "click-to-drill" en
   una celda de tabla — resumen visible, detalle en popover.
   ============================================================ */
.popover.popover-vorecol {
    --bs-popover-max-width: 320px;
    --bs-popover-border-radius: var(--vorecol-radius-sm);
    --bs-popover-box-shadow: var(--vorecol-shadow-lg);
    --bs-popover-header-font-size: 0.875rem;
    --bs-popover-header-padding-y: 0.625rem;
    --bs-popover-body-padding-y: 0.625rem;
    border: 1px solid var(--tblr-border-color, #e6e7e9);
}
.popover.popover-vorecol .popover-header {
    background: var(--tblr-bg-surface, #fff);
    font-weight: 600;
    border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
}
.popover.popover-vorecol .popover-body {
    color: var(--tblr-body-color);
}
.popover.popover-vorecol .popover-body .badge {
    font-size: 0.75rem;
}
/* En mobile: cuerpo del popover se adapta al ancho del viewport */
@media (max-width: 575.98px) {
    .popover.popover-vorecol {
        --bs-popover-max-width: min(320px, calc(100vw - 2rem));
    }
}
/* Dark mode: el popover default de Bootstrap queda claro sobre dark bg.
   Forzar tokens de Tabler dark. */
[data-bs-theme="dark"] .popover.popover-vorecol {
    --bs-popover-bg: var(--tblr-bg-surface, #1e293b);
    border-color: var(--tblr-border-color, #344358);
}
[data-bs-theme="dark"] .popover.popover-vorecol .popover-header {
    background: var(--tblr-bg-surface, #1e293b);
    color: var(--tblr-body-color, #e5e7eb);
    border-bottom-color: var(--tblr-border-color, #344358);
}
/* Badges clickables con popover: cursor pointer + hover sutil */
.badge[data-popover="1"] {
    transition: transform .1s ease, box-shadow .1s ease;
}
.badge[data-popover="1"]:hover,
.badge[data-popover="1"]:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,.08);
    outline: none;
}

/* ======================================================================
   §33 (doc decisiones) — Entity pill + toast de cambio de entidad.
   Patron: BambooHR / Rippling / Linear (pill) + Workday (auto-hide topbar).
   Ver docs/nueva_imagen/19_decisiones_ui_componentes.md §33.
   ====================================================================== */

/* Pill en page-header — estilo BambooHR/Rippling: aire, tipografia limpia, sin ruido. */
.vorecol-entity-pill {
    margin-left: 0.25rem;
}
.vorecol-entity-pill .btn-pill-entity {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 260px;
    background: rgba(var(--tblr-azure-rgb, 74 144 226), 0.08);
    border: 1px solid rgba(var(--tblr-azure-rgb, 74 144 226), 0.22);
    color: var(--tblr-azure, #4a90e2);
    font-size: 0.82rem;
    font-weight: 500;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    line-height: 1.1;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
    transition: background-color .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.vorecol-entity-pill .btn-pill-entity:hover,
.vorecol-entity-pill .btn-pill-entity:focus-visible {
    background: rgba(var(--tblr-azure-rgb, 74 144 226), 0.14);
    border-color: rgba(var(--tblr-azure-rgb, 74 144 226), 0.40);
    box-shadow: 0 2px 6px rgba(var(--tblr-azure-rgb, 74 144 226), 0.14);
    outline: none;
}
.vorecol-entity-pill .btn-pill-entity:active {
    transform: scale(0.97);
}
.vorecol-entity-pill .btn-pill-entity[aria-expanded="true"] {
    background: rgba(var(--tblr-azure-rgb, 74 144 226), 0.16);
    border-color: rgba(var(--tblr-azure-rgb, 74 144 226), 0.50);
}
.vorecol-entity-pill .btn-pill-entity::after { display: none; }
.vorecol-entity-pill .pill-icon {
    font-size: 1rem;
    flex-shrink: 0;
    opacity: 0.85;
}
.vorecol-entity-pill .pill-label {
    max-width: 180px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vorecol-entity-pill .pill-caret {
    font-size: 0.85rem;
    opacity: 0.6;
    transition: transform .15s ease;
    flex-shrink: 0;
}
.vorecol-entity-pill .btn-pill-entity[aria-expanded="true"] .pill-caret {
    transform: rotate(180deg);
}

.vorecol-entity-pill .dropdown-menu {
    min-width: 260px;
    max-width: 340px;
    padding: 0.35rem 0;
    border: 1px solid var(--tblr-border-color, #e0e6ed);
    box-shadow: 0 8px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.05);
}
.vorecol-entity-pill .dropdown-header {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--tblr-secondary, #626976);
    letter-spacing: 0.02em;
    padding: 0.4rem 0.9rem;
}
.vorecol-entity-pill .dropdown-item {
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
    transition: background-color .1s ease;
}
.vorecol-entity-pill .dropdown-item .ti-building-community {
    opacity: 0.55;
    font-size: 1rem;
}
.vorecol-entity-pill .dropdown-item.active,
.vorecol-entity-pill .dropdown-item.active:focus,
.vorecol-entity-pill .dropdown-item.active:hover {
    background-color: rgba(var(--tblr-azure-rgb, 74 144 226), 0.10);
    color: var(--tblr-azure, #4a90e2);
    font-weight: 600;
}
.vorecol-entity-pill .dropdown-item.active .ti-building-community {
    opacity: 1;
}

/* Dark mode tweaks */
[data-bs-theme="dark"] .vorecol-entity-pill .btn-pill-entity {
    background: rgba(var(--tblr-azure-rgb, 74 144 226), 0.18);
    border-color: rgba(var(--tblr-azure-rgb, 74 144 226), 0.35);
    color: #7cb7ff;
}

/* Variante compacta (breadcrumb-style en page-pretitle). Patron Linear/Stripe. */
#vorecol-entity-pill .pill-divider {
    color: var(--tblr-secondary, #94a3b8);
    opacity: 0.55;
    font-weight: 600;
    margin: 0 0.15rem;
    user-select: none;
}
.vorecol-entity-pill--sm {
    margin-left: 0 !important;
    vertical-align: baseline;
}
.vorecol-entity-pill--sm .btn-pill-entity {
    padding: 0.2rem 0.65rem;
    font-size: 0.75rem;
    gap: 0.35rem;
    max-width: 220px;
    line-height: 1.15;
    background: rgba(var(--tblr-azure-rgb, 74 144 226), 0.08);
    border-color: transparent;
    box-shadow: none;
}
.vorecol-entity-pill--sm .btn-pill-entity:hover,
.vorecol-entity-pill--sm .btn-pill-entity:focus-visible {
    background: rgba(var(--tblr-azure-rgb, 74 144 226), 0.16);
    border-color: rgba(var(--tblr-azure-rgb, 74 144 226), 0.30);
    box-shadow: none;
}
.vorecol-entity-pill--sm .pill-icon { font-size: 0.85rem; }
.vorecol-entity-pill--sm .pill-caret { font-size: 0.8rem; }
.vorecol-entity-pill--sm .pill-label { max-width: 150px; }

/* Toast de cambio de entidad (estilo Sonner / Fluent, esquina inferior derecha) */
.toast-vorecol-entity {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 2060;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 280px;
    max-width: 360px;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid var(--tblr-border-color, #e0e6ed);
    border-left: 4px solid var(--tblr-green, #2fb344);
    border-radius: 0.6rem;
    box-shadow: 0 10px 28px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
    font-size: 0.875rem;
    color: var(--tblr-body-color, #1e293b);
    transform: translateY(10px);
    opacity: 0;
    animation: toastEntityIn .28s cubic-bezier(.2,.9,.3,1.2) forwards;
}
.toast-vorecol-entity.hiding {
    animation: toastEntityOut .22s ease forwards;
}
.toast-vorecol-entity .toast-entity-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--tblr-green-rgb, 47 179 68), 0.14);
    color: var(--tblr-green, #2fb344);
    font-size: 1rem;
}
.toast-vorecol-entity .toast-entity-body { flex: 1; min-width: 0; }
.toast-vorecol-entity .toast-entity-title {
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--tblr-secondary, #626976);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 2px;
}
.toast-vorecol-entity .toast-entity-text {
    line-height: 1.35;
}
[data-bs-theme="dark"] .toast-vorecol-entity {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

@keyframes toastEntityIn {
    to { transform: translateY(0); opacity: 1; }
}
@keyframes toastEntityOut {
    to { transform: translateY(10px); opacity: 0; }
}

@media (max-width: 575.98px) {
    .toast-vorecol-entity {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        min-width: 0;
        max-width: none;
    }
    .vorecol-entity-pill .pill-label { max-width: 110px; }
}

/* ============================================================
   Botones "disabled con razon" — click muestra aviso en vez de actuar.
   Patron BambooHR / Linear: cuando una accion esta bloqueada,
   el boton se ve deshabilitado pero al hacer click dispara un
   toast/aviso explicando la razon. Imprescindible en mobile
   donde no hay hover para ver el tooltip.
   Override del .disabled de Bootstrap (que pone pointer-events:none
   y bloquea el click handler).
   ============================================================ */
.btn.disabled[data-disabled-reason],
.btn.disabled-with-reason {
    pointer-events: auto !important;
    cursor: not-allowed;
}

/* ============================================================
   Responsive stack table — tabla con thead se transforma en "cards"
   en mobile (<768px). Patron estandar BS5/Tabler/MDN responsive tables.
   Cada <td> debe tener data-label="Nombre columna" — se usa como
   prefijo visible en mobile. Desktop ignora el data-label.

   Quien lo usa:
   - BambooHR mobile (Employees -> cards apiladas)
   - Workday mobile (reports -> stacked)
   - GitHub Actions mobile (runs -> card por fila)
   - MDN responsive tables (referencia pedagogica)

   Uso: agregar clase .table-responsive-stack a la <table>, y data-label
   a cada <td>. La fila de empty state (class="xym") queda intacta
   (colspan la pone full-width sin label prefix).
   ============================================================ */
@media (max-width: 767.98px) {
    /* Forzar block layout en TODA la jerarquia table — sin esto, HTML sigue
       tratando <tbody>/<tr>/<td> como tabla y los anchos quedan colapsados. */
    .table-responsive-stack,
    .table-responsive-stack tbody,
    .table-responsive-stack tbody tr,
    .table-responsive-stack tbody td {
        display: block !important;
        width: 100% !important;
    }
    .table-responsive-stack thead { display: none !important; }

    .table-responsive-stack tbody tr {
        margin-bottom: 0.75rem;
        padding: 0.75rem;
        border: 1px solid var(--tblr-border-color, rgba(0,0,0,0.08));
        border-radius: 0.5rem;
        background: var(--tblr-card-bg, #fff);
    }

    /* Empty state: NO aplicar el block-stack (se ve como mensaje centrado). */
    .table-responsive-stack tbody tr.xym {
        display: block !important;
        padding: 0;
        border: none;
        margin-bottom: 0;
        background: transparent;
    }
    .table-responsive-stack tbody tr.xym td {
        display: block !important;
        padding: 0;
        border: none;
        text-align: center;
    }
    .table-responsive-stack tbody tr.xym td::before { content: none; }

    /* Cada celda = label arriba (pequeno, gris) + valor abajo.
       Patron BambooHR / GitHub / Notion mobile cuando los valores son largos
       (usuario + correo + telefono). Evita que label y valor peleen por ancho
       cuando se desborda — se apilan verticalmente con jerarquia clara. */
    .table-responsive-stack tbody td {
        display: block !important;
        padding: 0.25rem 0 !important;
        border: none !important;
        text-align: left !important;
        min-height: unset;
    }
    .table-responsive-stack tbody td::before {
        content: attr(data-label);
        display: block;
        font-weight: 600;
        color: var(--tblr-secondary, #6c757d);
        font-size: 0.75rem;
        margin-bottom: 0.125rem;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        line-height: 1.2;
    }
    /* Opciones en mobile: alineadas a la izquierda para respetar el flujo stack */
    .table-responsive-stack tbody td.text-end {
        text-align: left !important;
    }
    .table-responsive-stack tbody td.text-end .btn-list {
        justify-content: flex-start !important;
    }
    /* Si el data-label es vacio o es "#", no mostrar prefijo "Contenido: " */
    .table-responsive-stack tbody td:not([data-label])::before,
    .table-responsive-stack tbody td[data-label=""]::before {
        content: none;
    }
    /* Columna # en mobile: menos prominente */
    .table-responsive-stack tbody td[data-label="#"] {
        color: var(--tblr-secondary, #6c757d);
        font-size: 0.75rem;
        padding-bottom: 0.25rem !important;
    }
    /* Dark mode: cards con fondo sutil del tema */
    [data-bs-theme="dark"] .table-responsive-stack tbody tr {
        background: var(--tblr-bg-surface-secondary, #1a1f2e);
        border-color: var(--tblr-border-color, rgba(255,255,255,0.1));
    }
}

/* ============================================================ */
/* §LEGACY-DIALOG-SHIM — Overrides para markup BS3/HTML4 dentro */
/* del modal de vorecol-dialog.js. Aplica solo dentro de        */
/* .ui-dialog para no afectar otras partes del HRMS.            */
/* ============================================================ */

/* Bootstrap 3 .well → look Tabler card-body */
.ui-dialog .well {
    background: var(--tblr-bg-surface-secondary, #f7f8fa);
    border: 1px solid var(--tblr-border-color, #e6e7e9);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    box-shadow: none;
}
[data-bs-theme="dark"] .ui-dialog .well {
    background: var(--tblr-bg-surface-secondary, #1a1f2e);
    border-color: var(--tblr-border-color, rgba(255,255,255,0.1));
}

/* Bootstrap 3 .panel → look Tabler card */
.ui-dialog .panel,
.ui-dialog .panel-default {
    background: var(--tblr-bg-surface, #fff);
    border: 1px solid var(--tblr-border-color, #e6e7e9);
    border-radius: 4px;
    margin-bottom: 1rem;
    box-shadow: none;
}
.ui-dialog .panel-heading {
    background: var(--tblr-bg-surface-secondary, #f7f8fa);
    border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
    padding: 0.625rem 1rem;
    border-radius: 4px 4px 0 0;
    font-weight: 600;
    font-size: 0.875rem;
    color: inherit;
}
.ui-dialog .panel-body { padding: 0.875rem 1rem; }
.ui-dialog .panel-footer {
    background: var(--tblr-bg-surface-secondary, #f7f8fa);
    border-top: 1px solid var(--tblr-border-color, #e6e7e9);
    padding: 0.5rem 1rem;
    border-radius: 0 0 4px 4px;
    font-size: 0.875rem;
}
[data-bs-theme="dark"] .ui-dialog .panel,
[data-bs-theme="dark"] .ui-dialog .panel-default {
    background: var(--tblr-bg-surface, #1a1f2e);
    border-color: var(--tblr-border-color, rgba(255,255,255,0.1));
}
[data-bs-theme="dark"] .ui-dialog .panel-heading,
[data-bs-theme="dark"] .ui-dialog .panel-footer {
    background: var(--tblr-bg-surface-secondary, #131724);
}

/* HTML4 <font> — neutralizar size/color forzados, mapear size legacy */
.ui-dialog font[size] { font-size: inherit !important; }
.ui-dialog font[size="1"] { font-size: 0.7rem !important; }
.ui-dialog font[size="2"] { font-size: 0.875rem !important; }
.ui-dialog font[size="3"] { font-size: 1rem !important; }
.ui-dialog font[size="4"] { font-size: 1.125rem !important; }
.ui-dialog font[size="5"] { font-size: 1.25rem !important; font-weight: 600; }
.ui-dialog font[size="6"] { font-size: 1.5rem !important; font-weight: 600; }
.ui-dialog font[face] { font-family: inherit !important; }

/* HTML4 <center> */
.ui-dialog center {
    display: block;
    text-align: center;
    margin: 0.5rem 0;
}

/* Atributos align="..." (HTML4) */
.ui-dialog [align="center"] { text-align: center; }
.ui-dialog [align="right"]  { text-align: right; }
.ui-dialog [align="left"]   { text-align: left; }

/* Tablas legacy con border="N" cellspacing/cellpadding */
.ui-dialog table[border] {
    border-collapse: collapse;
    width: 100%;
    margin: 0.5rem 0;
    font-size: 0.875rem;
}
.ui-dialog table[border="0"] td,
.ui-dialog table[border="0"] th { border: 0; }
.ui-dialog table[border="1"] {
    border: 1px solid var(--tblr-border-color, #e6e7e9) !important;
}
.ui-dialog table[border="1"] td,
.ui-dialog table[border="1"] th {
    border: 1px solid var(--tblr-border-color, #e6e7e9);
    padding: 0.4rem 0.6rem;
}
.ui-dialog table[border="1"] th {
    background: var(--tblr-bg-surface-secondary, #f7f8fa);
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
[data-bs-theme="dark"] .ui-dialog table[border="1"] th {
    background: var(--tblr-bg-surface-secondary, #131724);
}

/* hr legacy */
.ui-dialog hr {
    border: 0;
    border-top: 1px solid var(--tblr-border-color, #e6e7e9);
    margin: 0.875rem 0;
    height: 0;
}

/* <b>/<strong> dentro del body */
.ui-dialog .modal-body b,
.ui-dialog .modal-body strong { font-weight: 600; }

/* Inputs/forms sin clases BS5 — sanitización mínima */
.ui-dialog input[type="text"]:not(.form-control):not(.form-select),
.ui-dialog input[type="email"]:not(.form-control):not(.form-select),
.ui-dialog input[type="password"]:not(.form-control):not(.form-select),
.ui-dialog input[type="number"]:not(.form-control):not(.form-select),
.ui-dialog input[type="tel"]:not(.form-control):not(.form-select),
.ui-dialog input[type="url"]:not(.form-control):not(.form-select),
.ui-dialog input[type="date"]:not(.form-control):not(.form-select),
.ui-dialog input[type="datetime-local"]:not(.form-control):not(.form-select),
.ui-dialog textarea:not(.form-control),
.ui-dialog select:not(.form-control):not(.form-select) {
    display: inline-block;
    width: auto;
    min-width: 200px;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--tblr-border-color, #e6e7e9);
    border-radius: 4px;
    background: var(--tblr-bg-surface, #fff);
    color: inherit;
    font-size: 0.875rem;
    line-height: 1.4;
    box-sizing: border-box;
}
.ui-dialog input[type="text"]:not(.form-control):focus,
.ui-dialog input[type="email"]:not(.form-control):focus,
.ui-dialog input[type="password"]:not(.form-control):focus,
.ui-dialog input[type="number"]:not(.form-control):focus,
.ui-dialog input[type="tel"]:not(.form-control):focus,
.ui-dialog textarea:not(.form-control):focus,
.ui-dialog select:not(.form-control):focus {
    border-color: var(--tblr-primary, #206bc4);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(32, 107, 196, 0.1);
}
[data-bs-theme="dark"] .ui-dialog input:not(.form-control),
[data-bs-theme="dark"] .ui-dialog textarea:not(.form-control),
[data-bs-theme="dark"] .ui-dialog select:not(.form-control) {
    background: var(--tblr-bg-surface, #1a1f2e);
    border-color: var(--tblr-border-color, rgba(255,255,255,0.15));
}

/* <p>/párrafos y listas dentro del modal-body — espaciado consistente */
.ui-dialog .modal-body > p:first-child { margin-top: 0; }
.ui-dialog .modal-body > p:last-child { margin-bottom: 0; }
.ui-dialog .modal-body ul,
.ui-dialog .modal-body ol {
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}
.ui-dialog .modal-body li { margin-bottom: 0.25rem; }