/* Ruta · Selección de operadores — sistema visual del panel. */
@font-face {
  font-family: 'Rubik';
  src: url('../fuentes/rubik-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --fondo: #f4f3f8;
  --superficie: rgba(255, 255, 255, 0.9);
  --superficie-solida: #ffffff;
  --superficie-2: #f8f7fb;
  --tinta: #17161c;
  --tinta-2: #5f5d6b;
  --tinta-3: #9896a4;
  --linea: rgba(23, 22, 28, 0.08);
  --linea-fuerte: rgba(23, 22, 28, 0.14);
  --acento: #8c52ff;
  --acento-fuerte: #6a35e0;
  --acento-suave: #efe8ff;
  --acento-medio: #d8c6ff;
  --pista: #ece6fa;
  /* Series validadas (dataviz): una sola serie usa --serie; dos series, --serie-a y --serie-b. */
  --serie: #8c52ff;
  --serie-a: #a47cf6;
  --serie-b: #5a2bd0;
  --verde: #16794c;
  --verde-suave: #e2f5eb;
  --ambar: #9a5800;
  --ambar-suave: #fff1d6;
  --rojo: #c2352d;
  --rojo-suave: #fde8e6;
  --radio: 20px;
  --radio-chico: 12px;
  --sombra: 0 1px 2px rgba(23, 22, 28, 0.04), 0 10px 30px -12px rgba(48, 22, 110, 0.14);
  --sombra-alta: 0 2px 6px rgba(23, 22, 28, 0.06), 0 24px 60px -18px rgba(48, 22, 110, 0.28);
  --fuente: 'Rubik', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);
  --lateral: 248px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; background: var(--fondo); color: var(--tinta);
  font: 400 15px/1.5 var(--fuente); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
p { margin: 0; }
a { color: var(--acento-fuerte); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.suave { color: var(--tinta-2); }
.tenue { color: var(--tinta-3); }
.oculto { display: none !important; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 6px; }

/* Fondo: degradados fijos y baratos de dibujar (sin desenfoque ni animación, para que nunca trabe
   la página en equipos sin aceleración gráfica o al compartir pantalla). */
.fondo-vivo {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(560px 420px at 82% -6%, rgba(206, 182, 255, 0.55), transparent 70%),
    radial-gradient(520px 420px at 18% 108%, rgba(196, 218, 255, 0.5), transparent 70%),
    radial-gradient(420px 360px at 104% 48%, rgba(245, 207, 236, 0.45), transparent 70%);
}
.fondo-vivo i { display: none; }

/* Estructura */
.app { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: 100vh; }
.lateral {
  position: sticky; top: 0; height: 100vh; padding: 22px 14px 18px; display: flex; flex-direction: column; gap: 6px;
  background: rgba(252, 251, 255, 0.94);
  border-right: 1px solid var(--linea); z-index: 20;
}
.marca { display: flex; align-items: center; gap: 11px; padding: 4px 10px 20px; color: var(--tinta); }
.marca .logo { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, #a77bff, #6a35e0); box-shadow: 0 6px 16px -6px rgba(106, 53, 224, 0.6); flex: none; }
.marca strong { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.marca small { display: block; font-size: 12px; color: var(--tinta-2); margin-top: 1px; }
.nav { display: grid; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px; color: var(--tinta-2); font-weight: 500;
  transition: background 0.18s, color 0.18s; position: relative;
}
.nav a:hover { background: rgba(23, 22, 28, 0.04); color: var(--tinta); }
.nav a[aria-current='page'] { background: var(--superficie-solida); color: var(--tinta); box-shadow: 0 1px 2px rgba(23, 22, 28, 0.06), 0 6px 14px -8px rgba(48, 22, 110, 0.25); }
.nav a[aria-current='page'] svg { color: var(--acento); }
.nav .insignia { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--acento); color: #fff; font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.nav .insignia.ambar { background: #e59a1a; }
.lateral .pie { margin-top: auto; display: grid; gap: 8px; padding: 0 4px; }
.estado-vivo { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tinta-2); padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.7); }
.estado-vivo i { width: 8px; height: 8px; border-radius: 50%; background: #22a06b; flex: none; position: relative; }
/* El pulso anima solo opacidad y escala: no obliga a redibujar la página. */
.estado-vivo i::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: rgba(34, 160, 107, 0.35); animation: late 2.4s ease-out infinite; }
.estado-vivo.alerta i { background: #e59a1a; }
.estado-vivo.alerta i::after { display: none; }
@keyframes late { from { transform: scale(0.5); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

.principal { min-width: 0; padding: 28px 36px 80px; }
.cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 24px; flex-wrap: wrap; margin-bottom: 22px; }
.cabecera h1 { font-size: 30px; }
.cabecera p { color: var(--tinta-2); margin-top: 6px; max-width: 70ch; }
.controles { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Controles */
.segmentado { display: inline-flex; padding: 3px; border-radius: 12px; background: rgba(23, 22, 28, 0.06); position: relative; }
.segmentado button { border: 0; background: transparent; padding: 7px 13px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--tinta-2); cursor: pointer; position: relative; z-index: 1; transition: color 0.2s; white-space: nowrap; }
.segmentado button[aria-pressed='true'] { color: var(--tinta); }
.segmentado .pastilla { position: absolute; top: 3px; bottom: 3px; border-radius: 9px; background: #fff; box-shadow: 0 1px 3px rgba(23, 22, 28, 0.12); transition: left 0.32s var(--curva), width 0.32s var(--curva); }
.selector { position: relative; }
.selector select {
  appearance: none; -webkit-appearance: none; border: 1px solid var(--linea-fuerte); background: rgba(255, 255, 255, 0.9); border-radius: 12px;
  padding: 8px 34px 8px 13px; font-size: 13.5px; font-weight: 500; cursor: pointer;
}
.selector::after { content: ''; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; border-right: 1.6px solid var(--tinta-2); border-bottom: 1.6px solid var(--tinta-2); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--linea-fuerte); background: #fff; color: var(--tinta);
  padding: 9px 15px; border-radius: 12px; font-size: 14px; font-weight: 500; cursor: pointer; transition: transform 0.12s, box-shadow 0.2s, background 0.2s; white-space: nowrap;
}
.boton:hover { box-shadow: 0 4px 14px -6px rgba(23, 22, 28, 0.25); text-decoration: none; }
.boton:active { transform: scale(0.97); }
.boton.principal { background: var(--acento); border-color: var(--acento); color: #fff; box-shadow: 0 8px 20px -10px rgba(140, 82, 255, 0.9); }
.boton.principal:hover { background: var(--acento-fuerte); }
.boton.peligro { color: var(--rojo); border-color: rgba(194, 53, 45, 0.3); }
.boton.fantasma { border-color: transparent; background: transparent; }
.boton.chico { padding: 6px 11px; font-size: 13px; border-radius: 10px; }
.boton[disabled] { opacity: 0.5; pointer-events: none; }
.campo { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--tinta-2); }
.campo input, .campo select, .entrada {
  width: 100%; border: 1px solid var(--linea-fuerte); background: #fff; border-radius: 11px; padding: 9px 12px; font-size: 14.5px; color: var(--tinta);
}
.campo input:focus, .entrada:focus, .campo select:focus { outline: 2px solid var(--acento); outline-offset: 0; border-color: transparent; }

/* Tarjetas */
.rejilla { display: grid; gap: 16px; }
.tarjeta {
  background: var(--superficie); border: 1px solid rgba(255, 255, 255, 0.7); border-radius: var(--radio); padding: 20px 22px; box-shadow: var(--sombra);
  min-width: 0; position: relative;
}
.tarjeta > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.tarjeta > header h2 { font-size: 17px; }
.tarjeta > header p { font-size: 13.5px; color: var(--tinta-2); margin-top: 3px; }
.tarjeta.lift { transition: transform 0.25s var(--curva), box-shadow 0.25s; }
.tarjeta.lift:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.etiqueta { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tinta-3); }

/* Aparición escalonada */
.entra { animation: aparece 0.6s var(--curva) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes aparece { from { opacity: 0; transform: translateY(14px) scale(0.99); } to { opacity: 1; transform: none; } }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.kpi { padding: 18px 18px 16px; cursor: default; overflow: hidden; }
.kpi[data-ir] { cursor: pointer; }
.kpi .titulo { font-size: 13px; color: var(--tinta-2); font-weight: 500; display: flex; align-items: center; gap: 7px; }
.kpi .titulo svg { width: 16px; height: 16px; color: var(--acento); }
.kpi .valor { display: flex; align-items: baseline; gap: 6px; margin: 10px 0 6px; }
.kpi .valor b { font-size: 36px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi .valor small { font-size: 15px; color: var(--tinta-2); font-weight: 500; }
.kpi .pie { font-size: 12.5px; color: var(--tinta-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 19px; }
.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; font-size: 12px; padding: 2px 7px; border-radius: 999px; }
.delta.bien { color: var(--verde); background: var(--verde-suave); }
.delta.mal { color: var(--rojo); background: var(--rojo-suave); }
.delta.igual { color: var(--tinta-2); background: rgba(23, 22, 28, 0.05); }
.kpi .chispa { position: absolute; right: 16px; top: 54px; width: 70px; height: 26px; opacity: 0.9; }
.kpi.alerta { background: linear-gradient(160deg, #fff7e8, rgba(255, 255, 255, 0.86) 60%); }
.kpi.alerta .titulo svg { color: #d48a12; }

/* Disposición del resumen */
.fila-2 { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.fila-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }

/* Embudo */
.embudo { display: grid; gap: 4px; }
.etapa-e { display: grid; grid-template-columns: 150px minmax(0, 1fr) 118px; gap: 14px; align-items: center; padding: 7px 8px; border-radius: 12px; cursor: pointer; transition: background 0.18s; }
.etapa-e:hover { background: rgba(140, 82, 255, 0.06); }
.etapa-e .nombre { font-size: 13.5px; font-weight: 500; }
.etapa-e .nombre small { display: block; font-weight: 400; color: var(--tinta-3); font-size: 12px; margin-top: 1px; }
.etapa-e .pista { position: relative; height: 24px; border-radius: 0 7px 7px 0; }
.etapa-e .llegaron { position: absolute; inset: 0 auto 0 0; background: var(--pista); border-radius: 0 7px 7px 0; }
.etapa-e .pasaron { position: absolute; inset: 0 auto 0 0; background: var(--serie); border-radius: 0 6px 6px 0; }
.etapa-e .cifra { text-align: right; font-size: 13px; color: var(--tinta-2); line-height: 1.3; }
.etapa-e .cifra b { color: var(--tinta); font-size: 16px; font-weight: 600; }
.crece { transform-origin: left center; animation: crece 0.9s var(--curva) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
@keyframes crece { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.leyenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--tinta-2); margin-top: 12px; }
.leyenda span { display: inline-flex; align-items: center; gap: 7px; }
.leyenda i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }

/* Héroe: filtro más difícil */
.heroe { background: linear-gradient(155deg, #2a1660 0%, #4b23b0 55%, #8c52ff 120%); color: #fff; border: 0; overflow: hidden; }
.heroe::after { content: ''; position: absolute; width: 260px; height: 260px; right: -90px; top: -110px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 70%); }
.heroe .etiqueta { color: rgba(255, 255, 255, 0.7); }
.heroe .grande { font-size: 56px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; margin: 14px 0 6px; }
.heroe h3 { font-size: 19px; font-weight: 600; }
.heroe p { color: rgba(255, 255, 255, 0.78); font-size: 14px; margin-top: 8px; }
.ranking { display: grid; gap: 8px; margin-top: 18px; position: relative; z-index: 1; }
.ranking div { display: grid; grid-template-columns: 116px minmax(0, 1fr) 40px; gap: 10px; align-items: center; font-size: 12.5px; color: rgba(255, 255, 255, 0.82); }
.ranking .barra { height: 8px; border-radius: 0 4px 4px 0; background: rgba(255, 255, 255, 0.16); position: relative; }
.ranking .barra i { position: absolute; inset: 0 auto 0 0; background: #fff; border-radius: 0 4px 4px 0; }
.ranking b { text-align: right; font-weight: 600; color: #fff; }

/* Barras horizontales genéricas */
.barras { display: grid; gap: 10px; }
.barra-h { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; }
.barra-h .linea { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; align-items: baseline; }
.barra-h .linea span { min-width: 0; }
.barra-h .linea b { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.barra-h .linea b small { font-weight: 400; color: var(--tinta-3); margin-left: 4px; }
.barra-h .pista { height: 10px; border-radius: 0 5px 5px 0; background: var(--pista); position: relative; }
.barra-h .pista i { position: absolute; inset: 0 auto 0 0; border-radius: 0 5px 5px 0; background: var(--serie); }
.barra-h.gris .pista i { background: #b6b2c6; }
.barra-h.marcada .pista i { background: var(--serie-b); }

/* Hallazgos */
.hallazgos { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; }
.hallazgo { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 16px; border-radius: 16px; background: var(--superficie-solida); border: 1px solid var(--linea); cursor: pointer; transition: transform 0.25s var(--curva), box-shadow 0.25s, border-color 0.2s; text-align: left; }
.hallazgo:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); border-color: transparent; }
.hallazgo .ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; }
.hallazgo.dato .ico { background: var(--acento-suave); color: var(--acento-fuerte); }
.hallazgo.alerta .ico { background: var(--ambar-suave); color: var(--ambar); }
.hallazgo.idea .ico { background: #e6efff; color: #2f5fb8; }
.hallazgo.bien .ico { background: var(--verde-suave); color: var(--verde); }
.hallazgo strong { display: block; font-weight: 600; font-size: 14.5px; line-height: 1.35; }
.hallazgo p { font-size: 13.5px; color: var(--tinta-2); margin-top: 5px; }
.hallazgo .ir { font-size: 13px; color: var(--acento-fuerte); font-weight: 500; margin-top: 8px; display: inline-flex; gap: 4px; align-items: center; }

/* Listas */
.lista { display: grid; }
.fila-l { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 8px; border-radius: 12px; cursor: pointer; transition: background 0.15s; border: 0; background: transparent; text-align: left; width: 100%; }
.fila-l:hover { background: rgba(23, 22, 28, 0.035); }
.fila-l strong { display: block; font-weight: 500; font-size: 14px; }
.fila-l small { display: block; color: var(--tinta-2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-l time { color: var(--tinta-3); font-size: 12px; white-space: nowrap; }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 13.5px; font-weight: 600; color: var(--acento-fuerte); background: var(--acento-suave); flex: none; }
.avatar.ambar { color: var(--ambar); background: var(--ambar-suave); }
.avatar.verde { color: var(--verde); background: var(--verde-suave); }
.avatar.rojo { color: var(--rojo); background: var(--rojo-suave); }
.avatar.gris { color: var(--tinta-2); background: rgba(23, 22, 28, 0.06); }
.vacio { color: var(--tinta-2); padding: 18px 8px; font-size: 14px; }

/* Chips */
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.chip svg { width: 12px; height: 12px; }
.chip.en_proceso, .chip.pendiente { color: #4e3aa6; background: var(--acento-suave); }
.chip.revision { color: var(--ambar); background: var(--ambar-suave); }
.chip.descartado, .chip.no_pasa { color: var(--rojo); background: var(--rojo-suave); }
.chip.contratado, .chip.pasa { color: var(--verde); background: var(--verde-suave); }
.chip.abandono { color: var(--tinta-2); background: rgba(23, 22, 28, 0.06); }
.chip.excelente { color: var(--verde); background: var(--verde-suave); }
.chip.bueno { color: #4e3aa6; background: var(--acento-suave); }
.chip.regular { color: var(--tinta-2); background: rgba(23, 22, 28, 0.06); }

/* Gráfica de columnas */
.grafica { position: relative; }
.grafica svg { display: block; width: 100%; overflow: visible; }
.grafica .eje text { font-size: 11px; fill: var(--tinta-3); font-family: var(--fuente); }
.grafica .rejilla-l { stroke: var(--linea); stroke-width: 1; }
.grafica .col { transform-box: fill-box; transform-origin: bottom; animation: sube 0.8s var(--curva) both; animation-delay: calc(var(--i, 0) * 25ms); }
@keyframes sube { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.grafica .linea-s { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--largo); stroke-dashoffset: var(--largo); animation: traza 1.4s var(--curva) 0.3s forwards; }
@keyframes traza { to { stroke-dashoffset: 0; } }
.grafica .zona { pointer-events: all; fill: transparent; cursor: crosshair; }

/* Tablas */
.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; font-weight: 500; font-size: 12.5px; color: var(--tinta-2); padding: 10px 12px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabla td { padding: 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; font-size: 14px; }
.tabla tbody tr { transition: background 0.15s; }
.tabla.clic tbody tr { cursor: pointer; }
.tabla.clic tbody tr:hover { background: rgba(140, 82, 255, 0.045); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla .der { text-align: right; }
.celda-barra { display: grid; grid-template-columns: 44px minmax(60px, 1fr); gap: 10px; align-items: center; }
.celda-barra .pista { height: 8px; border-radius: 0 4px 4px 0; background: var(--pista); position: relative; }
.celda-barra .pista i { position: absolute; inset: 0 auto 0 0; background: var(--serie); border-radius: 0 4px 4px 0; }
.quien { display: flex; align-items: center; gap: 11px; min-width: 0; }
.quien strong { font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quien small { color: var(--tinta-2); font-size: 12.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avance { display: flex; gap: 4px; }
.avance i { width: 9px; height: 9px; border-radius: 50%; background: rgba(23, 22, 28, 0.1); }
.avance i.pasa { background: var(--verde); } .avance i.revision { background: #e59a1a; } .avance i.no_pasa { background: var(--rojo); }
.pts { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; padding: 3px 8px; border-radius: 9px; font-weight: 600; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.pts.excelente { background: var(--verde-suave); color: var(--verde); }
.pts.bueno { background: var(--acento-suave); color: #4e3aa6; }
.pts.regular { background: rgba(23, 22, 28, 0.06); color: var(--tinta-2); }
.pts.provisional { box-shadow: inset 0 0 0 1px currentColor; background: transparent; }

/* Herramientas de la lista */
.herramientas { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.buscador { position: relative; flex: 1; min-width: 220px; max-width: 340px; }
.buscador svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--tinta-3); }
.buscador input { width: 100%; border: 1px solid var(--linea-fuerte); background: #fff; border-radius: 12px; padding: 9px 12px 9px 38px; font-size: 14px; }
.fichas-filtro { display: flex; gap: 6px; flex-wrap: wrap; }
.fichas-filtro button { border: 1px solid var(--linea-fuerte); background: rgba(255, 255, 255, 0.8); border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: 13px; color: var(--tinta-2); display: inline-flex; gap: 6px; align-items: center; transition: all 0.18s; }
.fichas-filtro button b { font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }
.fichas-filtro button[aria-pressed='true'] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.fichas-filtro button[aria-pressed='true'] b { color: #fff; }

/* Selección */
.seleccion { display: grid; gap: 12px; }
.candidato-s {
  display: grid; grid-template-columns: 34px 74px minmax(0, 1.2fr) minmax(0, 1.6fr) auto; gap: 18px; align-items: center; padding: 16px 20px;
  transition: transform 0.25s var(--curva), box-shadow 0.25s, border-color 0.2s;
}
.candidato-s:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.candidato-s.marcado { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave), var(--sombra); }
.candidato-s .lugar { font-size: 20px; font-weight: 600; color: var(--tinta-3); text-align: center; font-variant-numeric: tabular-nums; }
.candidato-s:nth-child(-n+3) .lugar { color: var(--acento); }
.candidato-s h3 { font-size: 16px; font-weight: 600; }
.candidato-s .datos { font-size: 13px; color: var(--tinta-2); margin-top: 3px; }
.candidato-s .datos + .datos { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.partes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; }
.parte { font-size: 11.5px; color: var(--tinta-2); }
.parte .pista { height: 6px; border-radius: 0 3px 3px 0; background: var(--pista); margin-top: 4px; position: relative; }
.parte .pista i { position: absolute; inset: 0 auto 0 0; background: var(--serie); border-radius: 0 3px 3px 0; }
.parte.sin .pista i { background: transparent; }
.parte.sin { color: var(--tinta-3); }
.acciones-s { display: flex; gap: 8px; align-items: center; }
.comparar { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--tinta-2); cursor: pointer; user-select: none; padding: 7px 10px; border-radius: 10px; }
.comparar input { width: 16px; height: 16px; accent-color: var(--acento); margin: 0; }
.anillo { position: relative; width: 74px; height: 74px; }
.anillo svg { width: 74px; height: 74px; transform: rotate(-90deg); }
.anillo circle { fill: none; stroke-width: 7; }
.anillo .fondo-a { stroke: var(--pista); }
.anillo .valor-a { stroke: var(--serie); stroke-linecap: round; transition: stroke-dashoffset 1.1s var(--curva); }
.anillo.excelente .valor-a { stroke: #22a06b; }
.anillo.regular .valor-a { stroke: #b6b2c6; }
.anillo b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.anillo.chico, .anillo.chico svg { width: 56px; height: 56px; }
.anillo.chico b { font-size: 17px; }
.bandeja {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, calc(100% + 40px)); z-index: 35; display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 18px;
  background: rgba(23, 22, 28, 0.95); color: #fff; border-radius: 18px; box-shadow: var(--sombra-alta); transition: transform 0.4s var(--curva);
}
.bandeja.visible { transform: translate(-50%, 0); }
.bandeja:empty { visibility: hidden; }
.bandeja .caras { display: flex; }
.bandeja .caras .avatar { width: 30px; height: 30px; font-size: 11.5px; margin-left: -6px; border: 2px solid #2a2930; }
.bandeja .boton { border: 0; }

/* Comparación */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: rgba(23, 22, 28, 0.4); opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.modal.abierto { opacity: 1; pointer-events: auto; }
.modal .hoja { width: min(980px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: var(--superficie-solida); border-radius: 24px; box-shadow: var(--sombra-alta); padding: 24px; transform: translateY(16px) scale(0.98); transition: transform 0.35s var(--curva); }
.modal.abierto .hoja { transform: none; }
.modal .hoja > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.comparacion { display: grid; gap: 0; }
.comparacion .fila-c { display: grid; grid-template-columns: 190px repeat(var(--n), minmax(0, 1fr)); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linea); align-items: center; }
.comparacion .fila-c:last-child { border-bottom: 0; }
.comparacion .fila-c > span:first-child { font-size: 13px; color: var(--tinta-2); }
.comparacion .mejor { color: var(--verde); font-weight: 600; }
.comparacion .cab { text-align: center; }
.comparacion .cab .anillo { margin: 0 auto 8px; }
.comparacion .cab strong { display: block; font-weight: 600; }
.comparacion .cab small { color: var(--tinta-2); font-size: 12.5px; }
.comparacion .celda small { display: block; font-size: 12px; color: var(--tinta-2); margin-top: 3px; }

/* Ficha (cajón) */
.velo { position: fixed; inset: 0; background: rgba(23, 22, 28, 0.32); opacity: 0; pointer-events: none; transition: opacity 0.25s; z-index: 40; }
.velo.visible { opacity: 1; pointer-events: auto; }
.cajon { position: fixed; top: 10px; right: 10px; bottom: 10px; width: min(660px, calc(100vw - 20px)); background: var(--fondo); border-radius: 24px; z-index: 50; transform: translateX(105%); transition: transform 0.42s var(--curva); display: flex; flex-direction: column; box-shadow: var(--sombra-alta); overflow: hidden; }
.cajon.abierto { transform: none; }
.cajon > header { display: flex; align-items: center; gap: 14px; padding: 18px 20px 16px; background: #fff; border-bottom: 1px solid var(--linea); }
.cajon > header > div { flex: 1; min-width: 0; }
.cajon > header h2 { font-size: 21px; }
.cajon > header p { font-size: 13px; color: var(--tinta-2); margin: 3px 0 7px; }
.cuerpo-ficha { flex: 1; overflow-y: auto; padding: 16px 18px 40px; display: grid; gap: 12px; align-content: start; }
.bloque { background: var(--superficie-solida); border-radius: 18px; padding: 18px; border: 1px solid var(--linea); }
.bloque > h3 { font-size: 15px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bloque > h3 small { font-weight: 400; font-size: 12.5px; color: var(--tinta-3); }
.sigue { border: 1.5px solid var(--acento); background: linear-gradient(170deg, #faf7ff, #fff 60%); }
.sigue.calma { border-color: var(--linea); background: var(--superficie-solida); }
.sigue p { margin-bottom: 12px; color: var(--tinta-2); font-size: 14px; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 13px; font-size: 14px; }
.aviso svg { flex: none; margin-top: 1px; }
.aviso.ambar { background: var(--ambar-suave); color: #6b3d00; }
.aviso.rojo { background: var(--rojo-suave); color: #8a231d; }
.aviso.verde { background: var(--verde-suave); color: #0f5c39; }
.aviso.neutro { background: var(--superficie-2); color: var(--tinta-2); }
.pasos-f .paso { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--linea); }
.pasos-f .paso:last-child { border-bottom: 0; padding-bottom: 0; }
.punto { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(23, 22, 28, 0.05); color: var(--tinta-3); }
.punto svg { width: 14px; height: 14px; }
.paso.pasa .punto { background: var(--verde-suave); color: var(--verde); }
.paso.revision .punto { background: var(--ambar-suave); color: var(--ambar); }
.paso.no_pasa .punto { background: var(--rojo-suave); color: var(--rojo); }
.paso strong { font-weight: 500; display: block; font-size: 14px; }
.paso.pendiente strong { color: var(--tinta-2); }
.paso small { color: var(--tinta-2); font-size: 12.5px; display: block; }
.paso time { color: var(--tinta-3); font-size: 12px; white-space: nowrap; }
.puntaje-f { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 18px; align-items: center; }
.puntaje-f .anillo, .puntaje-f .anillo svg { width: 92px; height: 92px; }
.puntaje-f .anillo b { font-size: 26px; }
.desglose { display: grid; gap: 8px; }
.desglose .barra-h .linea { font-size: 13px; }
.desglose .barra-h small { color: var(--tinta-3); font-size: 12px; }
.docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.docs a { display: block; border: 1px solid var(--linea); border-radius: 13px; padding: 7px; color: var(--tinta); font-size: 12.5px; transition: border-color 0.15s, transform 0.2s var(--curva); }
.docs a:hover { border-color: var(--acento); transform: translateY(-2px); }
.docs img { width: 100%; height: 80px; object-fit: cover; object-position: top; border-radius: 8px; background: var(--superficie-2); display: block; margin-bottom: 6px; }
.docs small { color: var(--tinta-2); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empleo { padding: 9px 0; border-bottom: 1px solid var(--linea); }
.empleo:last-of-type { border-bottom: 0; }
.empleo .linea { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 13.5px; }
.empleo .linea strong { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.empleo .linea span { white-space: nowrap; color: var(--tinta-2); }
.empleo .pista { height: 8px; border-radius: 0 4px 4px 0; background: var(--pista); margin: 6px 0 4px; position: relative; }
.empleo .pista i { position: absolute; inset: 0 auto 0 0; min-width: 6px; border-radius: 0 4px 4px 0; background: #b6b2c6; }
.empleo.pico .pista i { background: var(--serie); }
.empleo.pico .linea span { color: var(--acento-fuerte); font-weight: 500; }
.empleo small { color: var(--tinta-3); font-size: 12px; }
.referencia { padding: 12px 0; border-bottom: 1px solid var(--linea); }
.referencia:last-child { border-bottom: 0; padding-bottom: 0; }
.referencia:first-of-type { padding-top: 0; }
.referencia .linea { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.referencia small { color: var(--tinta-2); display: block; font-size: 12.5px; }
.intentos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px; }
.intentos li { font-size: 12.5px; color: var(--tinta-2); display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 6px; }
.intentos li svg { width: 13px; height: 13px; margin-top: 2px; }
.intentos li.buena svg { color: var(--verde); } .intentos li.mala svg { color: var(--rojo); }
.intentos b { font-weight: 500; color: var(--tinta); }
.registro-ref { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px; margin: 10px 0 8px; }
.adjuntar { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--acento-fuerte); cursor: pointer; margin-bottom: 10px; position: relative; }
.adjuntar input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; align-items: end; }
details summary { cursor: pointer; font-weight: 600; font-size: 15px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: 'Ver'; font-weight: 400; color: var(--acento-fuerte); font-size: 13px; }
details[open] summary::after { content: 'Ocultar'; }
details[open] summary { margin-bottom: 12px; }
.transcrito { display: flex; flex-direction: column; gap: 6px; }
.transcrito div { max-width: 86%; padding: 7px 11px; border-radius: 13px; font-size: 13px; white-space: pre-wrap; background: var(--superficie-2); align-self: flex-start; overflow-wrap: anywhere; }
.transcrito div.candidato { align-self: flex-end; background: var(--acento-suave); }
.transcrito div.sistema { align-self: center; background: transparent; color: var(--tinta-2); font-size: 12px; }
.linea-tiempo { list-style: none; padding: 0; margin: 0; }
.linea-tiempo li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--linea); font-size: 13px; }
.linea-tiempo li:last-child { border-bottom: 0; }
.linea-tiempo time { color: var(--tinta-3); font-size: 12px; }
.linea-tiempo b { font-weight: 500; }

/* Reglas */
.reglas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.reglas form { display: grid; gap: 16px; }
.grupo { border: 1px solid var(--linea); border-radius: 16px; padding: 14px 14px 12px; margin: 0; min-width: 0; }
.grupo legend { font-size: 13px; color: var(--tinta-2); padding: 0 6px; font-weight: 500; }
.grupo .par { margin-bottom: 10px; }
.grupo p { font-size: 12.5px; color: var(--tinta-2); }
.puestos-lic { display: grid; gap: 8px; }
.puestos-lic > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.puestos-lic b { font-weight: 500; color: var(--tinta); font-size: 14px; }
.tipos { display: flex; gap: 5px; }
.tipos label { cursor: pointer; position: relative; }
.tipos input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tipos span { display: grid; place-items: center; width: 34px; height: 32px; border-radius: 9px; border: 1px solid var(--linea-fuerte); background: #fff; font-weight: 500; font-size: 13.5px; transition: all 0.15s; }
.tipos input:checked + span { background: var(--acento); border-color: var(--acento); color: #fff; }
.tipos input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
.peso { display: grid; grid-template-columns: minmax(0, 1fr) 150px 44px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.peso:last-of-type { border-bottom: 0; }
.peso strong { font-weight: 500; font-size: 14px; display: block; }
.peso small { color: var(--tinta-2); font-size: 12px; display: block; }
.peso input[type='range'] { width: 100%; accent-color: var(--acento); }
.peso output { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.top5 { display: grid; gap: 6px; margin-top: 8px; }
.top5 div { display: grid; grid-template-columns: 22px minmax(0, 1fr) 46px; gap: 10px; align-items: center; font-size: 13.5px; padding: 7px 8px; border-radius: 10px; background: var(--superficie-2); transition: transform 0.35s var(--curva), background 0.3s; }
.top5 div.subio { background: var(--verde-suave); }
.top5 div.bajo { background: var(--rojo-suave); }

/* Secciones del análisis */
.seccion { scroll-margin-top: 20px; }
.indice { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; position: sticky; top: 10px; z-index: 5; padding: 6px; border-radius: 14px; background: rgba(244, 243, 248, 0.94); box-shadow: 0 6px 18px -12px rgba(48, 22, 110, 0.35); width: fit-content; max-width: 100%; }
.indice a { padding: 6px 12px; border-radius: 10px; font-size: 13px; color: var(--tinta-2); font-weight: 500; }
.indice a:hover { background: #fff; color: var(--tinta); }
.lectura { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.lectura.estricta { background: #e6efff; color: #2f5fb8; }
.lectura.automatizable { background: var(--ambar-suave); color: var(--ambar); }
.lectura.equilibrada { background: var(--verde-suave); color: var(--verde); }
.lectura.pocos { background: rgba(23, 22, 28, 0.06); color: var(--tinta-2); }
.meta-banda { position: absolute; top: -3px; bottom: -3px; border-left: 1.5px dashed var(--tinta-3); }

/* Información emergente */
.tooltip {
  position: fixed; z-index: 90; pointer-events: none; background: rgba(23, 22, 28, 0.94); color: #fff; padding: 9px 11px; border-radius: 11px;
  font-size: 12.5px; line-height: 1.45; max-width: 260px; opacity: 0; transform: translateY(4px); transition: opacity 0.12s, transform 0.12s; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4);
}
.tooltip.visible { opacity: 1; transform: none; }
.tooltip b { font-weight: 600; }
.tooltip .t-fila { display: flex; justify-content: space-between; gap: 14px; }
.tooltip .t-fila i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; }

.brindis { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); background: rgba(23, 22, 28, 0.92); color: #fff; padding: 11px 18px; border-radius: 14px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.35s var(--curva); z-index: 95; display: flex; gap: 8px; align-items: center; }
.brindis.visible { opacity: 1; transform: translate(-50%, 0); }

/* Cargando */
.esqueleto { border-radius: var(--radio); background: linear-gradient(100deg, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0.6) 70%); background-size: 250% 100%; animation: brilla 1.3s linear infinite; }
@keyframes brilla { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.destello { animation: destello 1.6s var(--curva); }
@keyframes destello { 0% { box-shadow: 0 0 0 0 rgba(140, 82, 255, 0.5); } 100% { box-shadow: 0 0 0 14px rgba(140, 82, 255, 0); } }

/* Pantallas medianas: barra lateral de solo íconos */
/* Menú común y simulador del candidato */
.menu-panel { position: fixed; top: 14px; right: 22px; z-index: 30; }
.principal { padding-top: 64px; }
.nav a.ajustes { margin-top: 12px; color: var(--tinta-3); }
.simular { position: fixed; left: calc(var(--lateral) + 20px); bottom: 20px; z-index: 30; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 11px 18px 11px 14px; font: inherit; font-size: 14px; font-weight: 600; color: #fff; background: linear-gradient(140deg, #a77bff, #6a35e0); box-shadow: 0 14px 30px -12px rgba(106, 53, 224, 0.8); cursor: pointer; transition: transform 0.15s, opacity 0.2s; }
.simular:active { transform: scale(0.96); }
.simular[aria-expanded='true'] { opacity: 0; pointer-events: none; }
.tel-flotante { position: fixed; left: calc(var(--lateral) + 20px); bottom: 20px; z-index: 55; width: 390px; height: min(740px, calc(100vh - 40px)); display: flex; flex-direction: column; border-radius: 28px; overflow: hidden; background: #1d1b24; box-shadow: 0 30px 80px -24px rgba(23, 22, 28, 0.55); transform: translateY(24px) scale(0.97); opacity: 0; pointer-events: none; transition: transform 0.35s var(--curva), opacity 0.25s; }
.tel-flotante.abierto { transform: none; opacity: 1; pointer-events: auto; }
.tel-flotante header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 10px 18px; color: #fff; }
.tel-flotante header strong { display: block; font-size: 14px; } .tel-flotante header small { font-size: 12px; color: rgba(255, 255, 255, 0.6); }
.tel-flotante header .boton { color: #fff; }
.tel-flotante iframe { flex: 1; width: 100%; border: 0; background: #fff; border-radius: 22px 22px 0 0; }

@media (max-width: 1280px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpis .kpi:nth-child(n+4) { grid-column: span 1; }
}
@media (max-width: 1180px) {
  :root { --lateral: 76px; }
  .marca div, .nav a span, .lateral .pie .texto { display: none; }
  .marca { justify-content: center; padding: 4px 0 18px; }
  .nav a { justify-content: center; padding: 11px 0; }
  .nav .insignia { position: absolute; top: 3px; right: 6px; min-width: 18px; height: 18px; font-size: 11px; padding: 0 5px; }
  .estado-vivo { justify-content: center; padding: 8px 0; }
  .estado-vivo span { display: none; }
  .fila-2, .reglas { grid-template-columns: minmax(0, 1fr); }
  .fila-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .principal { padding: 64px 24px 80px; }
  .candidato-s { grid-template-columns: 26px 64px minmax(0, 1fr) auto; }
  .candidato-s .partes { grid-column: 3 / -1; grid-row: 2; }
  .candidato-s .anillo, .candidato-s .anillo svg { width: 64px; height: 64px; }
}
@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; flex-direction: row; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--linea); }
  .marca, .lateral .pie { display: none; }
  .nav { grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
  .principal { padding: 60px 16px 96px; }
  .menu-panel { right: 12px; top: 10px; }
  .simular { left: auto; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); }
  .tel-flotante { left: 0; right: 0; bottom: 0; width: auto; height: 100%; border-radius: 0; }
  .cabecera h1 { font-size: 24px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi .valor b { font-size: 28px; }
  .kpi .chispa { display: none; }
  .fila-3 { grid-template-columns: minmax(0, 1fr); }
  .etapa-e { grid-template-columns: 96px minmax(0, 1fr) 70px; gap: 8px; }
  .etapa-e .cifra span { display: none; }
  .tabla .col-opcional { display: none; }
  .candidato-s { grid-template-columns: 56px minmax(0, 1fr); padding: 14px; gap: 12px; }
  .candidato-s .lugar { display: none; }
  .candidato-s .partes, .candidato-s .acciones-s { grid-column: 1 / -1; grid-row: auto; }
  .candidato-s .anillo, .candidato-s .anillo svg { width: 56px; height: 56px; }
  .partes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comparacion .fila-c { grid-template-columns: 110px repeat(var(--n), minmax(0, 1fr)); gap: 8px; }
  .peso { grid-template-columns: minmax(0, 1fr) 100px 36px; }
  .registro-ref, .par { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
}

/* Actualización en vivo: lo que ya estaba en pantalla no vuelve a entrar animado. */
.quieto .entra, .quieto .crece, .quieto .col { animation: none !important; }
.quieto .linea-s { animation: none !important; stroke-dashoffset: 0; }
.quieto circle[style*='animation'] { animation: none !important; opacity: 1 !important; }

/* Las etiquetas con texto largo (situación del candidato) se ajustan en vez de empujar la página. */
.candidato-s .datos .chip, .fila-l .chip { white-space: normal; max-width: 100%; line-height: 1.35; }