/* =========================================================
   Talent Tray — Design Tokens
   Manual de Marca 2025
   ========================================================= */

:root {
  /* ---------- Colores oficiales ---------- */
  --tt-cherry:        #b20b2f;
  --tt-rojo-vivo:     #ff2d2b;
  --tt-azul-profundo: #300a6e;
  --tt-azul-electric: #0b00cf;
  --tt-empatia:       #e8e8f9;
  --tt-blanco:        #ffffff;

  /* ---------- Roles semánticos ---------- */
  --color-primary:        var(--tt-azul-electric);
  --color-primary-deep:   var(--tt-azul-profundo);
  --color-primary-soft:   var(--tt-empatia);
  --color-accent:         var(--tt-cherry);
  --color-accent-bright:  var(--tt-rojo-vivo);

  /* ---------- Superficies ---------- */
  --surface-0: #ffffff;
  --surface-1: #f6f6fb;
  --surface-2: #eeeef7;
  --surface-3: var(--tt-empatia);
  --surface-inverse: #0a0820;
  --sidebar-bg:      var(--tt-cherry);

  /* ---------- Texto ---------- */
  --text-strong:  #0a0820;
  --text-body:    #2a2940;
  --text-muted:   #6c6b85;
  --text-soft:    #9a99b3;
  --text-on-dark: #ffffff;
  --text-on-dark-muted: #b9b8d6;

  /* ---------- Bordes ---------- */
  --border-soft: #e6e6f0;
  --border-mid:  #d2d2e2;
  --border-strong: #0a0820;

  /* ---------- Estado ---------- */
  --state-success: #1f8a5b;
  --state-success-soft: #e3f5ec;
  --state-warning: #c97a06;
  --state-warning-soft: #fdf1dc;
  --state-danger:  var(--tt-cherry);
  --state-danger-soft: #fce4e9;
  --state-info:    var(--tt-azul-electric);
  --state-info-soft: var(--tt-empatia);

  /* ---------- Tipografía ---------- */
  --font-display: "Bebas Neue", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Roboto", "Helvetica Neue", Arial, sans-serif;

  /* Escala */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;

  /* Espaciado */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;

  /* Radios */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Sombras */
  --shadow-xs: 0 1px 2px rgba(10, 8, 32, 0.05);
  --shadow-sm: 0 2px 6px rgba(10, 8, 32, 0.06);
  --shadow-md: 0 8px 24px rgba(10, 8, 32, 0.08);
  --shadow-lg: 0 18px 48px rgba(10, 8, 32, 0.12);
  --shadow-focus: 0 0 0 4px rgba(11, 0, 207, 0.18);

  /* Layout */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 76px;
  --topbar-h: 68px;

  /* Motion */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;

  /* ---------- Bootstrap overrides ----------
     Reasignamos las variables de Bootstrap para que cualquier
     componente (.btn, .badge, .alert, .form-*) hable Talent Tray. */
  --bs-primary:        var(--tt-azul-electric);
  --bs-primary-rgb:    11, 0, 207;
  --bs-secondary:      var(--tt-azul-profundo);
  --bs-secondary-rgb:  48, 10, 110;
  --bs-danger:         var(--tt-cherry);
  --bs-danger-rgb:     178, 11, 47;
  --bs-success:        #1f8a5b;
  --bs-success-rgb:    31, 138, 91;
  --bs-warning:        #c97a06;
  --bs-warning-rgb:    201, 122, 6;
  --bs-info:           var(--tt-azul-electric);
  --bs-info-rgb:       11, 0, 207;
  --bs-light:          var(--tt-empatia);
  --bs-light-rgb:      232, 232, 249;
  --bs-dark:           #0a0820;
  --bs-dark-rgb:       10, 8, 32;

  --bs-body-font-family: var(--font-body);
  --bs-body-font-size:   var(--fs-14);
  --bs-body-color:       var(--text-body);
  --bs-body-bg:          var(--surface-1);
  --bs-border-color:     var(--border-soft);
  --bs-border-radius:    var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-link-color:       var(--color-primary);
  --bs-link-hover-color: var(--color-primary-deep);
  --bs-focus-ring-color: rgba(11, 0, 207, 0.18);
}
/* =========================================================
   Base — Reset suave + Typography
   (Bootstrap aplica su propio reboot; aquí refinamos)
   ========================================================= */

html, body { height: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--text-body);
  background: var(--surface-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Tipografía display (Bebas) ---------- */
h1, h2, h3, .h1, .h2, .h3,
.h-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text-strong);
  line-height: 1.1;
}
h1, .h1 { font-size: var(--fs-40); }
h2, .h2 { font-size: var(--fs-32); }
h3, .h3 { font-size: var(--fs-24); }

h4, h5, h6, .h4, .h5, .h6 {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--text-strong);
  line-height: 1.3;
}
h4, .h4 { font-size: var(--fs-18); }
h5, .h5 { font-size: var(--fs-16); }
h6, .h6 { font-size: var(--fs-14); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-13);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.text-strong { color: var(--text-strong) !important; }
.text-soft   { color: var(--text-soft) !important; }
small, .small { font-size: var(--fs-13); }

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-deep); }

::selection { background: var(--tt-empatia); color: var(--tt-azul-profundo); }

/* ---------- Scrollbar ---------- */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-mid);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-soft); background-clip: padding-box; }

/* ---------- Bootstrap component refinements ---------- */
.btn {
  font-weight: 500;
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn:focus-visible { box-shadow: var(--shadow-focus) !important; }
.btn-primary { background-color: var(--color-primary); border-color: var(--color-primary); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--color-accent); border-color: var(--color-accent); }
.btn-outline-primary { color: var(--color-primary); border-color: var(--color-primary); }
.btn-outline-primary:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.btn-outline-secondary { color: var(--text-body); border-color: var(--border-mid); }
.btn-outline-secondary:hover { background: var(--surface-2); color: var(--text-strong); border-color: var(--border-mid); }
.btn-light { background: var(--surface-2); border-color: var(--surface-2); color: var(--text-body); }
.btn-light:hover { background: var(--surface-3); border-color: var(--surface-3); color: var(--color-primary-deep); }
.btn-icon {
  width: 38px; height: 38px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  background: transparent; border: 0;
  border-radius: var(--radius-sm);
}
.btn-icon:hover { background: var(--surface-2); color: var(--text-strong); }

.form-control, .form-select {
  border-radius: var(--radius-sm);
  border-color: var(--border-mid);
  font-size: var(--fs-14);
  padding: 9px 14px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}
.form-control::placeholder { color: var(--text-soft); }

.dropdown-menu {
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  font-size: var(--fs-14);
}
.dropdown-item { border-radius: var(--radius-xs); padding: 8px 10px; }
.dropdown-item:active { background: var(--color-primary); }
.dropdown-item:hover { background: var(--surface-1); color: var(--text-strong); }

.badge { font-weight: 500; padding: 5px 10px; border-radius: var(--radius-pill); }
.bg-primary-soft { background: var(--state-info-soft) !important; color: var(--color-primary-deep) !important; }
.bg-success-soft { background: var(--state-success-soft) !important; color: var(--state-success) !important; }
.bg-warning-soft { background: var(--state-warning-soft) !important; color: var(--state-warning) !important; }
.bg-danger-soft  { background: var(--state-danger-soft)  !important; color: var(--state-danger) !important; }
.bg-empatia      { background: var(--tt-empatia) !important; color: var(--color-primary-deep) !important; }

.table { color: var(--text-body); --bs-table-hover-bg: var(--surface-1); margin-bottom: 0; }
.table > :not(caption) > * > * { padding: 14px var(--sp-5); border-bottom-color: var(--border-soft); }
.table thead th {
  font-size: var(--fs-12); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted);
  background: var(--surface-1);
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
}

.nav-tabs { border-bottom-color: var(--border-soft); gap: 4px; }
.nav-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-weight: 500;
  border-radius: 0;
  padding: 10px 14px;
  margin-bottom: -1px;
}
.nav-tabs .nav-link:hover { color: var(--text-strong); border-color: transparent; }
.nav-tabs .nav-link.active {
  color: var(--color-primary-deep);
  border-bottom-color: var(--color-primary);
  background: transparent;
}

.progress { background: var(--surface-2); border-radius: 999px; height: 6px; }
.progress-bar { background: var(--color-primary); }

.form-check-input:checked { background-color: var(--color-primary); border-color: var(--color-primary); }
.form-check-input:focus { border-color: var(--color-primary); box-shadow: var(--shadow-focus); }

.page-item.active .page-link { background-color: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.page-link { color: var(--color-primary); }
.page-link:hover { color: var(--color-primary-deep); }

.alert-primary { background: var(--state-info-soft); color: var(--color-primary-deep); border-color: transparent; border-radius: var(--radius-md); }

/* =========================================================
   Login page
   ========================================================= */

.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Panel izquierdo — hero */
.login-hero {
  background: var(--tt-cherry);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px 56px;
  position: relative;
  overflow: hidden;
}

.login-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 80% 110%, rgba(10,8,32,.40) 0%, transparent 65%),
    radial-gradient(ellipse 55% 50% at -10% -5%,  rgba(255,45,43,.30) 0%, transparent 70%);
  pointer-events: none;
}

.login-hero__brand img {
  height: 36px;
  filter: brightness(0) invert(1);
}

.login-hero__body {
  position: relative;
  z-index: 1;
}

.login-hero__eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-13);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 16px;
}

.login-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.5rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.05;
  margin-bottom: 24px;
}

.login-hero__title span {
  color: rgba(255,255,255,.65);
}

.login-hero__desc {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  color: rgba(255,255,255,.75);
  max-width: 380px;
  line-height: 1.75;
}

/* Marcas de agua */
.login-hero__wm {
  position: absolute;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  filter: brightness(0) invert(1);
}

.login-hero__wm--isotipo {
  width: 420px;
  right: -80px;
  bottom: -60px;
  opacity: 0.07;
  transform: rotate(-12deg);
}

.login-hero__wm--logo {
  width: 260px;
  left: 56px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.07;
}

/* Pie del hero */
.login-hero__footer {
  position: relative;
  z-index: 1;
}

.login-hero__copy {
  font-size: var(--fs-12);
  color: rgba(255,255,255,.40);
  letter-spacing: 0.05em;
}

/* Panel derecho — formulario */
.login-form-panel {
  background: var(--surface-0);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
}

.login-box {
  width: 100%;
  max-width: 420px;
}

/* Logo sobre el formulario */
.login-form-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}

.login-form-brand img {
  height: 52px;
  filter: brightness(0) saturate(100%) invert(14%) sepia(100%) saturate(4000%) hue-rotate(333deg);
}

.login-box__header {
  text-align: center;
  margin-bottom: 36px;
}

.login-box__welcome {
  font-size: var(--fs-13);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.login-box__title {
  font-family: var(--font-display);
  font-size: var(--fs-32);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text-strong);
  line-height: 1.1;
  margin-bottom: 8px;
}

.login-box__subtitle {
  font-size: var(--fs-14);
  color: var(--text-muted);
}

/* Input con ícono */
.input-field {
  position: relative;
  margin-bottom: 20px;
}

.input-field label {
  display: block;
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--text-body);
  margin-bottom: 7px;
}

.input-field .input-wrap {
  position: relative;
}

.input-field .input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  font-size: 18px;
  pointer-events: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.input-field .form-control {
  padding-left: 44px;
}

.input-field .input-wrap:focus-within .input-icon {
  color: var(--color-primary);
}

.input-field .btn-password {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  color: var(--text-soft);
  cursor: pointer;
  border-radius: var(--radius-xs);
  line-height: 1;
  transition: color var(--dur-fast) var(--ease-out);
}

.input-field .btn-password:hover { color: var(--text-strong); }

.input-field .form-control.has-toggle { padding-right: 44px; }

/* Opciones de sesión */
.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}

.login-options .form-check-label {
  font-size: var(--fs-13);
  color: var(--text-muted);
}

.login-options a {
  font-size: var(--fs-13);
  font-weight: 500;
}

/* Botón de ingreso */
.btn-login {
  width: 100%;
  padding: 13px 20px;
  font-size: var(--fs-15);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Separador */
.login-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 28px 0;
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-soft);
}

.login-divider span {
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-soft);
  white-space: nowrap;
}

/* Botones SSO */
.btn-sso {
  width: 100%;
  padding: 11px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: var(--fs-14);
  font-weight: 500;
  border: 1.5px solid var(--border-mid);
  border-radius: var(--radius-sm);
  background: var(--surface-0);
  color: var(--text-body);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  cursor: pointer;
}

.btn-sso:hover {
  background: var(--surface-1);
  border-color: var(--border-strong);
}

.btn-sso .icon { font-size: 20px; color: var(--color-primary); }

/* Mensaje de error */
.login-error {
  display: none;
  background: var(--state-danger-soft);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: var(--fs-13);
  color: var(--state-danger);
  margin-bottom: 20px;
  gap: 10px;
  align-items: flex-start;
}

.login-error.is-visible { display: flex; }

/* Pie del formulario */
.login-box__footer {
  margin-top: 32px;
  text-align: center;
}

.login-box__footer p {
  font-size: var(--fs-13);
  color: var(--text-muted);
  margin: 0;
}

.login-box__footer a { font-weight: 500; }

/* ---- Responsive login ---- */
@media (max-width: 767.98px) {
  .login-page {
    grid-template-columns: 1fr;
  }

  .login-hero {
    display: none;
  }

  .login-form-panel {
    min-height: 100vh;
    padding: 48px 28px;
    align-items: flex-start;
  }

  .login-box { max-width: 100%; }
}

/* =========================================================
   Dashboard Cliente
   ========================================================= */

.dc-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-7) var(--sp-5);
  background: linear-gradient(135deg, var(--color-primary-deep) 0%, var(--color-primary) 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--sp-6);
}
.dc-hero__number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 6rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: #fff;
}
.dc-hero__label {
  display: block;
  font-size: var(--fs-13);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-top: var(--sp-2);
}

.dc-metric {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  height: 100%;
}
.dc-metric__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}
.dc-metric__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--surface-2);
  color: var(--text-muted);
}
.dc-metric__title {
  font-family: var(--font-display);
  font-size: var(--fs-13);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.25;
  flex: 1;
}
.dc-metric__value {
  font-family: var(--font-display);
  font-size: var(--fs-40);
  line-height: 1;
  color: var(--text-strong);
}
.dc-metric__sub {
  font-size: var(--fs-12);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.dc-metric__alert {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-12);
  font-weight: 500;
}
.dc-metric--success .dc-metric__icon  { background: rgba(31,138,91,.13);  color: var(--state-success); }
.dc-metric--success .dc-metric__value { color: var(--state-success); }
.dc-metric--warning .dc-metric__icon  { background: rgba(201,122,6,.13);  color: var(--state-warning); }
.dc-metric--warning .dc-metric__value { color: var(--state-warning); }
.dc-metric--danger  .dc-metric__icon  { background: rgba(178,11,47,.13);  color: var(--state-danger); }
.dc-metric--danger  .dc-metric__value { color: var(--state-danger); }
.dc-metric--primary .dc-metric__icon  { background: var(--color-primary-soft); color: var(--color-primary); }
.dc-metric--primary .dc-metric__value { color: var(--color-primary); }

.dc-radar { width: 90px; height: 90px; align-self: center; }

.dc-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5);
  height: 100%;
  min-height: 200px;
  background: linear-gradient(150deg, var(--color-accent) 0%, #8a0724 100%);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.dc-cta:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); text-decoration: none; }
.dc-cta__add {
  width: 56px; height: 56px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dc-cta__title {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.2;
}
.dc-cta__icon-cal { color: rgba(255,255,255,.55); font-size: 30px; }

.dc-cancel { border-left: 4px solid var(--state-danger) !important; }
.dc-cancel__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
}
.dc-cancel__icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-pill);
  background: rgba(178,11,47,.13);
  color: var(--state-danger);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dc-cancel__title {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--state-danger);
  line-height: 1.1;
}
.dc-cancel__sub { font-size: var(--fs-12); color: var(--text-muted); margin-top: 2px; }

.dc-panorama { display: flex; }
.dc-panorama-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-4);
}
.dc-panorama-panel + .dc-panorama-panel { border-left: 1px solid var(--border-soft); }
.dc-panorama-panel__icon {
  width: 60px; height: 60px;
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
}
.dc-panorama-panel__title {
  font-family: var(--font-display);
  font-size: var(--fs-14);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.2;
}
.dc-panorama-panel__count  { font-size: var(--fs-12); color: var(--text-soft); }
.dc-panorama-panel__name   { font-weight: 700; font-size: var(--fs-13); color: var(--text-strong); line-height: 1.3; }
.dc-panorama-panel__detail { font-size: var(--fs-12); color: var(--text-muted); }

@media (max-width: 767px) {
  .dc-panorama { flex-direction: column; }
  .dc-panorama-panel + .dc-panorama-panel { border-left: none; border-top: 1px solid var(--border-soft); }
}

/* =========================================================
   Grid / Listado Personal
   ========================================================= */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-0);
}
.filter-bar__search {
  position: relative;
  flex: 1;
  min-width: 220px;
  max-width: 320px;
}
.filter-bar__search .icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  pointer-events: none;
}
.filter-bar__search input { padding-left: 38px; }
.filter-bar__selects { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.filter-bar__select  { min-width: 160px; }
.filter-bar__actions { margin-left: auto; display: flex; gap: var(--sp-2); align-items: center; }

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-0);
  min-height: 0;
  align-items: center;
}
.filter-chips:empty { display: none; }
.filter-chips.has-chips { display: flex; }

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--tt-empatia);
  color: var(--color-primary-deep);
  font-size: var(--fs-12);
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: default;
}
.filter-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 999px;
  background: rgba(48,10,110,.15);
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-primary-deep);
  transition: background var(--dur-fast) var(--ease-out);
  font-size: 12px;
  line-height: 1;
}
.filter-chip__remove:hover { background: rgba(48,10,110,.28); }

.filter-chips__clear {
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--text-muted);
  border: none;
  background: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.filter-chips__clear:hover { color: var(--color-accent); }

.table-empty { text-align: center; padding: 64px 24px; color: var(--text-muted); }
.table-empty .icon { font-size: 48px; color: var(--text-soft); display: block; margin-bottom: 16px; }
.table-empty p { margin: 0; font-size: var(--fs-14); }

.status-dot { width: 7px; height: 7px; border-radius: 999px; display: inline-block; flex-shrink: 0; }
.status-dot--activo     { background: var(--state-success); }
.status-dot--vacaciones { background: var(--state-warning); }
.status-dot--licencia   { background: var(--tt-azul-electric); }
.status-dot--inactivo   { background: var(--text-soft); }

.results-count { font-size: var(--fs-13); color: var(--text-muted); }
.results-count strong { color: var(--text-strong); }

.av-a { background: #e8e8f9; color: #300a6e; }
.av-b { background: #fce4e9; color: #b20b2f; }
.av-c { background: #e3f5ec; color: #1f8a5b; }
.av-d { background: #fdf1dc; color: #c97a06; }

#personalTable {
  --bs-table-bg:            var(--surface-0);
  --bs-table-striped-bg:    var(--surface-1);
  --bs-table-hover-bg:      var(--surface-2);
  --bs-table-striped-color: var(--text-body);
  --bs-table-color:         var(--text-body);
  background: var(--surface-0);
  margin-bottom: 0;
}
#personalTable thead th {
  background: var(--surface-1);
  border-bottom: 2px solid var(--border-soft);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
  white-space: nowrap;
  padding: 12px 16px;
}
#personalTable tbody td { padding: 12px 16px; border-color: var(--border-soft); }

/* =========================================================
   Hoja de Vida
   ========================================================= */

.hv-pcards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
@media (max-width: 1199px) { .hv-pcards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px)  { .hv-pcards { grid-template-columns: repeat(2, 1fr); } }

.hv-pcard {
  background: var(--surface-0);
  border: 2px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  cursor: pointer;
  transition: box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  box-shadow: var(--shadow-xs);
}
.hv-pcard:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); border-color: var(--border-mid); }
.hv-pcard.is-active { border-color: var(--color-primary); background: var(--color-primary-soft); }
.hv-pcard__icon {
  width: 38px; height: 38px;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary-deep);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--sp-2);
}
.hv-pcard.is-active .hv-pcard__icon { background: rgba(11,0,207,.18); }
.hv-pcard__pct {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  line-height: 1;
  color: var(--color-primary);
  letter-spacing: 0.02em;
}
.hv-pcard__name {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: var(--sp-1) 0 var(--sp-2);
  line-height: 1.25;
}
.hv-pcard__sub { font-size: 0.6875rem; color: var(--text-soft); line-height: 1.35; }
.hv-pcard__btn {
  display: block;
  width: 100%;
  margin-top: var(--sp-2);
  padding: 4px;
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary-soft);
  border-radius: var(--radius-sm);
  font-size: 0.6875rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.hv-pcard.is-active .hv-pcard__btn,
.hv-pcard__btn:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.hv-pcard--dashed { border-style: dashed; border-color: var(--border-mid); }

