/* ==========================================================================
   TOKENS DE DISEÑO — FUENTE ÚNICA DE VERDAD (editar la identidad SOLO aquí)
   --------------------------------------------------------------------------
   Regla de oro: en el resto del CSS usa SIEMPRE var(--rrhh-*); nunca un color
   hex suelto. Para cambiar la identidad visual del sistema, cambia un valor
   de este bloque y se propaga a todo. Guía completa en STYLEGUIDE.md.

   Índice:
     1) Marca       — colores institucionales y sus variantes
     2) Neutros     — escala de grises (de claro a oscuro)
     3) Semánticos  — texto, fondo, superficie, bordes, enlaces, foco
     4) Figura      — radios, sombras, easing, espaciado
   ========================================================================== */
:root {
  /* 1) MARCA -------------------------------------------------------------- */
  --rrhh-primary: #941810;            /* vinotinto institucional (acción principal) */
  --rrhh-primary-hover: #a8453f;      /* primario aclarado para hover */
  --rrhh-info: #8dbbc7;               /* azul institucional (info/acento) */
  --rrhh-info-strong: #2c7a8f;        /* azul oscuro (hover/acento) */
  --rrhh-info-strong-2: #1a6b7f;      /* azul más oscuro (estado activo) */
  --rrhh-info-soft: #6d9ba8;          /* azul apagado */

  /* 2) NEUTROS (claro → oscuro) ------------------------------------------ */
  --rrhh-white: #ffffff;
  --rrhh-gray-50: #fafafa;
  --rrhh-gray-100: #f5f5f5;
  --rrhh-gray-200: #e8e8e8;
  --rrhh-gray-300: #e0e0e0;
  --rrhh-gray-light: #c7c6c6;         /* bordes/separadores (alias histórico) */
  --rrhh-gray-500: #777777;           /* gris base */
  --rrhh-gray-600: #666666;
  --rrhh-gray-700: #555555;
  --rrhh-gray-800: #4a4a4a;
  --rrhh-ink: #363636;                /* títulos */
  --rrhh-ink-strong: #111111;
  --rrhh-gray: var(--rrhh-gray-500);  /* alias histórico (no quitar) */

  /* 3) SEMÁNTICOS -------------------------------------------------------- */
  --rrhh-text: var(--rrhh-gray);
  --rrhh-text-secondary: var(--rrhh-gray);
  --rrhh-bg: var(--rrhh-white);
  --rrhh-surface: var(--rrhh-white);
  --rrhh-soft: var(--rrhh-gray-light);
  --rrhh-border: var(--rrhh-gray-light);
  --rrhh-line-1: var(--rrhh-gray-light);
  --rrhh-line-2: var(--rrhh-gray-light);
  --rrhh-link: var(--rrhh-primary);
  --rrhh-link-hover: var(--rrhh-gray);
  --rrhh-focus: var(--rrhh-info);

  /* 4) FIGURA (radios, sombras, movimiento, espaciado) ------------------- */
  --rrhh-radius: 10px;
  --rrhh-radius-sm: 6px;
  --rrhh-radius-lg: 16px;
  --rrhh-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --rrhh-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --rrhh-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --rrhh-space: 1rem;
  --rrhh-space-sm: 0.5rem;
  --rrhh-space-lg: 1.5rem;
}

html,
body {
  background-color: var(--rrhh-bg);
  background-image: none;
  color: var(--rrhh-text);
}

body {
  font-size: clamp(15px, 0.25vw + 14px, 16px);
  line-height: 1.55;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Minimal motion (Bulma-friendly) */
a,
.button,
input,
select,
textarea {
  transition: color 160ms var(--rrhh-ease), background-color 160ms var(--rrhh-ease), border-color 160ms var(--rrhh-ease), filter 160ms var(--rrhh-ease), transform 180ms var(--rrhh-ease);
}

/* Layout tweaks (Bulma-friendly) */
.section {
  padding-top: 1.75rem;
}

.container {
  max-width: 1120px;
}

/* Navbar - Institucional (default) */
.rrhh-navbar {
  min-height: auto;
  background: var(--rrhh-surface);
  border: 0 !important;
  border-top: 3px solid var(--rrhh-primary) !important;
  border-bottom: 3px solid var(--rrhh-primary) !important;
  border-radius: 0;
  margin-bottom: 1rem;
  overflow: visible !important;
  white-space: nowrap;
  position: relative !important;
  box-sizing: border-box !important;
}

.rrhh-navbar--fixed {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Dashboard-like (dashboard + employees): navbar institucional (blanco + líneas rojas) */
.rrhh-body--dashboardish .rrhh-navbar {
  min-height: auto;
  background: var(--rrhh-surface);
  border: 0 !important;
  border-top: 3px solid var(--rrhh-primary) !important;
  border-bottom: 3px solid var(--rrhh-primary) !important;
  padding: 0.1rem 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.rrhh-body--dashboardish .rrhh-navbar .navbar-brand {
  flex-shrink: 1 !important;
  min-width: auto !important;
  padding: 0.05rem 0.05rem !important;
  margin-right: 0 !important;
  order: 1 !important;
}

.rrhh-body--dashboardish .rrhh-navbar .navbar-burger {
  order: 2 !important;
  margin-left: auto !important;
}

.rrhh-body--dashboardish .rrhh-navbar .navbar-menu {
  flex: 1 1 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
  background: var(--rrhh-surface) !important;
  padding: 0 !important;
  order: 3 !important;
  width: 100% !important;
}

.rrhh-body--dashboardish .rrhh-navbar .navbar-start {
  flex: 0 1 auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  overflow: visible !important;
  position: relative !important;
  order: 4 !important;
}

.rrhh-body--dashboardish .rrhh-navbar .navbar-end {
  flex: 0 1 auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  margin-left: auto !important;
  overflow: visible !important;
  order: 5 !important;
}

@media (max-width: 479px) {
  .rrhh-body--dashboardish .rrhh-navbar .navbar-start {
    flex: 1 1 100% !important;
    order: 4 !important;
    width: 100% !important;
  }
  
  .rrhh-body--dashboardish .rrhh-navbar .navbar-end {
    flex: 1 1 100% !important;
    order: 5 !important;
    width: 100% !important;
    margin-left: 0 !important;
  }
}

.rrhh-body--dashboardish .rrhh-navbar .navbar-item,
.rrhh-body--dashboardish .rrhh-navbar .navbar-link {
  height: auto !important;
  padding: 0.15rem 0.2rem !important;
  white-space: nowrap !important;
  font-size: 0.85rem !important;
  flex-shrink: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}

.rrhh-body--dashboardish .rrhh-navbar .navbar-item span:not(.icon),
.rrhh-body--dashboardish .rrhh-navbar .navbar-link span:not(.icon) {
  display: inline-block !important;
}

.rrhh-body--dashboardish .rrhh-navbar .navbar-item .icon,
.rrhh-body--dashboardish .rrhh-navbar .navbar-link .icon {
  margin-right: 0.1rem !important;
}

/* Hide dropdown arrow from Bulma */
.navbar-item.has-dropdown > .navbar-link::after {
  display: none !important;
}

.rrhh-body--dashboardish .rrhh-navbar .navbar-burger {
  height: 2rem !important;
  padding: 0.3rem !important;
  flex-shrink: 0 !important;
}

.rrhh-body--dashboardish .rrhh-navbar .navbar-item img.rrhh-brand__logo {
  width: min(286px, 52vw) !important;
  height: auto !important;
  max-height: 65px !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

/* Media Queries - Responsive Completo */

/* Tablet grande (992px+) */
@media (min-width: 992px) {
  .rrhh-body--dashboardish .rrhh-navbar .navbar-item,
  .rrhh-body--dashboardish .rrhh-navbar .navbar-link {
    font-size: 0.9rem !important;
    padding: 0.2rem 0.3rem !important;
  }
  
  .rrhh-body--dashboardish .rrhh-navbar .navbar-item img.rrhh-brand__logo {
    max-height: 60px !important;
  }
}

/* Tablet normal (768px - 991px) */
@media (max-width: 991px) {
  .rrhh-body--dashboardish .rrhh-navbar {
    padding: 0.05rem 0 !important;
  }
  
  .rrhh-body--dashboardish .rrhh-navbar .navbar-item,
  .rrhh-body--dashboardish .rrhh-navbar .navbar-link {
    font-size: 0.78rem !important;
    padding: 0.18rem 0.25rem !important;
  }
  
  .rrhh-body--dashboardish .rrhh-navbar .navbar-item img.rrhh-brand__logo {
    width: min(200px, 35vw) !important;
    max-height: 40px !important;
  }
  
  .rrhh-body--dashboardish .rrhh-navbar .navbar-end {
    gap: 0 !important;
  }
}

/* Tablet pequeña (600px - 767px) */
@media (max-width: 767px) {
  .rrhh-body--dashboardish .rrhh-navbar {
    padding: 0.05rem 0 !important;
  }
  
  .rrhh-body--dashboardish .rrhh-navbar .navbar-item,
  .rrhh-body--dashboardish .rrhh-navbar .navbar-link {
    font-size: 0.7rem !important;
    padding: 0.15rem 0.2rem !important;
  }
  
  .rrhh-body--dashboardish .rrhh-navbar .navbar-item .icon,
  .rrhh-body--dashboardish .rrhh-navbar .navbar-link .icon {
    margin-right: 0.08rem !important;
  }
  
  .rrhh-body--dashboardish .rrhh-navbar .navbar-item img.rrhh-brand__logo {
    width: min(180px, 32vw) !important;
    max-height: 35px !important;
  }
  
  .rrhh-body--dashboardish .rrhh-navbar .navbar-start > .navbar-item:not(.has-dropdown) span:not(.icon) {
    display: none !important;
  }
  
  .rrhh-body--dashboardish .rrhh-navbar .navbar-item.has-dropdown .navbar-link span:not(.icon) {
    display: inline !important;
  }
}

/* Mobile (480px - 599px) */
@media (max-width: 599px) {
  .rrhh-body--dashboardish .rrhh-navbar {
    padding: 0.04rem 0 !important;
  }
  
  .rrhh-body--dashboardish .rrhh-navbar .navbar-item,
  .rrhh-body--dashboardish .rrhh-navbar .navbar-link {
    font-size: 0.65rem !important;
    padding: 0.12rem 0.15rem !important;
  }
  
  .rrhh-body--dashboardish .rrhh-navbar .navbar-item img.rrhh-brand__logo {
    width: min(160px, 28vw) !important;
    max-height: 32px !important;
  }
  
  .rrhh-body--dashboardish .rrhh-navbar .navbar-start > .navbar-item:not(.has-dropdown) span:not(.icon) {
    display: none !important;
  }
  
  .rrhh-body--dashboardish .rrhh-navbar .navbar-item.has-dropdown .navbar-link span:not(.icon) {
    display: inline !important;
  }
  
  .rrhh-body--dashboardish .rrhh-navbar .button.is-primary {
    padding: 0.12rem 0.2rem !important;
    font-size: 0.6rem !important;
  }
  
  .rrhh-body--dashboardish .rrhh-navbar .button.is-primary span:not(.icon) {
    display: none !important;
  }
}

/* Mobile pequeño (< 480px) */
@media (max-width: 479px) {
  .rrhh-body--dashboardish .rrhh-navbar {
    padding: 0.03rem 0 !important;
    flex-wrap: wrap !important;
  }
  
  .rrhh-body--dashboardish .rrhh-navbar .navbar-brand {
    padding: 0.08rem 0.05rem !important;
    flex: 0 0 auto !important;
  }
  
  .rrhh-body--dashboardish .rrhh-navbar .navbar-menu {
    flex: 1 1 100% !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease !important;
  }

  .rrhh-body--dashboardish .rrhh-navbar.is-active .navbar-menu,
  .rrhh-body--dashboardish .rrhh-navbar .navbar-menu.is-active {
    max-height: 500px !important;
    overflow: visible !important;
  }
  
  .rrhh-body--dashboardish .rrhh-navbar .navbar-item,
  .rrhh-body--dashboardish .rrhh-navbar .navbar-link {
    font-size: 0.6rem !important;
    padding: 0.1rem 0.12rem !important;
  }
  
  .rrhh-body--dashboardish .rrhh-navbar .navbar-item img.rrhh-brand__logo {
    width: min(140px, 25vw) !important;
    max-height: 28px !important;
  }
  
  .rrhh-body--dashboardish .rrhh-navbar .navbar-start > .navbar-item:not(.has-dropdown) span:not(.icon) {
    display: none !important;
  }
  
  .rrhh-body--dashboardish .rrhh-navbar .navbar-item.has-dropdown .navbar-link span:not(.icon) {
    display: inline !important;
  }
  
  .rrhh-body--dashboardish .rrhh-navbar .navbar-burger {
    height: 1.75rem !important;
    padding: 0.2rem !important;
  }
  
  .rrhh-body--dashboardish .rrhh-navbar .button.is-primary,
  .rrhh-body--dashboardish .rrhh-navbar .button.is-static,
  .rrhh-body--dashboardish .rrhh-navbar .select,
  .rrhh-body--dashboardish .rrhh-navbar .tag {
    display: none !important;
  }
}

.rrhh-navbar .navbar-item,
.rrhh-navbar .navbar-link,
.rrhh-navbar .navbar-burger {
  color: var(--rrhh-text);
}

.rrhh-navbar .navbar-item:hover,
.rrhh-navbar .navbar-link:hover {
  background: transparent;
  color: var(--rrhh-primary);
}

/* Navbar CTAs must use institutional palette (avoid Bulma default blue) */
.rrhh-navbar .button.is-primary {
  background: var(--rrhh-primary) !important;
  border-color: var(--rrhh-primary) !important;
  color: var(--rrhh-bg) !important;
  box-shadow: none !important;
  font-weight: 700;
}

.rrhh-navbar .button.is-primary:hover {
  filter: brightness(0.95);
}

/* Navbar CTAs must use institutional palette (avoid Bulma default blue) */
.rrhh-body--dashboardish .rrhh-navbar .button.is-primary {
  background: var(--rrhh-primary) !important;
  border-color: var(--rrhh-primary) !important;
  color: var(--rrhh-bg) !important;
  box-shadow: none !important;
  font-weight: 700;
}

.rrhh-body--dashboardish .rrhh-navbar .button.is-primary:hover {
  filter: brightness(0.95);
}

/* Navbar-end items responsivos */
.rrhh-body--dashboardish .rrhh-navbar .navbar-end .navbar-item {
  padding: 0.2rem 0.25rem !important;
}

.rrhh-body--dashboardish .rrhh-navbar .field.has-addons {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
}

.rrhh-body--dashboardish .rrhh-navbar .field.has-addons .control {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

.rrhh-body--dashboardish .rrhh-navbar .button.is-static {
  padding: 0.25rem 0.3rem !important;
  font-size: 0.8rem !important;
  height: auto !important;
}

.rrhh-body--dashboardish .rrhh-navbar .select select {
  padding: 0.25rem 0.3rem !important;
  font-size: 0.8rem !important;
  height: auto !important;
}

.rrhh-body--dashboardish .rrhh-navbar .tag.rrhh-tag {
  padding: 0.25rem 0.4rem !important;
  font-size: 0.75rem !important;
  height: auto !important;
  white-space: nowrap !important;
}

.rrhh-body--dashboardish .rrhh-navbar .button.is-primary {
  padding: 0.3rem 0.6rem !important;
  font-size: 0.8rem !important;
  height: auto !important;
  white-space: nowrap !important;
}

/* Responsive: Navbar-end items en tablets */
@media (max-width: 991px) {
  .rrhh-body--dashboardish .rrhh-navbar .button.is-static {
    padding: 0.2rem 0.25rem !important;
    font-size: 0.7rem !important;
  }
  
  .rrhh-body--dashboardish .rrhh-navbar .select select {
    padding: 0.2rem 0.25rem !important;
    font-size: 0.7rem !important;
  }
  
  .rrhh-body--dashboardish .rrhh-navbar .tag.rrhh-tag {
    padding: 0.2rem 0.3rem !important;
    font-size: 0.65rem !important;
  }
  
  .rrhh-body--dashboardish .rrhh-navbar .button.is-primary {
    padding: 0.2rem 0.4rem !important;
    font-size: 0.7rem !important;
  }
}

/* Responsive: Navbar-end items en móvil */
@media (max-width: 767px) {
  .rrhh-body--dashboardish .rrhh-navbar .navbar-end .navbar-item {
    padding: 0.15rem 0.2rem !important;
  }
  
  .rrhh-body--dashboardish .rrhh-navbar .button.is-static {
    padding: 0.15rem 0.2rem !important;
    font-size: 0.6rem !important;
  }
  
  .rrhh-body--dashboardish .rrhh-navbar .select select {
    padding: 0.15rem 0.2rem !important;
    font-size: 0.6rem !important;
    height: 1.5rem !important;
  }
  
  .rrhh-body--dashboardish .rrhh-navbar .tag.rrhh-tag {
    padding: 0.15rem 0.2rem !important;
    font-size: 0.55rem !important;
  }
  
  .rrhh-body--dashboardish .rrhh-navbar .button.is-primary {
    padding: 0.15rem 0.3rem !important;
    font-size: 0.6rem !important;
  }
  
  .rrhh-body--dashboardish .rrhh-navbar .button.is-primary .icon {
    margin-right: 0.1rem !important;
  }
  
  .rrhh-body--dashboardish .rrhh-navbar .button.is-primary span {
    display: none !important;
  }
}

/* Responsive: Navbar-end items en móvil pequeño */
@media (max-width: 599px) {
  .rrhh-body--dashboardish .rrhh-navbar .tag.rrhh-tag {
    display: none !important;
  }
}

/* Responsive: Navbar-end items en móvil muy pequeño */
@media (max-width: 479px) {
  .rrhh-body--dashboardish .rrhh-navbar .button.is-static,
  .rrhh-body--dashboardish .rrhh-navbar .select,
  .rrhh-body--dashboardish .rrhh-navbar .tag.rrhh-tag {
    display: none !important;
  }
  
  .rrhh-body--dashboardish .rrhh-navbar .button.is-primary {
    padding: 0.15rem 0.25rem !important;
    font-size: 0.55rem !important;
    height: 1.5rem !important;
  }
  
  .rrhh-body--dashboardish .rrhh-navbar .button.is-primary .icon {
    margin-right: 0 !important;
  }
  
  .rrhh-body--dashboardish .rrhh-navbar .button.is-primary span {
    display: none !important;
  }
}

/* En barra blanca, texto oscuro para legibilidad */
.rrhh-body--dashboardish .rrhh-navbar .navbar-item,
.rrhh-body--dashboardish .rrhh-navbar .navbar-link,
.rrhh-body--dashboardish .rrhh-navbar .navbar-burger {
  color: var(--rrhh-text);
}

.rrhh-body--dashboardish .rrhh-navbar .navbar-item:hover,
.rrhh-body--dashboardish .rrhh-navbar .navbar-link:hover {
  color: var(--rrhh-primary);
}

/* Quitar estilos activos de Bulma (azules) */
.rrhh-navbar .navbar-item.is-active,
.rrhh-navbar .navbar-link.is-active {
  background: transparent;
}

.rrhh-navbar .navbar-item.is-active,
.rrhh-navbar .navbar-link.is-active {
  color: inherit;
}

.rrhh-body--dashboardish .rrhh-navbar .navbar-item.is-active,
.rrhh-body--dashboardish .rrhh-navbar .navbar-link.is-active {
  color: var(--rrhh-primary);
  text-decoration: underline;
  text-decoration-color: var(--rrhh-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Formularios (Bulma) — forzar paleta institucional */
.input,
.textarea,
.select select {
  background: var(--rrhh-surface);
  color: var(--rrhh-text);
  border-color: var(--rrhh-border);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--rrhh-gray);
  opacity: 1;
}

.input:focus,
.textarea:focus,
.select select:focus {
  border-color: var(--rrhh-primary);
  box-shadow: none;
}

/* Menús laterales (scoped) — evita fondos oscuros/azules */
.rrhh-emp-menu .menu-list a,
.rrhh-cc-menu .menu-list a {
  background: transparent;
  border-radius: calc(var(--rrhh-radius) - 4px);
}

.rrhh-emp-menu .menu-list a:hover,
.rrhh-cc-menu .menu-list a:hover {
  background: transparent;
  color: var(--rrhh-primary);
}

.rrhh-emp-menu .menu-list a.is-active,
.rrhh-cc-menu .menu-list a.is-active {
  background: var(--rrhh-surface);
  color: var(--rrhh-primary);
  border-left: 4px solid var(--rrhh-primary);
}

/* ========================
   OVERRIDE BULMA DEFAULTS
   ======================== */

/* Buttons sin clase específica: gris institucional + blanco para legibilidad */
.button {
  background: var(--rrhh-gray) !important;
  border-color: var(--rrhh-gray) !important;
  color: var(--rrhh-bg) !important;
}

.button:hover {
  background: var(--rrhh-gray) !important;
  border-color: var(--rrhh-gray) !important;
  color: var(--rrhh-bg) !important;
}

.button:focus {
  background: var(--rrhh-gray) !important;
  border-color: var(--rrhh-primary) !important;
  color: var(--rrhh-bg) !important;
}

/* Botón primario: rojo institucional */
.button.is-primary {
  background: var(--rrhh-primary) !important;
  border-color: var(--rrhh-primary) !important;
  color: var(--rrhh-bg) !important;
}

.button.is-primary:hover {
  background: var(--rrhh-primary) !important;
  border-color: var(--rrhh-primary) !important;
  color: var(--rrhh-bg) !important;
}

.button.is-primary:focus {
  border-color: var(--rrhh-primary) !important;
  color: var(--rrhh-bg) !important;
}

button[type='submit'] {
  background: var(--rrhh-primary) !important;
  border-color: var(--rrhh-primary) !important;
  color: var(--rrhh-bg) !important;
}

button[type='submit']:hover {
  background: var(--rrhh-primary) !important;
  border-color: var(--rrhh-primary) !important;
  color: var(--rrhh-bg) !important;
}

/* Select/dropdown: forzar colores de paleta */
.select select {
  background: var(--rrhh-surface) !important;
  color: var(--rrhh-text) !important;
  border-color: var(--rrhh-border) !important;
}

.select select:hover {
  border-color: var(--rrhh-border) !important;
  color: var(--rrhh-text) !important;
  background: var(--rrhh-surface) !important;
}

.select select:focus,
.select select:active {
  border-color: var(--rrhh-primary) !important;
  color: var(--rrhh-text) !important;
  background: var(--rrhh-surface) !important;
  box-shadow: none !important;
}

/* Table header: gris institucional + blanco (paleta estricta) */
table {
  width: 100%;
  border-collapse: collapse;
}

table thead {
  background: var(--rrhh-gray) !important;
  color: var(--rrhh-bg) !important;
}

table thead th {
  background: var(--rrhh-gray) !important;
  color: var(--rrhh-bg) !important;
  border-color: var(--rrhh-border) !important;
  padding: 0.75rem;
  font-weight: 600;
}

table tbody tr {
  background: var(--rrhh-surface) !important;
  border-color: var(--rrhh-border) !important;
}

table tbody tr:hover {
  background: var(--rrhh-gray-light) !important;
  cursor: pointer;
}

table tbody td {
  color: #333333 !important;
  border-color: var(--rrhh-border) !important;
  padding: 0.75rem;
  border: 1px solid var(--rrhh-border) !important;
  font-weight: 500;
}

/* Override Bulma .is-striped (enforce paleta institucional) */
.table.is-striped tbody tr:nth-child(odd) {
  background-color: var(--rrhh-surface) !important;
}

.table.is-striped tbody tr:nth-child(even) {
  background-color: var(--rrhh-surface) !important;
}

.table.is-striped tbody tr:nth-child(odd):hover {
  background-color: var(--rrhh-gray-light) !important;
}

.table.is-striped tbody tr:nth-child(even):hover {
  background-color: var(--rrhh-gray-light) !important;
}

/* Override Bulma .is-hoverable */
.table.is-hoverable tbody tr:hover {
  background-color: var(--rrhh-gray-light) !important;
}

/* Override .is-narrow tables */
.table.is-narrow tbody tr {
  background-color: var(--rrhh-surface) !important;
}

.table.is-narrow tbody tr:hover {
  background-color: var(--rrhh-gray-light) !important;
}

.table.is-narrow tbody td {
  color: #333333 !important;
  border-color: var(--rrhh-border) !important;
  font-weight: 500;
}

/* Global table tbody override (catch any other table variations) */
table tbody {
  background-color: var(--rrhh-surface) !important;
}

table tbody tr {
  background-color: var(--rrhh-surface) !important;
  color: #333333 !important;
}

table tbody tr:hover {
  background-color: var(--rrhh-gray-light) !important;
}

/* Tabs */
.tabs a {
  border-color: var(--rrhh-border);
  color: var(--rrhh-text);
}

.tabs a:hover {
  border-color: var(--rrhh-border);
  color: var(--rrhh-primary);
}

.tabs li.is-active a {
  border-color: var(--rrhh-primary);
  color: var(--rrhh-primary);
  background: var(--rrhh-surface);
}

/* Notification + Message */
.notification,
.message {
  background: var(--rrhh-surface);
  color: var(--rrhh-text);
  border: 1px solid var(--rrhh-border);
}

.notification.is-info,
.message.is-info {
  background: var(--rrhh-surface);
  border-color: var(--rrhh-info);
  border-left: 4px solid var(--rrhh-info);
}

.notification.is-danger,
.message.is-danger {
  background: var(--rrhh-surface);
  border-color: var(--rrhh-primary);
  border-left: 4px solid var(--rrhh-primary);
}

.notification.is-success,
.message.is-success {
  background: var(--rrhh-surface);
  border-color: var(--rrhh-info);
  border-left: 4px solid var(--rrhh-info);
}

/* Forms */
.control.has-icons-left .icon,
.control.has-icons-right .icon {
  color: var(--rrhh-gray);
}

/* Field/Label */
.field label {
  color: var(--rrhh-text);
}

.help {
  color: var(--rrhh-gray);
}

.help.is-danger {
  color: var(--rrhh-primary);
}

/* Dropdown menu (si se usa) */
.dropdown-menu {
  background: var(--rrhh-surface);
  border: 1px solid var(--rrhh-border);
}

.dropdown-item {
  color: var(--rrhh-text);
}

.dropdown-item:hover,
.dropdown-item.is-hovered {
  background: var(--rrhh-gray-light);
  color: var(--rrhh-text);
}

.dropdown-item.is-active {
  background: var(--rrhh-primary);
  color: var(--rrhh-bg);
}

/* Modal */
.modal-card {
  background: var(--rrhh-surface);
}

.modal-card-head,
.modal-card-foot {
  background: var(--rrhh-gray-light);
  border-color: var(--rrhh-border);
}

.modal-card-title {
  color: var(--rrhh-primary);
}

.rrhh-navbar .navbar-burger:hover {
  background: transparent;
}

.rrhh-navbar .navbar-menu {
  background: transparent;
}

.rrhh-navbar__brand {
  display: inline-flex;
  align-items: center;
}

.rrhh-brand__logo {
  display: block;
  width: auto;
  height: 58px;
  object-fit: contain;
}

@media (max-width: 480px) {
  .rrhh-brand__logo {
    height: 48px;
  }
}

.rrhh-navbar .select select {
  background: var(--rrhh-surface);
  border-color: var(--rrhh-border);
  color: var(--rrhh-text);
}

.rrhh-navbar .button.is-static {
  background: var(--rrhh-surface);
  border-color: var(--rrhh-border);
  color: var(--rrhh-text);
}

/* Surfaces */
.box,
.card {
  background: var(--rrhh-surface);
  border: 1px solid var(--rrhh-border);
  border-radius: var(--rrhh-radius);
}

.box {
  transition: border-color 180ms var(--rrhh-ease), transform 180ms var(--rrhh-ease);
}

.box:hover {
  border-color: var(--rrhh-primary);
  transform: translateY(-1px);
}

/* Headings */
.title,
h1, h2, h3 {
  color: var(--rrhh-primary);
}

h1 {
  font-size: clamp(1.35rem, 1.2vw + 1rem, 2rem);
}

h2 {
  font-size: clamp(1.1rem, 0.8vw + 0.9rem, 1.4rem);
}

a {
  color: var(--rrhh-link);
}

a:hover {
  color: var(--rrhh-link-hover);
}

/* Forms (works even when forms are rendered via form.as_p) */
label {
  color: var(--rrhh-text);
}

input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='url'],
input[type='number'],
textarea,
select {
  background: var(--rrhh-surface);
  color: var(--rrhh-text);
  border: 1px solid var(--rrhh-border);
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--rrhh-focus);
  outline-offset: 1px;
  border-color: var(--rrhh-primary);
}

/* Buttons */
.button.is-primary,
button[type='submit'] {
  background: var(--rrhh-primary);
  border-color: var(--rrhh-primary);
  color: var(--rrhh-bg);
}

.button {
  border-color: var(--rrhh-border);
  color: var(--rrhh-text);
}

.button:hover {
  border-color: var(--rrhh-primary);
  color: var(--rrhh-text);
}

.button:focus {
  outline: 2px solid var(--rrhh-focus);
  outline-offset: 2px;
}

/* ==========================================================================
   ACCESIBILIDAD (WCAG) — Skill 4
   Foco visible por teclado en TODO lo interactivo, enlace "saltar al
   contenido" y objetivos táctiles cómodos en móvil (Skill 3).
   ========================================================================== */
a:focus-visible,
.navbar-item:focus-visible,
.navbar-link:focus-visible,
[tabindex]:focus-visible,
.delete:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--rrhh-focus);
  outline-offset: 2px;
  border-radius: var(--rrhh-radius-sm);
}

/* Enlace para saltar al contenido (visible solo al enfocar con teclado). */
.rrhh-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 0.6rem 1rem;
  background: var(--rrhh-primary);
  color: var(--rrhh-white);
  border-radius: 0 0 var(--rrhh-radius) 0;
  font-weight: 600;
}
.rrhh-skip-link:focus {
  left: 0;
}

/* Objetivos táctiles cómodos en pantallas pequeñas (Skill 3, mobile-first). */
@media (max-width: 1023px) {
  .button,
  .navbar-item,
  .pagination-link,
  .pagination-previous,
  .pagination-next {
    min-height: 44px;
  }
}

/* Tablas anchas: scroll horizontal dentro de su caja en móvil (no rompe el
   layout de la página). Técnica solo-CSS, sin envoltorio en el markup. */
@media (max-width: 768px) {
  .table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}

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

  .box:hover {
    transform: none;
  }
}

