/* =====================================================================
   SmartTalent 360 · Sistema de diseño
   Carmesí #a41519 · Dorados · Blanco #ffffff · Tema claro y oscuro
   Tipografía: Bricolage Grotesque (titulares) · Manrope (texto) · IBM Plex Mono (datos)
   ===================================================================== */
:root {
  --st-rojo: #a41519;
  --st-rojo-2: #7e0f13;
  --st-rojo-3: #5a0a0d;
  --st-rojo-s: #fbeced;
  --st-oro: #c9a24a;
  --st-oro-2: #a8832e;
  --st-oro-l: #e8cf8a;
  --st-oro-s: #fbf4e3;
  --st-blanco: #ffffff;

  --bg: #ffffff;
  --bg-2: #faf7f2;
  --superficie: #ffffff;
  --superficie-2: #fbf9f6;
  --hundido: #f5f0e8;
  --linea: #eee6da;
  --linea-2: #e2d6c3;
  --tinta: #24181a;
  --tinta-2: #5b4b4d;
  --tinta-3: #8d7d7e;
  --acento: var(--st-rojo);
  --acento-txt: #ffffff;
  --oro: var(--st-oro);
  --ok: #1f8a5b; --ok-s: #e6f5ee;
  --warn: #b7791f; --warn-s: #fdf3e1;
  --bad: #c0392b; --bad-s: #fdecea;
  --info: #2f6db3; --info-s: #e8f0fb;

  --sombra-1: 0 1px 2px rgba(60, 20, 20, .05), 0 1px 1px rgba(60, 20, 20, .03);
  --sombra-2: 0 10px 30px -14px rgba(90, 20, 25, .22), 0 2px 6px rgba(60, 20, 20, .04);
  --sombra-3: 0 30px 70px -30px rgba(90, 15, 20, .45);
  --radio: 16px;
  --radio-s: 10px;
  --radio-xs: 7px;

  --f-titulo: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
  --f-texto: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --sb-w: 268px;
  --sb-rail: 78px;
  --top-h: 66px;
  --t: cubic-bezier(.2, .8, .2, 1);

  --bs-body-font-family: var(--f-texto);
  --bs-body-color: var(--tinta);
  --bs-body-bg: var(--bg);
  --bs-border-color: var(--linea);
  --bs-primary: #a41519;
  --bs-primary-rgb: 164, 21, 25;
  --bs-link-color: var(--st-rojo);
  --bs-link-hover-color: var(--st-rojo-2);
  --bs-link-color-rgb: 164, 21, 25;
  --bs-secondary-color: var(--tinta-3);
  --bs-emphasis-color: var(--tinta);
  --bs-tertiary-bg: var(--hundido);
  color-scheme: light;
}

:root[data-theme="dark"] {
  /* Tema oscuro "Medianoche": azul noche profundo con carmesí y dorado */
  --st-rojo: #e0444a;
  --st-rojo-s: #2a1630;
  --st-oro: #e3be66;
  --st-oro-2: #f2d68e;
  --st-oro-s: #262719;
  --bg: #070b18;
  --bg-2: #0a1020;
  --superficie: #0f1629;
  --superficie-2: #131c33;
  --hundido: #172240;
  --linea: #1f2b4a;
  --linea-2: #2a385e;
  --tinta: #edf1fa;
  --tinta-2: #b5c0da;
  --tinta-3: #7f8db0;
  --acento: #e0444a;
  --ok: #4cc38a; --ok-s: #10291f;
  --warn: #e6b04f; --warn-s: #2a2414;
  --bad: #f06a62; --bad-s: #2e1520;
  --info: #7cb1f5; --info-s: #13244a;
  --sombra-1: 0 1px 2px rgba(0, 3, 15, .5);
  --sombra-2: 0 14px 40px -18px rgba(0, 4, 20, .85), 0 2px 6px rgba(0, 3, 15, .35);
  --sombra-3: 0 30px 80px -30px rgba(0, 4, 22, .95);
  --bs-body-color: var(--tinta);
  --bs-body-bg: var(--bg);
  --bs-border-color: var(--linea);
  --bs-secondary-color: var(--tinta-3);
  --bs-emphasis-color: var(--tinta);
  --bs-tertiary-bg: var(--hundido);
  --bs-link-color: #f08a80;
  --bs-link-hover-color: #f7ada5;
  color-scheme: dark;
}

