/* ============================================================
   ZOI Sourcing — Tema v2 (dark-glass navy · cyan acción · coral urgencia)
   Capa de re-skin sobre el markup Tailwind existente. NO toca lógica.
   Carga DESPUÉS de Tailwind. Mata el amber, agrega glass + fondo navy.
   ============================================================ */
:root{
  --navy-0:#0B1B2E; --navy-1:#14283F; --navy-2:#1E3A5F;
  --coral:#FF6B8E; --coral-soft:rgba(255,107,142,.12);
  --cyan:#4FD1E3; --sky:#7CC4E0; --ok:#34D399; --warn:#E2B97F; --danger:#F2546B;
}

/* ---- Fondo navy con profundidad (Elevación 0) ---- */
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif !important;
  color:rgba(255,255,255,.92) !important;
  background:linear-gradient(180deg,var(--navy-0),var(--navy-1) 55%,var(--navy-2)) !important;
  background-attachment:fixed !important;
  position:relative;
}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(440px circle at 12% 6%, rgba(79,209,227,.15), transparent 60%),
    radial-gradient(520px circle at 90% 0%, rgba(255,107,142,.11), transparent 55%),
    radial-gradient(620px circle at 72% 102%, rgba(124,196,224,.10), transparent 60%);}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 85% 70% at 50% 25%,#000,transparent 78%);
          mask-image:radial-gradient(ellipse 85% 70% at 50% 25%,#000,transparent 78%);}
/* el contenido vive por encima del fondo */
body > *{position:relative;z-index:1}

/* ---- Tipografía premium ---- */
h1,h2,h3,.text-3xl,.text-2xl,.text-xl,.font-semibold.text-xl{
  font-family:'Space Grotesk','Inter',sans-serif !important;letter-spacing:-.02em}
.text-3xl,.text-2xl,.tabular-nums{font-variant-numeric:tabular-nums}

/* ============================================================
   MATAR EL AMBER  →  cyan (acción) / coral (firma)
   ============================================================ */
.text-amber-300,.text-amber-400,.text-amber-500,.text-amber-200{color:var(--cyan) !important}
.bg-amber-400,.bg-amber-300,.bg-amber-500{background-color:transparent !important;background-image:linear-gradient(135deg,var(--sky),var(--cyan)) !important;color:#08293a !important;border-radius:999px !important;box-shadow:0 8px 22px -8px rgba(79,209,227,.5)}
.hover\:bg-amber-300:hover,.bg-amber-400:hover{background-image:linear-gradient(135deg,#8fd0e6,#5fd9ea) !important}
.from-amber-400{--tw-gradient-from:var(--sky) !important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to) !important}
.to-amber-600,.to-amber-500{--tw-gradient-to:var(--cyan) !important}
/* la pestaña/elemento "activo" lleva la firma coral, no cyan */
.border-amber-400,.border-amber-300{border-color:var(--coral) !important}
.border-amber-400\/40,.hover\:border-amber-400\/40:hover{border-color:rgba(255,107,142,.45) !important}
.text-amber-300.border-amber-400{color:var(--coral) !important}
.ring-amber-400,.focus\:ring-amber-400:focus{--tw-ring-color:var(--cyan) !important}
.focus\:border-amber-400:focus{border-color:var(--cyan) !important}

/* ============================================================
   GLASS en superficies (tarjetas, nav, drawer, paneles)
   ============================================================ */
[class*="bg-slate-900"]{
  backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%);
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:0 20px 55px -28px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
}
/* bordes → línea de vidrio */
[class*="border-slate-800"],[class*="border-slate-700"]{border-color:rgba(255,255,255,.12) !important}
/* hover de tarjetas → elevación glass */
.hover\:border-amber-400\/40:hover,.hover\:border-slate-700:hover{background:rgba(255,255,255,.04) !important;border-color:rgba(255,255,255,.22) !important}

/* texto: jerarquía sobre navy */
.text-slate-100{color:rgba(255,255,255,.92) !important}
.text-slate-300{color:rgba(255,255,255,.78) !important}
.text-slate-400{color:rgba(255,255,255,.62) !important}
.text-slate-500{color:rgba(255,255,255,.48) !important}

/* ---- Inputs glass + foco cyan (mata el foco amber de styles.css) ---- */
input,select,textarea{background-color:rgba(255,255,255,.04) !important;border-color:rgba(255,255,255,.12) !important;color:rgba(255,255,255,.92) !important;border-radius:12px !important}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.38) !important}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(79,209,227,.18) !important;border-color:var(--cyan) !important;outline:none !important}

/* ---- botones: pill + micro-interacción ---- */
button,.btn{transition:transform .12s, box-shadow .12s, background .12s}
button:active{transform:translateY(1px)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ---- semántica de estado (verde éxito / coral-rojo alarma) ---- */
.text-emerald-300,.text-emerald-400{color:var(--ok) !important}
.text-red-400,.text-red-300{color:var(--danger) !important}
.bg-emerald-900\/20{background:rgba(52,211,153,.12) !important}
.border-emerald-700\/40,.border-emerald-700{border-color:rgba(52,211,153,.4) !important}

/* ---- logo gradiente → cyan premium ---- */
.bg-gradient-to-br.from-amber-400{background-image:linear-gradient(135deg,var(--sky),var(--cyan)) !important}

/* scrollbar discreta */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:999px}
*::-webkit-scrollbar-track{background:transparent}

/* ============================================================
   FASE 2 — componentes (lista=acciones, score banda, estados)
   ============================================================ */
:root{ --t-92:rgba(255,255,255,.92); --t-72:rgba(255,255,255,.72); --t-50:rgba(255,255,255,.5); }

