/*
 * Paleta RGO.
 *
 * Los mismos colores y tipografías de rodrigoguardaoficial.com, para que
 * VickyDroid se vea como parte de la marca y no como una herramienta prestada.
 * El fondo es navy y no negro: en una reunión de una hora, mirando la ficha de
 * reojo, el azul profundo cansa menos que el contraste puro.
 *
 *   navy          #0D2740     azul          #2F86E8
 *   navy profundo #071626     azul claro    #63A6F0
 *   azul oscuro   #12324A     perla         #F5F7FA
 */
:root {
  /* La mide app.js con la cabecera real y la deja aquí. El valor escrito es
     solo el de arranque, para el parpadeo de la primera pintada. */
  --alto-cabecera: 102px;
  --bajo-cabecera: calc(var(--alto-cabecera) + 12px);
  --ground: #071626;
  --surface: #0d2740;
  --surface-2: #12324a;
  --ink: #f5f7fa;
  --muted: #a8bdd1;
  --quiet: #7b93a8;
  --line: rgba(245, 247, 250, 0.14);
  --line-strong: rgba(245, 247, 250, 0.28);
  /* Claro para lo que se lee; fuerte para lo que se pulsa. */
  --accent: #63a6f0;
  --accent-fuerte: #2f86e8;
  --accent-soft: #12324a;
  --amber: #e8a33d;
  --amber-soft: #2a2113;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 30px -18px rgba(0, 0, 0, 0.9);
}

/*
 * El tamaño de la letra, en un solo lugar.
 *
 * Todos los tamaños del sistema están en `rem`, o sea: son múltiplos de este
 * número. Si la letra sigue quedando chica, se sube ESTA línea y crece todo
 * VickyDroid a la vez, en proporción — no hay que tocar 75 reglas una por una.
 *
 *   100%  = 16 px  (lo que traía antes, quedaba chico)
 *   112.5% = 18 px  (un 12,5% más grande)
 *   125%  = 20 px  (un 25% más grande)
 *
 * Está en porcentaje y no en píxeles a propósito: así respeta el tamaño de
 * letra que la persona tenga configurado en su navegador, que es lo que usa
 * quien ve poco.
 */
html { font-size: 100%; }

* { box-sizing: border-box; }

h1, h2, h3, .identity h1 {
  font-family: 'Montserrat', system-ui, 'Segoe UI', sans-serif;
  letter-spacing: -0.01em;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.1875rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.mono {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* barra superior */

/* Cabecera y tira de estado se pegan arriba como un bloque único. Antes se
   pegaba cada una por su cuenta con números a mano, y al añadir la tira los
   números quedaron viejos: la ficha y la pregunta recomendada se metían
   treinta píxeles por debajo y quedaban cortadas. `--alto-cabecera` la mide
   sola en el navegador (app.js), así que aguanta si cambia el tamaño de letra. */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar {
  display: flex;
  align-items: center;
  /* Nada de space-between: separaba la marca del estado de la llamada y los
     empujaba a los dos extremos. Ahora van juntos a la izquierda y son los
     botones los que se van solos al otro lado, con margin-left: auto. */
  gap: 18px;
  flex-wrap: wrap;
  padding: 11px 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.identity { display: flex; align-items: center; gap: 11px; }
/* El isotipo se alinea al centro, no a la línea base: es un cuadrado, no texto. */
.identity .marca { display: block; border-radius: 7px; flex: 0 0 auto; }
.identity { gap: 13px; }
/* Más grande a propósito. Es una herramienta que escucha conversaciones
   reales de clientes: la marca tiene que sostener eso, no pedir permiso. */
.identity h1 {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 1.625rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.015em;
}
.identity .marca { width: 42px; height: 42px; }

.live { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); }
.live .pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.4s ease-in-out infinite;
}
.live.closed { color: var(--quiet); }
.live.closed .pulse { background: var(--quiet); animation: none; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .live .pulse { animation: none; } }

/* La tira de estado: cómo va la llamada, a todo el ancho y bajo la cabecera.
   Metida entre los botones no cabía y partía la cabecera en dos filas
   descuadradas; aquí se lee entera de un vistazo y deja la cabecera limpia. */
.tira-estado {
  padding: 8px 22px;
  background: var(--ground);
  border-bottom: 1px solid var(--line);
}
.estado {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
  flex-wrap: wrap;
}
.topbar > .controls { margin-left: auto; }
.controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.controls button + button { margin-left: -4px; }
.provider { color: var(--quiet); }

.meter { display: flex; align-items: center; gap: 9px; color: var(--muted); }
.meter .track { width: 84px; height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.meter .fill { height: 100%; background: var(--accent); transition: width 0.45s ease; }
.meter .count { font-variant-numeric: tabular-nums; }

button {
  font: inherit;
  font-size: 1rem;
  border-radius: 7px;
  padding: 7px 13px;
  cursor: pointer;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  transition: background 0.15s ease, border-color 0.15s ease;
}
button:hover { background: var(--surface-2); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.solid {
  background: var(--accent-fuerte);
  border-color: var(--accent-fuerte);
  color: #fff;
}
button.solid:hover { filter: brightness(1.1); background: var(--accent-fuerte); }
button:disabled { opacity: 0.45; cursor: not-allowed; }

/* rejilla */

.stage-grid {
  display: grid;
  /* La columna creció con la letra: con el 25% más de tamaño, a 360px se
     partía en dos líneas casi todo lo del panel de la izquierda. */
  grid-template-columns: minmax(340px, 415px) minmax(0, 1fr);
  gap: 18px;
  padding: 18px 22px 40px;
  align-items: start;
  max-width: 1500px;
  margin: 0 auto;
}
@media (max-width: 1060px) { .stage-grid { grid-template-columns: 1fr; } }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

/* conversación */

.rail { position: sticky; top: var(--bajo-cabecera); display: flex; flex-direction: column; }

.transcript {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  max-height: 46vh;
  overflow-y: auto;
}

/* La conversación como un chat: el prospecto a la izquierda, tú a la derecha.
   La columna de etiquetas anterior gastaba 76px de ancho en repetir «Prospecto»
   línea tras línea, y aún así costaba seguir quién había dicho qué. El lado
   se lee sin leer. */
.turn { display: flex; flex-direction: column; gap: 3px; max-width: 82%; }
.turn .who { color: var(--quiet); font-size: 0.6875rem; letter-spacing: 0.06em; }
.turn .said {
  color: var(--ink);
  padding: 9px 13px;
  border-radius: 13px;
  line-height: 1.45;
}

.turn.prospecto { align-self: flex-start; align-items: flex-start; }
.turn.prospecto .who { color: var(--accent); }
.turn.prospecto .said {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}

.turn.vendedor { align-self: flex-end; align-items: flex-end; }
.turn.vendedor .said {
  background: var(--accent-fuerte);
  color: #fff;
  border-bottom-right-radius: 4px;
  text-align: left;
}
.transcript .empty { color: var(--quiet); font-size: 1rem; padding: 8px 0; }

.composer { border-top: 1px solid var(--line); padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }

.segmented { display: inline-flex; background: var(--surface-2); border-radius: 8px; padding: 3px; gap: 3px; align-self: flex-start; }
.segmented button { border: none; background: transparent; padding: 5px 12px; border-radius: 6px; color: var(--muted); font-size: 0.96875rem; }
.segmented button[aria-pressed='true'] { background: var(--surface); color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }

textarea {
  width: 100%;
  min-height: 76px;
  resize: vertical;
  font: inherit;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px 12px;
}
textarea::placeholder { color: var(--quiet); }
textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); }

.composer .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hint { color: var(--quiet); font-size: 0.90625rem; }

/* pregunta recomendada */

.copilot { display: flex; flex-direction: column; gap: 18px; }

.ask {
  position: sticky;
  top: var(--bajo-cabecera);
  z-index: 10;
  /* La ficha pasa por detrás de la pregunta al bajar, y por el hueco de arriba
     asomaba media fila: parecía que algo se estaba colando. Esto tapa el hueco
     con el color del fondo, y se mueve pegado a la tarjeta. */
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 20px 22px 18px;
}
.ask::before {
  content: '';
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: 100%;
  height: 14px;
  background: var(--ground);
}

.ask .eyebrow { color: var(--accent); margin-bottom: 12px; display: block; }

.ask .question {
  font-family: 'Montserrat', system-ui, 'Segoe UI', sans-serif;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-wrap: balance;
  margin: 0;
}

.ask .because { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 1rem; }

.alts { display: flex; flex-direction: column; gap: 1px; margin-top: 16px; background: var(--line); border-radius: 9px; overflow: hidden; }
.alt { background: var(--surface); padding: 11px 14px; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.alt .n { color: var(--quiet); font-variant-numeric: tabular-nums; }
.alt .q { font-family: 'Montserrat', system-ui, 'Segoe UI', sans-serif; font-size: 1.25rem; line-height: 1.4; }
.alt .why { color: var(--quiet); font-size: 0.9375rem; margin-top: 2px; }

/* resumen */

.summary { margin: 0; padding: 16px; white-space: pre-wrap; font: inherit; line-height: 1.6; }

/* escalera */

.ladder { padding: 6px 16px 18px; }

.rung { display: block; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.rung > .slots { margin-top: 10px; margin-left: 18px; }
.rung-label { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 12px; }
.rung-label::-webkit-details-marker { display: none; }
.rung[open] > .rung-label { margin-bottom: 2px; }
.rung:last-child { border-bottom: none; }

.rung-label { position: relative; padding-left: 18px; }
.rung-label::before {
  content: '';
  position: absolute;
  left: 4px; top: 5px;
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
}

.rung.reached .rung-label::before { background: var(--accent); border-color: var(--accent); }

.rung-label .name { color: var(--muted); }
.rung.reached .rung-label .name { color: var(--ink); }
.rung-label .tally { color: var(--quiet); font-size: 0.90625rem; font-variant-numeric: tabular-nums; margin-left: auto; }
.rung-label:hover .name { color: var(--ink); }

.slots { display: flex; flex-direction: column; gap: 8px; }

.slot {
  position: relative;
  border-radius: 9px;
  border: 1px solid var(--line);
  padding: 11px 13px 11px 15px;
  background: var(--surface);
}
.slot.unknown { border-style: dashed; background: transparent; }

/* Un crítico que falta es lo único que hay que ver de reojo en una llamada.
   Antes se distinguía solo por la palabra «crítico» en pequeño, a la derecha
   del todo, en una lista de treinta y ocho filas: no saltaba. */
.slot.unknown.critico {
  border-style: solid;
  border-color: rgba(232, 163, 61, 0.4);
  background: var(--amber-soft);
}
.slot.unknown.critico::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--amber);
}
.slot.unknown.critico .label { color: var(--ink); font-weight: 600; }
.slot.confirmed { border-color: var(--accent); background: var(--accent-soft); }
.slot.partial, .slot.inferred { border-color: var(--amber); background: var(--amber-soft); }

.slot-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.slot .label { font-size: 1rem; font-weight: 500; }
.slot.unknown .label { color: var(--quiet); font-weight: 400; }
.slot .state { color: var(--muted); white-space: nowrap; }
.slot.confirmed .state { color: var(--accent); }
.slot.partial .state, .slot.inferred .state { color: var(--amber); }
.slot .value { margin-top: 5px; font-size: 1.03125rem; line-height: 1.45; }
.slot .quote { margin-top: 7px; padding-left: 9px; border-left: 2px solid var(--line-strong); color: var(--muted); font-size: 0.9375rem; font-style: italic; }
.slot .quote .src { font-style: normal; display: block; margin-top: 3px; color: var(--quiet); }

.pending-flag { color: var(--amber); }

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  background: var(--ink);
  color: var(--ground);
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 1rem;
  box-shadow: var(--shadow);
}