/* ---------- Base ---------- */
* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { font-family: var(--f-texto); background: var(--bg); color: var(--tinta); font-size: 14.5px; letter-spacing: -.005em; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, .titulo { font-family: var(--f-titulo); letter-spacing: -.025em; font-weight: 700; color: var(--tinta); }
h5, h6 { font-family: var(--f-texto); font-weight: 800; letter-spacing: -.01em; }
.mono, code, kbd { font-family: var(--f-mono); }
code { color: var(--st-rojo); background: var(--st-rojo-s); padding: 1px 6px; border-radius: 6px; font-size: .86em; }
kbd { background: var(--superficie); color: var(--tinta-2); border: 1px solid var(--linea-2); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; font-size: 11px; box-shadow: none; }
a { color: var(--st-rojo); text-decoration: none; }
a:hover { color: var(--st-rojo-2); }
::selection { background: var(--st-oro-l); color: #2a1a0a; }
.text-muted, .text-secondary { color: var(--tinta-3) !important; }
.text-oro { color: var(--st-oro-2) !important; }
:root[data-theme="dark"] .text-oro { color: var(--st-oro) !important; }
.text-rojo { color: var(--st-rojo) !important; }
.bg-oro-s { background: var(--st-oro-s) !important; }
.bg-rojo-s { background: var(--st-rojo-s) !important; }
.fw-800 { font-weight: 800; }
.small-caps { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; color: var(--tinta-3); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--linea-2); border-radius: 10px; border: 3px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Esqueleto de la app ---------- */
.st-app { display: grid; grid-template-columns: var(--sb-w) 1fr; min-height: 100vh; transition: grid-template-columns .45s var(--t); }
.st-app.rail { grid-template-columns: var(--sb-rail) 1fr; }

.st-sidebar {
  position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; z-index: 1030; color: #f7e9e2;
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(232, 207, 138, .16), transparent 55%),
    radial-gradient(90% 50% at 100% 100%, rgba(0, 0, 0, .35), transparent 60%),
    linear-gradient(170deg, #a41519 0%, #861116 48%, #5c0a0e 100%);
}
:root[data-theme="dark"] .st-sidebar { background: radial-gradient(120% 60% at 0% 0%, rgba(227, 190, 102, .12), transparent 55%), radial-gradient(90% 40% at 100% 100%, rgba(224, 68, 74, .14), transparent 60%), linear-gradient(170deg, #14204a 0%, #0c1533 50%, #060b1d 100%); border-right: 1px solid #1c2747; }
.st-sidebar::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.sb-marca { display: flex; align-items: center; gap: 12px; padding: 20px 20px 14px; position: relative; z-index: 1; }
.sb-logo { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(140deg, #f4dfa6, #c9a24a 55%, #9b7426); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 6px 16px -6px rgba(0, 0, 0, .5); }
.sb-logo svg { width: 24px; height: 24px; }
.sb-nombre { font-family: var(--f-titulo); font-weight: 800; font-size: 19px; letter-spacing: -.03em; line-height: 1; white-space: nowrap; color: #fff; }
.sb-nombre small { display: block; font-family: var(--f-mono); font-weight: 500; font-size: 10px; letter-spacing: .18em; color: var(--st-oro-l); margin-top: 5px; text-transform: uppercase; }
.sb-cuenta { margin: 4px 14px 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); position: relative; z-index: 1; display: flex; gap: 10px; align-items: center; font-size: 12.5px; }
.sb-cuenta .bi { color: var(--st-oro-l); }
.sb-cuenta b { display: block; color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.sb-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 12px 16px; position: relative; z-index: 1; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.sb-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-color: transparent; }
.sb-grupo { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 800; color: var(--st-oro-l); opacity: .85; padding: 16px 12px 6px; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.sb-grupo::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(232, 207, 138, .35), transparent); }
.sb-nav { position: relative; }
.sb-link { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin: 1px 0; border-radius: 11px; color: rgba(255, 240, 234, .78); font-weight: 600; font-size: 13.8px; white-space: nowrap; transition: color .2s, background .2s; }
.sb-link .bi { font-size: 17px; width: 22px; text-align: center; flex: none; transition: transform .3s var(--t); }
.sb-link:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.sb-link:hover .bi { transform: translateX(2px) scale(1.06); }
.sb-link.activo { color: #3b0a0c; font-weight: 800; }
.sb-link.activo .bi { color: var(--st-rojo); }
:root[data-theme="dark"] .sb-link.activo, :root[data-theme="dark"] .sb-link.activo .bi { color: #0c1533; }
.sb-link .sb-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: 11px; font-weight: 800; display: grid; place-items: center; background: var(--st-oro); color: #3a2405; font-family: var(--f-mono); }
.sb-link.activo .sb-badge { background: var(--st-rojo); color: #fff; }
.sb-indicador { position: absolute; left: 0; right: 0; height: 40px; border-radius: 11px; z-index: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, #fff8e8, #f3dfa8); box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .55), inset 0 1px 0 #fff; }
.sb-indicador::before { content: ''; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--st-oro-l); }
.sb-pie { padding: 12px 14px 16px; position: relative; z-index: 1; border-top: 1px solid rgba(255, 255, 255, .08); }
.sb-pie .sb-link { color: rgba(255, 240, 234, .65); }
.st-app.rail .sb-nombre, .st-app.rail .sb-cuenta, .st-app.rail .sb-grupo span, .st-app.rail .sb-link span, .st-app.rail .sb-link .sb-badge { opacity: 0; pointer-events: none; }
.st-app.rail .sb-grupo { padding: 12px 0 4px; }
.st-app.rail .sb-link { justify-content: center; padding: 10px 0; }
.st-app.rail .sb-link .bi { margin: 0; }
.st-app.rail .sb-marca { justify-content: center; padding-left: 0; padding-right: 0; }

.st-main { min-width: 0; display: flex; flex-direction: column; background: var(--bg); }
.st-top { position: sticky; top: 0; z-index: 1020; height: var(--top-h); display: flex; align-items: center; gap: 12px; padding: 0 28px;
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--linea); }
.st-top .ruta { min-width: 0; }
.st-top .ruta small { display: block; font-size: 11px; color: var(--tinta-3); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.st-top .ruta h1 { font-size: 20px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-icono { width: 40px; height: 40px; border-radius: 12px; display: inline-grid; place-items: center; border: 1px solid var(--linea); background: var(--superficie); color: var(--tinta-2); position: relative; transition: all .2s var(--t); flex: none; }
.btn-icono:hover { color: var(--st-rojo); border-color: var(--linea-2); transform: translateY(-1px); box-shadow: var(--sombra-2); }
.btn-icono .punto { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--st-rojo); box-shadow: 0 0 0 2px var(--superficie); }
.buscador { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px 0 14px; min-width: 260px; border-radius: 12px; border: 1px solid var(--linea); background: var(--superficie-2); color: var(--tinta-3); cursor: pointer; transition: all .2s; }
.buscador:hover { border-color: var(--linea-2); color: var(--tinta-2); }
.buscador span { flex: 1; font-size: 13.5px; }
.usuario-chip { display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 4px; border-radius: 14px; border: 1px solid var(--linea); background: var(--superficie); cursor: pointer; }
.usuario-chip .n { line-height: 1.15; font-size: 13px; font-weight: 800; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario-chip .n small { display: block; font-weight: 600; color: var(--tinta-3); font-size: 11px; }
.st-vista { padding: 26px 28px 60px; flex: 1; max-width: 1640px; width: 100%; }
.franja { margin: 18px 28px 0; padding: 12px 16px; border-radius: 14px; display: flex; align-items: center; gap: 12px; font-size: 13.5px; border: 1px solid; }
.franja.prueba { background: linear-gradient(100deg, var(--st-oro-s), var(--superficie)); border-color: color-mix(in srgb, var(--st-oro) 40%, transparent); }
.franja.alerta { background: var(--bad-s); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }
.franja .reloj { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--st-oro); color: #3a2405; font-weight: 800; font-family: var(--f-mono); flex: none; }
.franja.super { background: var(--info-s); border-color: color-mix(in srgb, var(--info) 30%, transparent); }

/* ---------- Tarjetas ---------- */
.card, .st-card { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra-1); color: var(--tinta); }
.card-header { background: transparent; border-bottom: 1px solid var(--linea); padding: 16px 20px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.card-header .bi { color: var(--st-oro-2); }
:root[data-theme="dark"] .card-header .bi { color: var(--st-oro); }
.card-body { padding: 20px; }
.card-footer { background: var(--superficie-2); border-top: 1px solid var(--linea); }
.st-card.hover, .card.hover { transition: transform .25s var(--t), box-shadow .25s var(--t), border-color .25s; }
.st-card.hover:hover, .card.hover:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); border-color: var(--linea-2); }
.seccion-tit { display: flex; align-items: end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.seccion-tit h2 { font-size: 26px; margin: 0; }
.seccion-tit p { margin: 4px 0 0; color: var(--tinta-3); max-width: 680px; }

/* KPI */
.kpi { position: relative; overflow: hidden; padding: 18px 20px; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--linea); box-shadow: var(--sombra-1); display: flex; gap: 14px; align-items: center; transition: transform .25s var(--t), box-shadow .25s; }
.kpi:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.kpi .ico { width: 48px; height: 48px; flex: none; border-radius: 14px; display: grid; place-items: center; font-size: 21px; background: var(--st-rojo-s); color: var(--st-rojo); }
.kpi.oro .ico { background: var(--st-oro-s); color: var(--st-oro-2); }
:root[data-theme="dark"] .kpi.oro .ico { color: var(--st-oro); }
.kpi.ok .ico { background: var(--ok-s); color: var(--ok); }
.kpi.info .ico { background: var(--info-s); color: var(--info); }
.kpi .v { font-family: var(--f-titulo); font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.kpi .l { color: var(--tinta-3); font-size: 12.5px; font-weight: 700; margin-top: 4px; }
.kpi::after { content: ''; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--st-oro) 18%, transparent), transparent 70%); }
.kpi.destacado { background: linear-gradient(135deg, #a41519, #6d0d11); border: 0; color: #fff; }
.kpi.destacado .ico { background: rgba(255, 255, 255, .14); color: var(--st-oro-l); }
.kpi.destacado .l { color: rgba(255, 255, 255, .7); }

/* Anillo de progreso */
.anillo { --p: 0; --c: var(--st-rojo); width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--hundido) 0); position: relative; }
.anillo::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--superficie); }
.anillo b { position: relative; font-family: var(--f-mono); font-size: 13px; font-weight: 600; }
.anillo.sm { width: 42px; height: 42px; }
.anillo.sm::before { inset: 4px; }
.anillo.sm b { font-size: 10.5px; }
.barra { height: 8px; border-radius: 8px; background: var(--hundido); overflow: hidden; }
.barra > i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--st-rojo), var(--st-oro)); width: 0; transition: width .8s var(--t); }