.hv-steps-wrap {
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5) var(--sp-3);
  margin-bottom: var(--sp-5);
  box-shadow: var(--shadow-xs);
}
.hv-steps-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-3); }
.hv-steps-title {
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hv-steps-overall {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  color: var(--color-primary);
  line-height: 1;
  letter-spacing: 0.02em;
}
.hv-steps-bar {
  display: flex;
  height: 8px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  gap: 3px;
  background: var(--surface-2);
  margin-bottom: var(--sp-3);
}
.hv-step-seg { height: 100%; border-radius: var(--radius-pill); transition: flex 0.5s ease, background 0.3s ease; }
.hv-steps-nodes { display: flex; align-items: flex-start; position: relative; }
.hv-step-node { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; cursor: pointer; }
.hv-step-node::after {
  content: '';
  position: absolute;
  top: 14px; left: 50%; right: -50%;
  height: 2px;
  background: var(--border-soft);
  z-index: 0;
  transition: background 0.3s ease;
}
.hv-step-node:last-child::after { display: none; }
.hv-step-node.is-done::after { background: var(--color-primary); }
.hv-step-circle {
  width: 28px; height: 28px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--border-mid);
  background: var(--surface-0);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-12);
  z-index: 1;
  position: relative;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  color: var(--text-muted);
}
.hv-step-node.is-done .hv-step-circle   { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.hv-step-node.is-active .hv-step-circle { border-color: var(--color-primary); color: var(--color-primary); box-shadow: 0 0 0 4px rgba(11,0,207,.1); }
.hv-step-lbl {
  font-size: 10px;
  font-weight: 600;
  margin-top: var(--sp-1);
  text-align: center;
  color: var(--text-soft);
  line-height: 1.25;
}
.hv-step-node.is-done .hv-step-lbl,
.hv-step-node.is-active .hv-step-lbl { color: var(--color-primary); }
.hv-step-pct { font-size: 10px; color: var(--text-soft); }

.hv-section { display: none; }
.hv-section.is-visible { display: block; }

.avatar-upload {
  width: 100px; height: 100px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  border: 3px dashed var(--color-primary);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
  color: var(--color-primary-deep);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.avatar-upload:hover { background: rgba(11,0,207,.12); }
.avatar-upload input { display: none; }
.avatar-upload img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }

.skill-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--sp-2);
}
.skill-check-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  font-size: var(--fs-13);
  color: var(--text-body);
  -webkit-user-select: none;
  user-select: none;
}
.skill-check-item:hover { background: var(--surface-1); }
.skill-check-item.is-selected { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary-deep); font-weight: 500; }
.skill-check-item.is-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.sn-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}
.sn-card__icon {
  width: 38px; height: 38px;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary-deep);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sn-card__info { flex: 1; min-width: 0; }
.sn-card__name { font-size: var(--fs-13); font-weight: 600; color: var(--text-strong); }
.sn-card__url  { font-size: var(--fs-12); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-3);
}
.choice-chip {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-0);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  position: relative;
}
.choice-chip:hover { border-color: var(--border-mid); background: var(--surface-1); }
.choice-chip input { position: absolute; opacity: 0; pointer-events: none; }
.choice-chip__check {
  width: 20px; height: 20px;
  border-radius: var(--radius-xs);
  border: 1.5px solid var(--border-mid);
  background: var(--surface-0);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  margin-top: 10px;
  transition: all var(--dur-fast) var(--ease-out);
}
.choice-chip__check::after {
  content: "";
  width: 6px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--dur-fast) var(--ease-out);
  margin-top: -2px;
}
.choice-chip__body  { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.choice-chip__title { font-weight: 500; font-size: var(--fs-14); color: var(--text-strong); }
.choice-chip__desc  { font-size: var(--fs-12); color: var(--text-muted); line-height: 1.4; }
.choice-chip:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); }
.choice-chip:has(input:checked) .choice-chip__check { border-color: var(--color-primary); background: var(--color-primary); }
.choice-chip:has(input:checked) .choice-chip__check::after { transform: rotate(45deg) scale(1); }
.choice-chip:has(input:checked) .choice-chip__title { color: var(--color-primary-deep); }
.choice-chip.is-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.motiv-chip-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  transition: background var(--dur-fast) var(--ease-out);
}
.motiv-chip-icon .icon { font-size: 20px; color: var(--text-soft); transition: color var(--dur-fast) var(--ease-out); }
.choice-chip:has(input:checked) .motiv-chip-icon        { background: rgba(11,0,207,.14); }
.choice-chip:has(input:checked) .motiv-chip-icon .icon  { color: var(--color-primary); }

.fit-cat-title { font-size: var(--fs-14); font-weight: 600; color: var(--text-strong); margin-bottom: var(--sp-3); line-height: 1.35; }
.fit-option {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  cursor: pointer;
}
.fit-option:hover { background: var(--surface-1); border-color: var(--border-soft); }
.fit-option:has(.form-check-input:checked) { background: var(--color-primary-soft); border-color: var(--color-primary); }
.fit-option .form-check-input:checked { background-color: var(--color-primary); border-color: var(--color-primary); }
.fit-option .form-check-label { font-size: var(--fs-13); color: var(--text-body); cursor: pointer; }
.fit-option:has(.form-check-input:checked) .form-check-label { color: var(--color-primary-deep); font-weight: 500; }

.hv-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  flex-shrink: 0;
  padding: 0;
}
.hv-info-btn:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.hv-info-btn .icon { font-size: 20px; }

.hv-info-modal .modal-header {
  background: linear-gradient(135deg, var(--color-primary-deep) 0%, var(--color-primary) 100%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border: none;
  padding: 1.25rem 1.5rem;
}
.hv-info-modal .modal-title  { font-family: var(--font-display); font-size: var(--fs-20); letter-spacing: 0.05em; color: #fff; }
.hv-info-modal .btn-close    { filter: invert(1); opacity: 0.8; }
.hv-info-modal .modal-content { border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.hv-info-modal .modal-body   { padding: 1.5rem; }

/* ── Modal: estándar global ─────────────────────────────── */
.modal-header {
  background: linear-gradient(135deg, var(--color-primary-deep) 0%, var(--color-primary) 100%);
  border-bottom: none;
  padding: var(--sp-5) var(--sp-6);
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
}
.modal-title {
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-20);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0;
}
.modal-header .btn-close  { filter: invert(1); opacity: 0.85; }
.modal-header .btn-icon   { color: rgba(255, 255, 255, .85); }
.modal-header .btn-icon:hover { color: #fff; background: rgba(255, 255, 255, .15); }
/* Variantes de color (anulan el gradiente primario) */
.modal-header--danger  { background: var(--state-danger); }
.modal-header--success { background: var(--state-success); }
.modal-header--warning { background: var(--state-warning); }
.hv-info-tip {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  margin-bottom: var(--sp-2);
  align-items: flex-start;
}
.hv-info-tip__icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary-deep);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hv-info-tip__text { font-size: var(--fs-13); color: var(--text-body); line-height: 1.5; }
.hv-info-tip__text strong { color: var(--text-strong); display: block; margin-bottom: 2px; font-size: var(--fs-12); letter-spacing: 0.04em; text-transform: uppercase; }
.hv-info-required {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-12);
  color: var(--color-accent);
  background: rgba(178,11,47,.08);
  border: 1px solid rgba(178,11,47,.15);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
}

.hv-table { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.hv-table thead th {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 2px solid var(--border-soft);
  background: var(--surface-1);
  white-space: nowrap;
}
.hv-table tbody tr { transition: background var(--dur-fast) var(--ease-out); }
.hv-table tbody tr:hover { background: var(--surface-1); }
.hv-table tbody td { padding: var(--sp-3); border-bottom: 1px solid var(--border-soft); color: var(--text-body); vertical-align: middle; }
.hv-table tbody tr:last-child td { border-bottom: none; }

/* =========================================================
   Registro (reclutador + candidato)
   ========================================================= */

.register-box { max-width: 540px; }
.candidato-page .register-box { max-width: 500px; }

/* Cuando el form es largo, el panel hace scroll desde arriba */
.register-hero ~ .login-form-panel,
.candidato-page .login-form-panel { align-items: flex-start; }

.row .input-field { margin-bottom: 0; }
#registerForm .input-field,
#registerForm .row { margin-top: 20px; }
#registerForm .row:first-child { margin-top: 0; }
.icon--btn { font-size: 18px; }
.login-error .icon { flex-shrink: 0; margin-top: 1px; }

.select2-container.select2-is-invalid .select2-selection--single { border-color: #dc3545; }
.select2-feedback { display: none; font-size: 0.875em; color: #dc3545; margin-top: 0.25rem; }
.select2-feedback.is-visible { display: block; }

.register-hero { background: var(--tt-azul-electric); }
.register-hero::before {
  background:
    radial-gradient(ellipse 60% 55% at 80% 110%, rgba(10,8,32,.50) 0%, transparent 65%),
    radial-gradient(ellipse 55% 50% at -10% -5%,  rgba(11,0,207,.35) 0%, transparent 70%);
}

.register-box .select2-container--default .select2-selection--single { height: 40px; display: flex; align-items: center; }
.register-box .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: normal; padding-top: 0; padding-bottom: 0;
  display: flex; align-items: center; height: 100%; width: 100%;
}
.register-box .select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; top: 1px; }

.candidato-logo img { filter: none; }
.candidato-page { grid-template-columns: 1fr 1fr; }
.candidato-page .login-form-panel { order: 1; }
.candidato-page .login-hero       { order: 2; }

@media (max-width: 767.98px) {
  .candidato-page .login-form-panel { order: 1; }
  .candidato-page .login-hero       { order: 2; }
}

/* =========================================================
   Shared: Candidatos Listado (reclutado + analista)
   ========================================================= */

.cand-section-title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: var(--color-accent);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.cand-section-title h2 {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  line-height: 1;
}

.cand-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-top: 0;
}
.cand-summary__count { font-size: var(--fs-13); font-weight: 600; color: var(--text-body); display: flex; align-items: center; gap: var(--sp-2); }
.cand-legend { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.cand-legend__item { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-12); color: var(--text-muted); font-weight: 600; }
.cand-legend__dot  { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
@media (max-width: 900px) { .kpi-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .kpi-strip { grid-template-columns: 1fr; } }
.kpi-mini {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
}
.kpi-mini__icon  { width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kpi-mini__body  { flex: 1; min-width: 0; }
.kpi-mini__value { font-family: var(--font-display); font-size: var(--fs-28); line-height: 1; color: var(--text-strong); }
.kpi-mini__label { font-size: var(--fs-12); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; }

.cand-cell   { display: flex; align-items: center; gap: var(--sp-3); min-width: 140px; }
.cand-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-13); font-weight: 700;
  flex-shrink: 0; color: #fff; overflow: hidden;
}
.cand-info { display: flex; flex-direction: column; gap: 3px; }
.cand-name { font-size: var(--fs-13); font-weight: 600; color: var(--text-strong); line-height: 1.2; white-space: nowrap; }

.cand-footer { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border-soft); flex-wrap: wrap; gap: var(--sp-3); }
.cand-footer__info { font-size: var(--fs-12); color: var(--text-muted); }

/* KPI icon / value colour helpers */
.kpi-icon--primary { background: var(--color-primary-soft); color: var(--color-primary); }
.kpi-icon--success { background: var(--state-success-soft); color: var(--state-success); }
.kpi-icon--warning { background: var(--state-warning-soft); color: var(--state-warning); }
.kpi-icon--danger  { background: var(--state-danger-soft);  color: var(--state-danger); }
.kpi-val--success  { color: var(--state-success); }
.kpi-val--warning  { color: var(--state-warning); }
.kpi-val--danger   { color: var(--state-danger); }

/* Shared UI micro-helpers */
.section-icon--white    { color: #fff; font-size: 20px; }
.th-sort-icon           { font-size: 13px; vertical-align: middle; }
.sidebar-avatar--accent { background: var(--color-accent); color: #fff; }
.topbar-avatar--accent  { background: var(--color-accent); color: #fff; }
.text-on-dark-muted     { color: var(--text-on-dark-muted); }
.legend-dot--warning    { background: var(--state-warning); }
.legend-dot--success    { background: var(--state-success); }
.legend-dot--danger     { background: var(--state-danger); }
.legend-icon            { color: var(--text-muted); font-size: 16px; vertical-align: middle; }
.dropdown-icon-sm       { font-size: 15px; }
.dropdown-icon-xs       { font-size: 14px; }
.page-icon              { font-size: 14px; }

/* =========================================================
   Page: Listado Personal Reclutado
   ========================================================= */

.cand-table { border-collapse: collapse; width: 100%; }
.cand-table thead tr { background: var(--surface-1); }
.cand-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 600;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1.5px solid var(--border-mid);
  white-space: nowrap;
}
.cand-table td {
  padding: var(--sp-3) var(--sp-4);
  vertical-align: middle;
  font-size: var(--fs-13);
  color: var(--text-body);
  border-bottom: 1px solid var(--border-soft);
}
.cand-table tbody tr:last-child td { border-bottom: 0; }
.cand-table tbody tr:hover td { background: var(--surface-1); }

.btn-ver-perfil {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--color-accent);
  color: #fff;
  border-radius: var(--radius-xs);
  border: none;
  cursor: pointer;
  line-height: 1.6;
  white-space: nowrap;
  text-decoration: none;
}
.btn-ver-perfil:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

.match-badge { display: inline-flex; align-items: center; justify-content: center; padding: 3px 10px; border-radius: var(--radius-pill); font-size: var(--fs-12); font-weight: 700; min-width: 48px; }
.match-badge--low  { background: var(--state-danger-soft);  color: var(--state-danger); }
.match-badge--mid  { background: var(--state-warning-soft); color: var(--state-warning); }
.match-badge--good { background: var(--state-success-soft); color: var(--state-success); }
.match-badge--top  { background: var(--color-primary-soft); color: var(--color-primary-deep); }

.cand-status { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--radius-xs); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; line-height: 1.5; }
.cand-status--danger  { background: var(--state-danger-soft);  color: var(--state-danger); }
.cand-status--warning { background: var(--state-warning-soft); color: var(--state-warning); }
.cand-status--success { background: var(--state-success-soft); color: var(--state-success); }

.estados-cell { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; min-width: 280px; }
.btn-mensaje  { font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: var(--radius-xs); letter-spacing: 0.04em; }
.btn-agendar  { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-xs); letter-spacing: 0.04em; }
.btn-calificar { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-xs); letter-spacing: 0.04em; }

.interview-popup { min-width: 200px; padding: var(--sp-3); }
.interview-popup__title { font-size: var(--fs-12); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: var(--sp-2); text-align: center; }
.btn-presencial {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  width: 100%; padding: var(--sp-2) var(--sp-3);
  background: var(--color-primary); color: #fff;
  border: none; border-radius: var(--radius-sm);
  font-size: var(--fs-12); font-weight: 600; cursor: pointer; margin-bottom: var(--sp-2);
}
.btn-presencial:hover { background: var(--color-accent); }
.btn-meet {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  width: 100%; padding: var(--sp-2) var(--sp-3);
  background: var(--state-success); color: #fff;
  border: none; border-radius: var(--radius-sm);
  font-size: var(--fs-12); font-weight: 600; cursor: pointer;
}
.btn-meet:hover { background: var(--color-accent); }

.id-cell { font-size: var(--fs-12); color: var(--text-soft); font-family: monospace; white-space: nowrap; }

/* =========================================================
   Page: Listado Personal Analista Selección
   ========================================================= */

.entv-table { border-collapse: collapse; width: 100%; }
.entv-table thead tr { background: var(--surface-1); }
.entv-table th {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-muted);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1.5px solid var(--border-mid);
  white-space: nowrap;
}
.entv-table td {
  padding: var(--sp-3) var(--sp-4);
  vertical-align: middle;
  font-size: var(--fs-13); color: var(--text-body);
  border-bottom: 1px solid var(--border-soft);
}
.entv-table tbody tr:last-child td { border-bottom: 0; }
.entv-table tbody tr:hover td { background: var(--surface-1); }
.entv-table th.col-id { background: var(--color-accent); color: #fff; letter-spacing: 0.1em; }

.entv-id-cell { display: flex; flex-direction: column; gap: 4px; min-width: 90px; }
.entv-id-num  { display: flex; align-items: center; gap: 4px; font-family: monospace; font-size: var(--fs-12); font-weight: 600; color: var(--text-muted); }
.entv-id-star { color: #f59e0b; font-size: 15px; }

.btn-ver-sm {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px 7px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--color-accent); color: #fff;
  border-radius: var(--radius-xs); border: none; cursor: pointer;
  line-height: 1.6; width: fit-content;
}
.btn-ver-sm:hover { background: #7a0924; color: #fff; }

.match-pill-wrap  { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.match-pill-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.match-pill-row   { display: flex; align-items: center; gap: 5px; }
.match-pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 3px 12px; border-radius: var(--radius-pill);
  font-size: var(--fs-12); font-weight: 700; color: #fff; white-space: nowrap; min-width: 46px;
}
.match-pill--top  { background: var(--state-success); }
.match-pill--good { background: var(--color-primary); }
.match-pill--mid  { background: var(--state-warning); }
.match-pill--low  { background: var(--state-danger); }
.match-pill--vlow { background: var(--text-muted); }

.match-toggle { width: 22px; height: 12px; border-radius: var(--radius-pill); background: var(--border-mid); position: relative; flex-shrink: 0; }
.match-toggle::after { content: ''; position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--text-soft); }
.match-toggle--on { background: var(--state-success-soft); }
.match-toggle--on::after { background: var(--state-success); right: auto; left: 2px; }

.estado-entv {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: var(--radius-pill);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap; line-height: 1.3; text-align: center;
}
.estado-entv--pending { background: var(--state-warning-soft); color: var(--state-warning); }
.estado-entv--apto    { background: var(--state-success-soft); color: var(--state-success); }
.estado-entv--noapto  { background: var(--state-danger-soft);  color: var(--state-danger); }
.estado-entv .icon    { font-size: 14px; }

.detalle-entv { display: flex; flex-direction: column; gap: 3px; min-width: 185px; }
.detalle-entv__item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-body); white-space: nowrap; }
.detalle-entv__item .icon { font-size: 13px; color: var(--color-accent); flex-shrink: 0; }

