/* demo.css — hoja del widget de la centralita de demostración (`/demo` y
 * `/embed/demo`).
 *
 * POR QUÉ NO ES TAILWIND. El widget se sirve TAMBIÉN dentro de un <iframe> en webs
 * ajenas, donde no hay layout del panel ni `tailwind.css`, y añadir una clase nueva
 * a una plantilla obliga a regenerar el bundle (Tailwind v4 purga: la clase que no
 * existía al generarlo no tiene regla y la maquetación se rompe en silencio). Esta
 * hoja es autosuficiente y con un prefijo propio (`dm-`) para no chocar con los
 * estilos de la web que la empotre.
 *
 * Variables al principio: el tema oscuro/claro se resuelve con `prefers-color-scheme`
 * y no con una clase del panel, porque dentro de un iframe ajeno no hay panel. */

/* La identidad es la de la PORTADA, no la de un panel genérico: sus dos familias (Fraunces para
 * nombres, titulares y cifras; Schibsted para el texto) y su paleta — tiza sobre casi negro,
 * lavanda de acento y cian para lo que está pasando AHORA. Antes el widget era la estética por
 * defecto de cualquier panel (fondo negro, tarjetas redondeadas, azul de acento, letra de
 * sistema) y dentro de la portada se notaba pegado. Las fuentes son las mismas que sirve la web
 * (`/static/fonts`), así que dentro del iframe no hay descarga nueva. [audit demo-identidad] */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("/static/fonts/fraunces.woff2?v=r1") format("woff2"); }
