/* FirstFrame — sala de revisión.
 *
 * Sistema Raycast: lienzo casi negro (#040506), un solo acento coral que es
 * MARCA y no color funcional, botones neutros (Mist sobre oscuro) en vez de CTA
 * cromático, y elevación por "tecla" — anillo de 1px más luces interiores —
 * nunca por sombra proyectada. Inter para todo, Geist Mono para lo técnico.
 *
 * Tres reglas que mandan sobre la estética:
 *   1. No se añaden elementos ni vuelve la densidad. Lo técnico, detrás del panel.
 *   2. Sin animaciones de entrada: esto se abre todos los días.
 *   3. Si el color o la tipografía le compiten atención al vídeo, gana el vídeo.
 */

/* ───────────────────────── fuentes ───────────────────────── */

@font-face{font-family:'Inter';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('/vendor/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('/vendor/fonts/inter-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'GeistMono';font-style:normal;font-weight:300 500;font-display:swap;
  src:url('/vendor/fonts/geistmono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'GeistMono';font-style:normal;font-weight:300 500;font-display:swap;
  src:url('/vendor/fonts/geistmono-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ───────────────────────── tokens ───────────────────────── */

:root {
  /* Mismos tokens que la landing: la sala y la portada son el mismo producto. */
  --canvas:   #08090a;
  --card:     #0c0d0f;
  --recessed: #111214;
  --badge:    #1b1c1e;

  /* Exactamente la escala de tinta de la landing: --ink / --ink-2 / --ink-3.
   * El blanco puro y el borde sólido de antes hacían que la sala pareciera un
   * panel de herramienta al lado de la portada. */
  --white:    #f4f4f5;
  --ash:      #9ba1a8;
  --smoke:    #6b7178;
  --mist:     #e6e6e6;
  --iron:     #454647;
  --border:   rgba(255,255,255,.09);
  --border-2: rgba(255,255,255,.055);

  /* Coral es la marca Y la acción principal, igual que en la landing: el mismo
   * botón que abre la sala es el que aprueba el spot. Antes también hacía de
   * color de error, y no puede ser las dos cosas — el error vive en --bad. */
  --coral:    #ff6b5e;
  --coral-2:  #ff9178;
  --coral-in: #1a0705;   /* tinta sobre coral, 12:1 */

  --bad:      #ff4d4d;
  /* Los estados van casi mudos; solo llevan color los dos que importan. */
  --ok:       #59d499;
  --info:     #56c2ff;

  --key: rgba(255,255,255,.05) 0 1px 0 0 inset,
         rgba(255,255,255,.10) 0 0 0 1px,
         rgba(0,0,0,.2) 0 -1px 0 0 inset;

  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: 'GeistMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }

body {
  background: var(--canvas);
  color: var(--white);
  font: 400 16px/1.5 var(--font);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'calt','kern','liga','ss03';
  font-variant-numeric: tabular-nums;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--mist); color: var(--canvas); }
:focus-visible { outline: 1px solid var(--mist); outline-offset: 2px; }

/* ───────────────────────── cabecera ───────────────────────── */

/* La misma barra que el nav de la landing: 60 px, lockup a 21/15 y enlaces de
 * 14 px en --ash. Nada de metadatos de ejecución en la primera línea. */
.top {
  height: 60px;
  display: flex; align-items: center; gap: 28px;
  padding: 0 32px;
  border-bottom: 1px solid var(--border-2);
}
.wordmark {
  display: flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 600; letter-spacing: -.015em; color: var(--white);
}
.wordmark svg { display: block; flex: none; }

.linkbtn {
  background: none; border: 0;
  color: var(--ash);
  font-size: 14px; font-weight: 450; letter-spacing: -.005em;
  padding: 8px 0;
  transition: color .18s ease;
}
.linkbtn:hover { color: var(--white); }
.linkbtn[aria-expanded="true"] { color: var(--white); }

/* ───────────────────────── estructura ───────────────────────── */

.shell { display: flex; height: calc(100vh - 60px); }

/* ───────────────────────── lateral ───────────────────────── */

.side {
  width: 212px; flex: 0 0 212px;
  border-right: 1px solid var(--border-2);
  padding: 32px 0 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}

.newbtn {
  display: block; width: calc(100% - 32px); margin: 0 16px;
  text-align: left;
  background: rgba(255,255,255,.045);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--white);
  padding: 8px 12px;
  font-size: 13.5px; font-weight: 500;
  transition: background .18s ease, border-color .18s ease;
}
.newbtn::before { content: "+"; margin-right: 8px; color: var(--smoke); }
.newbtn:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16); }

/* El mismo kicker de la landing: mono, versalitas, tracking .12em. */
.side-label {
  margin: 28px 16px 10px;
  font-family: var(--mono);
  font-size: 11px; font-weight: 400;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--smoke);
}

