/* =============================================================================
   RH360 · Administración — capa de marca sobre Preadmin SaaS
   Identidad de PLATAFORMA (la misma de ayuda.rh360.website), no la de un inquilino.
   Contrastes WCAG medidos (2026-11-02):
     blanco sobre --rh-accent-strong #0A6F63  6.06:1  (botón primario)
     --rh-ink #0E1A2F sobre --rh-bg #F5F6F9   16.09:1
     --rh-muted #586379 sobre blanco           6.04:1
   No usar texto blanco sobre #0B8F7F (4.0:1) ni sobre #17BDAA (2.36:1).
   ========================================================================== */

:root {
  /* Primitivos */
  --rh-navy-900: #0E1A2F;
  --rh-navy-800: #15243F;
  --rh-teal-700: #0A6F63;
  --rh-teal-800: #085A50;
  --rh-teal-600: #0B8F7F;
  --rh-teal-050: #E1F4F0;
  --rh-teal-300: #5EDBC8;
  --rh-gray-050: #F5F6F9;
  --rh-gray-100: #ECEFF4;
  --rh-gray-200: #E0E4EC;
  --rh-gray-600: #586379;
  --rh-red-700: #BE3A2B;
  --rh-red-050: #FCEBE8;
  --rh-amber-700: #8A4B08;
  --rh-amber-050: #FBEEDB;
  --rh-blue-700: #2A58C8;
  --rh-blue-050: #E6EDFC;

  /* Semánticos */
  --rh-bg: var(--rh-gray-050);
  --rh-surface: #FFFFFF;
  --rh-ink: var(--rh-navy-900);
  --rh-muted: var(--rh-gray-600);
  --rh-line: var(--rh-gray-200);
  --rh-accent: var(--rh-teal-600);
  --rh-accent-strong: var(--rh-teal-700);
  --rh-accent-wash: var(--rh-teal-050);
  --rh-danger: var(--rh-red-700);
  --rh-danger-wash: var(--rh-red-050);
  --rh-focus: 0 0 0 3px rgba(11, 143, 127, .35);

  --rh-font-display: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;
  --rh-font-body: 'Instrument Sans', system-ui, sans-serif;

  --rh-space-1: 4px;
  --rh-space-2: 8px;
  --rh-space-3: 12px;
  --rh-space-4: 16px;
  --rh-space-6: 24px;
  --rh-space-8: 32px;
  --rh-radius: 10px;
  --rh-radius-lg: 16px;

  /* Mapeo a variables de Preadmin */
  --primary: var(--rh-teal-700);
  --primary-rgb: 10, 111, 99;
  --primary-hover: var(--rh-teal-800);
  --primary-transparent: var(--rh-teal-050);
  --body-bg: var(--rh-bg);
}

[data-bs-theme=dark] {
  --rh-bg: #0A111F;
  --rh-surface: #111A2C;
  --rh-ink: #E7ECF5;
  --rh-muted: #97A3BA;
  --rh-line: #22304A;
  --rh-accent-wash: rgba(52, 196, 175, .14);
  --rh-danger-wash: rgba(190, 58, 43, .18);
  --primary-transparent: rgba(52, 196, 175, .14);
}

body {
  font-family: var(--rh-font-body);
  background: var(--rh-bg);
  color: var(--rh-ink);
}

h1, h2, h3, .rh-display { font-family: var(--rh-font-display); letter-spacing: -.01em; }

:focus-visible { outline: none; box-shadow: var(--rh-focus); border-radius: 6px; }