@font-face { font-family: "Schibsted"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/static/fonts/schibsted.woff2?v=r1") format("woff2"); }

.dm {
  --dm-bg: #f6f5f1;
  --dm-bg-soft: #eeede7;
  --dm-bg-raise: #ffffff;
  --dm-border: rgba(20, 20, 28, 0.1);
  --dm-text: #15151c;
  --dm-muted: #63636f;
  --dm-accent: #5b61e6;
  --dm-accent-soft: rgba(91, 97, 230, 0.1);
  --dm-live: #0e9aa0;
  --dm-ok: #12805c;
  --dm-ok-soft: rgba(18, 128, 92, 0.1);
  --dm-warn: #b0700a;
  --dm-danger: #c8402f;
  --dm-shadow: 0 1px 0 rgba(20, 20, 28, 0.04), 0 18px 40px -24px rgba(20, 20, 28, 0.25);
  --dm-radius: 10px;
  --dm-disp: "Fraunces", Georgia, serif;
  --dm-sans: "Schibsted", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dm-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  color: var(--dm-text);
  background: var(--dm-bg);
  font-family: var(--dm-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* El tema lo decide el SISTEMA de quien mira… salvo cuando la página que empotra el
 * widget ya tiene un tema propio y un panel blanco dentro de una web oscura se ve como un
 * agujero. Para eso `/embed/demo?theme=dark|light` pone `dm-dark`/`dm-light` en el
 * contenedor, y esa clase manda sobre el sistema. La paleta oscura está escrita dos veces
 * a propósito: CSS no sabe compartir un bloque de declaraciones entre dos selectores que no
 * pueden ir en la misma lista (uno vive dentro de una media query y el otro no). Si tocas
 * una, toca la otra — lo vigila `las_dos_paletas_oscuras_dicen_lo_mismo`. */

@media (prefers-color-scheme: dark) {
  .dm:not(.dm-light) {
    --dm-bg: #0a0a0c;
    --dm-bg-soft: #0f0f14;
    --dm-bg-raise: #15151c;
    --dm-border: rgba(255, 255, 255, 0.085);
    --dm-text: #ecebe6;
    --dm-muted: #9c9ca8;
    --dm-accent: #8c92ff;
    --dm-accent-soft: rgba(140, 146, 255, 0.12);
    --dm-live: #57e2e5;
    --dm-ok: #5ad19a;
    --dm-ok-soft: rgba(90, 209, 154, 0.12);
    --dm-warn: #e8b35a;
    --dm-danger: #f07563;
    --dm-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 40px 80px -40px #000;
  }
}

.dm.dm-dark {
  --dm-bg: #0a0a0c;
  --dm-bg-soft: #0f0f14;
  --dm-bg-raise: #15151c;
  --dm-border: rgba(255, 255, 255, 0.085);
  --dm-text: #ecebe6;
  --dm-muted: #9c9ca8;
  --dm-accent: #8c92ff;
  --dm-accent-soft: rgba(140, 146, 255, 0.12);
  --dm-live: #57e2e5;
  --dm-ok: #5ad19a;
  --dm-ok-soft: rgba(90, 209, 154, 0.12);
  --dm-warn: #e8b35a;
  --dm-danger: #f07563;
  --dm-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 40px 80px -40px #000;
}

.dm *,
.dm *::before,
.dm *::after { box-sizing: border-box; }

/* `hidden` tiene que GANAR. Las reglas `display:flex` de `.dm-gate` y `.dm-player` le pasaban
 * por encima, así que el JS ocultaba y nada se ocultaba: antes de llamar salían a la vez el
 * aviso con su «Llamar», el reproductor con otro «Llamar» y «Colgar», el aviso de guion y el
 * teclado desactivado — y al aceptar, el aviso se quedaba puesto. [audit demo-hidden-pisado] */
.dm [hidden] { display: none !important; }

.dm h1, .dm h2, .dm h3 { margin: 0; font-family: var(--dm-disp); font-weight: 520; letter-spacing: -0.01em; }
.dm p { margin: 0; }
.dm button { font: inherit; color: inherit; }

/* ─── Cabecera de la página (no aparece en el iframe) ─── */

.dm-page { max-width: 1180px; margin: 0 auto; padding: 40px 20px 64px; }
.dm-head { text-align: center; margin-bottom: 28px; }
.dm-head h1 { font-size: 30px; margin-bottom: 10px; }
.dm-head p { color: var(--dm-muted); max-width: 62ch; margin: 0 auto; }
.dm-back {
  display: inline-block; margin-bottom: 22px; color: var(--dm-muted);
  text-decoration: none; font-size: 13px;
}
.dm-back:hover { color: var(--dm-text); }

/* ─── Rejilla de escenarios ─── */

/* Cinco centralitas, cinco columnas: con `auto-fit` salían cuatro y una huérfana debajo. En
 * pantallas estrechas, una FILA deslizable en vez de apilarlas: apiladas ocupaban una pantalla
 * entera de móvil antes de llegar al teléfono. */
/* Las cinco centralitas son un SELECTOR, no cinco tarjetas: una fila de pestañas sobre una
 * línea, con el código de mercado y la empresa, y la elegida subrayada en lavanda. En pantalla
 * estrecha la fila se desliza. */
.dm-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
  margin-bottom: 16px; border-bottom: 1px solid var(--dm-border);
}
@media (max-width: 900px) {
  .dm-grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(150px, 42%);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .dm-grid::-webkit-scrollbar { display: none; }
  .dm-grid .dm-card { scroll-snap-align: start; }
}
.dm-card {
  position: relative; display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 10px 14px 12px; cursor: pointer; background: transparent; border: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--dm-muted);
  transition: color .15s, border-color .15s;
}
.dm-card:hover { color: var(--dm-text); }
.dm-card[aria-pressed="true"] { color: var(--dm-text); border-bottom-color: var(--dm-accent); }
.dm-card:focus-visible { outline: 2px solid var(--dm-accent); outline-offset: -2px; }
.dm-card-top { display: flex; align-items: center; gap: 8px; }
.dm-card-code {
  font-family: var(--dm-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--dm-muted);
}
.dm-card[aria-pressed="true"] .dm-card-code { color: var(--dm-accent); }
.dm-card-top .dm-tag { margin-left: auto; align-self: center; }
.dm-card-name { font-family: var(--dm-disp); font-weight: 520; font-size: 16px; line-height: 1.2; letter-spacing: -0.005em; }
.dm-card-meta { font-size: 10px; line-height: 1.35; text-transform: uppercase; letter-spacing: .06em; }
.dm-card-desc { color: var(--dm-muted); font-size: 13px; }
.dm-tag {
  align-self: flex-start; font-size: 10px; font-weight: 700; letter-spacing: .05em;
  padding: 2px 7px; border-radius: 999px; text-transform: uppercase;
  background: var(--dm-bg-soft); color: var(--dm-muted); border: 1px solid var(--dm-border);
}

/* ─── El widget: teléfono + flujo en vivo ─── */

.dm-widget {
  display: grid; gap: 16px; align-items: start;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
}
@media (max-width: 820px) {
  .dm-widget { grid-template-columns: 1fr; }
  .dm-flow { max-height: 340px; }
  .dm-block[data-level="1"] { margin-left: 8px; }
  .dm-block[data-level="2"] { margin-left: 16px; }
  .dm-block[data-level="3"] { margin-left: 24px; }
  .dm-block[data-level="4"] { margin-left: 32px; }
  .dm-explore { display: none; }
  .dm-optkey { font-size: 11.5px; padding: 3px 8px; }
}

.dm-panel {
  background: var(--dm-bg-raise); border: 1px solid var(--dm-border);
  border-radius: var(--dm-radius); padding: 18px; box-shadow: var(--dm-shadow);
}

/* Teléfono */
.dm-phone { display: flex; flex-direction: column; gap: 14px; }
.dm-phone-top { display: flex; align-items: center; gap: 12px; }
.dm-phone-avatar {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  font-family: var(--dm-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em;
  border-radius: 50%; border: 1px solid var(--dm-accent); color: var(--dm-accent);
}
.dm-phone-who { min-width: 0; }
.dm-phone-name {
  font-family: var(--dm-disp); font-weight: 520; font-size: 20px; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dm-phone-number { color: var(--dm-muted); font-family: var(--dm-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
/* Idioma de la LLAMADA: el visitante tiene que saber en qué va a oírla antes de darle al
 * play, porque no es necesariamente el suyo — cada mercado tiene su llamada en su idioma. */
.dm-phone-lang { font-size: 11px; color: var(--dm-muted); margin-top: 2px; }

.dm-state {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  padding: 9px 12px; border-radius: 10px; background: var(--dm-bg-soft);
  color: var(--dm-muted);
}
.dm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dm-muted); flex: none; }
.dm-state[data-state="live"] { color: var(--dm-live); background: color-mix(in srgb, var(--dm-live) 10%, transparent); }
.dm-state[data-state="live"] .dm-dot { background: var(--dm-live); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dm-live) 22%, transparent); animation: dm-pulse 1.6s ease-in-out infinite; }
.dm-state[data-state="connecting"] { color: var(--dm-warn); }
.dm-state[data-state="connecting"] .dm-dot { background: var(--dm-warn); animation: dm-pulse .9s ease-in-out infinite; }
.dm-state[data-state="error"] { color: var(--dm-danger); }
.dm-state[data-state="error"] .dm-dot { background: var(--dm-danger); }
/* El cronómetro de la llamada, en la cifra de la portada. */
.dm-timer { margin-left: auto; font-family: var(--dm-disp); font-style: italic; font-size: 17px; font-variant-numeric: tabular-nums; color: var(--dm-text); }

@keyframes dm-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }

