/* ==========================================================================
   Neuma Lab · panel de ejemplo (tema noche)
   Paleta de gráficos validada con el validador de dataviz sobre --sup:
   énfasis #E25A47 frente a resto #8C8A84 (ΔE daltonismo 9,4),
   rampa ordinal arena #F2E6CE → #CDB48A → #9A8058 (todas las comprobaciones OK).
   ========================================================================== */
:root {
  color-scheme: dark;

  --plano: #121211;
  --sup: #1B1B19;
  --sup-2: #232321;
  --filete: #2E2E2B;
  --eje: #4A4944;

  --texto: #F5F0E6;
  --texto-2: #C3BDB0;
  --texto-3: #8C8A84;

  --arena-1: #F2E6CE;
  --arena-2: #CDB48A;
  --arena-3: #9A8058;
  --serie: var(--arena-2);
  --enfasis: #E25A47;
  --resto: #8C8A84;

  --rubrica: #B3261E;
  --rubrica-hover: #C8352A;

  --bueno: #0CA30C;
  --aviso: #FAB219;
  --serio: #EC835A;
  --critico: #D03B3B;

  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --curva: cubic-bezier(.2, .7, .2, 1);
  --radio: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }

html { scroll-padding-top: 1.5rem; }
body {
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(205, 180, 138, .07), transparent 70%),
    var(--plano);
  background-attachment: fixed;
  color: var(--texto);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--texto); outline-offset: 3px; border-radius: 2px; }

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.saltar {
  position: fixed; top: .5rem; left: .5rem; z-index: 100;
  padding: .5rem .875rem; background: var(--texto); color: var(--plano);
  transform: translateY(-200%);
}
.saltar:focus { transform: none; }

/* Aviso de demo ----------------------------------------------------------- */
.aviso-demo {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  justify-content: center;
  padding: .625rem 1rem;
  background: var(--texto);
  color: var(--plano);
  font-size: 13px;
  text-align: center;
}
.aviso-demo a { display: inline-block; padding-block: .1875rem; font-weight: 600; text-underline-offset: .2em; }

/* Estructura ---------------------------------------------------------------- */
.app { display: block; }

.lateral {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .875rem 1rem .5rem;
  background: rgba(18, 18, 17, .94);
  border-bottom: 1px solid var(--filete);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.lateral__marca {
  display: flex;
  gap: .625rem;
  align-items: center;
  font-family: var(--serif);
  font-size: 18px;
  text-decoration: none;
}
.lateral__trazo { width: 28px; color: var(--rubrica); }
.lateral__nav { margin-inline: -1rem; overflow-x: auto; scrollbar-width: none; }
.lateral__nav::-webkit-scrollbar { display: none; }
.lateral__nav ul { display: flex; gap: .25rem; width: max-content; padding-inline: 1rem; }
.lateral__nav a {
  display: block;
  padding: .5rem .75rem;
  border-radius: 999px;
  color: var(--texto-2);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.lateral__nav a:hover { color: var(--texto); background: var(--sup-2); }
.lateral__nav a[aria-current="true"] { color: var(--plano); background: var(--texto); }
.lateral__pie { display: none; }

.panel {
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding: 2rem 1rem 4rem;
}

.panel__cabecera {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 2rem;
}
.panel__cabecera h1 {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.02em;
}
.panel__entrada { margin-top: .5rem; color: var(--texto-2); font-size: 16px; }
.antetitulo {
  margin-bottom: .5rem;
  color: var(--texto-3);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sello {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  align-self: start;
  justify-self: start;
  padding: .375rem .75rem;
  border: 1px solid var(--filete);
  border-radius: 14px;
  color: var(--texto-2);
  font-size: 12.5px;
}
.sello__punto {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bueno);
  box-shadow: 0 0 0 3px rgba(12, 163, 12, .2);
}

.bloque { padding-top: 3rem; }
#resumen { padding-top: 0; }
.bloque__cabecera { max-width: 46rem; margin-bottom: 1.25rem; }
.bloque__cabecera h2 {
  font-family: var(--serif);
  font-size: clamp(1.625rem, 1.3rem + 1.3vw, 2.25rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.015em;
}
.bloque__cabecera p { margin-top: .375rem; color: var(--texto-2); }

/* Tarjetas ------------------------------------------------------------------- */
.tarjeta {
  position: relative;
  padding: 1.25rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0) 40%), var(--sup);
  border: 1px solid var(--filete);
  border-radius: var(--radio);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 20px 40px -32px rgba(0, 0, 0, .9);
}
.tarjeta__titulo { font-size: 15px; font-weight: 600; }
.tarjeta__sub { margin-top: .125rem; margin-bottom: 1.25rem; color: var(--texto-3); font-size: 13px; }

.rejilla-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.resumen > *, .rejilla-2 > *, .pila > * { min-width: 0; }
.rejilla-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-content: start; }
.pila { display: grid; gap: 1rem; align-content: start; }