.joblist { overflow-y: auto; padding-bottom: 16px; }
.joblist::-webkit-scrollbar { width: 8px; }
.joblist::-webkit-scrollbar-thumb { background: var(--badge); border-radius: 8px; }

.jobrow {
  display: block; width: 100%; text-align: left;
  background: none; border: 0;
  padding: 11px 16px;
  transition: background .12s;
}
.jobrow:hover { background: rgba(255,255,255,.03); }
.jobrow.sel   { background: rgba(255,255,255,.06); }

.jobrow b {
  display: block;
  font-size: 14px; font-weight: 500; letter-spacing: .014em;
  color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* El estado es una micro-etiqueta técnica, no una pastilla de color. */
.jobrow span {
  display: block; margin-top: 4px;
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 400;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--smoke);
}
.jobrow span i { display: none; }
.jobrow span.t-live  { color: var(--ash); }
.jobrow span.t-ready { color: var(--white); }
.jobrow span.t-good  { color: var(--ok); }
.jobrow span.t-bad   { color: var(--bad); }

.side-empty { font-size: 13px; color: var(--smoke); padding: 8px 16px; line-height: 1.5; }

/* ───────────────────────── escenario ───────────────────────── */

.main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  padding: 32px clamp(28px, 3.4vw, 48px) 36px;
  overflow: hidden;
}

/* — paso 1: el brief — */

.compose { margin: auto; width: 100%; max-width: 600px; padding-bottom: 40px; }

/* La misma escala que los h2 de la landing: peso 620 y tracking NEGATIVO.
 * El tracking positivo de antes venía de otro sistema y la delataba. */
.compose h1 {
  margin: 0;
  font-size: clamp(34px, 3.6vw, 46px);
  font-weight: 620; line-height: 1.08; letter-spacing: -.032em;
  color: var(--white);
}
.compose-sub {
  margin: 20px 0 28px;
  color: var(--ash); font-size: 17px; line-height: 1.6; max-width: 52ch;
  text-wrap: pretty;
}

#brief {
  width: 100%;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px;
  font-size: 16px; line-height: 1.55;
  color: var(--white);
  resize: none; outline: none;
  transition: border-color .18s ease;
}
#brief::placeholder { color: var(--smoke); }
#brief:focus { border-color: rgba(255,255,255,.22); }

.compose-row { display: flex; align-items: center; gap: 10px; margin-top: 20px; }

.seg { display: inline-flex; gap: 0; background: rgba(255,255,255,.05); border-radius: 999px; padding: 3px; }
.seg button {
  background: none; border: 0; border-radius: 999px;
  color: var(--ash);
  font-size: 13.5px; font-weight: 500;
  padding: 7px 15px;
  transition: color .15s, background .15s;
}
.seg button:hover { color: var(--white); }
.seg button.on { background: rgba(255,255,255,.09); color: var(--white); }

/* — paso 2 y 3: el vídeo — */

.spot { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
/* El grupo vídeo + datos se centra junto; el plano no se queda flotando solo. */
.videostage { flex: 0 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }

/* El mismo marco con el que la landing presenta una captura: radio de 14,
 * anillo de 1 px y un rescoldo coral muy bajo. Nada más — el plano manda. */
.videowrap {
  position: relative;
  width: 100%; aspect-ratio: 16/9; max-height: 100%;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px var(--border),
    0 40px 90px -40px rgba(0,0,0,.9),
    0 0 120px -60px rgba(255,107,94,.45);
}
#player { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }

/* El pipeline quema una marca "DRAFT" arriba a la izquierda: el chip va a la derecha. */
.chip {
  position: absolute; top: 16px; right: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(4,5,6,.72);
  backdrop-filter: blur(48px);
  border-radius: 999px;
  box-shadow: rgba(255,255,255,.14) 0 0 0 1px;
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--white);
}
.chip i { width: 5px; height: 5px; border-radius: 50%; background: var(--ash); }