.dm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px 16px; border: 0; border-radius: 999px;
  font-weight: 650; cursor: pointer; transition: filter .15s, opacity .15s, transform .1s;
}
.dm-btn:active { transform: scale(.985); }
.dm-btn:hover { filter: brightness(1.07); }
.dm-btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
/* Llamar va en TIZA sobre negro (el botón principal de la portada), no en el verde de siempre. */
/* `.dm .dm-btn-call` y no la clase sola: `.dm button { color: inherit }` pesa más y dejaba el
 * texto en tiza sobre el fondo tiza — un botón de llamar en blanco. */
.dm .dm-btn-call { background: var(--dm-text); color: var(--dm-bg); }
.dm-btn svg { flex: none; }
/* Un solo botón a la vista: el que se puede pulsar. Con los dos, «Llamar» desactivado y «Colgar»
 * salían a la vez y a tamaño completo, y el desactivado solo añadía ruido. */
.dm-controls .dm-btn:disabled { display: none; }
.dm .dm-btn-hang { background: var(--dm-danger); color: #fff; }
.dm-btn-ghost {
  background: transparent; border: 1px solid var(--dm-border); color: var(--dm-muted);
  padding: 8px 12px; border-radius: 10px; cursor: pointer; font-size: 13px; width: auto;
}
.dm-btn-ghost:hover { color: var(--dm-text); border-color: var(--dm-accent); }

/* ─── Aviso previo (tapa el reproductor hasta que se acepta) ─── */
.dm-gate {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 0 0; border-top: 1px solid var(--dm-border);
}
.dm-gate-title { font-weight: 650; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.dm-rec {
  width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--dm-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-danger) 25%, transparent);
}
.dm-gate-body { font-size: 12.5px; color: var(--dm-muted); }