.button.is-primary:hover,
button[type='submit']:hover {
  filter: none;
}

.button.is-primary:focus,
button[type='submit']:focus {
  outline: 2px solid var(--rrhh-focus);
  outline-offset: 2px;
}

/* Loader (global) */
.rrhh-loader {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: var(--rrhh-bg);
  z-index: 9999;
}

html.rrhh-loading .rrhh-loader {
  display: flex;
}

.rrhh-loader__card {
  width: min(360px, 92vw);
  border: 1px solid var(--rrhh-border);
  border-radius: var(--rrhh-radius);
  background: var(--rrhh-surface);
  padding: 1rem 1.1rem;
  text-align: center;
}

.rrhh-loader__img {
  display: inline-block;
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.rrhh-loader__text {
  margin-top: 0.55rem;
  color: var(--rrhh-text);
}

/* Post-login splash (Intec.gif) */
.rrhh-splash {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: var(--rrhh-bg);
  z-index: 10000;
}

html.rrhh-splashing .rrhh-splash {
  display: flex;
}

.rrhh-splash__img {
  width: min(92vw, 640px);
  height: auto;
  object-fit: contain;
}

/* Messages + tags (paleta estricta) */
.rrhh-messages {
  margin: 1rem 0;
}

.rrhh-message {
  border: 1px solid var(--rrhh-border);
}

.rrhh-message .message-body {
  color: var(--rrhh-text);
}

.message.is-danger {
  border-color: var(--rrhh-primary);
}

.message.is-danger .message-body {
  background: var(--rrhh-surface);
}

.message.is-success,
.message.is-info {
  border-color: var(--rrhh-info);
}

.message.is-info .message-body {
  background: var(--rrhh-surface);
  border-left: 4px solid var(--rrhh-info);
  color: var(--rrhh-text);
}

.message.is-danger .message-body {
  background: var(--rrhh-surface);
  border-left: 4px solid var(--rrhh-primary);
  color: var(--rrhh-text);
}

.message.is-success .message-body {
  background: var(--rrhh-surface);
  border-left: 4px solid var(--rrhh-info);
  color: var(--rrhh-text);
}

.rrhh-tag {
  background: var(--rrhh-surface);
  border: 1px solid var(--rrhh-gray-light);
  color: var(--rrhh-text);
}

/* Tabs (Bulma) */
.tabs.is-toggle li a {
  border-color: var(--rrhh-border);
  color: var(--rrhh-text);
}

.tabs.is-toggle li.is-active a {
  border-color: var(--rrhh-primary);
  background: var(--rrhh-surface);
  color: var(--rrhh-primary);
}

.tag.is-info,
.notification.is-info,
.message.is-info .message-body {
  background: var(--rrhh-surface);
}

/* =========================
   Auth + Login (scoped)
   ========================= */

.rrhh-auth-hero {
  background: var(--rrhh-bg);
}

.rrhh-auth-shell {
  border-radius: var(--rrhh-radius);
  overflow: hidden;
  border: 1px solid var(--rrhh-border);
  background: var(--rrhh-surface);
}

.rrhh-auth-panel {
  background: var(--rrhh-gray-light);
}

.rrhh-auth-panel__inner {
  padding: 1.25rem 1.25rem;
}

.rrhh-auth-panel__logo {
  display: block;
  width: auto;
  height: 78px;
  object-fit: contain;
}

.rrhh-auth-panel__kicker {
  margin-top: 0.75rem;
  color: var(--rrhh-text);
}

.rrhh-auth-panel .message,
.rrhh-auth-panel .notification {
  background: var(--rrhh-surface);
  border: 1px solid var(--rrhh-border);
}

.rrhh-auth-card {
  border-radius: 0;
  box-shadow: none;
  border-left: 1px solid var(--rrhh-border);
}

.rrhh-auth-card .card-header {
  background: var(--rrhh-surface);
  border-bottom: 1px solid var(--rrhh-border);
}

.rrhh-auth-card .card-header-title {
  color: var(--rrhh-primary);
  gap: 0.5rem;
}

.rrhh-auth-card .card-footer {
  border-top: 1px solid var(--rrhh-border);
}

.rrhh-auth-field .label {
  color: var(--rrhh-text);
}

.rrhh-auth-field .help.is-danger {
  color: var(--rrhh-primary);
}

.rrhh-auth-links a {
  color: var(--rrhh-primary);
}

.rrhh-auth-links a:hover {
  color: var(--rrhh-gray);
}

.rrhh-modal-card {
  border: 1px solid var(--rrhh-border);
  background: var(--rrhh-surface);
}

.rrhh-modal-card .modal-card-head {
  background: var(--rrhh-surface);
  border-bottom: 1px solid var(--rrhh-border);
}

.rrhh-modal-card .modal-card-title {
  color: var(--rrhh-primary);
}

.rrhh-modal-card .modal-card-foot {
  background: var(--rrhh-surface);
  border-top: 1px solid var(--rrhh-border);
}

.rrhh-modal-card .modal-card-body {
  background: var(--rrhh-surface);
}

.rrhh-auth-hero .modal-background {
  background: var(--rrhh-bg);
  opacity: 1;
}

.rrhh-auth-question {
  margin: 0;
  padding: 0.95rem 1rem;
  background: var(--rrhh-surface);
  color: var(--rrhh-text);
  border: 1px solid var(--rrhh-border);
  border-left: 4px solid var(--rrhh-info);
  border-radius: calc(var(--rrhh-radius) - 2px);
}

.rrhh-login-card {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.rrhh-login-compact .input {
  height: 2.6rem;
}

.rrhh-login-compact .button {
  height: 2.75rem;
}

.rrhh-login-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 0.65rem;
}

.rrhh-login-brand__logo {
  height: 56px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 480px) {
  .rrhh-login-brand__logo {
    height: 48px;
  }
}

.rrhh-login-gif {
  display: flex;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.rrhh-login-gif__image {
  width: 240px;
}

.rrhh-login-gif__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: calc(var(--rrhh-radius) - 2px);
  border: 1px solid var(--rrhh-border);
}

@media (max-width: 480px) {
  .rrhh-login-gif__image {
    width: 200px;
  }
}

/* =========================
   Dashboard / Employees UI
   ========================= */

.rrhh-dashboard {
  display: block;
}

.rrhh-zone-hero {
  background: var(--rrhh-surface);
  border: 1px solid var(--rrhh-border);
  border-radius: var(--rrhh-radius);
  margin-bottom: 1rem;
}

.rrhh-zone-title {
  margin-bottom: 0.25rem;
}

.rrhh-zone-tabs {
  margin-top: 0.75rem;
}

.rrhh-zone-tabs a {
  color: var(--rrhh-text);
}

/* =================================
   CONFIGURACIÓN RRHH - DISEÑO MODERNO
   ================================= */

.rrhh-cfg {
  display: block;
}

/* Hero Section - Moderno y Futurista */
/* Hero genérico - Moderno */
/* ==========================================================================
   COMPONENTE CANÓNICO: CABECERA DE PÁGINA  (usar en TODA página nueva)
   --------------------------------------------------------------------------
   Una sola definición, basada en tokens, que reemplaza a las variantes
   rrhh-*-hero (cfg/audit/employees/credentials/dashboard/vac…). Markup:
     <section class="hero rrhh-page-header"> … </section>
   o, recomendado, el partial:  templates/partials/rrhh_page_header.html
   Las acciones (botones) van en .rrhh-page-header__actions.
   ========================================================================== */
.hero.rrhh-page-header {
  background: linear-gradient(135deg, var(--rrhh-primary) 0%, var(--rrhh-info) 100%);
  border: none;
  border-radius: var(--rrhh-radius-lg);
  margin-bottom: 1.25rem;
  box-shadow: var(--rrhh-shadow-lg);
  position: relative;
  overflow: hidden;
}
.rrhh-page-header .hero-body {
  padding: 1.25rem 1.25rem;
  position: relative;
  z-index: 1;
}
.rrhh-page-header::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  transform: translate(50%, -50%);
}
/* Texto blanco SOBRE el degradado (contraste correcto, ver STYLEGUIDE §2). */
.rrhh-page-header .title,
.rrhh-page-header .subtitle {
  color: var(--rrhh-white) !important;
}
.rrhh-page-header .subtitle {
  opacity: 0.92;
}
.rrhh-page-header .breadcrumb a {
  color: rgba(255, 255, 255, 0.85);
}
.rrhh-page-header .breadcrumb li.is-active a {
  color: var(--rrhh-white);
}
.rrhh-page-header .breadcrumb li + li::before {
  color: rgba(255, 255, 255, 0.5);
}
/* Acciones legibles sobre el degradado: botón blanco con texto institucional. */
.rrhh-page-header__actions .button {
  background: var(--rrhh-white);
  border-color: transparent;
  color: var(--rrhh-primary);
  font-weight: 600;
}
.rrhh-page-header__actions .button:hover {
  background: var(--rrhh-gray-100);
  color: var(--rrhh-primary);
}

