/* Panel del agente — lenguaje visual iOS/macOS.

   TESIS: esto no es un dashboard, es la transcripción de un diálogo. El panel
   se organiza alrededor de DOS VOCES —el lead y el agente— y usa la gramática
   que todo el mundo ya sabe leer sin que se la expliquen: la de Mensajes.
     azul (--azul)   el agente: sus burbujas, sus rayas, el control activo
     gris (--gris-b) el lead: las suyas
   Como en iMessage: el que manda va en azul, el que responde en gris.

   MATERIALES: tarjetas blancas FLOTANDO sobre un lienzo gris. La jerarquía la
   dan la elevación y el aire, no las reglas ni los bordes. Radios grandes y
   sombras difusas: nada corta, todo se apoya.

   COLOR: la paleta de sistema de Apple, y solo donde significa algo — verde lo
   que sube, rojo lo que baja, naranja lo que espera. El azul es del producto,
   así que ningún gráfico se lo apropia.

   TIPO: Geist (lo más cerca de SF con licencia libre). Números grandes y
   apretados, etiquetas chicas en gris, y una FRASE que explica cada número:
   el dato solo no dice si está bien o mal. */

:root {
  color-scheme: light;

  /* ── MATERIALES ── */
  --lienzo: #f0f0f3;   /* el gris sobre el que flota todo */
  --sup:    #ffffff;   /* la tarjeta */
  --hondo:  #f5f5f7;   /* lo que se hunde: gráficos, transcript, inputs */
  --hover:  #f5f5f7;

  /* ── TINTA ── (etiquetas de sistema de Apple) */
  --tinta: #1d1d1f;   /* 16.0 sobre blanco */
  --gris:  #515154;   /*  8.0 — texto secundario */
  --tenue: #86868b;   /*  3.9 — captions y ejes; nunca texto largo */
  --frio:  #c7c7cc;   /* PROHIBIDO para texto: bordes, tracks, dashed */
  --linea: #e5e5ea;   /* hairline */

  /* ── EL AZUL ── la voz del agente y el estado activo. */
  --azul:       #0071e3;
  --azul-vivo:  #0077ed;
  --azul-suave: #e9f2fe;
  --azul-tinta: #0058b0;   /* 5.4 sobre blanco: el azul pleno como texto chico no llega */

  /* ── LA VOZ DEL LEAD ── el gris de Mensajes. */
  --gris-burbuja: #e9e9eb;   /* la burbuja */

  /* ── SEÑALES ── rellenos plenos y su versión legible en texto chico. */
  --verde: #34c759;  --verde-suave: #e3f7e9;  --verde-tinta: #1c7c3e;
  --rojo:  #ff3b30;  --rojo-suave:  #ffe9e7;  --rojo-tinta:  #c9271d;
  --ambar: #ff9500;  --ambar-suave: #fff1de;  --ambar-tinta: #9a5a00;
  --violeta: #5e5ce6;                          /* la 2da serie de los gráficos */

  /* ── ESPACIO: 7 pasos, nada fuera de la escala ── */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 40px; --e7: 64px;

  /* ── TIPO ── */
  --t0: 11.5px;  --t1: 13px;   --t2: 15px;
  --t3: 17px;    --t4: 22px;   --t5: 32px;
  --t6: 46px;                              /* el número grande */
  --t7: clamp(30px, 3.8vw, 44px);          /* la frase de la portada */

  /* ── FORMA ── nada con esquina viva. */
  --r-tarjeta: 20px;
  --r-ctrl: 12px;
  --r-chica: 10px;
  --r-pill: 999px;
  --r-burbuja: 20px;
  --cola: 6px;

  --ui: 'Geist', -apple-system, system-ui, sans-serif;
  --display: var(--ui);
  --dato: 'Geist Mono', ui-monospace, monospace;

  /* Elevación: dos alturas y nada más. */
  /* Ancho: la pantalla entera, con un techo para que en un monitor de 27" el
     texto no quede en líneas de 200 caracteres. */
  --ancho-max: 1720px;

  --sombra: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -14px rgba(0, 0, 0, .18);
  --sombra-alta: 0 12px 48px -12px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--lienzo);
  color: var(--tinta);
  font: 400 var(--t2)/1.5 var(--ui);
  font-synthesis: none;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
b, strong { font-weight: 600; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.02em; margin: 0; }
a { color: var(--azul-tinta); text-underline-offset: 2px; }

/* ── La franja ──────────────────────────────────────────────────────────
   Abre HABLANDO: una frase por pantalla en vez de una barra de navegación. Va
   sobre el lienzo, sin tarjeta: es el encabezado de la app, no una pieza más. */

.franja { background: var(--lienzo); }
.franja-int { max-width: var(--ancho-max); margin: 0 auto; padding: 0 var(--e6); }

.top { display: flex; align-items: center; gap: var(--e3); padding: var(--e5) 0 var(--e5); }

.marca { display: flex; align-items: center; gap: var(--e2); font-weight: 600; font-size: var(--t2); letter-spacing: -.02em; }
.globo {
  width: 22px; height: 22px; background: var(--azul);
  display: grid; place-items: center;
  border-radius: var(--r-burbuja) var(--r-burbuja) var(--r-burbuja) var(--cola);
}
.globo::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fff; }

.quien { margin-left: auto; font-size: var(--t1); color: var(--tenue); }
.quien b { color: var(--gris); font-weight: 500; }

/* Una línea de resumen, no un póster. Antes era una frase de tres renglones a
   44px que empujaba todo el tablero abajo del pliegue y repetía un número que
   ya está en las tarjetas. El número sigue en tinta; el resto, en gris. */
.titular { padding: var(--e5) 0 0; max-width: 70ch; }
.frase {
  font-weight: 500; font-size: var(--t4); line-height: 1.25;
  letter-spacing: -.015em; color: var(--gris); margin: 0;
}
.frase .cifra { font-weight: 600; font-size: 1.45em; letter-spacing: -.03em; color: var(--tinta); margin-right: .06em; }
/* Las secciones son un control segmentado, no pestañas subrayadas. */
.tabs {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  background: #e4e4e8; border-radius: var(--r-pill); padding: 3px;
  width: fit-content; max-width: 100%;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  appearance: none; border: 0; background: none; cursor: pointer;
  font: 500 var(--t1)/1 var(--ui); color: var(--gris);
  padding: 9px 15px; border-radius: var(--r-pill); white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .tab { transition: background .16s ease-out, color .16s ease-out; }
}
.tab:hover { color: var(--tinta); }
.tab[aria-selected="true"] {
  background: var(--sup); color: var(--tinta); font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.tab:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }

main { padding: var(--e5) var(--e6) 96px; max-width: var(--ancho-max); margin: 0 auto; }

/* ── Piezas ─────────────────────────────────────────────────────────── */

.tarjeta {
  background: var(--sup); border: 0; border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra); padding: var(--e5); margin: 0 0 var(--e4);
}
/* NO `:last-child`: eso mata el margen dentro de CADA contenedor, y dos
   tarjetas que viven en contenedores distintos (el Lab) quedaban pegadas. En
   las grillas el gap ya separa, así que ahí sí se saca. */