/* ─── El teléfono ─── */
.dm-player { display: flex; flex-direction: column; gap: 12px; }
.dm-explore { font-size: 11.5px; color: var(--dm-accent); text-align: center; }
.dm-controls { display: flex; gap: 8px; align-items: stretch; }
.dm-controls .dm-btn { flex: 1; }

/* Aviso de que el guion está escrito. Va DENTRO del teléfono y no al pie de la
 * página porque el widget se empotra en webs ajenas, donde el pie no viaja: el aviso
 * tiene que estar pegado al botón de llamar. */
.dm-scripted { font-size: 11.5px; line-height: 1.45; color: var(--dm-muted); }

/* Teclado */
.dm-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
/* Un teclado de TELÉFONO: la cifra en Fraunces y debajo sus letras (2 ABC, 3 DEF…), como en
 * cualquier aparato. */
.dm-keypad button {
  aspect-ratio: 1.9 / 1; border: 1px solid var(--dm-border); background: transparent;
  border-radius: 999px; cursor: pointer; font-family: var(--dm-disp); font-size: 21px; font-weight: 500;
  line-height: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  transition: background .12s, transform .08s, border-color .12s, box-shadow .2s;
}
.dm-keypad button small {
  font-family: var(--dm-sans); font-size: 8.5px; font-weight: 700; letter-spacing: .14em; color: var(--dm-muted);
}
/* El teclado se PULSA: es el mando de la llamada. `is-lit` marca la tecla que acaba de
 * sonar, la pulse el visitante o el modo automático. */
.dm-keypad button:hover:not(:disabled) { border-color: var(--dm-accent); background: var(--dm-accent-soft); }
.dm-keypad button:active:not(:disabled) { transform: scale(.94); }
.dm-keypad button:disabled { opacity: .45; cursor: default; }
.dm-keypad button.is-lit {
  border-color: var(--dm-accent); background: var(--dm-accent-soft);
  color: var(--dm-accent); transform: scale(1.06);
}
/* La tecla que sugiere el camino del ejemplo: late en cian, sin pulsarse sola. */
.dm-keypad button.is-hint:not(:disabled),
.dm-optkey.is-hint:not(:disabled) {
  border-color: var(--dm-live); color: var(--dm-live);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--dm-live) 55%, transparent);
  animation: dm-sugiere 1.4s ease-out infinite;
}
@keyframes dm-sugiere {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dm-live) 55%, transparent); }
  100% { box-shadow: 0 0 0 10px transparent; }
}
.dm-keypad button[data-hint]::after {
  content: attr(data-hint); display: block; font-size: 9px; font-weight: 500;
  color: var(--dm-accent); text-transform: uppercase; letter-spacing: .03em;
}
.dm-keypad-hint { font-size: 11.5px; color: var(--dm-muted); text-align: center; }

/* ─── Flujo en vivo ─── */

.dm-flow-head {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px;
  padding-bottom: 12px; border-bottom: 1px solid var(--dm-border);
}
.dm-flow-head h2 { font-size: 20px; }
.dm-flow-head span { color: var(--dm-muted); font-size: 12px; }

/* `position: relative` para que `offsetTop` de un bloque se mida contra el mapa: es lo que usa el
 * JS para centrar el bloque activo moviendo SOLO este contenedor. */
.dm-flow {
  position: relative; display: flex; flex-direction: column; gap: 1px; margin-top: 10px;
  max-height: 400px; overflow-y: auto; padding: 2px 6px 2px 2px; scrollbar-width: thin;
  overscroll-behavior: contain;
}