.btn-gestionar {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 14px;
  background: var(--color-accent); color: #fff;
  border: none; border-radius: var(--radius-pill);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  cursor: pointer; white-space: nowrap; line-height: 1.4; text-align: center;
  transition: background .2s;
}
.btn-gestionar:hover { background: #7a0924; }

/* =========================================================
   Modal: Perfil Candidato (listado reclutado)
   ========================================================= */

.perfil-modal .modal-content {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: none;
  box-shadow: 0 24px 64px rgba(0,0,0,.25);
}
.perfil-panel-header {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px 18px;
  background: #7a0924; color: #fff;
  font-family: var(--font-display); font-size: var(--fs-14);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.perfil-panel-header .btn-close { filter: invert(1) grayscale(1) brightness(2); margin-left: auto; opacity: .85; }
.perfil-cand-title-bar {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 8px 18px;
  background: var(--color-accent); color: #fff;
  font-family: var(--font-display); font-size: var(--fs-16);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.perfil-grid { display: grid; grid-template-columns: 210px 1fr 210px; min-height: 520px; }
.perfil-col           { padding: 14px; }
.perfil-col--left     { background: var(--surface-1); border-right: 1px solid var(--border-soft); }
.perfil-col--center   { background: var(--surface-0); }
.perfil-col--right    { background: var(--surface-1); border-left: 1px solid var(--border-soft); }

.perfil-card { border: 1px solid var(--border-soft); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-0); margin-bottom: var(--sp-3); }
.perfil-card:last-child { margin-bottom: 0; }
.perfil-card__title { padding: 6px 12px; background: var(--color-accent); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; }

.perfil-contact { display: flex; flex-direction: column; align-items: center; padding: 12px 10px; gap: 4px; }
.perfil-avatar-lg {
  width: 68px; height: 68px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; color: #fff;
  background: var(--color-accent); margin-bottom: 4px; flex-shrink: 0;
}
.perfil-contact__name-wrap { display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: var(--fs-14); color: var(--text-strong); text-align: center; }
.perfil-contact__id-sub { font-size: var(--fs-12); color: var(--text-muted); }
.perfil-ci-list { width: 100%; margin-top: var(--sp-2); }
.perfil-ci-item { display: flex; align-items: center; gap: 5px; padding: 4px 0; border-bottom: 1px solid var(--border-soft); font-size: 11px; color: var(--text-body); }
.perfil-ci-item:last-child { border-bottom: none; }
.perfil-ci-item .icon { font-size: 14px; color: var(--color-accent); flex-shrink: 0; }
.perfil-ci-label { color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.perfil-ci-val   { color: var(--text-body); font-weight: 500; margin-left: auto; font-size: 11px; }
.perfil-btn-hv {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: var(--sp-3); padding: 5px 14px;
  border: 1.5px solid var(--color-accent); border-radius: var(--radius-pill);
  background: transparent; color: var(--color-accent);
  font-size: 11px; font-weight: 600; cursor: pointer; transition: .2s;
}
.perfil-btn-hv:hover { background: var(--color-accent); color: #fff; }

.perfil-formacion { padding: 8px 12px; }
.perfil-formacion__item { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--border-soft); font-size: 11px; color: var(--text-body); }
.perfil-formacion__item:last-child { border-bottom: none; }

.perfil-date-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 12px; background: var(--surface-1);
  border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  margin-bottom: var(--sp-3); font-size: 11px; color: var(--text-body);
}
.perfil-badge-preq { background: var(--state-success); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }

.perfil-match-inner { display: grid; grid-template-columns: 1fr 175px; gap: 14px; padding: 12px; }
.perfil-match-info p { margin: 0 0 5px; font-size: 11px; }
.perfil-match-label-text { font-weight: 600; color: var(--text-muted); }
.perfil-match-accent { color: var(--color-accent); font-weight: 700; }
.perfil-resumen-title { font-weight: 700; font-size: 11px; text-transform: uppercase; margin: 8px 0 4px; color: var(--text-body); border-bottom: 1px solid var(--border-mid); padding-bottom: 3px; }
.perfil-stats-tbl { width: 100%; border-collapse: collapse; font-size: 11px; }
.perfil-stats-tbl td { padding: 3px 0; border-bottom: 1px solid var(--border-soft); }
.perfil-stats-tbl td:first-child { color: var(--text-muted); font-weight: 500; }
.perfil-stats-tbl td:last-child  { font-weight: 600; text-align: right; }
.perfil-stats-tbl tr:last-child td { border-bottom: none; }
.perfil-chart-side  { display: flex; flex-direction: column; align-items: center; }
.perfil-chart-total { font-size: var(--fs-12); font-weight: 700; color: var(--text-strong); margin-bottom: 6px; }

.perfil-exp-list { padding: 8px 12px; }
.perfil-exp-item { padding: 5px 0; border-bottom: 1px solid var(--border-soft); font-size: 11px; }
.perfil-exp-item:last-child { border-bottom: none; }
.perfil-exp-item strong { color: var(--text-strong); }

.perfil-coment-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; background: var(--color-accent); color: #fff; }
.perfil-coment-title       { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; }
.perfil-coment-badge-label { font-size: 10px; color: rgba(255,255,255,.8); }
.perfil-coment-body  { padding: 10px 12px; }
.perfil-coment-row   { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; }
.perfil-coment-input {
  flex: 1; height: 30px;
  border: 1px solid var(--border-mid); border-radius: var(--radius-sm);
  padding: 0 8px; font-size: 11px; background: var(--surface-0); color: var(--text-body); outline: none;
}
.perfil-coment-input:focus { border-color: var(--color-accent); }
.perfil-dot-btn          { width: 20px; height: 20px; border-radius: 50%; border: none; cursor: pointer; flex-shrink: 0; }
.perfil-dot-btn--yellow  { background: #f59e0b; }
.perfil-dot-btn--green   { background: var(--state-success); }
.perfil-btn-precalif     { font-size: 10px; font-weight: 700; padding: 4px 8px; background: var(--state-success); color: #fff; border: none; border-radius: var(--radius-xs); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; cursor: pointer; }
.perfil-coment-ctx     { font-size: 10px; color: var(--text-muted); margin-bottom: 8px; line-height: 1.4; }
.perfil-coment-warning { color: var(--state-warning); font-weight: 600; }
.perfil-btn-guardar {
  display: block; width: 100%; padding: 7px;
  background: var(--color-accent); color: #fff; border: none;
  border-radius: var(--radius-sm); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em; cursor: pointer; transition: .2s;
}
.perfil-btn-guardar:hover { background: #7a0924; }

.perfil-hist-list { padding: 8px 12px; }
.perfil-hist-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border-soft); }
.perfil-hist-item:last-child { border-bottom: none; }
.perfil-hist-dot       { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }
.perfil-hist-dot--red   { background: var(--state-danger); }
.perfil-hist-dot--green { background: var(--state-success); }
.perfil-hist-text { font-size: 11px; color: var(--text-body); font-weight: 500; line-height: 1.3; }
.perfil-hist-sub  { font-size: 10px; color: var(--text-muted); }

.perfil-filtro-list { padding: 8px 12px; }
.perfil-filtro-item { padding: 6px 0; border-bottom: 1px solid var(--border-soft); }
.perfil-filtro-item:last-child { border-bottom: none; }
.perfil-filtro-q { font-size: 11px; font-weight: 600; color: var(--text-body); margin-bottom: 3px; }
.perfil-filtro-a { font-size: 10px; color: var(--text-muted); line-height: 1.4; }

.perfil-header-icon { font-size: 18px; }
.perfil-star-icon   { color: #f59e0b; }
.perfil-star-sm     { color: #f59e0b; font-size: 15px; }
.perfil-star-xs     { color: #f59e0b; font-size: 12px; }
.perfil-hv-icon     { font-size: 13px; }
.perfil-btn-close   { filter: invert(1) brightness(2); opacity: .85; }
.perfil-text-xs     { font-size: 10px; }
.perfil-match-date  { margin-top: 8px; font-size: 11px; }

/* =========================================================
   Modal: Perfil Analista Selección
   ========================================================= */

.perfil2-modal .modal-content { border-radius: var(--radius-lg); overflow: hidden; border: none; box-shadow: 0 24px 64px rgba(0,0,0,.28); }
.perfil2-header {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; background: #7a0924; color: #fff;
  font-family: var(--font-display); font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.perfil2-namebar {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 16px; background: var(--color-accent); color: #fff;
  font-family: var(--font-display); font-size: 14px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.perfil2-star-gold { color: #f59e0b; }
.perfil2-close-btn { filter: invert(1) brightness(2); opacity: .85; }

.perfil2-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.perfil2-col { padding: 10px; border-right: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 10px; }
.perfil2-col:last-child { border-right: none; }

.perfil2-card { border: 1px solid var(--border-soft); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-0); }
.perfil2-card--grow { flex: 1; }
.perfil2-card__title { padding: 6px 12px; background: var(--color-accent); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; }
.perfil2-section-tag { font-size: 10px; opacity: .8; font-weight: 400; letter-spacing: .04em; }
.perfil2-card__body  { padding: 10px 12px; }
.perfil2-card__footer { padding: 5px 12px; background: var(--state-danger-soft); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-accent); border-top: 1px solid #f5c6cb; }
.perfil2-comment-hint { padding: 5px 12px; font-size: 11px; color: var(--text-muted); font-style: italic; background: #fff; border-top: 1px solid var(--border-soft); }

.perfil2-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.perfil2-photo {
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; color: #fff;
  background: var(--color-accent); flex-shrink: 0;
}
.perfil2-name-block { flex: 1; min-width: 0; }
.perfil2-name-text  { font-size: 14px; font-weight: 700; color: var(--text-strong); line-height: 1.2; }
.perfil2-id-text    { font-size: 10px; color: var(--text-muted); margin-bottom: 5px; }
.perfil2-match-badge {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 52px; padding: 4px 6px;
  background: var(--color-accent); color: #fff;
  border-radius: var(--radius-sm); font-weight: 700; text-align: center; line-height: 1.1;
}
.perfil2-match-pct { font-size: 16px; }
.perfil2-match-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; opacity: .9; }

.puntaje-wrap  { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; }
.puntaje-bars  { display: flex; flex-direction: column-reverse; gap: 2px; }
.puntaje-item  { display: flex; align-items: center; gap: 3px; }
.puntaje-num   { font-size: 9px; color: var(--text-muted); font-weight: 600; width: 14px; text-align: right; }
.puntaje-bar   { height: 10px; background: var(--color-accent); border-radius: 2px; opacity: .85; }
.puntaje-label { font-size: 8px; font-weight: 700; text-transform: uppercase; color: var(--color-accent); letter-spacing: .06em; margin-top: 2px; }

.perfil2-info-list  { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; font-size: 11px; }
.perfil2-info-label { color: var(--text-muted); font-weight: 600; }
.perfil2-info-val   { color: var(--text-body); }

.habilidad-row { margin-bottom: 9px; }
.habilidad-row:last-child { margin-bottom: 0; }
.habilidad-label     { font-size: 11px; color: var(--text-body); font-weight: 500; margin-bottom: 3px; }
.habilidad-track-row { display: flex; align-items: center; gap: 5px; }
.habilidad-track     { flex: 1; height: 6px; background: var(--border-soft); border-radius: var(--radius-pill); position: relative; }
.habilidad-fill      { height: 100%; background: var(--color-accent); border-radius: var(--radius-pill); }
.habilidad-thumb     { width: 13px; height: 13px; border-radius: 50%; background: var(--color-accent); border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--color-accent); position: absolute; top: 50%; transform: translate(-50%,-50%); }
.habilidad-pct       { font-size: 10px; font-weight: 700; color: var(--color-accent); min-width: 28px; text-align: right; }

.fit-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border-soft); }
.fit-row:last-child { border-bottom: none; }
.fit-icon    { font-size: 20px; color: var(--color-accent); flex-shrink: 0; margin-top: 1px; }
.fit-content { flex: 1; min-width: 0; }
.fit-label   { font-size: 11px; font-weight: 600; color: var(--text-body); margin-bottom: 2px; }
.fit-right   { text-align: right; flex-shrink: 0; }
.fit-pct-lbl { font-size: 10px; font-weight: 700; color: var(--color-accent); margin-bottom: 2px; }
.star-row       { display: flex; align-items: center; gap: 0; }
.star-row .icon       { font-size: 13px; color: var(--color-accent); }
.star-row .icon-empty { font-size: 13px; color: var(--border-mid); }

.btn-cargar-pdf {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  width: 100%; padding: 6px 10px; margin-bottom: 8px;
  background: var(--state-danger-soft);
  border: 1.5px dashed var(--color-accent); border-radius: var(--radius-sm);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-accent); cursor: pointer;
}
.btn-cargar-pdf:hover { background: #fdd8e0; }
.pruebas-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pdf-block   { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.pdf-icon    { font-size: 34px; color: #cc1111; }
.pdf-lbl     { font-size: 9px; font-weight: 700; color: #cc1111; letter-spacing: .04em; }

.circ-prog {
  --p: 0;
  width: 54px; height: 54px; border-radius: 50%;
  background: conic-gradient(var(--color-accent) calc(var(--p) * 1%), #efefef 0);
  display: flex; align-items: center; justify-content: center;
  position: relative; flex-shrink: 0;
}
.circ-prog__inner { position: absolute; inset: 7px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
.circ-prog__pct { font-size: 11px; font-weight: 700; color: var(--color-accent); line-height: 1; }
.circ-prog__id  { font-size: 8px; color: var(--text-muted); line-height: 1.2; text-align: center; }

.motivador-row { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.motivador-row:last-child { margin-bottom: 0; }
.motivador-icon  { font-size: 15px; color: var(--color-accent); flex-shrink: 0; }
.motivador-label { font-size: 11px; color: var(--text-body); flex: 1; font-weight: 500; }
.motivador-track { flex: 1; height: 5px; background: var(--border-soft); border-radius: var(--radius-pill); min-width: 60px; }
.motivador-fill  { height: 100%; background: var(--color-accent); border-radius: var(--radius-pill); }
.motivador-pct   { font-size: 10px; font-weight: 700; color: var(--color-accent); background: var(--state-danger-soft); padding: 1px 5px; border-radius: var(--radius-xs); min-width: 28px; text-align: center; flex-shrink: 0; }

.req-top { display: flex; align-items: flex-start; gap: 8px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--border-soft); }
.req-client-label { font-size: 11px; font-weight: 600; color: var(--text-body); margin-bottom: 3px; }
.req-right        { margin-left: auto; text-align: right; flex-shrink: 0; }
.req-stars-label  { font-size: 10px; font-weight: 700; color: var(--color-accent); margin-bottom: 2px; }
.req-match-badge  { display: inline-block; background: var(--color-accent); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: var(--radius-xs); }
.req-list         { margin-bottom: 6px; }
.req-item         { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-body); padding: 4px 0; border-bottom: 1px solid var(--border-soft); }
.req-item:last-child { border-bottom: none; }
.req-dot          { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.req-dot--green   { background: var(--state-success); }
.req-dot--pending { background: #4ade80; }
.req-dot--pink    { background: var(--color-accent); }
.req-ids-wrap     { padding: 6px 12px; background: #fff; border-top: 1px solid var(--border-soft); }
.req-ids-title    { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-accent); margin-bottom: 4px; background: var(--state-danger-soft); padding: 4px 0; text-align: center; }
.req-id-grid      { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.req-id-item      { font-size: 10px; color: var(--text-muted); font-weight: 600; }
.req-legend       { display: flex; gap: 6px; flex-wrap: wrap; }
.req-legend-item  { display: flex; align-items: center; gap: 3px; font-size: 10px; color: var(--text-muted); }
.req-legend-dot   { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.perfil2-decision { border: 1px solid var(--border-soft); border-radius: var(--radius-md); overflow: hidden; }
.perfil2-decision__title { padding: 7px 12px; background: var(--color-accent); color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; text-align: center; font-family: var(--font-display); }
.perfil2-decision__btns  { display: flex; gap: 10px; padding: 12px; background: var(--surface-0); }
.btn-decision { flex: 1; padding: 10px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; border: 2px solid var(--color-accent); transition: .2s; font-family: var(--font-display); }
.btn-decision--apto       { background: var(--color-accent); color: #fff; }
.btn-decision--apto:hover { background: #7a0924; }
.btn-decision--noapto       { background: #fff; color: var(--color-accent); }
.btn-decision--noapto:hover { background: var(--state-danger-soft); }
/* =========================================================
   Material Symbols — config base
   ========================================================= */
.material-symbols-rounded,
.icon {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
  vertical-align: middle;
  user-select: none;
}
.icon--sm   { font-size: 16px; }
.icon--md   { font-size: 20px; }
.icon--lg   { font-size: 24px; }
.icon--xl   { font-size: 32px; }
.icon--fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
/* =========================================================
   Components específicos del admin Talent Tray
   (lo que Bootstrap no cubre o queremos a la marca)
   ========================================================= */

/* ---------- Card refinada ---------- */
.tt-card {
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.tt-card__header {
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.tt-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-strong);
  margin: 0;
}
.tt-card__body { padding: var(--sp-6); }
.tt-card__footer {
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--border-soft);
  color: var(--text-muted);
  font-size: var(--fs-13);
}

/* ---------- KPI ---------- */
.kpi {
  position: relative;
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  height: 100%;
  overflow: hidden;
}
.kpi__icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  background: var(--surface-3);
  color: var(--color-primary-deep);
}
.kpi__label {
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 500;
}
.kpi__value {
  font-family: var(--font-display);
  font-size: var(--fs-40);
  line-height: 1;
  color: var(--text-strong);
  letter-spacing: 0.01em;
}
.kpi__delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-13);
  font-weight: 500;
}
.kpi__delta--up   { color: var(--state-success); }
.kpi__delta--down { color: var(--state-danger); }
.kpi--accent  .kpi__icon { background: var(--state-danger-soft);  color: var(--color-accent); }
.kpi--success .kpi__icon { background: var(--state-success-soft); color: var(--state-success); }
.kpi--warning .kpi__icon { background: var(--state-warning-soft); color: var(--state-warning); }

/* ---------- Avatar ---------- */
.avatar {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--color-primary-deep);
  display: inline-grid; place-items: center;
  font-weight: 600;
  font-size: var(--fs-13);
  flex-shrink: 0;
  border: 1px solid var(--border-soft);
  letter-spacing: 0.02em;
}
.avatar--sm { width: 28px; height: 28px; font-size: var(--fs-12); }
.avatar--lg { width: 48px; height: 48px; font-size: var(--fs-16); }
.avatar-stack { display: inline-flex; }
.avatar-stack .avatar { margin-left: -8px; border: 2px solid var(--surface-0); }
.avatar-stack .avatar:first-child { margin-left: 0; }

/* ---------- Layout: Sidebar + Topbar + Main ---------- */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  transition: grid-template-columns var(--dur-base) var(--ease-out);
  background: var(--surface-1);
}
.app.is-collapsed { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }

/* Rail expand on hover: el grid mantiene el espacio del rail,
   pero el sidebar (position relative) se ensancha al pasar el mouse */
.app.is-collapsed .sidebar {
  width: var(--sidebar-w-collapsed);
  transition: width var(--dur-base) var(--ease-out);
  z-index: 50;
}
.app.is-collapsed .sidebar:hover {
  width: var(--sidebar-w);
  box-shadow: var(--shadow-lg);
}
/* Mientras el mouse está encima, mostramos las labels aunque la app esté collapsed */
.app.is-collapsed .sidebar:hover { box-shadow: var(--shadow-lg); }

/* Sidebar — fondo Cherry (manual de marca) */
.sidebar {
  background: var(--sidebar-bg);
  color: var(--text-on-dark);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.sidebar__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-0);
  border-bottom: 1px solid var(--border-soft);
  min-height: var(--topbar-h);
}
.sidebar__brand-logo {
  display: block;
  max-width: 100%;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.sidebar__brand-logo--full { display: block; }
.sidebar__brand-logo--mark { display: none; max-height: 40px; }
.app.is-collapsed .sidebar__brand-logo--full { display: none; }
.app.is-collapsed .sidebar__brand-logo--mark { display: block; }
.app.is-collapsed .sidebar:hover .sidebar__brand-logo--full { display: block; }
.app.is-collapsed .sidebar:hover .sidebar__brand-logo--mark { display: none; }
.app.is-collapsed .sidebar__brand { padding: var(--sp-3); justify-content: center; }
.app.is-collapsed .sidebar:hover .sidebar__brand { padding: var(--sp-3) var(--sp-4); justify-content: center; }
.sidebar__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.sidebar__brand-name {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  letter-spacing: 0.06em;
  color: #fff;
}
.sidebar__brand-tag {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}
.sidebar__section {
  padding: var(--sp-5) var(--sp-4) var(--sp-2);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
}
.sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-2) var(--sp-3) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.82);
  font-size: var(--fs-14);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  position: relative;
  white-space: nowrap;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.sidebar__link:hover { background: rgba(255,255,255,0.10); color: #fff; }
/* Cuando el grupo está cerrado, no mostrar el is-active del padre como resaltado fuerte
   (evita la "barra rosada parcial" que queda con el sublink activo dentro) */
.sidebar__link.is-active {
  background: rgba(0,0,0,0.28);
  color: #fff;
  font-weight: 500;
}
/* Si el grupo está cerrado, el padre nunca debe verse resaltado aunque tenga sublink activo */
.sidebar__group:not(.is-open) > .sidebar__link {
  background: transparent !important;
  color: rgba(255,255,255,0.82) !important;
  font-weight: 400 !important;
}
.sidebar__group:not(.is-open) > .sidebar__link::before { display: none !important; }
.sidebar__group:not(.is-open) > .sidebar__link .sidebar__badge {
  background: rgba(255,255,255,0.18) !important;
  color: #fff !important;
}
.sidebar__group:not(.is-open) > .sidebar__link:hover {
  background: rgba(255,255,255,0.10) !important;
  color: #fff !important;
}
.sidebar__group:not(.is-open) > .sidebar__link.is-active::before { display: none; }
.sidebar__group:not(.is-open) > .sidebar__link.is-active .sidebar__badge { background: rgba(255,255,255,0.18); }
.sidebar__group:not(.is-open) > .sidebar__link.is-active:hover {
  background: rgba(255,255,255,0.10);
  color: #fff;
}
.sidebar__link.is-active .sidebar__icon { color: #fff; }
.sidebar__link.is-active .sidebar__caret { color: #fff; }
.sidebar__link.is-active .sidebar__badge { background: rgba(0,0,0,0.35); }
.sidebar__link.is-active::before {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  background: #fff;
  border-radius: 0 3px 3px 0;
}
.sidebar__icon {
  width: 20px; height: 20px;
  flex-shrink: 0;
  display: grid; place-items: center;
}
.sidebar__label { flex: 1; transition: opacity var(--dur-fast) var(--ease-out); }
.sidebar__badge {
  font-size: var(--fs-12);
  background: rgba(255,255,255,0.18);
  color: #fff;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
}
.sidebar__caret {
  display: inline-flex;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  transition: transform var(--dur-fast) var(--ease-out);
}

/* Submenú */
.sidebar__group { display: flex; flex-direction: column; }
.sidebar__group.is-open > .sidebar__link > .sidebar__caret { transform: rotate(90deg); }
.sidebar__sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
  padding-left: 32px;
}
.sidebar__group.is-open > .sidebar__sub { grid-template-rows: 1fr; }
.sidebar__sub > .sidebar__sub-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 0 6px;
}
.sidebar__sublink {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.72);
  font-size: var(--fs-13);
  text-decoration: none;
  position: relative;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.sidebar__sublink::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.35);
  flex-shrink: 0;
}
.sidebar__sublink:hover { color: #fff; background: rgba(255,255,255,0.08); }
.sidebar__sublink:hover::before { background: #fff; }
.sidebar__sublink.is-active {
  color: #fff;
  background: rgba(0,0,0,0.22);
}
.sidebar__sublink.is-active::before { background: #fff; }

.app.is-collapsed .sidebar__caret,
.app.is-collapsed .sidebar__sub { display: none; }

.sidebar__footer {
  padding: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.sidebar__user {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  overflow: hidden;
}
.sidebar__user-name { font-size: var(--fs-13); color: #fff; font-weight: 500; }
.sidebar__user-role { font-size: 11px; color: rgba(255,255,255,0.75); }

/* Sidebar collapsed */
.app.is-collapsed .sidebar__brand-text,
.app.is-collapsed .sidebar__label,
.app.is-collapsed .sidebar__badge,
.app.is-collapsed .sidebar__section,
.app.is-collapsed .sidebar__user,
.app.is-collapsed .sidebar__caret { display: none; }
.app.is-collapsed .sidebar__nav { padding: var(--sp-2) 8px var(--sp-5); }
.app.is-collapsed .sidebar__link {
  justify-content: center;
  padding: 10px 0;
  width: 100%;
}
.app.is-collapsed .sidebar__brand { padding: var(--sp-3) 0; justify-content: center; }
.app.is-collapsed .sidebar__footer { padding: var(--sp-3) 0; justify-content: center; }
.app.is-collapsed .sidebar__sub { display: none; }

/* Hover expandido: re-mostrar todo */
.app.is-collapsed .sidebar:hover .sidebar__brand-text,
.app.is-collapsed .sidebar:hover .sidebar__label,
.app.is-collapsed .sidebar:hover .sidebar__badge,
.app.is-collapsed .sidebar:hover .sidebar__section,
.app.is-collapsed .sidebar:hover .sidebar__user,
.app.is-collapsed .sidebar:hover .sidebar__caret { display: ""; }
.app.is-collapsed .sidebar:hover .sidebar__brand-text,
.app.is-collapsed .sidebar:hover .sidebar__user { display: flex; }
.app.is-collapsed .sidebar:hover .sidebar__label { display: block; }
.app.is-collapsed .sidebar:hover .sidebar__badge,
.app.is-collapsed .sidebar:hover .sidebar__caret { display: inline-flex; }
.app.is-collapsed .sidebar:hover .sidebar__section { display: block; }
.app.is-collapsed .sidebar:hover .sidebar__nav { padding: var(--sp-2) var(--sp-3) var(--sp-5); }
.app.is-collapsed .sidebar:hover .sidebar__link { justify-content: flex-start; padding: 10px 12px; }
.app.is-collapsed .sidebar:hover .sidebar__brand { padding: var(--sp-5) var(--sp-5); justify-content: flex-start; }
.app.is-collapsed .sidebar:hover .sidebar__footer { padding: var(--sp-4); justify-content: flex-start; }
.app.is-collapsed .sidebar:hover .sidebar__group.is-open .sidebar__sub { display: grid; }

/* ---------- Main area ---------- */
.main { display: flex; flex-direction: column; min-width: 0; background: var(--surface-1); }

/* Topbar */
.topbar {
  height: var(--topbar-h);
  background: var(--surface-0);
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0 var(--sp-6);
  position: sticky;
  top: 0;
  z-index: 30;
}
.topbar__search {
  flex: 1;
  max-width: 460px;
  position: relative;
}
.topbar__search .form-control {
  padding-left: 40px;
  background: var(--surface-1);
  border-color: transparent;
}
.topbar__search .form-control:focus {
  background: var(--surface-0);
  border-color: var(--color-primary);
}
.topbar__search-icon {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  pointer-events: none;
}
.topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
}
.topbar__divider {
  width: 1px;
  height: 28px;
  background: var(--border-soft);
  margin: 0 var(--sp-2);
}
.topbar__user {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 4px 10px 4px 4px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 0;
  color: var(--text-strong);
  transition: background var(--dur-fast) var(--ease-out);
}
.topbar__user:hover { background: var(--surface-1); }
.topbar__user-name { font-size: var(--fs-13); font-weight: 500; line-height: 1.1; }
.topbar__user-role { font-size: 11px; color: var(--text-muted); }
.topbar__notify { position: relative; }
.topbar__notify-dot {
  position: absolute;
  top: 8px; right: 8px;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--color-accent-bright);
  border: 2px solid var(--surface-0);
}

/* Content */
.content {
  padding: var(--sp-7);
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
}
.page-header__titles { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.page-header__crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-12);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.page-header__crumbs span:not(:last-child)::after {
  content: "/";
  margin-left: 6px;
  color: var(--text-soft);
}
.page-header__title {
  font-family: var(--font-display);
  font-size: var(--fs-40);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-strong);
  line-height: 1;
}
.page-header__actions { display: flex; gap: var(--sp-2); align-items: center; }

/* ---------- Timeline ---------- */
.timeline { display: flex; flex-direction: column; gap: var(--sp-5); }
.timeline__item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--sp-3);
  position: relative;
}
.timeline__item::before {
  content: "";
  position: absolute;
  left: 13px; top: 28px; bottom: -20px;
  width: 2px;
  background: var(--border-soft);
}
.timeline__item:last-child::before { display: none; }
.timeline__dot {
  width: 28px; height: 28px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--color-primary-deep);
  display: grid; place-items: center;
  z-index: 1;
}
.timeline__dot--accent  { background: var(--state-danger-soft);  color: var(--color-accent); }
.timeline__dot--success { background: var(--state-success-soft); color: var(--state-success); }
.timeline__title { font-weight: 500; color: var(--text-strong); font-size: var(--fs-14); }
.timeline__meta  { color: var(--text-muted); font-size: var(--fs-13); }

/* ---------- Pipeline (kanban-lite) ---------- */
.pipeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
}
.pipeline__col {
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
}
.pipeline__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}
.pipeline__title {
  font-size: var(--fs-12);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.pipeline__count {
  font-size: var(--fs-12);
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 1px 8px;
  color: var(--text-strong);
  font-weight: 600;
}
.pipeline__bar {
  height: 4px;
  border-radius: 999px;
  background: var(--border-mid);
}
.pipeline__bar--applied   { background: var(--tt-azul-electric); }
.pipeline__bar--screening { background: var(--tt-azul-profundo); }
.pipeline__bar--interview { background: var(--color-accent-bright); }
.pipeline__bar--offer     { background: var(--color-accent); }
.pipeline__bar--hired     { background: var(--state-success); }

/* ---------- Chart placeholder ---------- */
.chart {
  position: relative;
  width: 100%;
  height: 280px;
}
.chart svg { width: 100%; height: 100%; display: block; }
.chart__legend {
  display: flex;
  gap: var(--sp-4);
  font-size: var(--fs-13);
  color: var(--text-muted);
  margin-top: var(--sp-3);
}
.chart__legend-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: middle;
}

/* ---------- Empty / placeholder helpers ---------- */
.dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: currentColor;
  display: inline-block;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    width: var(--sidebar-w);
    z-index: 100;
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-out);
  }
  .app.is-mobile-open .sidebar { transform: translateX(0); }
  .app.is-mobile-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(10, 8, 32, 0.45);
    z-index: 90;
  }
  .content { padding: var(--sp-5); }
  .page-header__title { font-size: var(--fs-32); }
}