[hidden] { display: none !important; }

/* ---------- la ruta de la entrevista ----------
   Era una banda de seis columnas altas que se comía el primer tercio de la
   pantalla y, encima, desaparecía al bajar a la ficha. Ahora es una línea
   dentro de la tira pegajosa: ocupa un octavo y no se va nunca. */

.ruta {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  margin-left: auto;
}
.paso {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--quiet);
  font-size: 0.8125rem;
  white-space: nowrap;
}
.paso-n {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 0.625rem;
}
/* Lo ya recorrido se apaga en vez de desaparecer: saber que la química se
   cerró bien es lo que da permiso para estar en descubrimiento. */
.paso.hecha { color: var(--accent); }
.paso.hecha .paso-n { background: var(--accent-soft); }
.paso.ahora {
  background: var(--accent-fuerte);
  color: #fff;
  font-weight: 600;
}
.paso.ahora .paso-n { border-color: rgba(255, 255, 255, 0.8); }
/* En pantallas estrechas los nombres sobran: el número y el que está activo
   bastan para saber dónde vas. */
@media (max-width: 1100px) {
  .paso:not(.ahora) .paso-txt { display: none; }
}

/* ---------- el tablero ----------
   Cuatro cosas que el vendedor mira de reojo mientras habla y que cambian la
   siguiente frase que va a decir. Ocupan el sitio que dejó la banda de fases,
   que es el mejor de la pantalla y estaba gastado en una lista de seis
   palabras que no cambiaban casi nunca. */