/* chips de estado (paleta nueva, mata el amber dinámico de estadoColorClass) */
.est{font-weight:600 !important;border:1px solid transparent;border-radius:999px !important;white-space:nowrap;letter-spacing:.01em}
.est-no_contactado,.est-no_contactado{color:var(--t-72) !important;background:rgba(255,255,255,.06) !important;border-color:rgba(255,255,255,.14) !important}
.est-contactado{color:var(--sky) !important;background:rgba(124,196,224,.13) !important;border-color:rgba(124,196,224,.32) !important}
.est-evaluado_zoi{color:var(--cyan) !important;background:rgba(79,209,227,.12) !important;border-color:rgba(79,209,227,.3) !important}
.est-entregado_cliente{color:var(--ok) !important;background:rgba(52,211,153,.12) !important;border-color:rgba(52,211,153,.34) !important}
.est-en_entrevista_cliente{color:#C7B3FF !important;background:rgba(167,139,250,.14) !important;border-color:rgba(167,139,250,.34) !important}
.est-oferta_extendida{color:var(--ok) !important;background:rgba(52,211,153,.16) !important;border-color:rgba(52,211,153,.4) !important}
.est-placement{color:#34D399 !important;background:rgba(52,211,153,.2) !important;border-color:rgba(52,211,153,.5) !important}
.est-descartado{color:var(--danger) !important;background:rgba(242,84,107,.12) !important;border-color:rgba(242,84,107,.3) !important}
.est-abierta{color:var(--ok) !important;background:rgba(52,211,153,.12) !important;border:1px solid rgba(52,211,153,.32) !important}
.est-pausada{color:var(--warn) !important;background:rgba(226,185,127,.12) !important;border:1px solid rgba(226,185,127,.32) !important}

/* score como BANDA (anillo de color) */
.sb{display:flex;flex-direction:column;align-items:center;gap:1px;flex-shrink:0}
.sb .ring{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:12.5px;font-variant-numeric:tabular-nums}
.sb-fuerte .ring{color:var(--ok);box-shadow:inset 0 0 0 2px rgba(52,211,153,.55);background:rgba(52,211,153,.08)}
.sb-medio .ring{color:var(--warn);box-shadow:inset 0 0 0 2px rgba(226,185,127,.5);background:rgba(226,185,127,.08)}
.sb-bajo .ring{color:var(--danger);box-shadow:inset 0 0 0 2px rgba(242,84,107,.45);background:rgba(242,84,107,.07)}
.sb .b{font-size:9px;color:var(--t-50);text-transform:uppercase;letter-spacing:.06em}
/* número de score en el drawer */
.sc-fuerte{color:var(--ok) !important}.sc-medio{color:var(--warn) !important}.sc-bajo{color:var(--danger) !important}

/* próxima acción: coral si vencida */
.prox{color:rgba(255,255,255,.6);margin-top:.25rem}
.prox-over{color:var(--coral) !important;font-weight:600;margin-top:.25rem}

/* tarjeta de candidato → glass limpio (el score comunica la banda, no el fondo) */
.candidato-card{background:rgba(255,255,255,.04) !important;border:1px solid rgba(255,255,255,.10) !important;transition:background .12s,border-color .12s}
.candidato-card:hover{background:rgba(255,255,255,.07) !important;border-color:rgba(255,255,255,.22) !important}
.cand-co{color:var(--t-72) !important;font-weight:500}
/* botones feedback ✓ ✗ */
.fb-yes{background:rgba(52,211,153,.16) !important;color:var(--ok) !important;border:1px solid rgba(52,211,153,.3)}
.fb-yes:hover{background:rgba(52,211,153,.28) !important}
.fb-no{background:rgba(242,84,107,.14) !important;color:var(--danger) !important;border:1px solid rgba(242,84,107,.28)}
.fb-no:hover{background:rgba(242,84,107,.26) !important}

/* ============================================================
   POLISH — tooltip score · densidad · empty states
   ============================================================ */
/* tooltip "por qué este score" (usa razon_score) */
.sb{position:relative}
.sb-tip{position:absolute;bottom:48px;right:-6px;width:max-content;max-width:280px;text-align:left;
  background:rgba(14,28,46,.98);border:1px solid rgba(255,255,255,.22);border-radius:11px;padding:9px 12px;
  font-size:12px;line-height:1.45;color:var(--t-72);box-shadow:0 18px 44px -14px rgba(0,0,0,.75);
  opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .14s, transform .14s;z-index:60}
.sb:hover .sb-tip{opacity:1;transform:translateY(0)}
.sb-tip::after{content:"";position:absolute;bottom:-5px;right:18px;width:9px;height:9px;background:rgba(14,28,46,.98);
  border-right:1px solid rgba(255,255,255,.22);border-bottom:1px solid rgba(255,255,255,.22);transform:rotate(45deg)}

/* toggle de densidad */
.dens-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:var(--t-72);font-weight:500;cursor:pointer;transition:.12s}
.dens-btn:hover{background:rgba(255,255,255,.12);color:var(--t-92)}
.dense .candidato-card{padding:7px 13px !important}
.dense .candidato-card .text-xs{font-size:11px}
.dense .sb .ring{width:30px;height:30px;font-size:11.5px}
.dense .sb .b{display:none}
.dense h4{margin-bottom:8px !important}

/* empty states pulidos */
.empty-mini{text-align:center;padding:42px 20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:18px}
.empty-mini .em-ic{width:48px;height:48px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;font-size:22px;color:var(--cyan);background:rgba(79,209,227,.1);box-shadow:inset 0 0 0 2px rgba(79,209,227,.35)}
.empty-mini .em-t{font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--t-92);font-size:15px;margin-bottom:4px}
.empty-mini .em-p{font-size:13px;color:var(--t-50);max-width:360px;margin:0 auto}