/* ==========================================================================
   PISTON QUARKS — Panel de talento
   --------------------------------------------------------------------------
   Es una pantalla de trabajo, no de venta. Densidad sobreients``: se ve
   mucho dato por centimetro, el color se usa solo para el estado del
   pipeline y no hay nada que se mueva sola.

   El drawer lateral es la unica pieza con animacion: abrir y cerrar, para
   que la ficha no tape la lista.
   ========================================================================== */

.pn {
  background: #0B0B10;
  color: #EDEDF2;
  --pn-bg: #0B0B10;
  --pn-surface: #13131C;
  --pn-line: rgba(255,255,255,0.10);
  --pn-line-2: rgba(255,255,255,0.18);
  --pn-text: #EDEDF2;
  --pn-text-2: rgba(237,237,242,0.70);
  --pn-text-3: rgba(237,237,242,0.44);
  --pn-accent: #6B5CFF;
  --pn-accent-hi: #9C90FF;
}

.pn .nav { background: rgba(11,11,16,0.86); border-bottom-color: var(--pn-line); }
.pn .brand__mark { color: #fff; }
.pn .nav__links a { color: var(--pn-text-3); }
.pn .nav__links a:hover { color: #fff; }
.pn .rule { border-color: var(--pn-line); }
.pn .section--paper { background: #0E0E15; border-block: 1px solid var(--pn-line); }
.pn .t-1 { color: #fff; }
.pn .lead { color: var(--pn-text-2); }
.pn .eyebrow { color: var(--pn-accent-hi); }

.pn__user {
  margin-right: var(--pq-s4);
  font: 500 0.8125rem/1 var(--pq-font-mono);
  color: var(--pn-text-3);
}
.pn__salir {
  padding: 8px 14px;
  font: 500 0.8125rem/1 var(--pq-font-body);
  color: var(--pn-text-2);
  background: transparent;
  border: 1px solid var(--pn-line-2);
  border-radius: 6px;
  cursor: pointer;
}
.pn__salir:hover { color: #fff; border-color: var(--pn-text-3); }

/* ==========================================================================
   PUERTA DE ACCESO
   ========================================================================== */

/* El atributo hidden vale por si solo en la hoja del navegador. Cualquier
   regla de author con display explicito lo pisa, asi que sin este guard
   .pn__gate se queda pegado en pantalla aun con hidden. Mismo caso para
   .pn__drawer, que usa display:flex. */
[hidden] { display: none !important; }

.pn__gate {
  min-height: 70vh;
  display: grid;
  place-items: center;
  padding: var(--pq-s8) var(--pq-s5);
}
.pn__gateCard {
  width: 100%;
  max-width: 420px;
  padding: var(--pq-s7) var(--pq-s6);
  border: 1px solid var(--pn-line);
  border-radius: 14px;
  background: var(--pn-surface);
  text-align: center;
}
.pn__gateKicker {
  margin: 0 0 var(--pq-s3);
  font: 500 0.6875rem/1 var(--pq-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pn-accent-hi);
}
.pn__gateTitle {
  margin: 0 0 var(--pq-s3);
  font: 700 var(--pq-t-3)/1.25 var(--pq-font-display);
  color: #fff;
}
.pn__gateText {
  margin: 0 0 var(--pq-s5);
  font: 400 0.9375rem/1.6 var(--pq-font-body);
  color: var(--pn-text-2);
}
.pn__gateBtns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pq-s3);
  justify-content: center;
}

/* ==========================================================================
   RESUMEN
   ========================================================================== */

.pn__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--pq-s6);
  padding-top: var(--pq-s7);
  padding-bottom: var(--pq-s6);
}
.pn__kicker {
  margin: 0 0 var(--pq-s2);
  font: 500 0.6875rem/1 var(--pq-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pn-accent-hi);
}
.pn__title {
  margin: 0;
  font: 800 var(--pq-t-2)/1.1 var(--pq-font-display);
  letter-spacing: -0.02em;
  color: #fff;
}
.pn__sub {
  margin: 0;
  font: 700 var(--pq-t-3)/1.25 var(--pq-font-display);
  color: #fff;
}

.pn__filtros { display: flex; flex-wrap: wrap; gap: var(--pq-s3); }
.pn__filtro { display: grid; gap: 5px; }
.pn__filtro span {
  font: 500 0.625rem/1 var(--pq-font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pn-text-3);
}
.pn__filtro select,
.pn__filtro input {
  padding: 9px 12px;
  font: 400 0.875rem/1.3 var(--pq-font-body);
  color: #fff;
  background: var(--pn-surface);
  border: 1px solid var(--pn-line-2);
  border-radius: 6px;
  min-width: 148px;
}
.pn__filtro select:focus,
.pn__filtro input:focus { outline: none; border-color: var(--pn-accent); }
.pn__filtro select option { background: var(--pn-surface); }

/* --- Tarjetas por perfil --- */
.pn__tarjetas {
  display: grid;
  gap: var(--pq-s4);
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  margin-bottom: var(--pq-s7);
}
.pn__tarjeta {
  padding: var(--pq-s5);
  border: 1px solid var(--pn-line);
  border-radius: 10px;
  background: var(--pn-surface);
}
.pn__tarjeta--vacio { opacity: 0.45; }
.pn__tarjetaCat {
  margin: 0 0 var(--pq-s3);
  font: 600 0.8125rem/1.3 var(--pq-font-display);
  color: #fff;
}
.pn__tarjetaN {
  font: 700 1.875rem/1 var(--pq-font-display);
  color: #fff;
}
.pn__tarjetaK {
  display: block;
  margin-top: 4px;
  font: 500 0.625rem/1.3 var(--pq-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pn-text-3);
}
.pn__barra {
  display: flex;
  height: 4px;
  margin-top: var(--pq-s4);
  border-radius: 2px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
}
.pn__barraSeg { height: 100%; }

/* --- Embudo --- */
.pn__embudo { margin-bottom: var(--pq-s7); }
.pn__embudoGrid {
  display: grid;
  gap: var(--pq-s3);
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  margin-top: var(--pq-s4);
}
.pn__paso {
  padding: var(--pq-s4) var(--pq-s5);
  border: 1px solid var(--pn-line);
  border-radius: 10px;
  background: var(--pn-surface);
}
.pn__pasoN {
  font: 700 1.5rem/1 var(--pq-font-display);
  color: #fff;
}
.pn__pasoK {
  display: block;
  margin-top: 4px;
  font: 500 0.625rem/1.35 var(--pq-font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pn-text-3);
}

.pn__head2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pq-s4);
  margin-bottom: var(--pq-s5);
}
.pn__count {
  font: 500 0.8125rem/1 var(--pq-font-mono);
  color: var(--pn-text-3);
}