.tablero {
  display: grid;
  grid-template-columns: repeat(3, minmax(132px, 0.85fr)) minmax(250px, 1.5fr) minmax(190px, 1.05fr);
  /* Los velocímetros no se estiran cuando el semáforo crece con las
     instrucciones dentro: tres cajas medio vacías al lado de una llena se ven
     como un fallo, y aquí el que tiene que crecer es solo el semáforo. */
  align-items: start;
  gap: 12px;
  padding: 0 22px;
  max-width: 1500px;
  margin: 14px auto 0;
}
@media (max-width: 1280px) {
  .tablero { grid-template-columns: repeat(3, 1fr); }
  .tablero .semaforo { grid-column: 1 / 3; }
  .tablero .alarma { grid-column: 3 / 4; }
}
@media (max-width: 860px) {
  .tablero { grid-template-columns: repeat(2, 1fr); }
  .tablero .semaforo, .tablero .alarma { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .tablero { grid-template-columns: 1fr 1fr; }
}

.aguja {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 10px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
}
.aguja-titulo { color: var(--quiet); font-size: 0.6875rem; letter-spacing: 0.07em; }
.aguja-dibujo { width: 100%; max-width: 150px; }
.aguja-dibujo svg { width: 100%; height: auto; display: block; }
.aguja-valor { font-family: 'Montserrat', system-ui, sans-serif; font-size: 1.375rem; font-weight: 700; line-height: 1.1; }
.aguja-pie { font-size: 0.8125rem; text-align: center; }

.arco-fondo { fill: none; stroke: var(--line-strong); stroke-width: 7; stroke-linecap: round; }
.arco-lleno { fill: none; stroke-width: 7; stroke-linecap: round; }
.raya { stroke: var(--quiet); stroke-width: 1; }
.raya-txt { fill: var(--quiet); font-size: 7px; text-anchor: middle; font-family: 'IBM Plex Mono', monospace; }
.aguja-linea { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.aguja-eje { fill: var(--ink); }

/* ---------- el semáforo de objeciones ----------
   No es un número: es un permiso para seguir o una orden de parar. Por eso
   ocupa más que los velocímetros y lleva dentro el cómo resolverlo — un aviso
   que dice «tienes un problema» y no dice qué hacer solo sirve para poner
   nervioso a alguien que está en mitad de una llamada. */

.semaforo {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.semaforo-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.semaforo-luces { display: flex; gap: 5px; }
.luz {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--line-strong);
  border: 1px solid var(--line);
}
/* La luz encendida late. En una llamada nadie está mirando el tablero: el
   movimiento es lo que hace levantar la vista, y para eso está. */
@keyframes latido {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.semaforo[data-luz='verde'] .luz.verde {
  background: #4bd07f;
  box-shadow: 0 0 8px rgba(75, 208, 127, 0.7);
  animation: latido 2.4s ease-in-out infinite;
}
.semaforo[data-luz='ambar'] .luz.ambar {
  background: var(--amber);
  box-shadow: 0 0 9px rgba(232, 163, 61, 0.8);
  animation: latido 1.4s ease-in-out infinite;
}
/* El rojo late más rápido: no es lo mismo «mira esto» que «para». */
.semaforo[data-luz='rojo'] .luz.roja {
  background: #ff6b6b;
  box-shadow: 0 0 10px rgba(255, 107, 107, 0.85);
  animation: latido 0.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .semaforo .luz, .alarma-luz { animation: none !important; }
}
.semaforo[data-luz='ambar'] { border-color: rgba(232, 163, 61, 0.5); }
.semaforo[data-luz='rojo'] { border-color: rgba(255, 107, 107, 0.6); background: rgba(255, 107, 107, 0.06); }

.semaforo-titular { margin: 2px 0 0; font-weight: 600; }
.semaforo[data-luz='ambar'] .semaforo-titular { color: var(--amber); }
.semaforo[data-luz='rojo'] .semaforo-titular { color: #ff8f8f; }
.semaforo-detalle { margin: 0; font-size: 0.875rem; }

.semaforo-como { margin-top: 8px; max-height: 210px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.obj { border-top: 1px solid var(--line); padding-top: 8px; }
.obj strong { display: block; font-size: 0.9375rem; }
.obj-senal, .obj-objetivo { margin: 2px 0 0; font-size: 0.8125rem; }
.obj-objetivo { color: var(--muted); }
.obj-pasos { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.obj-pasos li { font-size: 0.8125rem; }
.obj-paso { display: block; font-weight: 600; color: var(--accent); }
/* Las frases van tal cual las dice el método, entre comillas: son para leerlas
   en voz alta, no para inspirarse. */
.obj-frase { display: block; color: var(--muted); margin-top: 2px; }

}

/* ---------- cabecera de la jugada ---------- */

.ask-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ask.objecion { border-left-color: var(--amber); }
.ask.objecion .eyebrow { color: var(--amber); }

.vote { display: flex; gap: 6px; }
.vote button { font-size: 0.90625rem; padding: 4px 10px; border-radius: 999px; }

.brake {
  margin: 12px 0 0;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--amber-soft);
  border: 1px solid var(--amber);
  color: var(--amber);
  font-size: 0.96875rem;
}

.script { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.script li {
  font-family: 'Montserrat', system-ui, 'Segoe UI', sans-serif;
  font-size: 1.1875rem;
  line-height: 1.45;
  padding-left: 12px;
  border-left: 2px solid var(--line-strong);
}

/* ---------- brecha ---------- */

.gap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; padding: 14px 16px; align-items: center; }
@media (max-width: 700px) { .gap { grid-template-columns: 1fr; } }
.gap .side { display: flex; flex-direction: column; gap: 4px; }
.gap .side .tag { color: var(--quiet); }
.gap .side .val { font-size: 1.09375rem; line-height: 1.4; }
.gap .arrow { color: var(--accent); font-size: 1.5rem; text-align: center; }
.gap .blocker { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 10px; font-size: 1rem; color: var(--muted); }

/* ---------- verbatims ---------- */

.verbatims { list-style: none; margin: 0; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; max-height: 240px; overflow-y: auto; }
.verbatims li { font-size: 1rem; line-height: 1.45; border-left: 2px solid var(--accent); padding-left: 9px; }
.verbatims li .tag { display: block; color: var(--quiet); margin-bottom: 2px; }
.verbatims .empty { border: none; padding: 0; color: var(--quiet); }

.card-head.bordered { border-top: 1px solid var(--line); }



/* ---------- diálogos ---------- */

.dialog {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  padding: 22px;
  max-width: 460px;
  width: calc(100vw - 32px);
  box-shadow: var(--shadow);
}
.dialog.wide { max-width: 640px; }
/* La tabla de datos tiene tres campos de ficha y tres de resultado en cada
   fila: a 640px cada reunión ocupaba media pantalla de alto por el reflujo. */
.dialog.ancho-datos { max-width: 1080px; }
.dialog::backdrop { background: rgba(8, 12, 11, 0.55); }
.dialog h2 { margin: 0 0 6px; font-size: 1.375rem; }
.dialog-hint { margin: 0 0 16px; color: var(--muted); font-size: 1rem; }
.dialog form { display: flex; flex-direction: column; gap: 12px; }

.field-label { display: flex; flex-direction: column; gap: 5px; font-size: 0.96875rem; color: var(--muted); }
.field-label select,
.field-label input,
.field-label textarea {
  font: inherit;
  font-size: 1.09375rem;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
}
.checkbox { display: flex; align-items: center; gap: 8px; font-size: 1rem; color: var(--muted); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

.stat-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.stat {
  flex: 1 1 120px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
}
.stat .n { font-size: 1.625rem; font-variant-numeric: tabular-nums; }
.stat .l { color: var(--quiet); }
.insight { border-left: 2px solid var(--accent); padding-left: 10px; margin-bottom: 12px; }
.insight .t { font-size: 1.09375rem; font-weight: 500; }
.insight .d { font-size: 1rem; color: var(--muted); margin-top: 2px; }
.insight .m { color: var(--quiet); margin-top: 4px; }

.estado { font-size: 1rem; line-height: 1.5; margin: 0; }
.estado.error { color: var(--amber); }
.estado.ok { color: var(--accent); }

/* --- Vicky entrando sola a la videollamada --------------------------------- */

.bot {
  border-top: 1px solid var(--line);
  padding: 14px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bot-estado { color: var(--muted); }
.bot-estado[data-escuchando='si'] { color: var(--accent); }
.bot-estado[data-escuchando='espera'] { color: var(--amber); }

#bot-invitar,
#bot-dentro {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bot input[type='url'] {
  font: inherit;
  font-size: 1.09375rem;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  width: 100%;
}

.bot-consentimiento {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.9375rem;
  color: var(--muted);
  line-height: 1.4;
}

.bot-consentimiento input { margin-top: 2px; }
.bot .error { color: var(--amber); font-size: 0.9375rem; margin: 0; }
.separador { border: 0; border-top: 1px solid var(--line); margin: 18px 0 4px; }

/* --- Entrenamiento contra un cliente difícil ------------------------------ */

.practica {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--amber-soft);
  padding: 12px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.practica-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.practica-head .mono { color: var(--amber); }
.practica strong { font-size: 1.1875rem; }
.practica .apagado { color: var(--muted); font-size: 0.9375rem; }
.practica .hint { margin: 6px 0 0; font-size: 0.9375rem; color: var(--muted); }

.nota-cabecera {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 8px;
}
.nota-numero { font-size: 2.75rem; font-weight: 600; line-height: 1; }
.nota-numero[data-bien='si'] { color: var(--accent); }
.nota-numero[data-bien='no'] { color: var(--amber); }
.nota-veredicto { font-size: 1.1875rem; }

.nota-medidas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 12px 0 16px;
}
.nota-medida { display: flex; flex-direction: column; }
.nota-medida span:first-child {
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.nota-medida span:last-child { font-size: 1.3125rem; }

.nota-bloque { margin-bottom: 16px; }
.nota-bloque h3 {
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}
.nota-bloque ul { margin: 0; padding-left: 18px; }
.nota-bloque li { margin-bottom: 4px; }
.nota-cita {
  border-left: 2px solid var(--line-strong);
  padding-left: 12px;
  font-family: 'Montserrat', system-ui, 'Segoe UI', sans-serif;
  font-size: 1.3125rem;
}
.nota-era {
  background: var(--surface-2);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 1rem;
}
.nota-era dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
.nota-era dt { color: var(--muted); }
.nota-era dd { margin: 0; }

/* --- Estado real de la reunión y clima de la conversación ----------------- */

.live[data-estado='espera'] { color: var(--quiet); }
.live[data-estado='espera'] .pulse { background: var(--quiet); animation: none; }
.live[data-estado='cerrada'] { color: var(--muted); }
.live[data-estado='cerrada'] .pulse { background: var(--muted); animation: none; }

.clima {
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
}
.clima[data-clima='informal'] { color: var(--amber); border-color: var(--amber); }
.clima[data-clima='trabajo'] { color: var(--accent); border-color: var(--accent); }
.clima[data-clima='tenso'] {
  color: #ff9b8a;
  border-color: #ff9b8a;
}

#btn-hecha { font-size: 0.9375rem; }

/* ── El ojo de las contraseñas ────────────────────────────────────────────
   ojo.js envuelve cada campo de contraseña en .con-ojo y le cuelga un botón.
   El envoltorio hereda el ancho del campo original (era el hijo directo de
   una columna flex en varias pantallas) y el campo pasa a ocuparlo entero.  */
.con-ojo {
  position: relative;
  display: block;
  width: 100%;
}
.con-ojo > input {
  width: 100%;
  /* Sitio para el botón: sin esto el texto largo pasa por debajo del ojo. */
  padding-right: 42px;
}
.con-ojo .ojo {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--quiet);
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease;
}
.con-ojo .ojo:hover { color: var(--accent); background: rgba(245, 247, 250, 0.06); }
.con-ojo .ojo:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  color: var(--accent);
}
.con-ojo .ojo[aria-pressed='true'] { color: var(--accent); }
.con-ojo .ojo svg { display: block; pointer-events: none; }

/* Chrome pinta de blanco lo que autocompleta y rompe el tema oscuro: la
   pantalla de entrar quedaba con dos cajas blancas. No hay forma de cambiar
   ese fondo, así que se tapa con una sombra interior del color de la caja.
   La transición larguísima es el truco conocido para que Chrome no vuelva a
   pintarlo encima al ganar el foco. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 100px var(--surface-2) inset;
  box-shadow: 0 0 0 100px var(--surface-2) inset;
  caret-color: var(--ink);
  border-color: var(--line);
  transition: background-color 100000s ease-in-out 0s;
}


/* ── La cuenta ─────────────────────────────────────────────────────────────
   Ajustes, Equipo y Salir viven aquí adentro y no en la barra. En la barra
   competían con lo que de verdad se usa en la reunión, y sobre todo aquí se
   pueden mostrar u ocultar según quién eres sin dejar un hueco raro: un
   vendedor abre su nombre y no ve ni las claves ni el equipo. */
.cuenta { position: relative; margin-left: 6px; }

.cuenta-boton {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 12px 5px 5px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
}
.cuenta-boton:hover { background: var(--surface-2); }
.cuenta-nombre { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cuenta-flecha { color: var(--quiet); font-size: 0.75rem; }

.iniciales {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent-fuerte);
  color: #fff;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Un punto en el borde del círculo cuando hay gente esperando entrar. Se ve
   con el menú cerrado, que es cuando hace falta enterarse. */
.cuenta.con-pendientes .iniciales::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--amber);
  border: 2px solid var(--surface);
}
.cuenta.con-pendientes .cuenta-boton { position: relative; }

.menu-cuenta {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  min-width: 258px;
  padding: 7px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.9);
}
.menu-cabecera {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px 11px;
}
.menu-nombre { font-weight: 600; }
.menu-correo,
.menu-rol { font-size: 0.8125rem; color: var(--quiet); }
.menu-rol { color: var(--accent); }

.menu-grupo {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  padding-top: 6px;
  margin-top: 6px;
}
.menu-titulo {
  padding: 6px 12px 4px;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--quiet);
}
.menu-cuenta button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 9px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.menu-cuenta button:hover { background: rgba(245, 247, 250, 0.06); }
.menu-cuenta .menu-salir { color: var(--muted); }
.menu-cuenta .menu-salir:hover { color: var(--ink); }