.hero.rrhh-cfg-hero,
.hero.rrhh-audit-hero,
.hero.rrhh-employees-hero,
.hero.rrhh-credentials-hero,
.hero.rrhh-dashboard-hero,
.hero.rrhh-vac-hero {
  background: linear-gradient(135deg, var(--rrhh-primary) 0%, #8dbbc7 100%) !important;
  border: none !important;
  border-radius: 16px !important;
  margin-bottom: 1.25rem !important;
  padding: 0 !important;
  box-shadow: 0 8px 24px rgba(148, 24, 16, 0.15) !important;
  position: relative !important;
  overflow: hidden !important;
}

.hero.rrhh-cfg-hero .hero-body,
.hero.rrhh-audit-hero .hero-body,
.hero.rrhh-employees-hero .hero-body,
.hero.rrhh-credentials-hero .hero-body,
.hero.rrhh-dashboard-hero .hero-body,
.hero.rrhh-vac-hero .hero-body {
  padding: 1.25rem 1rem !important;
}

.rrhh-cfg-hero,
.rrhh-audit-hero,
.rrhh-employees-hero,
.rrhh-credentials-hero,
.rrhh-dashboard-hero,
.rrhh-vac-hero {
  background: linear-gradient(135deg, var(--rrhh-primary) 0%, #8dbbc7 100%) !important;
  border: none !important;
  border-radius: 16px !important;
  margin-bottom: 1.25rem !important;
  padding: 1.25rem 1rem !important;
  box-shadow: 0 8px 24px rgba(148, 24, 16, 0.15) !important;
  position: relative !important;
  overflow: hidden !important;
}

.rrhh-cfg-hero::before,
.rrhh-audit-hero::before,
.rrhh-employees-hero::before,
.rrhh-credentials-hero::before,
.rrhh-dashboard-hero::before,
.rrhh-vac-hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  transform: translate(50%, -50%);
}

.rrhh-cfg-title {
  color: #ffffff !important;
  margin-bottom: 0.25rem !important;
  font-weight: 700 !important;
  font-size: 1.3rem !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  position: relative !important;
  z-index: 1 !important;
  line-height: 1.3 !important;
}

/* Card - Moderno con elevación */
.rrhh-cfg-card {
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
  margin-bottom: 1.5rem !important;
  padding: 0 !important;
  background: var(--rrhh-surface) !important;
  overflow: hidden !important;
}

.rrhh-cfg-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12) !important;
  transform: translateY(-2px) !important;
}