/* Sin la opacidad al 55 % de antes: gris sobre gris oscuro no se leía. Lo que aún no ha sonado
 * va en color apagado; lo que ya sonó recupera el texto; lo que suena, acento. Las ramas se
 * leen por el raíl de la izquierda, una sangría corta por nivel. */
.dm-block {
  position: relative; display: flex; gap: 10px; padding: 7px 10px 7px 8px; cursor: pointer;
  border-radius: 10px; border: 1px solid transparent; color: var(--dm-muted);
  transition: background .2s, border-color .2s, color .2s;
}
.dm-block[data-level="1"] { margin-left: 10px; }
.dm-block[data-level="2"] { margin-left: 20px; }
.dm-block[data-level="3"] { margin-left: 30px; }
.dm-block[data-level="4"] { margin-left: 40px; }
/* La LÍNEA DE RECORRIDO: cada bloque es una parada sobre un raíl; el tramo por el que ya ha
 * pasado la llamada se ilumina en lavanda. */
/* El raíl solo existe donde la llamada HA PASADO: pintado en todos los bloques, la sangría de
 * cada rama lo desplazaba y salía una escalera de tramos sueltos. */
.dm-block::before {
  content: ""; position: absolute; left: 20px; top: -1px; bottom: -1px; width: 2px;
  background: transparent; transition: background .3s;
}
.dm-block.is-visited::before { background: var(--dm-accent); }
.dm-block:hover { background: var(--dm-bg-soft); }
.dm-block.is-visited { color: var(--dm-text); }
/* Tecla que el menú no tiene: el bloque se sacude. Es la forma más corta de decir «ese
 * número no está en este menú» sin escribir un mensaje de error. */
.dm-block.is-shake { animation: dm-shake .36s ease-in-out; }
@keyframes dm-shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.dm-block.is-active { background: color-mix(in srgb, var(--dm-live) 7%, transparent); color: var(--dm-text); }
.dm-block-icon {
  position: relative; z-index: 1; flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  margin-top: 1px; border-radius: 50%; background: var(--dm-bg-raise); color: var(--dm-muted);
  border: 1px solid var(--dm-border);
}
.dm-block.is-visited .dm-block-icon { color: var(--dm-accent); border-color: var(--dm-accent); }
.dm-block.is-active .dm-block-icon {
  background: var(--dm-live); border-color: var(--dm-live); color: var(--dm-bg);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--dm-live) 20%, transparent);
}
/* `:not(.is-active)`: con la misma especificidad que la regla de activo y escrita detrás, pintaba
 * el icono en acento sobre el fondo acento — un cuadro vacío justo mientras el agente habla. */
.dm-block[data-kind="ai_agent"]:not(.is-active) .dm-block-icon { color: var(--dm-accent); }
.dm-block-body { min-width: 0; flex: 1; }
.dm-block-label { font-weight: 600; font-size: 12.5px; display: flex; align-items: center; gap: 6px; line-height: 1.35; padding-top: 4px; }
.dm-block-kind { display: none; }

/* Dos líneas como máximo en el mapa: la frase entera se lee en su burbuja del
 * diálogo, y un bloque de seis líneas descuadra el recorrido. */