@media (max-width: 576px) {
  .topbar { padding: 0 var(--sp-4); }
  .topbar__search { display: none; }
  .content { padding: var(--sp-4); }
}
/* =========================================================
   Talent Tray — Forms custom
   Select2, Flatpickr, drag-drop, range, switch, OTP, tags
   ========================================================= */

/* ---- Sección separadora ---- */
.form-section + .form-section { margin-top: var(--sp-7); }
.form-section__eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-13);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-soft);
}

/* ---- Helper text ---- */
.form-hint {
  font-size: var(--fs-12);
  color: var(--text-soft);
  margin-top: 5px;
}

/* ---- Form label bold ---- */
.form-label { font-weight: 500; font-size: var(--fs-13); color: var(--text-body); }

/* ---- Input con ícono interno ---- */
.input-icon-wrap { position: relative; }
.input-icon-wrap .input-icon-left,
.input-icon-wrap .input-icon-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  pointer-events: none;
  font-size: 18px;
}
.input-icon-wrap .input-icon-left  { left: 12px; }
.input-icon-wrap .input-icon-right { right: 12px; }
.input-icon-wrap .form-control.has-icon-left  { padding-left: 40px; }
.input-icon-wrap .form-control.has-icon-right { padding-right: 40px; }
.input-icon-wrap:focus-within .input-icon-left,
.input-icon-wrap:focus-within .input-icon-right { color: var(--color-primary); }

/* ---- Password strength ---- */
.password-strength {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}
.password-strength__bar {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--surface-2);
  transition: background var(--dur-base) var(--ease-out);
}
.password-strength[data-level="1"] .password-strength__bar:nth-child(1) { background: var(--state-danger); }
.password-strength[data-level="2"] .password-strength__bar:nth-child(-n+2) { background: var(--state-warning); }
.password-strength[data-level="3"] .password-strength__bar:nth-child(-n+3) { background: #3a8fd8; }
.password-strength[data-level="4"] .password-strength__bar { background: var(--state-success); }
.password-strength__label {
  font-size: var(--fs-12);
  margin-top: 4px;
  color: var(--text-soft);
  min-height: 18px;
  transition: color var(--dur-base) var(--ease-out);
}
.password-strength[data-level="1"] + .password-strength__label { color: var(--state-danger); }
.password-strength[data-level="2"] + .password-strength__label { color: var(--state-warning); }
.password-strength[data-level="3"] + .password-strength__label { color: #3a8fd8; }
.password-strength[data-level="4"] + .password-strength__label { color: var(--state-success); }

/* ---- Character counter textarea ---- */
.textarea-wrap { position: relative; }
.char-counter {
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-size: var(--fs-12);
  color: var(--text-soft);
  pointer-events: none;
}
.char-counter.is-warning { color: var(--state-warning); }
.char-counter.is-danger  { color: var(--state-danger); }

/* ---- Switch / Toggle ---- */
.tt-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  cursor: pointer;
  user-select: none;
}
.tt-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.tt-switch__track {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1.5px solid var(--border-mid);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  flex-shrink: 0;
}
.tt-switch__thumb {
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--border-mid);
  transition: left var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  box-shadow: var(--shadow-xs);
}
.tt-switch input:checked ~ .tt-switch__track {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.tt-switch input:checked ~ .tt-switch__track .tt-switch__thumb {
  left: calc(100% - 20px);
  background: #fff;
}
.tt-switch input:focus-visible ~ .tt-switch__track {
  box-shadow: var(--shadow-focus);
}
.tt-switch__label { font-size: var(--fs-14); color: var(--text-body); }

/* ---- Radio / Checkbox card-style ---- */
.check-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.check-card:hover { border-color: var(--border-mid); background: var(--surface-1); }
.check-card input:checked ~ * { color: var(--color-primary-deep); }
.check-card:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}
.check-card__title { font-weight: 500; font-size: var(--fs-14); color: var(--text-strong); }
.check-card__desc  { font-size: var(--fs-12); color: var(--text-muted); margin-top: 2px; }

/* ---- Drag & Drop zone ---- */
.dropzone {
  border: 2px dashed var(--border-mid);
  border-radius: var(--radius-lg);
  padding: 48px 24px;
  text-align: center;
  background: var(--surface-1);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
  position: relative;
}
.dropzone:hover,
.dropzone.is-dragover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}
.dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.dropzone__icon {
  font-size: 40px;
  color: var(--text-soft);
  margin-bottom: var(--sp-3);
  display: block;
  transition: color var(--dur-fast) var(--ease-out);
}
.dropzone:hover .dropzone__icon,
.dropzone.is-dragover .dropzone__icon { color: var(--color-primary); }
.dropzone__title { font-weight: 500; color: var(--text-strong); margin-bottom: 4px; }
.dropzone__sub   { font-size: var(--fs-13); color: var(--text-muted); }
.dropzone__sub span { color: var(--color-primary); font-weight: 500; }

/* File list */
.file-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); }
.file-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  font-size: var(--fs-13);
}
.file-item .icon { color: var(--color-primary); }
.file-item__name { flex: 1; font-weight: 500; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-item__size { color: var(--text-soft); white-space: nowrap; }
.file-item__remove { border: none; background: none; cursor: pointer; color: var(--text-soft); padding: 4px; border-radius: var(--radius-xs); }
.file-item__remove:hover { color: var(--state-danger); background: var(--state-danger-soft); }

/* Image preview grid */
.img-preview-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.img-preview-item {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-soft);
}
.img-preview-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-preview-item__remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: rgba(10,8,32,.65);
  color: #fff;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 14px;
  line-height: 1;
  transition: background var(--dur-fast) var(--ease-out);
}
.img-preview-item__remove:hover { background: var(--state-danger); }

/* ---- Range slider ---- */
.range-wrap { position: relative; padding-bottom: 20px; }
.form-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  outline: none;
  cursor: pointer;
}
.form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--color-primary);
  border: 2px solid #fff;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
}
.form-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.form-range:focus { box-shadow: none; }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(11,0,207,.18); }
.form-range::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--color-primary);
  border: 2px solid #fff;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.range-value {
  position: absolute;
  bottom: 0;
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--color-primary);
  transform: translateX(-50%);
  transition: left var(--dur-fast) var(--ease-out);
  pointer-events: none;
}

/* ---- OTP Input ---- */
.otp-group {
  display: flex;
  gap: var(--sp-3);
}
.otp-input {
  width: 52px;
  height: 56px;
  text-align: center;
  font-size: var(--fs-20);
  font-weight: 600;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-mid);
  background: var(--surface-0);
  color: var(--text-strong);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  caret-color: transparent;
}
.otp-input:focus {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}
.otp-input.is-filled { background: var(--color-primary-soft); border-color: var(--color-primary); }

/* ---- Rating ---- */
.star-rating {
  display: flex;
  gap: 4px;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.star-rating input { position: absolute; opacity: 0; width: 0; height: 0; }
.star-rating label {
  cursor: pointer;
  font-size: 28px;
  color: var(--border-mid);
  transition: color var(--dur-fast) var(--ease-out);
  line-height: 1;
}
.star-rating label::before { content: "★"; }
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label { color: #f5a623; }

/* ---- Select2 override — Talent Tray theme ---- */
.select2-container { width: 100% !important; }

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  background: var(--surface-0);
  min-height: 40px;
  display: flex;
  align-items: center;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open  .select2-selection--single,
.select2-container--default.select2-container--open  .select2-selection--multiple {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
  outline: none;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text-body);
  font-size: var(--fs-14);
  font-family: var(--font-body);
  line-height: 38px;
  padding-left: 14px;
  padding-right: 36px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--text-soft);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px;
  right: 10px;
  width: 24px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--text-muted) transparent transparent transparent;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--color-primary) transparent;
}

/* Multiple */
.select2-container--default .select2-selection--multiple {
  padding: 0 8px;
  height: 40px;
  overflow: hidden;
  flex-wrap: nowrap;
  align-items: center;
  display: flex;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  align-items: center;
  list-style: none;
  margin: 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--color-primary-soft);
  border: none;
  border-radius: var(--radius-pill);
  color: var(--color-primary-deep);
  font-size: var(--fs-12);
  font-weight: 500;
  padding: 3px 10px 3px 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--color-primary-deep);
  font-weight: 700;
  margin: 0;
  order: 2;
  font-size: 14px;
  line-height: 1;
  opacity: 0.6;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { opacity: 1; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__display { order: 1; }
.select2-container--default .select2-selection--multiple .select2-search__field {
  margin: 3px 0;
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: var(--text-body);
}
.select2-container--default .select2-selection--multiple .select2-search__field::placeholder { color: var(--text-soft); }

/* Dropdown */
.select2-dropdown {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  background: var(--surface-0);
  font-family: var(--font-body);
  font-size: var(--fs-14);
  overflow: hidden;
  margin-top: 4px;
}
.select2-container--default .select2-search--dropdown {
  padding: 10px 10px 6px;
  border-bottom: 1px solid var(--border-soft);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: var(--text-body);
  background: var(--surface-1);
  outline: none;
  width: 100%;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--color-primary);
  background: var(--surface-0);
  box-shadow: var(--shadow-focus);
}
.select2-results__options { max-height: 240px; overflow-y: auto; padding: 6px; }
.select2-results__option {
  padding: 8px 10px;
  border-radius: var(--radius-xs);
  color: var(--text-body);
  font-size: var(--fs-14);
  cursor: pointer;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: var(--color-primary-soft);
  color: var(--color-primary-deep);
}
.select2-container--default .select2-results__option--selected {
  background: var(--surface-1);
  color: var(--color-primary);
  font-weight: 500;
}
.select2-container--default .select2-results__option[aria-disabled="true"] {
  color: var(--text-soft);
}
.select2-results__group {
  padding: 8px 10px 4px;
  font-size: var(--fs-11, 0.6875rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* ---- Flatpickr override ---- */
.flatpickr-calendar {
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-body);
  width: 307px;
}
.flatpickr-months {
  background: var(--tt-cherry);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 6px 0;
}
.flatpickr-months .flatpickr-month { color: #fff; fill: #fff; }
.flatpickr-current-month {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  color: #fff;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: transparent;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
  border: none;
  outline: none;
}
.flatpickr-current-month .numInputWrapper span.arrowUp::after  { border-bottom-color: rgba(255,255,255,0.8); }
.flatpickr-current-month .numInputWrapper span.arrowDown::after { border-top-color: rgba(255,255,255,0.8); }
.flatpickr-current-month input.cur-year { color: #fff; font-weight: 600; font-family: var(--font-display); }
.flatpickr-prev-month,
.flatpickr-next-month { color: rgba(255,255,255,0.8) !important; fill: rgba(255,255,255,0.8) !important; }
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover { color: #fff !important; fill: #fff !important; }
span.flatpickr-weekday {
  background: var(--surface-1);
  color: var(--text-muted);
  font-weight: 600;
  font-size: var(--fs-11, 0.6875rem);
  text-transform: uppercase;
}
.flatpickr-weeks { background: var(--surface-1); }
.flatpickr-days { border-left: none; border-right: none; }
.dayContainer { padding: 6px; gap: 2px; }
.flatpickr-day {
  border-radius: var(--radius-sm);
  color: var(--text-body);
  font-size: var(--fs-13);
  border: none;
  height: 36px;
  line-height: 36px;
  max-width: 36px;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.flatpickr-day:hover,
.flatpickr-day:focus { background: var(--color-primary-soft); color: var(--color-primary-deep); border: none; }
.flatpickr-day.today { border: 1.5px solid var(--color-primary); color: var(--color-primary); font-weight: 600; }
.flatpickr-day.today:hover { background: var(--color-primary-soft); }
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
}
.flatpickr-day.inRange {
  background: var(--color-primary-soft);
  border-color: transparent;
  box-shadow: -5px 0 0 var(--color-primary-soft), 5px 0 0 var(--color-primary-soft);
}
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover { color: var(--text-soft); background: transparent; }
.flatpickr-time {
  border-top: 1px solid var(--border-soft);
  background: var(--surface-0);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-14);
}
.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover { background: var(--surface-1); }

/* Input cuando tiene flatpickr */
.flatpickr-input { cursor: pointer; }
.flatpickr-input.active {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

/* =========================================================
   WIZARD — Stepper de pestañas
   ========================================================= */
.wizard {
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

/* Stepper */
.wizard__stepper {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-1);
  overflow-x: auto;
  scrollbar-width: none;
}
.wizard__stepper::-webkit-scrollbar { display: none; }

.wizard__step {
  flex: 1;
  min-width: 140px;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: background var(--dur-fast) var(--ease-out);
  position: relative;
}
.wizard__step:hover:not(:disabled):not(.is-active) {
  background: var(--surface-2);
}
.wizard__step:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.wizard__step-num {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--surface-0);
  border: 1.5px solid var(--border-mid);
  color: var(--text-muted);
  font-weight: 700;
  font-size: var(--fs-14);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all var(--dur-fast) var(--ease-out);
}
.wizard__step-num .icon { font-size: 18px; display: none; }

.wizard__step-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.wizard__step-eyebrow {
  font-size: var(--fs-12);
  color: var(--text-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}
.wizard__step-label {
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--text-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Active */
.wizard__step.is-active {
  background: var(--color-primary-soft);
}
.wizard__step.is-active .wizard__step-num {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.wizard__step.is-active .wizard__step-label {
  color: var(--color-primary-deep);
  font-weight: 600;
}

/* Completed */
.wizard__step.is-done .wizard__step-num {
  background: var(--state-success);
  border-color: var(--state-success);
  color: #fff;
}
.wizard__step.is-done .wizard__step-num span:not(.icon) { display: none; }
.wizard__step.is-done .wizard__step-num .icon { display: block; }

/* Step with errors */
.wizard__step.is-error .wizard__step-num {
  background: var(--state-danger);
  border-color: var(--state-danger);
  color: #fff;
}

/* Wizard body */
.wizard__body { padding: var(--sp-6); }

.wizard__pane { display: none; }
.wizard__pane.is-active { display: block; animation: paneFade 220ms var(--ease-out); }
@keyframes paneFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wizard__pane-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border-soft);
}
.wizard__pane-titles h2 {
  font-family: var(--font-display);
  font-size: var(--fs-28);
  letter-spacing: 0.04em;
  color: var(--text-strong);
  margin: 0 0 4px;
}
.wizard__pane-titles p {
  margin: 0;
  font-size: var(--fs-13);
  color: var(--text-muted);
}
.wizard__pane-counter {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: var(--fs-14);
  letter-spacing: 0.12em;
  color: var(--text-soft);
  text-transform: uppercase;
}

/* Subgrupos dentro de un pane */
.wizard__group {
  margin-bottom: var(--sp-6);
}
.wizard__group-title {
  font-family: var(--font-display);
  font-size: var(--fs-15);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary-deep);
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--color-primary-soft);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.wizard__group-title .icon { color: var(--color-primary); font-size: 18px; }

/* Footer / nav */
.wizard__footer {
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--border-soft);
  background: var(--surface-1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.wizard__footer-progress {
  flex: 1 1 200px;
  min-width: 180px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wizard__footer-progress-label {
  font-size: var(--fs-12);
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
}
.wizard__footer-progress-bar {
  height: 6px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.wizard__footer-progress-bar > span {
  display: block;
  height: 100%;
  background: var(--color-primary);
  border-radius: 999px;
  transition: width var(--dur-base) var(--ease-out);
}
.wizard__footer-actions {
  display: flex;
  gap: var(--sp-3);
  margin-left: auto;
}

/* =========================================================
   Repeater dinámico
   ========================================================= */
.repeater__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.repeater__item {
  position: relative;
  padding: var(--sp-4);
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}
.repeater__item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}
.repeater__item-title {
  font-weight: 500;
  font-size: var(--fs-13);
  color: var(--text-strong);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.repeater__item-title .icon { color: var(--color-primary); font-size: 18px; }
.repeater__item-remove {
  background: none;
  border: none;
  color: var(--text-soft);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-xs);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-12);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.repeater__item-remove:hover {
  color: var(--state-danger);
  background: var(--state-danger-soft);
}
.repeater__add {
  margin-top: var(--sp-3);
  align-self: flex-start;
}
.repeater__limit-hint {
  margin-top: var(--sp-2);
  font-size: var(--fs-12);
  color: var(--text-muted);
}

/* =========================================================
   Choice grid (chips seleccionables) — competencias / fit / motivadores
   ========================================================= */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-3);
}
.choice-chip {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-0);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
  position: relative;
}
.choice-chip:hover {
  border-color: var(--border-mid);
  background: var(--surface-1);
}
.choice-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choice-chip__check {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-xs);
  border: 1.5px solid var(--border-mid);
  background: var(--surface-0);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  margin-top: 1px;
  transition: all var(--dur-fast) var(--ease-out);
}
.choice-chip__check::after {
  content: "";
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--dur-fast) var(--ease-out);
  margin-top: -2px;
}
.choice-chip__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.choice-chip__title {
  font-weight: 500;
  font-size: var(--fs-14);
  color: var(--text-strong);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.choice-chip__emoji {
  font-size: 18px;
  line-height: 1;
}
.choice-chip__desc {
  font-size: var(--fs-12);
  color: var(--text-muted);
  line-height: 1.4;
}
.choice-chip:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}
.choice-chip:has(input:checked) .choice-chip__check {
  border-color: var(--color-primary);
  background: var(--color-primary);
}
.choice-chip:has(input:checked) .choice-chip__check::after {
  transform: rotate(45deg) scale(1);
}
.choice-chip:has(input:checked) .choice-chip__title {
  color: var(--color-primary-deep);
}
.choice-chip.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Radio variant — fit cultural */
.choice-chip--radio .choice-chip__check { border-radius: 999px; }
.choice-chip--radio .choice-chip__check::after {
  width: 10px; height: 10px; border: none;
  background: #fff; border-radius: 999px;
  transform: scale(0);
}
.choice-chip--radio:has(input:checked) .choice-chip__check::after {
  transform: scale(1);
}

/* Categoría dentro de competencias */
.choice-category {
  margin-bottom: var(--sp-5);
}
.choice-category__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
  gap: var(--sp-3);
}
.choice-category__title {
  font-family: var(--font-display);
  font-size: var(--fs-14);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-strong);
  margin: 0;
}
.choice-category__count {
  font-size: var(--fs-12);
  color: var(--text-muted);
  font-weight: 500;
}
.choice-category__count.is-full {
  color: var(--state-success);
  font-weight: 600;
}
.choice-category__count.is-over {
  color: var(--state-danger);
}