.menu-cuantos {
  flex: 0 0 auto;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--amber);
  color: #241a08;
  font-size: 0.75rem;
  font-weight: 600;
}

/* En pantalla estrecha la barra se apila; el menú se ancla al borde igual. */
@media (max-width: 720px) {
  .estado { padding-left: 0; border-left: 0; }
  .topbar > .controls { margin-left: 0; }
}


/* La fase en curso, dentro de la tira pegajosa. Al bajar a la ficha, la cinta
   de fases se va de la pantalla y dejabas de saber en qué punto de la
   conversación estabas; esto no ocupa una línea más y no se va nunca. */

/* ── Solo lo que falta ─────────────────────────────────────────────────────
   Treinta y ocho campos repartidos en diez apartados. En mitad de una llamada
   la pregunta no es «qué tengo», es «qué me falta»: esto deja a la vista los
   críticos que siguen sin respuesta y esconde todo lo demás. */
.card-head-fin { display: flex; align-items: center; gap: 12px; }

.filtro {
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.875rem;
  color: var(--muted);
  border-color: var(--line);
}
.filtro:hover { color: var(--ink); }
.filtro[aria-pressed='true'] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* Con el filtro puesto: fuera lo que ya está y fuera lo que no es crítico. */
.ladder.solo-falta .slot:not(.unknown),
.ladder.solo-falta .slot:not(.critico),
.ladder.solo-falta .rung.sin-pendientes { display: none; }

.ladder-vacia {
  padding: 18px 2px;
  color: var(--accent);
}

/* ── La portada ────────────────────────────────────────────────────────────
   Lo primero después de entrar. Antes se caía directo a la pantalla completa
   de reunión —ficha de 38 campos, cinta de fases, panel de transcripción—
   aunque solo vinieras a entrenar diez minutos. Aquí se elige una cosa y el
   resto de la aplicación aparece después. */
.portada {
  display: grid;
  place-items: center;
  padding: 44px 22px 64px;
  min-height: calc(100vh - var(--alto-cabecera) - 108px);
}
.portada-caja { width: 100%; max-width: 720px; }

.portada-saludo {
  margin: 0;
  color: var(--muted);
  font-size: 1.1875rem;
}
.portada-titulo {
  margin: 4px 0 26px;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.portada-retomar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin-bottom: 18px;
  padding: 15px 18px;
  border-radius: 11px;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  text-align: left;
}
.portada-retomar:hover { background: var(--surface-2); }
.portada-retomar-txt { display: flex; flex-direction: column; gap: 2px; }
.portada-retomar strong { font-size: 1.0625rem; }
.portada-retomar span span,
.portada-retomar-txt span { color: var(--muted); font-size: 0.9375rem; }
.portada-flecha { color: var(--accent); font-size: 1.25rem; }

.portada-opciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 620px) { .portada-opciones { grid-template-columns: 1fr; } }

/* El desarrollador tiene tres caminos y el orden importa: primero mirar quién
   está vendiendo, luego los números, y el entrenamiento al final — es lo que
   menos hace. Se reordena con CSS para no duplicar el bloque en el HTML. */