.veil {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #000;
  color: var(--smoke);
  font-size: 14px; text-align: center; padding: 24px;
}

.progress { height: 2px; border-radius: 99px; background: rgba(255,255,255,.07); margin-top: 20px; overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--ash); transition: width .4s ease; }

/* El bloque del spot es lo segundo que se lee después del plano, así que tiene
 * saltos de verdad: kicker 11 → titular 30 → frase 17 → metadatos 11,5. */
/* Con el raíl abierto en un portátil de 1280 el bloque se queda sin sitio y el
   titular se parte en tres. Antes de eso, los botones bajan a su propia fila. */
.stagebar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 20px clamp(24px, 4vw, 56px);
  padding-top: 30px;
}
.stageinfo { min-width: min(100%, 420px); flex: 1; }

.stagekicker {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--coral);
}
.stagekicker.ready { color: var(--coral); }
.stagekicker.good  { color: var(--ok); }
.stagekicker.bad   { color: var(--bad); }
.stagekicker.live  { color: var(--info); }

.stageinfo h2 {
  margin: 0;
  font-size: clamp(24px, 2.3vw, 32px);
  font-weight: 620; line-height: 1.1; letter-spacing: -.03em;
  color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.say { margin: 14px 0 0; color: var(--ash); font-size: 17px; line-height: 1.55; letter-spacing: -.006em; }
.say b { color: var(--white); font-weight: 550; }
.say.good { color: var(--ok); }
.say.bad  { color: var(--bad); }

/* Los datos de la ejecución: aquí abajo y en texto plano, no en pastillas en
 * la primera línea de la pantalla. */
.topmeta {
  margin: 14px 0 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px;
  font-family: var(--mono);
  font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--smoke);
}
.tm { white-space: nowrap; }
.tm + .tm::before { content: "·"; margin-right: 10px; color: var(--iron); }
.tm.ok { color: var(--ok); }
.tm.on { color: var(--info); }

.stageact { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* — botones: la misma píldora coral que la landing —
 * El CTA es cromático a propósito y hay exactamente uno por pantalla: crear el
 * spot, o aprobarlo. Todo lo demás es neutro y no compite. */

/* Exactamente el .btn de la landing: 38 px de alto, 18 de aire lateral, 14 px. */
.primary, .ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 18px;
  border-radius: 999px;
  font-size: 14px; font-weight: 550; letter-spacing: -.005em;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.primary:active, .ghost:active { transform: translateY(1px); }

.primary {
  background: var(--coral); border: 1px solid var(--coral);
  color: var(--coral-in); font-weight: 600;
}
.primary:hover { background: var(--coral-2); border-color: var(--coral-2); }
.primary:disabled { opacity: .4; cursor: default; }
.primary:disabled:hover { background: var(--coral); border-color: var(--coral); }
.primary.big { height: 46px; padding: 0 26px; font-size: 15px; }

.ghost {
  background: rgba(255,255,255,.045);
  border: 1px solid var(--border);
  color: var(--white);
}
.ghost:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16); }

.iconbtn {
  background: none; border: 0; color: var(--smoke);
  font-size: 13px; line-height: 1; padding: 8px; border-radius: 6px;
  transition: color .15s, background .15s;
}
.iconbtn:hover { color: var(--white); background: rgba(255,255,255,.05); }

/* — pedir cambios — */

.changes {
  margin-top: 24px;
  border-radius: 14px;
  box-shadow: var(--key);
  padding: 24px;
}
.changes > label {
  display: block; margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--smoke);
}
#note {
  width: 100%;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px;
  font-size: 16px; color: var(--white);
  resize: none; outline: none;
  transition: border-color .18s ease;
}
#note::placeholder { color: var(--smoke); }
#note:focus { border-color: rgba(255,255,255,.22); }

.changes-row { display: flex; align-items: center; gap: 10px; margin-top: 18px; }

/* Con el formulario abierto, la acción evidente es enviar los cambios. El
 * coral de "Approve" se apaga para que no haya dos CTAs discutiendo. */
.spot:has(#changes:not([hidden])) #stage-actions .primary {
  background: rgba(255,255,255,.045);
  border-color: var(--border);
  color: var(--white);
  font-weight: 550;
}
.spot:has(#changes:not([hidden])) #stage-actions .primary:hover {
  background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16);
}
.grow { flex: 1; }
.pick { font-size: 13px; color: var(--smoke); }
.pick select {
  background: rgba(255,255,255,.05); border: 0; border-radius: 8px;
  padding: 6px 8px; margin-left: 8px; outline: none; color: var(--white); font-size: 13px;
}