/* =========================================================
   Info banner (tip arriba de cada step)
   ========================================================= */
.wizard__tip {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-primary-soft);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: var(--sp-5);
  font-size: var(--fs-13);
  color: var(--color-primary-deep);
  line-height: 1.5;
}
.wizard__tip .icon {
  flex-shrink: 0;
  font-size: 20px;
  color: var(--color-primary);
}
.wizard__tip strong { display: block; margin-bottom: 2px; font-weight: 600; }

/* =========================================================
   Resumen lateral mini (header de la página)
   ========================================================= */
.vacancy-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--surface-0);
  font-size: var(--fs-13);
}
.vacancy-meta__avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary-deep);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: var(--fs-12);
}
.vacancy-meta__name { font-weight: 500; color: var(--text-strong); }
.vacancy-meta__sep { color: var(--text-soft); }
.vacancy-meta__role { color: var(--text-muted); }

/* =========================================================
   Save indicator (autosave)
   ========================================================= */
.wizard__autosave {
  font-size: var(--fs-12);
  color: var(--text-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wizard__autosave .icon { font-size: 14px; }
.wizard__autosave.is-saved { color: var(--state-success); }

@media (max-width: 768px) {
  .wizard__stepper { padding: var(--sp-3); gap: var(--sp-1); }
  .wizard__step { min-width: auto; padding: var(--sp-2); }
  .wizard__step-body { display: none; }
  .wizard__step.is-active .wizard__step-body { display: flex; }
  .wizard__pane-head { flex-direction: column; }
  .wizard__body { padding: var(--sp-4); }
}

/* ---- Resumen de validación ---- */
.validation-summary {
  border-left: 3px solid var(--state-danger);
  background: var(--state-danger-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
  display: none;
}
.validation-summary.is-visible { display: block; }
.validation-summary ul { margin: var(--sp-2) 0 0; padding-left: 20px; font-size: var(--fs-13); }
.validation-summary ul li { margin-bottom: 4px; color: var(--state-danger); }
/* ══════════════════════════════════════════════
   Dashboard Candidato · estilos de página
   Prefijo: .dca-  (dashboard-candidato)
   ══════════════════════════════════════════════ */

/* ── 1. Hero de perfil ── */
.dca-hero {
  background: linear-gradient(135deg, var(--color-primary-deep) 0%, var(--color-primary) 100%);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  margin-bottom: var(--sp-5);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.dca-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 50%, rgba(255,255,255,.06) 0%, transparent 55%),
    radial-gradient(circle at 10% 80%, rgba(255,255,255,.04) 0%, transparent 40%);
  pointer-events: none;
}
.dca-hero__avatar {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.18);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-32);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 3px solid rgba(255,255,255,.32);
  letter-spacing: 0.02em;
}
.dca-hero__info {
  flex: 1;
  min-width: 200px;
}
.dca-hero__name {
  font-family: var(--font-display);
  font-size: var(--fs-32);
  letter-spacing: 0.02em;
  color: #fff;
  line-height: 1.1;
  margin: 0 0 var(--sp-1) 0;
}
.dca-hero__title {
  font-size: var(--fs-14);
  color: rgba(255,255,255,.7);
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.dca-hero__tags {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.dca-hero__tag {
  padding: 4px 12px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-pill);
  font-size: var(--fs-12);
  color: rgba(255,255,255,.85);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dca-hero__ring-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}
.dca-hero__ring-label {
  font-size: var(--fs-12);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}

/* ── 2. Ring SVG (donut de completitud) ── */
.profile-ring {
  width: 116px;
  height: 116px;
  position: relative;
}
.profile-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.profile-ring__track {
  fill: none;
  stroke: rgba(255,255,255,.2);
  stroke-width: 9;
}
.profile-ring__fill {
  fill: none;
  stroke: #fff;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 0 314.16;
  transition: stroke-dasharray 1.4s cubic-bezier(.2,.7,.2,1);
}
.profile-ring__text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.profile-ring__pct {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  line-height: 1;
  color: #fff;
  letter-spacing: 0.02em;
}
.profile-ring__sub {
  font-size: 9px;
  color: rgba(255,255,255,.6);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* ── 3. Metric cards ── */
.dca-metric {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  height: 100%;
}
.dca-metric__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dca-metric__label {
  font-family: var(--font-display);
  font-size: var(--fs-12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.3;
}
.dca-metric__value {
  font-family: var(--font-display);
  font-size: var(--fs-40);
  line-height: 1;
  color: var(--text-strong);
}
.dca-metric__sub {
  font-size: var(--fs-12);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Metric variants */
.dca-metric--primary .dca-metric__icon { background: var(--color-primary-soft); color: var(--color-primary-deep); }
.dca-metric--primary .dca-metric__value { color: var(--color-primary); }

.dca-metric--success .dca-metric__icon { background: rgba(31,138,91,.12); color: var(--state-success); }
.dca-metric--success .dca-metric__value { color: var(--state-success); }

.dca-metric--warning .dca-metric__icon { background: rgba(201,122,6,.12); color: var(--state-warning); }
.dca-metric--warning .dca-metric__value { color: var(--state-warning); }

.dca-metric--accent .dca-metric__icon { background: rgba(178,11,47,.12); color: var(--color-accent); }
.dca-metric--accent .dca-metric__value { color: var(--color-accent); }

/* ── 4. Completion checklist items (pendientes de perfil) ── */
.dca-missing {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  font-size: var(--fs-13);
  color: var(--text-body);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.dca-missing:hover {
  background: var(--surface-2);
  border-color: var(--border-mid);
  text-decoration: none;
  color: var(--text-strong);
}
.dca-missing__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dca-missing__pct {
  margin-left: auto;
  font-weight: 700;
  font-size: var(--fs-12);
  color: var(--color-primary);
}

/* ── 5. Hoja de vida: bloques y ítems ── */
.cv-block + .cv-block {
  border-top: 1px solid var(--border-soft);
  padding-top: var(--sp-4);
  margin-top: var(--sp-4);
}
.cv-block__title {
  font-family: var(--font-display);
  font-size: var(--fs-13);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.cv-item {
  display: flex;
  gap: var(--sp-3);
  padding: 5px 0;
}
.cv-item__dot {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  border: 2px solid var(--color-primary);
  margin-top: 5px;
  flex-shrink: 0;
}
.cv-item__name {
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--text-strong);
  line-height: 1.3;
}
.cv-item__sub {
  font-size: var(--fs-12);
  color: var(--text-muted);
  margin-top: 2px;
}
.cv-item__year {
  margin-left: auto;
  font-size: var(--fs-12);
  color: var(--text-soft);
  white-space: nowrap;
  padding-left: var(--sp-3);
  flex-shrink: 0;
}

/* Skill tags */
.skill-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-12);
  font-weight: 500;
  background: var(--color-primary-soft);
  color: var(--color-primary-deep);
  border: 1px solid rgba(11,0,207,.14);
}
.skill-tag--soft {
  background: var(--surface-2);
  color: var(--text-body);
  border-color: var(--border-soft);
}

/* ── 6. Entrevistas agendadas ── */
.interview-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
}
.interview-item + .interview-item {
  border-top: 1px solid var(--border-soft);
}
.interview-item__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary-deep);
  flex-shrink: 0;
  text-align: center;
}
.interview-item__day {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  line-height: 1;
  letter-spacing: 0.02em;
}
.interview-item__month {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.75;
  margin-top: 1px;
}
.interview-item__body {
  flex: 1;
  min-width: 0;
}
.interview-item__title {
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.interview-item__meta {
  font-size: var(--fs-12);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  row-gap: 3px;
}
.interview-item__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  align-items: flex-end;
  flex-shrink: 0;
}

/* ── 7. Progress mini bar ── */
.progress-mini {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow: hidden;
}
.progress-mini__bar {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  transition: width 1s ease-out;
}

/* ── 8. Vacantes recomendadas — cards ── */
.rec-card {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-0);
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  height: 100%;
}
.rec-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--border-mid);
}
.rec-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}
.rec-card__logo {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-16);
  flex-shrink: 0;
  letter-spacing: 0.05em;
}
.rec-card__match {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-12);
  font-weight: 700;
  white-space: nowrap;
}
.rec-card__match--high   { background: rgba(31,138,91,.12); color: var(--state-success); }
.rec-card__match--medium { background: var(--color-primary-soft); color: var(--color-primary-deep); }
.rec-card__match--low    { background: rgba(201,122,6,.12); color: var(--state-warning); }

.rec-card__title {
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--text-strong);
  line-height: 1.3;
  margin-bottom: 3px;
}
.rec-card__company {
  font-size: var(--fs-13);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.rec-card__tags {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: auto;
}
.rec-card__tag {
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  background: var(--surface-1);
  color: var(--text-muted);
  border: 1px solid var(--border-soft);
}
.rec-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-soft);
  gap: var(--sp-2);
}
.rec-card__salary {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--text-strong);
}

/* ── 9. Completitud de perfil items (check list) ── */
.profile-check-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 6px 0;
}
.profile-check-item + .profile-check-item {
  border-top: 1px solid var(--border-soft);
}

/* ── 10. Tip info box ── */
.dca-tip {
  background: var(--color-primary-soft);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  border-left: 3px solid var(--color-primary);
}
.dca-tip__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  color: var(--color-primary-deep);
  font-weight: 600;
  font-size: var(--fs-13);
}
.dca-tip ul {
  margin: 0;
  padding-left: var(--sp-4);
  font-size: var(--fs-12);
  color: var(--text-body);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── 11. Responsive ── */
@media (max-width: 767px) {
  .dca-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }
  .dca-hero__ring-wrap {
    align-self: center;
  }
  .dca-hero__avatar {
    width: 64px;
    height: 64px;
    font-size: var(--fs-24);
  }
  .dca-hero__name {
    font-size: var(--fs-24);
  }
}
/* =========================================================
   ELEMENTOS UI · Talent Tray
   Página showcase con todos los componentes del sistema.
   ========================================================= */

/* ---------- Layout interno: navegación + contenido ---------- */
.ui-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--sp-6);
  align-items: start;
}

@media (max-width: 991.98px) {
  .ui-layout { grid-template-columns: 1fr; }
}

.ui-toc {
  position: sticky;
  top: calc(var(--topbar-h) + var(--sp-4));
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  box-shadow: var(--shadow-xs);
  max-height: calc(100vh - var(--topbar-h) - var(--sp-7));
  overflow-y: auto;
}

.ui-toc__title {
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 600;
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  margin: 0;
}

.ui-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ui-toc__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: var(--fs-14);
  color: var(--text-body);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  cursor: pointer;
}

.ui-toc__link::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1.5px solid var(--border-mid);
  background: var(--surface-0);
  flex-shrink: 0;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.ui-toc__link:hover {
  background: var(--surface-1);
  color: var(--text-strong);
}

.ui-toc__link.is-active {
  background: var(--state-info-soft);
  color: var(--color-primary-deep);
  font-weight: 500;
}

.ui-toc__link.is-active::before {
  border-color: var(--color-primary);
  background: var(--color-primary);
  box-shadow: inset 0 0 0 2px var(--surface-0);
}

/* ---------- Secciones ---------- */
.ui-section {
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  margin-bottom: var(--sp-5);
  box-shadow: var(--shadow-xs);
  scroll-margin-top: calc(var(--topbar-h) + var(--sp-4));
}

.ui-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border-soft);
}

.ui-section__title {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: 600;
  color: var(--text-strong);
  margin: 0;
  letter-spacing: 0.005em;
}

.ui-section__hint {
  font-size: var(--fs-13);
  color: var(--text-muted);
}

.ui-block {
  margin-bottom: var(--sp-6);
}

.ui-block:last-child { margin-bottom: 0; }

.ui-block__label {
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 600;
  margin: 0 0 var(--sp-3);
}

.ui-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

.ui-grid {
  display: grid;
  gap: var(--sp-4);
}

.ui-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ui-grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ---------- Sample card (genérico para mostrar previews) ---------- */
.sample {
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
}

.sample--clean {
  background: var(--surface-0);
}

/* ---------- Buttons extra (sizes, ghost) ---------- */
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-body);
}
.btn-ghost:hover {
  background: var(--surface-2);
  color: var(--text-strong);
}

/* ---------- Card variants ---------- */
.tt-card--media .tt-card__media {
  height: 140px;
  background: linear-gradient(135deg, var(--tt-empatia), var(--tt-azul-electric));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.tt-card--media .tt-card__media .icon {
  font-size: 56px;
  opacity: 0.85;
}

.tt-card--accent {
  border-left: 3px solid var(--color-primary);
}

/* ---------- Carousel ---------- */
.tt-carousel {
  position: relative;
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.tt-carousel__viewport {
  position: relative;
  height: 280px;
}

.tt-carousel__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--sp-3);
  text-align: center;
  padding: var(--sp-6);
  color: #fff;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}

.tt-carousel__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.tt-carousel__slide:nth-child(1) { background: linear-gradient(135deg, var(--tt-azul-electric), var(--tt-azul-profundo)); }
.tt-carousel__slide:nth-child(2) { background: linear-gradient(135deg, var(--tt-cherry), #7a0420); }
.tt-carousel__slide:nth-child(3) { background: linear-gradient(135deg, var(--tt-empatia), var(--tt-azul-electric)); color: var(--color-primary-deep); }

.tt-carousel__slide h4 {
  font-family: var(--font-display);
  font-size: var(--fs-32);
  margin: 0;
  letter-spacing: 0.01em;
}

.tt-carousel__slide p { margin: 0; opacity: 0.9; max-width: 500px; }

.tt-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 999px;
  background: rgba(255,255,255,0.85);
  border: 0;
  color: var(--text-strong);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.tt-carousel__nav:hover { background: #fff; }
.tt-carousel__nav--prev { left: var(--sp-4); }
.tt-carousel__nav--next { right: var(--sp-4); }

.tt-carousel__dots {
  position: absolute;
  bottom: var(--sp-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}

.tt-carousel__dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.5);
  border: 0;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), width var(--dur-fast) var(--ease-out);
}

.tt-carousel__dot.is-active {
  background: #fff;
  width: 24px;
}

/* ---------- List group ---------- */
.tt-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-0);
  overflow: hidden;
}

.tt-list__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-14);
  color: var(--text-body);
  transition: background var(--dur-fast) var(--ease-out);
}

.tt-list__item:last-child { border-bottom: 0; }
.tt-list__item:hover { background: var(--surface-1); }

.tt-list__item .icon { color: var(--text-soft); }
.tt-list__item .ms-auto { margin-left: auto; }

/* ---------- Pagination custom ---------- */
.tt-pagination {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-0);
  padding: 4px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}

.tt-pagination__btn {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--text-body);
  font-size: var(--fs-14);
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.tt-pagination__btn:hover:not(:disabled):not(.is-active) {
  background: var(--surface-1);
  color: var(--text-strong);
}

.tt-pagination__btn.is-active {
  background: var(--color-primary);
  color: #fff;
}

.tt-pagination__btn:disabled {
  color: var(--text-soft);
  cursor: not-allowed;
}

.tt-pagination__ellipsis {
  padding: 0 6px;
  color: var(--text-soft);
  font-size: var(--fs-14);
  user-select: none;
}

/* ---------- Spinners ---------- */
.tt-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--surface-2);
  border-top-color: var(--color-primary);
  border-radius: 999px;
  animation: tt-spin 0.7s linear infinite;
  display: inline-block;
}

.tt-spinner--sm { width: 18px; height: 18px; border-width: 2px; }
.tt-spinner--lg { width: 48px; height: 48px; border-width: 4px; }

@keyframes tt-spin {
  to { transform: rotate(360deg); }
}

.tt-dots {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  height: 32px;
}

.tt-dots span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-primary);
  animation: tt-dots-bounce 1.2s infinite ease-in-out;
}

.tt-dots span:nth-child(1) { animation-delay: -0.32s; }
.tt-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes tt-dots-bounce {
  0%, 80%, 100% { transform: scale(0.4); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

.tt-bar-loader {
  position: relative;
  width: 100%;
  height: 4px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}

.tt-bar-loader::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 30%;
  background: var(--color-primary);
  border-radius: 999px;
  animation: tt-bar-slide 1.4s ease-in-out infinite;
}

@keyframes tt-bar-slide {
  0%   { left: -30%; }
  100% { left: 100%; }
}

/* ---------- Avatars (extra) ---------- */
.avatar--xl { width: 64px; height: 64px; font-size: var(--fs-20); }
.avatar--xxl { width: 96px; height: 96px; font-size: var(--fs-24); }

.avatar--square { border-radius: var(--radius-md); }

.avatar.is-online,
.avatar.is-busy,
.avatar.is-away,
.avatar.is-offline {
  position: relative;
}

.avatar.is-online::after,
.avatar.is-busy::after,
.avatar.is-away::after,
.avatar.is-offline::after {
  content: "";
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 2px solid var(--surface-0);
}

.avatar.is-online::after  { background: var(--state-success); }
.avatar.is-busy::after    { background: var(--state-danger); }
.avatar.is-away::after    { background: var(--state-warning); }
.avatar.is-offline::after { background: var(--text-soft); }

.avatar--xl.is-online::after, .avatar--xl.is-busy::after, .avatar--xl.is-away::after, .avatar--xl.is-offline::after {
  width: 14px; height: 14px;
}

/* ---------- Image placeholders ---------- */
.tt-image {
  position: relative;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
}

.tt-image .icon { font-size: 36px; }

.tt-image--ratio-16x9 { aspect-ratio: 16 / 9; }
.tt-image--ratio-1x1  { aspect-ratio: 1 / 1; }
.tt-image--ratio-4x3  { aspect-ratio: 4 / 3; }

.tt-image--gradient-1 { background: linear-gradient(135deg, var(--tt-empatia), var(--tt-azul-electric)); color: #fff; }
.tt-image--gradient-2 { background: linear-gradient(135deg, var(--tt-cherry), #fce4e9); color: #fff; }
.tt-image--gradient-3 { background: linear-gradient(135deg, var(--tt-azul-profundo), var(--tt-azul-electric)); color: #fff; }

.tt-image__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--sp-3) var(--sp-4);
  background: linear-gradient(to top, rgba(0,0,0,0.65), transparent);
  color: #fff;
  font-size: var(--fs-13);
  font-weight: 500;
}

/* ---------- Progress (extras) ---------- */
.tt-progress {
  background: var(--surface-2);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
  position: relative;
}

.tt-progress--lg { height: 12px; }

.tt-progress__bar {
  height: 100%;
  background: var(--color-primary);
  border-radius: 999px;
  transition: width var(--dur-base) var(--ease-out);
}

.tt-progress__bar--success { background: var(--state-success); }
.tt-progress__bar--warning { background: var(--state-warning); }
.tt-progress__bar--danger  { background: var(--state-danger); }
.tt-progress__bar--striped {
  background-image: linear-gradient(45deg,
    rgba(255,255,255,0.18) 25%, transparent 25%,
    transparent 50%, rgba(255,255,255,0.18) 50%,
    rgba(255,255,255,0.18) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
  animation: tt-stripes 1s linear infinite;
}

@keyframes tt-stripes {
  from { background-position: 1rem 0; }
  to   { background-position: 0 0; }
}

.tt-progress-circle {
  --size: 80px;
  --p: 65;
  width: var(--size);
  height: var(--size);
  border-radius: 999px;
  background: conic-gradient(var(--color-primary) calc(var(--p) * 1%), var(--surface-2) 0);
  display: grid;
  place-items: center;
  position: relative;
}

.tt-progress-circle::before {
  content: "";
  position: absolute;
  inset: 8px;
  background: var(--surface-0);
  border-radius: 999px;
}

.tt-progress-circle__label {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--text-strong);
}

/* ---------- Accordion (custom skin) ---------- */
.tt-accordion {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-0);
}

.tt-accordion__item {
  border-bottom: 1px solid var(--border-soft);
}

.tt-accordion__item:last-child { border-bottom: 0; }

.tt-accordion__head {
  width: 100%;
  text-align: left;
  background: var(--surface-0);
  border: 0;
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-15);
  font-weight: 500;
  color: var(--text-strong);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.tt-accordion__head:hover { background: var(--surface-1); }

.tt-accordion__head .icon {
  margin-left: auto;
  color: var(--text-muted);
  transition: transform var(--dur-base) var(--ease-out);
}

.tt-accordion__item.is-open .tt-accordion__head { background: var(--state-info-soft); color: var(--color-primary-deep); }
.tt-accordion__item.is-open .tt-accordion__head .icon { transform: rotate(180deg); color: var(--color-primary-deep); }

.tt-accordion__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}

.tt-accordion__body > div {
  overflow: hidden;
}

.tt-accordion__item.is-open .tt-accordion__body { grid-template-rows: 1fr; }

.tt-accordion__body-inner {
  padding: var(--sp-3) var(--sp-5) var(--sp-5);
  font-size: var(--fs-14);
  color: var(--text-body);
  line-height: 1.6;
}

/* ---------- Date / Time picker ---------- */
.tt-datepicker {
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  width: 320px;
  box-shadow: var(--shadow-md);
}

.tt-datepicker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}

.tt-datepicker__title {
  font-family: var(--font-display);
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--text-strong);
}

.tt-datepicker__nav {
  display: flex;
  gap: 4px;
}

.tt-datepicker__weekdays,
.tt-datepicker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.tt-datepicker__weekday {
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  padding: 6px 0;
  text-transform: uppercase;
}

.tt-datepicker__day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: var(--fs-13);
  color: var(--text-body);
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.tt-datepicker__day:hover:not(:disabled) {
  background: var(--surface-1);
  color: var(--text-strong);
}

.tt-datepicker__day.is-other { color: var(--text-soft); }
.tt-datepicker__day.is-today { font-weight: 700; color: var(--color-primary); }
.tt-datepicker__day.is-selected {
  background: var(--color-primary);
  color: #fff;
}

.tt-datepicker__footer {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.tt-timepicker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  background: var(--surface-0);
}