.portada-opciones.de-desarrollador { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .portada-opciones.de-desarrollador { grid-template-columns: 1fr; } }
.portada-opciones.de-desarrollador { grid-template-columns: repeat(2, 1fr); }
.de-desarrollador #portada-supervisar { order: 1; }
.de-desarrollador #portada-estadisticas { order: 2; }

.portada-opcion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 22px 20px 20px;
  border-radius: 13px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.portada-opcion:hover {
  border-color: var(--accent);
  background: var(--surface-2);
  transform: translateY(-2px);
}
.portada-opcion strong { font-size: 1.1875rem; font-weight: 700; }
.portada-opcion > span:last-child {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.portada-icono {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
}

.portada-pie { margin-top: 20px; font-size: 0.9375rem; }


/* ── Cuánto llevas de la ficha ─────────────────────────────────────────────
   El «38 campos por descubrir» de al lado dice lo que falta. Esto dice lo que
   ya tienes, que es lo que tranquiliza en mitad de una llamada. */
.avance { display: inline-flex; align-items: center; gap: 9px; margin-left: auto; }
.avance-barra {
  width: 92px;
  height: 5px;
  border-radius: 3px;
  background: var(--surface-2);
  overflow: hidden;
}
.avance-relleno {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.45s ease;
}
.avance-texto { color: var(--quiet); font-variant-numeric: tabular-nums; }
.card-head { gap: 14px; }

/* ── Mirando como vendedor ─────────────────────────────────────────────────
   Va dentro de la cabecera pegajosa y no se puede ignorar. Lo peor de una
   vista de prestado es quedarse dentro sin darse cuenta y creer que los
   ajustes desaparecieron de verdad. */
.cinta-vendedor {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 8px 22px;
  background: var(--amber-soft);
  /* Encima de todo, hasta del logotipo: no es una fila de la aplicación, es un
     aviso sobre ella. Debajo de la barra se leía como una parte más de Vicky,
     que es justo lo que no podía pasar. */
  border-bottom: 1px solid rgba(232, 163, 61, 0.35);
  color: var(--amber);
  font-size: 0.9375rem;
}
.cinta-vendedor button {
  padding: 4px 12px;
  font-size: 0.875rem;
  border-color: rgba(232, 163, 61, 0.5);
  color: var(--amber);
  background: transparent;
}
.cinta-vendedor button:hover { background: rgba(232, 163, 61, 0.12); }

/* El diálogo de contacto usa el error en rojo del resto de la aplicación. */
.dialog-hint.error { color: var(--amber); }

/* ── Resultados anotados, en Aprendizaje ───────────────────────────────── */
.anotados { margin-top: 26px; }
.anotados h3 { margin: 0 0 4px; font-size: 1.0625rem; }
.anotado {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 0;
  border-top: 1px dashed var(--line);
}
.anotado-quien { display: flex; align-items: baseline; gap: 10px; }
.anotado-quien .mono { font-size: 0.8125rem; }
.anotado-campos { display: flex; flex-wrap: wrap; gap: 12px; }
.anotado-campos label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.875rem;
  color: var(--muted);
}
.anotado-campos input,
.anotado-campos select {
  font: inherit;
  font-size: 0.9375rem;
  padding: 6px 9px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
}
.anotado-campos .an-monto { width: 120px; }
.anotado-campos .an-objecion { width: 200px; }
.anotado-acciones { display: flex; gap: 8px; }
.anotado-acciones .an-quitar { color: var(--amber); border-color: rgba(232, 163, 61, 0.4); }
.anotado-acciones .an-quitar:hover { background: var(--amber-soft); }

/* Borrar de verdad se ve distinto a corregir: es lo único de esta pantalla
   que no se puede deshacer. */
.peligro { color: #ff8f8f; border-color: rgba(255, 143, 143, 0.42); }
.peligro:hover { background: rgba(255, 143, 143, 0.12); border-color: rgba(255, 143, 143, 0.7); }

/* ── Patrones / Datos ──────────────────────────────────────────────────────
   Lo que Vicky dedujo y los datos de los que lo dedujo son dos cosas, y una
   se toca y la otra no. Separarlas en pestañas evita el panel infinito. */
.pestanas {
  display: flex;
  gap: 4px;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--line);
}
.pestana {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 9px 14px;
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
}
.pestana:hover { color: var(--ink); }
.pestana.activa { color: var(--ink); border-bottom-color: var(--accent); }
.pestana-cuantos {
  margin-left: 6px;
  font-size: 0.75rem;
  color: var(--amber);
}

.datos-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 14px 0 16px;
}
.datos-filtro { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }
.datos-filtros input[type='search'],
.datos-filtros input[type='text'],
.datos-filtros select {
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  padding: 8px 10px;
  font: inherit;
}
.datos-filtros input[type='search'] { min-width: 220px; }
.datos-filtros select { max-width: 380px; }

/* Una reunión sin resultado no es un error, pero sí lo que hay que mirar
   primero: se marca por el borde en vez de con un aviso más. */
.anotado.sin-anotar { border-left: 3px solid var(--amber); }
.etiqueta {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
}
#datos-lista { max-height: 46vh; overflow-y: auto; }
.anotado-campos .an-nombre { width: 190px; }
.anotado-campos .an-correo { width: 210px; }
.anotado-campos .an-celular { width: 150px; }

/* ── Portada: las tarjetas del desarrollador ─────────────────────────────── */
.portada-badge.apagada { color: var(--quiet); border-color: var(--line); }
.portada-badge {
  margin-top: 8px;
  display: inline-block;
  align-self: flex-start;
  font-size: 0.75rem;
  color: var(--accent);
  border: 1px solid rgba(99, 166, 240, 0.5);
  border-radius: 999px;
  padding: 2px 10px;
}

/* ── Modo espejo ───────────────────────────────────────────────────────────
   El supervisor entra a la reunión disfrazado de Vicky: ve lo mismo que el
   vendedor y no puede tocar nada. La cinta va arriba del todo y en azul, no
   en ámbar, para no confundirse con la vista previa: son dos cosas distintas
   y estar en la equivocada tiene consecuencias distintas. */
.cinta-mirar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 8px 22px;
  background: var(--accent-soft);
  border-bottom: 1px solid rgba(99, 166, 240, 0.4);
  color: var(--accent);
  font-size: 0.9375rem;
}
.cinta-mirar button {
  padding: 4px 12px;
  font-size: 0.875rem;
  border-color: rgba(99, 166, 240, 0.55);
  color: var(--accent);
  background: transparent;
}

/* Lo que actúa sobre la reunión se apaga a la vista además de desactivarse:
   un botón encendido que no responde se lee como una aplicación rota. */
body.mirando .composer,
body.mirando .bot,
body.mirando #vote { opacity: 0.4; pointer-events: none; }
body.mirando #btn-finish,
body.mirando #btn-new,
body.mirando #btn-nota { display: none; }

/* ── La alarma de cerrar ───────────────────────────────────────────────────
   No es un número: es el permiso para pedir la decisión. Apagada dice qué
   falta, porque un vendedor tiene derecho a decidir en contra sabiendo por
   qué. */
.alarma {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.alarma-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.alarma-luz {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--line-strong);
  border: 1px solid var(--line);
}
.alarma-titular { margin: 2px 0 0; font-weight: 600; color: var(--quiet); }
.alarma-avance { font-size: 0.75rem; }
.alarma-faltan { margin: 6px 0 0; padding-left: 17px; display: flex; flex-direction: column; gap: 5px; }
.alarma-faltan li { font-size: 0.8125rem; color: var(--muted); }