.dm-block-text {
  font-size: 12.5px; color: var(--dm-muted); margin-top: 1px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dm-block.is-active .dm-block-text { -webkit-line-clamp: 4; }
.dm-block.is-active .dm-block-text { color: var(--dm-text); }
/* El «✓» de bloque ya sonado sobra desde que el icono se pone en verde, y dependía de que la
 * fuente de quien mira tuviera ese glifo (en una sin él, un cuadro vacío). */
.dm-block-check { display: none; }

/* Teclas dentro de un bloque de menú: se pueden pulsar desde aquí */
.dm-block-keys { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.dm-optkey {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; text-align: left;
  border: 1px solid var(--dm-border); background: var(--dm-bg); border-radius: 999px;
  font-size: 12px; cursor: pointer; transition: border-color .12s, background .12s;
}
.dm-optkey { opacity: .75; cursor: pointer; }
.dm-optkey:disabled { cursor: default; opacity: .55; }
.dm-optkey:hover:not(:disabled) { opacity: 1; border-color: var(--dm-accent); background: var(--dm-accent-soft); }
.dm-optkey b { font-variant-numeric: tabular-nums; }
.dm-optkey.is-taken { opacity: 1; border-color: var(--dm-ok); color: var(--dm-ok); font-weight: 600; }

/* Dígitos que va marcando el visitante, en los bloques que capturan */
.dm-block-dialed {
  margin-top: 7px; min-height: 22px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 16px; font-weight: 600; letter-spacing: .22em; color: var(--dm-accent);
}
.dm-block-dialed:empty::before {
  content: "· · ·"; letter-spacing: .1em; color: var(--dm-muted); font-weight: 400; font-size: 13px;
}

/* Etapas de la IA */
.dm-stages { display: flex; gap: 6px; margin-top: 8px; }
.dm-stage {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 999px; background: var(--dm-bg-soft); color: var(--dm-muted);
  border: 1px solid transparent;
}
.dm-stage.is-on { background: var(--dm-accent-soft); color: var(--dm-accent); border-color: var(--dm-accent); }
.dm-stage.is-done { color: var(--dm-ok); }
.dm-stage em { font-style: normal; opacity: .75; font-variant-numeric: tabular-nums; }

/* ─── Lo que piensa el agente ───
 * Tarjeta en la conversación, antes de la respuesta. Las barras van en cascada sobre el total
 * del turno y se llenan durante sus milisegundos: el ancho ES el tiempo. Ver `pasoRazonamiento`
 * en demo-call.js. */
.dm-reason {
  align-self: stretch; border: 1px solid var(--dm-border); border-radius: 12px;
  background: var(--dm-bg); overflow: hidden; animation: dm-think-in .18s ease-out;
}
.dm-reason.is-live { border-color: var(--dm-accent); box-shadow: 0 0 0 3px var(--dm-accent-soft); }
/* `.dm .dm-reason-head` y no `.dm-reason-head` a secas: `.dm button { font: inherit }` pesa más
 * que una sola clase y le devolvía los 14 px del widget — la cabecera salía en mayúsculas
 * enormes y el total perdía la monoespaciada. */
.dm .dm-reason-head {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 11px;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em;
  color: var(--dm-muted);
}
.dm .dm-reason-head:focus-visible { outline: 2px solid var(--dm-accent); outline-offset: -2px; }
.dm-reason-ico { display: grid; place-items: center; color: var(--dm-accent); }
.dm-reason.is-live .dm-reason-ico { animation: dm-pulse 1s ease-in-out infinite; }
.dm-reason-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-reason-kinds { display: none; gap: 4px; color: var(--dm-muted); }
.dm-reason-kinds svg { width: 12px; height: 12px; }
.dm-reason:not(.is-open) .dm-reason-kinds { display: inline-flex; }
.dm .dm-reason-total {
  margin-left: auto; white-space: nowrap; font-family: var(--dm-disp); font-style: italic;
  font-size: 18px; font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--dm-text); font-variant-numeric: tabular-nums;
}
.dm .dm-reason-head::after {
  content: ""; width: 6px; height: 6px; margin-left: 2px; flex: none;
  border-right: 1.5px solid var(--dm-muted); border-bottom: 1.5px solid var(--dm-muted);
  transform: rotate(45deg) translateY(-2px); transition: transform .15s;
}
.dm .dm-reason.is-open .dm-reason-head::after { transform: rotate(-135deg) translateY(-1px); }

.dm-reason-steps {
  display: none; flex-direction: column; gap: 2px;
  padding: 8px 11px 10px; border-top: 1px solid var(--dm-border);
}
.dm-reason.is-open .dm-reason-steps { display: flex; }

/* ── Un tramo de la traza ──
 * [tipo] [componente + detalle] [ms]
 *        [────── barra en su instante ──────] */
.dm-tr-row {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) auto;
  column-gap: 10px; row-gap: 4px; align-items: baseline;
  padding: 6px 0; border-bottom: 1px dashed var(--dm-border);
  opacity: .42; transition: opacity .2s;
}
.dm-tr-row:last-of-type { border-bottom: 0; }
.dm-tr-row.is-live, .dm-tr-row.is-done { opacity: 1; }
.dm-tr-kind {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--dm-muted); white-space: nowrap;
}
.dm-tr-row.is-live .dm-tr-kind { color: var(--dm-accent); }
.dm-tr-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dm-tr-comp {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; color: var(--dm-muted);
}
.dm-tr-comp:empty { display: none; }
.dm-tr-quote { font-size: 12.5px; color: var(--dm-text); line-height: 1.4; }
.dm-tr-muted { font-size: 12px; color: var(--dm-muted); line-height: 1.4; }
.dm-tr-intent { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.dm-tr-tools { font-size: 12px; color: var(--dm-text); }
.dm-tr-tools code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--dm-ok);
}
.dm-tr-note { font-size: 12px; color: var(--dm-warn); font-style: italic; line-height: 1.4; }
.dm-tr-ms {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; font-weight: 650;
  color: var(--dm-text); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dm-tr-row.is-live .dm-tr-ms { color: var(--dm-accent); }
.dm-tr-track {
  grid-column: 1 / -1; position: relative; height: 4px; border-radius: 2px; background: var(--dm-bg-soft);
}
.dm-tr-bar {
  position: absolute; top: 0; bottom: 0; width: 0; border-radius: 2px; background: var(--dm-muted);
  transition-property: width; transition-timing-function: linear;
}
.dm-tr-row[data-kind="stt"] .dm-tr-bar { background: var(--dm-live); }
.dm-tr-row[data-kind="llm"] .dm-tr-bar { background: var(--dm-accent); }
.dm-tr-row[data-kind="http"] .dm-tr-bar { background: var(--dm-ok); }
.dm-tr-row[data-kind="tts"] .dm-tr-bar { background: var(--dm-text); opacity: .7; }
.dm-tr-row[data-limit="1"] .dm-tr-bar { background: var(--dm-warn); }

/* Petición HTTP: método, host, ruta, estado. Se lee como en una consola de red. */
.dm-tr-req {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
}
.dm-tr-method {
  font-size: 9.5px; font-weight: 800; letter-spacing: .04em; padding: 1px 5px; border-radius: 4px;
  color: var(--dm-ok); background: var(--dm-ok-soft);
}
.dm-tr-method[data-m="POST"], .dm-tr-method[data-m="PUT"], .dm-tr-method[data-m="PATCH"] {
  color: var(--dm-warn); background: color-mix(in srgb, var(--dm-warn) 16%, transparent);
}
.dm-tr-host { color: var(--dm-muted); }
.dm-tr-path { color: var(--dm-text); overflow-wrap: anywhere; }
.dm-tr-status {
  font-weight: 700; font-size: 10.5px; color: var(--dm-ok);
}
.dm-tr-status[data-ok="0"] { color: var(--dm-danger); }
.dm-tr-body { font-size: 11px; }
.dm-tr-body summary {
  cursor: pointer; list-style: none; color: var(--dm-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dm-tr-body summary::-webkit-details-marker { display: none; }
.dm-tr-body summary::before { content: "▸ "; }
.dm-tr-body[open] summary::before { content: "▾ "; }
.dm-tr-body pre {
  margin: 5px 0 0; padding: 7px 9px; border-radius: 7px; overflow-x: auto;
  background: var(--dm-bg-soft); border: 1px solid var(--dm-border);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; line-height: 1.45;
  color: var(--dm-text); white-space: pre;
}
.dm-tr-body pre[data-dir="req"]::before { content: "→ request"; display: block; color: var(--dm-muted); margin-bottom: 3px; }
.dm-tr-body pre[data-dir="res"]::before { content: "← response"; display: block; color: var(--dm-muted); margin-bottom: 3px; }
.dm-tr-foot { margin-top: 6px; font-size: 10.5px; color: var(--dm-muted); }
.dm-turn-lat { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--dm-accent); }
.dm-reason-kinds span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; font-weight: 700;
  padding: 1px 5px; border-radius: 4px; background: var(--dm-bg-soft); color: var(--dm-muted);
  text-transform: none; letter-spacing: 0;
}
.dm-reason-kinds span[data-kind="http"] { color: var(--dm-ok); }

@keyframes dm-think-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; } }