/* ───────────────────────── panel técnico ───────────────────────── */

.scrim { position: fixed; inset: 0; background: rgba(4,5,6,.7); z-index: 40; }

.tech {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 520px;
  background: var(--card);
  border-left: 1px solid var(--border);
  z-index: 41;
  display: flex; flex-direction: column;
}

.tech-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 24px 24px 16px;
  border-bottom: 1px solid var(--border);
}
.tech-top h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.022em; }
.tech-top p  { margin: 4px 0 0; font-family: var(--mono); font-size: 12px; color: var(--smoke); letter-spacing: .017em; }

.tech-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 24px; border-bottom: 1px solid var(--border); }
.tchip {
  font-family: var(--mono); font-size: 12px; letter-spacing: .017em;
  color: var(--ash); background: var(--badge);
  border-radius: 6px; padding: 2px 6px;
}
.tchip b { color: var(--white); font-weight: 500; }
.tchip.warn { color: var(--info); }
.tchip.ok   { color: var(--ok); }

.tech-body { flex: 1; overflow-y: auto; padding-bottom: 40px; }
.tech-body::-webkit-scrollbar { width: 8px; }
.tech-body::-webkit-scrollbar-thumb { background: var(--badge); border-radius: 8px; }

.grp { border-bottom: 1px solid var(--border); }
.grp > summary {
  list-style: none; cursor: pointer;
  padding: 16px 24px;
  font-family: var(--mono);
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ash);
  display: flex; align-items: center; gap: 8px;
  user-select: none;
}
.grp > summary::-webkit-details-marker { display: none; }
.grp > summary::before { content: "+"; color: var(--smoke); }
.grp[open] > summary::before { content: "\2212"; }
.grp > summary:hover { color: var(--white); }
.grp .n { margin-left: auto; color: var(--smoke); }
.grp-body { padding: 0 24px 24px; }

.kv { display: flex; gap: 16px; font-family: var(--mono); font-size: 12px; line-height: 1.6; letter-spacing: .017em; }
.kv span:first-child { color: var(--smoke); width: 112px; flex: 0 0 112px; }
.kv span:last-child  { color: var(--ash); word-break: break-all; }

.subhead {
  font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--smoke); margin: 26px 0 10px;
}

.lin { font-family: var(--mono); font-size: 12px; color: var(--ash); line-height: 1.6; word-break: break-all; letter-spacing: .017em; }
.lin em { color: var(--smoke); font-style: normal; }

.jsonbox {
  background: var(--canvas); border-radius: 8px;
  box-shadow: rgba(255,255,255,.06) 0 0 0 1px;
  padding: 12px; margin-top: 8px;
  font-family: var(--mono); font-size: 12px; line-height: 1.6; letter-spacing: .017em;
  color: var(--ash);
  white-space: pre-wrap; word-break: break-all;
  max-height: 240px; overflow: auto;
}

.minibtn {
  background: rgba(255,255,255,.05); border: 0; border-radius: 8px;
  color: var(--white);
  padding: 6px 12px; font-size: 13px; font-weight: 500;
  margin: 8px 8px 0 0;
  transition: background .15s;
}
.minibtn:hover:not(:disabled) { background: rgba(255,255,255,.09); }
.minibtn:disabled { opacity: .4; cursor: default; }

.verify-out {
  margin-top: 8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .017em;
  white-space: pre-wrap;
  border-radius: 8px; padding: 12px;
  background: var(--canvas);
  box-shadow: rgba(255,255,255,.06) 0 0 0 1px;
  color: var(--ash);
  max-height: 180px; overflow: auto;
}
.verify-out.ok  { color: var(--ok); }
.verify-out.bad { color: var(--bad); }

.iter { border-radius: 8px; background: var(--recessed); padding: 12px; margin-bottom: 8px; font-size: 13px; color: var(--ash); }
.iter-top { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--smoke); display: flex; gap: 8px; margin-bottom: 8px; }
.iter-top .sc { margin-left: auto; color: var(--ok); }
.iter-top .sc.low { color: var(--bad); }
.iter-bar { height: 1px; background: var(--border); margin: 8px 0; }
.iter-bar i { display: block; height: 100%; background: var(--coral); }
.iter-bar i.high { background: var(--ok); }
.iter .act { color: var(--smoke); margin-top: 4px; }