.alarma[data-listo='si'] {
  border-color: rgba(75, 208, 127, 0.6);
  background: rgba(75, 208, 127, 0.07);
}
.alarma[data-listo='si'] .alarma-luz {
  background: #4bd07f;
  box-shadow: 0 0 12px rgba(75, 208, 127, 0.95);
  animation: latido 0.7s ease-in-out infinite;
}
.alarma[data-listo='si'] .alarma-titular {
  color: #4bd07f;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.alarma[data-listo='si'] .alarma-faltan li { color: var(--ink); }

/* ── Lo que no puede faltar ────────────────────────────────────────────────
   Once datos que sostienen toda la venta. Antes había que ir a buscarlos
   bajando por una ficha de 38 campos, en mitad de una llamada. */
.ficha-viva {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 0 22px;
  max-width: 1500px;
  margin: 12px auto 0;
}
@media (max-width: 1080px) { .ficha-viva { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .ficha-viva { grid-template-columns: 1fr; } }

.fv-grupo {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
}
.fv-titulo { color: var(--quiet); font-size: 0.6875rem; letter-spacing: 0.08em; }
.fv-dato { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fv-etiqueta { color: var(--muted); font-size: 0.8125rem; }
.fv-dato strong {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Lo que falta se ve tan claro como lo que hay: es la lista de lo que queda
   por preguntar. */
.fv-dato.falta strong { color: var(--quiet); font-weight: 400; font-style: italic; }

/* Lo que Vicky dedujo del final, dentro del registro del resultado. */
.dedujo {
  border: 1px solid rgba(99, 166, 240, 0.35);
  background: var(--accent-soft);
  border-radius: 10px;
  padding: 10px 13px;
  margin-bottom: 14px;
}
.dedujo .mono { color: var(--accent); font-size: 0.6875rem; letter-spacing: 0.08em; }
.dedujo ul { margin: 6px 0 4px; padding-left: 17px; display: flex; flex-direction: column; gap: 4px; }
.dedujo li { font-size: 0.875rem; }
.dedujo .dialog-hint { margin: 0; font-size: 0.8125rem; }


/* ══════════════════════════════════════════════════════════════════════════
   EL NUEVO ORDEN DE LA PANTALLA EN VIVO

   El problema no era que faltara información: era que toda cabía a la vez y
   ninguna se leía. El chat quedaba en una rendija, la pregunta que Vicky
   propone competía con cinco cajas más, y cómo resolver una objeción vivía
   dentro del semáforo, en letra de 13px y con scroll propio.

   El vendedor está delante de una cámara. No puede ponerse a buscar. Así que
   la pantalla se ordena por lo que mira, en el orden en que lo mira:

     fila 1   chat · cuatro indicadores · lo que no puede faltar · cerrar
     fila 2   lo que Vicky propone decir ahora, en grande y pegado arriba
     fila 3   la ficha de descubrimiento, entera y legible

   Todo lo de esta sección son ajustes sobre las reglas de más arriba: si algo
   sale mal, se borra este bloque y VickyDroid vuelve exactamente a como estaba.
   ══════════════════════════════════════════════════════════════════════════ */

.stage-grid {
  grid-template-columns:
    minmax(320px, 400px)   /* el chat */
    minmax(300px, 1fr)     /* los indicadores, y debajo la alarma */
    minmax(255px, 340px);  /* lo que no puede faltar */
  /* Lo que Vicky propone decir va arriba del todo y a lo ancho: es lo único
     que el vendedor lee de reojo mientras habla, así que no puede estar por
     debajo de nada. Los indicadores van justo debajo, que es donde se miran
     de reojo, y el chat ocupa las tres filas enteras a la izquierda.

     La alarma de cerrar va DEBAJO de los cuatro indicadores y con su mismo
     ancho, no al lado: no es un quinto indicador, es la conclusión de los
     otros cuatro, y de costado se leía como uno más de la fila. */
  grid-template-areas:
    'chat jugada  jugada'
    'chat tablero fichas'
    'chat cerrar  fichas';
  gap: 16px;
  max-width: 1680px;
  padding-top: 16px;
}
.stage-grid > .rail { grid-area: chat; }
.stage-grid > .tablero { grid-area: tablero; }
.stage-grid > .ficha-viva { grid-area: fichas; }
.stage-grid > .alarma { grid-area: cerrar; }
/* El copiloto deja de ser una caja: sus hijos entran directos en la rejilla,
   y así lo que Vicky propone puede ir al lado del chat mientras la ficha de
   descubrimiento se queda con el ancho entero, más abajo. */
.copilot { display: contents; }
/* Ojo: el selector va por el DOM, no por la rejilla. #ask sigue siendo hijo
   de .copilot aunque display:contents lo suba a la rejilla. */
.copilot > #ask { grid-area: jugada; }
/* Todo lo que viene después de la jugada ocupa la pantalla de lado a lado y
   se va apilando: la brecha, el resumen y la ficha de descubrimiento. */
.copilot > .card { grid-column: 1 / -1; }

/* Cuatro cajas del mismo porte en dos filas de dos. El semáforo era antes el
   doble de ancho que los velocímetros y desequilibraba la fila entera. */
.stage-grid > .tablero {
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 10px;
  padding: 0;
  margin: 0;
  max-width: none;
}
.stage-grid > .ficha-viva,
.stage-grid > .alarma {
  padding: 0;
  margin: 0;
  max-width: none;
}
.stage-grid > .alarma { padding: 14px 16px; align-self: start; }

/* El semáforo, del porte de un velocímetro. Lo que decía dentro —cómo aclarar
   la objeción— se fue a la jugada; aquí queda lo único que se mira de reojo:
   qué luz está encendida y cuántas hay. */
.stage-grid > .tablero .semaforo {
  align-items: center;
  text-align: center;
  padding: 12px 10px 11px;
  gap: 3px;
}
.stage-grid > .tablero .semaforo-cabeza {
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.stage-grid > .tablero .semaforo-luces { gap: 7px; }
.stage-grid > .tablero .luz { width: 14px; height: 14px; }
.stage-grid > .tablero .semaforo-titular {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.15;
  margin-top: 4px;
}
.stage-grid > .tablero .semaforo-detalle { font-size: 0.8125rem; }

/* ── Lo que no puede faltar, plegado ──────────────────────────────────────
   Cuatro títulos. El vendedor abre el que necesita y lo deja abierto: el
   navegador se acuerda mientras dure la reunión porque el <details> es suyo,
   no un estado que haya que repintar. */
/* Los cuatro grupos, del mismo porte y a la misma distancia. Se reparten
   entre ellos la altura de la columna, así que quedan simétricos por
   construcción y no por un número escrito a mano que se descuadra en cuanto
   uno de los textos crece. */
.ficha-viva {
  display: grid;
  /* Una sola columna: la regla de más arriba los ponía en cuatro, que era lo
     que tenía sentido cuando esto era una tira a lo ancho de la pantalla. */
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, minmax(min-content, 1fr));
  gap: 12px;
  align-self: stretch;
  /* Altura cero más alto mínimo del 100%: el truco de rejilla para que esta
     columna NO decida el alto de las filas. Sin él, abrir un grupo estiraba
     la fila y empujaba la alarma de cerrar hacia abajo, dejando un hueco
     negro debajo de los indicadores. */
  height: 0;
  min-height: 100%;
  overflow: hidden;
}
/* La cabecera manda el porte del rectángulo cerrado. Si al abrirlo el
   contenido no cabe, se desplaza por dentro en vez de estirar la columna
   entera y descuadrar a los otros tres. */
.ficha-viva .fv-cabeza { min-height: 48px; }
.ficha-viva .fv-cuerpo { overflow-y: auto; }
.ficha-viva .fv-grupo { padding: 0; gap: 0; overflow: hidden; }
.fv-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}
.fv-cabeza::-webkit-details-marker { display: none; }
.fv-cabeza:hover { background: var(--surface-2); }
.fv-grupo[open] .fv-cabeza { border-bottom: 1px solid var(--line); }
.fv-cabeza .fv-titulo { font-size: 0.6875rem; }
.fv-marca { display: flex; align-items: center; gap: 8px; }
/* Cuántos datos de este grupo faltan. Es la única razón para abrirlo. */
.fv-cuantos {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--quiet);
}
.fv-cuantos[data-faltan='si'] { color: var(--amber); border-color: rgba(232, 163, 61, 0.45); }
.fv-flecha { color: var(--quiet); font-size: 0.75rem; transition: transform 0.15s ease; }
.fv-grupo[open] .fv-flecha { transform: rotate(180deg); }
.fv-cuerpo { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px 12px; }

/* ── Lo que Vicky propone decir ahora ─────────────────────────────────────
   Es lo único que el vendedor va a leer de reojo mientras habla, así que es
   lo más grande de la pantalla y va pegado arriba: sigue ahí cuando baja a
   mirar la ficha. */
.copilot { gap: 16px; }
.ask { padding: 22px 26px 20px; }
.ask .question { font-size: clamp(26px, 2.9vw, 40px); line-height: 1.22; }
.ask .because { font-size: 1.0625rem; }
.alt .q { font-size: 1.3125rem; }

/* Cómo se aclara la objeción, con las palabras del método. Aquí, en grande y
   al lado de las demás propuestas — no escondido dentro de un indicador. */
.obj-plan {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.obj-plan .obj { border-top: none; padding-top: 0; }
.obj-plan .obj strong {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 1.1875rem;
  color: var(--amber);
}
.obj-plan .obj-senal, .obj-plan .obj-objetivo { font-size: 1rem; }
.obj-plan .obj-pasos { gap: 10px; }
.obj-plan .obj-pasos li { font-size: 1.0625rem; }
.obj-plan .obj-paso { font-size: 1rem; }
.obj-plan .obj-frase {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 1.1875rem;
  line-height: 1.4;
  color: var(--ink);
  margin-top: 4px;
}

/* ── La ficha de descubrimiento, en tamaño de leerse ──────────────────────
   Treinta y ocho campos que hasta ahora ocupaban una columna estrecha al
   final de la página. Ahora tiene el ancho entero y la letra del resto de la
   aplicación: los apartados siguen plegándose, que es lo que la hace usable. */
.copilot > .card .ladder { padding: 8px 20px 22px; }
.copilot > .card .rung-label .name { font-size: 1.1875rem; }
.copilot > .card .rung-label .tally { font-size: 1rem; }
.copilot > .card .slot .label { font-size: 1.09375rem; }
.copilot > .card .slot .value { font-size: 1.09375rem; }
.copilot > .card .slots { gap: 10px; }
/* Con el ancho entero caben dos columnas de campos: la ficha se ve de una
   sola pantalla en vez de dos. */
@media (min-width: 1200px) {
  .copilot > .card .slots { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
}

/* El logotipo ahora es un botón, y un botón trae fondo, borde y padding que
   aquí sobran: es el mismo lockup de antes, pero se puede pulsar. */
button.identity {
  border: 0;
  background: transparent;
  padding: 0;
  border-radius: 9px;
  cursor: pointer;
}
button.identity:hover { background: transparent; opacity: 0.85; }
button.identity h1 { font-size: 1.625rem; }

/* ── Cómo se reordena cuando la pantalla no da ────────────────────────────
   Primero se va la columna de cerrar debajo de los indicadores; después todo
   en una sola columna, con el chat siempre primero. */
@media (max-width: 1180px) {
  .stage-grid {
    grid-template-columns: minmax(290px, 1fr) minmax(240px, 320px);
    grid-template-areas:
      'jugada jugada'
      'chat tablero'
      'chat cerrar'
      'fichas fichas';
  }
  /* En dos columnas los cuatro grupos se ponen en fila de dos: siguen del
     mismo porte, pero a lo ancho, que es donde queda sitio. */
  .stage-grid > .ficha-viva {
    grid-template-rows: none;
    grid-template-columns: repeat(2, 1fr);
    align-self: start;
  }
}

@media (max-width: 760px) {
  .stage-grid {
    grid-template-columns: 1fr;
    grid-template-areas: 'jugada' 'chat' 'tablero' 'cerrar' 'fichas';
  }
  .stage-grid > .ficha-viva { grid-template-columns: 1fr; }
}


/* Las reglas viejas del tablero lo volvían de tres columnas en cuanto la
   pantalla se estrechaba, y metían el semáforo a lo ancho de dos. Con cuatro
   indicadores del mismo porte eso ya no vale: LAS DOS FILAS DE DOS AGUANTAN
   hasta el móvil, que es donde se leen igual de bien. */
@media (max-width: 1280px) {
  .stage-grid > .tablero { grid-template-columns: 1fr 1fr; }
  .stage-grid > .tablero .semaforo { grid-column: auto; }
}
@media (max-width: 860px) {
  .stage-grid > .tablero { grid-template-columns: 1fr 1fr; }
  .stage-grid > .tablero .semaforo { grid-column: auto; }
}
@media (max-width: 620px) {
  .stage-grid > .tablero { grid-template-columns: 1fr 1fr; }
  .stage-grid > .tablero .semaforo { grid-column: auto; }
}


/* Nada pegado en esta pantalla.

   El chat y la jugada se quedaban clavados arriba al bajar, y la ficha de
   descubrimiento se metía por debajo de los dos: el formulario desaparecía a
   media línea y parecía roto. Lo pegajoso tapa lo que pasa por detrás, y aquí
   lo que pasa por detrás es justo lo que hay que leer. */
.stage-grid > .rail,
.copilot > #ask { position: static; }

/* El chat se estira hasta donde llega la columna de al lado.
   Antes se quedaba con su alto natural y dejaba un hueco negro debajo, justo
   en la caja que más crece durante la reunión. La conversación se queda con
   todo el sobrante y se desplaza por dentro; lo que va debajo de ella —el
   panel de Vicky, lo que escribes y la munición— mantiene su sitio. */
.stage-grid > .rail {
  align-self: stretch;
  min-height: 0;
}
.stage-grid > .rail .transcript {
  flex: 1 1 auto;
  min-height: 140px;
  max-height: none;
}


/* ── Lo que no se puede dejar en blanco ───────────────────────────────────
   Antes el diálogo se veía todo opcional y solo al pulsar «Empezar» soltaba
   un aviso, de uno en uno: arreglabas el correo y entonces te decía que
   faltaba el link. Con el prospecto esperando al otro lado, eso son dos
   viajes de más. Ahora se marca antes y se avisa todo junto. */
/* El campo es una columna flex: dentro, la etiqueta se lleva su línea. La
   marca se saca del flujo y se ancla arriba a la derecha, que es donde se
   busca y donde no empuja nada. */
.field-label { position: relative; }
.obligatorio {
  position: absolute;
  top: 1px;
  right: 0;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--amber);
  border: 1px solid rgba(232, 163, 61, 0.4);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 7px;
  vertical-align: 1px;
}
.obligatorio.uno-u-otro { color: var(--quiet); border-color: var(--line); }

/* Cada cosa que falta, en su línea: una lista se cuenta de un vistazo, un
   párrafo hay que leerlo entero. */
.dialog-hint.error strong { display: block; margin-bottom: 6px; }
.falta-linea { display: block; padding-left: 14px; text-indent: -14px; }
.falta-linea::before { content: '· '; }


/* La cuenta atrás del entrenamiento. Grande y en el centro: es lo único que
   hay que mirar durante esos tres segundos. */
.cuenta-atras {
  margin: 10px 0 2px;
  text-align: center;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 3.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}


/* ── La antesala del entrenamiento ────────────────────────────────────────
   Va en el mismo bloque ámbar donde después sale el cliente, y a propósito:
   así el vendedor reconoce el sitio. Lo único que cambia es que aquí hay un
   botón y allí habrá un perfil. */
.practica.preparado { gap: 5px; }
.practica.preparado strong { font-size: 1.1875rem; }
.practica.preparado > .apagado {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.practica .entreno-arranque {
  margin-top: 13px;
  align-self: stretch;
  padding: 11px 16px;
  font-size: 1.09375rem;
  font-weight: 600;
}
.practica-head #entreno-volver {
  padding: 3px 11px;
  font-size: 0.875rem;
  border-color: rgba(232, 163, 61, 0.45);
  color: var(--amber);
  background: transparent;
}
.practica-head #entreno-volver:hover { background: rgba(232, 163, 61, 0.12); }

/* En una columna de 340px el número de la cuenta atrás no necesita ser tan
   grande como en un diálogo centrado. */
.practica .cuenta-atras { margin: 13px 0 0; font-size: 3rem; color: var(--amber); }

/* Mientras se espera a empezar, lo que escribe se ve apagado en vez de
   desaparecer: un cuadro de texto que se va y vuelve mueve la pantalla entera
   justo cuando el vendedor la está mirando. */
#text:disabled { opacity: 0.5; cursor: not-allowed; }


/* ── La objeción que no se muere ──────────────────────────────────────────
   Vicky proponía la misma salida una y otra vez. Ahora sube un peldaño cada
   vez que el prospecto la vuelve a decir, y aquí se ve cuál toca: el resto de
   los pasos siguen a la vista —hacen falta para entender por qué se sube—
   pero apagados. */
.obj-insiste {
  margin: 6px 0 2px;
  padding: 8px 11px;
  border-radius: 8px;
  background: var(--amber-soft);
  border: 1px solid rgba(232, 163, 61, 0.45);
  color: var(--amber);
  font-size: 1rem;
  line-height: 1.4;
}
.obj-pasos li { opacity: 0.5; transition: opacity 0.15s ease; }
/* Sin ningún paso marcado (la objeción acaba de aparecer) se leen todos por
   igual: apagar la lista entera sería esconderla. */
.obj-pasos:not(:has(.obj-ahora)) li { opacity: 1; }
.obj-pasos li.obj-ahora {
  opacity: 1;
  position: relative;
  padding-left: 12px;
  margin-left: -12px;
}
.obj-pasos li.obj-ahora::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 3px;
  background: var(--amber);
}


/* ── Cuando Vicky propone afirmar, no preguntar ───────────────────────────
   Una pregunta y una afirmación no se dicen igual, así que no pueden verse
   igual: el borde cambia de color y el rótulo dice «Dile esto» en vez de
   «Pregunta ahora». Sin eso, el vendedor lee una frase afirmativa con
   entonación de pregunta y suena a que duda de lo que vende. */
.ask.comentario { border-left-color: #4bd07f; }
.ask.comentario .eyebrow { color: #4bd07f; }

.alt-tipo {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 7px;
  border-radius: 4px;
  border: 1px solid rgba(75, 208, 127, 0.5);
  color: #4bd07f;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  vertical-align: 2px;
}


/* ══════════════════════════════════════════════════════════════════════════
   EL ORDEN DEFINITIVO

   Arriba, cruzando la pantalla, la fila de instrumentos: los cuatro
   indicadores y, cerrando a la derecha, la alarma de venta —la única que
   cambia de porte, porque ya no es una tarjeta con dos palabras sino la lista
   de lo que falta para poder pedir la decisión.

   Debajo, la reunión: el chat a la izquierda de arriba abajo, y a su derecha
   lo que Vicky propone decir. Bajo la propuesta, los cuatro datos que el
   vendedor tiene que saberse de memoria, en fila.

   Nada más cambia de tamaño: esto solo mueve las piezas de sitio.
   ══════════════════════════════════════════════════════════════════════════ */

.stage-grid {
  grid-template-columns:
    minmax(300px, 380px)   /* el chat */
    minmax(0, 1fr)
    minmax(0, 1fr)
    minmax(0, 1fr)
    minmax(250px, 330px);  /* cerrar */
  grid-template-areas:
    'tablero tablero tablero tablero cerrar'
    'chat    jugada  jugada  jugada  jugada'
    'chat    fichas  fichas  fichas  fichas';
}

/* Los cuatro instrumentos en una sola fila: es una tira de tablero, y un
   tablero se lee de un vistazo horizontal, no en cuadrícula.

   Y se estiran hasta la altura de la alarma, que es la caja alta de la fila.
   Sin esto quedaba un palmo de negro debajo de los instrumentos y la tira se
   leía como si le faltara algo. */
.stage-grid > .tablero {
  grid-template-columns: repeat(4, 1fr);
  align-self: stretch;
  align-items: stretch;
}
.stage-grid > .tablero > * { justify-content: center; }

/* La alarma toma toda la altura de la fila. Es lo único que cambia de porte:
   con las condiciones dentro necesita sitio, y de paso cierra la tira. */
.stage-grid > .alarma { align-self: stretch; }

/* Los cuatro datos del prospecto, en fila y debajo de la propuesta. Se les
   quita el truco de altura que hacía falta cuando eran una columna. */
.stage-grid > .ficha-viva {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: none;
  align-self: start;
  height: auto;
  min-height: 0;
  overflow: visible;
}

/* ── Cuando no da el ancho ─────────────────────────────────────────────── */
/* La pantalla del vendedor es de 1280: a ese ancho todavía entran los cuatro
   instrumentos en fila. Se parte en dos filas sólo más abajo. */
@media (max-width: 1140px) {
  .stage-grid {
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr) minmax(230px, 300px);
    grid-template-areas:
      'tablero tablero cerrar'
      'chat    jugada  jugada'
      'chat    fichas  fichas';
  }
  .stage-grid > .tablero { grid-template-columns: 1fr 1fr; }
  .stage-grid > .ficha-viva { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .stage-grid {
    grid-template-columns: 1fr;
    grid-template-areas: 'tablero' 'cerrar' 'jugada' 'chat' 'fichas';
  }
  .stage-grid > .tablero { grid-template-columns: 1fr 1fr; }
  .stage-grid > .ficha-viva { grid-template-columns: 1fr 1fr; }
  .stage-grid > .alarma { align-self: start; }
}

/* ── Vicky está pensando ───────────────────────────────────────────────────
   El turno se guarda y se pinta al instante; el análisis llega detrás. En ese
   hueco, lo que se lee abajo sigue siendo la propuesta del turno anterior, y
   eso hay que decirlo: una propuesta vieja leída como nueva es peor que no
   tener ninguna. */
.pensando {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--quiet);
  font-size: 0.6875rem;
}
.pensando-punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .pensando-punto { animation: none; }
}
/* La propuesta se apaga un punto mientras se recalcula: sigue ahí para poder
   usarla, pero se ve que no es la última palabra. */
.ask.esperando .question,
.ask.esperando .because,
.ask.esperando .alts { opacity: 0.6; transition: opacity 0.2s ease; }


/* ── El cronómetro de la llamada ──────────────────────────────────────────
   Va pegado al punto de estado porque es el mismo dato partido en dos: qué
   está pasando y desde cuándo. Con cifras de ancho fijo, para que no baile al
   pasar de 09 a 10. */
.cronometro {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
}

/* ── Los cuatro datos del prospecto, ya sin plegar ────────────────────────
   Tienen una fila entera para ellos, así que se quedan abiertos: la flecha
   sobra y el título deja de ser un botón. */
.ficha-viva .fv-flecha { display: none; }
.ficha-viva .fv-cabeza { cursor: default; }
.ficha-viva .fv-cabeza:hover { background: transparent; }

/* Cuando ya respondió, el mismo hueco dice cuánto tardó. En verde: es una
   buena noticia, no un aviso. */
.pensando.ya-esta { color: #4bd07f; }