.tt-timepicker input {
  width: 32px;
  border: 0;
  background: transparent;
  font-size: var(--fs-15);
  font-weight: 500;
  color: var(--text-strong);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.tt-timepicker input:focus { outline: none; }

.tt-timepicker__sep {
  color: var(--text-muted);
  font-weight: 500;
}

.tt-timepicker__period {
  margin-left: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  background: var(--surface-1);
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--text-body);
  border: 0;
  cursor: pointer;
}

/* ---------- Video frame ---------- */
.tt-video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #1a0033;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
}

.tt-video__thumb {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--tt-azul-profundo), var(--tt-cherry));
  opacity: 0.85;
}

.tt-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur-base) var(--ease-out);
}

.tt-video:hover .tt-video__play { transform: translate(-50%, -50%) scale(1.08); }

.tt-video__play .icon {
  font-size: 36px;
  color: var(--color-accent);
  margin-left: 4px;
  font-variation-settings: 'FILL' 1;
}

.tt-video__bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: #fff;
  font-size: var(--fs-13);
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}

.tt-video__bar .icon { font-size: 18px; }

.tt-video__progress {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.3);
  border-radius: 999px;
  position: relative;
}

.tt-video__progress::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 35%;
  background: var(--color-accent-bright);
  border-radius: 999px;
}

/* ---------- Tooltip / Popover (custom static demo, not bootstrap auto) ---------- */
.tt-tooltip-host {
  position: relative;
  display: inline-block;
}

.tt-tooltip-host[data-show="true"] .tt-tooltip,
.tt-tooltip-host:hover .tt-tooltip {
  opacity: 1;
  transform: translate(-50%, -8px);
  pointer-events: auto;
}

.tt-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 0);
  background: var(--text-strong);
  color: #fff;
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  font-size: var(--fs-12);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  z-index: 10;
}

.tt-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--text-strong);
}

.tt-popover {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-4);
  min-width: 240px;
  z-index: 10;
  font-size: var(--fs-13);
  color: var(--text-body);
}

.tt-popover__title {
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: 6px;
  font-size: var(--fs-14);
}

.tt-popover::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--surface-0);
}

/* ---------- Tabs (skin alternativo) ---------- */
.tt-tabs-pill {
  display: inline-flex;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: 4px;
  gap: 2px;
}

.tt-tabs-pill__btn {
  padding: 8px 16px;
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.tt-tabs-pill__btn:hover:not(.is-active) { color: var(--text-strong); }

.tt-tabs-pill__btn.is-active {
  background: var(--surface-0);
  color: var(--color-primary-deep);
  box-shadow: var(--shadow-xs);
}

.tt-tab-panel {
  display: none;
  padding: var(--sp-4) 0 0;
  font-size: var(--fs-14);
  color: var(--text-body);
}

.tt-tab-panel.is-active { display: block; }

/* ---------- Nav (vertical/pills) ---------- */
.tt-nav-pills {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--sp-2);
  width: 240px;
}

.tt-nav-pills__link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 9px 12px;
  font-size: var(--fs-14);
  color: var(--text-body);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.tt-nav-pills__link .icon { color: var(--text-soft); font-size: 20px; }

.tt-nav-pills__link:hover {
  background: var(--surface-1);
  color: var(--text-strong);
}

.tt-nav-pills__link.is-active {
  background: var(--color-primary);
  color: #fff;
}

.tt-nav-pills__link.is-active .icon { color: #fff; }

.tt-nav-pills__link .ms-auto.badge {
  margin-left: auto;
}

/* ---------- Breadcrumb (skin) ---------- */
.tt-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-13);
  color: var(--text-muted);
  list-style: none;
  margin: 0;
  padding: 0;
}

.tt-breadcrumb a { color: var(--text-muted); }
.tt-breadcrumb a:hover { color: var(--color-primary); }
.tt-breadcrumb li.is-current { color: var(--text-strong); font-weight: 500; }
.tt-breadcrumb__sep { color: var(--text-soft); }

/* ---------- Modal demo trigger ---------- */
.tt-modal-demo {
  /* nothing custom — uses bootstrap modal classes */
}

/* ---------- Code chip ---------- */
.code-chip {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: var(--surface-2);
  color: var(--color-primary-deep);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
}
/* =========================================================
   TT-Alert · SweetAlert-style toasts & modals
   API: window.ttAlert.success({...}), .error, .warning, .info, .question, .toast
   ========================================================= */

.ttalert-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 12, 50, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  z-index: 1080;
  opacity: 0;
  transition: opacity 0.25s ease-out;
  padding: var(--sp-5);
}

.ttalert-overlay.is-visible { opacity: 1; }

.ttalert {
  background: var(--surface-0);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(20, 12, 50, 0.28);
  width: 100%;
  max-width: 460px;
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  text-align: center;
  transform: scale(0.85);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), opacity 0.25s ease-out;
}

.ttalert-overlay.is-visible .ttalert {
  transform: scale(1);
  opacity: 1;
}

.ttalert__icon {
  width: 80px;
  height: 80px;
  border-radius: 999px;
  margin: 0 auto var(--sp-4);
  display: grid;
  place-items: center;
  position: relative;
}

.ttalert__icon .icon {
  font-size: 48px;
  font-variation-settings: 'FILL' 1, 'wght' 500;
  animation: ttalert-icon-pop 0.5s cubic-bezier(.34,1.56,.64,1) 0.1s backwards;
}

@keyframes ttalert-icon-pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.ttalert--success .ttalert__icon { background: var(--state-success-soft); }
.ttalert--success .ttalert__icon .icon { color: var(--state-success); }

.ttalert--error .ttalert__icon { background: var(--state-danger-soft); }
.ttalert--error .ttalert__icon .icon { color: var(--state-danger); }

.ttalert--warning .ttalert__icon { background: var(--state-warning-soft); }
.ttalert--warning .ttalert__icon .icon { color: var(--state-warning); }

.ttalert--info .ttalert__icon { background: var(--state-info-soft); }
.ttalert--info .ttalert__icon .icon { color: var(--state-info); }

.ttalert--question .ttalert__icon { background: var(--surface-2); }
.ttalert--question .ttalert__icon .icon { color: var(--text-body); }

.ttalert__icon::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 3px solid currentColor;
  opacity: 0;
  animation: ttalert-ring 0.6s ease-out 0.1s;
}

.ttalert--success .ttalert__icon::before { color: var(--state-success); }
.ttalert--error   .ttalert__icon::before { color: var(--state-danger); }
.ttalert--warning .ttalert__icon::before { color: var(--state-warning); }
.ttalert--info    .ttalert__icon::before { color: var(--state-info); }
.ttalert--question .ttalert__icon::before { display: none; }

@keyframes ttalert-ring {
  0%   { opacity: 0.6; transform: scale(0.8); }
  100% { opacity: 0;   transform: scale(1.1); }
}

.ttalert__title {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: 600;
  color: var(--text-strong);
  margin: 0 0 var(--sp-2);
  letter-spacing: 0.005em;
}

.ttalert__text {
  font-size: var(--fs-14);
  color: var(--text-muted);
  margin: 0 0 var(--sp-5);
  line-height: 1.55;
}

.ttalert__input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  font-size: var(--fs-14);
  margin-bottom: var(--sp-5);
  font-family: inherit;
}

.ttalert__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.ttalert__actions {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
}

.ttalert__actions .btn {
  min-width: 110px;
  padding: 10px 20px;
}

/* ---------- Toast variant ---------- */
.ttalert-toast-stack {
  position: fixed;
  top: var(--sp-5);
  right: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1090;
  max-width: calc(100vw - var(--sp-7));
  pointer-events: none;
}

.ttalert-toast {
  pointer-events: auto;
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 14px 16px 14px 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 320px;
  max-width: 420px;
  position: relative;
  overflow: hidden;
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), opacity 0.25s ease-out;
}

.ttalert-toast.is-visible { transform: translateX(0); opacity: 1; }

.ttalert-toast.is-leaving {
  transform: translateX(120%);
  opacity: 0;
}

.ttalert-toast__icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}

.ttalert-toast__icon .icon {
  font-size: 20px;
  font-variation-settings: 'FILL' 1;
}

.ttalert-toast--success .ttalert-toast__icon { background: var(--state-success-soft); }
.ttalert-toast--success .ttalert-toast__icon .icon { color: var(--state-success); }
.ttalert-toast--error .ttalert-toast__icon { background: var(--state-danger-soft); }
.ttalert-toast--error .ttalert-toast__icon .icon { color: var(--state-danger); }
.ttalert-toast--warning .ttalert-toast__icon { background: var(--state-warning-soft); }
.ttalert-toast--warning .ttalert-toast__icon .icon { color: var(--state-warning); }
.ttalert-toast--info .ttalert-toast__icon { background: var(--state-info-soft); }
.ttalert-toast--info .ttalert-toast__icon .icon { color: var(--state-info); }

.ttalert-toast__body { flex: 1; min-width: 0; }

.ttalert-toast__title {
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--text-strong);
  margin: 0 0 2px;
}

.ttalert-toast__text {
  font-size: var(--fs-13);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.45;
}

.ttalert-toast__close {
  background: transparent;
  border: 0;
  color: var(--text-soft);
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
}

.ttalert-toast__close:hover {
  background: var(--surface-2);
  color: var(--text-strong);
}

.ttalert-toast__progress {
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  background: var(--color-primary);
  width: 100%;
  transform-origin: left;
  animation: ttalert-toast-progress linear forwards;
}

.ttalert-toast--success .ttalert-toast__progress { background: var(--state-success); }
.ttalert-toast--error   .ttalert-toast__progress { background: var(--state-danger); }
.ttalert-toast--warning .ttalert-toast__progress { background: var(--state-warning); }
.ttalert-toast--info    .ttalert-toast__progress { background: var(--state-info); }

@keyframes ttalert-toast-progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}


/* =========================================================
   TEMA: Océano
   Gama azul marino + teal apagado + sage verde
   Imagen de referencia: steel-blue / sage palette
   ========================================================= */
[data-theme="oceano"] {
  /* Paleta propia */
  --tt-navy:         #253d5f;
  --tt-navy-deep:    #1a2d45;
  --tt-slate:        #7a96b0;
  --tt-teal:         #8aaca0;
  --tt-sage:         #bbd3ba;
  --tt-slate-light:  #b4c8d4;

  /* Sidebar */
  --sidebar-bg:            #253d5f;

  /* Roles semánticos */
  --color-primary:         #253d5f;
  --color-primary-deep:    #1a2d45;
  --color-primary-soft:    #e6eef5;
  --color-accent:          #8aaca0;
  --color-accent-bright:   #bbd3ba;

  /* Superficies */
  --surface-0:             #ffffff;
  --surface-1:             #f0f5f8;
  --surface-2:             #e2ecf1;
  --surface-3:             #d2e4ec;
  --surface-inverse:       #1a2d45;

  /* Texto */
  --text-strong:           #1a2d45;
  --text-body:             #253d5f;
  --text-muted:            #5a7a8e;
  --text-soft:             #8aabb8;
  --text-on-dark:          #ffffff;
  --text-on-dark-muted:    #8aaca0;

  /* Bordes */
  --border-soft:           #d0e2ec;
  --border-mid:            #b8d0dc;

  /* Estado */
  --state-info:            #253d5f;
  --state-info-soft:       #e6eef5;

  /* Foco */
  --shadow-focus:          0 0 0 4px rgba(37, 61, 95, 0.2);

  /* Bootstrap overrides */
  --bs-primary:            #253d5f;
  --bs-primary-rgb:        37, 61, 95;
  --bs-secondary:          #1a2d45;
  --bs-secondary-rgb:      26, 45, 69;
  --bs-body-bg:            #f0f5f8;
  --bs-body-color:         #253d5f;
  --bs-border-color:       #d0e2ec;
  --bs-link-color:         #253d5f;
  --bs-link-hover-color:   #1a2d45;
  --bs-focus-ring-color:   rgba(37, 61, 95, 0.2);

  /* Bootstrap 5.3 — variables de componentes heredan --color-primary para responder
     tanto al preset como a la mezcla de colores personalizada */
  --bs-progress-bar-bg:                var(--color-primary);
  --bs-pagination-active-bg:           var(--color-primary);
  --bs-pagination-active-border-color: var(--color-primary);
  --bs-pagination-color:               var(--color-primary);
  --bs-pagination-hover-color:         var(--color-primary-deep);
  --bs-nav-link-color:                 var(--color-primary);
  --bs-nav-link-hover-color:           var(--color-primary-deep);
  --bs-nav-tabs-link-active-color:     var(--color-primary);
  --bs-dropdown-link-active-bg:        var(--color-primary);
  --bs-list-group-active-bg:           var(--color-primary);
  --bs-list-group-active-border-color: var(--color-primary);
}

/* Los componentes Bootstrap heredan --color-primary vía las reglas genéricas de app.css.
   Solo se necesitan overrides de variables de sistema que Bootstrap no hereda de :root. */
[data-theme="oceano"] .page-item.active .page-link {
  background-color: var(--color-primary);
  border-color:     var(--color-primary);
}
[data-theme="oceano"] ::selection { background: var(--color-primary-soft); color: var(--color-primary-deep); }

/* Ajustes específicos del sidebar para tema oceano */
[data-theme="oceano"] .sidebar__link.is-active,
[data-theme="oceano"] .sidebar__link:hover {
  background: rgba(255,255,255,0.12);
}
[data-theme="oceano"] .sidebar__sub {
  border-left-color: rgba(138, 172, 160, 0.4);
}
[data-theme="oceano"] .sidebar__sublink.is-active {
  color: var(--tt-teal);
}

/* Badges y estados */
[data-theme="oceano"] .bg-primary-soft {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary-deep) !important;
}
[data-theme="oceano"] .bg-empatia {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary-deep) !important;
}

/* =========================================================
   TEMA: Bosque
   Gama verde oscuro / teal profundo
   Paleta: #051F20 · #0B2B26 · #163832 · #235347 · #8EB69B · #DAF1DE
   ========================================================= */
[data-theme="bosque"] {
  /* Paleta propia */
  --tt-forest-darkest:  #051F20;
  --tt-forest-dark:     #163832;
  --tt-forest:          #235347;
  --tt-forest-mid:      #8EB69B;
  --tt-forest-light:    #DAF1DE;

  /* Sidebar */
  --sidebar-bg:            #051F20;

  /* Roles semánticos */
  --color-primary:         #235347;
  --color-primary-deep:    #163832;
  --color-primary-soft:    #DAF1DE;
  --color-accent:          #8EB69B;
  --color-accent-bright:   #DAF1DE;

  /* Superficies */
  --surface-0:             #ffffff;
  --surface-1:             #f0f7f3;
  --surface-2:             #e3efe8;
  --surface-3:             #d4e7da;
  --surface-inverse:       #163832;

  /* Texto */
  --text-strong:           #051F20;
  --text-body:             #163832;
  --text-muted:            #3a6655;
  --text-soft:             #6a9980;
  --text-on-dark:          #DAF1DE;
  --text-on-dark-muted:    #8EB69B;

  /* Bordes */
  --border-soft:           #c8e4d0;
  --border-mid:            #a8cdb8;

  /* Estado */
  --state-info:            #235347;
  --state-info-soft:       #DAF1DE;

  /* Foco */
  --shadow-focus:          0 0 0 4px rgba(35, 83, 71, 0.2);

  /* Bootstrap overrides */
  --bs-primary:            #235347;
  --bs-primary-rgb:        35, 83, 71;
  --bs-secondary:          #163832;
  --bs-secondary-rgb:      22, 56, 50;
  --bs-body-bg:            #f0f7f3;
  --bs-body-color:         #163832;
  --bs-border-color:       #c8e4d0;
  --bs-link-color:         #235347;
  --bs-link-hover-color:   #163832;
  --bs-focus-ring-color:   rgba(35, 83, 71, 0.2);

  --bs-progress-bar-bg:                var(--color-primary);
  --bs-pagination-active-bg:           var(--color-primary);
  --bs-pagination-active-border-color: var(--color-primary);
  --bs-pagination-color:               var(--color-primary);
  --bs-pagination-hover-color:         var(--color-primary-deep);
  --bs-nav-link-color:                 var(--color-primary);
  --bs-nav-link-hover-color:           var(--color-primary-deep);
  --bs-nav-tabs-link-active-color:     var(--color-primary);
  --bs-dropdown-link-active-bg:        var(--color-primary);
  --bs-list-group-active-bg:           var(--color-primary);
  --bs-list-group-active-border-color: var(--color-primary);
}

[data-theme="bosque"] .page-item.active .page-link {
  background-color: var(--color-primary);
  border-color:     var(--color-primary);
}
[data-theme="bosque"] ::selection { background: var(--color-primary-soft); color: var(--color-primary-deep); }

[data-theme="bosque"] .sidebar__link.is-active,
[data-theme="bosque"] .sidebar__link:hover {
  background: rgba(255,255,255,0.12);
}
[data-theme="bosque"] .sidebar__sub {
  border-left-color: rgba(142, 182, 155, 0.4);
}
[data-theme="bosque"] .sidebar__sublink.is-active {
  color: var(--tt-forest-mid);
}

[data-theme="bosque"] .bg-primary-soft {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary-deep) !important;
}
[data-theme="bosque"] .bg-empatia {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary-deep) !important;
}


/* =========================================================
   TEMA: Olivo
   Gama verde-amarillo / oliva
   Paleta: #CFCC36 · #A9B733 · #849F2F · #64872A · #496F25 · #33571E · #203E17
   ========================================================= */
[data-theme="olivo"] {
  /* Paleta propia */
  --tt-olive-bright:   #CFCC36;
  --tt-olive-light:    #A9B733;
  --tt-olive:          #849F2F;
  --tt-olive-mid:      #496F25;
  --tt-olive-dark:     #33571E;
  --tt-olive-darkest:  #203E17;

  /* Sidebar */
  --sidebar-bg:            #203E17;

  /* Roles semánticos */
  --color-primary:         #496F25;
  --color-primary-deep:    #33571E;
  --color-primary-soft:    #eef3d5;
  --color-accent:          #849F2F;
  --color-accent-bright:   #CFCC36;

  /* Superficies */
  --surface-0:             #ffffff;
  --surface-1:             #f5f7e8;
  --surface-2:             #eaedcc;
  --surface-3:             #dde1b5;
  --surface-inverse:       #33571E;

  /* Texto */
  --text-strong:           #203E17;
  --text-body:             #33571E;
  --text-muted:            #5c7a2a;
  --text-soft:             #849F2F;
  --text-on-dark:          #CFCC36;
  --text-on-dark-muted:    #A9B733;

  /* Bordes */
  --border-soft:           #d8e0a8;
  --border-mid:            #c4cf88;

  /* Estado */
  --state-info:            #496F25;
  --state-info-soft:       #eef3d5;

  /* Foco */
  --shadow-focus:          0 0 0 4px rgba(73, 111, 37, 0.2);

  /* Bootstrap overrides */
  --bs-primary:            #496F25;
  --bs-primary-rgb:        73, 111, 37;
  --bs-secondary:          #33571E;
  --bs-secondary-rgb:      51, 87, 30;
  --bs-body-bg:            #f5f7e8;
  --bs-body-color:         #33571E;
  --bs-border-color:       #d8e0a8;
  --bs-link-color:         #496F25;
  --bs-link-hover-color:   #33571E;
  --bs-focus-ring-color:   rgba(73, 111, 37, 0.2);

  --bs-progress-bar-bg:                var(--color-primary);
  --bs-pagination-active-bg:           var(--color-primary);
  --bs-pagination-active-border-color: var(--color-primary);
  --bs-pagination-color:               var(--color-primary);
  --bs-pagination-hover-color:         var(--color-primary-deep);
  --bs-nav-link-color:                 var(--color-primary);
  --bs-nav-link-hover-color:           var(--color-primary-deep);
  --bs-nav-tabs-link-active-color:     var(--color-primary);
  --bs-dropdown-link-active-bg:        var(--color-primary);
  --bs-list-group-active-bg:           var(--color-primary);
  --bs-list-group-active-border-color: var(--color-primary);
}

[data-theme="olivo"] .page-item.active .page-link {
  background-color: var(--color-primary);
  border-color:     var(--color-primary);
}
[data-theme="olivo"] ::selection { background: var(--color-primary-soft); color: var(--color-primary-deep); }

[data-theme="olivo"] .sidebar__link.is-active,
[data-theme="olivo"] .sidebar__link:hover {
  background: rgba(255,255,255,0.12);
}
[data-theme="olivo"] .sidebar__sub {
  border-left-color: rgba(132, 159, 47, 0.4);
}
[data-theme="olivo"] .sidebar__sublink.is-active {
  color: var(--tt-olive);
}

[data-theme="olivo"] .bg-primary-soft {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary-deep) !important;
}
[data-theme="olivo"] .bg-empatia {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary-deep) !important;
}


/* =========================================================
   TEMA: Marina
   Azul marino profundo + amarillo dorado
   Paleta: #000814 · #001D3D · #003566 · #FFC300 · #FFD60A · #F3F2DB
   ========================================================= */