/* En el mapa, el icono del agente late mientras piensa. */
.dm-block.is-thinking .dm-block-icon { animation: dm-pulse 1s ease-in-out infinite; }

@media (max-width: 520px) {
  .dm-tr-row { grid-template-columns: minmax(0, 1fr) auto; }
  .dm-tr-kind { grid-column: 1; }
  .dm-tr-ms { grid-column: 2; grid-row: 1; }
  .dm-tr-main { grid-column: 1 / -1; }
}

/* Transcripción */
.dm-convo {
  display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 12px 4px 2px;
  border-top: 1px solid var(--dm-border); max-height: 340px; overflow-y: auto;
  scrollbar-width: thin; overscroll-behavior: contain;
}
/* Ningún hijo se encoge. En una columna flex con scroll, un hijo con `overflow: hidden` (la
 * tarjeta de razonamiento) pierde su alto mínimo y se aplasta hasta el borde en cuanto la
 * conversación desborda: salía como una raya azul. */
.dm-convo > * { flex-shrink: 0; }
/* MODO AGENTE. Cuando la llamada llega al agente de IA, el mapa ya ha contado lo suyo y lo que
 * importa es la conversación con sus trazas: el mapa se queda en una franja con la parada activa
 * a la vista y la conversación toma el alto. Se sale al colgar o al cambiar de centralita. */