/* ---------- Botones ---------- */
.btn { font-weight: 700; border-radius: 11px; padding: 8px 16px; font-size: 13.8px; transition: transform .15s var(--t), box-shadow .2s, background .2s, color .2s, border-color .2s; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn:active { transform: scale(.97); }
.btn-sm { padding: 5px 11px; font-size: 12.8px; border-radius: 9px; }
.btn-lg { padding: 12px 22px; font-size: 15.5px; border-radius: 14px; }
.btn-primary { --bs-btn-bg: var(--st-rojo); --bs-btn-border-color: var(--st-rojo); --bs-btn-hover-bg: var(--st-rojo-2); --bs-btn-hover-border-color: var(--st-rojo-2); --bs-btn-active-bg: var(--st-rojo-3); --bs-btn-active-border-color: var(--st-rojo-3); --bs-btn-disabled-bg: var(--st-rojo); --bs-btn-disabled-border-color: var(--st-rojo);
  box-shadow: 0 8px 18px -10px rgba(164, 21, 25, .8), inset 0 1px 0 rgba(255, 255, 255, .18); }
.btn-primary:hover { box-shadow: 0 12px 24px -10px rgba(164, 21, 25, .9), inset 0 1px 0 rgba(255, 255, 255, .2); }
.btn-oro { background: linear-gradient(135deg, #f0d891, #c9a24a 60%, #ad862f); color: #3a2405; border: 0; box-shadow: 0 8px 18px -10px rgba(168, 131, 46, .9), inset 0 1px 0 rgba(255, 255, 255, .55); }
.btn-oro:hover { color: #2a1a03; filter: brightness(1.05); }
.btn-light, .btn-suave { background: var(--superficie); border: 1px solid var(--linea); color: var(--tinta); }
.btn-light:hover, .btn-suave:hover { background: var(--hundido); border-color: var(--linea-2); color: var(--tinta); }
.btn-outline-primary { --bs-btn-color: var(--st-rojo); --bs-btn-border-color: color-mix(in srgb, var(--st-rojo) 40%, transparent); --bs-btn-hover-bg: var(--st-rojo); --bs-btn-hover-border-color: var(--st-rojo); --bs-btn-active-bg: var(--st-rojo-2); }
.btn-danger { --bs-btn-bg: var(--bad); --bs-btn-border-color: var(--bad); }
.btn-link { color: var(--st-rojo); text-decoration: none; font-weight: 700; }
.btn-ghost { background: transparent; border: 0; color: var(--tinta-2); }
.btn-ghost:hover { background: var(--hundido); color: var(--tinta); }
.btn .spinner-border { width: 1em; height: 1em; border-width: .15em; }
.magnetico { will-change: transform; }

/* ---------- Formularios ---------- */
.form-label { font-weight: 700; font-size: 12.8px; color: var(--tinta-2); margin-bottom: 6px; }
.form-control, .form-select { border-radius: 11px; border: 1px solid var(--linea-2); background-color: var(--superficie); color: var(--tinta); padding: 9px 13px; font-size: 14px; transition: border-color .2s, box-shadow .2s, background .2s; }
.form-control::placeholder { color: color-mix(in srgb, var(--tinta-3) 75%, transparent); }
.form-control:focus, .form-select:focus { border-color: var(--st-oro); box-shadow: 0 0 0 4px color-mix(in srgb, var(--st-oro) 22%, transparent); background-color: var(--superficie); color: var(--tinta); }
.form-control-sm, .form-select-sm { border-radius: 9px; padding: 5px 10px; font-size: 13px; }
.form-control-lg { border-radius: 14px; padding: 12px 16px; }
.form-select { background-position: right 12px center; }
:root[data-theme="dark"] .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23b5c0da' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.form-check-input { border-color: var(--linea-2); background-color: var(--superficie); width: 1.1em; height: 1.1em; }
.form-check-input:checked { background-color: var(--st-rojo); border-color: var(--st-rojo); }
.form-check-input:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--st-oro) 22%, transparent); border-color: var(--st-oro); }
.form-switch .form-check-input { width: 2.4em; height: 1.3em; }
.form-text { color: var(--tinta-3); font-size: 12px; }
.input-group-text { background: var(--hundido); border-color: var(--linea-2); color: var(--tinta-3); border-radius: 11px; }
.campo-buscar { position: relative; }
.campo-buscar .bi { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--tinta-3); pointer-events: none; }
.campo-buscar .form-control { padding-left: 38px; }
.zona-archivo { border: 2px dashed var(--linea-2); border-radius: var(--radio); padding: 30px; text-align: center; cursor: pointer; transition: all .25s var(--t); background: var(--superficie-2); position: relative; }
.zona-archivo:hover, .zona-archivo.sobre { border-color: var(--st-oro); background: var(--st-oro-s); }
.zona-archivo .bi { font-size: 34px; color: var(--st-oro-2); display: block; margin-bottom: 8px; }
.zona-archivo input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ---------- Tablas ---------- */
.table { --bs-table-bg: transparent; --bs-table-color: var(--tinta); --bs-table-hover-bg: var(--superficie-2); --bs-table-hover-color: var(--tinta); --bs-table-border-color: var(--linea); margin: 0; font-size: 13.8px; }
.table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--tinta-3); font-weight: 800; background: var(--superficie-2); border-bottom: 1px solid var(--linea); padding: 11px 14px; white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.table thead th.ordenable { cursor: pointer; user-select: none; }
.table thead th.ordenable:hover { color: var(--tinta); }
.table thead th .bi { font-size: 10px; margin-left: 4px; }
.table tbody td { padding: 12px 14px; vertical-align: middle; border-color: var(--linea); }
.table-hover tbody tr { cursor: pointer; }
.table tbody tr:last-child td { border-bottom: 0; }
.tabla-wrap { border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; background: var(--superficie); }
.tabla-wrap .table-responsive { max-height: 68vh; }
.tabla-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--linea); background: var(--superficie-2); font-size: 12.8px; color: var(--tinta-3); flex-wrap: wrap; }
.paginador { display: flex; gap: 4px; }
.paginador button { min-width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--linea); background: var(--superficie); color: var(--tinta-2); font-weight: 700; font-size: 12.5px; }
.paginador button.activo { background: var(--st-rojo); color: #fff; border-color: var(--st-rojo); }
.paginador button:disabled { opacity: .4; }
.acciones-fila { display: flex; gap: 4px; justify-content: flex-end; opacity: .55; transition: opacity .2s; }
tr:hover .acciones-fila { opacity: 1; }
.acciones-fila .btn { width: 32px; height: 32px; padding: 0; border-radius: 9px; }

/* ---------- Chips, avatares, puntajes ---------- */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11.8px; font-weight: 800; background: var(--hundido); color: var(--tinta-2); white-space: nowrap; line-height: 1.5; }
.chip .bi { font-size: 11px; }
.chip.ok { background: var(--ok-s); color: var(--ok); }
.chip.warn { background: var(--warn-s); color: var(--warn); }
.chip.bad { background: var(--bad-s); color: var(--bad); }
.chip.info { background: var(--info-s); color: var(--info); }
.chip.rojo { background: var(--st-rojo-s); color: var(--st-rojo); }
.chip.oro { background: var(--st-oro-s); color: var(--st-oro-2); }
:root[data-theme="dark"] .chip.oro { color: var(--st-oro); }
.chip.punto::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.avatar { width: 36px; height: 36px; border-radius: 12px; flex: none; display: inline-grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff; overflow: hidden;
  background: linear-gradient(135deg, #b8262b, #6d0d11); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); font-family: var(--f-titulo); }
.avatar.oro { background: linear-gradient(135deg, #e8cf8a, #a8832e); color: #3a2405; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.lg { width: 64px; height: 64px; border-radius: 20px; font-size: 22px; }
.avatar.xl { width: 92px; height: 92px; border-radius: 26px; font-size: 32px; }
.avatar.sm { width: 28px; height: 28px; border-radius: 9px; font-size: 11px; }
.puntaje { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; padding: 3px 8px; border-radius: 9px; font-family: var(--f-mono); font-weight: 600; font-size: 12.5px; }
.puntaje.a { background: var(--ok-s); color: var(--ok); }
.puntaje.m { background: var(--warn-s); color: var(--warn); }
.puntaje.b { background: var(--bad-s); color: var(--bad); }
.estrellas { color: var(--st-oro); letter-spacing: 1px; white-space: nowrap; }
.estrellas .bi-star { color: var(--linea-2); }
.estrellas button { border: 0; background: none; padding: 0 1px; color: inherit; }

/* ---------- Pestañas ---------- */
.st-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--hundido); position: relative; overflow-x: auto; scrollbar-width: none; }
.st-tabs::-webkit-scrollbar { display: none; }
.st-tabs button, .st-tabs a { position: relative; z-index: 1; border: 0; background: none; padding: 8px 15px; border-radius: 10px; font-weight: 700; font-size: 13.4px; color: var(--tinta-3); white-space: nowrap; transition: color .25s; display: inline-flex; gap: 7px; align-items: center; }
.st-tabs button.active, .st-tabs a.active { color: var(--tinta); }
.st-tabs .pastilla { position: absolute; z-index: 0; top: 4px; bottom: 4px; border-radius: 10px; background: var(--superficie); box-shadow: var(--sombra-2); transition: none; }
.st-tabs .n { font-family: var(--f-mono); font-size: 11px; background: var(--superficie); padding: 0 6px; border-radius: 6px; }
.nav-tabs { border-color: var(--linea); gap: 4px; }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--tinta-3); font-weight: 700; border-radius: 0; padding: 10px 14px; }
.nav-tabs .nav-link.active { color: var(--st-rojo); background: transparent; border-bottom-color: var(--st-rojo); }