.rrhh-cfg-card .card-header {
  background: linear-gradient(135deg, var(--rrhh-primary) 0%, #8dbbc7 100%) !important;
  border: none !important;
  padding: 1rem 1.25rem !important;
  border-radius: 12px 12px 0 0 !important;
}

.rrhh-cfg-card .card-header-title {
  color: white !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.rrhh-cfg-card .card-content {
  padding: 1.25rem 1rem !important;
}

/* Table - Diseño moderno */
.rrhh-cfg-table {
  border-spacing: 0 !important;
  width: 100% !important;
  border-collapse: collapse !important;
}

.rrhh-cfg-table thead {
  background: #f5f5f5 !important;
  border-bottom: 2px solid var(--rrhh-primary) !important;
}

.rrhh-cfg-table thead th {
  color: var(--rrhh-primary) !important;
  font-weight: 700 !important;
  padding: 0.75rem 0.875rem !important;
  text-align: left !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border: none !important;
}

.rrhh-cfg-table tbody tr {
  border-bottom: 1px solid #e8e8e8 !important;
  transition: background-color 0.2s ease !important;
}

.rrhh-cfg-table tbody tr:hover {
  background-color: rgba(141, 187, 199, 0.08) !important;
}

.rrhh-cfg-table tbody td {
  padding: 0.75rem 0.875rem !important;
  color: #333333 !important;
  font-weight: 500 !important;
  border: none !important;
  font-size: 0.9rem !important;
}

.rrhh-cfg-table tbody strong {
  color: var(--rrhh-primary);
  font-weight: 700;
}

/* Botones - Modernos con efectos */
.rrhh-cfg-btn {
  background: linear-gradient(135deg, #941810 0%, #8dbbc7 100%) !important;
  border: none !important;
  color: white !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 3px 10px rgba(148, 24, 16, 0.2) !important;
  position: relative;
  overflow: hidden;
  padding: 0.5rem 0.9rem !important;
}

.rrhh-cfg-btn:hover {
  background: linear-gradient(135deg, #8dbbc7 0%, #941810 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(141, 187, 199, 0.3) !important;
}

.rrhh-cfg-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 6px rgba(148, 24, 16, 0.2) !important;
}

/* Tags - Coloreados */
.tag.is-success {
  background: rgba(141, 187, 199, 0.2) !important;
  color: #1a6b7f !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  padding: 0.4rem 0.8rem !important;
}

.tag.is-danger {
  background: rgba(119, 119, 119, 0.2) !important;
  color: #333333 !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  padding: 0.4rem 0.8rem !important;
}

/* Responsive */
@media (max-width: 768px) {
  .rrhh-cfg-hero {
    padding: 0.8rem 0.7rem !important;
  }

  .rrhh-cfg-title {
    font-size: 1rem;
  }

  .rrhh-cfg-table thead th,
  .rrhh-cfg-table tbody td {
    padding: 0.5rem 0.6rem;
    font-size: 0.8rem;
  }

  .buttons.are-small {
    flex-wrap: wrap;
    gap: 0.3rem;
  }

  .button.is-small {
    padding: 0.3rem 0.5rem;
    font-size: 0.7rem;
  }
}

/* =================================
   ESTILOS GENÉRICOS MODERNOS - APLICABLES A TODAS LAS PÁGINAS
   ================================= */



/* Títulos modernos */
.rrhh-audit-title,
.rrhh-credentials-title,
.rrhh-employees-title,
.rrhh-dashboard-title {
  color: #ffffff !important;
  margin-bottom: 0.25rem !important;
  font-weight: 700 !important;
  font-size: 1.3rem !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  position: relative !important;
  z-index: 1 !important;
  line-height: 1.3 !important;
}

/* Tablas genéricas */
.rrhh-audit-table,
.rrhh-employees-table,
.rrhh-dashboard-table {
  border-spacing: 0 !important;
  width: 100% !important;
  border-collapse: collapse !important;
}

.rrhh-audit-table thead,
.rrhh-employees-table thead,
.rrhh-dashboard-table thead {
  background: #f5f5f5 !important;
  border-bottom: 2px solid var(--rrhh-primary) !important;
}

.rrhh-audit-table thead th,
.rrhh-employees-table thead th,
.rrhh-dashboard-table thead th {
  color: var(--rrhh-primary) !important;
  font-weight: 700 !important;
  padding: 0.75rem 0.875rem !important;
  text-align: left !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border: none !important;
}

.rrhh-audit-table tbody tr,
.rrhh-employees-table tbody tr,
.rrhh-dashboard-table tbody tr {
  border-bottom: 1px solid #e8e8e8 !important;
  transition: background-color 0.2s ease !important;
  background-color: var(--rrhh-surface) !important;
}

.rrhh-audit-table tbody tr:hover,
.rrhh-employees-table tbody tr:hover,
.rrhh-dashboard-table tbody tr:hover {
  background-color: rgba(141, 187, 199, 0.08) !important;
}

.rrhh-audit-table td,
.rrhh-employees-table td,
.rrhh-dashboard-table td {
  padding: 0.75rem 0.875rem !important;
  color: #333333 !important;
  font-weight: 500 !important;
  border: none !important;
  font-size: 0.9rem !important;
}

/* Filtros / Cards genéricos */
.rrhh-audit-filters,
.rrhh-employees-filters,
.rrhh-dashboard-card {
  background: var(--rrhh-surface) !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
  margin-bottom: 1.5rem !important;
  padding: 1.25rem 1rem !important;
}

.rrhh-audit-filters:hover,
.rrhh-employees-filters:hover,
.rrhh-dashboard-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12) !important;
  transform: translateY(-2px) !important;
}

/* Subtítulos */
.rrhh-audit-subtitle,
.rrhh-employees-subtitle,
.rrhh-dashboard-subtitle {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 0.95rem !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Botones actualizados */
.rrhh-audit-filters .button,
.rrhh-employees-filters .button,
.rrhh-dashboard-card .button {
  background: linear-gradient(135deg, #941810 0%, #8dbbc7 100%) !important;
  border: none !important;
  color: white !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(148, 24, 16, 0.25) !important;
}

.rrhh-audit-filters .button:hover,
.rrhh-employees-filters .button:hover,
.rrhh-dashboard-card .button:hover {
  background: linear-gradient(135deg, #8dbbc7 0%, #941810 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(141, 187, 199, 0.35) !important;
}

/* Badges/Tags de auditoría */
.rrhh-audit-badge-create {
  background-color: rgba(141, 187, 199, 0.15) !important;
  color: #2c7a8f !important;
  padding: 0.35rem 0.6rem !important;
  border-radius: 6px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
}

.rrhh-audit-badge-update {
  background-color: rgba(255, 165, 0, 0.15) !important;
  color: #d97706 !important;
  padding: 0.35rem 0.6rem !important;
  border-radius: 6px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
}

.rrhh-audit-badge-delete {
  background-color: rgba(148, 24, 16, 0.15) !important;
  color: var(--rrhh-primary) !important;
  padding: 0.35rem 0.6rem !important;
  border-radius: 6px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
}

/* Utility classes for audit page */
.rrhh-audit-filters h2 {
  color: var(--rrhh-primary) !important;
  margin-bottom: 1rem !important;
  font-weight: bold !important;
}

.rrhh-audit-filters .label {
  color: var(--rrhh-text) !important;
  font-size: 0.95em !important;
}

.rrhh-audit-filters .button.is-clean {
  background: var(--rrhh-gray) !important;
  border-color: var(--rrhh-gray) !important;
  color: var(--rrhh-bg) !important;
}

.rrhh-audit-filters .button.is-clean:hover {
  background: var(--rrhh-gray) !important;
  border-color: var(--rrhh-gray) !important;
  color: var(--rrhh-bg) !important;
}

/* Hero body - Responsive */
.rrhh-audit-hero .hero-body,
.rrhh-credentials-hero .hero-body,
.rrhh-employees-hero .hero-body,
.rrhh-dashboard-hero .hero-body {
  padding: 0 !important;
}

/* Breadcrumb in hero */
.rrhh-audit-hero .breadcrumb,
.rrhh-credentials-hero .breadcrumb,
.rrhh-employees-hero .breadcrumb,
.rrhh-dashboard-hero .breadcrumb {
  margin-bottom: 0.5rem !important;
  background: transparent !important;
}

.rrhh-audit-hero .breadcrumb a,
.rrhh-credentials-hero .breadcrumb a,
.rrhh-employees-hero .breadcrumb a,
.rrhh-dashboard-hero .breadcrumb a {
  color: rgba(255, 255, 255, 0.8) !important;
}

.rrhh-audit-hero .breadcrumb a:hover,
.rrhh-credentials-hero .breadcrumb a:hover,
.rrhh-employees-hero .breadcrumb a:hover,
.rrhh-dashboard-hero .breadcrumb a:hover {
  color: white !important;
}

/* Code styling */
code {
  background: rgba(0, 0, 0, 0.05) !important;
  padding: 0.2rem 0.4rem !important;
  border-radius: 4px !important;
  font-size: 0.85em !important;
  color: var(--rrhh-primary) !important;
}

/* Compatibilidad - clases antiguas mapeadas a las nuevas */
.rrhh-emp-hero { apply: rrhh-employees-hero; }
.rrhh-emp-title { apply: rrhh-employees-title; }
.rrhh-emp-subtitle { apply: rrhh-employees-subtitle; }
.rrhh-emp-filters { apply: rrhh-employees-filters; }
.rrhh-emp-table { apply: rrhh-employees-table; }
.rrhh-emp-btn { apply: rrhh-employees-btn; }

/* Botones adicionales */
.rrhh-cfg-btn,
.rrhh-employees-btn {
  background: linear-gradient(135deg, var(--rrhh-primary) 0%, #a8453f 100%) !important;
  border: none !important;
  color: white !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(148, 24, 16, 0.25) !important;
  position: relative;
  overflow: hidden;
}

.rrhh-cfg-btn:hover,
.rrhh-employees-btn:hover {
  background: linear-gradient(135deg, #a8453f 0%, var(--rrhh-primary) 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(148, 24, 16, 0.35) !important;
}

/* Navbar dropdown for Configuration */
.navbar-dropdown {
  background: var(--rrhh-surface) !important;
  background-color: var(--rrhh-surface) !important;
  border: 1px solid var(--rrhh-border) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
  min-width: 200px !important;
  margin-top: 0 !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 1000 !important;
  display: none !important;
  overflow: visible !important;
}

.navbar-dropdown a,
.navbar-dropdown .navbar-item,
.navbar-dropdown .navbar-link {
  background: var(--rrhh-surface) !important;
  background-color: var(--rrhh-surface) !important;
  color: var(--rrhh-text) !important;
  padding: 0.75rem 1rem !important;
  border: none !important;
  display: block !important;
  padding: 0.75rem 1rem !important;
  line-height: 1.5 !important;
}

.navbar-dropdown a:hover,
.navbar-dropdown .navbar-item:hover,
.navbar-dropdown .navbar-link:hover {
  background: var(--rrhh-gray-light) !important;
  background-color: var(--rrhh-gray-light) !important;
  color: var(--rrhh-text) !important;
}

/* Specific rule for dropdown divider if exists */
.navbar-dropdown hr {
  background-color: var(--rrhh-border) !important;
  height: 1px !important;
  margin: 0.5rem 0 !important;
}

/* Override Bulma navbar-item in dropdown */
.navbar-item.has-dropdown {
  background: transparent !important;
  position: relative !important;
  overflow: visible !important;
}

.navbar-item.has-dropdown.is-hoverable:hover .navbar-dropdown {
  display: block !important;
  background: var(--rrhh-surface) !important;
  overflow: visible !important;
  z-index: 1000 !important;
}

/* Click-to-toggle support: show dropdown when parent is active */
.navbar-item.has-dropdown.is-active .navbar-dropdown {
  display: block !important;
  background: var(--rrhh-surface) !important;
  overflow: visible !important;
  z-index: 1000 !important;
}

/* Extra robust: mostrar dropdown si el trigger está expandido */
.navbar-item.has-dropdown > .navbar-link[aria-expanded="true"] + .navbar-dropdown {
  display: block !important;
}

/* Fallback: si el JS no corre, mostrar dropdown al enfocar/clickeando */
.navbar-item.has-dropdown:focus-within .navbar-dropdown {
  display: block !important;
}

/* Override .navbar-link within dropdown context */
.navbar-dropdown .navbar-link {
  background: var(--rrhh-surface) !important;
  background-color: var(--rrhh-surface) !important;
  color: var(--rrhh-text) !important;
  padding: 0.75rem 1rem !important;
  border: none !important;
}

.navbar-dropdown .navbar-link:hover {
  background: var(--rrhh-gray-light) !important;
  background-color: var(--rrhh-gray-light) !important;
  color: var(--rrhh-text) !important;
}

/* Scoped to dashboard-like layout */
.rrhh-body--dashboardish .navbar-dropdown {
  background: var(--rrhh-surface) !important;
  background-color: var(--rrhh-surface) !important;
  border: 1px solid var(--rrhh-border) !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 1001 !important;
  min-width: 180px !important;
  overflow: visible !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
  white-space: normal !important;
  padding: 0 !important;
  margin-top: 2px !important;
}

/* In dashboardish pages, keep dropdown hidden unless active/expanded */
.rrhh-body--dashboardish .navbar-item.has-dropdown:not(.is-active) .navbar-dropdown {
  display: none !important;
}

.rrhh-body--dashboardish .navbar-item.has-dropdown.is-active .navbar-dropdown {
  display: block !important;
}

.rrhh-body--dashboardish .navbar-item.has-dropdown > .navbar-link[aria-expanded="true"] + .navbar-dropdown {
  display: block !important;
}

.rrhh-body--dashboardish .navbar-item.has-dropdown:focus-within .navbar-dropdown {
  display: block !important;
}

.rrhh-body--dashboardish .navbar-dropdown a,
.rrhh-body--dashboardish .navbar-dropdown .navbar-item,
.rrhh-body--dashboardish .navbar-dropdown .navbar-link {
  background: var(--rrhh-surface) !important;
  color: #333333 !important;
  padding: 0.5rem 0.8rem !important;
  font-size: 0.8rem !important;
  display: block !important;
  border: none !important;
  font-weight: 500;
}

.rrhh-body--dashboardish .navbar-dropdown a:hover,
.rrhh-body--dashboardish .navbar-dropdown .navbar-item:hover,
.rrhh-body--dashboardish .navbar-dropdown .navbar-link:hover {
  background: var(--rrhh-primary) !important;
  color: #ffffff !important;
}

/* Mobile: Show dropdown when parent has has-dropdown class and on hover */
@media (max-width: 479px) {
  .rrhh-body--dashboardish .navbar-dropdown {
    position: static !important;
    display: none !important;
    background: var(--rrhh-gray-light) !important;
    border: none !important;
    box-shadow: none !important;
    margin-top: 0 !important;
    padding-left: 1rem !important;
  }
  
  .rrhh-body--dashboardish .navbar-item.has-dropdown.is-active .navbar-dropdown {
    display: block !important;
  }
  
  .rrhh-body--dashboardish .navbar-dropdown a,
  .rrhh-body--dashboardish .navbar-dropdown .navbar-item,
  .rrhh-body--dashboardish .navbar-dropdown .navbar-link {
    background: var(--rrhh-gray-light) !important;
    color: #333333 !important;
    padding: 0.4rem 0.6rem !important;
    font-size: 0.75rem !important;
    font-weight: 500;
  }
}

/* General navbar-link styling */
.navbar-link {
  background: transparent !important;
  color: var(--rrhh-text) !important;
}

.navbar-link:hover {
  background: transparent !important;
  color: var(--rrhh-primary) !important;
}

/* Force navbar-dropdown styling override for Bulma defaults */
.navbar-dropdown,
.navbar-dropdown a,
.navbar-dropdown a:link,
.navbar-dropdown a:visited {
  background-color: var(--rrhh-surface) !important;
  color: var(--rrhh-text) !important;
  border-color: var(--rrhh-border) !important;
}

.navbar-dropdown a:hover,
.navbar-dropdown a:focus,
.navbar-dropdown a:active {
  background-color: var(--rrhh-gray-light) !important;
  color: var(--rrhh-text) !important;
}

/* Capture .navbar-item inside .navbar-dropdown */ 
.navbar-dropdown .navbar-item,
.navbar-dropdown .navbar-item a {
  background-color: var(--rrhh-surface) !important;
  color: var(--rrhh-text) !important;
  padding: 0.75rem 1rem !important;
}

.navbar-dropdown .navbar-item:hover,
.navbar-dropdown .navbar-item a:hover {
  background-color: var(--rrhh-gray-light) !important;
  color: var(--rrhh-text) !important;
}

/* Icon inside navbar items */
.navbar-dropdown .icon,
.navbar-dropdown .icon i {
  color: var(--rrhh-text) !important;
}

/* ================================
   BULMA OVERRIDES (PALETA ESTRICTA)
   Fuerza TODOS los colores a la paleta institucional
   ================================ */

/* MESSAGING: Danger (rojo institucional) */
.notification.is-danger,
.message.is-danger {
  background-color: var(--rrhh-surface) !important;
  border-color: var(--rrhh-primary) !important;
  border-left-color: var(--rrhh-primary) !important;
}

.notification.is-danger .notification-body,
.notification.is-danger .message-body,
.message.is-danger .message-body {
  color: var(--rrhh-text) !important;
}

/* MESSAGING: Info (azul institucional) */
.notification.is-info,
.message.is-info {
  background-color: var(--rrhh-surface) !important;
  border-color: var(--rrhh-info) !important;
  border-left-color: var(--rrhh-info) !important;
}

.notification.is-info .notification-body,
.notification.is-info .message-body,
.message.is-info .message-body {
  color: var(--rrhh-text) !important;
}

/* MESSAGING: Success (→ azul institucional, sin verde) */
.notification.is-success,
.message.is-success {
  background-color: var(--rrhh-surface) !important;
  border-color: var(--rrhh-info) !important;
  border-left-color: var(--rrhh-info) !important;
}

.notification.is-success .notification-body,
.notification.is-success .message-body,
.message.is-success .message-body {
  color: var(--rrhh-text) !important;
}

/* MESSAGING: Warning (→ rojo institucional, sin amarillo) */
.notification.is-warning,
.message.is-warning {
  background-color: var(--rrhh-surface) !important;
  border-color: var(--rrhh-primary) !important;
  border-left-color: var(--rrhh-primary) !important;
}

.notification.is-warning .notification-body,
.notification.is-warning .message-body,
.message.is-warning .message-body {
  color: var(--rrhh-text) !important;
}

/* MESSAGING: Light variant */
.notification.is-light,
.message.is-light {
  background-color: var(--rrhh-gray-light) !important;
  border-color: var(--rrhh-border) !important;
}

.notification.is-light .notification-body,
.notification.is-light .message-body,
.message.is-light .message-body {
  color: var(--rrhh-text) !important;
}

/* TAGS: is-danger */
.tag.is-danger {
  background-color: var(--rrhh-gray-light) !important;
  color: var(--rrhh-primary) !important;
}

.tag.is-danger.is-light {
  background-color: var(--rrhh-gray-light) !important;
  color: var(--rrhh-primary) !important;
}

/* TAGS: is-info */
.tag.is-info {
  background-color: var(--rrhh-gray-light) !important;
  color: var(--rrhh-info) !important;
}

.tag.is-info.is-light {
  background-color: var(--rrhh-gray-light) !important;
  color: var(--rrhh-info) !important;
}

/* TAGS: is-success (→ azul institucional) */
.tag.is-success {
  background: rgba(141, 187, 199, 0.15) !important;
  color: #2c7a8f !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
}

.tag.is-success.is-light {
  background: rgba(141, 187, 199, 0.15) !important;
  color: #2c7a8f !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
}

.tag.is-danger {
  background: rgba(119, 119, 119, 0.15) !important;
  color: #555555 !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
}

.tag.is-danger.is-light {
  background: rgba(119, 119, 119, 0.15) !important;
  color: #555555 !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
}

/* TAGS: is-warning (→ rojo institucional) */
.tag.is-warning {
  background-color: var(--rrhh-gray-light) !important;
  color: var(--rrhh-primary) !important;
}

.tag.is-warning.is-light {
  background-color: var(--rrhh-gray-light) !important;
  color: var(--rrhh-primary) !important;
}

/* TAGS: is-light */
.tag.is-light {
  background-color: var(--rrhh-gray-light) !important;
  color: var(--rrhh-text) !important;
}

/* TAGS: is-primary */
.tag.is-primary {
  background-color: var(--rrhh-primary) !important;
  color: var(--rrhh-bg) !important;
}

/* BUTTONS: is-danger */
.button.is-danger {
  background: #777777 !important;
  border: none !important;
  color: white !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(119, 119, 119, 0.2) !important;
}

.button.is-danger:hover {
  background: #666666 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(119, 119, 119, 0.3) !important;
}

.button.is-danger:focus {
  background: #777777 !important;
  box-shadow: 0 0 0 3px rgba(119, 119, 119, 0.2) !important;
}

.button.is-danger.is-light {
  background: rgba(119, 119, 119, 0.1) !important;
  border: 1px solid rgba(119, 119, 119, 0.3) !important;
  color: #555555 !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

.button.is-danger.is-light:hover {
  background: rgba(119, 119, 119, 0.15) !important;
  color: #333333 !important;
  box-shadow: 0 2px 8px rgba(119, 119, 119, 0.15) !important;
}

/* BUTTONS: is-info */
.button.is-info {
  background-color: var(--rrhh-info) !important;
  border-color: var(--rrhh-info) !important;
  color: var(--rrhh-bg) !important;
}

.button.is-info:hover {
  background-color: var(--rrhh-info) !important;
  border-color: var(--rrhh-info) !important;
  color: var(--rrhh-bg) !important;
}

.button.is-info:focus {
  background-color: var(--rrhh-info) !important;
  border-color: var(--rrhh-info) !important;
  color: var(--rrhh-bg) !important;
}

/* BUTTONS: is-success (→ azul institucional) */
.button.is-success {
  background-color: var(--rrhh-info) !important;
  border-color: var(--rrhh-info) !important;
  color: var(--rrhh-bg) !important;
}

.button.is-success:hover {
  background-color: var(--rrhh-info) !important;
  border-color: var(--rrhh-info) !important;
  color: var(--rrhh-bg) !important;
}

/* BUTTONS: is-warning (→ rojo institucional) */
.button.is-warning {
  background-color: var(--rrhh-primary) !important;
  border-color: var(--rrhh-primary) !important;
  color: var(--rrhh-bg) !important;
}

.button.is-warning:hover {
  background-color: var(--rrhh-primary) !important;
  border-color: var(--rrhh-primary) !important;
  color: var(--rrhh-bg) !important;
}

/* BUTTONS: is-link (→ rojo institucional) */
.button.is-link {
  background-color: var(--rrhh-primary) !important;
  border-color: var(--rrhh-primary) !important;
  color: var(--rrhh-bg) !important;
}

.button.is-link:hover {
  background-color: var(--rrhh-primary) !important;
  border-color: var(--rrhh-primary) !important;
  color: var(--rrhh-bg) !important;
}

/* HELP TEXT: danger */
.help.is-danger {
  color: var(--rrhh-primary) !important;
}

/* NO Bulma is-text color override (keep natural) */
.is-text {
  color: var(--rrhh-text) !important;
}

/* Prevent Bulma's default primary (azul #3273dc) everywhere */
.is-primary {
  background-color: var(--rrhh-primary) !important;
  color: var(--rrhh-bg) !important;
}

.button.is-primary {
  background-color: var(--rrhh-primary) !important;
  border-color: var(--rrhh-primary) !important;
  color: var(--rrhh-bg) !important;
}

.button.is-primary:hover {
  background-color: var(--rrhh-primary) !important;
  border-color: var(--rrhh-primary) !important;
  color: var(--rrhh-bg) !important;
}

.button.is-primary:focus {
  background-color: var(--rrhh-primary) !important;
  border-color: var(--rrhh-primary) !important;
  color: var(--rrhh-bg) !important;
}

.button.is-primary:active {
  background-color: var(--rrhh-primary) !important;
  border-color: var(--rrhh-primary) !important;
  color: var(--rrhh-bg) !important;
}

/* BULK inline forms CSS class (replaces inline style="display:inline") */
.form-inline {
  display: inline !important;
}

/* Disable any Bulma-injected filter/brightness/effects */
.button,
.tag,
.notification,
.message,
.input,
.textarea,
.select select {
  filter: none !important;
}

.rrhh-zone-tabs li.is-active a {
  background: var(--rrhh-surface);
  border-color: var(--rrhh-primary);
  color: var(--rrhh-primary);
}

.rrhh-zone-message {
  margin-top: 0.75rem;
}

.rrhh-dashboard__header {
  margin: 0 0 0.75rem 0;
}

.rrhh-dashboard__title {
  margin-bottom: 0.35rem;
}

.rrhh-dashboard__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}

@media (min-width: 900px) {
  .rrhh-dashboard__grid {
    grid-template-columns: 1.25fr 0.75fr;
    align-items: start;
  }
}

.rrhh-panel {
  position: relative;
  overflow: hidden;
}

.rrhh-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--rrhh-primary);
  opacity: 1;
}

.rrhh-panel__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.75rem;
  align-items: center;
  justify-content: space-between;
}

.rrhh-panel__title {
  margin: 0;
}

.rrhh-panel__meta {
  margin: 0;
  color: var(--rrhh-text);
  opacity: 1;
  font-size: 0.95em;
}

.rrhh-panel__body {
  margin-top: 0.75rem;
}

.rrhh-panel--admin {
  margin-bottom: 0.9rem;
}

.rrhh-actions {
  margin-bottom: 0.75rem;
}

.rrhh-chart {
  width: 100%;
  max-width: 820px;
}

.rrhh-chart canvas {
  width: 100% !important;
  height: auto !important;
}

.rrhh-log {
  background: var(--rrhh-surface);
  border: 1px solid var(--rrhh-border);
  border-radius: calc(var(--rrhh-radius) - 2px);
  padding: 0.9rem;
  max-height: 280px;
  overflow: auto;
  color: var(--rrhh-text);
  font-size: 0.92em;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.rrhh-log:empty {
  opacity: 1;
}

/* Centro de Control (Dashboard principal) */
.rrhh-cc {
  --rrhh-cc-primary: var(--rrhh-primary);
  --rrhh-cc-muted: var(--rrhh-gray);
  --rrhh-cc-border: var(--rrhh-gray-light);
  --rrhh-cc-info: var(--rrhh-info);
}

.rrhh-cc-hero {
  background: linear-gradient(135deg, var(--rrhh-primary) 0%, #8dbbc7 100%);
  border: none;
  border-radius: 12px;
  margin-bottom: 1.2rem;
  padding: 1.2rem 1.25rem;
  box-shadow: 0 6px 20px rgba(148, 24, 16, 0.15);
  position: relative;
  overflow: hidden;
}

.rrhh-cc-hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  transform: translate(50%, -50%);
}

.rrhh-cc-title {
  color: #ffffff !important;
  margin-top: 0 !important;
  margin-bottom: 0.3rem !important;
  font-weight: 700 !important;
  font-size: 1.3rem !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  position: relative !important;
  z-index: 1 !important;
  line-height: 1.3 !important;
}

.rrhh-cc-subtitle {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 0.95rem !important;
  position: relative;
  z-index: 1;
}

.rrhh-cc-tabs {
  margin-top: 1rem !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  padding: 0.25rem !important;
  position: relative;
  z-index: 1;
}

.rrhh-cc-tabs a {
  color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 500 !important;
}

.rrhh-cc-tabs li.is-active a {
  border-color: transparent !important;
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  border-radius: 6px !important;
}

.rrhh-cc-menu {
  background: var(--rrhh-surface);
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 1rem;
  position: sticky;
  top: 1rem;
  transition: box-shadow 0.3s ease;
}

.rrhh-cc-menu:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.rrhh-cc-menu .menu-label {
  color: var(--rrhh-primary);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  margin-top: 0.75rem;
}

.rrhh-cc-menu .menu-label:first-child {
  margin-top: 0;
}

.rrhh-cc-menu a {
  color: #333333;
  font-weight: 500;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  transition: all 0.2s ease;
}

.rrhh-cc-menu a:hover {
  background: rgba(148, 24, 16, 0.08);
  color: var(--rrhh-primary);
}

.rrhh-cc-quick {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.rrhh-cc-quick:hover {
  background: rgba(141, 187, 199, 0.1);
}

.rrhh-cc-quick-tag {
  margin-left: auto;
  background: rgba(141, 187, 199, 0.2) !important;
  color: #2c7a8f !important;
  border: none !important;
  font-weight: 600;
  font-size: 0.75rem;
}

.rrhh-cc-card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  background: var(--rrhh-surface);
}

.rrhh-cc-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.rrhh-cc-card .card-header {
  background: linear-gradient(135deg, var(--rrhh-primary) 0%, #a8453f 100%);
  border: none;
  border-radius: 12px 12px 0 0;
  padding: 1rem 1.25rem;
}

.rrhh-cc-card .card-header-title {
  color: white;
  font-weight: 700;
  font-size: 1rem;
}

.rrhh-cc-card--primary {
  border-left: none;
}

.rrhh-cc-card--primary .card-header {
  background: linear-gradient(135deg, var(--rrhh-primary) 0%, #8dbbc7 100%);
}

.rrhh-cc-metric {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  transition: all 0.3s ease;
  letter-spacing: -0.02em;
}

.rrhh-cc-metric:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: scale(1.02);
}

.rrhh-cc-meta {
  color: var(--rrhh-cc-muted);
  opacity: 1;
}

.rrhh-cc-muted {
  color: var(--rrhh-cc-muted);
}

.rrhh-cc-status {
  border: 1px solid var(--rrhh-cc-border);
}

.rrhh-cc-progress {
  --bulma-progress-bar-background-color: var(--rrhh-primary);
  --bulma-progress-value-background-color: var(--rrhh-primary);
}

.rrhh-cc-notification {
  background: var(--rrhh-surface);
  border: none;
  border-left: 4px solid var(--rrhh-primary);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.rrhh-cc-btn.button.is-primary {
  background: linear-gradient(135deg, #941810 0%, #8dbbc7 100%) !important;
  border: none !important;
  color: white !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
}

.rrhh-cc-btn.button.is-primary:hover {
  filter: none !important;
  box-shadow: 0 8px 16px rgba(148, 24, 16, 0.25) !important;
  transform: translateY(-2px) !important;
}

.rrhh-cc-table th {
  background: linear-gradient(135deg, rgba(148, 24, 16, 0.08) 0%, rgba(141, 187, 199, 0.08) 100%);
  color: var(--rrhh-primary);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
}

.rrhh-cc-message .message-body {
  border-left: 4px solid var(--rrhh-cc-info);
}

.rrhh-cc-note-date {
  color: var(--rrhh-cc-muted);
  opacity: 1;
  font-size: 0.9em;
  margin-left: 0.5rem;
}

.rrhh-cc-box {
  border: 1px solid var(--rrhh-cc-border);
}

/* Employees module */
.rrhh-emp {
  --rrhh-emp-primary: var(--rrhh-primary);
  --rrhh-emp-muted: var(--rrhh-gray);
  --rrhh-emp-border: var(--rrhh-gray-light);
  --rrhh-emp-info: var(--rrhh-info);
}

.rrhh-emp-hero {
  background: linear-gradient(135deg, var(--rrhh-primary) 0%, #8dbbc7 100%);
  border: none;
  border-radius: 12px;
  margin-bottom: 1.2rem;
  padding: 1.2rem 1.25rem;
  box-shadow: 0 6px 20px rgba(148, 24, 16, 0.15);
  position: relative;
  overflow: hidden;
}

.rrhh-emp-hero::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  right: -50px;
  top: -50px;
  z-index: 0;
}

.rrhh-emp-title {
  color: white !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  margin-bottom: 0.15rem !important;
  position: relative !important;
  z-index: 1 !important;
  line-height: 1.3 !important;
}

.rrhh-emp-subtitle {
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.95rem;
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.rrhh-emp-shell {
  display: block;
}

.rrhh-emp-menu {
  background: var(--rrhh-surface);
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 1rem;
  position: sticky;
  top: 1rem;
  transition: box-shadow 0.3s ease;
}

.rrhh-emp-menu:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.rrhh-emp-menu .menu-label {
  color: var(--rrhh-primary);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  margin-top: 0.75rem;
}

.rrhh-emp-menu .menu-label:first-child {
  margin-top: 0;
}

.rrhh-emp-menu a {
  color: #333333;
  font-weight: 500;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  transition: all 0.2s ease;
}

.rrhh-emp-menu a:hover {
  background: rgba(148, 24, 16, 0.08);
  color: var(--rrhh-primary);
}

.rrhh-emp-card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  background: var(--rrhh-surface);
}

.rrhh-emp-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.rrhh-emp-card .card-header {
  background: linear-gradient(135deg, var(--rrhh-primary) 0%, #a8453f 100%);
  border: none;
  border-radius: 12px 12px 0 0;
  padding: 1rem 1.25rem;
}

.rrhh-emp-card .card-header-title {
  color: white;
  font-weight: 700;
  font-size: 1rem;
}

.rrhh-emp-filters {
  background: var(--rrhh-surface);
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 1rem 1.25rem;
}

.rrhh-emp-table th {
  background: linear-gradient(135deg, rgba(148, 24, 16, 0.08) 0%, rgba(141, 187, 199, 0.08) 100%);
  color: var(--rrhh-primary);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
}

.rrhh-emp-status {
  border: 1px solid var(--rrhh-emp-border);
}

.rrhh-emp-btn.button.is-primary {
  background: linear-gradient(135deg, #941810 0%, #8dbbc7 100%) !important;
  border: none !important;
  color: white !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
}

.rrhh-emp-btn.button.is-primary:hover {
  filter: none !important;
  box-shadow: 0 8px 16px rgba(148, 24, 16, 0.25) !important;
  transform: translateY(-2px) !important;
}

.rrhh-emp-muted {
  color: var(--rrhh-emp-muted);
}

.rrhh-emp-kpi {
  border-left: 4px solid var(--rrhh-primary);
}

.rrhh-emp-section-title {
  color: var(--rrhh-primary);
  margin-bottom: 0.35rem;
  font-weight: 700;
}

.rrhh-emp-fieldset {
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 1rem 1.25rem;
  background: var(--rrhh-surface);
}

.rrhh-emp-fieldset legend {
  padding: 0 0.4rem;
  color: var(--rrhh-primary);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
}

.notification.is-info,
.notification.is-success {
  color: var(--rrhh-text);
  border: 1px solid var(--rrhh-border);
  border-left: 4px solid var(--rrhh-info);
}

.tag.is-info,
.tag.is-success {
  color: var(--rrhh-text);
}


/* ===== FUSIONADO DESDE overrides.css ===== */
/* ============================================
   OVERRIDES - Último en cascada (cargar después de theme.css)
   ============================================ */

/* HERO - Sobrescribim todo de Bulma */
.hero.rrhh-cfg-hero,
.hero.rrhh-audit-hero,
.hero.rrhh-employees-hero,
.hero.rrhh-credentials-hero,
.hero.rrhh-dashboard-hero,
.hero.rrhh-vac-hero {
  background: var(--rrhh-primary) !important;
  color: var(--rrhh-bg) !important;
  border-bottom: 0 !important;
  letter-spacing: 0.2px !important;
}

.hero.rrhh-cfg-hero .title,
.hero.rrhh-audit-hero .title,
.hero.rrhh-employees-hero .title,
.hero.rrhh-credentials-hero .title,
.hero.rrhh-dashboard-hero .title,
.hero.rrhh-vac-hero .title,
.hero.rrhh-cfg-hero .subtitle,
.hero.rrhh-audit-hero .subtitle,
.hero.rrhh-employees-hero .subtitle,
.hero.rrhh-credentials-hero .subtitle,
.hero.rrhh-dashboard-hero .subtitle,
.hero.rrhh-vac-hero .subtitle {
  color: var(--rrhh-bg) !important;
}

.hero.rrhh-cfg-hero .breadcrumb a,
.hero.rrhh-audit-hero .breadcrumb a,
.hero.rrhh-employees-hero .breadcrumb a,
.hero.rrhh-credentials-hero .breadcrumb a,
.hero.rrhh-dashboard-hero .breadcrumb a,
.hero.rrhh-vac-hero .breadcrumb a {
  color: var(--rrhh-bg) !important;
  opacity: 0.9;
}

.hero.rrhh-cfg-hero .breadcrumb li.is-active a,
.hero.rrhh-audit-hero .breadcrumb li.is-active a,
.hero.rrhh-employees-hero .breadcrumb li.is-active a,
.hero.rrhh-credentials-hero .breadcrumb li.is-active a,
.hero.rrhh-dashboard-hero .breadcrumb li.is-active a,
.hero.rrhh-vac-hero .breadcrumb li.is-active a {
  opacity: 1;
  font-weight: 700;
}

/* DANGER BUTTONS */
.button.is-danger {
  background: #777777 !important;
  border: none !important;
  color: white !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(119, 119, 119, 0.2) !important;
}

.button.is-danger:hover {
  background: #666666 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(119, 119, 119, 0.3) !important;
}

/* TAGS/BADGES */
.tag.is-success,
.tag.is-success.is-light {
  background: rgba(141, 187, 199, 0.2) !important;
  color: #1a6b7f !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  padding: 0.4rem 0.8rem !important;
}

/* NAVBAR LOGO: larger without taking more navbar space */
.rrhh-body--dashboardish .rrhh-navbar .navbar-brand,
.rrhh-body--dashboardish .rrhh-navbar .rrhh-navbar__brand {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.rrhh-body--dashboardish .rrhh-navbar .navbar-item img.rrhh-brand__logo {
  /* Keep Bulma/layout sizing, scale visually (no distortion) */
  width: min(286px, 52vw) !important;
  height: auto !important;
  max-height: 65px !important;
  max-width: 100% !important;
  object-fit: contain !important;
  transform: scale(1.85);
  transform-origin: left center;
  display: block;
}

@media (max-width: 991px) {
  .rrhh-body--dashboardish .rrhh-navbar .navbar-item img.rrhh-brand__logo {
    width: min(200px, 35vw) !important;
    max-height: 40px !important;
    transform: scale(1.7);
  }
}

/* VACATIONS HISTORY: filters must never overflow */
.rrhh-vacations .rrhh-vac-history-filters {
  width: 100%;
}

.rrhh-vacations .rrhh-vac-history-filters .buttons {
  flex-wrap: wrap;
  justify-content: flex-end;
  width: 100%;
}

.rrhh-vacations .rrhh-vac-history-filters .buttons .button {
  max-width: 100%;
}

.tag.is-danger,
.tag.is-danger.is-light {
  background: rgba(119, 119, 119, 0.2) !important;
  color: #333333 !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  padding: 0.4rem 0.8rem !important;
}

/* SUBTÍTULOS - Control Center */
.rrhh-cc-subtitle,
.rrhh-audit-subtitle,
.rrhh-employees-subtitle,
.rrhh-dashboard-subtitle,
.rrhh-credentials-subtitle {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 0.95rem !important;
  position: relative !important;
  z-index: 1 !important;
  font-weight: 500 !important;
}

/* TABS - Control Center */
.rrhh-cc-tabs,
.rrhh-credentials-tabs,
.rrhh-tabs {
  background: rgba(255, 255, 255, 0.1) !important;
  border: none !important;
  border-radius: 8px !important;
  margin-top: 0.5rem !important;
  padding: 0.5rem !important;
}

.rrhh-cc-tabs .tabs li a,
.rrhh-credentials-tabs .tabs li a,
.rrhh-tabs .tabs li a {
  color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 600 !important;
  border-bottom: 2px solid transparent !important;
  transition: all 0.2s ease !important;
  padding: 0.75rem 1rem !important;
}

.rrhh-cc-tabs .tabs li a:hover,
.rrhh-credentials-tabs .tabs li a:hover,
.rrhh-tabs .tabs li a:hover {
  color: white !important;
  border-bottom-color: rgba(255, 255, 255, 0.5) !important;
}

.rrhh-cc-tabs .tabs li.is-active a,
.rrhh-credentials-tabs .tabs li.is-active a,
.rrhh-tabs .tabs li.is-active a {

  color: white !important;
  border-bottom-color: white !important;
}

/* ============================================
   NO CSS INLINE EN TEMPLATES (auditing)
   ============================================ */

.rrhh-audit-filter-form {
  gap: 1rem;
}

.rrhh-audit-minw-200 {
  min-width: 200px;
}

.rrhh-audit-minw-150 {
  min-width: 150px;
}

.rrhh-audit-filter-actions {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

.rrhh-audit-table-wrap {
  overflow-x: auto;
}

.rrhh-text-primary {
  color: var(--rrhh-primary) !important;
}

.rrhh-audit-empty-message {
  border-left: 4px solid var(--rrhh-info) !important;
  background: var(--rrhh-surface) !important;
  border-color: var(--rrhh-info) !important;
}

.rrhh-audit-empty-message__body {
  color: var(--rrhh-text) !important;
}

/* CREDENTIALS TABLE STYLES */
.rrhh-credentials-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 0 !important;
}

.rrhh-credentials-table thead th {
  color: #941810 !important;
  font-weight: 700 !important;
  padding: 0.75rem 0.875rem !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  background: #f5f5f5 !important;
  border: none !important;
  border-bottom: 2px solid #e0e0e0 !important;
}

.rrhh-credentials-table tbody tr {
  border-bottom: 1px solid #e0e0e0 !important;
  transition: background-color 0.2s ease !important;
}

.rrhh-credentials-table tbody tr:hover {
  background-color: rgba(141, 187, 199, 0.08) !important;
}

.rrhh-credentials-table tbody td {
  padding: 0.75rem 0.875rem !important;
  color: #000 !important;
  font-weight: 500 !important;
  border: none !important;
  font-size: 0.9rem !important;
}

/* Ensure readable (black) text for any audit-style tables inside Credentials pages */
.rrhh-credentials .rrhh-audit-table tbody td,
.rrhh-credentials .rrhh-credentials-table tbody td,
.rrhh-credentials .rrhh-audit-table tbody td a:not(.button),
.rrhh-credentials .rrhh-credentials-table tbody td a:not(.button) {
  color: #000 !important;
}

.rrhh-credentials .rrhh-audit-table tbody td small,
.rrhh-credentials .rrhh-audit-table tbody td em,
.rrhh-credentials .rrhh-credentials-table tbody td small,
.rrhh-credentials .rrhh-credentials-table tbody td em {
  color: #000 !important;
}

.rrhh-credentials .rrhh-audit-table tbody td strong,
.rrhh-credentials .rrhh-credentials-table tbody td strong {
  color: #000 !important;
}

/* CREDENTIALS FILTERS */
.rrhh-credentials-filters h2 {
  color: #333 !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
}

.rrhh-credentials-filters .field {
  margin-bottom: 1rem !important;
}

.rrhh-credentials-filters .label {
  color: #555 !important;
  font-weight: 600 !important;
}

/* AUDIT TABLE STYLES (matching pattern) */
.rrhh-audit-table {
  width: 100% !important;
  border-collapse: collapse !important;
}

.rrhh-audit-table thead th {
  color: #941810 !important;
  font-weight: 700 !important;
  padding: 0.75rem 0.875rem !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  background: #f5f5f5 !important;
  border: none !important;
  border-bottom: 2px solid #e0e0e0 !important;
}

.rrhh-audit-table tbody tr {
  border-bottom: 1px solid #e0e0e0 !important;
}

.rrhh-audit-table tbody tr:hover {
  background-color: rgba(141, 187, 199, 0.08) !important;
}

.rrhh-audit-table tbody td {
  padding: 0.75rem 0.875rem !important;
  color: #444 !important;
  font-size: 0.85rem !important;
}

/* CREDENTIALS - small layout helpers (no inline styles in templates) */
.rrhh-credentials-hero-row {
  gap: 0.75rem;
}

.rrhh-credentials-hero-subtitle {
  margin-bottom: 0 !important;
}

.rrhh-credentials-hero-actions {
  margin-bottom: 0 !important;
}

.rrhh-credentials-perms-list {
  max-height: 420px;
  overflow: auto;
}

/* ============================================
   VACATIONS (moved from static/css/vacations.css)
   Scoped to .rrhh-vacations to avoid side-effects.
   ============================================ */

.rrhh-vacations {
  /* Prevent browser/OS dark mode from turning native controls black */
  color-scheme: light;
}

.rrhh-vacations .rrhh-muted {
  color: #000 !important;
}

.rrhh-vacations .heading,
.rrhh-vacations .help {
  color: #000 !important;
}

.rrhh-vacations .card-header-title,
.rrhh-vacations .label,
.rrhh-vacations .tabs a,
.rrhh-vacations .has-text-grey,
.rrhh-vacations .has-text-grey-light,
.rrhh-vacations .has-text-grey-dark {
  color: #000 !important;
}

.rrhh-vacations.rrhh-vac-shell {
  display: block;
}

.rrhh-vacations .rrhh-vac-section {
  padding-top: 0.25rem;
  padding-left: 0;
  padding-right: 0;
}

.rrhh-vacations .rrhh-vac-tabs a {
  color: #000 !important;
  background: transparent !important;
}

.rrhh-vacations .rrhh-vac-tabs li.is-active a {
  color: var(--rrhh-primary) !important;
  border-bottom-color: var(--rrhh-primary) !important;
  background: var(--rrhh-surface) !important;
}

/* Vacations readability: force solid black text inside content surfaces.
   Excludes buttons/tags/icons to preserve accents. */
.rrhh-vacations .card :where(p, li, td, th, span, div, strong, em, small, a)
  :not(.button):not(.button *):not(.tag):not(.tag *):not(.icon):not(.icon *),
.rrhh-vacations .notification :where(p, li, td, th, span, div, strong, em, small, a)
  :not(.button):not(.button *):not(.tag):not(.tag *):not(.icon):not(.icon *),
.rrhh-vacations .message :where(p, li, td, th, span, div, strong, em, small, a)
  :not(.button):not(.button *):not(.tag):not(.tag *):not(.icon):not(.icon *) {
  color: #000 !important;
  opacity: 1 !important;
}

.rrhh-vacations .message,
.rrhh-vacations .message .message-body,
.rrhh-vacations .notification {
  background: var(--rrhh-surface) !important;
  color: var(--rrhh-text) !important;
}

.rrhh-vacations .button.is-light {
  background: var(--rrhh-surface) !important;
  border-color: var(--rrhh-border) !important;
  color: var(--rrhh-text) !important;
}

/* Modal (avoid Bulma black overlay / dark surfaces) */
.rrhh-vacations .modal-background {
  background-color: rgba(119, 119, 119, 0.65) !important;
}

.rrhh-vacations .modal-card-head,
.rrhh-vacations .modal-card-body,
.rrhh-vacations .modal-card-foot {
  background: var(--rrhh-surface) !important;
  border-color: var(--rrhh-border) !important;
}

/* Native form controls (date/time) should never render with black UI */
.rrhh-vacations input,
.rrhh-vacations select,
.rrhh-vacations textarea {
  color-scheme: light;
}

.rrhh-vacations .message .message-body {
  border-color: var(--rrhh-border) !important;
}

.rrhh-vacations .tabs a,
.rrhh-vacations .tabs li.is-active a {
  background: var(--rrhh-surface) !important;
}

.rrhh-vacations .rrhh-vac-table {
  width: 100% !important;
  border-collapse: collapse !important;
}

.rrhh-vacations .rrhh-vac-table thead th {
  color: var(--rrhh-primary) !important;
  font-weight: 700 !important;
  padding: 0.75rem 0.875rem !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  background: #f5f5f5 !important;
  border: none !important;
  border-bottom: 2px solid #e0e0e0 !important;
}

.rrhh-vacations .rrhh-vac-table tbody tr {
  border-bottom: 1px solid #e0e0e0 !important;
  transition: background-color 0.2s ease !important;
}

.rrhh-vacations .rrhh-vac-table tbody tr:hover {
  background-color: rgba(141, 187, 199, 0.08) !important;
}

.rrhh-vacations .rrhh-vac-table tbody td {
  padding: 0.75rem 0.875rem !important;
  color: #000 !important;
  font-size: 0.9rem !important;
}

.rrhh-vac-hero {
  border-radius: var(--rrhh-radius);
  margin-bottom: 1rem;
}

.rrhh-vac-title {
  font-size: 1.25rem;
  margin-top: 0.25rem;
}

.rrhh-vac-subtitle {
  font-size: 0.95rem;
  opacity: 0.95;
}

.rrhh-vacations .rrhh-vac-pill {
  background: var(--rrhh-surface);
  border: 1px solid var(--rrhh-border);
  color: var(--rrhh-text);
  font-weight: 600;
}

.rrhh-vacations .rrhh-vac-alert {
  background: var(--rrhh-surface) !important;
  color: var(--rrhh-text) !important;
  border: 1px solid var(--rrhh-border) !important;
  border-left: 4px solid var(--rrhh-info) !important;
}

.rrhh-vacations .rrhh-vac-alert--warn {
  border-left-color: var(--rrhh-primary) !important;
}

.rrhh-vacations .rrhh-vac-alert--info {
  border-left-color: var(--rrhh-info) !important;
}

.rrhh-vacations .rrhh-vac-btn {
  background: var(--rrhh-primary) !important;
  border-color: var(--rrhh-primary) !important;
  color: #ffffff !important;
  font-weight: 600;
}

.rrhh-vacations .rrhh-vac-btn:hover {
  filter: brightness(0.95);
}

.rrhh-vacations .rrhh-vac-btn--outline {
  background: var(--rrhh-surface) !important;
  border-color: var(--rrhh-primary) !important;
  color: var(--rrhh-primary) !important;
}

.rrhh-vacations .rrhh-vac-btn--outline:hover {
  background: var(--rrhh-gray-light) !important;
}

.rrhh-vacations .rrhh-vac-outline {
  border: 1px solid var(--rrhh-border) !important;
  box-shadow: none !important;
}

.rrhh-vacations .rrhh-vac-outline .card-header {
  box-shadow: none !important;
}

.rrhh-vacations .rrhh-vac-card {
  border: 1px solid var(--rrhh-border);
  border-radius: var(--rrhh-radius);
  box-shadow: none;
}

.rrhh-vacations .rrhh-vac-card .card-header {
  border-bottom: 1px solid var(--rrhh-border);
}

.rrhh-vacations .rrhh-vac-progress {
  background-color: var(--rrhh-gray-light);
}

.rrhh-vacations .rrhh-vac-progress::-webkit-progress-bar {
  background-color: var(--rrhh-gray-light);
}

.rrhh-vacations .rrhh-vac-progress::-webkit-progress-value {
  background-color: var(--rrhh-primary);
}

.rrhh-vacations .rrhh-vac-progress::-moz-progress-bar {
  background-color: var(--rrhh-primary);
}

.rrhh-vacations .rrhh-vac-kpi {
  border: 1px solid var(--rrhh-border);
  background: var(--rrhh-surface);
}

.rrhh-vacations .rrhh-vac-tag {
  background: var(--rrhh-surface);
  color: var(--rrhh-text);
  border: 1px solid var(--rrhh-info);
}

.rrhh-vacations .rrhh-vac-status {
  border: 1px solid var(--rrhh-border);
  background: var(--rrhh-surface);
  color: var(--rrhh-text);
}

.rrhh-vacations .rrhh-vac-status--submitted {
  border-color: var(--rrhh-info);
  background: var(--rrhh-surface);
}

.rrhh-vacations .rrhh-vac-status--manager_approved {
  border-color: var(--rrhh-primary);
  background: var(--rrhh-surface);
}

.rrhh-vacations .rrhh-vac-status--manager_rejected,
.rrhh-vacations .rrhh-vac-status--hr_rejected,
.rrhh-vacations .rrhh-vac-status--cancelled {
  border-color: var(--rrhh-gray);
  background: var(--rrhh-surface);
}

.rrhh-vacations .rrhh-vac-status--hr_approved {
  border-color: var(--rrhh-info);
  background: var(--rrhh-surface);
}

.rrhh-vacations .rrhh-vac-status--confirmed {
  border-color: var(--rrhh-primary);
  background: var(--rrhh-surface);
}

.rrhh-vacations .rrhh-vac-summary th {
  width: 40%;
}

.rrhh-vacations .rrhh-vac-empty {
  border: 1px dashed var(--rrhh-border);
  background: var(--rrhh-surface);
}

.rrhh-vacations .rrhh-vac-message .icon {
  color: var(--rrhh-primary);
}

.rrhh-vacations .rrhh-vac-actions .button.is-primary {
  background-color: var(--rrhh-primary);
  border-color: var(--rrhh-primary);
}

.rrhh-vacations .rrhh-vac-actions .button.is-primary:hover {
  filter: brightness(0.95);
}

.rrhh-vacations .rrhh-vac-mini {
  border: 1px solid var(--rrhh-border);
  border-radius: var(--rrhh-radius);
  box-shadow: none;
}

.rrhh-vacations .rrhh-vac-replacement {
  border: 1px solid var(--rrhh-border);
  border-radius: var(--rrhh-radius);
  box-shadow: none;
}

.rrhh-vacations .rrhh-vac-tab {
  display: none;
}

.rrhh-vacations .rrhh-vac-tab.is-active {
  display: block;
}

/* ============================================
   EMPLOYEE IMPORT WIZARD (moved from static/css/employees/employee_import.css)
   Scoped to rrhh-import-* classes.
   ============================================ */

.rrhh-import-shell {
  color: var(--rrhh-text-secondary);
  /* Prevent browser/OS dark mode from turning controls/messages black */
  color-scheme: light;
}

.rrhh-import-card {
  border: 1px solid var(--rrhh-soft);
}

.rrhh-import-card .card-header {
  border-bottom: 1px solid var(--rrhh-soft);
}

.rrhh-import-card .card-header-title {
  color: var(--rrhh-primary);
  font-weight: 800;
}

.rrhh-import-steps {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.75rem;
}

.rrhh-import-step {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  background: var(--rrhh-soft);
  border: 1px solid var(--rrhh-soft);
  font-size: 0.85rem;
  line-height: 1;
}

.rrhh-import-step__n {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  background: var(--rrhh-soft);
  color: var(--rrhh-text-secondary);
}

.rrhh-import-step.is-active {
  border-color: var(--rrhh-info);
  background: var(--rrhh-info);
  color: var(--rrhh-white);
}

.rrhh-import-step.is-active .rrhh-import-step__n {
  background: var(--rrhh-white);
  color: var(--rrhh-info);
}

.rrhh-import-step.is-done {
  border-color: var(--rrhh-primary);
  background: var(--rrhh-primary);
  color: var(--rrhh-white);
}

.rrhh-import-step.is-done .rrhh-import-step__n {
  background: var(--rrhh-white);
  color: var(--rrhh-primary);
}

.rrhh-import-help {
  color: var(--rrhh-text-secondary);
}

.rrhh-import-required {
  background: var(--rrhh-primary);
  color: var(--rrhh-white);
  border: 1px solid var(--rrhh-primary);
}

.rrhh-import-info {
  background: var(--rrhh-white);
  color: var(--rrhh-text-secondary);
  border: 1px solid var(--rrhh-info);
}

/* Ensure Bulma's message-body doesn't render with dark theme */
.rrhh-import-shell .message-body {
  background: var(--rrhh-surface) !important;
  color: var(--rrhh-text) !important;
  border-color: var(--rrhh-border) !important;
}

.rrhh-import-shell .message.rrhh-import-info .message-body {
  border-left: 4px solid var(--rrhh-info) !important;
}

/* File input CTA ("Seleccionar archivo") should never be black */
.rrhh-import-shell .rrhh-import-file .file-cta {
  background: var(--rrhh-surface) !important;
  border-color: var(--rrhh-border) !important;
  color: var(--rrhh-text) !important;
}

.rrhh-import-shell .rrhh-import-file .file-cta:hover {
  background: var(--rrhh-gray-light) !important;
}

.rrhh-import-shell .rrhh-import-file .file-icon {
  color: var(--rrhh-primary) !important;
}

/* Form controls inside the wizard (step2 mapping, etc.) */
.rrhh-import-shell .input,
.rrhh-import-shell .textarea,
.rrhh-import-shell .select select {
  background: var(--rrhh-surface) !important;
  color: var(--rrhh-text) !important;
  border-color: var(--rrhh-border) !important;
}

.rrhh-import-shell .input::placeholder,
.rrhh-import-shell .textarea::placeholder {
  color: var(--rrhh-text-secondary) !important;
}

.rrhh-import-table {
  width: 100%;
}

.rrhh-import-table th {
  color: var(--rrhh-primary);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
}

.rrhh-import-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.rrhh-import-actions--end {
  justify-content: flex-end;
}

.button.rrhh-import-btn-primary {
  background-color: var(--rrhh-primary) !important;
  border-color: var(--rrhh-primary) !important;
  color: var(--rrhh-white) !important;
  font-weight: 800;
}

.button.rrhh-import-btn-primary:hover,
.button.rrhh-import-btn-primary:focus {
  background-color: var(--rrhh-primary) !important;
  border-color: var(--rrhh-primary) !important;
  color: var(--rrhh-white) !important;
}

.button.rrhh-import-btn-secondary {
  background-color: var(--rrhh-text-secondary) !important;
  border-color: var(--rrhh-text-secondary) !important;
  color: var(--rrhh-white) !important;
  font-weight: 700;
}

.button.rrhh-import-btn-secondary:hover,
.button.rrhh-import-btn-secondary:focus {
  background-color: var(--rrhh-text-secondary) !important;
  border-color: var(--rrhh-text-secondary) !important;
  color: var(--rrhh-white) !important;
}

.rrhh-import-badge-ok {
  background: var(--rrhh-white);
  color: var(--rrhh-text-secondary);
  border: 1px solid var(--rrhh-info);
}

.rrhh-import-badge-bad {
  background: var(--rrhh-white);
  color: var(--rrhh-primary);
  border: 1px solid var(--rrhh-primary);
}

.rrhh-import-modal-card {
  overflow: hidden;
}

.rrhh-import-progress {
  height: 10px;
}

.rrhh-import-shell .rrhh-employees-hero {
  background: linear-gradient(135deg, var(--rrhh-primary) 0%, var(--rrhh-info) 100%) !important;
  box-shadow: none !important;
}

.rrhh-import-shell .rrhh-employees-hero::before {
  display: none !important;
}

.rrhh-import-shell .rrhh-employees-title {
  color: var(--rrhh-white) !important;
  text-shadow: none !important;
}

.rrhh-import-shell .rrhh-employees-subtitle {
  color: var(--rrhh-soft) !important;
  text-shadow: none !important;
}

.rrhh-import-shell .breadcrumb a {
  color: var(--rrhh-soft) !important;
}

.rrhh-import-shell .breadcrumb a:hover {
  color: var(--rrhh-white) !important;
}

.rrhh-import-shell .breadcrumb li + li::before {
  color: var(--rrhh-soft) !important;
}

.rrhh-import-shell .breadcrumb li.is-active a {
  color: var(--rrhh-white) !important;
}

.rrhh-import-shell a {
  color: var(--rrhh-primary) !important;
}

.rrhh-import-shell a:hover {
  color: var(--rrhh-primary) !important;
}

.rrhh-import-shell .label,
.rrhh-import-shell .help {
  color: var(--rrhh-text-secondary) !important;
}

.rrhh-import-shell ul.errorlist,
.rrhh-import-shell ul.errorlist li {
  color: var(--rrhh-primary) !important;
}

.rrhh-import-shell .input,
.rrhh-import-shell .select select,
.rrhh-import-shell textarea {
  border-color: var(--rrhh-soft) !important;
  box-shadow: none !important;
}

.rrhh-import-shell .input:focus,
.rrhh-import-shell .select select:focus,
.rrhh-import-shell textarea:focus {
  border-color: var(--rrhh-info) !important;
  box-shadow: none !important;
}

.rrhh-import-shell hr {
  background-color: var(--rrhh-soft) !important;
}

.rrhh-import-error-text {
  color: var(--rrhh-primary) !important;
}

.rrhh-import-shell .notification,
.rrhh-import-shell .message {
  background: var(--rrhh-white) !important;
  color: var(--rrhh-text-secondary) !important;
  border: 1px solid var(--rrhh-soft) !important;
}

.rrhh-import-shell .notification.rrhh-import-badge-ok {
  border-color: var(--rrhh-info) !important;
}

.rrhh-import-shell .notification.rrhh-import-badge-bad {
  border-color: var(--rrhh-primary) !important;
}

/* CREDENTIALS BADGE STYLES */
/* Badges sólidos institucionales + texto blanco (nunca letra oscura/negra
   sobre color). active = teal, inactive = gris, role = rojo institucional. */
.rrhh-credentials-badge-active {
  background: #1a6b7f !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  padding: 0.4rem 0.75rem !important;
  font-size: 0.85rem !important;
  display: inline-block !important;
}

.rrhh-credentials-badge-inactive {
  background: var(--rrhh-gray) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  padding: 0.4rem 0.75rem !important;
  font-size: 0.85rem !important;
  display: inline-block !important;
}

.rrhh-credentials-badge-role {
  background: var(--rrhh-primary) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 3px !important;
  padding: 0.3rem 0.6rem !important;
  font-size: 0.75rem !important;
  display: inline-block !important;
  margin: 0.2rem 0.25rem 0.2rem 0 !important;
}

/* CREDENTIALS EMPTY STATE */
.rrhh-credentials-empty {
  border-left: 4px solid #8dbbc7 !important;
  background: #f9fafb !important;
  border-radius: 4px !important;
  padding: 1.5rem !important;
  margin-top: 2rem !important;
}

.rrhh-credentials-empty p {
  color: #666666 !important;
  font-size: 0.95rem !important;
  margin: 0 !important;
}

/* CREDENTIALS BUTTONS - MORE SPECIFIC SELECTORS */
.rrhh-credentials .rrhh-credentials-table .button.rrhh-credentials-button-view,
.button.rrhh-credentials-button-view {
  background-color: #8dbbc7 !important;
  border-color: #8dbbc7 !important;
  border: none !important;
  color: white !important;
}

.rrhh-credentials .rrhh-credentials-table .button.rrhh-credentials-button-view:hover,
.rrhh-credentials .rrhh-credentials-table .button.rrhh-credentials-button-view:focus,
.button.rrhh-credentials-button-view:hover,
.button.rrhh-credentials-button-view:focus {
  background-color: #6d9ba8 !important;
  border-color: #6d9ba8 !important;
  color: white !important;
}

.rrhh-credentials .rrhh-credentials-table .button.rrhh-credentials-button-edit,
.button.rrhh-credentials-button-edit {
  background-color: var(--rrhh-primary) !important;
  border-color: var(--rrhh-primary) !important;
  border: none !important;
  color: white !important;
}

.rrhh-credentials .rrhh-credentials-table .button.rrhh-credentials-button-edit:hover,
.rrhh-credentials .rrhh-credentials-table .button.rrhh-credentials-button-edit:focus,
.button.rrhh-credentials-button-edit:hover,
.button.rrhh-credentials-button-edit:focus {
  background-color: var(--rrhh-primary) !important;
  border-color: var(--rrhh-primary) !important;
  color: white !important;
  filter: brightness(0.92);
}

.rrhh-credentials .rrhh-credentials-table .button.rrhh-credentials-button-roles,
.button.rrhh-credentials-button-roles {
  background-color: var(--rrhh-primary) !important;
  border-color: var(--rrhh-primary) !important;
  border: none !important;
  color: white !important;
}

.rrhh-credentials .rrhh-credentials-table .button.rrhh-credentials-button-roles:hover,
.rrhh-credentials .rrhh-credentials-table .button.rrhh-credentials-button-roles:focus,
.button.rrhh-credentials-button-roles:hover,
.button.rrhh-credentials-button-roles:focus {
  background-color: var(--rrhh-primary) !important;
  border-color: var(--rrhh-primary) !important;
  color: white !important;
  filter: brightness(0.92);
}

.rrhh-credentials .rrhh-credentials-table .button.rrhh-credentials-button-delete,
.button.rrhh-credentials-button-delete {
  background-color: var(--rrhh-primary) !important;
  border-color: var(--rrhh-primary) !important;
  border: none !important;
  color: white !important;
}

.rrhh-credentials .rrhh-credentials-table .button.rrhh-credentials-button-delete:hover,
.rrhh-credentials .rrhh-credentials-table .button.rrhh-credentials-button-delete:focus,
.button.rrhh-credentials-button-delete:hover,
.button.rrhh-credentials-button-delete:focus {
  background-color: var(--rrhh-primary) !important;
  border-color: var(--rrhh-primary) !important;
  color: white !important;
  filter: brightness(0.92);
}

.button.rrhh-credentials-button-primary {
  background-color: var(--rrhh-primary) !important;
  border-color: var(--rrhh-primary) !important;
  border: none !important;
  color: white !important;
}

.button.rrhh-credentials-button-primary:hover,
.button.rrhh-credentials-button-primary:focus {
  background-color: var(--rrhh-primary) !important;
  border-color: var(--rrhh-primary) !important;
  color: white !important;
  filter: brightness(0.92);
}

/* Ensure icons stay white too */
.rrhh-credentials .button.rrhh-credentials-button-edit .icon,
.rrhh-credentials .button.rrhh-credentials-button-roles .icon,
.rrhh-credentials .button.rrhh-credentials-button-delete .icon {
  color: #ffffff !important;
}

/* Credentials detail "Acciones" panel: force white text for all children */
.rrhh-credentials-shell .buttons.is-vertical .button.rrhh-credentials-button-edit,
.rrhh-credentials-shell .buttons.is-vertical .button.rrhh-credentials-button-roles,
.rrhh-credentials-shell .buttons.is-vertical .button.rrhh-credentials-button-delete {
  background-color: var(--rrhh-primary) !important;
  border-color: var(--rrhh-primary) !important;
  color: #ffffff !important;
}

.rrhh-credentials-shell .buttons.is-vertical .button.rrhh-credentials-button-edit:hover,
.rrhh-credentials-shell .buttons.is-vertical .button.rrhh-credentials-button-roles:hover,
.rrhh-credentials-shell .buttons.is-vertical .button.rrhh-credentials-button-delete:hover,
.rrhh-credentials-shell .buttons.is-vertical .button.rrhh-credentials-button-edit:focus,
.rrhh-credentials-shell .buttons.is-vertical .button.rrhh-credentials-button-roles:focus,
.rrhh-credentials-shell .buttons.is-vertical .button.rrhh-credentials-button-delete:focus {
  filter: brightness(0.92);
}

.rrhh-credentials-shell .buttons.is-vertical .button.rrhh-credentials-button-edit span,
.rrhh-credentials-shell .buttons.is-vertical .button.rrhh-credentials-button-roles span,
.rrhh-credentials-shell .buttons.is-vertical .button.rrhh-credentials-button-delete span,
.rrhh-credentials-shell .buttons.is-vertical .button.rrhh-credentials-button-edit i,
.rrhh-credentials-shell .buttons.is-vertical .button.rrhh-credentials-button-roles i,
.rrhh-credentials-shell .buttons.is-vertical .button.rrhh-credentials-button-delete i {
  color: #ffffff !important;
}

/* CREDENTIALS SECONDARY (authorized gray) */
.button.rrhh-credentials-button-secondary {
  background-color: #777777 !important;
  border-color: #777777 !important;
  border: none !important;
  color: #ffffff !important;
}

.button.rrhh-credentials-button-secondary:hover,
.button.rrhh-credentials-button-secondary:focus {
  background-color: #666666 !important;
  border-color: #666666 !important;
  color: #ffffff !important;
}

/* CREDENTIALS GROUPS GRID */
.rrhh-credentials-groups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.rrhh-credentials-group-item {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 1rem;
  background: white;
  border: 2px solid #c7c6c6;
  border-left: 4px solid #8dbbc7;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.rrhh-credentials-group-item:hover {
  background: #f8f9fa;
  border-color: #8dbbc7;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.rrhh-credentials-group-item input[type="checkbox"] {
  margin-right: 0.75rem;
  cursor: pointer;
  accent-color: #941810;
}

.rrhh-credentials-group-item span {
  font-weight: 500;
  color: #111111 !important;
}

/* CREDENTIALS: avoid white-on-white in boxes (roles screen, sidebars) */
.rrhh-credentials .section .box,
.rrhh-credentials .section .box p,
.rrhh-credentials .section .box li,
.rrhh-credentials .section .box em,
.rrhh-credentials .section .box strong,
.rrhh-credentials .section .box .title,
.rrhh-credentials .section .box .subtitle,
.rrhh-credentials .section .label,
.rrhh-credentials .section .help {
  color: #333333 !important;
}

.rrhh-credentials .section .box strong {
  color: #111111 !important;
}

/* Keep button text unchanged */
.rrhh-credentials .section .box .button,
.rrhh-credentials .section .box .button * {
  color: inherit !important;
}

/* CREDENTIALS: keep callouts + toggles within RRHH palette */
.rrhh-credentials .rrhh-credentials-toggle-active {
  background: rgba(148, 24, 16, 0.08) !important;
  border-color: var(--rrhh-primary) !important;
  color: var(--rrhh-primary) !important;
}

.rrhh-credentials .message.is-info,
.rrhh-credentials .notification.is-info {
  background: rgba(141, 187, 199, 0.18) !important;
  border: 1px solid rgba(141, 187, 199, 0.55) !important;
  color: #333333 !important;
}

.rrhh-credentials .message.is-info .message-body {
  color: #333333 !important;
}

/* BULMA UTILITY EXTENSIONS */
.is-flex-gap-small {
  gap: 0.5rem !important;
}

/* CREDENTIALS FORM STYLING */
.rrhh-form input[type="text"],
.rrhh-form input[type="email"],
.rrhh-form input[type="password"],
.rrhh-form textarea,
.rrhh-form select {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 0.75rem;
  font-size: 1rem;
}

.rrhh-form input[type="text"]:focus,
.rrhh-form input[type="email"]:focus,
.rrhh-form input[type="password"]:focus,
.rrhh-form textarea:focus,
.rrhh-form select:focus {
  border-color: #8dbbc7;
  box-shadow: 0 0 0 3px rgba(141, 187, 199, 0.1);
  outline: none;
}
.rrhh-form input[type="password"],
.rrhh-form textarea,
.rrhh-form select {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 0.75rem;
  font-size: 1rem;
}

.rrhh-form input[type="text"]:focus,
.rrhh-form input[type="email"]:focus,
.rrhh-form input[type="password"]:focus,
.rrhh-form textarea:focus,
.rrhh-form select:focus {
  border-color: #8dbbc7;
  box-shadow: 0 0 0 3px rgba(141, 187, 199, 0.1);
  outline: none;
}

/* CREDENTIALS FILTER FORM LAYOUT */
.rrhh-credentials-filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
}

.rrhh-credentials-filter-field {
  flex: 1 1 200px;
  margin-bottom: 0 !important;
}

.rrhh-credentials-filter-field .label {
  color: #555 !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
}

.rrhh-credentials-filter-field .select select,
.rrhh-credentials-filter-field .input {
  border-color: #ddd !important;
  border-radius: 4px !important;
}

.rrhh-credentials-filter-field .select select:focus,
.rrhh-credentials-filter-field .input:focus {
  border-color: #8dbbc7 !important;
  box-shadow: 0 0 0 3px rgba(141, 187, 199, 0.1) !important;
}

.rrhh-credentials-filter-buttons {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-left: auto;
  flex-wrap: wrap;
}

/* CREDENTIALS TABLE WRAPPER */
.rrhh-credentials-table-wrapper {
  overflow-x: auto;
  margin-top: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}


/* ===== FUSIONADO DESDE recruitment.css ===== */
/* ==========================================================================
   HOJA DE ESTILOS · MÓDULO DE RECLUTAMIENTO (/reclutamiento/ y /convocatorias/)
   --------------------------------------------------------------------------
   Complementa a theme.css (variables --rrhh-*) y overrides.css. No redefine
   colores: reutiliza las variables institucionales.

   ÍNDICE
     1. Contenedor del módulo
     2. Tarjetas/cajas del flujo
     3. Etiquetas de estado
   ========================================================================== */

/* 1. Contenedor del módulo -------------------------------------------------- */
.rrhh-recruit .title,
.rrhh-recruit .subtitle {
  color: inherit;
}

/* 2. Tarjetas/cajas del flujo ---------------------------------------------- */
.rrhh-recruit .box {
  border: 1px solid var(--rrhh-border, #e5e5e5);
}

/* 3. Etiquetas de estado --------------------------------------------------- */
.rrhh-recruit .tag {
  font-weight: 600;
}


/* ===== FUSIONADO DESDE tasks.css ===== */
/* ==========================================================================
   HOJA DE ESTILOS · MÓDULO DE TAREAS (/tasks/)
   --------------------------------------------------------------------------
   Complementa a theme.css (variables) y overrides.css. Usa las variables
   institucionales --rrhh-* definidas en theme.css; no redefine colores aquí.

   ÍNDICE
     1. Encabezado del módulo (título y subtítulo)
     2. Tarjetas y KPIs
     3. Badges de estado y prioridad
     4. Modales y utilidades
   ========================================================================== */

/* 1. Encabezado del módulo -------------------------------------------------- */
.rrhh-tasks .rrhh-tasks-title {
  margin-bottom: 0.25rem;
}

.rrhh-tasks .rrhh-tasks-subtitle {
  opacity: 0.9;
}

.rrhh-tasks-card,
.rrhh-tasks-kpi {
  border: 1px solid var(--rrhh-border);
  border-radius: var(--rrhh-radius);
}

.rrhh-tasks-hero .rrhh-tasks-kpi {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

.rrhh-tasks-kpi .heading {
  color: rgba(255, 255, 255, 0.85);
}

.rrhh-tasks-kpi .card-content {
  padding: 0.9rem 1rem;
}

.rrhh-tasks-filter-form .input,
.rrhh-tasks-filter-form .select select,
.rrhh-tasks .modal .input,
.rrhh-tasks .modal .textarea,
.rrhh-tasks .modal .select select {
  border-color: var(--rrhh-border);
}

.rrhh-tasks-table-wrap {
  overflow-x: auto;
}

.rrhh-task-title {
  font-weight: 700;
  color: var(--rrhh-primary);
}

/* Status tags */
.rrhh-task-status {
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-weight: 700;
}

.rrhh-task-status--pending {
  background: rgba(255, 255, 255, 0.12);
  color: var(--rrhh-white);
}

.rrhh-task-status--in_progress,
.rrhh-task-status--inprogress {
  background: rgba(141, 187, 199, 0.22);
  color: var(--rrhh-white);
}

.rrhh-task-status--reviewed {
  background: rgba(199, 198, 198, 0.25);
  color: var(--rrhh-white);
}

.rrhh-task-status--done {
  background: rgba(255, 255, 255, 0.2);
  color: var(--rrhh-white);
}

/* In tables, keep tags readable (dark text). */
.rrhh-tasks .table .rrhh-task-status {
  border-color: var(--rrhh-border);
  color: var(--rrhh-text);
}

.rrhh-tasks .table .rrhh-task-status--pending,
.rrhh-tasks .table .rrhh-task-status--done {
  background: rgba(199, 198, 198, 0.22);
}

.rrhh-tasks .table .rrhh-task-status--in_progress,
.rrhh-tasks .table .rrhh-task-status--inprogress {
  background: rgba(141, 187, 199, 0.22);
}

.rrhh-tasks .table .rrhh-task-status--reviewed {
  background: rgba(199, 198, 198, 0.35);
}

/* Priority tags (in table) */
.rrhh-task-priority {
  border: 1px solid var(--rrhh-border);
  font-weight: 700;
}

.rrhh-task-priority--low {
  background: rgba(199, 198, 198, 0.25);
  color: var(--rrhh-text);
}

.rrhh-task-priority--normal {
  background: #ffffff;
  color: var(--rrhh-text);
}

.rrhh-task-priority--high {
  background: rgba(141, 187, 199, 0.22);
  color: var(--rrhh-text);
}

.rrhh-task-priority--urgent {
  background: var(--rrhh-primary);
  color: var(--rrhh-white);
  border-color: var(--rrhh-primary);
}

.rrhh-task-progress {
  border-radius: 999px;
}

.rrhh-task-progress-cell {
  min-width: 170px;
}

.rrhh-task-date {
  background: rgba(199, 198, 198, 0.22);
  border: 1px solid var(--rrhh-border);
  color: var(--rrhh-text);
  font-weight: 700;
}

.rrhh-tasks-actions .button {
  border-color: var(--rrhh-border);
}

.rrhh-tasks-empty {
  border-left: 4px solid var(--rrhh-info);
}

.rrhh-tasks-modal-note {
  border-left: 4px solid var(--rrhh-info);
}

.rrhh-tasks-btn {
  border: 1px solid rgba(255, 255, 255, 0.35);
}

/* Keep table readable in app area */
.rrhh-tasks .table td,
.rrhh-tasks .table th {
  vertical-align: top;
}

.rrhh-tasks .table td {
  color: var(--rrhh-text);
}

.rrhh-tasks .table td .tag {
  white-space: nowrap;
}


/* ==========================================================================
   CAPA FINAL UNIFICADA · BOTONES + RESPONSIVE  (institucional)
   --------------------------------------------------------------------------
   Esta sección va al FINAL de theme.css para ganar siempre la cascada y
   garantizar que NINGÚN botón quede con texto del mismo color que su fondo.

   Paleta (definida arriba en :root):
     --rrhh-primary  #941810  (rojo institucional)
     --rrhh-gray     #777777  (gris secundario)
     --rrhh-info     #8dbbc7  (azul informativo)

   Semántica de botones (replica el look de /credentials/):
     · Secundario (gris + texto blanco): .button por defecto, is-clean,
       is-light, is-white, is-grey.
     · Primario  (rojo + texto blanco): submit, is-primary, is-link,
       is-warning, is-danger.
     · Info      (azul + texto blanco): is-info, is-success.
   Las clases propias .rrhh-credentials-button-* conservan su estilo (mayor
   especificidad), por lo que esta capa no las altera.
   ========================================================================== */

/* --- Secundario: gris institucional + texto blanco ----------------------- */
.button,
.button.is-clean,
.button.is-light,
.button.is-white,
.button.is-grey,
.button.is-grey-light {
  background-color: var(--rrhh-gray) !important;
  border-color: var(--rrhh-gray) !important;
  color: #ffffff !important;
  border-radius: var(--rrhh-radius);
  font-weight: 600;
}

.button:hover,
.button.is-clean:hover,
.button.is-light:hover,
.button.is-white:hover,
.button.is-grey:hover {
  background-color: #666666 !important;
  border-color: #666666 !important;
  color: #ffffff !important;
}

.button:focus,
.button.is-clean:focus,
.button.is-light:focus {
  border-color: var(--rrhh-primary) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* --- Primario: rojo institucional + texto blanco ------------------------- */
.button.is-primary,
.button.is-link,
.button.is-warning,
.button.is-danger,
button[type="submit"],
input[type="submit"].button {
  background-color: var(--rrhh-primary) !important;
  border-color: var(--rrhh-primary) !important;
  color: #ffffff !important;
  border-radius: var(--rrhh-radius);
  font-weight: 600;
}

.button.is-primary:hover,
.button.is-link:hover,
.button.is-warning:hover,
.button.is-danger:hover,
button[type="submit"]:hover {
  filter: brightness(0.92);
  color: #ffffff !important;
}

/* --- Informativo: azul institucional + texto blanco --------------------- */
.button.is-info,
.button.is-success {
  background-color: var(--rrhh-info) !important;
  border-color: var(--rrhh-info) !important;
  color: #ffffff !important;
  border-radius: var(--rrhh-radius);
  font-weight: 600;
}

.button.is-info:hover,
.button.is-success:hover {
  filter: brightness(0.94);
  color: #ffffff !important;
}

/* --- Outline/ghost legible: texto institucional sobre blanco ------------- */
.button.is-outlined {
  background-color: #ffffff !important;
  color: var(--rrhh-primary) !important;
  border-color: var(--rrhh-primary) !important;
}

.button.is-outlined:hover {
  background-color: var(--rrhh-primary) !important;
  color: #ffffff !important;
}

/* --- Íconos y texto interno SIEMPRE heredan el color del botón ----------- */
.button .icon,
.button .icon i,
.button > span {
  color: inherit !important;
}

/* --- Deshabilitado: legible y claramente inactivo ----------------------- */
.button[disabled],
.button:disabled,
.button.is-static {
  background-color: var(--rrhh-gray-light) !important;
  border-color: var(--rrhh-gray-light) !important;
  color: #ffffff !important;
  opacity: 0.85;
  cursor: not-allowed;
}

/* ==========================================================================
   RESPONSIVE GLOBAL (seguridad) — evita desbordes y mejora el uso en móvil
   ========================================================================== */

img {
  max-width: 100%;
  height: auto;
}

/* Tablas anchas: scroll horizontal dentro de sus contenedores conocidos */
.rrhh-audit-table-wrap,
.rrhh-tasks-table-wrap,
.rrhh-credentials-table-wrap,
.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  /* Que los grupos de botones/campos envuelvan en vez de desbordar */
  .field.is-grouped,
  .buttons,
  .rrhh-audit-filter-form,
  .rrhh-audit-filter-actions,
  .rrhh-credentials-hero-row {
    flex-wrap: wrap !important;
  }

  .field.is-grouped > .control {
    margin-bottom: 0.5rem;
  }

  /* Acciones táctiles: botones que ocupen el ancho disponible */
  .rrhh-audit-filter-actions .button,
  .field.is-grouped .button {
    flex: 1 1 auto;
  }

  /* Menos padding en secciones y heros para aprovechar pantalla */
  .section {
    padding: 1.25rem 1rem;
  }

  .hero-body {
    padding: 1.5rem 1rem;
  }

  /* Tablas: tipografía algo menor para que entren mejor */
  .rrhh-audit-table th,
  .rrhh-audit-table td {
    font-size: 0.85rem;
  }

  /* Columnas Bulma: apilar de forma natural ya lo hace Bulma; reforzamos
     que las cajas no se salgan del viewport. */
  .box,
  .notification,
  .message {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 480px) {
  .title {
    font-size: 1.4rem;
  }

  .subtitle {
    font-size: 1rem;
  }
}


/* ==========================================================================
   BARRA DE NAVEGACIÓN · DISEÑO MÓVIL/TABLET (<= 1023px)
   --------------------------------------------------------------------------
   Reemplaza el "todo apretado en una fila" por un menú hamburguesa real:
   solo logo + botón hamburguesa; al tocar, se despliega un panel vertical
   a ancho completo, con ítems grandes, legibles y tocables.
   Esta capa va al FINAL para ganar la cascada sobre las reglas previas.
   ========================================================================== */
@media (max-width: 1023px) {
  /* Fila superior: logo a la izquierda, hamburguesa a la derecha */
  .rrhh-body--dashboardish .rrhh-navbar,
  .rrhh-navbar {
    flex-wrap: nowrap !important;
    align-items: center !important;
    padding: 0.25rem 0.5rem !important;
    position: relative !important;
  }

  .rrhh-body--dashboardish .rrhh-navbar .navbar-brand {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    order: 0 !important;
    padding: 0.15rem 0.25rem !important;
  }

  .rrhh-body--dashboardish .rrhh-navbar .navbar-item img.rrhh-brand__logo {
    width: auto !important;
    max-height: 46px !important;
    max-width: 62vw !important;
  }

  /* Hamburguesa: visible, grande y tocable */
  .rrhh-navbar .navbar-burger,
  .rrhh-body--dashboardish .rrhh-navbar .navbar-burger {
    display: flex !important;
    order: 2 !important;
    margin-left: auto !important;
    height: 3rem !important;
    width: 3rem !important;
    padding: 0 !important;
    color: var(--rrhh-primary) !important;
    flex-shrink: 0 !important;
  }

  /* Panel del menú: oculto por defecto, desplegable cuando .is-active */
  .rrhh-body--dashboardish .rrhh-navbar .navbar-menu {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: var(--rrhh-surface) !important;
    border-bottom: 3px solid var(--rrhh-primary) !important;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.14) !important;
    padding: 0.25rem 0 0.5rem !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    transition: max-height 0.25s ease, opacity 0.2s ease !important;
    z-index: 200 !important;
  }

  .rrhh-body--dashboardish .rrhh-navbar.is-active .navbar-menu,
  .rrhh-body--dashboardish .rrhh-navbar .navbar-menu.is-active {
    max-height: 85vh !important;
    overflow-y: auto !important;
    opacity: 1 !important;
  }

  /* start / end apilados a lo ancho */
  .rrhh-body--dashboardish .rrhh-navbar .navbar-start,
  .rrhh-body--dashboardish .rrhh-navbar .navbar-end {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    flex: 1 1 100% !important;
    gap: 0 !important;
  }

  /* Cada opción: fila completa, tocable y legible */
  .rrhh-body--dashboardish .rrhh-navbar .navbar-item,
  .rrhh-body--dashboardish .rrhh-navbar .navbar-link {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    font-size: 1rem !important;
    padding: 0.8rem 1.25rem !important;
    white-space: normal !important;
    border-bottom: 1px solid var(--rrhh-line-1) !important;
  }

  /* Mostrar SIEMPRE los textos en móvil (no ocultarlos). Se repite el
     selector EXACTO que los ocultaba (navbar-start > item :not(.has-dropdown))
     para igualar su especificidad y, al ir después, ganarle. */
  .rrhh-body--dashboardish .rrhh-navbar .navbar-start > .navbar-item:not(.has-dropdown) span:not(.icon),
  .rrhh-body--dashboardish .rrhh-navbar .navbar-item span:not(.icon),
  .rrhh-body--dashboardish .rrhh-navbar .navbar-link span:not(.icon),
  .rrhh-body--dashboardish .rrhh-navbar .button span:not(.icon) {
    display: inline !important;
  }

  /* Texto institucional legible en el panel (fondo blanco) — nunca blanco */
  .rrhh-body--dashboardish .rrhh-navbar .navbar-menu .navbar-item,
  .rrhh-body--dashboardish .rrhh-navbar .navbar-menu .navbar-link,
  .rrhh-body--dashboardish .rrhh-navbar .navbar-menu .navbar-item span:not(.icon),
  .rrhh-body--dashboardish .rrhh-navbar .navbar-menu .navbar-link span:not(.icon),
  .rrhh-body--dashboardish .rrhh-navbar .navbar-menu .navbar-item .icon,
  .rrhh-body--dashboardish .rrhh-navbar .navbar-menu .navbar-link .icon {
    color: var(--rrhh-text) !important;
  }

  .rrhh-body--dashboardish .rrhh-navbar .navbar-item .icon,
  .rrhh-body--dashboardish .rrhh-navbar .navbar-link .icon {
    margin-right: 0.65rem !important;
    width: 1.25rem !important;
    text-align: center !important;
  }

  /* Submenú de Configuración: desplegado en línea dentro del panel */
  .rrhh-body--dashboardish .rrhh-navbar .navbar-dropdown {
    display: block !important;
    position: static !important;
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 0 0 1.5rem !important;
  }

  /* Controles del extremo (idioma, campana, usuario, logout) */
  .rrhh-body--dashboardish .rrhh-navbar .navbar-end .navbar-item {
    width: 100% !important;
    padding: 0.6rem 1.25rem !important;
    border-bottom: 1px solid var(--rrhh-line-1) !important;
  }

  /* Botones del extremo: re-mostrados, a ancho completo y tocables */
  .rrhh-body--dashboardish .rrhh-navbar .button.is-primary,
  .rrhh-body--dashboardish .rrhh-navbar .button.is-light {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    padding: 0.7rem 1rem !important;
    font-size: 1rem !important;
  }

  /* Selector de idioma cómodo a lo ancho */
  .rrhh-body--dashboardish .rrhh-navbar .field.has-addons {
    display: flex !important;
    width: 100% !important;
  }

  .rrhh-body--dashboardish .rrhh-navbar .button.is-static {
    display: inline-flex !important;
    height: auto !important;
    padding: 0.5rem 0.7rem !important;
    font-size: 0.95rem !important;
  }

  .rrhh-body--dashboardish .rrhh-navbar .select,
  .rrhh-body--dashboardish .rrhh-navbar .field.has-addons .select {
    display: block !important;
    flex: 1 1 auto !important;
    height: auto !important;
  }

  .rrhh-body--dashboardish .rrhh-navbar .select select {
    width: 100% !important;
    height: auto !important;
    padding: 0.5rem 0.7rem !important;
    font-size: 0.95rem !important;
  }

  /* Etiqueta de usuario: legible, no oculta */
  .rrhh-body--dashboardish .rrhh-navbar .tag.rrhh-tag {
    display: inline-flex !important;
    width: auto !important;
    height: auto !important;
    padding: 0.45rem 0.8rem !important;
    font-size: 0.95rem !important;
    white-space: normal !important;
  }
}


/* ==========================================================================
   REGLA GLOBAL · BAJO NINGUNA FORMA FONDO NEGRO
   --------------------------------------------------------------------------
   Bulma 1.0 trae un MODO OSCURO automático (@media prefers-color-scheme: dark)
   que vuelve negros los fondos de tabs, cards, dropdowns, tablas, etc. cuando
   el dispositivo está en modo oscuro. Aquí forzamos SIEMPRE el esquema claro
   institucional para que jamás aparezca un fondo negro. Va al final para ganar
   la cascada sobre las variables de Bulma.
   ========================================================================== */
:root {
  color-scheme: light;
  /* Esquema base de Bulma -> siempre claro */
  --bulma-scheme-main: #ffffff;
  --bulma-scheme-main-bis: #fafafa;
  --bulma-scheme-main-ter: #f5f5f5;
  --bulma-background: #ffffff;
  --bulma-background-hover: #f5f5f5;
  --bulma-body-background-color: #ffffff;
  --bulma-card-background-color: #ffffff;
  --bulma-dropdown-content-background-color: #ffffff;
  --bulma-menu-item-hover-background-color: #f5f5f5;
  --bulma-tabs-link-active-background-color: #ffffff;
  /* Texto legible sobre fondos claros */
  --bulma-text: #4a4a4a;
  --bulma-text-strong: #363636;
  --bulma-text-weak: #777777;
}

/* Aunque el dispositivo pida modo oscuro, mantenemos el esquema claro. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light;
    --bulma-scheme-main: #ffffff;
    --bulma-scheme-main-bis: #fafafa;
    --bulma-scheme-main-ter: #f5f5f5;
    --bulma-background: #ffffff;
    --bulma-background-hover: #f5f5f5;
    --bulma-body-background-color: #ffffff;
    --bulma-card-background-color: #ffffff;
    --bulma-dropdown-content-background-color: #ffffff;
    --bulma-tabs-link-active-background-color: #ffffff;
    --bulma-text: #4a4a4a;
    --bulma-text-strong: #363636;
    --bulma-text-weak: #777777;
  }

  /* Red de seguridad: componentes que suelen ennegrecerse en modo oscuro
     se fuerzan a superficie clara con texto institucional legible. */
  html,
  body,
  .box,
  .card,
  .card-content,
  .card-header,
  .modal-card,
  .modal-card-body,
  .modal-card-head,
  .modal-card-foot,
  .dropdown-content,
  .navbar-dropdown,
  .menu,
  .menu-list a,
  .panel,
  .panel-block,
  .message,
  .message-body,
  .notification,
  .table,
  .table th,
  .table td,
  .tabs.is-boxed li.is-active a,
  .tabs li.is-active a,
  .input,
  .textarea,
  .select select {
    background-color: var(--rrhh-surface) !important;
    color: var(--rrhh-text);
  }

  /* Los heros institucionales conservan su degradado (no son negros). */
  .rrhh-cfg-hero,
  .rrhh-audit-hero,
  .rrhh-employees-hero,
  .rrhh-credentials-hero,
  .rrhh-dashboard-hero,
  .rrhh-vac-hero,
  .rrhh-tasks-hero,
  .rrhh-zone-hero,
  .rrhh-auth-hero {
    background: linear-gradient(135deg, var(--rrhh-primary) 0%, #8dbbc7 100%) !important;
  }
}

/* Pestaña activa "boxed" (Tareas, etc.): nunca negra, siempre blanca + rojo */
.tabs.is-boxed li.is-active a {
  background-color: var(--rrhh-surface) !important;
  color: var(--rrhh-primary) !important;
  border-color: var(--rrhh-primary) !important;
  border-bottom-color: transparent !important;
}


/* ==========================================================================
   KPI DE TAREAS · NUNCA TEXTO BLANCO SOBRE BLANCO
   --------------------------------------------------------------------------
   Las tarjetas KPI del hero estaban pensadas con fondo translúcido + texto
   blanco (para leerse sobre el hero oscuro). Al forzar la tarjeta en blanco
   sólido (regla anti-negro), el texto blanco quedaba invisible. Aquí se fijan
   como tarjeta BLANCA con texto institucional oscuro, legible siempre.
   Va al final para ganar la cascada (incluida la red anti-negro con !important).
   ========================================================================== */
.rrhh-tasks-hero .rrhh-tasks-kpi,
.rrhh-tasks .rrhh-tasks-kpi,
.rrhh-tasks-kpi {
  background: var(--rrhh-surface) !important;
  border: 1px solid var(--rrhh-border) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.rrhh-tasks-kpi,
.rrhh-tasks-kpi .card-content,
.rrhh-tasks-kpi .heading,
.rrhh-tasks-kpi p,
.rrhh-tasks-kpi .level-item {
  color: var(--rrhh-text) !important;
}

.rrhh-tasks-kpi .heading {
  font-weight: 700 !important;
  opacity: 1 !important;
}

/* Número (tag) del KPI: rojo institucional sobre fondo claro (legible) */
.rrhh-tasks-kpi .tag.rrhh-task-status,
.rrhh-tasks-kpi .tag.rrhh-task-status--pending,
.rrhh-tasks-kpi .tag.rrhh-task-status--inprogress,
.rrhh-tasks-kpi .tag.rrhh-task-status--in_progress,
.rrhh-tasks-kpi .tag.rrhh-task-status--reviewed,
.rrhh-tasks-kpi .tag.rrhh-task-status--done {
  background: var(--rrhh-gray-light) !important;
  color: var(--rrhh-primary) !important;
  border: 1px solid var(--rrhh-border) !important;
  font-weight: 700 !important;
}

.rrhh-tasks-kpi .rrhh-muted {
  color: var(--rrhh-gray) !important;
}

/* Barra de progreso del KPI: relleno rojo institucional, base gris clara */
.rrhh-tasks-kpi .progress {
  background-color: var(--rrhh-gray-light) !important;
  color: var(--rrhh-primary) !important;
}
.rrhh-tasks-kpi .progress::-webkit-progress-bar {
  background-color: var(--rrhh-gray-light) !important;
}
.rrhh-tasks-kpi .progress::-webkit-progress-value {
  background-color: var(--rrhh-primary) !important;
}
.rrhh-tasks-kpi .progress::-moz-progress-bar {
  background-color: var(--rrhh-primary) !important;
}


/* ==========================================================================
   RECLUTAMIENTO · DISEÑO INSTITUCIONAL
   --------------------------------------------------------------------------
   Hero con degradado institucional (igual que los demás módulos) y ajustes
   de tarjetas/etiquetas dentro de .rrhh-recruit. Sin colores ad-hoc.
   ========================================================================== */
.hero.rrhh-recruit-hero {
  background: linear-gradient(135deg, var(--rrhh-primary) 0%, #8dbbc7 100%) !important;
  border: none !important;
  border-radius: 16px !important;
  margin-bottom: 1.25rem !important;
  padding: 1.25rem 1rem !important;
  box-shadow: 0 8px 24px rgba(148, 24, 16, 0.15) !important;
}

.rrhh-recruit-hero .hero-body {
  padding: 1rem 1.25rem !important;
}

.rrhh-recruit-hero,
.rrhh-recruit-hero .title,
.rrhh-recruit-hero .subtitle,
.rrhh-recruit-hero .breadcrumb a,
.rrhh-recruit-hero .breadcrumb li.is-active a {
  color: #ffffff !important;
}

.rrhh-recruit-hero .breadcrumb a {
  opacity: 0.95;
}

/* Tarjetas/boxes del módulo */
.rrhh-recruit .box {
  border: 1px solid var(--rrhh-border);
  border-radius: var(--rrhh-radius);
}

/* Etiquetas de estado institucionales (rojo) y de tipo de proceso (teal) */
.rrhh-recruit .tag.rrhh-recruit-status {
  background: var(--rrhh-primary) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

.rrhh-recruit .tag.rrhh-recruit-type {
  background: #1a6b7f !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* Tablas del módulo: encabezado de fila legible */
.rrhh-recruit .table th {
  color: var(--rrhh-text);
  width: 38%;
}

/* ==========================================================================
   CREDENCIALES: formulario moderno (crear/editar usuario)
   ========================================================================== */
.rrhh-cred-card {
  border-radius: var(--rrhh-radius);
  box-shadow: var(--rrhh-shadow);
  border: 1px solid var(--rrhh-border);
  background: var(--rrhh-surface);
}
.rrhh-cred-card .card-header {
  box-shadow: none;
  border-bottom: 1px solid var(--rrhh-line-1);
}
.rrhh-cred-card .card-header-title {
  color: var(--rrhh-ink);
  font-weight: 600;
}
.rrhh-cred-groups .column { padding-top: .35rem; padding-bottom: .35rem; }
.rrhh-cred-grouppill {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .55rem .75rem;
  border: 1px solid var(--rrhh-border);
  border-radius: var(--rrhh-radius-sm);
  cursor: pointer;
  transition: border-color 160ms var(--rrhh-ease), background-color 160ms var(--rrhh-ease);
}
.rrhh-cred-grouppill:hover {
  border-color: var(--rrhh-primary);
  background: var(--rrhh-gray-50);
}
.rrhh-cred-grouppill:has(input:checked) {
  border-color: var(--rrhh-primary);
  background: rgba(148, 24, 16, 0.06);
  font-weight: 600;
}
.rrhh-cred-actions {
  display: flex;
  gap: .6rem;
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--rrhh-bg);
  padding: .85rem 0;
  border-top: 1px solid var(--rrhh-line-1);
}
@media (min-width: 769px) {
  .rrhh-cred-help { position: sticky; top: 1rem; }
}

/* Credenciales: detalle clave-valor */
.rrhh-kv__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--rrhh-line-1);
}
.rrhh-kv__row:last-child { border-bottom: 0; }
.rrhh-kv__k {
  color: var(--rrhh-gray-600);
  font-weight: 600;
  white-space: nowrap;
}
.rrhh-kv__k i { color: var(--rrhh-info-strong); margin-right: .35rem; }
.rrhh-kv__v { text-align: right; color: var(--rrhh-ink); }
@media (max-width: 480px) {
  .rrhh-kv__row { flex-direction: column; gap: .15rem; }
  .rrhh-kv__v { text-align: left; }
}

/* ==========================================================================
   EDITOR DE ROLES: permisos en español, agrupados
   ========================================================================== */
.rrhh-perms { max-height: 60vh; overflow-y: auto; padding-right: .4rem; }
.rrhh-perm-group { margin-bottom: 1rem; }
.rrhh-perm-group__title {
  font-weight: 700;
  color: var(--rrhh-ink);
  background: var(--rrhh-gray-100);
  border-left: 3px solid var(--rrhh-primary);
  padding: .35rem .6rem;
  border-radius: var(--rrhh-radius-sm);
  margin-bottom: .5rem;
}
.rrhh-perm-group__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: .5rem;
}
.rrhh-perm-item {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .55rem .7rem;
  border: 1px solid var(--rrhh-border);
  border-radius: var(--rrhh-radius-sm);
  cursor: pointer;
  transition: border-color 160ms var(--rrhh-ease), background-color 160ms var(--rrhh-ease);
}
.rrhh-perm-item:hover { border-color: var(--rrhh-primary); background: var(--rrhh-gray-50); }
.rrhh-perm-item:has(input:checked) {
  border-color: var(--rrhh-primary);
  background: rgba(148, 24, 16, 0.06);
}
.rrhh-perm-item input { margin-top: .2rem; }
.rrhh-perm-item__main { display: flex; flex-direction: column; }
.rrhh-perm-item__label { font-weight: 600; color: var(--rrhh-ink); }
.rrhh-perm-item__desc { font-size: .8rem; color: var(--rrhh-gray-600); line-height: 1.3; }

/* Repositorio: celda de documento (subir/ver/eliminar) */
.rrhh-doc-cell { display: inline-flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.rrhh-doc-form { display: inline-flex; margin: 0; }