/* Cifras --------------------------------------------------------------------- */
.resumen { display: grid; gap: 1rem; }
.cifra__etiqueta { color: var(--texto-2); font-size: 13px; }
.cifra {
  margin-top: .25rem;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.cifra--heroe { font-size: clamp(48px, 40px + 2.4vw, 64px); }
.cifra__nota { margin-top: .375rem; color: var(--texto-3); font-size: 12.5px; }
.cifra-tarjeta--compacta .cifra { font-size: 28px; }

.delta { margin-top: .375rem; font-size: 13px; font-weight: 500; }
.delta--bueno { color: var(--bueno); }
.delta--neutro { color: var(--texto-2); }
.delta span { font-size: .8em; }

.mini { height: 40px; margin-top: 1rem; }
.mini svg { overflow: visible; }

/* Estados (siempre icono + texto) ------------------------------------------ */
.estado {
  display: inline-flex;
  gap: .375rem;
  align-items: center;
  flex: none;
  padding: .1875rem .625rem .1875rem .25rem;
  border-radius: 999px;
  background: var(--sup-2);
  color: var(--texto);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.estado__icono {
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  color: #1A1A1A;
  font-size: 10px;
  font-weight: 700;
}
.estado--bueno .estado__icono { background: var(--bueno); }
.estado--aviso .estado__icono { background: var(--aviso); }
.estado--serio .estado__icono { background: var(--serio); }

/* Director General ----------------------------------------------------------- */
.director {
  padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  background:
    radial-gradient(40rem 18rem at 100% 0%, rgba(205, 180, 138, .09), transparent 70%),
    var(--sup);
  border-color: rgba(205, 180, 138, .28);
}
.director__cabecera { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; justify-content: space-between; }
.director__cabecera .antetitulo { margin: 0; }
.director__titular {
  max-width: 34em;
  margin-block: 1.25rem 1.75rem;
  font-family: var(--serif);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.2;
  letter-spacing: -.01em;
}
.director__rejilla { display: grid; gap: 1.5rem; color: var(--texto-2); }
.director__rotulo { margin-bottom: .5rem; color: var(--texto); font-size: 13px; font-weight: 600; }
.prioridades { counter-reset: p; display: grid; gap: .75rem; }
.prioridades li { counter-increment: p; position: relative; padding-left: 2rem; }
.prioridades li::before {
  content: counter(p);
  position: absolute; left: 0; top: .0625rem;
  display: grid; place-items: center;
  width: 1.375rem; height: 1.375rem;
  border: 1px solid var(--arena-3);
  border-radius: 50%;
  color: var(--arena-1);
  font-size: 12px;
}
.prioridades strong { color: var(--texto); font-weight: 600; }
.prioridades span { display: block; color: var(--texto-3); font-size: 12.5px; }
.director__regla {
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--filete);
  color: var(--texto-3);
  font-size: 13px;
}

.agentes { display: grid; gap: 1rem; margin-top: 1rem; }
.agente { display: grid; gap: .625rem; align-content: start; }
.agente__cabecera { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; justify-content: space-between; }
.agente h3 { font-size: 14px; font-weight: 600; }
.agente p:not(.estado) { color: var(--texto-2); font-size: 14px; }

.hallazgo { display: grid; gap: 1.5rem; margin-top: 1rem; }
.hallazgo__titulo {
  margin-bottom: .625rem;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.1rem + .8vw, 1.625rem);
  font-weight: 400;
  line-height: 1.2;
}
.hallazgo__texto p:not(.antetitulo) { color: var(--texto-2); }