/* ==========================================================================
   LISTA
   ========================================================================== */

.pn__fila {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr 0.7fr 0.9fr auto;
  gap: var(--pq-s4);
  align-items: center;
  width: 100%;
  padding: var(--pq-s4) var(--pq-s5);
  text-align: left;
  background: var(--pn-surface);
  border: 1px solid var(--pn-line);
  border-radius: 10px;
  cursor: pointer;
  font: 400 0.875rem/1.35 var(--pq-font-body);
  color: var(--pn-text-2);
  transition: border-color 180ms var(--pq-ease);
}
.pn__fila:hover { border-color: var(--pn-line-2); }
.pn__fila + .pn__fila { margin-top: var(--pq-s2); }

.pn__filaHead {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr 0.7fr 0.9fr auto;
  gap: var(--pq-s4);
  padding: 0 var(--pq-s5) var(--pq-s3);
  font: 500 0.625rem/1 var(--pq-font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pn-text-3);
}
@media (max-width: 860px) {
  .pn__fila, .pn__filaHead { grid-template-columns: 1fr 1fr; }
  .pn__filaHead { display: none; }
}

.pn__filaNombre { color: #fff; font-weight: 500; }
.pn__filaMail { color: var(--pn-text-3); font-family: var(--pq-font-mono); font-size: 0.75rem; }
.pn__filaFecha { color: var(--pn-text-3); font-family: var(--pq-font-mono); font-size: 0.75rem; }

/* Estado: el color es la senal, y siempre va con la palabra. */
.pn__estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font: 600 0.6875rem/1 var(--pq-font-mono);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.pn__estado::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.pn__estado--registrado { color: #9AA4B2; background: rgba(154,164,178,0.14); }
.pn__estado--examen_pendiente { color: #E0B341; background: rgba(224,179,65,0.14); }
.pn__estado--prueba_kpi { color: #5AA9E6; background: rgba(90,169,230,0.14); }
.pn__estado--aprobado { color: #5FD39B; background: rgba(95,211,155,0.14); }
.pn__estado--rechazado { color: #FF8A7A; background: rgba(255,138,122,0.14); }

/* El numero del embudo y el tramo de la barra llevan el estado como clase.
   Antes iba en style="" con el color, y la CSP lo rechazaba: el numero
   salia sin color y la barra sin ancho. */
.pn__pasoN--registrado { color: #9AA4B2; }
.pn__pasoN--examen_pendiente { color: #E0B341; }
.pn__pasoN--prueba_kpi { color: #5AA9E6; }
.pn__pasoN--aprobado { color: #5FD39B; }
.pn__pasoN--rechazado { color: #FF8A7A; }

.pn__barraSeg--registrado { background: #9AA4B2; }
.pn__barraSeg--examen_pendiente { background: #E0B341; }
.pn__barraSeg--prueba_kpi { background: #5AA9E6; }
.pn__barraSeg--aprobado { background: #5FD39B; }
.pn__barraSeg--rechazado { background: #FF8A7A; }

/* Los tramos se reparten con flex-grow desde data-n, para no escribir un
   width por elemento. */
.pn__barraSeg { flex-grow: var(--n, 1); }

.pn__tenue { color: var(--pn-text-3); }

/* Con el drawer abierto el fondo no debe seguir desplazandose. */
body.pn-lock { overflow: hidden; }

.pn__vacío {
  padding: var(--pq-s7);
  text-align: center;
  color: var(--pn-text-3);
  font: 400 0.9375rem/1.6 var(--pq-font-body);
}

/* --- Leads --- */
.pn__leads {
  display: grid;
  gap: var(--pq-s3);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.pn__lead {
  padding: var(--pq-s5);
  border: 1px solid var(--pn-line);
  border-radius: 10px;
  background: var(--pn-surface);
}
.pn__leadPath {
  margin: 0 0 var(--pq-s2);
  font: 500 0.75rem/1.3 var(--pq-font-mono);
  color: var(--pn-text-3);
  word-break: break-all;
}
.pn__leadN { font: 700 1.625rem/1 var(--pq-font-display); color: #fff; }

/* ==========================================================================
   DRAWER — ficha del candidato
   ========================================================================== */

.pn__drawer { position: fixed; inset: 0; z-index: 200; }
.pn__drawerBack {
  position: absolute;
  inset: 0;
  background: rgba(4,4,8,0.72);
  border: 0;
  cursor: pointer;
}
.pn__drawerPanel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(520px, 100%);
  overflow-y: auto;
  background: var(--pn-surface);
  border-left: 1px solid var(--pn-line);
  padding: var(--pq-s6);
}
.pn__drawerHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pq-s4);
  margin-bottom: var(--pq-s5);
  padding-bottom: var(--pq-s4);
  border-bottom: 1px solid var(--pn-line);
}
.pn__drawerX {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--pn-text-3);
  background: transparent;
  border: 1px solid var(--pn-line-2);
  border-radius: 6px;
  cursor: pointer;
}
.pn__drawerX:hover { color: #fff; }

.pn__campo { margin-bottom: var(--pq-s5); }
.pn__campoK {
  display: block;
  margin-bottom: 5px;
  font: 500 0.625rem/1 var(--pq-font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pn-text-3);
}
.pn__campoV {
  margin: 0;
  font: 400 0.9375rem/1.6 var(--pq-font-body);
  color: var(--pn-text-2);
  word-break: break-word;
}
.pn__campoV a { color: var(--pn-accent-hi); }

.pn__grupo {
  padding: var(--pq-s5) 0;
  border-top: 1px solid var(--pn-line);
}
.pn__grupoK {
  margin: 0 0 var(--pq-s4);
  font: 600 0.75rem/1 var(--pq-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pn-text-3);
}
.pn__estados {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pq-s2);
}
.pn__estadoBtn {
  padding: 8px 12px;
  font: 500 0.75rem/1 var(--pq-font-body);
  color: var(--pn-text-3);
  background: transparent;
  border: 1px solid var(--pn-line-2);
  border-radius: 6px;
  cursor: pointer;
}
.pn__estadoBtn:hover { color: #fff; }
.pn__estadoBtn[aria-pressed='true'] {
  color: #fff;
  border-color: var(--pn-accent);
  background: rgba(107,92,255,0.16);
}

.pn__campo textarea,
.pn__campo input[type='number'] {
  width: 100%;
  padding: 10px 12px;
  font: 400 0.875rem/1.5 var(--pq-font-body);
  color: #fff;
  background: var(--pn-bg);
  border: 1px solid var(--pn-line-2);
  border-radius: 6px;
}
.pn__campo textarea { min-height: 84px; resize: vertical; }
.pn__campo input[type='number'] { max-width: 110px; }
.pn__campo textarea:focus,
.pn__campo input:focus { outline: none; border-color: var(--pn-accent); }

.pn__drawerFoot {
  display: flex;
  align-items: center;
  gap: var(--pq-s3);
  padding-top: var(--pq-s4);
  border-top: 1px solid var(--pn-line);
}
.pn__drawerEstado {
  margin: 0 0 var(--pq-s4);
  font: 400 0.8125rem/1.5 var(--pq-font-body);
  color: var(--pn-text-3);
}
.pn__drawerEstado.is-ok { color: #5FD39B; }
.pn__drawerEstado.is-error { color: #FF8A7A; }

@media (prefers-reduced-motion: reduce) {
  .pn__fila, .pn__estadoBtn { transition: none; }
}