[data-theme="marina"] {
  /* Paleta propia */
  --tt-navy-black:     #000814;
  --tt-navy:           #001D3D;
  --tt-navy-mid:       #003566;
  --tt-gold:           #FFC300;
  --tt-gold-light:     #FFD60A;
  --tt-cream:          #F3F2DB;

  /* Sidebar */
  --sidebar-bg:            #001D3D;

  /* Roles semánticos */
  --color-primary:         #003566;
  --color-primary-deep:    #001D3D;
  --color-primary-soft:    #e8eef5;
  --color-accent:          #FFC300;
  --color-accent-bright:   #FFD60A;

  /* Superficies */
  --surface-0:             #ffffff;
  --surface-1:             #F3F2DB;
  --surface-2:             #e8e7c4;
  --surface-3:             #d9d8aa;
  --surface-inverse:       #001D3D;

  /* Texto */
  --text-strong:           #000814;
  --text-body:             #001D3D;
  --text-muted:            #2a4a6e;
  --text-soft:             #5a7a9e;
  --text-on-dark:          #FFC300;
  --text-on-dark-muted:    #FFD60A;

  /* Bordes */
  --border-soft:           #d0d8e8;
  --border-mid:            #a8bcd4;

  /* Estado */
  --state-info:            #003566;
  --state-info-soft:       #e8eef5;

  /* Foco */
  --shadow-focus:          0 0 0 4px rgba(0, 53, 102, 0.2);

  /* Bootstrap overrides */
  --bs-primary:            #003566;
  --bs-primary-rgb:        0, 53, 102;
  --bs-secondary:          #001D3D;
  --bs-secondary-rgb:      0, 29, 61;
  --bs-body-bg:            #F3F2DB;
  --bs-body-color:         #001D3D;
  --bs-border-color:       #d0d8e8;
  --bs-link-color:         #003566;
  --bs-link-hover-color:   #001D3D;
  --bs-focus-ring-color:   rgba(0, 53, 102, 0.2);

  --bs-progress-bar-bg:                var(--color-primary);
  --bs-pagination-active-bg:           var(--color-primary);
  --bs-pagination-active-border-color: var(--color-primary);
  --bs-pagination-color:               var(--color-primary);
  --bs-pagination-hover-color:         var(--color-primary-deep);
  --bs-nav-link-color:                 var(--color-primary);
  --bs-nav-link-hover-color:           var(--color-primary-deep);
  --bs-nav-tabs-link-active-color:     var(--color-primary);
  --bs-dropdown-link-active-bg:        var(--color-primary);
  --bs-list-group-active-bg:           var(--color-primary);
  --bs-list-group-active-border-color: var(--color-primary);
}

[data-theme="marina"] .page-item.active .page-link {
  background-color: var(--color-primary);
  border-color:     var(--color-primary);
}
[data-theme="marina"] ::selection { background: var(--color-primary-soft); color: var(--color-primary-deep); }

[data-theme="marina"] .sidebar__link.is-active,
[data-theme="marina"] .sidebar__link:hover {
  background: rgba(255,255,255,0.12);
}
[data-theme="marina"] .sidebar__sub {
  border-left-color: rgba(255, 195, 0, 0.4);
}
[data-theme="marina"] .sidebar__sublink.is-active {
  color: var(--tt-gold);
}

[data-theme="marina"] .bg-primary-soft {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary-deep) !important;
}
[data-theme="marina"] .bg-empatia {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary-deep) !important;
}


/* =========================================================
   TEMA: Salvia
   Gama sage / verde bosque cálido
   Paleta: #DAD7CD · #A3B18A · #588157 · #3A5A40 · #344E41
   ========================================================= */
[data-theme="salvia"] {
  /* Paleta propia */
  --tt-sage-cream:    #DAD7CD;
  --tt-sage-light:    #A3B18A;
  --tt-sage:          #588157;
  --tt-sage-forest:   #3A5A40;
  --tt-sage-dark:     #344E41;

  /* Sidebar */
  --sidebar-bg:            #344E41;

  /* Roles semánticos */
  --color-primary:         #3A5A40;
  --color-primary-deep:    #344E41;
  --color-primary-soft:    #eef2ea;
  --color-accent:          #588157;
  --color-accent-bright:   #A3B18A;

  /* Superficies */
  --surface-0:             #ffffff;
  --surface-1:             #f7f6f3;
  --surface-2:             #eeece6;
  --surface-3:             #e3e1d8;
  --surface-inverse:       #344E41;

  /* Texto */
  --text-strong:           #1e2e22;
  --text-body:             #344E41;
  --text-muted:            #5a7460;
  --text-soft:             #8a9e82;
  --text-on-dark:          #DAD7CD;
  --text-on-dark-muted:    #A3B18A;

  /* Bordes */
  --border-soft:           #d8ddd0;
  --border-mid:            #bcc4b0;

  /* Estado */
  --state-info:            #3A5A40;
  --state-info-soft:       #eef2ea;

  /* Foco */
  --shadow-focus:          0 0 0 4px rgba(58, 90, 64, 0.2);

  /* Bootstrap overrides */
  --bs-primary:            #3A5A40;
  --bs-primary-rgb:        58, 90, 64;
  --bs-secondary:          #344E41;
  --bs-secondary-rgb:      52, 78, 65;
  --bs-body-bg:            #f7f6f3;
  --bs-body-color:         #344E41;
  --bs-border-color:       #d8ddd0;
  --bs-link-color:         #3A5A40;
  --bs-link-hover-color:   #344E41;
  --bs-focus-ring-color:   rgba(58, 90, 64, 0.2);

  --bs-progress-bar-bg:                var(--color-primary);
  --bs-pagination-active-bg:           var(--color-primary);
  --bs-pagination-active-border-color: var(--color-primary);
  --bs-pagination-color:               var(--color-primary);
  --bs-pagination-hover-color:         var(--color-primary-deep);
  --bs-nav-link-color:                 var(--color-primary);
  --bs-nav-link-hover-color:           var(--color-primary-deep);
  --bs-nav-tabs-link-active-color:     var(--color-primary);
  --bs-dropdown-link-active-bg:        var(--color-primary);
  --bs-list-group-active-bg:           var(--color-primary);
  --bs-list-group-active-border-color: var(--color-primary);
}

[data-theme="salvia"] .page-item.active .page-link {
  background-color: var(--color-primary);
  border-color:     var(--color-primary);
}
[data-theme="salvia"] ::selection { background: var(--color-primary-soft); color: var(--color-primary-deep); }

[data-theme="salvia"] .sidebar__link.is-active,
[data-theme="salvia"] .sidebar__link:hover {
  background: rgba(255,255,255,0.12);
}
[data-theme="salvia"] .sidebar__sub {
  border-left-color: rgba(163, 177, 138, 0.4);
}
[data-theme="salvia"] .sidebar__sublink.is-active {
  color: var(--tt-sage-light);
}

[data-theme="salvia"] .bg-primary-soft {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary-deep) !important;
}
[data-theme="salvia"] .bg-empatia {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary-deep) !important;
}


/* =========================================================
   TEMA: Azul Intenso
   Azul profundo / cian eléctrico
   Paleta: #03045E · #0077B6 · #00B4D8 · #90E0EF · #CAF0F8
   ========================================================= */
[data-theme="azul-intenso"] {
  /* Paleta propia */
  --tt-azure-darkest:  #03045E;
  --tt-azure-deep:     #0077B6;
  --tt-azure:          #00B4D8;
  --tt-azure-light:    #90E0EF;
  --tt-azure-softest:  #CAF0F8;

  /* Sidebar */
  --sidebar-bg:            #03045E;

  /* Roles semánticos */
  --color-primary:         #0077B6;
  --color-primary-deep:    #03045E;
  --color-primary-soft:    #e0f4ff;
  --color-accent:          #00B4D8;
  --color-accent-bright:   #90E0EF;

  /* Superficies */
  --surface-0:             #ffffff;
  --surface-1:             #f0faff;
  --surface-2:             #e0f4ff;
  --surface-3:             #cce8f8;
  --surface-inverse:       #03045E;

  /* Texto */
  --text-strong:           #03045E;
  --text-body:             #0b3e6e;
  --text-muted:            #3a78a8;
  --text-soft:             #7aabc8;
  --text-on-dark:          #CAF0F8;
  --text-on-dark-muted:    #90E0EF;

  /* Bordes */
  --border-soft:           #c0e4f4;
  --border-mid:            #90c8e4;

  /* Estado */
  --state-info:            #0077B6;
  --state-info-soft:       #e0f4ff;

  /* Foco */
  --shadow-focus:          0 0 0 4px rgba(0, 119, 182, 0.2);

  /* Bootstrap overrides */
  --bs-primary:            #0077B6;
  --bs-primary-rgb:        0, 119, 182;
  --bs-secondary:          #03045E;
  --bs-secondary-rgb:      3, 4, 94;
  --bs-body-bg:            #f0faff;
  --bs-body-color:         #0b3e6e;
  --bs-border-color:       #c0e4f4;
  --bs-link-color:         #0077B6;
  --bs-link-hover-color:   #03045E;
  --bs-focus-ring-color:   rgba(0, 119, 182, 0.2);

  --bs-progress-bar-bg:                var(--color-primary);
  --bs-pagination-active-bg:           var(--color-primary);
  --bs-pagination-active-border-color: var(--color-primary);
  --bs-pagination-color:               var(--color-primary);
  --bs-pagination-hover-color:         var(--color-primary-deep);
  --bs-nav-link-color:                 var(--color-primary);
  --bs-nav-link-hover-color:           var(--color-primary-deep);
  --bs-nav-tabs-link-active-color:     var(--color-primary);
  --bs-dropdown-link-active-bg:        var(--color-primary);
  --bs-list-group-active-bg:           var(--color-primary);
  --bs-list-group-active-border-color: var(--color-primary);
}

[data-theme="azul-intenso"] .page-item.active .page-link {
  background-color: var(--color-primary);
  border-color:     var(--color-primary);
}
[data-theme="azul-intenso"] ::selection { background: var(--color-primary-soft); color: var(--color-primary-deep); }

[data-theme="azul-intenso"] .sidebar__link.is-active,
[data-theme="azul-intenso"] .sidebar__link:hover {
  background: rgba(255,255,255,0.12);
}
[data-theme="azul-intenso"] .sidebar__sub {
  border-left-color: rgba(0, 180, 216, 0.4);
}
[data-theme="azul-intenso"] .sidebar__sublink.is-active {
  color: var(--tt-azure);
}

[data-theme="azul-intenso"] .bg-primary-soft {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary-deep) !important;
}
[data-theme="azul-intenso"] .bg-empatia {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary-deep) !important;
}


/* =========================================================
   TEMA: Ciruela
   Durazno cálido → frambuesa → vino → ciruela oscura
   Paleta: #FFBB94 · #FB9590 · #DC586D · #A33757 · #852E4E · #4C1D3D
   ========================================================= */
[data-theme="ciruela"] {
  /* Paleta propia */
  --tt-peach:         #FFBB94;
  --tt-coral:         #FB9590;
  --tt-raspberry:     #DC586D;
  --tt-wine:          #A33757;
  --tt-burgundy:      #852E4E;
  --tt-plum:          #4C1D3D;

  /* Sidebar */
  --sidebar-bg:            #4C1D3D;

  /* Roles semánticos */
  --color-primary:         #A33757;
  --color-primary-deep:    #852E4E;
  --color-primary-soft:    #fde8ee;
  --color-accent:          #DC586D;
  --color-accent-bright:   #FB9590;

  /* Superficies */
  --surface-0:             #ffffff;
  --surface-1:             #fff0f2;
  --surface-2:             #fde4e8;
  --surface-3:             #f8d0d8;
  --surface-inverse:       #4C1D3D;

  /* Texto */
  --text-strong:           #2a0a18;
  --text-body:             #4C1D3D;
  --text-muted:            #8a3a58;
  --text-soft:             #c07090;
  --text-on-dark:          #FFBB94;
  --text-on-dark-muted:    #FB9590;

  /* Bordes */
  --border-soft:           #f0c8d4;
  --border-mid:            #e0a0b4;

  /* Estado */
  --state-info:            #A33757;
  --state-info-soft:       #fde8ee;

  /* Foco */
  --shadow-focus:          0 0 0 4px rgba(163, 55, 87, 0.2);

  /* Bootstrap overrides */
  --bs-primary:            #A33757;
  --bs-primary-rgb:        163, 55, 87;
  --bs-secondary:          #852E4E;
  --bs-secondary-rgb:      133, 46, 78;
  --bs-body-bg:            #fff0f2;
  --bs-body-color:         #4C1D3D;
  --bs-border-color:       #f0c8d4;
  --bs-link-color:         #A33757;
  --bs-link-hover-color:   #852E4E;
  --bs-focus-ring-color:   rgba(163, 55, 87, 0.2);

  --bs-progress-bar-bg:                var(--color-primary);
  --bs-pagination-active-bg:           var(--color-primary);
  --bs-pagination-active-border-color: var(--color-primary);
  --bs-pagination-color:               var(--color-primary);
  --bs-pagination-hover-color:         var(--color-primary-deep);
  --bs-nav-link-color:                 var(--color-primary);
  --bs-nav-link-hover-color:           var(--color-primary-deep);
  --bs-nav-tabs-link-active-color:     var(--color-primary);
  --bs-dropdown-link-active-bg:        var(--color-primary);
  --bs-list-group-active-bg:           var(--color-primary);
  --bs-list-group-active-border-color: var(--color-primary);
}

[data-theme="ciruela"] .page-item.active .page-link {
  background-color: var(--color-primary);
  border-color:     var(--color-primary);
}
[data-theme="ciruela"] ::selection { background: var(--color-primary-soft); color: var(--color-primary-deep); }

[data-theme="ciruela"] .sidebar__link.is-active,
[data-theme="ciruela"] .sidebar__link:hover {
  background: rgba(255,255,255,0.12);
}
[data-theme="ciruela"] .sidebar__sub {
  border-left-color: rgba(220, 88, 109, 0.4);
}
[data-theme="ciruela"] .sidebar__sublink.is-active {
  color: var(--tt-coral);
}

[data-theme="ciruela"] .bg-primary-soft {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary-deep) !important;
}
[data-theme="ciruela"] .bg-empatia {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary-deep) !important;
}


/* =========================================================
   TEMA: Tierra
   Espresso → mocha → caramelo → crema cálida
   Paleta: #3E2522 · #8C6E63 · #D3A376 · #FFE0B2 · #FFF2DF
   ========================================================= */
[data-theme="tierra"] {
  --tt-espresso:    #3E2522;
  --tt-mocha:       #8C6E63;
  --tt-caramel:     #D3A376;
  --tt-cream:       #FFE0B2;
  --tt-linen:       #FFF2DF;

  --sidebar-bg:            #3E2522;
  --color-primary:         #8C6E63;
  --color-primary-deep:    #3E2522;
  --color-primary-soft:    #FFF2DF;
  --color-accent:          #D3A376;
  --color-accent-bright:   #FFE0B2;

  --surface-0:             #ffffff;
  --surface-1:             #FFF8F0;
  --surface-2:             #FFF2E0;
  --surface-3:             #FFE8C8;
  --surface-inverse:       #3E2522;

  --text-strong:           #1a0c08;
  --text-body:             #3E2522;
  --text-muted:            #6e4a3c;
  --text-soft:             #a07860;
  --text-on-dark:          #FFE0B2;
  --text-on-dark-muted:    #D3A376;

  --border-soft:           #f0d8b8;
  --border-mid:            #e0c090;

  --state-info:            #8C6E63;
  --state-info-soft:       #FFF2DF;
  --shadow-focus:          0 0 0 4px rgba(140, 110, 99, 0.2);

  --bs-primary:            #8C6E63;
  --bs-primary-rgb:        140, 110, 99;
  --bs-secondary:          #3E2522;
  --bs-secondary-rgb:      62, 37, 34;
  --bs-body-bg:            #FFF8F0;
  --bs-body-color:         #3E2522;
  --bs-border-color:       #f0d8b8;
  --bs-link-color:         #8C6E63;
  --bs-link-hover-color:   #3E2522;
  --bs-focus-ring-color:   rgba(140, 110, 99, 0.2);

  --bs-progress-bar-bg:                var(--color-primary);
  --bs-pagination-active-bg:           var(--color-primary);
  --bs-pagination-active-border-color: var(--color-primary);
  --bs-pagination-color:               var(--color-primary);
  --bs-pagination-hover-color:         var(--color-primary-deep);
  --bs-nav-link-color:                 var(--color-primary);
  --bs-nav-link-hover-color:           var(--color-primary-deep);
  --bs-nav-tabs-link-active-color:     var(--color-primary);
  --bs-dropdown-link-active-bg:        var(--color-primary);
  --bs-list-group-active-bg:           var(--color-primary);
  --bs-list-group-active-border-color: var(--color-primary);
}
[data-theme="tierra"] .page-item.active .page-link { background-color: var(--color-primary); border-color: var(--color-primary); }
[data-theme="tierra"] ::selection { background: var(--color-primary-soft); color: var(--color-primary-deep); }
[data-theme="tierra"] .sidebar__link.is-active,
[data-theme="tierra"] .sidebar__link:hover { background: rgba(255,255,255,0.12); }
[data-theme="tierra"] .sidebar__sub { border-left-color: rgba(211, 163, 118, 0.4); }
[data-theme="tierra"] .sidebar__sublink.is-active { color: var(--tt-caramel); }
[data-theme="tierra"] .bg-primary-soft { background: var(--color-primary-soft) !important; color: var(--color-primary-deep) !important; }
[data-theme="tierra"] .bg-empatia { background: var(--color-primary-soft) !important; color: var(--color-primary-deep) !important; }


/* =========================================================
   TEMA: Violeta
   Ciruela oscura → púrpura → lavanda → blanco violeta
   Paleta: #49225B · #6E3482 · #A56ABD · #E7DBEF · #F5EBFA
   ========================================================= */
[data-theme="violeta"] {
  --tt-plum:         #49225B;
  --tt-purple:       #6E3482;
  --tt-lavender:     #A56ABD;
  --tt-lilac:        #E7DBEF;
  --tt-white-violet: #F5EBFA;

  --sidebar-bg:            #49225B;
  --color-primary:         #6E3482;
  --color-primary-deep:    #49225B;
  --color-primary-soft:    #F5EBFA;
  --color-accent:          #A56ABD;
  --color-accent-bright:   #E7DBEF;

  --surface-0:             #ffffff;
  --surface-1:             #F8F2FD;
  --surface-2:             #F0E4F8;
  --surface-3:             #E7DBEF;
  --surface-inverse:       #49225B;

  --text-strong:           #1e0828;
  --text-body:             #49225B;
  --text-muted:            #7a4490;
  --text-soft:             #b080c8;
  --text-on-dark:          #F5EBFA;
  --text-on-dark-muted:    #E7DBEF;

  --border-soft:           #e0c8f0;
  --border-mid:            #c8a0e0;

  --state-info:            #6E3482;
  --state-info-soft:       #F5EBFA;
  --shadow-focus:          0 0 0 4px rgba(110, 52, 130, 0.2);

  --bs-primary:            #6E3482;
  --bs-primary-rgb:        110, 52, 130;
  --bs-secondary:          #49225B;
  --bs-secondary-rgb:      73, 34, 91;
  --bs-body-bg:            #F8F2FD;
  --bs-body-color:         #49225B;
  --bs-border-color:       #e0c8f0;
  --bs-link-color:         #6E3482;
  --bs-link-hover-color:   #49225B;
  --bs-focus-ring-color:   rgba(110, 52, 130, 0.2);

  --bs-progress-bar-bg:                var(--color-primary);
  --bs-pagination-active-bg:           var(--color-primary);
  --bs-pagination-active-border-color: var(--color-primary);
  --bs-pagination-color:               var(--color-primary);
  --bs-pagination-hover-color:         var(--color-primary-deep);
  --bs-nav-link-color:                 var(--color-primary);
  --bs-nav-link-hover-color:           var(--color-primary-deep);
  --bs-nav-tabs-link-active-color:     var(--color-primary);
  --bs-dropdown-link-active-bg:        var(--color-primary);
  --bs-list-group-active-bg:           var(--color-primary);
  --bs-list-group-active-border-color: var(--color-primary);
}
[data-theme="violeta"] .page-item.active .page-link { background-color: var(--color-primary); border-color: var(--color-primary); }
[data-theme="violeta"] ::selection { background: var(--color-primary-soft); color: var(--color-primary-deep); }
[data-theme="violeta"] .sidebar__link.is-active,
[data-theme="violeta"] .sidebar__link:hover { background: rgba(255,255,255,0.12); }
[data-theme="violeta"] .sidebar__sub { border-left-color: rgba(165, 106, 189, 0.4); }
[data-theme="violeta"] .sidebar__sublink.is-active { color: var(--tt-lavender); }
[data-theme="violeta"] .bg-primary-soft { background: var(--color-primary-soft) !important; color: var(--color-primary-deep) !important; }
[data-theme="violeta"] .bg-empatia { background: var(--color-primary-soft) !important; color: var(--color-primary-deep) !important; }


/* =========================================================
   TEMA: Matrix
   Negro · gris oscuro · verde lima eléctrico · verde oscuro · blanco
   Paleta: #0F0F0F · #202020 · #5DD62C · #337418 · #F8F8F8
   ========================================================= */
[data-theme="matrix"] {
  --tt-black:        #0F0F0F;
  --tt-dark-gray:    #202020;
  --tt-lime:         #5DD62C;
  --tt-green-dark:   #337418;
  --tt-white:        #F8F8F8;

  --sidebar-bg:            #0F0F0F;
  --color-primary:         #337418;
  --color-primary-deep:    #1a3c08;
  --color-primary-soft:    #eaf8e0;
  --color-accent:          #5DD62C;
  --color-accent-bright:   #a0f060;

  --surface-0:             #ffffff;
  --surface-1:             #F8F8F8;
  --surface-2:             #f0f0f0;
  --surface-3:             #e4e4e4;
  --surface-inverse:       #0F0F0F;

  --text-strong:           #0F0F0F;
  --text-body:             #202020;
  --text-muted:            #505050;
  --text-soft:             #808080;
  --text-on-dark:          #5DD62C;
  --text-on-dark-muted:    #337418;

  --border-soft:           #e0e0e0;
  --border-mid:            #c0c0c0;

  --state-info:            #337418;
  --state-info-soft:       #eaf8e0;
  --shadow-focus:          0 0 0 4px rgba(93, 214, 44, 0.3);

  --bs-primary:            #337418;
  --bs-primary-rgb:        51, 116, 24;
  --bs-secondary:          #0F0F0F;
  --bs-secondary-rgb:      15, 15, 15;
  --bs-body-bg:            #F8F8F8;
  --bs-body-color:         #202020;
  --bs-border-color:       #e0e0e0;
  --bs-link-color:         #337418;
  --bs-link-hover-color:   #1a3c08;
  --bs-focus-ring-color:   rgba(93, 214, 44, 0.3);

  --bs-progress-bar-bg:                var(--color-primary);
  --bs-pagination-active-bg:           var(--color-primary);
  --bs-pagination-active-border-color: var(--color-primary);
  --bs-pagination-color:               var(--color-primary);
  --bs-pagination-hover-color:         var(--color-primary-deep);
  --bs-nav-link-color:                 var(--color-primary);
  --bs-nav-link-hover-color:           var(--color-primary-deep);
  --bs-nav-tabs-link-active-color:     var(--color-primary);
  --bs-dropdown-link-active-bg:        var(--color-primary);
  --bs-list-group-active-bg:           var(--color-primary);
  --bs-list-group-active-border-color: var(--color-primary);
}
[data-theme="matrix"] .page-item.active .page-link { background-color: var(--color-primary); border-color: var(--color-primary); }
[data-theme="matrix"] ::selection { background: var(--color-primary-soft); color: var(--color-primary-deep); }
[data-theme="matrix"] .sidebar__link.is-active,
[data-theme="matrix"] .sidebar__link:hover { background: rgba(93, 214, 44, 0.15); }
[data-theme="matrix"] .sidebar__sub { border-left-color: rgba(93, 214, 44, 0.4); }
[data-theme="matrix"] .sidebar__sublink.is-active { color: var(--tt-lime); }
[data-theme="matrix"] .bg-primary-soft { background: var(--color-primary-soft) !important; color: var(--color-primary-deep) !important; }
[data-theme="matrix"] .bg-empatia { background: var(--color-primary-soft) !important; color: var(--color-primary-deep) !important; }