/* Gráficos ------------------------------------------------------------------- */
.grafico { margin-top: 1.25rem; }
.grafico__titulo { margin-bottom: .75rem; color: var(--texto-3); font-size: 12.5px; }
.lienzo { width: 100%; }
.lienzo svg { overflow: visible; }

.tick { fill: var(--texto-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.rejilla { stroke: var(--filete); stroke-width: 1; shape-rendering: crispEdges; }
.eje { stroke: var(--eje); stroke-width: 1; shape-rendering: crispEdges; }
.anotacion { stroke: var(--texto-3); stroke-width: 1; shape-rendering: crispEdges; }
.anotacion__texto { fill: var(--texto-2); font-size: 11.5px; }
.etiqueta { fill: var(--texto); font-size: 12px; font-weight: 600; }
.etiqueta--suave { fill: var(--texto-2); font-weight: 500; }
.cruz { stroke: var(--texto-2); stroke-width: 1; shape-rendering: crispEdges; pointer-events: none; }
.zona { fill: transparent; cursor: crosshair; outline: none; }
.zona:focus-visible { stroke: var(--texto); stroke-width: 1; }

@media (prefers-reduced-motion: no-preference) {
  .trazo-animado { animation: dibujar 1.1s var(--curva) both; }
  @keyframes dibujar { from { stroke-dashoffset: var(--largo); } to { stroke-dashoffset: 0; } }
}

.leyenda { display: flex; flex-wrap: wrap; gap: .375rem 1.25rem; margin-bottom: .75rem; color: var(--texto-2); font-size: 12.5px; }
.leyenda li { display: inline-flex; gap: .5rem; align-items: center; }
.leyenda__linea { width: 16px; height: 2px; border-radius: 2px; }
.leyenda__caja { width: 10px; height: 10px; border-radius: 2px; }

/* Barras horizontales */
.barras { display: grid; gap: .875rem; }
.barra { display: grid; gap: .375rem; border-radius: 4px; outline-offset: 4px; }
.barra__nombre { color: var(--texto-2); font-size: 13px; }
.barra__pista { display: flex; gap: .625rem; align-items: center; }
.barra__relleno {
  flex: none;
  width: calc((100% - 7.5rem) * var(--p));
  min-width: 2px;
  height: 14px;
  border-radius: 0 4px 4px 0;
  background: var(--serie);
  transform-origin: left;
  transition: filter .2s;
}
.barra:hover .barra__relleno, .barra:focus-visible .barra__relleno { filter: brightness(1.15); }
.barra__valor { color: var(--texto); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.barra__valor small { margin-left: .25rem; color: var(--texto-3); font-size: 12px; font-weight: 400; }
@media (prefers-reduced-motion: no-preference) {
  .barra__relleno { animation: crecer .9s var(--curva) both; }
  @keyframes crecer { from { transform: scaleX(0); } }
}

/* Mapa de cohortes (una tabla real) */
.mapa { overflow-x: auto; }
.mapa table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 2px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.mapa th { padding: .25rem .375rem; color: var(--texto-3); font-weight: 500; text-align: center; white-space: nowrap; }
.mapa th[scope="row"] { color: var(--texto-2); text-align: left; }
.mapa thead th:first-child, .mapa th[scope="row"] { width: 2.75rem; }
.mapa td { height: 34px; border-radius: 4px; font-weight: 600; text-align: center; }
.mapa td.vacia { background: transparent; }
.mapa td[tabindex]:hover, .mapa td[tabindex]:focus-visible { box-shadow: 0 0 0 2px var(--texto); outline: none; }
.escala { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .875rem; color: var(--texto-3); font-size: 12px; }
.escala li { display: inline-flex; gap: .375rem; align-items: center; }

/* Barra segmentada */
.segmentos { display: flex; gap: 2px; height: 28px; margin-bottom: 1rem; }
.segmento {
  display: flex;
  align-items: center;
  min-width: 0;
  padding-left: .5rem;
  border-radius: 4px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  outline-offset: 3px;
}

/* Tablas */
.tabla-ver { margin-top: .75rem; color: var(--texto-3); font-size: 12.5px; }
.tabla-ver summary { width: max-content; cursor: pointer; border-radius: 2px; }
.tabla-ver summary:hover { color: var(--texto); }
.tabla-ver table { margin-top: .625rem; }
.tabla-envoltorio { overflow-x: auto; padding: .5rem 1.25rem; }
.tabla, .tabla-ver table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla th, .tabla td, .tabla-ver th, .tabla-ver td { padding: .75rem .5rem; border-bottom: 1px solid var(--filete); text-align: left; }
.tabla-ver th, .tabla-ver td { padding: .4rem .5rem; color: var(--texto-2); }
.tabla th { color: var(--texto-3); font-size: 12px; font-weight: 500; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla td:first-child { color: var(--texto); font-weight: 500; }
.tabla td { color: var(--texto-2); }
.num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla td.delta--bueno { color: var(--bueno); }

/* Listas */
.lista-filas { margin-top: .75rem; }
.lista-filas li { display: flex; gap: 1rem; justify-content: space-between; padding-block: .625rem; border-top: 1px solid var(--filete); font-size: 13.5px; }
.lista-filas__meta { flex: none; color: var(--texto-3); font-variant-numeric: tabular-nums; }

.progreso { height: 6px; margin-top: .25rem; border-radius: 999px; background: var(--sup-2); overflow: hidden; }
.progreso span { display: block; height: 100%; border-radius: inherit; background: var(--serie); }

.alertas { display: grid; padding-block: .25rem; }
.alertas li { display: grid; gap: .375rem 1rem; padding-block: .875rem; border-top: 1px solid var(--filete); align-items: center; }
.alertas li:first-child { border-top: 0; }
.alertas__regla { font-weight: 500; }
.alertas__valor { color: var(--texto-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.alertas .estado { justify-self: start; }

/* Pregunta a tus datos ---------------------------------------------------- */
.chat { display: grid; gap: 1rem; }
.chat__sugerencias-titulo { color: var(--texto-3); font-size: 12.5px; }
.chat__sugerencias { display: flex; flex-wrap: wrap; gap: .5rem; }
.sugerencia {
  padding: .5rem .875rem;
  border: 1px solid var(--filete);
  border-radius: 999px;
  background: var(--sup-2);
  color: var(--texto);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.sugerencia:hover { border-color: var(--arena-3); }
.sugerencia[aria-pressed="true"] { border-color: var(--arena-2); background: rgba(205, 180, 138, .12); }
.chat__conversacion { display: grid; gap: .875rem; }
.chat__conversacion:empty { display: none; }
.burbuja { max-width: 44rem; padding: .875rem 1rem; border-radius: 12px; font-size: 14.5px; }
.burbuja--pregunta { justify-self: end; background: var(--texto); color: var(--plano); border-bottom-right-radius: 4px; }
.burbuja--respuesta { background: var(--sup-2); border: 1px solid var(--filete); border-bottom-left-radius: 4px; }
.burbuja--respuesta .barras { margin-top: 1rem; }
.burbuja__autor { margin-bottom: .375rem; color: var(--arena-2); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.burbuja details { margin-top: .875rem; color: var(--texto-3); font-size: 12.5px; }
.burbuja summary { cursor: pointer; width: max-content; }
.burbuja pre {
  margin-top: .5rem;
  padding: .75rem;
  overflow-x: auto;
  border-radius: 6px;
  background: var(--plano);
  color: var(--texto-2);
  font-size: 12px;
  line-height: 1.5;
}
.pensando { display: inline-flex; gap: 4px; }
.pensando span { width: 6px; height: 6px; border-radius: 50%; background: var(--texto-3); animation: latir 1s infinite ease-in-out; }
.pensando span:nth-child(2) { animation-delay: .15s; }
.pensando span:nth-child(3) { animation-delay: .3s; }
@keyframes latir { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pensando span { animation: none; opacity: .7; } }

.chat__entrada { display: flex; gap: .5rem; }
.chat__entrada input {
  flex: 1;
  min-width: 0;
  min-height: 2.75rem;
  padding: .5rem .875rem;
  border: 1px solid var(--eje);
  border-radius: 8px;
  background: var(--plano);
  font-size: 15px;
}
.chat__entrada input::placeholder { color: var(--texto-3); }

/* Botones ---------------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: .5rem 1.25rem;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s;
}
.boton--primario { background: var(--rubrica); color: var(--texto); }
.boton--primario:hover { background: var(--rubrica-hover); }

.panel__pie {
  display: grid;
  gap: 1rem;
  justify-items: start;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--filete);
  color: var(--texto-2);
}

/* Tooltip -------------------------------------------------------------- */
.tip {
  position: fixed;
  z-index: 60;
  min-width: 9rem;
  max-width: 16rem;
  padding: .625rem .75rem;
  border: 1px solid var(--eje);
  border-radius: 8px;
  background: rgba(35, 35, 33, .97);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .8);
  font-size: 12.5px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s;
}
.tip.es-visible { opacity: 1; }
.tip__titulo { margin-bottom: .375rem; color: var(--texto-3); }
.tip__fila { display: flex; gap: .5rem; align-items: center; }
.tip__fila + .tip__fila { margin-top: .25rem; }
.tip__clave { width: 12px; height: 2px; border-radius: 2px; flex: none; }
.tip__fila strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.tip__fila span:last-child { color: var(--texto-2); }

/* Puntos de ruptura ------------------------------------------------------- */
@media (min-width: 40rem) {
  .panel { padding-inline: 1.75rem; }
  .resumen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tarjeta--heroe { grid-column: 1 / -1; }
  .agentes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alertas li { grid-template-columns: 1fr auto auto; }
  .director__rejilla { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .panel__pie { grid-template-columns: 1fr auto; align-items: center; }
}

@media (min-width: 64rem) {
  .app { display: grid; grid-template-columns: 15rem minmax(0, 1fr); }
  .lateral {
    top: 0;
    height: 100vh;
    gap: 2rem;
    padding: 1.75rem 1.25rem;
    border-right: 1px solid var(--filete);
    border-bottom: 0;
    background: rgba(18, 18, 17, .6);
  }
  .lateral__nav { margin: 0; overflow: visible; }
  .lateral__nav ul { display: grid; width: auto; padding: 0; }
  .lateral__nav a { border-radius: 8px; font-size: 14px; }
  .lateral__pie { display: block; margin-top: auto; color: var(--texto-3); font-size: 12.5px; }
  .lateral__pie strong { color: var(--texto-2); font-weight: 500; }

  .panel { padding: 2.75rem 2.5rem 5rem; }
  .panel__cabecera { grid-template-columns: 1fr auto; align-items: end; }
  .resumen { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(3, auto); }
  .tarjeta--heroe { grid-column: 1; grid-row: 1 / span 3; }
  .agentes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hallazgo { grid-template-columns: 5fr 7fr; gap: 2.5rem; align-items: start; padding: 2rem; }
  .hallazgo__grafico { margin-top: 0; }
  .rejilla-2 { grid-template-columns: 1fr 1fr; align-items: start; }
}