.scenerow { display: flex; gap: 16px; align-items: baseline; font-size: 13px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.scenerow:last-child { border-bottom: 0; }
.scenerow .no { font-family: var(--mono); font-size: 12px; color: var(--smoke); width: 24px; flex: 0 0 24px; }
.scenerow .ti { flex: 1; color: var(--ash); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scenerow .st { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--smoke); }
.scenerow.ready .st  { color: var(--ok); }
.scenerow.failed .st { color: var(--bad); }

.feed { max-height: 320px; overflow-y: auto; }
.feedrow { display: flex; gap: 8px; font-family: var(--mono); font-size: 12px; line-height: 1.6; letter-spacing: .017em; color: var(--ash); }
.feedrow .t { color: var(--smoke); flex: 0 0 56px; }
.feedrow .k { flex: 0 0 128px; color: var(--smoke); }
.feedrow .k.approved, .feedrow .k.scene_ready, .feedrow .k.render_complete { color: var(--ok); }
.feedrow .k.provider_failover, .feedrow .k.chaos, .feedrow .k.error { color: var(--info); }
.feedrow .d { flex: 1; word-break: break-all; }

.chaosrow { display: flex; align-items: center; gap: 8px; padding: 8px 0; font-family: var(--mono); font-size: 12px; letter-spacing: .017em; }
.chaosrow .nm { flex: 1; color: var(--ash); }
.chaosrow .state { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--ok); }
.chaosrow .state.dead { color: var(--bad); }
.chaosrow button { margin: 0; }

.tnote { font-size: 13px; color: var(--smoke); line-height: 1.6; }

/* ───────────────────────── toasts ───────────────────────── */

.toasts { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: flex; flex-direction: column; gap: 8px; max-width: 360px; }

/* Elevación por "tecla": anillo de 1px y luces interiores, nunca sombra proyectada. */
.toast {
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--key);
  padding: 16px;
  font-size: 14px; font-weight: 500; letter-spacing: .014em;
  color: var(--white);
}
.toast.out { opacity: 0; transition: opacity .2s; }
.toast.good small { color: var(--ok); }
.toast.warn small { color: var(--info); }
.toast.bad  small { color: var(--bad); }
.toast small { display: block; font-weight: 400; font-size: 13px; color: var(--ash); margin-top: 4px; }

/* ───────────────────────── raíl de ejecución ─────────────────────────
   Siempre a la vista: chips de sesión, escenas, procedencia con JSON vivo y
   el feed de eventos de B2. Es la sustancia técnica del producto, curada —
   lo profundo (AgentLoop, objetos, chaos, verify) sigue en el panel. */

.rail {
  width: 296px; flex: 0 0 296px;
  border-left: 1px solid var(--border-2);
  background: var(--card);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.rail::-webkit-scrollbar { width: 8px; }
.rail::-webkit-scrollbar-thumb { background: var(--badge); border-radius: 8px; }

.rail-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 18px; border-bottom: 1px solid var(--border-2); }

.rblock { padding: 18px; border-bottom: 1px solid var(--border-2); }
.rblock:last-child { border-bottom: 0; }
.rblock h4 {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 11px; font-weight: 400;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--smoke);
  display: flex; align-items: center; gap: 8px;
}
.rblock h4 .n { margin-left: auto; color: var(--iron); }
.rblock .kv span:first-child { width: 76px; flex: 0 0 76px; }
.rblock .jsonbox { max-height: 200px; margin-top: 12px; }
.rblock .scenerow { padding: 6px 0; }
.rblock-feed { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rblock-feed .feed { flex: 1; min-height: 120px; max-height: none; overflow-y: auto; }
/* En 296 px, tres columnas rompen las claves de B2 letra a letra. El detalle
   baja a su propia línea y se lee. */
.rblock-feed .feedrow { flex-wrap: wrap; margin-bottom: 7px; }
.rblock-feed .feedrow .t { flex: 0 0 48px; }
.rblock-feed .feedrow .k { flex: 1 1 auto; }
.rblock-feed .feedrow .d { flex: 0 0 100%; padding-left: 56px; color: var(--smoke); }

/* El raíl se cierra desde la cabecera: el jurado ve la evidencia y quien graba
   puede dejar el plano a ancho completo. */
body.no-rail .rail { display: none; }