/* =========================================================
   TEMA: Cítrico
   Amarillo eléctrico → ámbar → naranja dorado → naranja profundo
   Paleta: #F2E416 · #F2B705 · #F29F05 · #F28705 · #F25C05
   ========================================================= */
[data-theme="citrico"] {
  --tt-yellow:       #F2E416;
  --tt-amber:        #F2B705;
  --tt-golden:       #F29F05;
  --tt-orange:       #F28705;
  --tt-deep-orange:  #F25C05;

  --sidebar-bg:            #7a2e00;
  --color-primary:         #F28705;
  --color-primary-deep:    #F25C05;
  --color-primary-soft:    #FFF8E0;
  --color-accent:          #F2B705;
  --color-accent-bright:   #F2E416;

  --surface-0:             #ffffff;
  --surface-1:             #FFFBF0;
  --surface-2:             #FFF4D0;
  --surface-3:             #FFEAB0;
  --surface-inverse:       #3a1800;

  --text-strong:           #3a1800;
  --text-body:             #6a2c00;
  --text-muted:            #a05000;
  --text-soft:             #c88000;
  --text-on-dark:          #F2E416;
  --text-on-dark-muted:    #F2B705;

  --border-soft:           #f8d880;
  --border-mid:            #f0b040;

  --state-info:            #F28705;
  --state-info-soft:       #FFF8E0;
  --shadow-focus:          0 0 0 4px rgba(242, 135, 5, 0.25);

  --bs-primary:            #F28705;
  --bs-primary-rgb:        242, 135, 5;
  --bs-secondary:          #F25C05;
  --bs-secondary-rgb:      242, 92, 5;
  --bs-body-bg:            #FFFBF0;
  --bs-body-color:         #6a2c00;
  --bs-border-color:       #f8d880;
  --bs-link-color:         #F28705;
  --bs-link-hover-color:   #F25C05;
  --bs-focus-ring-color:   rgba(242, 135, 5, 0.25);

  --bs-progress-bar-bg:                var(--color-primary);
  --bs-pagination-active-bg:           var(--color-primary);
  --bs-pagination-active-border-color: var(--color-primary);
  --bs-pagination-color:               var(--color-primary);
  --bs-pagination-hover-color:         var(--color-primary-deep);
  --bs-nav-link-color:                 var(--color-primary);
  --bs-nav-link-hover-color:           var(--color-primary-deep);
  --bs-nav-tabs-link-active-color:     var(--color-primary);
  --bs-dropdown-link-active-bg:        var(--color-primary);
  --bs-list-group-active-bg:           var(--color-primary);
  --bs-list-group-active-border-color: var(--color-primary);
}
[data-theme="citrico"] .page-item.active .page-link { background-color: var(--color-primary); border-color: var(--color-primary); }
[data-theme="citrico"] ::selection { background: var(--color-primary-soft); color: var(--color-primary-deep); }
[data-theme="citrico"] .sidebar__link.is-active,
[data-theme="citrico"] .sidebar__link:hover { background: rgba(255,255,255,0.15); }
[data-theme="citrico"] .sidebar__sub { border-left-color: rgba(242, 183, 5, 0.5); }
[data-theme="citrico"] .sidebar__sublink.is-active { color: var(--tt-amber); }
[data-theme="citrico"] .bg-primary-soft { background: var(--color-primary-soft) !important; color: var(--color-primary-deep) !important; }
[data-theme="citrico"] .bg-empatia { background: var(--color-primary-soft) !important; color: var(--color-primary-deep) !important; }


/* =========================================================
   MODO OSCURO — se aplica encima de cualquier preset
   Activado con data-mode="dark" en <html>
   ========================================================= */
[data-mode="dark"] {
  color-scheme: dark;

  /* Superficies neutras oscuras */
  --surface-0:             #1e2128;
  --surface-1:             #16181d;
  --surface-2:             #24262e;
  --surface-3:             #2e3038;
  --surface-inverse:       #f0f0f6;

  /* Texto claro */
  --text-strong:           #f0f0f4;
  --text-body:             #c8c8d4;
  --text-muted:            #8888a0;
  --text-soft:             #606078;
  --text-on-dark:          #f0f0f4;
  --text-on-dark-muted:    #a0a0b8;

  /* Bordes */
  --border-soft:           #22242c;
  --border-mid:            #34363e;

  /* Estados adaptados a oscuro */
  --state-danger:          #f28b82;
  --state-danger-soft:     #2e1412;
  --state-warning:         #FFD60A;
  --state-warning-soft:    #28220a;
  --state-success:         #81c784;
  --state-success-soft:    #122012;
  --state-info-soft:       #12182e;

  /* Bootstrap */
  --bs-body-bg:            #16181d;
  --bs-body-color:         #c8c8d4;
  --bs-body-color-rgb:     200, 200, 212;
  --bs-border-color:       #34363e;
  --bs-secondary-bg:       #1e2128;
  --bs-tertiary-bg:        #24262e;

  /* Sidebar oscuro */
  --sidebar-bg:            #0e0f13;
}

/* ── Primarios por tema en modo oscuro (los muy oscuros son ilegibles) ── */

/* Talent Tray oscuro: azul eléctrico → azul medio */
[data-mode="dark"]:not([data-theme]),
[data-mode="dark"][data-theme=""] {
  --color-primary:         #7068f0;
  --color-primary-deep:    #a09af8;
  --color-primary-soft:    #18163a;
  --sidebar-bg:            #0a0820;
  --bs-primary:            #7068f0;
  --bs-link-color:         #7068f0;
  --bs-link-hover-color:   #a09af8;
  --shadow-focus:          0 0 0 4px rgba(112, 104, 240, 0.25);
  --bs-focus-ring-color:   rgba(112, 104, 240, 0.2);
}

/* Océano oscuro: navy → slate claro */
[data-mode="dark"][data-theme="oceano"] {
  --color-primary:         #7a96b0;
  --color-primary-deep:    #b4c8d4;
  --color-primary-soft:    #101e2a;
  --sidebar-bg:            #0a1520;
  --bs-primary:            #7a96b0;
  --bs-link-color:         #7a96b0;
  --bs-link-hover-color:   #b4c8d4;
  --shadow-focus:          0 0 0 4px rgba(122, 150, 176, 0.25);
  --bs-focus-ring-color:   rgba(122, 150, 176, 0.2);
}

/* Bosque oscuro: teal → sage claro */
[data-mode="dark"][data-theme="bosque"] {
  --color-primary:         #8EB69B;
  --color-primary-deep:    #DAF1DE;
  --color-primary-soft:    #0c1a10;
  --sidebar-bg:            #020c05;
  --bs-primary:            #8EB69B;
  --bs-link-color:         #8EB69B;
  --bs-link-hover-color:   #DAF1DE;
  --shadow-focus:          0 0 0 4px rgba(142, 182, 155, 0.25);
  --bs-focus-ring-color:   rgba(142, 182, 155, 0.2);
}

/* Olivo oscuro: verde-oliva → amarillo-verde claro */
[data-mode="dark"][data-theme="olivo"] {
  --color-primary:         #A9B733;
  --color-primary-deep:    #CFCC36;
  --color-primary-soft:    #1a1e08;
  --sidebar-bg:            #0e1808;
  --bs-primary:            #A9B733;
  --bs-link-color:         #A9B733;
  --bs-link-hover-color:   #CFCC36;
  --shadow-focus:          0 0 0 4px rgba(169, 183, 51, 0.25);
  --bs-focus-ring-color:   rgba(169, 183, 51, 0.2);
}

/* Marina oscuro: azul marino → azul medio + gold se mantiene */
[data-mode="dark"][data-theme="marina"] {
  --color-primary:         #5a95e0;
  --color-primary-deep:    #90b8f5;
  --color-primary-soft:    #081628;
  --sidebar-bg:            #04101e;
  --bs-primary:            #5a95e0;
  --bs-link-color:         #5a95e0;
  --bs-link-hover-color:   #90b8f5;
  --shadow-focus:          0 0 0 4px rgba(90, 149, 224, 0.25);
  --bs-focus-ring-color:   rgba(90, 149, 224, 0.2);
}

/* Salvia oscuro: verde bosque → sage claro */
[data-mode="dark"][data-theme="salvia"] {
  --color-primary:         #A3B18A;
  --color-primary-deep:    #DAD7CD;
  --color-primary-soft:    #141e14;
  --sidebar-bg:            #0a1210;
  --bs-primary:            #A3B18A;
  --bs-link-color:         #A3B18A;
  --bs-link-hover-color:   #DAD7CD;
  --shadow-focus:          0 0 0 4px rgba(163, 177, 138, 0.25);
  --bs-focus-ring-color:   rgba(163, 177, 138, 0.2);
}

/* Tierra oscuro: mocha → caramelo claro */
[data-mode="dark"][data-theme="tierra"] {
  --color-primary:         #D3A376;
  --color-primary-deep:    #FFE0B2;
  --color-primary-soft:    #2a1208;
  --sidebar-bg:            #1a0a06;
  --bs-primary:            #D3A376;
  --bs-link-color:         #D3A376;
  --bs-link-hover-color:   #FFE0B2;
  --shadow-focus:          0 0 0 4px rgba(211, 163, 118, 0.25);
  --bs-focus-ring-color:   rgba(211, 163, 118, 0.2);
}

/* Violeta oscuro: púrpura → lavanda claro */
[data-mode="dark"][data-theme="violeta"] {
  --color-primary:         #A56ABD;
  --color-primary-deep:    #E7DBEF;
  --color-primary-soft:    #1a0828;
  --sidebar-bg:            #150620;
  --bs-primary:            #A56ABD;
  --bs-link-color:         #A56ABD;
  --bs-link-hover-color:   #E7DBEF;
  --shadow-focus:          0 0 0 4px rgba(165, 106, 189, 0.25);
  --bs-focus-ring-color:   rgba(165, 106, 189, 0.2);
}

/* Matrix oscuro: verde lima eléctrico brilla sobre negro */
[data-mode="dark"][data-theme="matrix"] {
  --color-primary:         #5DD62C;
  --color-primary-deep:    #a0f060;
  --color-primary-soft:    #0a2005;
  --sidebar-bg:            #030303;
  --bs-primary:            #5DD62C;
  --bs-link-color:         #5DD62C;
  --bs-link-hover-color:   #a0f060;
  --shadow-focus:          0 0 0 4px rgba(93, 214, 44, 0.35);
  --bs-focus-ring-color:   rgba(93, 214, 44, 0.3);
}

/* Cítrico oscuro: ámbar/amarillo sobre fondo oscuro cálido */
[data-mode="dark"][data-theme="citrico"] {
  --color-primary:         #F2B705;
  --color-primary-deep:    #F2E416;
  --color-primary-soft:    #2a1a00;
  --sidebar-bg:            #1a0e00;
  --bs-primary:            #F2B705;
  --bs-link-color:         #F2B705;
  --bs-link-hover-color:   #F2E416;
  --shadow-focus:          0 0 0 4px rgba(242, 183, 5, 0.3);
  --bs-focus-ring-color:   rgba(242, 183, 5, 0.25);
}

/* Ciruela oscuro: wine/frambuesa → coral/durazno claro */
[data-mode="dark"][data-theme="ciruela"] {
  --color-primary:         #DC586D;
  --color-primary-deep:    #FB9590;
  --color-primary-soft:    #2a0a18;
  --sidebar-bg:            #1a0510;
  --bs-primary:            #DC586D;
  --bs-link-color:         #DC586D;
  --bs-link-hover-color:   #FB9590;
  --shadow-focus:          0 0 0 4px rgba(220, 88, 109, 0.25);
  --bs-focus-ring-color:   rgba(220, 88, 109, 0.2);
}

/* Azul Intenso oscuro: azul profundo → cian eléctrico */
[data-mode="dark"][data-theme="azul-intenso"] {
  --color-primary:         #00B4D8;
  --color-primary-deep:    #90E0EF;
  --color-primary-soft:    #061828;
  --sidebar-bg:            #010212;
  --bs-primary:            #00B4D8;
  --bs-link-color:         #00B4D8;
  --bs-link-hover-color:   #90E0EF;
  --shadow-focus:          0 0 0 4px rgba(0, 180, 216, 0.25);
  --bs-focus-ring-color:   rgba(0, 180, 216, 0.2);
}

/* ── Componentes Bootstrap en modo oscuro (aplica a todos los temas) ── */
[data-mode="dark"] .card {
  background-color: var(--surface-0);
  border-color: var(--border-soft);
}
[data-mode="dark"] .modal-content {
  background-color: var(--surface-0);
  border-color: var(--border-mid);
}
[data-mode="dark"] .dropdown-menu {
  background-color: var(--surface-0);
  border-color: var(--border-mid);
}
[data-mode="dark"] .dropdown-item { color: var(--text-body); }
[data-mode="dark"] .dropdown-item:hover,
[data-mode="dark"] .dropdown-item:focus {
  background-color: var(--surface-3);
  color: var(--text-strong);
}
[data-mode="dark"] .form-control,
[data-mode="dark"] .form-select {
  background-color: var(--surface-2);
  border-color: var(--border-mid);
  color: var(--text-body);
}
[data-mode="dark"] .form-control:focus,
[data-mode="dark"] .form-select:focus {
  background-color: var(--surface-2);
  border-color: var(--color-primary);
  color: var(--text-strong);
  box-shadow: var(--shadow-focus);
}
[data-mode="dark"] .table {
  --bs-table-color:        var(--text-body);
  --bs-table-border-color: var(--border-soft);
  --bs-table-striped-bg:   rgba(255, 255, 255, 0.03);
  --bs-table-hover-bg:     rgba(255, 255, 255, 0.05);
}
[data-mode="dark"] .list-group-item {
  background-color: var(--surface-0);
  border-color: var(--border-soft);
  color: var(--text-body);
}
[data-mode="dark"] .nav-tabs { border-color: var(--border-soft); }
[data-mode="dark"] .nav-tabs .nav-link:not(.active) { color: var(--text-muted); }
[data-mode="dark"] .nav-tabs .nav-link:hover {
  border-color: var(--border-mid);
  color: var(--text-body);
}
[data-mode="dark"] .page-item.active .page-link {
  background-color: var(--color-primary);
  border-color:     var(--color-primary);
  color:            var(--surface-1);
}
[data-mode="dark"] ::selection { background: var(--color-primary); color: var(--surface-1); }
[data-mode="dark"] .bg-primary-soft {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary-deep) !important;
}
[data-mode="dark"] .bg-empatia {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary-deep) !important;
}

/* ── Logo blanco en sidebar (modo oscuro) ── */
[data-mode="dark"] .sidebar__brand-logo {
  filter: brightness(0) invert(1);
}


/* =========================================================
   COLOR PICKER — Botón flotante + panel lateral
   ========================================================= */

/* Botón flotante */
.cp-trigger {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 1070;
  width: 50px;
  height: 50px;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.cp-trigger:hover  { transform: scale(1.09); }
.cp-trigger .icon  { font-size: 22px; }

/* Overlay oscuro de fondo */
.cp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 32, 0.25);
  z-index: 1065;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base);
}
.cp-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Panel lateral */
.cp-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  background: var(--surface-0);
  z-index: 1070;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.cp-panel.is-open { transform: translateX(0); }

.cp-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.cp-panel__head h3 {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--text-strong);
  margin: 0;
  text-transform: none;
}

.cp-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cp-panel__foot {
  padding: 14px 20px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* Etiqueta de sección */
.cp-label {
  font-size: var(--fs-12);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-soft);
  margin: 0 0 10px;
}

/* Toggle Claro / Oscuro */
.cp-mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cp-mode-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  border: 1.5px solid var(--border-mid);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-13);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.cp-mode-btn .icon { font-size: 18px; line-height: 1; }
.cp-mode-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.cp-mode-btn.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

/* Presets de tema */
.cp-presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cp-preset {
  border: 2px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 10px;
  background: none;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.cp-preset:hover          { border-color: var(--color-primary); }
.cp-preset.is-active      { border-color: var(--color-primary); background: var(--color-primary-soft); }
.cp-preset__dots          { display: flex; gap: 5px; margin-bottom: 7px; }
.cp-preset__dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
  flex-shrink: 0;
}
.cp-preset__name {
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--text-body);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Roles de color */
.cp-role { display: flex; flex-direction: column; gap: 8px; }
.cp-role__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--text-muted);
}
.cp-role__dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--border-mid);
  flex-shrink: 0;
  transition: background var(--dur-fast);
}
.cp-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.cp-swatch {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  cursor: pointer;
  padding: 0;
  background-clip: content-box;
  transition: transform var(--dur-fast), border-color var(--dur-fast);
  outline: none;
  position: relative;
}
.cp-swatch:hover { transform: scale(1.18); }
.cp-swatch.is-selected { border-color: var(--text-strong) !important; }
.cp-swatch.is-selected::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.75);
  pointer-events: none;
}

/* Separador de paleta dentro de swatches */
.cp-palette-sep {
  width: 1px;
  height: 30px;
  background: var(--border-soft);
  border-radius: 1px;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .cp-panel { width: 100%; }
}

/* =========================================================
   Responsive global — mejoras complementarias
   ========================================================= */

/* ── Tablas con scroll horizontal en móvil ── */
.table-scroll {
  overflow-x: auto;
}
/* Clases de tabla propias sin wrapper .table-responsive de Bootstrap */
@media (max-width: 768px) {
  .cand-table,
  .entv-table,
  .hv-table {
    display: block;
    overflow-x: auto;
  }
  /* Ancho mínimo en celdas de estado para que el texto no se rompa */
  .estados-cell { min-width: auto; flex-wrap: wrap; }
}

/* ── Page header en pantallas pequeñas ── */
@media (max-width: 576px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
  }
  .page-header__title { font-size: var(--fs-28); }
  .page-header__actions { width: 100%; justify-content: flex-end; }
}

/* ── Filter bar — stack vertical en móvil ── */
@media (max-width: 640px) {
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
    padding: var(--sp-3) var(--sp-4);
  }
  .filter-bar__search { max-width: 100%; }
  .filter-bar__selects { flex-direction: column; }
  .filter-bar__select { min-width: 0; }
  .filter-bar__actions { margin-left: 0; justify-content: flex-end; }
}

/* ── Perfil candidato (modal 3 columnas) → 1 columna ── */
@media (max-width: 900px) {
  .perfil-grid {
    grid-template-columns: 1fr;
  }
  .perfil-col--left,
  .perfil-col--right {
    border-right: none;
    border-left: none;
    border-bottom: 1px solid var(--border-soft);
  }
  .perfil-col--center { order: -1; }
}

/* ── Perfil analista selección (modal 3 columnas) → 1 columna ── */
@media (max-width: 900px) {
  .perfil2-grid { grid-template-columns: 1fr; }
  .perfil2-col { border-right: none; border-bottom: 1px solid var(--border-soft); }
  .perfil2-col:last-child { border-bottom: none; }
}

/* ── KPI strips / cards en dashboards ── */
@media (max-width: 576px) {
  .kpi-strip { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .kpi__value { font-size: var(--fs-32); }
  .dc-metric__value { font-size: var(--fs-28); }
  .dca-metric__value { font-size: var(--fs-32); }
}

/* ── Candidatos listado summary ── */
@media (max-width: 576px) {
  .cand-summary { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .cand-legend { flex-wrap: wrap; gap: var(--sp-2); }
  .cand-footer { flex-direction: column; align-items: flex-start; }
}

/* ── Topbar: ocultar user-name en móvil muy pequeño ── */
@media (max-width: 480px) {
  .topbar__user-name,
  .topbar__user-role { display: none; }
  .topbar__divider { display: none; }
}

/* ── Modales en móvil ── */
@media (max-width: 576px) {
  .ttalert { padding: var(--sp-5) var(--sp-4) var(--sp-4); }
  .ttalert__actions { flex-direction: column; }
  .ttalert__actions .btn { width: 100%; }
}

/* ── Wizard en pantallas medianas ── */
@media (max-width: 480px) {
  .wizard__footer { flex-direction: column; }
  .wizard__footer-progress { max-width: 100%; }
  .wizard__footer-actions { width: 100%; justify-content: flex-end; }
}

/* ── Hoja de vida: pasos en móvil ── */
@media (max-width: 576px) {
  .hv-steps-nodes { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--sp-2); }
  .hv-step-node { min-width: 70px; }
}

/* ── Dashboard panorama (sectores) ── */
@media (max-width: 576px) {
  .dc-panorama { flex-direction: column; }
  .dc-panorama-panel + .dc-panorama-panel { border-left: none; border-top: 1px solid var(--border-soft); }
}

/* ── Content: max-width relajado en tablet ── */
@media (max-width: 1024px) {
  .content { padding: var(--sp-5) var(--sp-5); }
}

/* ── Bootstrap grid helpers para pequeños: stack en xs ── */
@media (max-width: 480px) {
  .row > [class*="col-"] { padding-left: var(--sp-2); padding-right: var(--sp-2); }
}