.dos > .tarjeta, .split > .tarjeta { margin-bottom: 0; }

/* Lo que se MIDE se hunde: mismo gris que el lienzo, adentro de la tarjeta. */
.hueco { background: var(--hondo); border: 0; border-radius: var(--r-ctrl); }

.seccion {
  font-weight: 600; font-size: var(--t4); line-height: 1.2; letter-spacing: -.025em;
  color: var(--tinta); margin: var(--e6) 0 var(--e4);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e3); flex-wrap: wrap;
}
.seccion em { font: 400 var(--t1)/1 var(--ui); color: var(--tenue); font-style: normal; letter-spacing: 0; }

.rotulo { font: 500 var(--t1)/1 var(--ui); color: var(--tenue); margin-bottom: var(--e2); }
.bloque-tit { font: 600 var(--t3)/1.3 var(--ui); letter-spacing: -.015em; color: var(--tinta); margin: 0 0 var(--e3); }
.titulo { font-weight: 600; font-size: var(--t4); letter-spacing: -.025em; margin: var(--e6) 0 var(--e4); }
.titulo:first-child { margin-top: 0; }
.titulo.chico { font-size: var(--t3); margin: 0 0 var(--e3); }

/* Las dos columnas estiran a la misma altura: con align-items:start, la tarjeta
   corta dejaba un hueco enorme al lado de la larga. */
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); align-items: stretch; }
.dos > .tarjeta { display: flex; flex-direction: column; }
.dos > .tarjeta > .hueco { margin-top: auto; margin-bottom: auto; }
@media (max-width: 900px) { .dos { grid-template-columns: 1fr; } }
/* Salvo cuando el largo ES el dato: dos listas de distinto largo estiradas a la
   misma altura dejan media tarjeta vacía. */
.dos.arriba { align-items: start; }

/* ── Métricas ───────────────────────────────────────────────────────────
   Orden de lectura: primero QUÉ pasó (los cuatro conteos), después CÓMO viene
   (el score y sus tasas), y recién ahí el detalle en el tiempo. */

.cab { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; margin: 0 0 var(--e4); }
.cab .nav { margin-left: auto; }

/* El score y sus tasas comparten fila: las tasas SON la explicación del score,
   no una sección aparte. */
.fila-hero { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: var(--e3); margin-top: var(--e3); }
@media (max-width: 1100px) { .fila-hero { grid-template-columns: 1fr; } }


.hero {
  background: var(--sup); border: 0; border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra); padding: var(--e5); margin: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: var(--e6); align-items: start;
}
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: var(--e5); } }

.barra-periodo { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; margin: 0; }
/* Control segmentado, igual que las secciones. */
.periodos { display: flex; gap: 2px; margin: 0; background: var(--hondo); border-radius: var(--r-pill); padding: 3px; width: fit-content; max-width: 100%; }
.nav { display: flex; align-items: center; gap: var(--e2); margin-left: auto; }
.nav b { font: 500 var(--t1)/1 var(--ui); min-width: 128px; text-align: center; color: var(--gris); }
.nav .boton { padding: 8px; border-radius: 50%; }

.periodo {
  appearance: none; cursor: pointer; border: 0; background: none;
  font: 500 var(--t1)/1 var(--ui); color: var(--gris); padding: 8px 15px; border-radius: var(--r-pill);
}
.periodo:hover { color: var(--tinta); }
.periodo.on { background: var(--sup); color: var(--tinta); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.periodo:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }

.hero-cuerpo { min-width: 0; }

.hero-n {
  font: 600 var(--t6)/1 var(--ui); letter-spacing: -.04em; color: var(--tinta);
  display: flex; align-items: baseline; gap: var(--e2); flex-wrap: wrap; margin-top: var(--e1);
}
.hero-n span { font-size: var(--t4); color: var(--tenue); font-weight: 500; letter-spacing: -.01em; }
.hero-n.mediano { font-size: var(--t5); letter-spacing: -.03em; }

.hero-escala { margin: var(--e4) 0 var(--e5); max-width: 380px; }
.hero-track { height: 10px; border-radius: var(--r-pill); overflow: hidden; background: var(--hondo); }
.hero-track span { display: block; height: 100%; background: var(--azul); border-radius: var(--r-pill); min-width: 4px; }
.hero-ticks { display: flex; justify-content: space-between; margin-top: 6px; }
.hero-ticks em { font: 400 var(--t0)/1 var(--dato); color: var(--tenue); font-style: normal; }

.hero-comp { display: flex; gap: var(--e6); flex-wrap: wrap; margin: 0 0 var(--e4); }
/* `> span`: el chip del delta TAMBIÉN es un span y con el selector suelto se
   volvía columna, con la flecha arriba del número. */
.hero-comp > span { display: flex; flex-direction: column; gap: 5px; }
.hero-comp i { font-style: normal; font-size: var(--t1); color: var(--tenue); }
.hero-comp b { font: 600 var(--t4)/1 var(--ui); letter-spacing: -.025em; color: var(--tinta); }
/* El chip es un item de una columna: sin esto se estira a todo el ancho de la
   columna y la flecha queda arriba del número. */
.hero-comp .var { align-self: flex-start; }

.hero-nota { font-size: var(--t2); line-height: 1.5; color: var(--gris); margin: 0; max-width: 52ch; }
.hero-nota b { color: var(--tinta); font-weight: 600; }

/* El rail: la ventana hacia atrás desde hoy. Un segmentado — el mismo control
   que el período de arriba — y abajo las tres cifras con el nombre entero. */
.hero-lado {
  background: var(--hondo); border-radius: var(--r-ctrl); padding: var(--e4);
  align-self: start; min-width: 216px;
}
.rail-tit { font-size: var(--t1); color: var(--tenue); margin-bottom: var(--e3); }
.rail-seg { background: var(--sup); width: 100%; }
.rail-seg .periodo { flex: 1; padding: 7px 4px; font-size: var(--t0); }
.rail-seg .periodo.on { background: var(--azul-suave); color: var(--azul-tinta); box-shadow: none; }

.rail-datos { margin: var(--e4) 0 0; display: grid; gap: var(--e3); }
.rail-datos > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3); }
.rail-datos dt { font-size: var(--t1); color: var(--tenue); }
.rail-datos dd { margin: 0; font: 600 var(--t3)/1 var(--ui); letter-spacing: -.02em; color: var(--tinta); font-variant-numeric: tabular-nums; }
.rail-datos dd.ambar { color: var(--ambar-tinta); }
.rail-datos dd.verde { color: var(--verde-tinta); }

/* ── Las 8 KPI ──────────────────────────────────────────────────────────
   Fila 1: los 4 CONTEOS, cada uno en su tarjeta. Fila 2: las 4 TASAS, sin
   tarjeta — son medidas de las de arriba, no piezas nuevas. */

.kgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e3); margin: 0; }
.kgrid.cinco { grid-template-columns: repeat(5, 1fr); }
.kgrid.seis { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1400px) { .kgrid.seis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1200px) { .kgrid.cinco { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .kgrid, .kgrid.cinco, .kgrid.seis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .kgrid { grid-template-columns: 1fr; } }
.kgrid.tres { grid-template-columns: repeat(3, 1fr); }
.kgrid.tasas { grid-template-columns: 1fr 1fr; margin: 0; gap: var(--e3); align-content: start; }
/* Con una cantidad impar, la última no queda huérfana en media fila. */
.kgrid.tasas .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 520px) { .kgrid.tasas { grid-template-columns: 1fr; } }