.btn-primary {
  --bs-btn-bg: var(--rh-accent-strong);
  --bs-btn-border-color: var(--rh-accent-strong);
  --bs-btn-hover-bg: var(--rh-teal-800);
  --bs-btn-hover-border-color: var(--rh-teal-800);
  --bs-btn-active-bg: var(--rh-teal-800);
  --bs-btn-disabled-bg: var(--rh-accent-strong);
  --bs-btn-disabled-border-color: var(--rh-accent-strong);
  background-color: var(--rh-accent-strong);
  border-color: var(--rh-accent-strong);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus-visible { background-color: var(--rh-teal-800); border-color: var(--rh-teal-800); color: #fff; }

/* ---------- Marca ---------- */
.rh-mark {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: 9px;
  background: var(--rh-teal-700); color: #fff;
  font: 700 15px/1 var(--rh-font-display);
  flex-shrink: 0;
}
.rh-brand { display: inline-flex; align-items: center; gap: var(--rh-space-3); text-decoration: none; }
.rh-brand-name { font: 700 17px/1.1 var(--rh-font-display); color: #fff; }
.rh-brand-sub { display: block; font: 500 12px/1.2 var(--rh-font-body); color: #AAB6CB; }

/* Sidebar con la paleta de plataforma (navy liso, sin degradados de la plantilla) */
.sidenav { background-color: var(--rh-navy-900); background-image: none; }
[data-bs-theme=dark] .sidenav { background-color: #070D18; background-image: none; }
.sidenav .sidemenu-link.active,
.sidenav .sidemenu-link:hover { color: #fff; background: rgba(94, 219, 200, .14); }
.sidenav .sidemenu-link.active i { color: var(--rh-teal-300); }
.appshell.is-collapsed .sidenav .rh-brand-text { display: none; }

/* ---------- Login ---------- */
.rh-login { min-height: 100vh; display: grid; grid-template-columns: 1fr; background: var(--rh-bg); }
.rh-login-hero {
  background: var(--rh-navy-900); color: #F2F5FA;
  padding: var(--rh-space-6) var(--rh-space-4);
}
.rh-login-hero h1 { font-size: 26px; font-weight: 700; margin: var(--rh-space-6) 0 var(--rh-space-2); color: #fff; }
.rh-login-hero p { color: #AAB6CB; margin: 0; font-size: 15px; max-width: 34ch; }
.rh-login-hero .rh-accent-text { color: var(--rh-teal-300); }
.rh-login-points { display: none; }
.rh-login-main { display: flex; align-items: flex-start; justify-content: center; padding: var(--rh-space-8) var(--rh-space-4); }
.rh-login-card {
  width: 100%; max-width: 400px;
  background: var(--rh-surface); border: 1px solid var(--rh-line); border-radius: var(--rh-radius-lg);
  padding: var(--rh-space-8) var(--rh-space-6);
  box-shadow: 0 1px 2px rgba(14, 26, 47, .05), 0 12px 32px -8px rgba(14, 26, 47, .12);
}
.rh-login-card h2 { font-size: 22px; font-weight: 700; margin-bottom: var(--rh-space-1); color: var(--rh-ink); }
.rh-login-card .rh-help { color: var(--rh-muted); font-size: 14px; margin-bottom: var(--rh-space-6); }
.rh-login-card label { font-weight: 600; font-size: 14px; color: var(--rh-ink); }
.rh-login-card .form-control { min-height: 44px; }
.rh-login-card .btn { min-height: 44px; font-weight: 600; }
.rh-pass { position: relative; }
.rh-pass .form-control { padding-right: 48px; }
.rh-pass-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: 0; background: transparent; color: var(--rh-muted); border-radius: 8px;
}
.rh-login-foot { margin-top: var(--rh-space-6); font-size: 13px; color: var(--rh-muted); text-align: center; }
.rh-login-foot a { color: var(--rh-accent-strong); font-weight: 600; }
[data-bs-theme=dark] .rh-login-foot a { color: var(--rh-teal-300); }

@media (min-width: 992px) {
  .rh-login { grid-template-columns: minmax(380px, 44%) 1fr; }
  .rh-login-hero { padding: 48px 56px; display: flex; flex-direction: column; justify-content: center; }
  .rh-login-hero h1 { font-size: 40px; line-height: 1.12; margin-top: 48px; max-width: 14ch; }
  .rh-login-points { display: grid; gap: var(--rh-space-3); margin: var(--rh-space-8) 0 0; padding: 0; list-style: none; color: #C9D3E3; font-size: 15px; }
  .rh-login-points li { display: flex; gap: var(--rh-space-3); align-items: flex-start; }
  .rh-login-points i { color: var(--rh-teal-300); font-size: 18px; margin-top: 2px; }
  .rh-login-main { align-items: center; }
}

/* ---------- Contenido ---------- */
.rh-page-title { font-size: 24px; font-weight: 700; margin: 0; color: var(--rh-ink); }
.rh-page-sub { color: var(--rh-muted); margin: var(--rh-space-1) 0 0; font-size: 14px; }
.rh-card { background: var(--rh-surface); border: 1px solid var(--rh-line); border-radius: var(--rh-radius-lg); }
.rh-card-head { padding: var(--rh-space-4) var(--rh-space-6); border-bottom: 1px solid var(--rh-line); display: flex; flex-wrap: wrap; gap: var(--rh-space-3); align-items: center; justify-content: space-between; }
.rh-card-head h2 { font-size: 16px; font-weight: 700; margin: 0; }
.rh-card-body { padding: var(--rh-space-4) var(--rh-space-6); }

.rh-kpi { padding: var(--rh-space-4) var(--rh-space-6); height: 100%; }
.rh-kpi-label { color: var(--rh-muted); font-size: 13px; font-weight: 600; margin: 0; }
.rh-kpi-value { font: 700 28px/1.2 var(--rh-font-display); margin: var(--rh-space-2) 0 0; color: var(--rh-ink); font-variant-numeric: tabular-nums; }
.rh-kpi-note { color: var(--rh-muted); font-size: 12px; margin: var(--rh-space-1) 0 0; }

.rh-table { width: 100%; margin: 0; }
.rh-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--rh-muted); font-weight: 600; white-space: nowrap; }
.rh-table td, .rh-table th { padding: var(--rh-space-3) var(--rh-space-4); vertical-align: middle; border-color: var(--rh-line); }
.rh-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rh-table tbody tr.rh-row-link { cursor: pointer; }
.rh-table tbody tr.rh-row-link:hover { background: var(--rh-accent-wash); }

.rh-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.rh-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rh-badge-activa { background: var(--rh-teal-050); color: var(--rh-teal-800); }
.rh-badge-prueba { background: var(--rh-blue-050); color: var(--rh-blue-700); }
.rh-badge-suspendida, .rh-badge-bloqueado { background: var(--rh-red-050); color: var(--rh-red-700); }
.rh-badge-neutral, .rh-badge-inactivo { background: var(--rh-gray-100); color: var(--rh-gray-600); }
.rh-badge-admin { background: var(--rh-amber-050); color: var(--rh-amber-700); }
[data-bs-theme=dark] .rh-badge-activa { background: rgba(52, 196, 175, .16); color: #7FE3D3; }
[data-bs-theme=dark] .rh-badge-prueba { background: rgba(122, 156, 240, .16); color: #A9C0F7; }
[data-bs-theme=dark] .rh-badge-suspendida, [data-bs-theme=dark] .rh-badge-bloqueado { background: rgba(243, 167, 157, .14); color: #F3A79D; }
[data-bs-theme=dark] .rh-badge-neutral, [data-bs-theme=dark] .rh-badge-inactivo { background: rgba(151, 163, 186, .14); color: #C3CCDB; }
[data-bs-theme=dark] .rh-badge-admin { background: rgba(240, 180, 90, .14); color: #F2C98A; }

.rh-dl { display: grid; grid-template-columns: 1fr auto; gap: var(--rh-space-2) var(--rh-space-4); margin: 0; }
.rh-dl dt { color: var(--rh-muted); font-weight: 500; font-size: 14px; }
.rh-dl dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.rh-dl .rh-dl-total { border-top: 1px solid var(--rh-line); padding-top: var(--rh-space-2); font-size: 16px; }

/* Estados: carga / error / vacío */
.rh-state { text-align: center; padding: var(--rh-space-8) var(--rh-space-4); color: var(--rh-muted); }
.rh-state > i { font-size: 32px; display: block; margin-bottom: var(--rh-space-3); color: var(--rh-muted); }
.rh-state strong { display: block; color: var(--rh-ink); font-size: 16px; margin-bottom: var(--rh-space-1); }
.rh-state-error > i { color: var(--rh-danger); }
.rh-skel { background: linear-gradient(90deg, var(--rh-gray-100) 25%, var(--rh-gray-200) 50%, var(--rh-gray-100) 75%); background-size: 200% 100%; animation: rh-skel 1.3s ease-in-out infinite; border-radius: 8px; height: 16px; }
[data-bs-theme=dark] .rh-skel { background: linear-gradient(90deg, #17223A 25%, #1F2C47 50%, #17223A 75%); background-size: 200% 100%; }
.rh-skel-kpi { height: 92px; border-radius: var(--rh-radius-lg); }
.rh-skel-row { height: 40px; margin-bottom: var(--rh-space-2); }
@keyframes rh-skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .rh-skel { animation: none; } }

.rh-alert { border-radius: var(--rh-radius); padding: var(--rh-space-3) var(--rh-space-4); font-size: 14px; display: flex; gap: var(--rh-space-2); align-items: flex-start; }
.rh-alert-error { background: var(--rh-danger-wash); color: var(--rh-danger); }
[data-bs-theme=dark] .rh-alert-error { color: #F3A79D; }
.rh-alert-info { background: var(--rh-accent-wash); color: var(--rh-accent-strong); }
[data-bs-theme=dark] .rh-alert-info { color: var(--rh-teal-300); }

.rh-toolbar { display: flex; flex-wrap: wrap; gap: var(--rh-space-2); }
.rh-toolbar .form-control, .rh-toolbar .form-select { min-height: 40px; min-width: 0; }
.rh-search { flex: 1 1 220px; }
.rh-back { display: inline-flex; align-items: center; gap: 6px; color: var(--rh-muted); text-decoration: none; font-size: 14px; font-weight: 500; margin-bottom: var(--rh-space-2); }
.rh-back:hover { color: var(--rh-accent-strong); }
.rh-user-chip { display: inline-flex; align-items: center; gap: var(--rh-space-2); }
.rh-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--rh-accent-wash); color: var(--rh-accent-strong); font-weight: 700; font-size: 13px; }
[data-bs-theme=dark] .rh-avatar { color: var(--rh-teal-300); }
.rh-hidden { display: none !important; }
.visually-hidden-focusable:focus { position: fixed; top: 8px; left: 8px; z-index: 2000; background: #fff; padding: 8px 12px; border-radius: 8px; }

/* ---------- Correcciones de contraste y adornos de la plantilla (WCAG AA) ----------
   Medido 2026-11-02: etiquetas del menú 3.5:1, --sd-muted 2.6:1, rojo #FF3636 3.6:1. */
:root { --sd-muted: var(--rh-muted); --danger: var(--rh-red-700); --bs-danger: #BE3A2B; --bs-danger-rgb: 190, 58, 43; }
[data-bs-theme=dark] { --sd-muted: var(--rh-muted); --danger: #F3A79D; --bs-danger: #F3A79D; }
.text-muted { color: var(--rh-muted) !important; }
.text-danger, .dropdown-item.text-danger { color: var(--danger) !important; }
.sidemenu .sidemenu-label { color: #97A3BA; }            /* 6.9:1 sobre #0E1A2F */
.sidemenu a.sidemenu-link { color: #D5DCE8; }             /* 12.6:1 */
.sidemenu a.sidemenu-link.active {
  background: rgba(94, 219, 200, .14);
  border: 1px solid rgba(94, 219, 200, .32);
  box-shadow: none;
  backdrop-filter: none;
  color: #fff;
}
.child-menu a.sidemenu-link.active, .backtotop { box-shadow: none; }
.rh-pass .form-control.is-invalid { background-image: none; padding-right: 48px; }

/* Botón secundario neutro (el --secondary de la plantilla es naranja) */
.rh-btn-ghost { border: 1px solid var(--rh-line); background: transparent; color: var(--rh-ink); font-weight: 600; }
.rh-btn-ghost:hover, .rh-btn-ghost:focus-visible { border-color: var(--rh-accent); color: var(--rh-accent-strong); background: var(--rh-accent-wash); }
[data-bs-theme=dark] .rh-btn-ghost:hover { color: #7FE3D3; }
/* Tablas: sin margen inferior ni scroll vertical heredado de la plantilla */
.rh-card .table-responsive { overflow-y: hidden; max-height: none; }
.rh-table { margin-bottom: 0; --bs-table-bg: transparent; }
.rh-table thead th { background: var(--rh-bg); }
.rh-table td { color: var(--rh-ink); }
/* Móvil (≤575px): cifras de KPI más compactas para que el monto quepa en la tarjeta */
@media (max-width: 575.98px) {
  .rh-kpi { padding: var(--rh-space-3) var(--rh-space-4); }
  .rh-kpi-value { font-size: 20px; overflow-wrap: anywhere; }
  .rh-table td, .rh-table th { padding: var(--rh-space-3); }
}
@media (max-width: 767.98px) { .rh-col-md { display: none; } }