/* ---------- Modales ---------- */
.modal-content { border: 1px solid var(--linea); border-radius: 22px; background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-3); overflow: hidden; }
.modal-header { border-bottom: 1px solid var(--linea); padding: 18px 22px; background: linear-gradient(180deg, var(--superficie-2), var(--superficie)); }
.modal-title { font-family: var(--f-titulo); font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.modal-body { padding: 22px; }
.modal-footer { border-top: 1px solid var(--linea); padding: 14px 22px; background: var(--superficie-2); }
.modal-backdrop.show { opacity: .5; }
.modal-backdrop { background: #1a0607; }
:root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
.dropdown-menu { border: 1px solid var(--linea); border-radius: 14px; box-shadow: var(--sombra-2); padding: 6px; background: var(--superficie); --bs-dropdown-link-color: var(--tinta); --bs-dropdown-link-hover-bg: var(--hundido); --bs-dropdown-link-hover-color: var(--tinta); --bs-dropdown-divider-bg: var(--linea); --bs-dropdown-header-color: var(--tinta-3); }
.dropdown-item { border-radius: 9px; font-weight: 600; font-size: 13.5px; padding: 8px 12px; display: flex; align-items: center; gap: 10px; }
.dropdown-item .bi { color: var(--tinta-3); }
.offcanvas { background: var(--superficie); color: var(--tinta); border-color: var(--linea) !important; }
.popover { --bs-popover-bg: var(--superficie); --bs-popover-border-color: var(--linea); --bs-popover-body-color: var(--tinta); }
.list-group { --bs-list-group-bg: var(--superficie); --bs-list-group-color: var(--tinta); --bs-list-group-border-color: var(--linea); --bs-list-group-action-hover-bg: var(--hundido); --bs-list-group-action-hover-color: var(--tinta); }
.alert { border-radius: 14px; border: 1px solid; }
.alert-warning { background: var(--warn-s); color: var(--tinta); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.alert-info { background: var(--info-s); color: var(--tinta); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.alert-danger { background: var(--bad-s); color: var(--tinta); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }
.alert-success { background: var(--ok-s); color: var(--tinta); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }

/* ---------- Alertas GSAP (toasts) ---------- */
#st-toasts { position: fixed; top: 18px; right: 18px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 36px)); pointer-events: none; }
.st-toast { pointer-events: auto; position: relative; overflow: hidden; display: flex; gap: 12px; align-items: flex-start; padding: 14px 14px 16px; border-radius: 16px;
  background: color-mix(in srgb, var(--superficie) 92%, transparent); backdrop-filter: blur(12px); border: 1px solid var(--linea); box-shadow: var(--sombra-3); color: var(--tinta); font-size: 13.8px; font-weight: 600; }
.st-toast .ti { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.st-toast .ti svg { width: 20px; height: 20px; }
.st-toast.ok .ti { background: var(--ok-s); color: var(--ok); }
.st-toast.error .ti { background: var(--bad-s); color: var(--bad); }
.st-toast.info .ti { background: var(--st-oro-s); color: var(--st-oro-2); }
.st-toast.warn .ti { background: var(--warn-s); color: var(--warn); }
.st-toast .tt { font-weight: 800; display: block; margin-bottom: 1px; font-size: 13px; }
.st-toast .tm { color: var(--tinta-2); font-weight: 500; line-height: 1.4; }
.st-toast .x { margin-left: auto; border: 0; background: none; color: var(--tinta-3); font-size: 16px; padding: 0 2px; line-height: 1; }
.st-toast .prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left; background: currentColor; opacity: .5; }
.st-toast.ok .prog { color: var(--ok); } .st-toast.error .prog { color: var(--bad); } .st-toast.info .prog { color: var(--st-oro); } .st-toast.warn .prog { color: var(--warn); }

/* Diálogos GSAP (alerta / confirmar / preguntar) */
.st-dialogo-fondo { position: fixed; inset: 0; z-index: 2050; background: rgba(26, 6, 7, .55); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 18px; }
.st-dialogo { width: min(430px, 100%); border-radius: 26px; background: var(--superficie); border: 1px solid var(--linea); box-shadow: var(--sombra-3); padding: 30px 28px 24px; text-align: center; position: relative; overflow: hidden; }
.st-dialogo::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--st-rojo), var(--st-oro), var(--st-rojo)); }
.st-dialogo .icono { width: 78px; height: 78px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; }
.st-dialogo .icono svg { width: 78px; height: 78px; }
.st-dialogo.ok .icono { color: var(--ok); } .st-dialogo.error .icono, .st-dialogo.peligro .icono { color: var(--bad); }
.st-dialogo.warn .icono { color: var(--warn); } .st-dialogo.info .icono, .st-dialogo.pregunta .icono { color: var(--st-oro-2); }
:root[data-theme="dark"] .st-dialogo.info .icono, :root[data-theme="dark"] .st-dialogo.pregunta .icono { color: var(--st-oro); }
.st-dialogo h3 { font-size: 22px; margin-bottom: 8px; }
.st-dialogo p { color: var(--tinta-2); margin-bottom: 0; line-height: 1.5; }
.st-dialogo .botones { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.st-dialogo .botones .btn { min-width: 120px; }
.st-dialogo .form-control { margin-top: 14px; text-align: left; }
.st-cargando { position: fixed; inset: 0; z-index: 2100; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(4px); }
.st-cargando .caja { display: flex; flex-direction: column; align-items: center; gap: 14px; font-weight: 700; color: var(--tinta-2); }
.st-loader { width: 56px; height: 56px; position: relative; }
.st-loader i { position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; }
.st-loader i:nth-child(1) { border-top-color: var(--st-rojo); }
.st-loader i:nth-child(2) { inset: 8px; border-right-color: var(--st-oro); }
.st-loader i:nth-child(3) { inset: 16px; border-bottom-color: var(--st-rojo); opacity: .6; }

/* Barra de progreso de navegación */
#st-progreso { position: fixed; top: 0; left: 0; height: 3px; z-index: 3000; width: 0; background: linear-gradient(90deg, var(--st-oro-l), var(--st-oro), var(--st-rojo)); box-shadow: 0 0 10px var(--st-oro); }

/* ---------- Paleta de comandos ---------- */
.st-paleta-fondo { position: fixed; inset: 0; z-index: 2060; background: rgba(26, 6, 7, .45); backdrop-filter: blur(5px); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.st-paleta { width: min(640px, 100%); border-radius: 22px; background: var(--superficie); border: 1px solid var(--linea); box-shadow: var(--sombra-3); overflow: hidden; }
.st-paleta .entrada { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--linea); }
.st-paleta .entrada .bi { font-size: 19px; color: var(--st-oro-2); }
.st-paleta .entrada input { flex: 1; border: 0; outline: 0; background: none; font-size: 17px; font-weight: 600; color: var(--tinta); }
.st-paleta .res { max-height: 55vh; overflow-y: auto; padding: 8px; }
.st-paleta .grupo { padding: 10px 12px 4px; }
.st-paleta .item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; cursor: pointer; color: var(--tinta); }
.st-paleta .item .ii { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--hundido); color: var(--tinta-2); flex: none; }
.st-paleta .item small { color: var(--tinta-3); display: block; font-size: 12px; }
.st-paleta .item.sel { background: var(--st-rojo-s); }
.st-paleta .item.sel .ii { background: var(--st-rojo); color: #fff; }
.st-paleta .pie { display: flex; gap: 14px; padding: 10px 16px; border-top: 1px solid var(--linea); font-size: 12px; color: var(--tinta-3); background: var(--superficie-2); }

/* ---------- Vacío y esqueleto ---------- */
.vacio { text-align: center; padding: 48px 20px; color: var(--tinta-3); }
.vacio .bi { font-size: 40px; display: block; margin-bottom: 10px; color: var(--st-oro); opacity: .8; }
.vacio b { display: block; color: var(--tinta); font-size: 16px; margin-bottom: 4px; font-family: var(--f-titulo); }
.skeleton { height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--hundido) 25%, var(--superficie-2) 37%, var(--hundido) 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.anim { opacity: 0; }

/* ---------- Kanban ---------- */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: start; }
.kb-col { background: var(--superficie-2); border: 1px solid var(--linea); border-radius: 18px; display: flex; flex-direction: column; max-height: 76vh; }
.kb-col .kb-tit { padding: 14px 14px 10px; display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13.5px; }
.kb-col .kb-tit .n { margin-left: auto; font-family: var(--f-mono); font-size: 11.5px; background: var(--superficie); border: 1px solid var(--linea); padding: 1px 8px; border-radius: 999px; }
.kb-col .kb-tit .dot { width: 9px; height: 9px; border-radius: 50%; }
.kb-lista { padding: 4px 10px 12px; overflow-y: auto; min-height: 90px; flex: 1; display: flex; flex-direction: column; gap: 8px; border-radius: 0 0 18px 18px; transition: background .2s; }
.kb-lista.sobre { background: color-mix(in srgb, var(--st-oro) 12%, transparent); }
.kb-card { background: var(--superficie); border: 1px solid var(--linea); border-radius: 14px; padding: 12px; cursor: grab; box-shadow: var(--sombra-1); transition: box-shadow .2s, border-color .2s; }
.kb-card:hover { box-shadow: var(--sombra-2); border-color: var(--linea-2); }
.kb-card.arrastrando { opacity: .45; }
.kb-card .nm { font-weight: 800; font-size: 13.6px; line-height: 1.25; }
.kb-card .meta { font-size: 12px; color: var(--tinta-3); margin-top: 3px; }