.kpi {
  background: var(--sup); border: 0; border-radius: var(--r-tarjeta); padding: var(--e4) var(--e5);
  box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 6px;
}
.kfila { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.kv { font: 600 var(--t5)/1 var(--ui); letter-spacing: -.035em; color: var(--tinta); }
.kl { font-size: var(--t1); line-height: 1.4; color: var(--gris); }
.kpie { font-size: var(--t0); line-height: 1.45; color: var(--tenue); margin: auto 0 0; }

/* El resultado de todo el tablero: se tiñe para que cierre la fila. */
.kpi.logro { background: var(--azul-suave); box-shadow: none; }
.kpi.logro .kv { color: var(--azul-tinta); }
.kpi.logro .kl, .kpi.logro .kpie { color: var(--azul-tinta); opacity: .78; }

.kgrid.tasas .kpi { background: var(--hondo); box-shadow: none; }
.kgrid.tasas .kv { font-size: var(--t4); color: var(--gris); }
/* Adentro de una tarjeta las KPI se hunden: una tarjeta blanca con sombra
   arriba de otra tarjeta blanca no se lee como jerarquía, se lee como error. */
.tarjeta .kgrid .kpi { background: var(--hondo); box-shadow: none; }
.tarjeta .kgrid .kpi.logro { background: var(--azul-suave); }
.tarjeta .kgrid .kv { font-size: var(--t4); }

/* El delta es un CHIP, no un renglón de texto: se lee sin leer. */
.var {
  display: inline-flex; align-items: center; gap: 3px;
  font: 600 var(--t0)/1 var(--ui); white-space: nowrap;
  padding: 5px 10px 5px 7px; border-radius: var(--r-pill);
}
.var.neutra { padding-left: 10px; }
.var .flecha { width: 13px; height: 13px; flex-basis: 13px; stroke-width: 2; }
.var.sube { background: var(--verde-suave); color: var(--verde-tinta); }
.var.baja { background: var(--rojo-suave); color: var(--rojo-tinta); }
.var.neutra { background: var(--hondo); color: var(--tenue); }

/* ── Barras horizontales ─────────────────────────────────────────────── */

.fuga { display: grid; grid-template-columns: 190px minmax(0, 1fr) 116px; gap: var(--e4); align-items: center; padding: 3px 0; }
@media (max-width: 620px) { .fuga { grid-template-columns: 1fr; gap: var(--e1); padding: var(--e2) 0; } }
.fuga-l { font-size: var(--t2); color: var(--gris); }
.fuga-b { height: 28px; border-radius: var(--r-pill); overflow: hidden; background: var(--hondo); }
.fuga-b span { display: block; height: 100%; border-radius: var(--r-pill); min-width: 6px; background: #9dc4f7; }
.fuga-n { font: 600 var(--t2)/1 var(--ui); text-align: right; color: var(--tinta); }
.fuga-n em { font-style: normal; color: var(--tenue); font-size: var(--t1); font-weight: 400; margin-left: var(--e2); }
.dos .fuga { grid-template-columns: 86px minmax(0, 1fr) 44px; gap: var(--e3); padding: 2px 0; }
.dos .fuga-b { height: 20px; }

/* ── Lo que dicen los leads ──────────────────────────────────────────────
   Una lista rankeada: el primero es LA respuesta y se lee sin comparar. */

.dice-f { display: grid; grid-template-columns: minmax(0, 1fr) 132px 84px; gap: var(--e4); align-items: center; padding: 9px 0; }
.dice-f + .dice-f { border-top: 1px solid var(--linea); }
@media (max-width: 620px) { .dice-f { grid-template-columns: minmax(0, 1fr) 72px; } .dice-b { display: none; } }
.dice-l { font-size: var(--t2); color: var(--gris); }
.dice-f.top .dice-l { color: var(--tinta); font-weight: 600; }
.dice-b { height: 10px; border-radius: var(--r-pill); overflow: hidden; background: var(--hondo); }
.dice-b span { display: block; height: 100%; border-radius: var(--r-pill); min-width: 5px; background: var(--frio); }
.ac-azul .dice-f.top .dice-b span { background: var(--azul); }
.ac-rojo .dice-f.top .dice-b span { background: var(--rojo); }
.ac-azul .dice-b span { background: #a9cdf7; }
.ac-rojo .dice-b span { background: #ffb3ad; }
.dice-n { font: 600 var(--t2)/1 var(--ui); text-align: right; color: var(--tinta); white-space: nowrap; }
.dice-cola { margin: var(--e3) 0 0; }
.dice-f.apagada .dice-l { color: var(--tenue); }
.dice-f.apagada .dice-n { color: var(--tenue); font-weight: 400; }
.fup-etapa + .fup-etapa { margin-top: var(--e5); }
.fup-tit { font: 600 var(--t2)/1.3 var(--ui); color: var(--tinta); margin-bottom: var(--e2); }
.fup-tit em { font: 400 var(--t1)/1 var(--ui); font-style: normal; color: var(--tenue); margin-left: var(--e2); }
.dice-l em { font-style: normal; color: var(--tenue); font-size: var(--t1); }
/* A ancho completo la etiqueta no necesita media pantalla: la barra sí. */
.dice.ancha .dice-f { grid-template-columns: 300px minmax(0, 1fr) 96px; }
@media (max-width: 620px) { .dice.ancha .dice-f { grid-template-columns: minmax(0, 1fr) 84px; } }

/* La cabecera de los follow-ups: el número grande y, al lado, qué significa. */
.fup-cab { display: flex; align-items: baseline; gap: var(--e5); flex-wrap: wrap; margin-bottom: var(--e4); padding-bottom: var(--e4); border-bottom: 1px solid var(--linea); }
.fup-cab .hero-n { margin: 0; }
.fup-cab .nota { flex: 1; min-width: 240px; max-width: 62ch; }
.fup-cab .nota b { color: var(--tinta); }

/* La aclaración de qué se cuenta va suelta sobre el lienzo, como en el CRM. */
.pie-detalle { margin: var(--e3) 2px 0; }
.pie-detalle b { color: var(--gris); }
.dice-n em { font-style: normal; font-weight: 400; font-size: var(--t1); color: var(--tenue); margin-left: 6px; }

/* ── El embudo ──────────────────────────────────────────────────────────
   Trapecios que se angostan paso a paso: la forma es el dato. El paso donde se
   cae más gente se pinta, el resto se calla. */

.emb-caja { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--e5); }
@media (max-width: 900px) { .emb-caja { grid-template-columns: 1fr; } }
/* El alto de la tarjeta lo manda la columna más larga. El embudo se centra en
   la suya en vez de dejar un pozo de aire debajo. */
.emb-caja > div:first-child { display: flex; flex-direction: column; }
.emb { margin: auto 0; padding: var(--e2) 0; }
.emb-pie { margin: 0; }
.emb-pie b { color: var(--tinta); }

.emb-fila { display: grid; grid-template-columns: 210px minmax(0, 1fr) 96px; gap: var(--e4); align-items: center; }
@media (max-width: 620px) { .emb-fila { grid-template-columns: minmax(0, 1fr) 84px; } .emb-cel { display: none; } }
.emb-fase { font-size: var(--t2); color: var(--gris); }
.emb-adv { display: block; font-style: normal; font-size: var(--t0); color: var(--tenue); margin-top: 2px; }
.emb-adv.flojo { color: var(--ambar-tinta); }
.emb-adv.crit { color: var(--rojo-tinta); font-weight: 600; }
.emb-cel { height: 62px; }
.emb-fila.fin .emb-cel { height: 34px; }
.emb-seg { display: block; height: 100%; background: #cfe3fb; }
.emb-seg.e1 { background: #a9cdf7; }
.emb-seg.e2 { background: #6ea8f0; }
.emb-seg.e3 { background: var(--verde); }
.emb-seg.crit { background: var(--rojo); opacity: .82; }
.emb-n { font: 600 var(--t4)/1 var(--ui); letter-spacing: -.025em; text-align: right; color: var(--tinta); }
.emb-n em { display: block; font-style: normal; font: 400 var(--t1)/1 var(--ui); color: var(--tenue); margin-top: 4px; }

.emb-lado { display: flex; flex-direction: column; gap: var(--e3); }
.emb-fuga, .emb-dato { background: var(--hondo); border-radius: var(--r-ctrl); padding: var(--e4); }
.emb-fuga { background: var(--rojo-suave); }
.emb-fuga .rotulo, .emb-fuga .nota { color: var(--rojo-tinta); }
.emb-fuga .nota b { color: var(--rojo-tinta); }
.emb-fuga .hero-n { color: var(--rojo-tinta); margin: 0 0 6px; }
.emb-fuga .hero-n span { color: var(--rojo-tinta); opacity: .7; }
.emb-dato .hero-n { margin: 0 0 var(--e2); }
.emb-dato .nota { margin-top: 6px; }

/* A qué hora reservan: la hora pico con palabras y las franjas en barras. */
.horas-hero { display: flex; align-items: baseline; gap: var(--e4); flex-wrap: wrap; margin-bottom: var(--e4); padding-bottom: var(--e4); border-bottom: 1px solid var(--linea); }
.horas-hero .hero-n { margin: 0; }
.horas-hero .hero-n span { font-size: var(--t3); }
.horas-hero .nota { flex: 1; min-width: 200px; }
.horas-hero .nota b { color: var(--tinta); }
.fuga-l em { font-style: normal; color: var(--tenue); font-size: var(--t1); margin-left: 4px; }
/* La franja y su rango entran en un renglón: partido en dos ("Mañana 06 / a
   11") se lee como dos cosas distintas. */
.dos .horas-franjas .fuga { grid-template-columns: 138px minmax(0, 1fr) 44px; }
.horas-franjas .fuga-l { white-space: nowrap; }
.fuga.top .fuga-l { color: var(--tinta); font-weight: 600; }
.fuga.top .fuga-b span { background: var(--azul); }

/* ── Gráficos ─────────────────────────────────────────────────────────── */

.pinta { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: baseline; }
.pinta.grafo, .pinta.electrico { background: var(--azul); }
.pinta.ambar { background: var(--ambar); }
.pinta.verde { background: var(--verde); }
/* La serie que va en línea se anuncia como línea, no como cuadrito. NO se llama
   .linea: esa clase ya es la tarjeta de la ancla en Follow-ups y le metía 24px
   de padding al cuadradito de la leyenda. */
.pinta.raya { width: 14px; height: 3px; border-radius: var(--r-pill); vertical-align: 3px; }
.graf-leyenda { font-size: var(--t1); color: var(--tenue); margin: 0 0 var(--e3); }

/* Barras con degradado, línea con puntos. Los ejes van en HTML a los costados:
   adentro del SVG el texto escala con el viewBox y a media pantalla queda en
   5px. La grilla de 3 columnas mantiene las etiquetas de abajo alineadas con el
   dibujo sin tener que compensar el ancho del eje a mano. */
.graf-caja { padding: var(--e3) 0 0; position: relative; }
.graf-grid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: stretch; column-gap: var(--e3); }
.graf-y {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 2px 0 6px; text-align: right; min-width: 24px;
}
.graf-y.ambar { text-align: left; }
.graf-y em { font: 400 var(--t0)/1 var(--dato); color: var(--tenue); font-style: normal; }
.graf-y.ambar em { color: var(--ambar-tinta); }
.graf { width: 100%; height: auto; aspect-ratio: 1000 / 300; display: block; overflow: visible; }

.graf .base { stroke: var(--linea); stroke-width: 1.5; }
.graf .malla { stroke: var(--linea); stroke-dasharray: 4 8; }

.graf .barra { stroke: none; }
.graf .trazo { fill: none; stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.graf .punto { stroke-width: 3.5; fill: var(--sup); }
/* La tasa es una referencia sobre las barras, no la serie: va más fina. */
.graf .trazo.tasa { stroke: var(--ambar); stroke-width: 2.5; }
.graf .punto.tasa { stroke: var(--ambar); stroke-width: 3; }

/* Los stops del degradado se pintan por CSS para que salgan de los tokens. */
.g-alto.azul { stop-color: var(--azul); stop-opacity: .85; }
.g-bajo.azul { stop-color: var(--azul); stop-opacity: .18; }
.g-alto.ambar { stop-color: var(--ambar); stop-opacity: .9; }
.g-bajo.ambar { stop-color: var(--ambar); stop-opacity: .22; }
.g-alto.verde { stop-color: var(--verde); stop-opacity: .95; }
.g-bajo.verde { stop-color: var(--verde); stop-opacity: .25; }

/* Hover: la columna se enciende, la guía la señala y el globito da el número. */
.graf .zona { fill: rgba(0, 0, 0, 0); pointer-events: all; }
.graf .guia { stroke: var(--frio); stroke-width: 1.5; stroke-dasharray: 3 5; opacity: 0; }
.graf .guia.on { opacity: 1; }
.graf .barra.on { filter: saturate(1.3) brightness(.92); }
/* El punto marcado engorda el anillo. El radio no se toca por CSS: `r` como
   propiedad no está en todos los navegadores y el punto desaparecería. */
.graf .punto.on { stroke-width: 6; }
@media (prefers-reduced-motion: no-preference) {
  .graf .barra { transition: filter .12s ease-out; }
  .graf .punto { transition: stroke-width .12s ease-out; }
}

.tip {
  position: absolute; z-index: 5; transform: translateX(-50%); pointer-events: none;
  background: rgba(29, 29, 31, .88); backdrop-filter: blur(20px) saturate(1.6);
  color: #fff; border-radius: var(--r-chica); padding: 9px 12px;
  box-shadow: var(--sombra-alta); white-space: nowrap;
}
.tip[hidden] { display: none; }
.tip b { display: block; font-size: var(--t0); font-weight: 600; color: rgba(255, 255, 255, .62); margin-bottom: 5px; }
.tip span { display: flex; align-items: center; gap: 7px; font-size: var(--t1); line-height: 1.6; color: rgba(255, 255, 255, .8); }
.tip em { font-style: normal; font-weight: 600; color: #fff; margin-left: auto; padding-left: var(--e4); }

.graf-vacio { position: relative; }
.graf-nada { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 4px; }
.graf-nada b { font-size: var(--t1); font-weight: 600; color: var(--gris); }
.graf-nada span { font-size: var(--t0); color: var(--tenue); }
.graf-pie {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  font: 400 var(--t0)/1 var(--dato); color: var(--tenue); margin-top: var(--e2);
}
.graf-pie span { text-align: center; white-space: nowrap; overflow: hidden; }
.graf-max { font-size: var(--t1); color: var(--tenue); margin: var(--e3) 0 0; }
.graf-max b { color: var(--gris); font-weight: 600; }

@media (prefers-reduced-motion: no-preference) {
  .graf .barra, .graf .trazo { animation: dibuja .55s cubic-bezier(.16, 1, .3, 1) backwards; }
  .graf .punto { animation: aparece .3s ease-out .3s backwards; }
  @keyframes dibuja { from { opacity: 0; transform: translateY(10px); } }
  @keyframes aparece { from { opacity: 0; } }
}

.lrow { display: flex; justify-content: space-between; align-items: center; padding: var(--e2) 0; border-top: 1px solid var(--linea); font-size: var(--t2); }
.lrow:first-of-type { border-top: 0; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: var(--e3); }
.tile { background: var(--sup); border: 0; border-radius: var(--r-tarjeta); padding: var(--e4) var(--e5); box-shadow: var(--sombra); }
.tile .n { font: 600 var(--t5)/1 var(--ui); letter-spacing: -.035em; }
.tile .l { font-size: var(--t1); color: var(--gris); margin-top: 6px; }
.tile .sub { font-size: var(--t0); line-height: 1.45; color: var(--tenue); margin-top: var(--e1); }

.tile.destacado { background: var(--azul); }
.tile.destacado .n { font-size: 38px; color: #fff; }
.tile.destacado .l { color: rgba(255, 255, 255, .92); font-weight: 500; }
.tile.destacado .sub { color: rgba(255, 255, 255, .72); }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font: 500 var(--t0)/1 var(--ui); padding: 6px 11px; border-radius: var(--r-pill);
  background: var(--hondo); color: var(--gris); white-space: nowrap;
}
.pill.verde { background: var(--verde-suave); color: var(--verde-tinta); }
.pill.brasa { background: var(--rojo-suave); color: var(--rojo-tinta); }
.pill.ambar { background: var(--ambar-suave); color: var(--ambar-tinta); }
.pill.electrico { background: var(--azul-suave); color: var(--azul-tinta); }
/* El score va al lado de los chips de estado, pero NO se pinta como uno: la
   temperatura siempre es un anillo (igual que el avatar y la ficha), así un 88
   no se confunde con un "agendó". */
.pill.score { background: var(--sup); border: 1px solid var(--frio); font-family: var(--dato); padding: 5px 8px; }
.pill.score.hot { border-color: var(--verde); color: var(--verde-tinta); }
.pill.score.warm { border-color: var(--ambar); color: var(--ambar-tinta); }
.pill.score.cold { color: var(--tenue); }

.boton {
  appearance: none; cursor: pointer; font: 500 var(--t1)/1 var(--ui);
  padding: 11px 17px; border-radius: var(--r-pill);
  border: 0; background: var(--hondo); color: var(--tinta);
  display: inline-flex; align-items: center; gap: var(--e2);
}
@media (prefers-reduced-motion: no-preference) {
  .boton { transition: background .14s ease-out, transform .14s ease-out; }
  .boton:active { transform: scale(.97); }
}
.boton:hover { background: #eaeaee; }
/* Un botón gris sobre una superficie gris no existe: sobre lo hundido, va blanco. */
.nivel.off .boton, .hueco .boton { background: var(--sup); }
.nivel.off .boton:hover, .hueco .boton:hover { background: #fff; box-shadow: var(--sombra); }
/* Rojo solo en el texto: un botón rojo lleno se toca sin querer. */
.boton.peligro { color: var(--rojo-tinta); }
.boton.peligro:hover { background: var(--rojo-suave); }
.boton.primario { background: var(--azul); color: #fff; font-weight: 600; }
.boton.primario:hover { background: var(--azul-vivo); }
.boton:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.boton[disabled] { opacity: .45; cursor: not-allowed; }

/* Lo que se escribe: hundido, sin borde duro. */
.filtros input, .filtros select,
.campo input, .campo select, .campo textarea, .entrada,
.marcaform textarea, .codigo {
  font-family: var(--ui); color: var(--tinta);
  background: var(--hondo); border: 1px solid transparent; border-radius: var(--r-ctrl);
}
.filtros input:focus, .filtros select:focus,
.campo input:focus, .campo select:focus, .campo textarea:focus, .entrada:focus,
.marcaform textarea:focus, .codigo:focus {
  outline: none; border-color: var(--azul); background: var(--sup);
  box-shadow: 0 0 0 4px var(--azul-suave);
}

.nota { font-size: var(--t1); color: var(--tenue); }
.vacio { text-align: center; padding: var(--e7) var(--e5); color: var(--tenue); }
.vacio h3 { font-size: var(--t4); letter-spacing: -.025em; margin-bottom: var(--e2); color: var(--tinta); }

/* ── Conversaciones: el corazón del panel ───────────────────────────── */

/* Dos scrolls independientes: la lista de leads por su lado y el chat por el
   suyo, sin que la página entera se mueva.
   `grid-template-rows: minmax(0, 1fr)` + `height` (no max-height) es lo que lo
   hace: con la altura indefinida, la fila se estira a max-content y las tarjetas
   desbordan la grilla en vez de scrollear adentro. */
.split {
  display: grid; grid-template-columns: 380px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr); gap: var(--e4);
  align-items: stretch; height: calc(100svh - 274px); min-height: 460px;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; grid-template-rows: none; height: auto; } }
.split > * { min-height: 0; display: flex; flex-direction: column; }

.tarjeta.lista { padding: var(--e2); overflow-y: auto; }
.item {
  display: flex; gap: var(--e3); width: 100%; text-align: left;
  padding: var(--e3); border: 0; border-radius: var(--r-ctrl);
  background: none; cursor: pointer; font: inherit;
}
.item:hover { background: var(--hover); }
.item[aria-current="true"] { background: var(--azul-suave); }
@media (prefers-reduced-motion: no-preference) { .item { transition: background .14s ease-out; } }
.item:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }

/* La temperatura es un anillo, no un color de relleno. */
.av {
  width: 36px; height: 36px; flex: 0 0 36px;
  display: grid; place-items: center; border-radius: 50%;
  font: 600 var(--t1)/1 var(--ui);
  background: var(--hondo); border: 2px solid transparent; color: var(--gris);
}
.av.hot { border-color: var(--verde); color: var(--verde-tinta); }
.av.warm { border-color: var(--ambar); color: var(--ambar-tinta); }
.av.cold { border-color: var(--frio); color: var(--tenue); }
.av.desc { border-style: dashed; border-color: var(--frio); color: var(--tenue); }

.item-cuerpo { min-width: 0; flex: 1; overflow: hidden; }
.item-nombre { font-weight: 600; font-size: var(--t2); letter-spacing: -.01em; display: flex; align-items: center; gap: var(--e2); min-width: 0; }
.item-nombre > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* El score pegado al margen derecho: así los puntajes quedan en columna y se
   comparan de un vistazo, en vez de bailar según el largo de cada usuario. */
.item-nombre .pill.score { margin-left: auto; }
/* `display: block`: como inline, el overflow no recorta y la hora se pegaba al
   final del preview en la misma línea ("…2 capaz hace 1 h"). */
.item-prev { display: block; font-size: var(--t1); color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-meta { display: block; font-size: var(--t0); color: var(--tenue); margin-top: 3px; }

/* La ficha del lead: el score grande, con la temperatura en el anillo, y al
   lado lo que el agente dedujo solo mientras conversaba. */
.ficha {
  display: flex; align-items: center; gap: var(--e5); flex-wrap: wrap;
  background: var(--hondo); border-radius: var(--r-ctrl); padding: var(--e3) var(--e4); margin-bottom: var(--e3);
}
.ficha-score {
  width: 62px; height: 62px; flex: 0 0 62px; border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  background: var(--sup); border: 2px solid var(--frio);
}
.ficha-score b { font: 600 var(--t4)/1 var(--ui); letter-spacing: -.03em; color: var(--gris); }
.ficha-score em { font: 400 var(--t0)/1 var(--ui); font-style: normal; color: var(--tenue); display: block; margin-top: 3px; }
.ficha-score.hot { border-color: var(--verde); }
.ficha-score.hot b { color: var(--verde-tinta); }
.ficha-score.warm { border-color: var(--ambar); }
.ficha-score.warm b { color: var(--ambar-tinta); }
.ficha-score.cold { border-color: var(--frio); }

.ficha-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--e3) var(--e5); flex: 1; min-width: 220px; }
.ficha-datos span { display: block; font-size: var(--t0); color: var(--tenue); margin-bottom: 2px; }
.ficha-datos b { font: 500 var(--t1)/1.3 var(--ui); color: var(--tinta); }
.ficha-mot { flex: 1 0 100%; font-size: var(--t1); color: var(--rojo-tinta); margin: 0; }
.ficha-mot.suave { color: var(--tenue); }

/* El transcript es LO que se vende: se agranda y se hunde en su propio gris.
   Burbujas de Mensajes — azul el agente, gris el lead. */
.chat-tit { font: 600 var(--t4)/1.2 var(--ui); letter-spacing: -.025em; }
.chat {
  flex: 1; min-height: 0; overflow-y: auto;
  /* A pantalla completa la columna de mensajes se centra y no se estira: un
     chat de 1200px de ancho no lo tiene nadie. */
  padding: var(--e4) max(var(--e4), calc((100% - 940px) / 2));
  background: var(--hondo); border: 0; border-radius: var(--r-ctrl);
}
.burbuja {
  max-width: min(74%, 46ch); padding: 11px 16px; margin-bottom: var(--e2);
  font-size: var(--t2); line-height: 1.45; white-space: pre-wrap; word-break: break-word;
  border-radius: var(--r-burbuja);
}
.burbuja.lead { background: var(--gris-burbuja); color: var(--tinta); border-bottom-left-radius: var(--cola); }
.burbuja.agente { background: var(--azul); color: #fff; margin-left: auto; border-bottom-right-radius: var(--cola); }
.burbuja.marker {
  background: none; border: 1px dashed var(--frio); color: var(--tenue); margin-left: auto;
  font: 400 var(--t0)/1.5 var(--dato); border-radius: var(--r-chica);
}
.sep { text-align: center; font-size: var(--t0); color: var(--tenue); margin: var(--e5) 0; }

/* El botón de marcar cuelga DEBAJO de la burbuja del agente y dice qué hace. */
.fila-agente { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; margin-bottom: var(--e2); }
.fila-agente .burbuja { margin-bottom: 0; }
.marcar {
  appearance: none; border: 0; background: none; cursor: pointer;
  font: 500 var(--t0)/1 var(--ui); color: var(--tenue);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px; border-radius: var(--r-pill); margin-right: 2px;
}
.marcar .ico { width: 13px; height: 13px; flex-basis: 13px; }
.marcar:hover { color: var(--rojo-tinta); background: var(--rojo-suave); }
.marcar.hecha { color: var(--verde-tinta); background: var(--verde-suave); }
.marcar:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .marcar { transition: background .14s, color .14s; } }

.marcaform { background: var(--sup); border: 0; border-radius: var(--r-ctrl); box-shadow: var(--sombra); padding: var(--e4); margin: var(--e2) 0 var(--e3); }
.marcaform label { display: block; font-size: var(--t1); font-weight: 600; margin-bottom: var(--e2); }
.marcaform textarea { width: 100%; font-size: var(--t2); line-height: 1.45; padding: 11px; resize: vertical; }
.marcaform-pie { display: flex; gap: var(--e2); justify-content: flex-end; margin-top: var(--e3); }
.ayuda { border-bottom: 1px solid var(--linea); padding-bottom: var(--e3); margin-bottom: var(--e3); }

.filtros { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e3); }
.filtros input, .filtros select { font: 400 var(--t1)/1 var(--ui); padding: 11px 14px; }

/* ── Editor de prompt ───────────────────────────────────────────────── */

.codigo { width: 100%; min-height: 460px; resize: vertical; font: 400 var(--t1)/1.7 var(--dato); padding: var(--e4); border-radius: var(--r-ctrl); }
.codigo.completa { position: fixed; inset: 0; z-index: 50; min-height: 100vh; border-radius: 0; padding: 32px; }
body.sin-scroll { overflow: hidden; }

.aviso code { font: 500 var(--t1)/1.4 var(--dato); background: rgba(0, 0, 0, .06); padding: 2px 6px; border-radius: 6px; }

.barra { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e3); }
.barra .sep-flex { margin-left: auto; }

.tabla { width: 100%; border-collapse: collapse; font-size: var(--t2); }
.tabla th { text-align: left; font: 500 var(--t1)/1 var(--ui); color: var(--tenue); padding: 0 12px var(--e2); }
.tabla td { padding: 12px; border-top: 1px solid var(--linea); vertical-align: top; }
.tabla tr:hover td { background: var(--hover); }

.cargando { display: flex; align-items: center; gap: var(--e3); color: var(--tenue); padding: var(--e7); justify-content: center; }
.spin { width: 18px; height: 18px; border: 2px solid var(--linea); border-top-color: var(--azul); border-radius: 50%; animation: giro .7s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }

.aviso { padding: var(--e3) var(--e4); border-radius: var(--r-ctrl); font-size: var(--t1); background: var(--rojo-suave); color: var(--rojo-tinta); margin-bottom: var(--e3); }

/* ── Modal y aviso flotante ─────────────────────────────────────────── */

.modal-fondo {
  position: fixed; inset: 0; z-index: 40; padding: var(--e5);
  background: rgba(0, 0, 0, .28); backdrop-filter: blur(20px) saturate(1.4);
  display: grid; place-items: center; overflow-y: auto;
}
.modal {
  background: var(--sup); width: min(560px, 100%);
  border: 0; border-radius: var(--r-tarjeta); box-shadow: var(--sombra-alta);
  padding: var(--e5); max-height: 90vh; overflow-y: auto;
}
.modal h3 { font-size: var(--t4); letter-spacing: -.025em; margin-bottom: var(--e2); }
.modal-cuerpo { display: flex; flex-direction: column; gap: var(--e3); margin-top: var(--e4); }
.modal-pie { display: flex; align-items: center; gap: var(--e2); margin-top: var(--e5); }

.campo label { display: block; font: 500 var(--t1)/1 var(--ui); color: var(--gris); margin-bottom: var(--e2); }
.campo .pista { font-size: var(--t1); color: var(--tenue); margin-top: 6px; }
.campo input, .campo select, .campo textarea, .entrada { width: 100%; font-size: var(--t2); line-height: 1.45; padding: 11px 13px; }
.campo textarea { resize: vertical; }
.fila { display: flex; gap: var(--e3); align-items: flex-start; }
.fila > * { flex: 1; }
/* El switch del sistema, hecho a mano: el checkbox nativo es el único control
   que delataba que esto no es una app, y encima cambia de forma en cada SO. */
.check { display: flex; align-items: center; gap: 9px; font-size: var(--t1); cursor: pointer; }
.check input[type="checkbox"] {
  appearance: none; margin: 0; cursor: pointer; flex: 0 0 44px;
  width: 44px; height: 26px; border-radius: var(--r-pill);
  background: #e4e4e8; position: relative;
}
.check input[type="checkbox"]::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
}
.check input[type="checkbox"]:checked { background: var(--verde); }
.check input[type="checkbox"]:checked::after { left: 20px; }
.check input[type="checkbox"]:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .check input[type="checkbox"] { transition: background .2s ease-out; }
  .check input[type="checkbox"]::after { transition: left .2s cubic-bezier(.16, 1, .3, 1); }
}
.check input:not([type="checkbox"]) { width: auto; accent-color: var(--azul); }

/* Aviso flotante: material oscuro translúcido, como los HUD del sistema. */
.flotante {
  position: fixed; left: 50%; bottom: var(--e5); transform: translateX(-50%); z-index: 60;
  background: rgba(29, 29, 31, .82); backdrop-filter: blur(20px) saturate(1.6);
  color: #fff; font-size: var(--t2); font-weight: 500;
  padding: var(--e3) var(--e5); border-radius: var(--r-pill);
  box-shadow: var(--sombra-alta);
  animation: sube .22s cubic-bezier(.16, 1, .3, 1);
}
.flotante.mal { background: rgba(201, 39, 29, .92); }
@keyframes sube { from { opacity: 0; transform: translate(-50%, 10px); } }

/* ── Diff del prompt ────────────────────────────────────────────────── */

.df { font: 400 12.5px/1.6 var(--dato); border-radius: var(--r-ctrl); overflow: hidden; max-height: 380px; overflow-y: auto; background: var(--hondo); }
.df-l { padding: 1px 10px 1px 0; display: flex; gap: var(--e2); white-space: pre-wrap; word-break: break-word; }
.df-l .df-s { width: 20px; flex: 0 0 20px; text-align: center; color: var(--tenue); user-select: none; }
.df-l.suma { background: var(--verde-suave); color: var(--verde-tinta); }
.df-l.quita { background: var(--rojo-suave); color: var(--rojo-tinta); }
.df-corte { padding: 4px 10px; font-size: var(--t0); color: var(--tenue); background: #eaeaee; }

/* ── Assets ───────────────────────────────────────────────────────────── */

/* Una lista, no una grilla de tarjetitas. Son filas de configuración con
   estado: en columnas fijas los estados se leen de arriba abajo, y un grupo de
   un solo material deja de flotar en media pantalla vacía. */
.mats { padding: 0; overflow: hidden; }
.mat {
  display: grid; align-items: center; gap: var(--e3) var(--e4);
  grid-template-columns: 10px minmax(0, 1fr) minmax(0, 210px) auto auto;
  padding: var(--e4) var(--e5);
}
.mat + .mat { border-top: 1px solid var(--linea); }
/* Alineado con la PRIMERA línea (el nombre), no centrado en toda la fila: al
   centro quedaba al lado de la descripción, como si calificara al texto. */
.mat-pto { width: 10px; height: 10px; border-radius: 50%; background: var(--verde); align-self: start; margin-top: 7px; }
.mat.off .mat-pto { background: var(--frio); }
.mat.falta .mat-pto { background: var(--rojo); }
.mat.off .mat-key, .mat.off .mat-desc { opacity: .55; }

.mat-cab { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; margin-bottom: 4px; }
.mat-key { font: 500 var(--t2)/1.2 var(--dato); color: var(--tinta); }
.mat-desc { font-size: var(--t1); line-height: 1.5; color: var(--gris); margin: 0; }
.mat-desc em { font-style: normal; color: var(--tenue); }
.mat-mal { font-size: var(--t1); line-height: 1.5; color: var(--rojo-tinta); margin: 5px 0 0; }
.mat-mal .ico { display: inline-block; vertical-align: -3px; }

.mat-usos { font-size: var(--t0); line-height: 1.5; color: var(--tenue); }
.mat-usos span { display: block; }
.mat-usos b { display: block; font-weight: 500; color: var(--gris); }
.mat-sw { flex: 0 0 auto; }
.mat-vacio { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; margin: 0; padding: var(--e4) var(--e5); font-size: var(--t1); color: var(--tenue); }
@media (max-width: 900px) {
  .mat { grid-template-columns: 10px minmax(0, 1fr) auto; }
  .mat-usos { grid-column: 2 / -1; }
}

/* ── Follow-ups ───────────────────────────────────────────────────────── */

.etapa { margin-bottom: var(--e5); }

/* La línea de tiempo de la etapa. Va suelta sobre el lienzo, no adentro de una
   tarjeta: si fuera gris se confundiría con el fondo.
   El riel es un ::before de cada parada y no un border del <ol>, así el último
   corta en su propio punto en vez de seguir de largo hasta el borde. */
.tl { list-style: none; margin: 0 0 var(--e3); padding: 0; background: var(--sup); border-radius: var(--r-tarjeta); box-shadow: var(--sombra); }
.tl > li { position: relative; display: flex; gap: var(--e4); padding: var(--e3) var(--e5); }
.tl > li::before {   /* el riel */
  content: ''; position: absolute; left: calc(var(--e5) + 74px); top: 0; bottom: 0; width: 2px; background: var(--linea);
}
.tl > li:first-child::before { top: 50%; }
.tl > li:last-child::before { bottom: 50%; }
.tl > li::after {    /* el punto */
  content: ''; position: absolute; left: calc(var(--e5) + 70px); top: calc(var(--e3) + 7px);
  width: 10px; height: 10px; border-radius: 50%; background: var(--azul); border: 2px solid var(--sup);
}
.tl-cero { padding-top: var(--e4); }
/* `.tl > li.tl-cero`: contra `.tl > li::after` un `.tl-cero::after` pelado
   pierde por especificidad y el punto del lead salía azul, como si fuera un
   mensaje del agente. */
.tl > li.tl-cero::after { background: var(--frio); }
.tl-paso:last-child { padding-bottom: var(--e4); }
.tl-paso.off::after { background: var(--sup); box-shadow: inset 0 0 0 2px var(--frio); }

.tl-cuando { flex: 0 0 70px; text-align: right; font: 500 var(--t1)/1.5 var(--ui); color: var(--gris); font-variant-numeric: tabular-nums; }
.tl-cero .tl-cuando { color: var(--tenue); }
.tl-que {
  flex: 1; min-width: 0; margin-left: var(--e3); text-align: left;
  display: block; background: none; border: 0; padding: 0; font: inherit; color: inherit;
}
button.tl-que { cursor: pointer; border-radius: var(--r-ctrl); padding: 2px 6px; margin-left: calc(var(--e3) - 6px); }
button.tl-que:hover { background: var(--hover); }
button.tl-que:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
.tl-ord { display: block; font: 500 var(--t1)/1.5 var(--ui); color: var(--tenue); }
.tl-txt { display: block; font-size: var(--t2); line-height: 1.45; color: var(--tinta); }
.tl-txt em { font-style: normal; color: var(--tenue); }
.tl-paso.off .tl-txt { color: var(--tenue); }
.tl-sin { font-size: var(--t1); color: var(--tenue); margin: 0 0 var(--e3); }

.nivel { border: 0; border-radius: var(--r-tarjeta); padding: var(--e5); margin-bottom: var(--e3); background: var(--sup); box-shadow: var(--sombra); }
.nivel.off { background: var(--hondo); box-shadow: none; }
.nivel-cab { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e3); }
.nivel-n { font: 600 var(--t3)/1.3 var(--ui); letter-spacing: -.015em; }
.nivel-cu { font-size: var(--t1); color: var(--tenue); }
.nivel-gap { font-size: var(--t1); color: var(--verde-tinta); }
.nivel-gap.mal { color: var(--rojo-tinta); font-weight: 500; }

.globos { display: flex; flex-direction: column; gap: var(--e2); margin-top: var(--e2); }
.globos .burbuja.agente { max-width: 100%; margin: 0; font-size: var(--t1); }
.globos-nota { font-size: var(--t1); color: var(--tenue); }

.obj { margin-top: var(--e4); padding-top: var(--e3); border-top: 1px solid var(--linea); }
.obj-lbl { font-size: var(--t1); color: var(--tenue); margin-bottom: 8px; }
.obj-chips { display: flex; gap: var(--e2); flex-wrap: wrap; }
.chip {
  appearance: none; cursor: pointer; font: 500 var(--t1)/1 var(--ui);
  padding: 8px 12px; border-radius: var(--r-pill);
  border: 0; background: var(--hondo); color: var(--gris);
  display: inline-flex; align-items: center; gap: 6px;
}
.chip:hover { background: #eaeaee; color: var(--tinta); }
.chip.puesto { color: var(--tinta); }
.chip.on { background: var(--azul-suave); color: var(--azul-tinta); font-weight: 600; }
.chip.sel { outline: 2px solid var(--azul); outline-offset: 2px; }
.chip:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

.barrita { position: relative; height: 10px; border-radius: var(--r-pill); overflow: hidden; margin-top: var(--e2); background: var(--hondo); }
.barrita span { display: block; height: 100%; background: var(--azul); border-radius: var(--r-pill); }
.barrita.flojo span { background: var(--ambar); }
.barrita::after { content: ''; position: absolute; inset: -1px auto -1px var(--max); width: 2px; background: var(--gris); opacity: .35; }

.reng { padding: 10px 0; border-top: 1px solid var(--linea); }
.reng:first-of-type { border-top: 0; }
.reng-cab { display: flex; justify-content: space-between; gap: var(--e3); font-size: var(--t2); }
.reng-cab b { font-weight: 600; }

details.plegado > summary {
  display: flex; align-items: center; gap: var(--e2);
  cursor: pointer; font: 500 var(--t1)/1 var(--ui); color: var(--azul-tinta);
  padding: var(--e2) 0; list-style: none;
}
details.plegado > summary::-webkit-details-marker { display: none; }
details.plegado > summary::before {
  content: ''; width: 7px; height: 7px; flex: 0 0 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  border-radius: 0 0 2px 0;
  transform: rotate(-45deg) translate(-1px, -1px);
}
details.plegado[open] > summary::before { transform: rotate(45deg) translate(-1px, -1px); }
details.plegado > summary:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: var(--r-chica); }
@media (prefers-reduced-motion: no-preference) {
  details.plegado > summary::before { transition: transform .18s cubic-bezier(.16, 1, .3, 1); }
}

/* ── Lab ────────────────────────────────────────────────────────────── */

.lab-cab { display: flex; align-items: flex-start; gap: var(--e4); flex-wrap: wrap; margin-bottom: var(--e4); }
.lab-cab > div { flex: 1; min-width: 260px; }
.lab-n {
  font: 600 var(--t1)/1 var(--ui); font-style: normal; color: var(--ambar-tinta);
  background: var(--ambar-suave); border-radius: var(--r-pill); padding: 4px 9px; vertical-align: 3px; margin-left: 4px;
}

/* `marcaje`, no `marca`: .marca ya es el logotipo de la franja. */
/* Como los assets: van adentro de una tarjeta blanca, así que se hunden. */
.marcaje { border: 0; border-radius: var(--r-ctrl); background: var(--hondo); padding: var(--e4); margin-bottom: var(--e3); }
.marcaje .boton { background: var(--sup); }
.marcaje-msg { font-size: var(--t2); line-height: 1.5; }
.marcaje-mot {
  font-size: var(--t1); color: var(--rojo-tinta); background: var(--rojo-suave);
  padding: 9px 12px; border-radius: var(--r-chica); margin: 10px 0;
  display: flex; align-items: center; gap: var(--e2);
}
.marcaje-pie { display: flex; gap: var(--e2); }

/* ── Íconos y movimiento ────────────────────────────────────────────────
   Ninguna de las tipografías self-hosted contiene ◄ ► ⚐ ✓ ⚠ ⛶ ▸ ⏱, así que
   todos esos caían a la fuente del sistema: otra altura de x, otra métrica, y
   en varios sistemas coloreados como emoji. */

.ico { width: 16px; height: 16px; flex: 0 0 16px; display: block; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.nota .ico, .nivel-gap .ico, .tl-cuando .ico, .marcaje-mot .ico { display: inline-block; vertical-align: -3px; }

:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

/* UN solo momento con autor: la entrada de la pantalla. Arranca desde un
   estado ya visible, así que si algo falla nada queda invisible. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes entra { from { opacity: .3; transform: translateY(10px); } }
  .hero, .seccion, .tarjeta, .kpi, .tile { animation: entra .45s cubic-bezier(.16, 1, .3, 1) backwards; }
  .kgrid .kpi:nth-child(2) { animation-delay: 45ms; }
  .kgrid .kpi:nth-child(3) { animation-delay: 90ms; }
  .kgrid .kpi:nth-child(4) { animation-delay: 135ms; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}