.dm-widget.dm-agent-on .dm-flow { max-height: 118px; }
.dm-widget.dm-agent-on .dm-convo { max-height: 640px; }
.dm-convo-empty { color: var(--dm-muted); font-size: 12.5px; }
.dm-turn { display: flex; flex-direction: column; gap: 3px; }
.dm-bubble {
  max-width: 88%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px;
  border: 1px solid var(--dm-border); background: var(--dm-bg-soft);
}
.dm-turn[data-who="caller"] { align-items: flex-end; }
.dm-turn[data-who="caller"] .dm-bubble { background: var(--dm-accent-soft); border-color: transparent; }
.dm-turn-meta { font-size: 10.5px; color: var(--dm-muted); font-variant-numeric: tabular-nums; }

/* El turno en el que el agente dice que algo no lo lleva él. Se destaca porque es el que
 * contesta la pregunta de quien evalúa: ¿y cuando no sabe, qué hace? */
.dm-turn.is-limit .dm-bubble {
  border-color: var(--dm-warn); border-style: dashed; background: transparent;
}
.dm-limit-tag {
  display: block; margin-top: 5px; font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; color: var(--dm-warn);
}

/* ─── Aviso y fragmento para empotrar ─── */

.dm-note {
  margin-top: 18px; padding: 12px 14px; border-radius: 10px; font-size: 12.5px;
  color: var(--dm-muted); background: var(--dm-bg-soft); border: 1px solid var(--dm-border);
}
.dm-embed { margin-top: 26px; }
.dm-embed h2 { font-size: 16px; margin-bottom: 6px; }
.dm-embed p { color: var(--dm-muted); font-size: 13px; margin-bottom: 10px; }
.dm-embed-row { display: flex; gap: 8px; align-items: stretch; }
.dm-embed code {
  flex: 1; overflow-x: auto; white-space: pre; padding: 11px 12px;
  background: var(--dm-bg-soft); border: 1px solid var(--dm-border); border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
}

/* ─── Dentro del iframe ─── */

.dm-embedded { padding: 14px; }
/* El iframe de la landing mide su propio alto y se lo dice al padre; el fondo lo pinta
 * quien empotra, así que aquí es transparente para no dibujar un rectángulo encima. */
.dm-embedded.dm-transparent { background: transparent; }
.dm-embedded .dm-widget { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); }
@media (max-width: 720px) { .dm-embedded .dm-widget { grid-template-columns: 1fr; } }
.dm-credit { margin-top: 10px; text-align: right; font-size: 11px; color: var(--dm-muted); }
.dm-credit a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .dm *, .dm *::before, .dm *::after { animation: none !important; transition: none !important; }
}