/* ---------- Línea de tiempo ---------- */
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ''; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--st-oro), var(--linea)); border-radius: 2px; }
.tl-item { position: relative; padding: 0 0 16px; }
.tl-item::before { content: ''; position: absolute; left: -22px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--superficie); border: 3px solid var(--st-rojo); }
.tl-item.oro::before { border-color: var(--st-oro); }
.tl-item .t { font-size: 11.5px; color: var(--tinta-3); font-weight: 700; }

/* ---------- Checklist (contratación / inducción) ---------- */
.check-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--linea); border-radius: 14px; background: var(--superficie); transition: border-color .2s, background .2s; }
.check-item + .check-item { margin-top: 8px; }
.check-item.hecho { background: var(--ok-s); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.check-item.na { opacity: .55; }
.check-btn { width: 30px; height: 30px; flex: none; border-radius: 10px; border: 2px solid var(--linea-2); background: var(--superficie); display: grid; place-items: center; color: transparent; transition: all .25s var(--t); }
.check-item.hecho .check-btn { background: var(--ok); border-color: var(--ok); color: #fff; }
.check-item.proceso .check-btn { border-color: var(--warn); color: var(--warn); }

/* ---------- Perfil candidato / encabezado ---------- */
.perfil-cab { position: relative; border-radius: 24px; overflow: hidden; padding: 26px; color: #fff; background:
  radial-gradient(80% 120% at 100% 0%, rgba(232, 207, 138, .28), transparent 60%), linear-gradient(130deg, #a41519, #6d0d11 70%); box-shadow: var(--sombra-2); }
:root[data-theme="dark"] .perfil-cab { background: radial-gradient(80% 120% at 100% 0%, rgba(224, 187, 98, .18), transparent 60%), radial-gradient(70% 140% at 0% 100%, rgba(224, 68, 74, .28), transparent 60%), linear-gradient(130deg, #16224d, #0a1128 70%); }
.perfil-cab h2 { color: #fff; font-size: 28px; margin: 0; }
.perfil-cab .sub { color: rgba(255, 255, 255, .78); }
.perfil-cab .chip { background: rgba(255, 255, 255, .14); color: #fff; }
.perfil-cab .btn-light { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .2); color: #fff; }
.perfil-cab .btn-light:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.perfil-cab .anillo::before { background: #7e0f13; }
:root[data-theme="dark"] .perfil-cab .anillo::before { background: #0d1531; }
.perfil-cab .anillo { --c: var(--st-oro-l); background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(255, 255, 255, .15) 0); }
.dato { display: flex; flex-direction: column; gap: 1px; }
.dato small { color: var(--tinta-3); font-size: 11.5px; font-weight: 700; }
.dato span { font-weight: 700; }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px 18px; }

/* Lector de CV */
.cv-dropzone { min-height: 240px; display: grid; place-items: center; }
.cv-hallazgo { border: 1px solid var(--linea); border-radius: 14px; padding: 14px; background: var(--superficie); height: 100%; }
.cv-hallazgo .h { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); font-weight: 800; margin-bottom: 8px; display: flex; gap: 6px; align-items: center; }
.cv-hallazgo .h .bi { color: var(--st-oro-2); }
.medidor { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; }
.medidor .barra { flex: 1; }
.texto-cv { max-height: 420px; overflow: auto; white-space: pre-wrap; font-family: var(--f-mono); font-size: 12px; background: var(--hundido); padding: 14px; border-radius: 12px; color: var(--tinta-2); }
mark { background: var(--st-oro-l); color: #2a1a0a; padding: 0 2px; border-radius: 3px; }

/* Matriz de permisos */
.matriz th, .matriz td { text-align: center; }
.matriz td:first-child, .matriz th:first-child { text-align: left; }
.matriz .grupo-fila td { background: var(--superficie-2); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; color: var(--st-oro-2); }
.permiso { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--linea-2); background: var(--superficie); display: inline-grid; place-items: center; color: transparent; transition: all .2s var(--t); cursor: pointer; }
.permiso.si { background: var(--st-rojo); border-color: var(--st-rojo); color: #fff; }
.permiso.exc-si { background: var(--ok); border-color: var(--ok); color: #fff; box-shadow: 0 0 0 3px var(--ok-s); }
.permiso.exc-no { background: var(--bad-s); border-color: var(--bad); color: var(--bad); }
.permiso:disabled { opacity: .35; cursor: default; }

/* Consola SMTP */
.consola { background: #140c0d; color: #e9dcd9; border-radius: 14px; padding: 14px 16px; font-family: var(--f-mono); font-size: 12px; max-height: 340px; overflow: auto; line-height: 1.6; }
.consola .c { color: #f0d48a; } .consola .c::before { content: '→ '; opacity: .6; }
.consola .s { color: #a9c7b7; } .consola .s::before { content: '← '; opacity: .6; }
.consola .info { color: #9fb8e6; } .consola .ok { color: #6fdc9f; } .consola .err { color: #ff8a80; }

/* Calendario simple */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal .d { min-height: 92px; border: 1px solid var(--linea); border-radius: 12px; padding: 6px; background: var(--superficie); font-size: 12px; }
.cal .d.otro { opacity: .4; }
.cal .d.hoy { border-color: var(--st-oro); box-shadow: inset 0 0 0 1px var(--st-oro); }
.cal .d .n { font-family: var(--f-mono); font-weight: 600; color: var(--tinta-3); }
.cal .ev { display: block; margin-top: 3px; padding: 2px 6px; border-radius: 6px; background: var(--st-rojo-s); color: var(--st-rojo); font-weight: 700; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.cal .ev.oro { background: var(--st-oro-s); color: var(--st-oro-2); }
.cal-cab { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--tinta-3); text-align: center; }

/* Planes */
.plan-card { border-radius: 24px; padding: 26px; border: 1px solid var(--linea); background: var(--superficie); position: relative; height: 100%; display: flex; flex-direction: column; transition: transform .3s var(--t), box-shadow .3s; }
.plan-card:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); }
.plan-card.destacado { border: 0; background: linear-gradient(160deg, #a41519, #5a0a0d); color: #fff; box-shadow: var(--sombra-3); }
.plan-card .precio { font-family: var(--f-titulo); font-size: 42px; font-weight: 800; letter-spacing: -.04em; }
.plan-card ul { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 9px; font-size: 14px; }
.plan-card li .bi { color: var(--st-oro-2); margin-right: 6px; }
.plan-card.destacado li .bi { color: var(--st-oro-l); }

/* Bloqueo / estados */
.pantalla-centro { min-height: calc(100vh - var(--top-h) - 80px); display: grid; place-items: center; }

/* ---------- Responsivo ---------- */
.btn-menu { display: none; }
@media (max-width: 1100px) {
  .buscador { min-width: 0; } .buscador span, .buscador kbd { display: none; }
}
@media (max-width: 991px) {
  .st-app, .st-app.rail { grid-template-columns: 1fr; }
  .st-sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--sb-w); transform: translateX(-105%); transition: transform .4s var(--t); box-shadow: var(--sombra-3); }
  .st-app.menu-abierto .st-sidebar { transform: none; }
  .st-app.menu-abierto::after { content: ''; position: fixed; inset: 0; background: rgba(20, 5, 6, .45); z-index: 1025; }
  .btn-menu { display: inline-grid; }
  .btn-rail { display: none !important; }
  .st-vista { padding: 18px 16px 50px; }
  .st-top { padding: 0 14px; }
  .franja { margin: 14px 16px 0; }
  .usuario-chip .n { display: none; }
}
@media (max-width: 576px) { .seccion-tit h2 { font-size: 22px; } .kpi .v { font-size: 26px; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .anim { opacity: 1 !important; } }
@media print {
  .st-sidebar, .st-top, .franja, .no-print { display: none !important; }
  .st-app { display: block; } .st-vista { padding: 0; }
  body { background: #fff; color: #000; }
}

/* Ajustes de componentes de Bootstrap con la marca */
.list-group-item.active { background: var(--st-rojo); border-color: var(--st-rojo); color: #fff; }
.list-group-item.active .text-oro, .list-group-item.active .bi { color: var(--st-oro-l) !important; }
.list-group-item { background: var(--superficie); color: var(--tinta); border-color: var(--linea); }
.form-control-color { padding: 4px; height: 42px; }
.min-w-0 { min-width: 0; }
.place-items-center { place-items: center; }
.text-bg-light { background: var(--hundido) !important; color: var(--tinta) !important; }
.btn-close:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--st-oro) 25%, transparent); }
.burbuja { max-width: 78%; padding: 8px 12px; border-radius: 14px; margin-bottom: 6px; background: var(--hundido); color: var(--tinta); }
.burbuja.out { margin-left: auto; background: var(--st-rojo); color: #fff; }
.burbuja small { display: block; opacity: .7; font-size: 11px; }
.resultado-calc { background: linear-gradient(135deg, var(--st-rojo-s), var(--st-oro-s)); border-radius: var(--radio); padding: 18px; }
.resultado-calc .grande { font-family: var(--f-titulo); font-size: 34px; font-weight: 800; letter-spacing: -.03em; }

/* Selector de cuenta de trabajo del superadministrador */
a.sb-cuenta { color: rgba(255, 255, 255, .8); text-decoration: none; transition: background .2s, border-color .2s; }
a.sb-cuenta:hover { background: rgba(255, 255, 255, .13); border-color: rgba(232, 199, 122, .45); color: #fff; }