:root {
  --bg: #0f1117;
  --surface: #171a23;
  --surface-2: #1f2330;
  --border: #2a2f3d;
  --text: #e8eaf0;
  --text-dim: #c2c8d8;
  --accent: #57ddff;
  /* Azul apagado, propio de los silencios: distinto del acento de la app,
     que marca lo que hizo el agente. */
  --silencio: #7EA8C8;
  /* Violeta apagado, propio de las tomas repetidas: es la otra propuesta
     del sistema y necesita leerse distinta del azul de los silencios de
     un vistazo. */
  --repeticion: #B08CD9;
  --accent-2: #ffdd57;
  --danger: #ff8a8a;
  --success: #7fffb3;
  /* Rojo pleno para fondos con letra blanca. --danger es un rojo claro
     pensado para TEXTO sobre fondo oscuro: sobre el, el blanco no
     contrasta. */
  --rojo: #c9372c;
  /* Verde claro de accion: mas apagado que --success, que se usa para
     estados "listo" y le compite. */
  --verde: #7ee0a0;
  --radius: 14px;
  /* Altura unica de todos los botones. Antes convivian 43, 44, 46, 48 y 50
     px: apiladas se ve el escalonado, y en un telefono los blancos de
     distinto tamanio entre botones se leen como que uno esta desalineado. */
  --alto-boton: 48px;

  /* LAS DOS COSAS QUE VIVEN AL PIE, MEDIDAS UNA SOLA VEZ.
     --------------------------------------------------------------------
     El 74 de la barra estaba escrito en cuatro lugares y el pastel del
     cuaderno usaba 62: ya se habian separado, que es justo lo que el
     comentario de la barra advertia que iba a pasar.

     `--alto-barra` es lo que la barra de abajo le saca a la pantalla: sus
     69 px y un poco de aire.

     `--alto-cuaderno` es el pastel de «Contame qué pasó», que FLOTA
     encima de todo. Sin reservarlo, el ultimo renglon de cada pantalla
     queda abajo de el -- y ese renglon es casi siempre el boton que
     cierra la pantalla. Le paso a Gustavo el 12/09: el boton para salir
     del dia personal estaba, y no lo podia ver. */
  --alto-barra: 74px;
  --alto-cuaderno: 46px;
}

* { box-sizing: border-box; }

html {
  font-size: 18px;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* EL LOGO, CENTRADO EN LA PANTALLA -- no "centrado entre lo que sobra".
   Con `space-between` el logo quedaba donde lo dejaran la version y el
   engranaje, o sea corrido segun cuanto midiera el texto de la version.

   Con tres columnas `1fr auto 1fr` y cada cosa puesta en la suya, el logo
   cae en la del medio y las dos de los costados se equilibran solas: queda
   en el centro real de la pantalla, diga lo que diga la version. Es el
   mismo recurso que usa el pie de la pantalla de texto para Aplicar.

   EL ALTO. Se bajo el padding de 14 a 10 px. Lo que manda el alto de la
   barra es el engranaje, que mide 34 px y no conviene achicar porque es
   lo que se toca con el dedo. Con el logo en 22 px el que define es el
   engranaje igual, asi que el unico lugar donde se podia ganar alto era
   el padding: la barra pasa de 62 a 54 px. Ocho pixeles mas de pantalla
   de grabacion, que es la que importa. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* LA FILA TAMBIEN, NO SOLO LA COLUMNA.
   Diciendo unicamente la columna, la grilla coloca en el orden del HTML: el
   logo cae en la columna 2 y el cursor queda pasado; lo que venga despues
   pidiendo una columna anterior arranca una fila nueva. Asi quedo el logo
   arriba y el engranaje abajo.

   Con la fila dicha, el orden del HTML deja de importar y todo entra en una
   sola linea. La columna 1 queda vacia a proposito: es lo que equilibra a
   la 3 y deja el logo en el centro real de la pantalla. */
.topbar > .brand { grid-row: 1; grid-column: 2; justify-self: center; }
.topbar > .icon-btn { grid-row: 1; grid-column: 3; justify-self: end; }

/* LOS DOS ICONOS DE LA DERECHA, EN UNA SOLA CELDA.
   Dos `.icon-btn` hermanos caian los dos en `grid-column: 3` y quedaban
   uno encima del otro. El envoltorio ocupa la celda; adentro van en fila. */
.topbar > .topbar-acciones {
  grid-row: 1;
  grid-column: 3;
  justify-self: end;
  display: flex;
  gap: 8px;
  align-items: center;
}

.brand {
  color: var(--text);
  text-decoration: none;
  /* Ya no hay texto adentro: el `line-height` normal le sumaria unos
     pixeles de aire debajo de la imagen que no se ven pero cuentan. */
  display: flex;
  align-items: center;
  line-height: 0;
}

/* EL LOGO DEL ENCABEZADO, LO MAS CHICO QUE SE LEA.
   22 px de alto. El archivo se genera a 66 (tres veces) para que no se vea
   borroso en pantallas densas, y se muestra a 22.

   Va SIN fondo: el original es blanco sobre #060606 y la barra es #171a23,
   asi que dejarlo tal cual pintaba un recuadro negro visible. Se le puso
   canal alfa sacado del propio brillo del dibujo, asi los bordes suaves de
   las letras siguen siendo suaves sobre cualquier fondo.

   ES SOLO LA PALABRA "SPILMARK". La bajada "Tu marca, dirigida en
   automatico" quedo afuera a proposito: en el original mide 44 px de los
   300 que ocupa el logo entero, o sea que a esta altura le tocarian 3 px y
   no se leeria. Para que se leyera habria que llevar el encabezado a 61 px
   de logo -- mas alto que la barra entera de hoy. */
/* La version, abajo de todo en la pantalla de Mas. Discreta: no es una
   opcion mas del menu, es un dato para cuando algo no anda. */
.version-pie {
  margin: 22px 0 4px;
  text-align: center;
}

.version-pie .version-app {
  background: none;
  border: 0;
  padding: 6px 10px;
  font: inherit;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  /* Para poder copiarla de un toque y pasarla por mensaje: cuando algo no
     anda, lo primero que hace falta saber es que version esta viendo. */
  user-select: all;
}

/* EL INTERRUPTOR PRODUCCION/DESARROLLO. Solo lo ve Gustavo y sus
   cuentas de prueba -- ver `maybeShowVersionToggle` en app.js. Discreto
   como la version de al lado: dos botones chicos, el activo marcado. */
.version-interruptor {
  display: flex; justify-content: center; gap: 8px; margin: 4px 0 10px;
}
.version-interruptor .version-op {
  background: none; border: 1px solid var(--hn-borde, #2C302C);
  border-radius: 10px; padding: 6px 12px; font: inherit; font-size: 12px;
  color: var(--text-dim); cursor: pointer;
}
.version-interruptor .version-op.activo {
  border-color: var(--accent); color: var(--accent);
}

/* LO QUE SE LE PIDIO, EN UNA SOLA CAJA Y ABAJO.
   Estuvo un rato al lado de cada miniatura y no se entendia nada: dos
   columnas de unos 150 px, una con la foto y otra con cuatro renglones de
   letra chica. Y era un `<span>`, asi que se leia y no se podia corregir.

   Ahora es un campo solo, a todo el ancho, debajo de las dos miniaturas.
   Tocar una imagen la elige y trae su pedido aca. */
.ver-taller {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.ver-taller-lbl {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-dim);
}

/* Los dos botones en una fila, y el de crear con mas peso: es el que
   cierra lo que se acaba de escribir. */
.ver-taller-pie {
  display: flex;
  gap: 8px;
}

.ver-taller-pie .btn { flex: 1 1 0; width: auto; }

.ver-describir {
  width: 100%;
  resize: vertical;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2, #1f2330);
  color: inherit;
  font: inherit;
  font-size: 13px;
  line-height: 1.35;
}

.ver-describir:focus { outline: none; border-color: var(--accent); }

/* POR QUE NO SALIO LA IMAGEN.
   No es una linea de ayuda mas: es la respuesta a algo que se toco y no
   pasó. Con el gris de las hints se lee como pie de pagina y se saltea, que
   es lo mismo que no decirlo. */
.ver-portada-motivo {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-left: 2px solid var(--warning, #f5c451);
  background: rgba(245, 196, 81, .07);
  color: var(--text);
  line-height: 1.45;
}

.brand-logo {
  /* 50% mas grande a pedido, 21/09/2026: 22px -> 33px. */
  height: 33px;
  width: auto;
  display: block;
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  text-decoration: none;
  font-size: 1rem;
}

.key-status {
  font-size: 0.85rem;
  color: var(--text-dim);
  background: var(--surface-2);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.key-status.ok { color: var(--success); border-color: var(--success); }
.key-status.bad { color: var(--danger); border-color: var(--danger); }

#app {
  flex: 1;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 16px;
}

/* Admin: pagina ancha tipo dashboard de escritorio en vez del flujo
   angosto de una columna que usa el resto de la PWA -- hace falta el
   espacio para las tantas variables de configuracion en columnas. */
body.wide-page #app { max-width: 1400px; }

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  align-items: start;
}

.settings-section h2 { margin-top: 0; }
.settings-section .field-row { display: flex; gap: 10px; align-items: flex-end; }
.settings-section .field-row > div { flex: 1; min-width: 0; }

.color-field-row { display: flex; gap: 8px; align-items: center; }
.color-field-row input[type="color"] {
  width: 44px;
  height: 40px;
  padding: 2px;
  flex-shrink: 0;
  cursor: pointer;
}
.color-field-row input[type="text"] { flex: 1; }

.admin-save-bar {
  position: sticky;
  bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 12px 0;
  margin-top: 4px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.admin-save-bar button { width: auto; padding: 12px 28px; }

.back-btn {
  width: auto;
  background: transparent;
  color: var(--text-dim);
  padding: 8px 4px;
  margin: 0 0 14px;
  font-weight: 500;
}
.back-btn:active { color: var(--text); }

.choice-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.choice-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  text-decoration: none;
  font-family: inherit;
  font-size: 1rem;
  width: 100%;
}
.choice-card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.choice-card:active { border-color: var(--accent); }
.choice-card .icon { font-size: 1.8rem; flex-shrink: 0; }
.choice-card .title { font-weight: 700; margin-bottom: 2px; }
.choice-card .desc { font-size: 0.85rem; color: var(--text-dim); }

.step-dots {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}
.step-dots span {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--border);
}
.step-dots span.done { background: var(--accent); }
.step-label { font-size: 0.78rem; margin: 0 0 14px; }

.hook-summary { border-color: var(--accent-2); }
.hook-summary p.hint { margin: 0 0 4px; }
.hook-summary h2 { margin: 0; color: var(--accent-2); }

.dropzone {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--surface-2);
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  text-align: center;
  cursor: pointer;
}
.dropzone .dropzone-icon { font-size: 1.3rem; }
.dropzone.dragover { border-color: var(--accent); background: rgba(87, 221, 255, 0.08); }
.dropzone.has-file { border-style: solid; border-color: var(--success); color: var(--success); }

h1 { font-size: 1.3rem; margin: 4px 0 14px; }
h2 { font-size: 1.05rem; margin: 0 0 10px; color: var(--text); }
p.hint { color: var(--text-dim); font-size: 0.88rem; line-height: 1.4; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}

/* Tip educativo -- colores
   calidos y una franja lateral de gradiente a proposito, para que se vea
   distinto de una tarjeta comun y de ganas de leerlo, no como letra
   chica. */
.tip-box {
  background: linear-gradient(135deg, rgba(255, 221, 87, 0.12), rgba(87, 221, 255, 0.08));
  border: 1px solid var(--accent-2);
  border-left: 4px solid var(--accent-2);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.tip-box .tip-title {
  font-weight: 700;
  color: var(--accent-2);
  margin-bottom: 8px;
  font-size: 1rem;
}
.tip-box p {
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 6px 0;
}
.tip-box strong { color: var(--accent-2); }

.centered-card { text-align: center; }
.centered-card input,
.centered-card label { text-align: center; }

.grid-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.grid-nav a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-decoration: none;
  color: var(--text);
}
.grid-nav .icon { font-size: 1.6rem; }
.grid-nav .label { font-weight: 600; }
.grid-nav .desc { font-size: 0.85rem; color: var(--text-dim); }

label { display: block; font-size: 0.85rem; color: var(--text-dim); margin: 12px 0 6px; }
label:first-child { margin-top: 0; }

input[type="text"], input[type="password"], input[type="file"], textarea, select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.95rem;
  font-family: inherit;
}
textarea { resize: vertical; min-height: 90px; }

.radio-row { display: flex; gap: 10px; }
.radio-option {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
}
.radio-option input { width: auto; }
.radio-option.selected { border-color: var(--accent); color: var(--accent); }

/* REGLA DE COLOR DE LA APP
   ------------------------
   verde claro  todo boton de accion: guardar, continuar, agregar, generar,
                procesar. Es el color por defecto.
   amarillo     "ver como queda" -- los que muestran un preview.
   turquesa     "terminar video", y NADA mas. Es la accion que dispara el
                procesamiento pesado, la unica que cuesta minutos y no se
                puede deshacer sola: tiene que distinguirse de todo el
                resto de un vistazo.
   contorno     volver, cancelar, y demas salidas.
   gris         marcar desde / marcar hasta (ver .cortes-grab).

   Antes el turquesa era el color por defecto, asi que "Terminar video" se
   veia igual que "Guardar" o "Continuar". */
/* `hidden` TIENE QUE OCULTAR, Y NO OCULTABA NADA.
   ------------------------------------------------
   La regla de abajo le pone `display: inline-flex` a TODOS los botones. Es
   estilo de autor, y el estilo de autor le gana al `[hidden] { display:
   none }` que trae el navegador -- sin importar la especificidad. O sea
   que poner `boton.hidden = true` no ocultaba nada: dejaba el boton ahi,
   y con `background: var(--verde)` de la misma regla, verde.

   Es lo que Gustavo vio al terminar de grabar: el guion se acaba, el
   codigo hace `g.hidden = true` para que el boton de Continuar
   desaparezca --dicho el ultimo parrafo no viene ninguno, no hay a donde
   continuar-- y el boton se quedaba en pantalla igual.

   Ya habia tres parches sueltos para lo mismo (`.pr-rec[hidden]`,
   `.pr-pausa[hidden]`, `.pr-lente[hidden]`), agregados de a uno cada vez
   que alguien tropezaba con esto. Esta regla es la general, y va ANTES
   para que cualquiera pueda pisarla a proposito si algun dia hace falta.

   `!important` porque compite con reglas de autor mas especificas que ya
   estan escritas: sin el, cada boton con su propio `display` vuelve a
   quedar visible. */
[hidden] {
  display: none !important;
}

button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--verde);
  color: #06281a;
  border: none;
  border-radius: 10px;
  /* Alto fijo, no derivado del padding: con padding el alto dependía del
     tamaño de letra de cada botón, y por eso los "small" quedaban más
     bajos que el resto. min-height y no height para que un texto que
     envuelve en dos líneas no se corte. */
  min-height: var(--alto-boton);
  padding: 8px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  margin-top: 12px;
}
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
/* LA MISMA, CON GUION. Se usa 37 veces en `app.js` y NO TENIA REGLA: la
   unica que la nombraba vive encerrada en `.fotos-cortes`, asi que en las
   otras 36 ganaba el verde lleno de `button, .btn` de aca arriba y el
   boton secundario salia identico al principal.

   Se vio el 11/09/2026 recorriendo las pantallas: la del video terminado
   tenia SIETE botones verdes pintados uno abajo del otro, y la de las
   voces once. Ninguna decia cual era la principal, que es justo para lo
   que sirve pintar uno. */
.btn-secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }

/* DOS BOTONES EN UNA FILA, para el panel de Admin -- produccion/desarrollo
   y cualquier otra tarjeta que necesite dos acciones lado a lado. */
.admin-fila {
  display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0;
}
.admin-fila .btn { width: auto; flex: 1; min-width: 160px; }
button.danger { background: var(--danger); color: #2b0a0a; }
/* `small` ya no achica el ancho: todos los botones van al mismo. Sigue
   bajando el tamaño de letra, que es lo que los ordena por jerarquia. */
/* `small` solo baja el tamaño de letra. El alto y el ancho son los mismos
   que el resto: es jerarquia, no un boton de otra especie. */
button.small { padding: 8px 12px; font-size: 0.85rem; margin-top: 8px; }

.hook-option {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
}
.hook-option.selected { border-color: var(--accent-2); box-shadow: 0 0 0 1px var(--accent-2) inset; }

/* EL HOOK ARRIBA, EL BOTON DEBAJO.
   ----------------------------------------------------------------------
   Esta regla decia "el texto a la izquierda y el lapiz de editar a la
   derecha", y valia: ese lapiz era un icono de UN caracter.

   El lapiz se saco y en su lugar quedo "↻ Que la rehagan" -- tres
   palabras que en la misma fila le comen la mitad del ancho al hook. Y el
   hook es lo que se lee para decidir: necesita el renglon entero.

   La fila no se eligio para este boton, se heredo del anterior. */
/* LA FILA ENTERA ES EL BOTON.
   ----------------------------------------------------------------------
   El problema medido: todos apretaban "Que la rehagan". El titulo era
   texto plano y al lado tenia lo unico que parecia un boton.

   Ahora la fila se toca entera y un circulo dice cual esta elegido. El
   circulo NO es el area sensible: es la senal. Lo que se toca es la
   fila, y por eso el `padding` va en la fila y no en el texto. */
.hook-option {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  /* Alto de dedo, con el texto centrado contra el circulo. */
  min-height: 56px;
  /* Que un toque no deje el texto seleccionado en azul: se lee como un
     error, y ademas el segundo toque abre el menu de copiar. */
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.hook-option:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

/* EL CIRCULO QUE SE LLENA. Vacio con borde cuando no esta elegido,
   lleno cuando si. Es la misma senal que cualquiera ya conocio en
   cualquier formulario: no hay que explicarla. */
.hook-circulo {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: transparent;
  transition: background .12s ease, border-color .12s ease;
}
.hook-option.selected .hook-circulo {
  border-color: var(--accent-2);
  /* El punto de adentro con una sombra y no con un hijo: una fila menos
     de HTML por titulo, y el mismo dibujo. */
  box-shadow: inset 0 0 0 5px var(--accent-2);
}

.hook-texto {
  flex: 1 1 auto;
  line-height: 1.45;
  /* Se numeraban "1." "2." "3." en el texto. Con el circulo al lado, el
     numero era una segunda senal para lo mismo -- y ninguna de las dos
     decia cual estaba elegido. */
}

/* EL BOTON, ABAJO Y A LA DERECHA. No ocupa todo el ancho: un boton
   ancho al lado de un texto se lee como la accion principal de la
   tarjeta, y la principal es ELEGIR el hook -- que se hace tocando la
   tarjeta. Pedir que la rehagan es la alternativa. */
/* EL ↻, GRIS Y CHICO.
   Rehacer UNA sola existe de verdad --va por `propuesta_id`, y solo esa
   fila se rehace-- asi que el boton se queda. Lo que se va es el verde y
   las palabras: era lo unico de la fila que parecia un boton, y por eso
   se lo apretaba en lugar de elegir. Ahora es un icono al costado, para
   el que lo busca. */
.hook-rehacer {
  flex: 0 0 auto;
  align-self: center;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  border-radius: 8px;
  font-size: 17px;
  line-height: 1;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.hook-rehacer:hover { border-color: var(--accent-2); color: var(--text); }

.hook-lapiz {
  flex: none;
  width: auto;
  margin: 0;
  padding: 4px 8px;
  font-size: 1rem;
  line-height: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  color: inherit;
}

.hook-editor {
  background: var(--surface-2);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 8px;
}

.hook-editor label { display: block; }
.hook-editor input { margin-bottom: 4px; }

.hook-editor-botones {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.hook-editor-botones button { flex: 1; margin: 0; }

/* Se avisa al llegar al tope, en vez de solo dejar de aceptar teclas
   sin explicacion. */
.hook-contador-lleno { color: var(--accent); }

.tag {
  display: inline-block;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.85rem;
  margin: 0 6px 6px 0;
  color: var(--text-dim);
}

.progress-log {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  max-height: 220px;
  overflow-y: auto;
  font-size: 0.83rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.progress-log div { padding: 3px 0; color: var(--text-dim); }
.progress-log div.done { color: var(--success); }
.progress-log div.error { color: var(--danger); }

.step-checklist { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.step-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 0.92rem;
  transition: background 0.2s, color 0.2s;
}
.step-item .step-icon { width: 18px; flex-shrink: 0; text-align: center; }
.step-item.pendiente { opacity: 0.6; }
.step-item.procesando {
  background: rgba(87, 221, 255, 0.12);
  color: var(--text);
  font-weight: 600;
}
.step-item.hecho { color: var(--success); }
.step-item.hecho .step-icon { color: var(--success); }

.error-box {
  background: rgba(255, 107, 107, 0.12);
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.88rem;
  margin-top: 10px;
}
.success-box {
  background: rgba(107, 255, 160, 0.1);
  border: 1px solid var(--success);
  color: var(--success);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.88rem;
  margin-top: 10px;
}
.hint-box {
  background: rgba(87, 221, 255, 0.1);
  border: 1px solid var(--accent);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.88rem;
  margin-bottom: 14px;
}

video { width: 100%; border-radius: 10px; background: #000; display: block; }
/* El preview de "Subir video" quedaba enorme con videos verticales
   (9:16 a lo ancho del contenedor = casi la altura de la pantalla),
   tapando el log de progreso que aparece debajo al procesar. Se limita
   la altura para que quede chico y el resto del paso siga visible.
   OJO: esta regla tenia tambien #previewVideoBox, de la vieja pantalla de
   Fotos. Ese id ahora lo usa la caja de "Así va quedando", donde el video
   tiene que llenar la caja entera -- el max-height de acá se lo comia. */
#videoPreviewBox video {
  width: auto;
  max-width: 100%;
  max-height: 30vh;
  margin: 12px auto 0;
}

/* Reproductores: sin boton de silenciar ni de pantalla completa, en TODAS
   las pantallas. El atributo controlsList saca el de pantalla completa a
   nivel navegador; estos pseudo-elementos (WebKit/Blink, que es lo que
   corre la PWA en Android e iOS) sacan ademas el de volumen, que no tiene
   equivalente en controlsList. */
video::-webkit-media-controls-mute-button,
video::-webkit-media-controls-volume-slider,
video::-webkit-media-controls-volume-control-container,
video::-webkit-media-controls-fullscreen-button {
  display: none !important;
}

.result-video { margin-bottom: 8px; }
/* Apilados y al mismo ancho, como el resto de los botones de accion. */
.result-actions { display: flex; flex-direction: column; gap: 8px; }
.result-actions button { margin-top: 8px; }

/* Reproductor con reloj en vivo superpuesto (esquina superior derecha) --
   compartido por Revision y Fotos. Chico a proposito: prioriza que se vea
   mas interfaz (campos de tiempo, lista de cambios) sin scroll -- no hace
   falta que el preview ocupe media pantalla. */
.video-clock-wrap { position: relative; }
.video-clock-wrap video {
  display: block;
  height: 130px;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 10px;
  background: #000;
}
.live-clock {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.65);
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 14px;
  border-radius: 8px;
  pointer-events: none;
}

/* Marcado por tiempo preciso (Inicio/Fin, minuto:segundo.decima) --
   reemplaza la vieja linea de tiempo tocable/arrastrable, mismo mecanismo
   compartido por Revision y Fotos. Los numeros son lo que mas se toca/lee
   de esta pantalla -- al menos el doble de grandes que un input normal,
   para que se lean y se toquen bien sin hacer zoom. */
.time-range-picker { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; }
.time-field label { display: block; margin-bottom: 4px; font-weight: 600; font-size: 0.9rem; }
.time-inputs { display: flex; align-items: center; padding: 10px 14px; gap: 4px; flex-wrap: wrap; }
.time-inputs span { color: var(--text-dim); font-size: 1.6rem; }
.time-inputs input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 26px;
  font-weight: 600;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  text-align: center;
  padding: 6px 2px;
  width: 52px;
}
.time-inputs .time-min { width: 52px; }
.time-inputs input.dec { width: 40px; }
.time-inputs button { margin-left: 6px; }
.time-range-picker .hint.error { color: var(--danger); }

/* Pantallas "Ajustá tu video" y "Así va quedando": diseño de referencia
   (diseno-final-ajustar-y-revisar.html) portado literal -- valores
   copiados tal cual del archivo, escopeados bajo .fotos-cortes para no
   pisar .card/.btn/h1/h2 genericos que usa el resto de la app.
   Los campos de tiempo son <input type="text" inputmode="numeric"> donde
   el archivo muestra <span class="val"> (es un mockup estatico): mismo
   tamaño y color, pero editables y sin las flechitas de type="number". */
.fotos-cortes h1 { font-size: 16px; margin: 4px 0 6px; }
.fotos-cortes p.hint { font-size: 11px; color: var(--text-dim); line-height: 1.35; margin: 0 0 12px; }

.fotos-cortes .video-box {
  position: relative; background: #000; border-radius: 10px; height: 130px;
  overflow: hidden; margin-bottom: 6px; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.2); font-size: 24px;
}
/* "Así va quedando" tiene poca info aparte del video (badge, resumen y dos
   botones), asi que el reproductor se lleva casi toda la pantalla: la caja
   base (130px) primero fue a 195px y despues un 80% mas -> 351px. */
.fotos-cortes .video-box.preview { border-color: var(--accent-2); height: 351px; }
/* En "Ajustá tu video" se saco el texto de ayuda de arriba y ese espacio
   se le da al reproductor -- ahi la caja va mas alta que en el preview. */
.fotos-cortes .video-box.tall { height: 180px; }
.fotos-cortes .video-box video {
  width: 100%; height: 100%; object-fit: contain; display: block; background: #000;
}
/* El video del preview entra ENTERO en la caja, con su formato original
   (object-fit: contain, heredado de la regla de arriba): la caja es mas
   ancha que un 9:16, asi que quedan franjas a los costados -- preferible
   a recortar el cuadro, que es justamente lo que hay que poder revisar. */
.fotos-cortes .quality-badge {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: rgba(255, 221, 87, 0.15); border: 1px solid var(--accent-2); color: var(--accent-2);
  font-size: 9px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
}
.fotos-cortes .time-readout-overlay {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: rgba(0, 0, 0, 0.75); border: 1px solid var(--accent); color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px; font-weight: 700; padding: 4px 10px; border-radius: 8px;
  pointer-events: none;
}

.fotos-cortes .mode-switch {
  display: flex; gap: 6px; margin-bottom: 12px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 4px;
}
.fotos-cortes .mode-switch .opt {
  flex: 1; text-align: center; padding: 8px; border-radius: 8px;
  font-size: 11.5px; font-weight: 700; color: var(--text-dim); cursor: pointer;
}
.fotos-cortes .mode-switch .opt.active.photo { background: var(--accent); color: #06222b; }
.fotos-cortes .mode-switch .opt.active.cut { background: var(--danger); color: #2b0a0a; }

.fotos-cortes .card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px; margin-bottom: 12px;
}
.fotos-cortes .card.photo-card { border-color: var(--accent); }
.fotos-cortes .card.cut-card { border-color: var(--danger); }
.fotos-cortes .card h2 { font-size: 12px; margin: 0 0 10px; font-weight: 700; color: var(--accent); }
.fotos-cortes .card.cut-card h2 { color: var(--danger); }

.fotos-cortes .time-field-row { display: flex; gap: 8px; margin-bottom: 8px; }
.fotos-cortes .time-field { flex: 1; }
.fotos-cortes .time-field label { display: block; font-size: 10px; color: var(--text-dim); margin-bottom: 5px; }
.fotos-cortes .ftime-inputs {
  display: flex; align-items: center; gap: 3px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 8px;
}
.fotos-cortes .ftime-inputs input {
  width: 34px; background: transparent; border: none; color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px;
  text-align: center; outline: none;
  /* padding 0 explicito: la regla global `input[type="text"]` de la app
     mete padding 10px 12px, y con box-sizing:border-box eso dejaba unos
     pocos px utiles adentro del campo -- el numero quedaba cortado. El
     archivo de referencia no tiene esa regla global, asi que para portarlo
     fiel hay que anularla acá. */
  padding: 0;
}
.fotos-cortes .ftime-inputs input.dec { width: 26px; color: var(--accent); }
.fotos-cortes .ftime-inputs .sep { color: var(--text-dim); font-size: 13px; }
.fotos-cortes .use-current-btn { font-size: 9.5px; color: var(--accent); margin-top: 3px; cursor: pointer; }

.fotos-cortes .mode-row { display: flex; gap: 6px; margin: 10px 0 8px; }
.fotos-cortes .mode-opt {
  flex: 1; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px; text-align: center; font-size: 10px; color: var(--text-dim);
  cursor: pointer;
}
.fotos-cortes .mode-opt.selected { border-color: var(--accent-2); color: var(--accent-2); font-weight: 600; }

.fotos-cortes .dropzone {
  background: var(--surface-2); border: 2px dashed var(--border); border-radius: 8px;
  padding: 14px; text-align: center; font-size: 10.5px; color: var(--text-dim); margin-top: 8px;
  cursor: pointer;
}

.fotos-cortes .btn {
  display: block; width: 100%; text-align: center; border-radius: 10px;
  /* Tipografia 2pt mas grande que el archivo de referencia (12px -> 14px)
     pero el boton NO crece: se compensa bajando el padding vertical y
     fijando el line-height, asi la altura total queda igual que antes. */
  font-size: 14px; line-height: 1.15; padding: 8px 10px;
  font-weight: 700; cursor: pointer; border: none; margin-top: 6px;
}
.fotos-cortes .btn-photo { background: var(--accent); color: #06222b; }
.fotos-cortes .btn-cut { background: var(--danger); color: #2b0a0a; }
.fotos-cortes .btn-accent2 { background: var(--accent-2); color: #2b1f00; }
/* "Terminar video" va SIEMPRE en turquesa (el acento de la app), en las
   dos pantallas -- no en el verde del archivo de referencia. */
/* btn-success ya no se usa para "Terminar video" (pasó a .btn-turquesa).
   Queda como verde de acción por si alguna pantalla vieja lo trae. */
.fotos-cortes .btn-success { background: var(--verde); color: #06281a; }
.fotos-cortes .btn-secondary { background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); }
.fotos-cortes .btn[disabled] { opacity: 0.5; cursor: default; }

.fotos-cortes .section-title { font-size: 12.5px; font-weight: 700; margin: 12px 0 8px; }

.fotos-cortes .marked-item {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 10px; margin-bottom: 7px;
}
.fotos-cortes .marked-item .badge {
  font-size: 9px; font-weight: 700; padding: 3px 7px; border-radius: 999px; flex-shrink: 0;
}
.fotos-cortes .marked-item .badge.photo { background: rgba(87, 221, 255, 0.15); color: var(--accent); }
.fotos-cortes .marked-item .badge.cut { background: rgba(255, 138, 138, 0.15); color: var(--danger); }
.fotos-cortes .marked-item .info { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.fotos-cortes .marked-item .actions { display: flex; gap: 10px; flex-shrink: 0; }
.fotos-cortes .marked-item .action-btn { font-size: 15px; cursor: pointer; }
.fotos-cortes .marked-item .action-btn.edit { color: var(--accent-2); }
.fotos-cortes .marked-item .action-btn.del { color: var(--danger); }

.fotos-cortes .note-box {
  background: rgba(255, 221, 87, 0.08); border: 1px dashed var(--accent-2); border-radius: 8px;
  padding: 8px; font-size: 10px; color: var(--accent-2); text-align: center; margin: 10px 0;
}

.markers-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.marker-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 138, 138, 0.12);
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: 20px;
  padding: 4px 6px 4px 10px;
  font-size: 0.82rem;
}
.marker-chip button {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 2px 4px;
}
.revision-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.revision-actions button { flex: 1; margin-top: 0; }

.copy-block {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
  white-space: pre-wrap;
  font-size: 0.88rem;
}
.copy-block h3 { margin: 0 0 8px; font-size: 0.85rem; color: var(--accent); }

table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); }
th { color: var(--text-dim); font-weight: 600; font-size: 0.85rem; }
.badge { display: inline-block; padding: 2px 6px; border-radius: 6px; font-size: 0.8rem; }
.badge.yes { background: rgba(107,255,160,0.15); color: var(--success); }
.badge.no { background: rgba(154,161,180,0.15); color: var(--text-dim); }

.badge.status-esperando { background: rgba(154,161,180,0.15); color: var(--text-dim); }
.badge.status-creado { background: rgba(87,221,255,0.15); color: var(--accent); }
.badge.status-descargado { background: rgba(255,221,87,0.15); color: var(--accent-2); }
.badge.status-publicado { background: rgba(107,255,160,0.15); color: var(--success); }
.badge.status-fallido { background: rgba(255,138,138,0.15); color: var(--danger); }
.badge.status-en_revision { background: rgba(87,221,255,0.15); color: var(--accent); }

.collapsible-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.collapsible-body {
  display: none;
  margin-top: 12px;
}
.collapsible-body.open {
  display: block;
}

/* Historial: fecha y agente como datos secundarios al lado del titulo.
   El agente solo aparece donde se mezclan videos de varias personas. */
/* Lo que dice el video cuando no tiene titulo. En cursiva y mas apagado:
   es una cita de lo que se escucha, no un nombre que alguien puso. */
.hist-arranque { font-style: italic; color: var(--text-dim); }

/* Cuanto dura. Es lo unico que separa dos tomas del mismo guion. */
.hist-dura {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  font-size: 12px;
  margin-left: 8px;
}

.hist-date { color: var(--text-dim); font-size: 0.8rem; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.hist-agent {
  font-size: 0.78rem;
  color: var(--accent);
  background: rgba(87, 221, 255, 0.12);
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
}
.history-title {
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 0.85rem;
}

/* Registro de fallas: el motivo en castellano se lee de una, y el volcado
   de ffmpeg queda plegado para quien lo necesite. */
.falla-detalle { margin-top: 6px; }

.falla-detalle summary {
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.falla-detalle pre {
  margin: 6px 0 0;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.72rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow-y: auto;
}

/* ====================================================================
   PANTALLA DE CORTES (bloque C)
   Portada del mockup pantalla-cortes-v6. Se adaptaron los colores a la
   paleta de la app en vez de copiar los del mockup: el resto de la app
   ya tiene identidad propia y dos paletas conviviendo se ven como un
   parche. La estructura, los tamaños y las jerarquias son las del
   mockup.
   ==================================================================== */

.cortes-mono { font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace; }

/* ---- escenario del video ---- */
.cortes-stage {
  position: relative;
  width: 100%;
  height: 46vh;
  min-height: 300px;
  max-height: 420px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.cortes-stage video { height: 100%; width: auto; max-width: 100%; }

.cortes-lo {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 3px 7px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.5);
}

/* El tiempo va SOBRE el video, no debajo: mirar el cuadro y el reloj a
   la vez es lo que permite parar donde uno quiere. */
/* El timecode sube para dejarle lugar a la barra: si comparten la franja
   de abajo, el dedo que arrastra tapa justo el numero que hay que leer. */
.cortes-tcbar {
  position: absolute;
  left: 0; right: 0; bottom: 26px;
  padding: 26px 14px 4px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 30%, transparent);
  display: flex;
  align-items: baseline;
  gap: 10px;
  pointer-events: none;
}

.cortes-scrub {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 26px;
  margin: 0;
  padding: 0 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.cortes-scrub::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--accent) 0 var(--avance, 0%),
    rgba(255, 255, 255, 0.28) var(--avance, 0%) 100%
  );
}
.cortes-scrub::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.28);
}
.cortes-scrub::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
/* Pulgar grande a proposito: se arrastra con el dedo sobre el video. */
.cortes-scrub::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.cortes-scrub::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.cortes-scrub:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ====================================================================
   Pantalla de FOTOS (#/fotos) -- paleta del mockup pantalla-fotos-v2
   El violeta es el color propio de las fotos, igual que el turquesa lo es
   de los cortes: los dos pasos se distinguen de un vistazo.
   ==================================================================== */
:root { --foto: #B98CE8; }

.fotos-stage {
  position: relative;
  width: 100%;
  height: 300px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  margin-top: 4px;
}
.fotos-stage video { height: 100%; width: auto; max-width: 100%; }

.fotos-lo {
  position: absolute;
  top: 12px; right: 12px;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid rgba(230, 237, 243, 0.14);
  padding: 4px 8px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.5);
}

/* Sube 26 px para dejarle lugar a la barra de posición, igual que en la
   pantalla de cortes: si comparten la franja, el dedo tapa el número. */
.fotos-tcbar {
  position: absolute;
  left: 0; right: 0; bottom: 26px;
  padding: 28px 15px 4px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 34%, transparent);
  display: flex;
  align-items: baseline;
  gap: 10px;
  pointer-events: none;
}
.fotos-tc { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
.fotos-tc em { font-style: normal; color: var(--foto); }
.fotos-of { font-size: 11px; color: var(--text-dim); margin-left: auto; }
.fotos-of b { color: var(--verde); font-weight: 500; }

/* La barra hereda todo de .cortes-scrub; acá solo cambia el color, que en
   esta pantalla es el violeta de las fotos. */
.fotos-scrub::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    var(--foto) 0 var(--avance, 0%),
    rgba(255, 255, 255, 0.28) var(--avance, 0%) 100%
  );
}
.fotos-scrub::-moz-range-progress { background: var(--foto); }
.fotos-scrub:focus-visible { outline-color: var(--foto); }

/* La regla: dónde caen las fotos ya cargadas y dónde cae la selección.
   Dos fotos pegadas quedan mal y sin esto no se nota hasta el preview. */
.fotos-ruler { position: relative; height: 24px; margin: 0 2px; display: flex; align-items: center; }
.fotos-ruler .track {
  position: absolute; left: 0; right: 0; height: 3px;
  background: var(--surface-2); border-radius: 2px;
}
.fotos-ruler .pin {
  position: absolute; height: 9px; background: var(--foto);
  border-radius: 2px; opacity: 0.5;
}
/* LA PLACA, DISTINTA DE LAS FOTOS.

   La regla se mira para ver si la placa se pisa con una foto: dos marcas
   del mismo color pegadas se leen como una sola marca larga, y entonces
   la regla no sirve para lo unico que se viene a mirar aca.

   Llena y mas alta, con borde claro: la placa TAPA lo que haya abajo, y
   eso es lo que la marca tiene que decir de un vistazo. */
.fotos-ruler .pin.placa {
  height: 13px;
  opacity: 1;
  background: #E9E4FF;
  border: 1px solid #A79BE8;
  border-radius: 3px;
}
.fotos-ruler .sel { position: absolute; height: 9px; background: var(--foto); border-radius: 2px; }
.fotos-ruler .head { position: absolute; height: 15px; width: 1.5px; background: var(--text); }
.fotos-rulerlbl {
  display: flex; justify-content: space-between;
  padding: 2px 2px 8px;
  font-size: 9.5px; color: var(--text-dim); letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
}

/* ---- los tres pasos ---- */
.fpaso { border-top: 1px solid var(--border); padding: 14px 2px 16px; }
.fpaso:first-of-type { border-top: 0; }
.fhead { display: flex; align-items: baseline; gap: 9px; margin-bottom: 3px; flex-wrap: wrap; }
.fnum {
  font-size: 10.5px; color: var(--text-dim); font-weight: 500;
  border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px;
  font-variant-numeric: tabular-nums;
}
.fpaso.live .fnum { color: var(--bg); background: var(--foto); border-color: var(--foto); }
.fpaso.done .fnum { color: var(--verde); border-color: rgba(126, 224, 166, 0.45); }
.fttl { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.fpaso.off .fttl { color: var(--text-dim); font-weight: 500; }
.fsub { font-size: 12.5px; color: var(--text-dim); line-height: 1.55; margin: 0 0 12px; }
.fpaso.off .fsub { margin-bottom: 0; }
/* Solo cuánto dura. Los tiempos ya están en los dos campos de abajo:
   repetirlos arriba en verde era decir dos veces lo mismo. */
.fdur {
  margin-left: auto;
  font-size: 12px;
  color: var(--verde);
  font-variant-numeric: tabular-nums;
}

/* Volver a marcar los tiempos. En amarillo, no en el azul de link por
   defecto: sobre el fondo oscuro ese azul no se lee. */
.fvolver {
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fvolver:visited { color: var(--accent-2); }

/* EL TITULO Y LA CRUZ, EN EL MISMO RENGLON.

   Sin esto el `div` se apila y la cruz sale abajo del titulo, grande,
   como si fuera la accion de la tarjeta. La cruz es la salida: chica y al
   costado. */
.hn-cola-cab {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.hn-cola-cab h4 { flex: 1; margin: 0; }
.hn-cola-cab .hn-descartar { flex: 0 0 auto; }

/* EL CARTEL DE «LA AGREGUE».

   Verde porque cambio algo sin sacar al agente de la pantalla. EN BORDE
   Y NO PINTADO porque es un aviso y no una accion: no se toca, y pintado
   competiria con lo que la pantalla vino a pedir. */
.fotos-listo {
  margin: 0 0 14px;
  padding: 10px 13px;
  border-radius: 10px;
  border: 1px solid rgba(126, 224, 160, .38);
  background: rgba(126, 224, 160, .08);
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.4;
}
.fotos-listo b { color: var(--verde); }

/* ---- DICTAR EN UN CAMPO ---------------------------------------- */

.dictar-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

/* VERDE Y EN BORDE. Verde porque cambia algo sin sacarte de la pantalla:
   escribe en el campo que tenes adelante. En borde porque la pantalla no
   vino a pedir que dictes, vino a pedir una imagen -- pintado competiria
   con «Generar imagen», que es lo que sigue. */
.dictar {
  width: auto;
  min-height: 38px;
  margin-top: 0;
  flex: 0 0 auto;
  padding: 7px 14px;
  gap: 7px;
  border-radius: 9px;
  background: transparent;
  border: 1px solid rgba(126, 224, 160, .42);
  color: var(--verde);
  font-size: 0.9rem;
  font-weight: 600;
}

.dictar:active { background: rgba(126, 224, 160, .10); }
.dictar:disabled { opacity: .55; }

/* GRABANDO, EL UNICO ROJO DE LA PANTALLA. No es un camino: es la senial
   de que el microfono esta abierto. El que se distrajo hablando tiene que
   poder mirar la pantalla y saber que todavia lo escuchan. */
.dictar.grabando {
  border-color: rgba(255, 107, 107, .55);
  color: #FF6B6B;
  background: rgba(255, 107, 107, .10);
}

.dictar.grabando svg { animation: dictar-late 1.1s ease-in-out infinite; }

@keyframes dictar-late {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

.dictar-aviso {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text-dim, #8b949e);
}

/* EL VIOLETA SE FUE. Esta regla pintaba «Marcar desde» de la pantalla
   de fotos con un degrade violeta, «el pide de esta pantalla es violeta,
   no turquesa» -- y el mismo boton en la pantalla de cortes es celeste.
   El mismo control, dos colores, y encima el violeta es el de la marca:
   titulos, numeros, el formato. Ahora usa `.pide`, como el otro. */

.fpair { display: flex; gap: 9px; }
.fchoice {
  flex: 1; min-height: 72px; padding: 10px 8px;
  border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: 13px; font-weight: 500; color: var(--text); text-align: center;
  cursor: pointer;
}
.fchoice .ic { font-size: 16px; color: var(--text-dim); }
.fchoice.on { border-color: var(--foto); background: rgba(185, 140, 232, 0.1); }
.fchoice.on .ic { color: var(--foto); }
.fchoice small { font-size: 10px; color: var(--text-dim); font-weight: 400; line-height: 1.3; }

.fprompt {
  margin-top: 11px; width: 100%;
  border: 1px solid var(--border); border-radius: 11px;
  background: var(--surface-2); padding: 11px 12px;
  font-size: 13px; color: var(--text); line-height: 1.5;
  font-family: inherit; resize: vertical;
}
.fgenb {
  margin-top: 9px; width: 100%; height: var(--alto-boton); border-radius: 11px;
  /* Generar y elegir archivo son acciones internas: verde, no turquesa. */
  background: var(--verde); color: #06281a; border: 0;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 14.5px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.fgenb.wait { background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); font-weight: 500; }
.fgenb:disabled { cursor: default; }

.fthumb {
  display: flex; align-items: center; gap: 11px; padding: 9px;
  border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2);
}
.fthumb .im {
  width: 38px; height: 50px; border-radius: 5px; flex: none;
  background-size: cover; background-position: center; background-color: var(--surface);
  border: 1px solid var(--border); padding: 0; cursor: zoom-in;
  min-height: 0; margin: 0; /* no hereda el alto de los botones de accion */
}

/* Visor de imagen a pantalla completa. Se abre ENCIMA del formulario, sin
   navegar: al cerrarlo el paso sigue donde estaba y no hay que rehacer
   nada de lo elegido. */
/* El visor de imagen grande.

   Los botones se reparten el alto ANTES que la imagen, y no al reves.
   Antes la imagen se llevaba `100vh - 160px` y al pie le quedaba lo que
   sobrara -- que en la compu daba justo por 20 pixeles y en el telefono
   no daba: `100vh` mide la ventana SIN la barra del navegador, o sea mas
   de lo que se ve. Resultado: abrias una imagen y "← Volver" quedaba
   abajo del borde, sin forma de salir salvo tocar el fondo.

   Ahora el pie es `flex: 0 0 auto` (toma lo suyo primero) y la imagen
   `flex: 1 1 auto; min-height: 0` (se queda con el resto, sea el que
   sea). No hay ninguna cuenta de pixeles que pueda quedar corta. */
.visor {
  position: fixed; inset: 0; z-index: 200;
  height: 100dvh; /* dvh descuenta la barra del navegador; vh no */
  background: rgba(0, 0, 0, 0.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 20px;
}
.visor img {
  max-width: 100%;
  flex: 1 1 auto;
  min-height: 0; /* sin esto un hijo flex no baja de su tamanio natural */
  object-fit: contain; border-radius: 10px;
}
.visor-pie {
  display: flex; flex-direction: column; gap: 9px; width: 100%; max-width: 420px;
  flex: 0 0 auto;
}
.visor-pie .btn { margin-top: 0; }
.fthumb .nm { font-size: 12.5px; }
.fthumb .sz { font-size: 10px; color: var(--text-dim); margin-top: 3px; }
.fthumb .x {
  margin-left: auto; color: var(--text-dim); font-size: 14px;
  background: none; border: 0; cursor: pointer; padding: 0 4px;
}

/* Cierra el paso 1 y abre el 2. Es lo único que pliega el paso: sin esto
   se plegaba solo al quedar válido el tramo, o sea mientras el dedo seguía
   sobre la pantalla, y el DOM se rearmaba en el peor momento. */
.fotos-aceptar {
  width: 100%;
  height: var(--alto-boton);
  margin-top: 12px;
  border-radius: 10px;
  border: 1px solid #a8f0c4;
  border-bottom: 3px solid #1f6b41;
  background: linear-gradient(180deg, #8fe9b0 0%, #5cc885 100%);
  color: #06281A;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}
.fotos-aceptar:active {
  transform: translateY(3px);
  border-bottom-width: 1px;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.45);
}
/* Deshabilitado sigue OCUPANDO lugar y diciendo qué falta: si apareciera
   recién al completarse, el paso saltaría justo mientras se marca. */
.fotos-aceptar:disabled {
  background: linear-gradient(180deg, #3a4049 0%, #2b3038 100%);
  border-color: #4a5160;
  border-bottom-color: #1b1f26;
  color: #7d8695;
  cursor: default;
  box-shadow: none;
  transform: none;
}

.fotos-addb {
  width: 100%; height: var(--alto-boton); border-radius: 11px;
  background: var(--verde); color: #0A1A11; border: 0;
  font-size: 15.5px; font-weight: 600; margin-top: 14px;
  cursor: pointer; font-family: inherit;
}
.fotos-addb:disabled { opacity: 0.5; cursor: default; }

/* ---- lista ---- */
.fotos-list { margin-top: 17px; border-top: 1px solid var(--border); }
.flh { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 2px 8px; gap: 10px; }
.flh .l { font-size: 10px; letter-spacing: 0.14em; color: var(--text-dim); text-transform: uppercase; font-weight: 500; }
.flh .r { font-size: 11px; color: var(--text-dim); }
.flh .r b { color: var(--foto); font-weight: 500; }
.fotos-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-top: 1px solid var(--border); }
.fotos-row .im {
  width: 24px; height: 32px; border-radius: 4px; flex: none;
  background: linear-gradient(#2C4356, #3E6B7A);
}
.fotos-row .rng { font-size: 13px; font-weight: 500; }
.fotos-row .len { font-size: 10.5px; color: var(--text-dim); }
.fotos-row .tag {
  font-size: 9px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--foto);
  border: 1px solid rgba(185, 140, 232, 0.4); border-radius: 3px; padding: 1px 4px;
}
.fotos-row .acts { margin-left: auto; display: flex; gap: 14px; }
.fotos-row .acts button {
  background: none; border: 0; color: var(--text-dim);
  font-size: 13px; cursor: pointer; padding: 2px 4px;
}

.fotos-foot { padding-top: 17px; display: flex; flex-direction: column; gap: 9px; }
.fotos-backb {
  height: var(--alto-boton); border: 1px solid var(--border); border-radius: 11px;
  color: var(--text); background: none;
  font-size: 14px; cursor: pointer; font-family: inherit;
}

/* ---- campo con ojito para mostrar/ocultar ---- */
.campo-con-ojo { position: relative; display: flex; align-items: center; }
.campo-con-ojo input { padding-right: 52px; width: 100%; }
.campo-con-ojo .ojo {
  position: absolute;
  right: 6px;
  width: 40px;
  min-height: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.campo-con-ojo .ojo:active { background: var(--surface-2); }

/* ---- estado del disco (panel de Admin) ---- */
.disco-card.en-riesgo { border-color: var(--rojo); box-shadow: 0 0 0 1px var(--rojo) inset; }
.disco-alerta {
  background: rgba(201, 55, 44, 0.14);
  border-left: 3px solid var(--rojo);
  border-radius: 4px;
  padding: 9px 11px;
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.45;
}
.disco-barra {
  height: 8px;
  border-radius: 4px;
  background: var(--surface-2);
  overflow: hidden;
  margin-bottom: 7px;
}
.disco-barra span { display: block; height: 100%; background: var(--accent); }
.disco-card.en-riesgo .disco-barra span { background: var(--rojo); }
.disco-cifras { margin: 0 0 12px; font-variant-numeric: tabular-nums; }

.disco-detalle { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.disco-detalle > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 7px;
}
.disco-detalle .k { font-size: 12px; color: var(--text-dim); min-width: 88px; }
.disco-detalle .v { font-size: 13px; font-variant-numeric: tabular-nums; }
.disco-detalle .n { font-size: 11px; color: var(--text-dim); margin-left: auto; }

/* ---- botones de color, compartidos entre pantallas ---- */
.btn-amarillo { background: var(--accent-2); color: #2b2000; border: 0; font-weight: 600; }
/* EL AMARILLO EN EL BORDE, para lo manual que NO es la principal de la
   pantalla. Faltaba: habia contorno turquesa y no amarillo, asi que lo
   manual secundario terminaba pintado o gris, sin termino medio. */
.btn-amarillo-contorno {
  background: transparent;
  color: var(--accent-2);
  border: 1px solid rgba(255, 221, 87, .42);
  font-weight: 600;
}
.btn-amarillo-contorno:active { background: rgba(255, 221, 87, .10); }

/* «opcional», al lado del titulo de la placa. Chiquito y gris: es un dato
   sobre el panel, no una etiqueta de estado. */
.placa-opt {
  margin-left: 7px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-dim, #8b949e);
}
.btn-turquesa { background: var(--accent); color: #06232b; border: 0; font-weight: 600; }
.btn-verde { background: var(--verde); color: #06281a; border: 0; font-weight: 600; }

/* Los dos "volver" van uno al lado del otro: son el mismo tipo de accion
   hacia dos pasos distintos, no una principal y una secundaria. */
.volver-par { display: flex; flex-direction: column; gap: 8px; }

/* El resumen de cambios es el dato que se viene a leer a esta pantalla:
   10px base + 2. Va con el selector completo porque .fotos-cortes
   .note-box tiene mas especificidad y si no le gana. */
.fotos-cortes .note-box.resumen-cambios { font-size: 12px; }

.cortes-tc { font-size: 28px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
.cortes-tc .dec { color: var(--accent); }
.cortes-de { font-size: 11.5px; color: var(--text-dim); margin-left: auto; }

/* ---- transporte ---- */
.cortes-transport {
  display: flex;
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2);
}

/* Más baja que el resto de los botones de la app (--alto-boton, 48px): los
   saltos de ±1s y ±0,2s se usan de a muchos toques seguidos y no necesitan
   área de botón principal. */
.cortes-nb {
  flex: 1;
  height: 36px;
  /* El `button` general de la app trae min-height: var(--alto-boton) (48px)
     y gana sobre el height de acá. Sin pisarlo, bajar la altura no hacía
     absolutamente nada. */
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  color: var(--text);
  border-right: 1px solid var(--border);
  background: none;
  cursor: pointer;
  font-family: inherit;
}

.cortes-nb:last-child { border-right: 0; }
.cortes-nb:active { background: var(--surface); }
/* Los cuatro de salto son flex:1, asi que se reparten solos el ancho que
   se libera. */
/* EL PLAY NO LLEVA EL COLOR DE LA ACCION PRINCIPAL. Estaba pintado del
   mismo turquesa lleno que «Seguir a las fotos» y «Terminar video», tres
   centimetros mas arriba, asi que el turquesa decia dos cosas en la misma
   pantalla. Mirar el video no es un camino: es como se mira lo que hay
   que decidir. */
.cortes-nb.play { flex: 0 0 56px; background: var(--surface-2); color: var(--accent); font-size: 13px; font-weight: 700; }

/* ---- marcar desde / hasta ---- */
.cortes-panel {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
}

.cortes-half { flex: 1; display: flex; flex-direction: column; }
.cortes-half + .cortes-half { border-left: 1px solid var(--border); }

.cortes-grab {
  height: var(--alto-boton);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-family: inherit;
  width: 100%;
}

/* El que falta se resalta; el que ya esta cargado se apaga. Asi el
   agente sabe cual toca sin leer. */
/* Los dos botones de marcar salen en relieve, no al ras del panel: son la
   acción principal de la pantalla y antes se leían como un encabezado de
   la caja de abajo. El relieve se hunde al apretar, que en un teléfono es
   la única confirmación de que el toque entró -- ahí no hay hover. */
.cortes-grab {
  margin: 7px 7px 5px;
  border-radius: 9px;
  /* Gris claro de verdad, no un tono del fondo: contra el panel oscuro es
     lo único que hace que se lea como una tecla y no como una franja. */
  background: linear-gradient(180deg, #59606d 0%, #3d434e 100%);
  color: #F2F5F9;
  border: 1px solid #6b7383;
  border-bottom: 3px solid #22262e;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.55), 0 5px 10px rgba(0, 0, 0, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transition: transform 0.06s ease, box-shadow 0.06s ease, border-bottom-width 0.06s ease;
}
.cortes-grab:active {
  transform: translateY(3px);
  border-bottom-width: 1px;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.55), inset 0 2px 5px rgba(0, 0, 0, 0.45);
}

/* El que falta marcar, con el mismo volumen pero en color. Mantiene el
   borde inferior grueso: si se apagara el relieve, dejaría de leerse como
   tecla justo en el que hay que apretar. */
.cortes-grab.pide {
  background: linear-gradient(180deg, #6fe3ff 0%, #33bcd9 100%);
  color: #05222B;
  border: 1px solid #8aeaff;
  border-bottom: 3px solid #12596b;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5), 0 5px 14px rgba(87, 221, 255, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.45);
  font-weight: 700;
}
/* Nada de opacity para el que ya se cargó: bajarle la opacidad apaga
   también la sombra y el relieve desaparece, que era justo el problema.
   Se apaga con COLOR, dejando el volumen intacto. */
.cortes-grab:not(.pide) {
  background: linear-gradient(180deg, #474d59 0%, #333944 100%);
  color: #AEB6C2;
}

.cortes-val { padding: 10px 12px 12px; background: var(--surface); }
.cortes-val label {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 5px;
}

.cortes-val input {
  width: 100%;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.02em;
  background: none;
  border: 0;
  color: var(--text);
  padding: 0;
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
}

.cortes-val input::placeholder { color: var(--text-dim); opacity: 0.5; }

/* ---- verificar ---- */
.cortes-verify { margin-top: 10px; display: flex; gap: 8px; }

.cortes-vb {
  flex: 1;
  height: var(--alto-boton);
  border-radius: 11px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}

/* "Cómo queda" es el importante: escuchar el empalme es lo que dice si
   el corte quedo bien. Va resaltado. */
.cortes-vb.clave { border-color: rgba(255, 255, 255, 0.5); font-weight: 500; }
.cortes-vb:disabled { opacity: 0.35; cursor: default; }

/* Con un tramo cargado los dos se encienden, y cada color dice que hace:
   rojo lo que se va, amarillo el empalme que hay que escuchar. Sin tramo
   quedan apagados, porque no hay nada que reproducir. */
.cortes-vb.saca { background: var(--rojo); color: #fff; border-color: var(--rojo); font-weight: 500; }
.cortes-vb.queda { background: var(--accent-2); color: #2b2000; border-color: var(--accent-2); font-weight: 600; }

.cortes-add { margin-top: 10px; display: flex; gap: 8px; }
.cortes-addb {
  flex: 1;
  height: var(--alto-boton);
  border-radius: 11px;
  background: var(--verde);
  color: #06281a;
  font-size: 15.5px;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.cortes-addb:disabled { opacity: 0.35; cursor: default; }

.cortes-undo {
  width: 50px;
  height: var(--alto-boton);
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 17px;
  cursor: pointer;
}
.cortes-undo:disabled { opacity: 0.3; cursor: default; }

/* ---- lista: filas con hairline, no tarjetas ---- */
.cortes-list { margin-top: 20px; border-top: 1px solid var(--border); }

.cortes-lh {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 2px 8px;
  gap: 10px;
  flex-wrap: wrap;
}

.cortes-lh .t {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  text-transform: uppercase;
  font-weight: 500;
}

.cortes-lh .tot { font-size: 11px; color: var(--text-dim); }
.cortes-lh .tot .sil { color: var(--silencio); font-weight: 500; }
.cortes-lh .tot .mio { color: var(--accent); font-weight: 500; }

.cortes-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 2px;
  border-top: 1px solid var(--border);
}

/* Cada origen con su color: los silencios azul apagado, las tomas
   repetidas violeta. Son dos propuestas distintas del sistema y el agente
   tiene que poder decir de un vistazo cual esta mirando. */
.cortes-row.es-silencio { background: rgba(126, 147, 168, 0.06); }
.cortes-row.es-repeticion { background: rgba(176, 140, 217, 0.09); }
.cortes-row.es-repeticion .cortes-tag {
  color: var(--repeticion);
  border-color: rgba(176, 140, 217, 0.4);
}
.cortes-row.grupo.grupo-repeticion { color: var(--repeticion); }
.cortes-row.grupo.grupo-repeticion .cortes-idx { color: var(--repeticion); }
.cortes-row.grupo.grupo-repeticion:hover { background: rgba(176, 140, 217, 0.12); }
.cortes-lh .tot .rep { color: var(--repeticion); }
.cortes-row.devuelto { opacity: 0.4; }


/* Fila resumen de los silencios: se pliega para que no tape los cortes
   propios del agente, que son los que tiene que revisar de verdad. */
.cortes-row.grupo {
  cursor: pointer;
  user-select: none;
  color: var(--silencio);
}
.cortes-row.grupo:hover { background: rgba(126, 147, 168, 0.1); }
.cortes-row.grupo:focus-visible { outline: 2px solid var(--silencio); outline-offset: -2px; }
.cortes-row.grupo .cortes-rng { font-weight: 500; }
.cortes-row.grupo .cortes-idx { color: var(--silencio); }
/* Sangria de las filas de silencio cuando el grupo esta abierto. */
.cortes-row.anidada { padding-left: 16px; }

.cortes-idx { font-size: 11px; color: var(--text-dim); width: 16px; flex: none; }
.cortes-rng { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; }

.cortes-tag {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--silencio);
  border: 1px solid rgba(126, 168, 200, 0.4);
  border-radius: 3px;
  padding: 2px 5px;
}

.cortes-dur { font-size: 11.5px; color: var(--text-dim); }
.cortes-acts { margin-left: auto; display: flex; gap: 6px; }

.cortes-acts button {
  background: none;
  border: 0;
  color: var(--text-dim);
  font-size: 15px;
  cursor: pointer;
  padding: 4px 6px;
  width: auto;
  margin: 0;
}
.cortes-acts button:hover { color: var(--text); }

/* ---- pregunta de bienvenida de los silencios (B.2) ---- */
.cortes-ask { padding: 20px 2px 4px; }
.cortes-ask .grande { font-size: 18px; font-weight: 500; line-height: 1.4; margin-bottom: 6px; }
.cortes-ask .grande b { color: var(--silencio); font-weight: 700; }
.cortes-ask .sub { font-size: 13.5px; color: var(--text-dim); line-height: 1.6; margin-bottom: 16px; }

/* Perfil de voz: lo construye el Cerebro de Contenido y aca es solo
   lectura, por eso no se ve como un formulario. */
.perfil-titulo {
  font-size: 0.92rem;
  margin: 18px 0 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.perfil-titulo:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

.frases-voz {
  margin: 8px 0;
  padding-left: 18px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-dim);
}

.frases-voz li { margin-bottom: 6px; }

.perfil-rasgo { font-size: 0.88rem; line-height: 1.45; margin: 6px 0; color: var(--text-dim); }

.scroll-tabla { overflow-x: auto; }

.tabla-perfil { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.tabla-perfil td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
.tabla-perfil td.num { text-align: right; font-variant-numeric: tabular-nums; width: 4em; }
.tabla-perfil tr:last-child td { border-bottom: 0; }

.perfil-pie { margin-top: 14px; font-size: 0.8rem; }

/* Separador dentro de una card para agrupar campos que van juntos
   (ej. los seguidores iniciales, debajo de nombre y apodo). */
.datos-subtitulo {
  margin: 18px 0 2px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 0.95rem;
}

/* Banner de instalacion de la PWA: aparece pegado abajo del encabezado,
   una sola vez (ver la logica de "pospuesto/instalada" en app.js). */
.install-banner {
  /* mismo ancho y centrado que #app, para que no se vea despegado del
     resto del contenido en pantallas anchas */
  width: calc(100% - 32px);
  max-width: 608px;
  margin: 12px auto 0;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--accent);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.install-banner[hidden] {
  display: none;
}

.install-texto {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.9rem;
  line-height: 1.35;
}

.install-texto span {
  color: var(--text-dim);
}

.install-botones {
  display: flex;
  gap: 8px;
}

.install-botones button {
  flex: 1;
  margin: 0;
}

/* El simbolo de compartir de iOS, resaltado dentro de la instruccion
   para que se ubique de un vistazo cual es el boton. */
.ios-share {
  display: inline-block;
  padding: 0 5px;
  border-radius: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
}

/* Editor de ficha que el Admin abre debajo de cada agente de la lista.
   Va sangrado para que se lea como "esto pertenece al agente de arriba". */
.ficha-editor {
  margin: -4px 0 12px 12px;
  padding: 10px 12px;
  border-left: 2px solid var(--accent);
  background: var(--surface-2);
  border-radius: 0 10px 10px 0;
}

/* Pantalla de Fotos: pestanas de modo (Poner foto / Marcar corte) y la
   lista combinada de cambios marcados (fotos y cortes juntos, en el
   orden en que se agregaron). */
.mode-tabs { display: flex; gap: 8px; margin: 14px 0 4px; }
.mode-tab {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 10px 10px 0 0;
  padding: 10px;
  font-weight: 600;
}
.mode-tab.active {
  background: var(--surface);
  color: var(--accent);
  border-color: var(--accent);
  border-bottom-color: var(--surface);
}

.change-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 0.85rem;
}
.change-detail { flex: 1; }
.change-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 100px;
  flex-shrink: 0;
}
.change-tag-foto { background: rgba(87, 221, 255, 0.15); color: var(--accent); }
.change-tag-corte { background: rgba(255, 138, 138, 0.15); color: var(--danger); }

.ai-photo-preview { margin-top: 12px; }
.ai-photo-preview img {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.ai-photo-preview .row-buttons { display: flex; gap: 10px; margin-top: 10px; }
.ai-photo-preview .row-buttons button { flex: 1; }

.training-item { margin-bottom: 16px; }
.training-item:last-child { margin-bottom: 0; }
.training-thumb {
  position: relative;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}
.training-thumb img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
.training-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px; /* redondo: el alto tiene que igualar al ancho, no al de los botones */
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.training-info { padding: 8px 2px 0; }
.training-title { font-weight: 600; }
.training-desc { font-size: 0.85rem; color: var(--text-dim); margin-top: 2px; }

.spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.center-text { text-align: center; }
.muted { color: var(--text-dim); }

/* ---- Empalmes del preview ----------------------------------------
   Cada juntura del video cortado, en orden de escucha. Los colores por
   origen son los mismos que en la lista de cortes: si en una pantalla
   "repetida" es violeta, en la otra también. */
.emp-panel {
  /* Red final: pase lo que pase, el panel no se sale de la pantalla. */
  overflow-x: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  margin: 12px 0;
  background: var(--surface-2);
}

.emp-nav { display: flex; align-items: center; gap: 10px; }
.emp-nb {
  flex: 0 0 44px;
  height: 44px;
  margin: 0;
  min-height: 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
}
.emp-nb:disabled { opacity: 0.3; cursor: default; }
.emp-actual { flex: 1; text-align: center; }
.emp-titulo { font-size: 13.5px; font-weight: 500; }
.emp-sub { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }

.emp-oir { display: flex; gap: 8px; margin-top: 10px; }
.emp-oir button {
  flex: 1;
  height: 38px;
  min-height: 0;
  margin: 0;
  padding: 0 8px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
}
.emp-oir button.peligro { border-color: rgba(255,138,138,0.45); color: var(--danger); }

/* La lista se limita en alto y scrollea: con 25 empalmes, suelta empuja
   el botón de terminar fuera de la pantalla. */
.emp-lista {
  margin-top: 12px;
  max-height: 190px;
  overflow-y: auto;
  border-top: 1px solid var(--border);
}
.emp-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 12.5px;
}
.emp-fila:hover { background: rgba(255,255,255,0.04); }
/* La barrita del evento actual, en el turquesa del acento -- el mismo
   color del reloj, para que se lea que hablan de lo mismo. Gruesa: es la
   unica marca de donde esta parada la reproduccion. */
.emp-fila.actual { background: rgba(87, 221, 255, 0.10); box-shadow: inset 3px 0 0 var(--accent); }
.emp-t { flex: 0 0 54px; color: var(--text-dim); }
.emp-sin-texto { color: var(--text-dim); font-style: italic; }
.emp-o { flex: 1; }
.emp-pie { margin-top: 8px; font-size: 11px; color: var(--text-dim); }

/* Acciones en bloque por origen. Sin esto, devolver 12 propuestas malas
   serían 12 escuchas y 12 toques -- más trabajo que el botón único que
   había antes, y justo para el detector que peor anda. */
.emp-bloque { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.emp-bloque button {
  flex: 1 1 auto;
  min-width: 150px;
  height: 34px;
  min-height: 0;
  margin: 0;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 138, 138, 0.35);
  background: none;
  color: var(--danger);
  font-size: 11.5px;
  font-family: inherit;
  cursor: pointer;
}

/* El reloj del preview: mismo formato que el de la pantalla de cortes
   (minutos:segundos.décimas). Un empalme dura menos de un segundo, así que
   sin décimas no se puede hablar de él. */
.emp-reloj {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 3;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  pointer-events: none;
  margin-top: 6px;
  font-size: 21px;
  letter-spacing: 0.02em;
  color: var(--accent);
}
.emp-reloj .dec { opacity: 0.55; font-size: 0.7em; }

/* Ajuste fino de una juntura. Cada toque mueve una punta 0,2 s y vuelve a
   reproducirla, así que los botones se aprietan muchas veces seguidas:
   chicos pero con área cómoda, y en dos filas para que no haya que pensar
   cuál punta se está tocando. */
.emp-ajuste { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px; }
/* Todo entra en una fila de teléfono. Antes eran 2 etiquetas de 62px + 4
   botones de 62px + el de "todo" + espacios de 8px = unos 490px, y una
   pantalla de teléfono tiene 360-390: se iba de largo. Ahora las etiquetas
   se achican al texto, los botones miden 40 y el gap es de 4. Y wrap como
   red: pase lo que pase, no puede salirse del cuadro. */
.emp-ajuste-fila {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.emp-ajuste-et {
  flex: 0 0 auto;
  font-size: 9.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.emp-ajuste-et + button { margin-left: 1px; }
.emp-ajuste-leyenda {
  font-size: 10.5px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.emp-ajuste-fila button {
  flex: 0 0 32px;
  height: 36px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
}
.emp-ajuste-fila button:active { background: rgba(87, 221, 255, 0.15); }

/* Volver al video entero, y saber qué está sonando. Sin el cartel, después
   de escuchar una juntura se ve un reproductor con 6 segundos adentro y no
   hay forma de darse cuenta de que no es el video completo. */
.emp-fuente { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.emp-fuente button {
  flex: 1 1 auto;
  min-width: 200px;
  height: 36px;
  min-height: 0;
  margin: 0;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid var(--accent);
  background: none;
  color: var(--accent);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
}
.emp-fuente button:active { background: rgba(87, 221, 255, 0.15); }
.emp-fuente-et { font-size: 10.5px; color: var(--text-dim); font-style: italic; }

/* Botón de "ver todo", en la misma fila que los ajustes. */
.emp-todo {
  /* Ancho fijo y chico: con flex:1 se iba a una segunda línea y ahí se
     estiraba a todo el ancho, que es justo lo que había que evitar. */
  flex: 0 0 auto !important;
  /* El `button` general de la app trae width:100%. Con flex-basis:auto ese
     100% se toma como ancho pedido, así que el botón se iba solo a una
     segunda fila y ahí se estiraba a todo el ancho. Hay que pisarlo. */
  width: auto !important;
  min-width: 0;
  padding: 0 7px !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  font-size: 11.5px !important;
}

/* ---- Encuadre de un video apaisado -------------------------------- */
.enc-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
.enc-tab {
  flex: 1;
  height: 40px;
  min-height: 0;
  margin: 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.enc-tab.activa { border-color: var(--accent); color: var(--accent); }

/* La caja con el formato de destino. El video se mueve ADENTRO: overflow
   oculto es lo que hace que se vea exactamente lo que va a quedar. */
.enc-caja {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border);
  border-radius: 12px;
  touch-action: none; /* si no, arrastrar scrollea la página */
  cursor: grab;
}
.enc-caja video {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  max-width: none; /* si no, la regla global lo achica y rompe la cuenta */
}

.enc-acciones { display: flex; gap: 8px; justify-content: center; margin: 12px 0; }
.enc-b {
  flex: 0 0 auto;
  min-width: 64px;
  height: 40px;
  min-height: 0;
  margin: 0;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}

/* Guías de las franjas negras. No se graban: son para saber cuánto aire
   dejar arriba (título) y abajo (subtítulos) al achicar el video. */
.enc-guia {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  pointer-events: none;
  z-index: 2;
}
.enc-guia.arriba { top: 6px; }
.enc-guia.abajo { bottom: 6px; }
.enc-ayuda { text-align: center; margin-top: -4px; }

/* Rayas que marcan hasta dónde se puede acomodar el video: arriba de la de
   arriba va el título, abajo de la de abajo van los subtítulos. Punteadas
   y tenues -- son una referencia, no un borde del video. */
.enc-raya {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px dashed rgba(87, 221, 255, 0.5);
  pointer-events: none;
  z-index: 2;
}

/* "reiniciar" tira todo lo hecho con los cortes, así que se pinta como lo
   que es: una acción destructiva. En el segundo toque se enciende. */
.emp-reiniciar {
  border-color: rgba(255, 138, 138, 0.45) !important;
  color: var(--danger) !important;
}
.emp-reiniciar.confirmando {
  background: rgba(255, 138, 138, 0.18) !important;
  border-color: var(--danger) !important;
  font-weight: 600;
}

/* "ver todo" queda centrado en el espacio que sobra y "reiniciar" pegado
   al borde derecho: los márgenes automáticos se comen todo el hueco
   disponible, así que la posición no depende de cuánto mida cada texto. */
.emp-centro { margin-left: auto !important; margin-right: auto !important; }
.emp-reiniciar { margin-left: 0 !important; }

/* El botón de rearmar va pegado a las flechas de navegación, con alto
   reducido: es un aviso mientras se recorren los empalmes, no el botón
   principal de la pantalla. */
.emp-rearmar {
  height: 40px !important;
  min-height: 0 !important;
  margin: 10px 0 0 !important;
  font-size: 13px !important;
}

/* Marco con la forma del formato final, para mostrar el encuadre en las
   pantallas que reproducen el proxy apaisado. El recorte de verdad lo hace
   ffmpeg en el preview; acá alcanza con mostrarlo. */
.marco-encuadre {
  position: relative;
  overflow: hidden;
  background: #000;
  flex: 0 0 auto;
}
.marco-encuadre video {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  max-width: none;
}

/* Renglón que reemplaza a la lista de eventos en Cortes: esas decisiones
   se toman escuchando, en el preview. */
/* El aviso de marcas sin resolver. Va en rojo y no en el color de las
   propuestas a propósito: el resto de la pantalla son sugerencias que el
   agente evalúa, esto es un error confirmado. Si aparece, el corte está
   mal puesto -- no "puede que esté". Ver services/marcas.py. */
.marcas-aviso {
  margin: 14px 0 4px;
  padding: 14px 14px 10px;
  border: 1px solid rgba(255, 138, 138, 0.45);
  border-left: 3px solid var(--danger);
  border-radius: 10px;
  background: rgba(255, 138, 138, 0.07);
}

.marcas-aviso .grande {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 6px;
}

.marcas-aviso .grande b { color: var(--danger); font-weight: 700; }

.marcas-aviso .sub {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.55;
  margin-bottom: 10px;
}

.marcas-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid rgba(255, 138, 138, 0.2);
}

.marcas-fila button {
  min-width: 38px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255, 138, 138, 0.4);
  background: transparent;
  color: var(--danger);
  font-size: 14px;
  cursor: pointer;
}

/* "¿Cómo quedó?" — el reporte del agente, debajo del video del preview.
   Se ve como una pregunta, no como un formulario: es lo último que hace
   antes de seguir y tiene que costar dos toques. */
/* Anotar un momento. Va pegada al video y SIEMPRE visible: es el camino
   corto para lo que más se va a hacer -- escuchar una muletilla y sacarla.
   Discreta a propósito, para no competir con el menú de "¿cómo quedó?" que
   viene abajo. */
.nota-caja {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 12px;
}

.nota-titulo { font-size: 14px; font-weight: 600; margin-bottom: 8px; }

/* "Ya está hecho" tiene que verse de lejos. Con un título gris chiquito no
   se entendió que el corte ya estaba aplicado: se buscó otro botón para
   confirmar y la conclusión fue "no pasó nada" sobre algo que sí se hizo. */
.rep-listo {
  margin: 10px 0 4px;
  padding: 11px 13px;
  border: 1px solid var(--success);
  border-radius: 10px;
  background: rgba(127, 255, 179, 0.08);
}

.rep-listo-t {
  font-size: 15px;
  font-weight: 700;
  color: var(--success);
  margin-bottom: 4px;
}

.rep-listo-d { font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }

.nota-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.nota-btn { flex: 1 1 120px; }

.nota-hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.45;
}

.nota-t {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 8px;
  font-size: 13px;
  color: var(--text-dim);
}

.nota-t b { color: var(--accent); font-family: ui-monospace, Menlo, Consolas, monospace; }

.nota-x {
  margin-left: auto;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}

/* OJO: la regla que hace visibles estos textarea NO va acá. Va al FINAL
   del archivo, después de `.rep-detalle`.
   `.rep-detalle` trae `display: none` (nació escondido, solo salía al
   marcar "otra cosa") y tiene la misma especificidad que `.nota-texto`, así
   que gana el que está más abajo. Puesta acá arriba, la regla perdía y el
   campo de texto quedaba INVISIBLE -- sin error, sin nada: simplemente no
   había dónde escribir. */

/* ---- El video como texto ---- */

.txt-caja {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}
/* AIRE ABAJO PARA QUE "CONTAME QUE PASO" NO TAPE EL FINAL DEL TEXTO.
   Gustavo, 17/09/2026: el flotante del cuaderno vive fuera de #app y
   se ve encima de la ultima linea de esta caja. `--alto-cuaderno` es
   la misma medida que ya usa el resto de la app para lo mismo (ver
   `body.con-barra`); se repite aca porque esta caja tiene scroll
   propio dentro de la pantalla de revision y el padding del body no
   le alcanza a su propio borde de abajo. */
.txt-caja {
  padding-bottom: calc(10px + var(--alto-cuaderno, 46px) + 16px);
}

/* Se lee como un párrafo, no como una lista de botones: las palabras van
   pegadas con el interlineado de un texto normal. Si cada una se viera como
   botón, treinta palabras serían una pared de cajitas ilegible.

   UN SOLO SCROLL, EL DE LA PAGINA.
   ---------------------------------
   Acá había una caja de `max-height: 34vh` con scroll propio y
   `overscroll-behavior: contain`. Esa última línea significa, textual:
   "cuando esta caja llegue al final, NO le pases el scroll a la página".

   Resultado, medido por Gustavo en el teléfono: el dedo terminaba de
   recorrer la cajita y la pantalla no se movía más, con el resto del texto
   y el botón de Aplicar abajo, fuera de alcance. Se frenaba en el medio y
   no había forma de llegar al final.

   La caja interna existía "para que la pantalla entera no se corra: los
   controles de reproducción tienen que estar siempre a mano". Pero eso ya
   lo resuelve el video, que es `sticky` arriba y se queda pegado igual. La
   caja estaba haciendo un trabajo que otro ya hacía, y de paso rompía el
   scroll de la página. */
.txt-cuerpo {
  padding: 2px 0;
  font-size: 15px;
  line-height: 1.9;
  word-spacing: 1px;
}

/* Habla que no pude escribir. Se marca distinto de todo lo demás porque es
   lo único que el agente no puede LEER: solo escuchar. Si no estuviera, una
   frase repetida que Whisper se comió sería invisible en el texto -- se
   escucha dos veces y se lee una sola, sin nada que tocar. */
.txt-cuerpo .txt-sinescribir {
  padding: 1px 6px;
  border: 1px solid var(--accent-2);
  border-radius: 6px;
  color: var(--accent-2);
  font-size: 12.5px;
  white-space: nowrap;
}

.txt-cuerpo .txt-sinescribir.tachada {
  border-color: var(--danger, #ff8080);
  color: var(--danger, #ff8080);
  text-decoration: line-through;
}

/* Lo que ya saqué, plegado. En un video con 61 s cortados el texto quedaba
   tapado de palabras grises tachadas y parecía que no se había sacado nada.
   Se abre tocándolo, solo si hay que devolver algo. */
.txt-cuerpo .txt-plegado {
  padding: 1px 6px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 12.5px;
  white-space: nowrap;
}

/* RESET, y es indispensable: la hoja tiene un `button { width: 100%;
   min-height: 48px; margin-top: 12px }` global para los botones de la app.
   Sin deshacerlo, cada palabra era un botón de ancho completo y el texto
   salía con una palabra por renglón en vez de leerse como un párrafo. */
.txt-cuerpo button {
  display: inline;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}

.txt-cuerpo .txt-p {
  padding: 2px 1px;
  color: var(--text);
}

.txt-cuerpo .txt-p:active { background: rgba(255, 255, 255, 0.08); }

/* Karaoke: la palabra que se está diciendo. Al pausar el video queda
   parada acá, así que no hay que buscar el momento -- está señalado. */
.txt-cuerpo .sonando {
  background: var(--accent);
  color: #04222b;
  border-radius: 5px;
}

/* El foco del teclado se tiene que ver: se edita con las flechas. */
.txt-cuerpo :focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 1px;
}

/* Pausa que ya saqué. Gris y tachada, como las palabras que saqué: se ve
   que hubo algo ahí y se puede traer de vuelta. */
.txt-cuerpo .txt-sil-fuera {
  padding: 1px 4px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  font-weight: 700;
  letter-spacing: 1px;
  opacity: .45;
  text-decoration: line-through;
}

.txt-cuerpo .txt-sil-fuera.vuelve {
  opacity: 1;
  color: var(--success);
  border-color: var(--success);
  text-decoration: none;
  background: rgba(127, 255, 179, 0.12);
}

/* Marcada para sacar. Tachada Y en rojo: el tachado solo se pierde entre
   palabras cortas. */
.txt-cuerpo .txt-p.tachada {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  color: var(--danger, #ff8080);
  opacity: .8;
}

/* Ya la saqué yo: gris y tachada, pero se sigue viendo. El texto es el
   estado del video, no una copia de lo que quedó -- si las escondiera no
   habría forma de traer nada de vuelta. */
.txt-cuerpo .txt-p.ya-fuera {
  text-decoration: line-through;
  color: var(--text-dim);
  opacity: .5;
}

/* Y marcada para volver: verde, sin tachar. */
.txt-cuerpo .txt-p.ya-fuera.vuelve {
  text-decoration: none;
  color: var(--success);
  opacity: 1;
  background: rgba(127, 255, 179, 0.12);
}

/* El silencio, que no es una palabra pero ocupa lugar en el video. Sin esto
   el texto sería una vista parcial: un bache de 2,4 s no se vería.
   Va partido en una "s" por cada medio segundo: tachando algunas la pausa
   se ACHICA en vez de desaparecer, que es lo que hace falta casi siempre. */
.txt-sil {
  display: inline-block;
  padding: 1px 4px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  vertical-align: baseline;
}

.txt-cuerpo .txt-s {
  padding: 2px 1px;
  color: var(--text-dim);
  font-weight: 700;
  letter-spacing: 1px;
}

.txt-cuerpo .txt-s.tachada {
  color: var(--danger, #ff8080);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

/* APLICAR SIEMPRE A MANO.
   Pegado abajo, con el mismo patrón que la barra de guardar del panel de
   admin. Sin esto el botón dependía de haber llegado al final del texto --
   que es justo lo que fallaba cuando el texto tenía scroll propio. */
.txt-pie {
  /* GRID DE TRES COLUMNAS PARA CENTRAR EL BOTON DE VERDAD.
     Con flex, la cuenta de la izquierda empujaba el boton a la derecha y
     quedaba centrado "a ojo" segun cuanto midiera el texto de la cuenta.
     Con `1fr auto 1fr` el boton cae en la columna del medio y la tercera
     --vacia-- equilibra a la primera: queda centrado en la pantalla,
     diga lo que diga la cuenta. Sin agregar ningun elemento. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 11px;
  padding-bottom: 8px;
  border-top: 1px solid var(--border);
  position: sticky;
  bottom: 0;
  z-index: 4;
  /* Fondo opaco: sin esto el texto se lee POR DEBAJO del botón. */
  background: var(--bg, #0b0f14);
}

/* Ya no necesita crecer: en el grid ocupa su columna. Si creciera,
   volveria a correr el boton del centro. */
.txt-cuenta { min-width: 0; font-size: 12.5px; color: var(--text-dim); }
.txt-cuenta.hecho { color: var(--success); font-weight: 600; }

/* La segunda opinión sobre el corte, en Texto. Es información, no una
   alarma: por eso no lleva el rojo de error. Lo único destacado son los
   tiempos, que es lo que se toca. */
.txt-rev {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: rgba(255, 255, 255, .02);
}
.txt-rev-t { font-size: 13px; margin: 0 0 8px; color: var(--text-dim); }
.txt-rev-l { list-style: none; margin: 0; padding: 0; display: flex;
             flex-direction: column; gap: 8px; }
.txt-rev-l li { font-size: 13px; line-height: 1.45; }
.txt-rev-ir {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--accent);
  background: none;
  border: 1px solid var(--accent);
  border-radius: 5px;
  padding: 1px 7px;
  margin: 0 4px 0 0;
  min-height: 0;
  width: auto;
  cursor: pointer;
}
.txt-rev-ir:hover { background: var(--accent); color: #000; }
.txt-rev-ok { margin-top: 12px; color: var(--success); }

/* El video se queda pegado arriba mientras se lee el texto. Es lo que
   permite parar y avanzar sin perderlo de vista: sin esto, al scrollear el
   texto el reproductor se iba de la pantalla y había que volver a buscarlo
   cada vez que se quería pausar. */
.fotos-cortes .video-box.preview {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg, #0b0f14);
}
.txt-pie .btn { flex: 0 0 auto; width: auto; padding: 0 18px; }
.txt-pie .btn:disabled { opacity: .4; }

.rep-caja {
  margin: 14px 0 4px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.rep-titulo { font-size: 16px; font-weight: 600; margin-bottom: 10px; }

/* Las tres respuestas posibles a "¿cómo quedó?". Es lo primero y lo único
   que se ve hasta que elige una: abajo se dibuja SOLO lo que ese camino
   necesita. La pantalla llegó a tener tres cajas abiertas a la vez, con dos
   campos de texto y tres botones de acción, y no se entendía nada. */
/* Grandes y con el pulgar adelante: se tocan con el teléfono en la mano. */
.rep-modo {
  min-height: 52px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
}

.rep-modo.ancho { display: block; width: 100%; }

.rep-modo.es-si.elegida {
  border-color: var(--success);
  color: var(--success);
  background: rgba(127, 255, 179, 0.12);
}

.rep-modo.es-no {
  margin-top: 14px;
  font-weight: 500;
  font-size: 13.5px;
  color: var(--text-dim);
}

.rep-modo.es-no.elegida {
  border-color: var(--accent-2);
  color: var(--accent-2);
}

/* El "o arreglalo" que separa aprobar de corregir. Una línea con la palabra
   en el medio: se entiende que abajo hay otro camino, sin leer nada. */
.rep-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 12px;
  color: var(--text-dim);
  font-size: 12px;
}

.rep-sep::before,
.rep-sep::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
}

.nota-lbl {
  display: block;
  margin-bottom: 6px;
  font-size: 13.5px;
  font-weight: 600;
}
.rep-sub { font-size: 13px; color: var(--text-dim); margin-bottom: 12px; line-height: 1.5; }

/* Dos columnas: con ocho opciones en una sola, la lista se iba abajo de
   la pantalla y había que scrollear para llegar al botón de enviar. */
.rep-ops {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.rep-op {
  min-height: var(--alto-boton);
  padding: 8px 11px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

/* "El video está bien" ocupa el ancho completo: es la salida rápida y la
   que más se va a tocar, no una opción más de la grilla. */
.rep-op.elegida { border-color: var(--accent); color: var(--accent); background: rgba(87, 221, 255, 0.09); }

.rep-detalle {
  display: none;   /* solo aparece si marca "otra cosa" */
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  resize: vertical;
}

/* Mandado: las opciones se apagan para que se vea que el paso ya pasó y
   que lo que queda por hacer está abajo. */
.rep-caja.enviada .rep-ops { opacity: .45; }
.rep-caja.enviada .rep-op { cursor: default; }

.rep-hall { margin-top: 12px; }

/* Lo que necesita que el agente lo señale: va primero y se distingue,
   porque es lo único que el sistema no puede resolver sin él. */
.rep-manual .rep-hall-t { color: var(--accent-2); }
.rep-manual .rep-hall-f span { -webkit-line-clamp: 3; }
.rep-hall-t { font-size: 12.5px; color: var(--text-dim); margin-bottom: 5px; }

.rep-hall-f {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
  /* Sin esto, una frase larga estiraba la fila y dejaba una caja negra
     enorme abajo de la pantalla. */
  min-width: 0;
  /* Todo en UN renglón: ▶ tiempo | texto | botón.
     Se probó con `flex-wrap: wrap` para que el botón no se saliera de la
     pantalla, y el remedio fue peor: cada hallazgo pasaba a ocupar tres
     renglones. Lo que hacía falta era que el TEXTO se achique -- con
     `flex: 1 1 0` cede todo lo que haga falta y los dos botones quedan
     enteros, que es lo único que no se puede recortar. */
  flex-wrap: nowrap;
}

/* Pegados a la derecha, hayan quedado en la misma línea o hayan bajado. */
.rep-hall-f .rep-fix,
.rep-hall-f .rep-marcar { margin-left: auto; }

.rep-hall-f button {
  flex: 0 0 auto;
  min-width: 62px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--accent);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px;
  cursor: pointer;
}

/* La frase se corta a dos líneas. Es para reconocer el lugar, no para
   leerlo entero: para eso está el ▷, que lo reproduce.
   HIJO DIRECTO, no cualquier span: el ▶ del botón de escuchar también es un
   span y estaba comiéndose estas reglas -- se volvía un elemento flex de
   130 px adentro del botón y empujaba "Devolverlo" fuera de la pantalla. */
.rep-hall-f > span {
  /* Base CERO: el texto cede todo el ancho que haga falta para que los dos
     botones entren enteros en el mismo renglón. Con base `auto` el navegador
     parte del ancho del contenido y se resiste a achicarlo -- por eso el
     botón terminaba fuera de la pantalla. */
  flex: 1 1 0;
  min-width: 0;
  color: var(--text-dim);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* El botón de arreglar. Verde claro como el resto de las acciones. */
.rep-fix {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 11px;
  border-radius: 8px;
  border: 0;
  background: var(--verde);
  color: #06240f;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.rep-fix:disabled { opacity: .55; }

/* Ya aplicado: el botón ahora deshace. Se distingue del que todavía no se
   tocó, porque hace lo contrario. */
.rep-fix.deshacer {
  background: transparent;
  border: 1px solid var(--text-dim);
  color: var(--text-dim);
}

/* Fila con los tiempos viejos: se ve, pero no se puede tocar. */
.viejo { opacity: .35; cursor: not-allowed; }

.rep-stale {
  margin: 6px 0 2px;
  font-size: 12px;
  line-height: 1.45;
}

/* El botón de escuchar. Tiene que gritar "esto suena": el triángulo va
   primero y el tiempo después, en un solo bloque. Sin el ícono, el botón
   parecía una etiqueta con el minuto y no se tocaba. */
.rep-play {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px 0 8px;
}

.rep-play-ic {
  font-size: 10px;
  line-height: 1;
  opacity: .95;
}

/* Sonando: se ve cuál de los avisos es el que estoy oyendo. */
.rep-play.sonando {
  border-color: var(--accent);
  background: rgba(87, 221, 255, 0.12);
}

/* Ya escuchado: verde. Es el estado que abre el candado de aprobar, así que
   de un vistazo se ve cuántos faltan sin leer nada. */
.rep-play.escuchado {
  border-color: var(--success);
  color: var(--success);
  background: rgba(127, 255, 179, 0.08);
}

.rep-play.escuchado .rep-play-ic::after {
  content: "✓";
  margin-left: 3px;
}

/* El botón de marcar el momento. Es de otro color que "Sacarlo"/"Devolverlo"
   a propósito: no arregla nada, PREGUNTA -- le dice al sistema dónde mirar. */
.rep-marcar {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 11px;
  border-radius: 8px;
  border: 1px solid var(--accent-2);
  background: transparent;
  color: var(--accent-2);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.rep-marcar:disabled { opacity: .55; }

/* Lo que el sistema encontró en el momento marcado. Va indentado para que
   se lea como respuesta a la pregunta de arriba, no como una lista nueva. */
.rep-manual-res:not(:empty) {
  margin-top: 8px;
  padding-left: 10px;
  border-left: 2px solid var(--accent-2);
}

/* El aprobado, ya adentro del panel: separado del resto con una línea,
   porque es la última decisión de la caja y no una fila más. */
/* LA MITAD DE AIRE. Eran 16 + 14 = 30 px entre el boton de Aplicar y los
   de abajo, y con el pie pegado se leian como un hueco. Son pasos de la
   misma tarea, no dos pantallas distintas. */
#repAvanzar {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--border);
}

#repAvanzar .btn { width: 100%; }

/* Trabado: no se puede aprobar lo que no se escuchó. Se ve apagado pero NO
   se esconde -- esconderlo dejaría la pantalla sin salida visible y no se
   entendería qué falta. El aviso de arriba dice exactamente qué falta. */
.btn.trabado {
  opacity: .4;
  cursor: not-allowed;
  filter: grayscale(.7);
}

.rep-gate {
  font-size: 12.5px;
  color: var(--accent-2);
  margin-bottom: 9px;
  text-align: center;
  line-height: 1.45;
}

.cortes-auto {
  padding: 9px 2px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-dim);
}

/* Aviso del rearmado en segundo plano. Discreto a propósito: informa que
   el video se está poniendo al día, no interrumpe el marcado. */
.cortes-rearmado {
  min-height: 16px;
  margin: 8px 0 2px;
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
}

/* ====================================================================
   TELEPROMPTER

   Dos capas: la cámara abajo ocupando todo, el texto arriba sobre un
   degradado. Lo que se graba es el chorro de la cámara, así que nada de
   esto puede terminar en el archivo -- el texto vive solo en el DOM.
   ==================================================================== */

.pr-pantalla {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #000;
  overflow: hidden;
}

/* La vista previa va ESPEJADA porque es como uno se ve y es más cómodo
   leer así. El archivo no: esto es puro CSS sobre el <video> y no toca el
   stream que graba MediaRecorder. Si el archivo saliera espejado,
   cualquier cartel o logo detrás quedaría al revés. */
/* `contain` y no `cover`: con `cover` la imagen se recorta hasta llenar la
   pantalla, y si la cámara entrega apaisado sobre un teléfono parado el
   recorte es brutal -- se ve un zoom enorme y, peor, se ve un encuadre que
   NO es el que se está grabando. Con `contain` lo que ves es exactamente el
   cuadro que queda en el archivo, aunque sobren franjas negras. */
.pr-cam {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  transform: scaleX(-1);
}

.pr-cam.sin-camara { opacity: .15; }

/* La banda se ancla del lado del lente. Cuanto más cerca del agujerito,
   menos se nota que la persona está leyendo -- que es el punto entero. */
.pr-banda {
  position: absolute;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

/* Gris translúcido, no un degradado que se desvanece.

   Con degradado no se sabía dónde termina la caja, y saber dónde está es
   el punto entero del prompter: es la referencia para acomodar el teléfono
   de modo que el texto quede pegado al lente. Con el borde marcado, se ve
   de un vistazo a qué altura hay que poner la cámara.

   OPACO DESDE EL 13/09/2026, Y LA CARA SE VE DEBAJO.

   Era `.72` «para seguir viendo la cara detrás y poder encuadrarse», y
   con la cara detrás del texto no se lograba ninguna de las dos cosas:

       el panel ocupa más de la mitad de abajo y la cabeza de Gustavo
       queda DETRÁS del texto. No puede ver su encuadre mientras lee.
       Además el texto es semitransparente y se lee mal con la cara atrás.
                                          -- Gustavo, 13/09/2026

   El encuadre se mira DEBAJO de la banda, no a través. Para eso la banda
   ademas se achico cuando hay tarjeta -- ver mas abajo. */
.pr-banda {
  /* CUANTO TAPA, LO DECIDE EL AGENTE con los dos botones de la fila de
     abajo. `--pr-opacidad` la escribe `_prAplicarOpacidad`; el .95 de
     reserva es el valor de arranque, para que la banda tenga color
     aunque el JS todavia no haya corrido. */
  background: rgba(18, 20, 26, var(--pr-opacidad, .95));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.pr-pantalla[data-lado="arriba"] .pr-banda {
  top: 0; left: 0; right: 0; height: 42vh;
  border-bottom: 2px solid rgba(87, 221, 255, .55);
  border-radius: 0 0 14px 14px;
}

/* CON LA TARJETA DEL MENSAJE, LA BANDA ARRANCA DEBAJO.

   Las dos viven arriba y se pisaban: la tarjeta va donde va en el video
   y la banda arranca en el borde. En un teléfono de 720 eso es la tarjeta
   blanca encima del teleprompter, y el guion leyéndose por los costados.

   LA TARJETA BAJO EL 12/09/2026, cuando este formato empezó a llevar hook
   --estaba al 7% de la altura y pasó a un 23.7% del ANCHO, justo debajo
   de la franja del título--. Acá no hubo que tocar nada porque el número
   no está escrito: se mide. Ver `margen_arriba_del_ancho` en
   services/mensaje.py.

   El valor lo mide `_prBajarLaBandaDeLaTarjeta` cuando la tarjeta ya está
   dibujada: su alto depende de cuántos renglones tenga el mensaje, así
   que un número escrito acá dejaría hueco de más con uno corto y seguiría
   pisando con uno largo. Sin la variable --si la medición no corrió-- la
   banda queda donde estaba siempre. */
.pr-pantalla.pr-con-tarjeta[data-lado="arriba"] .pr-banda {
  top: var(--pr-bajo-tarjeta, 0px);
  /* Y TERMINA DONDE TERMINABA SIEMPRE.
     -----------------------------------------------------------------
     Bajaba debajo de la tarjeta pero se quedaba con los 42vh de la regla
     de arriba: tarjeta (~30vh) + banda (42vh) son mas de setenta por
     ciento de la pantalla, con el borde de abajo sobre la cara.

     Ahora las dos juntas ocupan lo que ocupaba la banda sola, y debajo
     queda la cara libre para encuadrarse.

     EL MINIMO ES PARA EL MENSAJE LARGO: si la tarjeta crece mucho, la
     banda no puede desaparecer -- 22vh es donde todavia entran dos
     renglones de la letra mas grande. Ahi el que sobra lo dice el cartel
     de «este párrafo no entra», que para eso esta. */
  height: max(22vh, calc(42vh - var(--pr-bajo-tarjeta, 0px)));
  border-radius: 14px;
  border-top: 2px solid rgba(87, 221, 255, .55);
}
.pr-pantalla[data-lado="abajo"] .pr-banda {
  bottom: 22vh; left: 0; right: 0; height: 42vh;
  border-top: 2px solid rgba(87, 221, 255, .55);
  border-radius: 14px 14px 0 0;
}
.pr-pantalla[data-lado="izquierda"] .pr-banda {
  top: 0; bottom: 22vh; left: 0; width: 52vw;
  border-right: 2px solid rgba(87, 221, 255, .55);
  border-radius: 0 14px 14px 0;
}
.pr-pantalla[data-lado="derecha"] .pr-banda {
  top: 0; bottom: 22vh; right: 0; width: 52vw;
  border-left: 2px solid rgba(87, 221, 255, .55);
  border-radius: 14px 0 0 14px;
}

/* El asa para agrandar o achicar la caja. Visible a propósito: un borde
   invisible que se arrastra no lo encuentra nadie. Es lo único de la banda
   que recibe toques -- el resto deja pasar el dedo al video. */
.pr-tirador {
  position: absolute;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}

.pr-tirador span {
  display: block;
  border-radius: 99px;
  background: rgba(255, 255, 255, .75);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}

.pr-pantalla[data-lado="arriba"] .pr-tirador,
.pr-pantalla[data-lado="abajo"] .pr-tirador {
  left: 0; right: 0; height: 34px;
}
.pr-pantalla[data-lado="arriba"] .pr-tirador { bottom: -17px; }
.pr-pantalla[data-lado="abajo"] .pr-tirador { top: -17px; }
.pr-pantalla[data-lado="arriba"] .pr-tirador span,
.pr-pantalla[data-lado="abajo"] .pr-tirador span { width: 54px; height: 5px; }

.pr-pantalla[data-lado="izquierda"] .pr-tirador,
.pr-pantalla[data-lado="derecha"] .pr-tirador {
  top: 0; bottom: 0; width: 34px;
}
.pr-pantalla[data-lado="izquierda"] .pr-tirador { right: -17px; }
.pr-pantalla[data-lado="derecha"] .pr-tirador { left: -17px; }
.pr-pantalla[data-lado="izquierda"] .pr-tirador span,
.pr-pantalla[data-lado="derecha"] .pr-tirador span { width: 5px; height: 54px; }

.pr-tirador.agarrado span { background: var(--accent); }

.pr-visor {
  flex: 1 1 auto;
  overflow: hidden;
  /* Para que el cartel de «este párrafo no entra» se pueda pegar a su
     pie. Ver `_prAvisarSiNoEntra`. */
  position: relative;
  padding: 14px 18px;
}

/* Ancho angosto a propósito: menos movimiento de ojos por renglón, que es
   lo que delata la lectura. */
.pr-tren {
  max-width: 34ch;
  margin: 0 auto;
  line-height: 1.42;
  /* EL APAGADO, MAS LEGIBLE. Estaba en .38 sobre un fondo translucido con
     la cara atras: el contraste real era de menos de 2 a 1. Con el fondo
     opaco se puede subir sin que compita con el parrafo que se esta
     leyendo, que va en blanco puro. */
  color: rgba(255, 255, 255, .55);
  transition: font-size .12s;
  will-change: transform;
}

/* ACA VIVIERON LOS ESTILOS DEL MENSAJE REPETIDO EN LETRA GRANDE.

       ¿podés colocar una caja con el texto del mensaje, de las letras
       del teleprompter, para que se pueda leer bien?   -- a la mañana
       seguís mostrando el mensaje en el teleprompter. sacalo
                                        -- Gustavo, 09/09/2026, a la tarde

   Se pidió porque la tarjeta no se leía, y no se leía porque la tenía
   encima el teleprompter. Con la banda corrida para abajo la tarjeta se
   ve entera y el mensaje se lee de ahí: la caja pasaba a ser el mismo
   texto dos veces, y la de abajo se comía media banda. */

/* ADENTRO DE LA BANDA, LA EXPLICACION DEL ESPEJO DEJA DE FLOTAR.

   Suelta sobre la camara estaba clavada al 40% de la altura, y con la
   banda corrida para no pisar la tarjeta ese 40% cae justo adentro: la
   explicacion quedaba escrita encima del mensaje. Acá va en el flujo,
   debajo del mensaje y antes del guion, que es donde se la lee: al lado
   de la tarjeta de la que habla. */
.pr-banda > .pr-tarjeta-guia {
  position: static;
  flex: 0 0 auto;
  width: auto;
  margin: 8px 18px 0;
  background: none;
  padding: 0;
  opacity: .75;
}

.pr-p { margin: 0 0 .55em; }

/* El párrafo que se está leyendo, bien visible; los de alrededor
   atenuados. Sin esto la vista se pierde entre renglones iguales. */
.pr-p.activo {
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .9);
}

/* La línea de lectura, al 25% de la banda. Marca dónde mirar. */
.pr-marca {
  position: absolute;
  left: 10px; right: 10px;
  top: 25%;
  height: 1px;
  background: rgba(87, 221, 255, .28);
}
.pr-pantalla[data-lado="izquierda"] .pr-marca,
.pr-pantalla[data-lado="derecha"] .pr-marca { display: none; }

.pr-hud {
  position: absolute;
  top: 8px; left: 12px; right: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, .75);
  pointer-events: none;
  text-shadow: 0 1px 6px #000;
}

.pr-pantalla[data-lado="arriba"] .pr-hud { top: auto; bottom: 23vh; }

/* CON LA TARJETA, EL HUD VUELVE ARRIBA.

   Bajarlo al 23vh del pie existe porque con la banda pegada al borde de
   arriba no hay lugar ahí. Con la tarjeta del mensaje la banda ya no está
   arriba: está debajo de la tarjeta y baja hasta donde el agente la haya
   estirado, así que el 23vh del pie CAE ADENTRO. Se vio en el teléfono:
   «cámara directa · la app se murió grabando en este aparato» escrito
   encima del guion, las dos cosas ilegibles.

   Arriba de la tarjeta hay una franja libre --la tarjeta arranca al 7% de
   la altura-- y el HUD es un renglón de 12 px: entra de sobra. */
.pr-pantalla.pr-con-tarjeta[data-lado="arriba"] .pr-hud {
  top: 8px;
  bottom: auto;
}

.pr-rec { color: #ff6b6b; font-weight: 700; }
.pr-rec[hidden] { display: none; }
.pr-aviso { margin-left: auto; color: var(--accent); }

/* Los botones, FUERA de la zona del texto: si estuvieran encima, el dedo
   taparía justo lo que hay que leer. */
.pr-controles {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, .72);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.pr-fila { display: flex; gap: 7px; }

/* EL CARTEL DE FIN DE GRABACION.
   ------------------------------
   La persona esta leyendo el prompter MIENTRAS GRABA. Si esto se pareciera
   al guion, lo diria en voz alta y quedaria adentro del video.

   Asi que no comparte nada con el parrafo:

     el parrafo   letra grande (la que eligio el agente), blanca, sin caja
     el cartel    letra fija y chica, apagada, en una caja con borde
                  punteado y una linea que corta la banda antes

   `font-size` va en px y no en em a proposito: el tren lleva el tamano de
   lectura en linea, y en em el cartel crecería con el. */
.pr-fin {
  margin: 18px auto 0;
  max-width: 90%;
  padding: 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, .22);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  text-align: center;
}

.pr-fin-tag {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  border: 1px dashed rgba(255, 255, 255, .3);
  border-radius: 999px;
  padding: 2px 10px;
}

.pr-fin-txt {
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .62);
  font-weight: 400;
}

.pr-fin-txt b { color: rgba(255, 255, 255, .85); font-weight: 600; }

.pr-controles .pr-b {
  flex: 1 1 0;
  width: auto;
  min-height: 46px;
  margin: 0;
  padding: 0 6px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.pr-controles .pr-b.pr-grabar {
  flex: 2 1 0;
  background: var(--verde);
  color: #06281a;
  border-color: transparent;
}

.pr-controles .pr-b.pr-grabar.grabando {
  background: #ff5252;
  color: #2b0a0a;
}

/* EL CIERRE, ESPERANDO A QUE EL AGENTE ESTE LISTO.

   Es el unico estado del boton en que no esta grabando NI va a cortar:
   invita a empezar. El verde ya es el color de "todavia no", pero acá se
   le da peso -- el agente viene de mirar el panel de revision y este es
   el proximo paso, no un boton mas de la fila.

   ROJO SERIA UNA MENTIRA: con las seis terminadas el grabador esta en
   pausa, y el rojo dice que esta grabando. El que lo ve rojo no se
   acomoda ni cambia de fondo, porque cree que ya lo estan filmando. */
.pr-controles .pr-b.pr-grabar.esperando-cta {
  background: var(--verde);
  color: #06281a;
  border-color: transparent;
  font-weight: 700;
}

.pr-controles .pr-letra { font-size: 14px; }

.pr-subiendo {
  position: absolute;
  inset: auto 12px 26vh 12px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .88);
  border: 1px solid var(--border);
}

/* --- Preguntar el lado de la cámara (una sola vez) --- */
.pr-lados {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
}

.pr-lado {
  width: auto;
  margin: 0;
  min-height: 74px;
  flex-direction: column;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 20px;
}

.pr-lado span { font-size: 13px; font-weight: 600; }

/* --- Configurar el control remoto --- */
.pr-map-fila {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid var(--border);
}

.pr-map-n { flex: 1 1 auto; font-size: 13.5px; }

.pr-map-b {
  width: auto;
  margin: 0;
  min-height: 34px;
  padding: 0 12px;
  font-size: 12.5px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--accent);
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

.pr-map-b.esperando { border-color: var(--accent-2); color: var(--accent-2); }

.pr-map-x {
  width: auto;
  margin: 0;
  min-height: 34px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
}

/* ====================================================================
   AL FINAL A PROPÓSITO

   `.rep-detalle` trae `display: none` porque nació como un campo que solo
   aparecía al marcar "otra cosa". Después pasó a estar siempre a la vista
   en dos lugares -- el "decime qué sacar" del preview y el texto del
   teleprompter -- pero la regla que lo mostraba estaba ESCRITA MÁS ARRIBA
   en este archivo, con la misma especificidad. Perdía por orden.

   Resultado: los dos campos existían en el DOM, tenían su listener puesto
   y su botón al lado, y no se veían. No había error en la consola ni nada
   roto: simplemente no había dónde escribir. Costó dos versiones darse
   cuenta.

   Van acá, últimas, para que ganen sin depender de la especificidad.
   ==================================================================== */
.nota-texto,
.pr-textarea {
  display: block;
  width: 100%;
}

/* Pausar la grabación: naranja, distinto del verde de grabar y del rojo de
   terminar. Los tres estados tienen que leerse de un vistazo con el
   teléfono en la mano y la cara del otro lado. */
.pr-controles .pr-b.pr-pausa {
  flex: 1.4 1 0;
  background: rgba(255, 196, 87, .16);
  border-color: var(--accent-2);
  color: var(--accent-2);
  font-size: 13px;
}

.pr-controles .pr-b.pr-pausa[hidden] { display: none; }

/* El punto rojo deja de latir cuando la grabación está en pausa: si
   siguiera igual, no habría forma de saber que el archivo dejó de crecer. */
.pr-rec.pausado { color: var(--accent-2); }

/* La vista previa NUNCA llena la pantalla a la fuerza.

   Se probó con `cover` para el caso vertical y la cara se ve enorme: los
   teléfonos de hoy son 9:19,5 o más largos, así que un cuadro 9:16 estirado
   para cubrir la altura se agranda como un 20% y se recorta de los
   costados. Y encima muestra un encuadre que NO es el que se graba, que es
   el error caro: armás la toma mirando algo que no existe en el archivo.

   Con `contain` sobran dos franjas negras y lo que ves es exactamente el
   cuadro que queda grabado. */
.pr-cam.vertical { object-fit: contain; }

/* La medida real de la cámara, chiquita en el HUD. Está siempre a la vista
   a propósito: sin el dato, "se ve enorme" es una conversación a ciegas. */
.pr-medida {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  opacity: .7;
}

/* El panel del lente: qué entrega la cámara, y el zoom si lo tiene. Va
   adentro de la pantalla del prompter porque un diagnóstico que obliga a
   salir de donde está el problema no se usa. */
.pr-lente {
  position: absolute;
  left: 12px; right: 12px; bottom: 24vh;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .92);
  border: 1px solid var(--border);
  max-height: 52vh;
  overflow-y: auto;
}

.pr-lente[hidden] { display: none; }

.pr-lente-t { font-size: 14px; font-weight: 600; margin-bottom: 8px; }

.pr-lente-f {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-dim);
}

.pr-lente-f b {
  color: var(--text);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px;
}

.pr-lente-n {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-dim);
}

.pr-lente-btns { display: flex; gap: 8px; margin-top: 10px; }

.pr-lente .pr-b {
  flex: 1 1 0;
  width: auto;
  min-height: 42px;
  margin: 8px 0 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 14px;
}

.pr-lente-btns .pr-b { margin-top: 0; }

/* ---- Las dos señales que antes vivían en una pantalla aparte ---- */

/* Palabra que se llevó un corte de SILENCIO. En gris tachado se veía igual
   que una que sacó el agente a propósito, y no es lo mismo: esta la perdió
   sin querer. Se muestra en rojo y NUNCA se pliega. */
.txt-cuerpo .txt-p.es-error {
  color: var(--danger, #ff8080);
  opacity: 1;
  text-decoration: line-through;
  text-decoration-color: var(--danger, #ff8080);
  background: rgba(255, 128, 128, .12);
  border-radius: 4px;
}

/* Dicho dos veces. Subrayado punteado: los datos ya estaban a la vista, lo
   que faltaba era encontrarlo -- leer 250 palabras reteniendo no lo agarra
   nadie. Se marcan LAS DOS copias: para elegir cuál sacar hay que ver las
   dos. */
.txt-cuerpo .txt-p.es-repetido {
  text-decoration: underline dotted var(--aviso-info);
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

/* Lo tachado gana sobre lo repetido: si ya se sacó, no importa que además
   estuviera repetido. */
.txt-cuerpo .txt-p.tachada.es-repetido { text-decoration: line-through; }

.txt-avisos {
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
}

.txt-av-e { color: var(--danger, #ff8080); font-weight: 600; }
.txt-av-r { color: var(--accent-2); font-weight: 600; }

/* El botón que es LA decisión de una pantalla. Nació en el preview -- los
   dos que la cierran después de revisar el texto -- y estaba encerrado en
   `#repAvanzar`, así que en Transiciones la clase se ponía y no hacía
   nada. Vale en cualquier pantalla: los valores son los mismos. */
.btn.pr-grande {
  min-height: 58px;
  font-size: 16px;
  margin-top: 10px;
}

/* El asa del ANCHO. Vertical, sobre el borde derecho de la columna de
   texto: se arrastra hacia el centro para angostar el renglón. Es una
   decisión distinta de la del alto -- el alto es cuánto texto se ve, el
   ancho es cuánto se mueven los ojos por renglón. */
.pr-tirador-x {
  position: absolute;
  top: 14%;
  bottom: 14%;
  width: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  touch-action: none;
}

.pr-tirador-x span {
  display: block;
  width: 5px;
  height: 48px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .75);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}

.pr-tirador-x.agarrado span { background: var(--accent); }

/* Con la cámara al costado la banda ya es angosta y el asa de ancho no
   tiene sentido: ahí el asa principal ya regula el ancho. */
.pr-pantalla[data-lado="izquierda"] .pr-tirador-x,
.pr-pantalla[data-lado="derecha"] .pr-tirador-x { display: none; }

/* Elegir de qué lado está el lente, desde el panel. Antes se preguntaba una
   sola vez al estrenar el aparato y quedaba fijo: girando la tablet el
   lente cambia de lugar y no había cómo corregirlo. */
.pr-lados-mini { display: flex; gap: 8px; margin: 8px 0 4px; }

.pr-lados-mini .pr-b {
  flex: 1 1 0;
  width: auto;
  margin: 0;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: 16px;
}

.pr-lados-mini .pr-b.elegido {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(87, 221, 255, .14);
}

/* ---- Pantalla de filtros ---- */

.flt-caja {
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.flt-fila { padding: 9px 0; border-top: 1px solid var(--border); }
.flt-fila:first-child { border-top: 0; padding-top: 2px; }

.flt-t {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  margin-bottom: 4px;
}

.flt-t b { color: var(--accent); font-family: ui-monospace, Menlo, Consolas, monospace; }

.flt-slider { width: 100%; }

.flt-ext {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-dim);
}

.flt-looks { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }

.flt-look {
  width: auto;
  margin: 0;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}

.flt-look.elegido {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(87, 221, 255, 0.1);
}

/* "Ver cómo queda" se resalta cuando lo que muestra el video ya NO es lo
   que dicen las perillas. Sin esto se mueve un slider, no se toca el
   botón, y se termina el video creyendo que lo que se está mirando es lo
   que va a salir. */
.flt-caja .btn.pendiente {
  box-shadow: 0 0 0 2px var(--accent-2) inset;
}

#fltVideoBox.viejo video { opacity: .55; }
#fltVideoBox.viejo::after {
  content: "movés algo → tocá “Ver cómo queda”";
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  text-align: center;
  font-size: 12px;
  color: var(--accent-2);
  text-shadow: 0 1px 6px #000;
}

/* La tira de portadas. Sale de la misma muestra de cinco segundos que se
   está mirando, así que ya tiene los filtros: la portada no puede
   parecerse menos al video que el propio video. */
.flt-tira {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 8px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.flt-cuadro {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 0;
  min-height: 0;
  border: 2px solid transparent;
  border-radius: 9px;
  overflow: hidden;
  background: #000;
  scroll-snap-align: start;
  line-height: 0;
}

.flt-cuadro img { display: block; height: 108px; width: auto; }

.flt-cuadro.elegido {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(87, 221, 255, .35);
}

.flt-cuadro.elegido::after {
  content: "✓";
  position: absolute;
}

/* La portada suelta, en el resultado. Va despues de los copies: el video ya
   la lleva pegada como primer fotograma, esto es la copia por si hace falta
   aparte. */
.portada-img {
  display: block;
  width: 100%;
  max-width: 260px;
  margin: 8px auto 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
}

/* La caja del video en la pantalla de filtros.

   Necesita estilos PROPIOS: los de `.video-box` están limitados a
   `.fotos-cortes`, y esta pantalla no vive ahí. Sin esto el video salía a
   tamaño natural y el aviso flotante -- que es `position:absolute` -- se
   anclaba a la página en vez de a la caja, y terminaba montado encima de
   los controles. */
#fltVideoBox {
  position: relative;
  height: 46vh;
  max-height: 420px;
  margin: 10px 0 4px;
  border: 1px solid var(--accent-2);
  border-radius: 12px;
  background: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#fltVideoBox video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

#fltVideoBox .hint,
#fltVideoBox .error-box { margin: 0 14px; text-align: center; }

/* El hueco de un cuadro que todavia no llego. Ocupa el lugar para que la
   tira no salte cada vez que aparece uno. */
.flt-cuadro.cargando {
  width: 61px;
  height: 108px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--border);
  animation: fltLatido 1.2s ease-in-out infinite;
}

@keyframes fltLatido {
  0%, 100% { opacity: .35; }
  50% { opacity: .7; }
}

@media (prefers-reduced-motion: reduce) {
  .flt-cuadro.cargando { animation: none; }
}

/* Los dos botones de reset, uno al lado del otro: "por defecto" vuelve a
   fabrica (suavizado incluido) y "sacar todo" apaga solo los filtros de
   gusto. Juntos porque se comparan entre si. */
.flt-reset { display: flex; gap: 8px; }
.flt-reset .btn { flex: 1 1 0; margin-top: 8px; font-size: 13px; }

/* El tilde de "usar siempre estos filtros". Encontrar el look propio
   cuesta una vez; repetirlo en cada video es trabajo que no aporta. */
.flt-recordar {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
  cursor: pointer;
}

.flt-recordar input { width: 20px; height: 20px; accent-color: var(--accent); }

/* ---- Pantalla de transiciones ---- */

#trsVideoBox,
#efeVideoBox {
  position: relative;
  height: 46vh;
  max-height: 420px;
  margin: 10px 0 4px;
  border: 1px solid var(--accent-2);
  border-radius: 12px;
  background: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#trsVideoBox video,
#efeVideoBox video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

#trsVideoBox .hint,
#efeVideoBox .hint,
#efeVideoBox .error-box,
#trsVideoBox .error-box { margin: 0 14px; text-align: center; }

/* Volver del ejemplo al video entero, sin salir de la pantalla. */
.trs-volver {
  position: absolute;
  left: 8px;
  top: 8px;
  width: auto;
  margin: 0;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(0, 0, 0, .7);
  color: #fff;
  font-size: 12px;
}

.trs-elegir {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--border);
}

.trs-lista {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--border);
}

.trs-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
  min-width: 0;
}

.trs-item > span { flex: 1 1 0; min-width: 0; color: var(--text-dim); }

/* LOS DOS BOTONES DE LA FILA, RESETEADOS JUNTOS.
   La hoja tiene una regla global `button { width: 100%; min-height: 48px;
   margin-top: 12px }`. Dentro de una fila flex eso significa que CADA uno
   pide el renglon entero: el nombre de la transicion quedaba aplastado
   contra el borde, el "Sacar" se iba de la pantalla, y el margin-top los
   bajaba fuera del eje de la fila.
   `.rep-fix` y `.rep-play` no traen su propio ancho: en el panel de avisos
   lo reciben de `.rep-hall-f button`. Aca hacen falta los dos, no uno
   solo -- resetear el ▶ y dejar el "Sacar" en 100% fue arreglar la mitad
   del renglon. */
.trs-item button {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  min-height: 0;
  height: 32px;
  border-radius: 8px;
}

.trs-item .rep-play {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .06);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
}

.trs-item .rep-fix { margin-left: auto; }

/* La regla de Transiciones. Misma que la de Fotos -- ver dónde cae lo que
   uno puso es la mitad de la decisión -- pero una transición es un PUNTO y
   no un tramo, así que la marca es una raya y no una barra. */
.trs-ruler .pin {
  width: 3px;
  margin-left: -1.5px;
  height: 13px;
  /* El mismo amarillo del botón "Marcar acá": lo que marcaste y dónde
     quedó marcado se leen como la misma cosa. */
  background: var(--accent-2);
  opacity: .95;
  border-radius: 1px;
}

/* La que pusiste sobre una foto, del mismo verde que su botón. Amarillo =
   la elegiste vos con el reproductor; verde = está sobre una foto. */
.trs-ruler .pin.enfoto { background: var(--verde); }

/* LO QUE QUEDÓ DESCOLOCADO al editar el texto después de ponerlo. Rayado
   y en rojo: no es una marca más, es algo que hay que mirar. */
.trs-ruler .pin.rota {
  background: repeating-linear-gradient(
    45deg, var(--rojo) 0 3px, rgba(0, 0, 0, .35) 3px 6px
  );
  opacity: 1;
}

.trs-item.rota { background: rgba(201, 55, 44, .1); border-radius: 6px; }

.trs-item.rota > span em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--danger);
  margin-top: 1px;
}

.fotos-row.rota { background: rgba(201, 55, 44, .1); }
.fotos-row.rota .tag { color: var(--danger); border-color: var(--danger); }

/* El punto en la etapa: se ve desde cualquier pantalla, sin entrar a
   buscar. */
.etapas .etapa.avisa { position: relative; }

.etapas .etapa.avisa::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--danger);
}

/* Un EFECTO no es una raya sino una barra: ocupa tiempo, y ver cuánto
   ocupa es la mitad de lo que hay que saber al ponerlo. */
.trs-ruler .pin.tramo {
  width: auto;
  margin-left: 0;
  height: 11px;
  background: var(--accent);
  opacity: .55;
  border-radius: 2px;
}

/* LOS BORDES DE LAS FOTOS.
   Rojo: ahí el video cambia de imagen y no hay ningún efecto puesto.
   Verde: ya tiene el suyo. Van más altos que los pines de transición para
   que se lean como otra cosa -- son una sugerencia, no algo que pusiste. */
.trs-ruler .pin.foto {
  width: 3px;
  margin-left: -1.5px;
  height: 19px;
  background: var(--danger);
  opacity: .9;
  border-radius: 1px;
}

.trs-ruler .pin.foto.hecha { background: var(--verde); }

/* Los dos modos. La pantalla tenía las dos formas de poner una transición
   a la vista al mismo tiempo, cada una con su explicación: se elige una y
   se ve esa. */
.trs-modos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 12px;
}

.trs-modos .trs-modo {
  width: auto;
  margin: 0;
  min-height: 44px;
  padding: 0 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
}

.trs-modos .trs-modo.on {
  border-color: var(--accent);
  background: rgba(87, 221, 255, .1);
  color: var(--accent);
  font-weight: 600;
}

/* Los comienzos de las fotos, como botones. En la regla se ven pero no se
   tocan: son rayas de 3 px y el dedo no acierta. */
.trs-fotos { margin-top: 2px; }

.trs-fchips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }

.trs-fchip {
  width: auto;
  margin: 0;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--danger);
  background: rgba(255, 138, 138, .1);
  color: var(--danger);
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.trs-fchip b {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
}

.trs-fchip.hecha {
  border-color: var(--verde);
  background: rgba(126, 224, 160, .12);
  color: var(--verde);
}

/* La que estás por poner, todavía sin elegir el efecto. */
.trs-ruler .sel {
  width: 3px;
  margin-left: -1.5px;
  height: 17px;
  background: var(--accent);
}

/* La barra de precision de Transiciones. Misma idea que la de Cortes: sin
   saltos de a 0,1 s el golpe cae donde caiga, y el punto exacto es
   justamente lo que se esta eligiendo. */
.trs-transporte {
  margin: 8px 0 6px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, .02);
}

.trs-reloj {
  display: block;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 8px;
}

.trs-reloj em { font-style: normal; font-size: 15px; opacity: .75; }

/* Acá vivía `.trs-pasos` con seis teclas propias (−2 −1 −0,1 +0,1 +1 +2) y
   sin play. Se fue: la barra es ahora la MISMA de Fotos, `.cortes-transport`
   con `.cortes-nb`, que ya trae su propio estilo probado. Dos barras
   distintas para el mismo gesto era una de más. */
.trs-transporte .cortes-transport { margin: 0; }

/* El corredizo salió del recuadro del transporte para poder ir debajo de
   la regla: se arrastra mirando dónde caen las marcas, así que van
   pegados.

   OJO CON position. `.cortes-scrub` nació para ir ENCIMA del video
   (absolute, pegado abajo, con un degradado oscuro para leerse sobre la
   imagen). Acá abajo eso lo dejaba flotando fuera del flujo y caía justo
   arriba de los botones. Vuelve a la fila normal y pierde el degradado,
   que sin video atrás no tapa nada -- solo ensucia. */
/* Ajustado al hueso. El pulgar mide 15 px y la caja 26, así que el pulgar
   entra entero: no se desborda por abajo y no hace falta dejarle aire de
   más. Los 6 px son para que el dedo no toque el botón al soltar. */
.trs-corredizo {
  margin: 2px 0 6px;
  padding: 0;
}

.trs-corredizo .cortes-scrub {
  position: static;
  display: block;
  width: 100%;
  height: 26px;
  margin: 0;
  background: none;
}

/* El recuadro del cuerpo, pegado al corredizo. Tenía 12 px de margen y 12
   de relleno arriba: 24 px de aire entre la línea y los botones, que en
   una pantalla de teléfono es una fila entera desperdiciada. */
#trsCuerpo .flt-caja {
  margin-top: 0;
  padding-top: 10px;
}

/* EL SELECTOR DE EFECTO.
   Antes eran diez botones en dos columnas con el nombre largo adentro
   ("Vuela hacia la izquierda"), que se partia en dos renglones en cada
   uno: una pared de texto de cinco filas donde siete de las diez opciones
   empezaban con la misma palabra. Ahora las cuatro direcciones son cuatro
   flechas -- no necesitan nombre -- y las otras seis van en teclas de tres
   por fila con una palabra sola. */
.trs-ayuda {
  margin: 8px 2px 0;
  font-size: 12.5px;
  color: var(--text-dim);
  text-align: center;
}

.trs-cuando {
  text-align: center;
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: 12px;
}

.trs-cuando b {
  color: var(--accent);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 17px;
}

.trs-grupo {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 12px 2px 5px;
}

.trs-flechas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.trs-otras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.trs-otras.dos { grid-template-columns: repeat(2, 1fr); }

/* Los dos extremos del tramo, siempre a la vista. El que falta marcar va
   resaltado: así el orden se lee de la pantalla y no de la memoria. */
.efe-marcas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-bottom: 10px;
}

.efe-marcas span {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 15px;
  color: var(--text);
  text-align: center;
}

.efe-marcas em {
  display: block;
  font-style: normal;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 2px;
}

.efe-marcas .pide {
  border-color: var(--accent-2);
  background: rgba(255, 209, 102, .12);
  color: var(--accent-2);
}

/* Los dos modos del texto: sacar palabras o poner aire. */
.txt-modos { margin: 0 0 10px; }

/* El respiro que puso el agente. Mismo signo que las pausas de verdad
   --para él las dos son aire-- y distinto color, porque una la puso él. */
.txt-cuerpo .txt-respiro {
  display: inline;
  width: auto;
  min-height: 0;
  margin: 0 0 0 1px;
  padding: 0 2px;
  border: 0;
  border-radius: 3px;
  background: rgba(126, 224, 160, .18);
  color: var(--verde);
  font-weight: 700;
}

/* Con el modo prendido, las palabras invitan a tocarse. */
.txt-cuerpo.modo-respiro .txt-p { text-decoration-color: transparent; }
.txt-cuerpo.modo-respiro .txt-p:active { background: rgba(126, 224, 160, .25); }

/* Los que alargan el video. Se ven distintos porque hacen otra cosa: el
   resto pinta, estos estiran. */
.trs-tecla.estira {
  border-color: var(--accent-2);
  background: rgba(255, 209, 102, .1);
}
.trs-tecla.estira span { color: var(--accent-2); }

.trs-tecla {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: auto;
  margin: 0;
  min-height: 62px;
  padding: 6px 4px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .05);
  color: var(--text);
}

.trs-tecla b { font-size: 20px; font-weight: 400; line-height: 1; }
.trs-tecla.flecha b { font-size: 26px; }

.trs-tecla span {
  font-size: 10.5px;
  color: var(--text-dim);
  line-height: 1.1;
  text-align: center;
}

.trs-tecla:active { border-color: var(--accent); background: rgba(87, 221, 255, .12); }

/* El cuadro de portada, en grande. En una tira de miniaturas de 108 px no
   se distingue un gesto de otro, y la portada decide si alguien toca el
   video. */
.flt-lupa {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, .92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px;
}

.flt-lupa img {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 12px;
  object-fit: contain;
}

.flt-lupa-pie { display: flex; gap: 10px; width: 100%; max-width: 420px; }
.flt-lupa-pie .btn { flex: 1 1 0; margin: 0; }

/* La barra de etapas.

   Las pantallas de edicion no son una fila: se va y se vuelve. Se pone una
   foto, se escucha, se saca una palabra, se cambia la foto de lugar. Con
   un solo boton "volver" hay que pasar por todas las pantallas del medio
   para llegar a la de al lado. */
.etapas {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 0 8px;
  margin-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.etapas::-webkit-scrollbar { display: none; }

.etapas .etapa {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  min-height: 40px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.etapas .etapa span { font-size: 14px; }

/* Donde estoy parado. Se ve distinto y no hace nada al tocarlo. */
.etapas .etapa.aqui {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(87, 221, 255, .1);
  font-weight: 600;
  cursor: default;
}

/* La pantalla de filtros, con imagen en vez de video. */
#fltVideoBox img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* El filtro CSS lo pone el JS mientras se arrastra. La transicion es
     corta a proposito: tiene que sentirse instantaneo, no animado. */
  transition: filter .06s linear;
}

/* La viñeta en vivo. Es un degradado encima, que es literalmente lo mismo
   que hace el filtro de verdad -- de todos los aproximados es el unico
   exacto. */
.flt-vineta {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Mientras llega la imagen del servidor. Apenas se nota: son 0,28 s y
   parpadear mas que eso distrae. */
#fltVideoBox.cargando img { opacity: .82; }

/* La tira de cuadros arriba de la imagen. */
#fltTira {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 8px;
  -webkit-overflow-scrolling: touch;
}

/* ---- Teleprompter: grabar por tramos ---- */

/* Terminar es una decisión distinta de cortar el tramo, así que se ve
   distinta: verde y con palabra, no un ícono más de la fila. */
/* Turquesa, el mismo que "Terminar video" en el resto de la app: es la
   misma accion --cerrar y entregar-- y tiene que verse igual en los dos
   lados. */
.pr-b.pr-terminar {
  background: var(--accent);
  color: #06232b;
  border-color: var(--accent);
  font-weight: 700;
}

/* Cuántos tramos llevás, al lado del reloj. */
.pr-tramos {
  font-size: 12px;
  color: #fff;
  background: rgba(0, 0, 0, .55);
  border-radius: 999px;
  padding: 2px 9px;
}

/* El ▶ de ayuda. Va arriba de todo en Calibrar: es lo primero que mira
   el que no sabe qué hacer con esa pantalla. */
.pr-ayuda {
  width: 100%;
  margin: 0 0 12px;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--accent);
  background: rgba(87, 221, 255, .1);
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
}

/* Lo técnico, plegado. Se abre solo si alguien lo busca. */
.pr-detalles {
  margin-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: 8px;
}

.pr-detalles summary {
  font-size: 12px;
  color: rgba(255, 255, 255, .6);
  cursor: pointer;
  padding: 4px 0;
}

/* La fila de los tres del texto: van arriba de la de grabar y se ven como
   un grupo aparte, porque manejan otra cosa. */
.pr-fila-texto { justify-content: center; gap: 10px; margin-bottom: 6px; }
.pr-fila-texto .pr-b { min-width: 62px; font-size: 18px; }
/* EL REPARTO DE LA FILA DE ARRIBA.
   Los cinco botones no valen lo mismo: ✕, A− y A+ se aprietan una vez y
   no se tocan mas; Repetir y ↺ se aprietan apurado, justo despues de
   equivocarse. Asi que los primeros van fijos y angostos y los otros dos
   se quedan con lo que sobra.

   Va con `flex` y no con `min-width`: la regla de base es `flex: 1 1 0`,
   que reparte el ancho en partes iguales e ignora cualquier minimo. */
.pr-fila-texto .pr-b.pr-cerrar,
.pr-fila-texto .pr-b.pr-ayuda,
.pr-fila-texto .pr-b.pr-letra-chica {
  flex: 0 0 38px;
  min-width: 0;
  padding-left: 2px;
  padding-right: 2px;
  font-size: 15px;
}
/* La "i" de ayuda, con la misma pinta discreta que la X: ninguna de las
   dos es una accion del trabajo. */
/* La T de "cambiar el texto", con la misma pinta discreta que la X:
   ninguna de las dos es una accion del trabajo de grabar. */
.pr-fila-texto .pr-b.pr-ayuda {
  color: var(--text-dim);
  font-weight: 700;
}
/* Salir, discreto: no es una accion del trabajo. */
.pr-fila-texto .pr-b.pr-cerrar { color: var(--text-dim); }
/* Estas dos se quedan con el resto, y Repetir con mas porque lleva palabra. */
.pr-fila-texto .pr-b.pr-rehacer { flex: 2 1 0; }
.pr-fila-texto .pr-b.pr-denuevo { flex: 1 1 0; font-size: 20px; }

/* El párrafo ya grabado: se ve que quedó atrás, sin desaparecer. Con
   quince párrafos y cinco tramos, saber cuáles faltan es la mitad del
   trabajo. */
/* YA GRABADO. Sin tachar: tachar quiere decir "esto no va", y esto sí va
   -- es justamente lo que quedó bien. Se apaga un poco y lleva un ✓
   adelante, que es lo que se lee como "listo".
   El tachado queda reservado para lo que se descarta. */
.pr-p.grabado {
  opacity: .45;
  text-decoration: none;
}

.pr-p.grabado::before {
  content: "✓ ";
  color: var(--verde);
  font-weight: 700;
  opacity: 1;
}

/* ---- Teleprompter: modo párrafo por párrafo ---- */

/* Un párrafo por vez, quieto. No hay renglón que perseguir: se lee como se
   lee un cartel.

   ARRIBA DE TODO Y NO EN EL MEDIO.

       fijate vos en qué renglón aparece el texto del teleprompter. por qué
       no empieza desde la primera        -- Gustavo, 08/09/2026

   Estaba centrado en la banda. Con un párrafo de dos renglones adentro de
   una banda de 42vh, eso son ~125 px vacíos ARRIBA: el texto arranca a
   media banda y los ojos bajan justo esa distancia. Y bajar es alejarse
   del lente, que es lo único que la banda existe para evitar.

   Centrar también repartía el recorte de un párrafo largo entre las dos
   puntas: se perdía el principio Y el final. Pegado arriba se pierde sólo
   la cola, que es la mitad que todavía no se dijo. */
/* EL BLOQUE QUE NO ENTRA NI CON LA LETRA MAS CHICA.

   Va ARRIBA de la banda y no adentro: adentro se lo comeria el mismo
   `overflow: hidden` que esconde lo que no entra, que es justo lo que
   este cartel viene a denunciar.

   Amarillo y no rojo: no se rompio nada, hay algo que el agente tiene que
   decidir. El video se graba igual. */
.pr-no-entra {
  /* PEGADO A LA BANDA, y encima del video. La posición exacta la pone
     `_prAvisarSiNoEntra`: la banda se mueve con el tirador. */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  margin: 0;
  /* Tapa el final del bloque que no entra, que ya estaba cortado. Con
     fondo sólido: encima de texto, un fondo translúcido no se lee. */
  background: #2A2210;
  padding: 9px 14px;
  border-top: 1px solid rgba(240, 190, 60, .55);
  color: #F0BE3C;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 600;
}

.pr-banda.modo-parrafo .pr-visor {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.pr-banda.modo-parrafo .pr-tren { transform: none !important; width: 100%; }
.pr-banda.modo-parrafo .pr-p { display: none; }

/* EL PARRAFO CON EL QUE SE MIDE CUANTO ENTRA.

   Vive adentro del mismo tren para heredar la letra, el interlineado y el
   ancho de verdad -- que es lo único que decide cuántos renglones ocupa
   un texto. Medirlo en una caja aparte daría otro número.

   VA DESPUÉS DE LA REGLA DE ARRIBA a propósito: las dos tienen la misma
   especificidad, así que la que gana es la última. Sin esto quedaría en
   `display: none` y `scrollHeight` daría cero.

   `visibility: hidden` y no `display: none`: un elemento sin caja no se
   puede medir. Fuera de la pantalla para que no tape nada. */
.pr-banda.modo-parrafo .pr-medidor,
.pr-medidor {
  display: block;
  position: absolute;
  left: -9999px;
  top: 0;
  margin: 0;
  visibility: hidden;
  pointer-events: none;
}

.pr-banda.modo-parrafo .pr-p.activo {
  display: block;
  margin: 0;
  text-align: center;
  opacity: 1;
}

/* La marca de la línea de lectura no va: no hay línea, va todo el párrafo. */
.pr-banda.modo-parrafo ~ .pr-marca,
.pr-banda.modo-parrafo .pr-marca { display: none; }

/* Los dos modos, uno al lado del otro. */
.pr-modos { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.pr-modos .pr-b { font-size: 13px; }
.pr-modos .pr-b.elegido {
  border-color: var(--accent);
  background: rgba(87, 221, 255, .14);
  color: var(--accent);
  font-weight: 700;
}

/* Repetir la última toma. En ámbar: no es navegación, es deshacer. */
.pr-b.pr-rehacer {
  border-color: var(--accent-2);
  background: rgba(255, 209, 102, .14);
  color: var(--accent-2);
}

/* La explicación del borrador, pegada a su botón. */
.rep-sub {
  margin: -4px 2px 10px;
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}

/* ---- La pantalla del borrador ---- */
.bor-t { margin: 0 0 4px; font-size: 18px; }
.bor-lista { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 14px; }

.bor-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .02);
}

.bor-im {
  width: 64px;
  height: 96px;
  object-fit: cover;
  border-radius: 6px;
  background: #000;
  flex: 0 0 auto;
}

.bor-txt { min-width: 0; }
.bor-cuando {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--accent);
}
.bor-dice { font-size: 12.5px; color: var(--text-dim); margin: 3px 0; line-height: 1.35; }
.bor-porque { font-size: 12px; color: var(--verde); line-height: 1.3; }
.bor-salt { color: var(--danger); }

/* La miniatura del borrador es un botón: en 64×96 no se distingue si la
   imagen sirve, y la única forma de juzgarla es verla grande. */
.bor-lupa {
  width: auto;
  margin: 0;
  padding: 0;
  min-height: 0;
  border: 0;
  background: none;
  flex: 0 0 auto;
  position: relative;
  line-height: 0;
}

.bor-lupa::after {
  content: "⤢";
  position: absolute;
  right: 3px;
  bottom: 3px;
  font-size: 11px;
  color: #fff;
  background: rgba(0, 0, 0, .6);
  border-radius: 4px;
  padding: 0 3px;
  line-height: 1.4;
}

/* Grabar de nuevo, en Texto. Separado del resto por una línea: no es un
   paso del trabajo, es la salida para cuando la toma no sirve. */
.txt-regrabar {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.txt-regrabar .hint { margin-top: 6px; }

/* Empezar de nuevo, en el teleprompter. Rojo apagado: es destructivo,
   pero no es el botón principal de nada. */
.pr-b.pr-denuevo { color: var(--danger); }

/* LA CUENTA ATRÁS antes de grabar. Encima de todo y bien grande: se mira
   de reojo mientras uno se acomoda, no se lee. Tocarla la cancela, así que
   ocupa la pantalla entera y no hay que apuntarle. */
.pr-cuenta {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .35);
  color: #fff;
  font-size: 22vh;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 4px 24px rgba(0, 0, 0, .8);
  cursor: pointer;
  user-select: none;
}

/* LA LÍNEA DE ENCUADRE. Fina, roja y punteada: tiene que verse sobre
   cualquier fondo sin competir con la propia cara. No se graba -- está en
   el DOM, encima del video, igual que la banda del texto. */
.pr-guia {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px dashed rgba(255, 60, 60, .9);
  pointer-events: none;
  z-index: 3;
}


/* "Le faltó algo": no es un error --el video está y sirve-- pero tampoco
   es un dato al pasar. Borde ámbar: mirá esto, no rompió nada. */
.falto-card {
  border-left: 3px solid var(--warning, #f5c451);
}

/* "Otra imagen", en cada fila del borrador. Chiquito y discreto: la
   decisión principal de esa pantalla es seguir, no rehacer. */
.bor-cambiar {
  width: auto;
  min-height: 0;
  margin: 6px 0 0;
  padding: 3px 9px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
}
.bor-cambiar:disabled { opacity: .6; }


/* LO QUE EL SISTEMA SE GUARDO SIN OFRECER.
   Mismo signo que las pausas ($) porque es la misma cosa --aire--, pero
   punteado y apagado: se lee como "esto existe y no te lo propuse". Tocarlo
   lo saca; el punteado pasa a lleno cuando queda elegido. */
/* AIRE QUE NO SE OFRECIO.
   Va en ambar y NO en gris: los otros tres $ del texto ya son grises
   parecidos --la pausa que esta, la que saque, la que puso el agente-- y un
   cuarto gris no se distingue de ninguno. El ambar no lo usa nada mas en
   esta pantalla, asi que dice "esto es otra cosa" sin tener que leerlo.
   El punteado significa "todavia no esta decidido"; al elegirlo pasa a
   lleno y tachado, igual que el resto del texto. */
.txt-cuerpo .txt-descarte {
  display: inline-block;
  width: auto;
  min-height: 0;
  padding: 1px 5px;
  margin: 0 1px;
  border: 1px dotted var(--warning, #f5c451);
  border-radius: 6px;
  background: rgba(245, 196, 81, .07);
  color: var(--warning, #f5c451);
  font-weight: 700;
  letter-spacing: 1px;
  vertical-align: baseline;
  cursor: pointer;
}
.txt-cuerpo .txt-descarte.tachada {
  border-style: solid;
  background: rgba(245, 196, 81, .2);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

/* La referencia de los $, arriba del texto. */
.txt-ref {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
}
.txt-ref-i { display: inline-flex; align-items: center; gap: 5px; }
.txt-ref-s {
  display: inline-block;
  padding: 0 4px;
  border: 1px dashed var(--border);
  border-radius: 5px;
  color: var(--text-dim);
  font-weight: 700;
}
.txt-ref-s.fuera { opacity: .45; text-decoration: line-through; }
.txt-ref-s.respiro {
  border: 0;
  background: rgba(126, 224, 160, .18);
  color: var(--success);
}
.txt-ref-s.descarte {
  border: 1px dotted var(--warning, #f5c451);
  background: rgba(245, 196, 81, .07);
  color: var(--warning, #f5c451);
}


/* PROGRESO DE LA SUBIDA DE UNA ENTREVISTA.
   Va en la fila del agente, pegado al boton que la dispara: el indicador
   estaba al pie de la seccion y quedaba lejos de donde uno mira despues de
   apretar. Barra y numero juntos -- la barra dice de un vistazo si falta
   poco, el numero dice cuanto. En una subida de veinte minutos hacen falta
   los dos. */
.ent-prog {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
}
.ent-prog-barra {
  display: inline-block;
  position: relative;
  width: 92px;
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.ent-prog-relleno {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width .25s ease;
}
/* Sin porcentaje que informar --la extraccion de audio-- la barra se
   mueve sola en vez de quedarse clavada en 100 %, que se lee como colgado. */
.ent-prog-barra.indeterminada .ent-prog-relleno {
  width: 40% !important;
  animation: ent-prog-vaiven 1.1s ease-in-out infinite alternate;
}
@keyframes ent-prog-vaiven {
  from { transform: translateX(-100%); }
  to   { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
  .ent-prog-barra.indeterminada .ent-prog-relleno {
    animation: none;
    width: 100% !important;
    opacity: .55;
  }
  .ent-prog-relleno { transition: none; }
}
.ent-prog-texto { font-variant-numeric: tabular-nums; }


/* ────────────────────────────────────────────────────────────────
   LOS TRES ESTADOS DEL TEXTO, Y POR QUE NO SE PARECEN EN NADA

   Antes el aviso de "frase repetida" usaba --accent-2 (#ffdd57), el
   mismo ambar del aire que el sistema no ofrecio -- que SI se corta al
   tocarlo. Dos cosas opuestas del mismo color. El agente devolvio un
   corte, aplico, siguio viendo amarillo y concluyo que no se habia
   aplicado. El motor estaba bien; mentia la pantalla.

     CORTE APLICADO   gris tachado          .ya-fuera
     PROPUESTA        ambar, tocable        .txt-descarte / .txt-s
     AVISO            punteado + etiqueta   .es-repetido + .txt-aviso-tag

   El color no alcanza como unica diferencia: en un telefono, al sol,
   dos tonos parecidos son el mismo tono. Por eso el aviso ademas dice
   "aviso" con todas las letras.
   ──────────────────────────────────────────────────────────────── */

:root {
  /* Color exclusivo de los avisos. No lo usa nada que se pueda cortar:
     ni el ambar de las propuestas, ni el rojo de lo tachado, ni el verde
     de lo que vuelve, ni el cian del karaoke. */
  --aviso-info: #9db4d0;
}

.txt-cuerpo .txt-aviso-tag {
  display: inline-block;
  vertical-align: .1em;
  margin-right: 4px;
  padding: 0 5px;
  border: 1px solid var(--aviso-info);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--aviso-info);
  background: rgba(157, 180, 208, .10);
  cursor: help;
}

/* En la referencia de arriba la etiqueta va sin margen: ahi es un ejemplo
   del signo, no una marca sobre una palabra. */
.txt-ref .txt-aviso-tag { margin-right: 0; }

/* Lo tachado gana sobre el aviso, y la etiqueta se apaga: si la palabra ya
   se saco, que ademas estuviera repetida dejo de importar. */
.txt-cuerpo .txt-p.ya-fuera.es-repetido { text-decoration: line-through; }

/* ────────────────────────────────────────────────────────────────
   LA CÁPSULA DE PAUSA

   Una cápsula por pausa FÍSICA, con la duración en número adentro.
   Antes era un $ por cada medio segundo, y una misma pausa real
   aparecía como dos o tres racimos vecinos de estilos distintos.
   El agente lo dijo así: "no queda claro tantos $ ni para qué
   sirven". Los racimos eran ilegibles por diseño, no por falta de
   leyenda: no eran tres cosas, era una pausa contada tres veces.

   Nadie cuenta símbolos. Los segundos se leen.
   ──────────────────────────────────────────────────────────────── */

.txt-cuerpo .txt-cap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: -4px;
  margin: 0 3px;
  /* +50 % de relleno lateral: la capsula se toca con el dedo, y con el
     ancho justo del contenido la yema tapaba la de al lado. El relleno
     vertical casi no se mueve -- esto vive entre palabras, y crecer a lo
     alto separa los renglones y el texto deja de leerse como un texto. */
  padding: 4px 18px 4px 11px;
  width: auto;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel, #131922);
  color: var(--text-dim);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.txt-cuerpo .txt-cap:hover { border-color: var(--text-dim); }
.txt-cuerpo .txt-cap.chica { padding: 4px 19px; }
.txt-cuerpo .cap-num { color: var(--text); }
.txt-cuerpo .cap-resto { color: var(--text-dim); font-weight: 500; opacity: .8; }

/* La cinta: los tres estados que ya distinguen los colores desde la
   v316. Gris lo que ya no está, cian lo disponible, ámbar lo que
   tiene voz adentro y decide la persona. */
.txt-cuerpo .cap-cinta {
  display: inline-flex;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
}
.txt-cuerpo .cap-t { display: block; height: 100%; }
.txt-cuerpo .cap-fuera { background: var(--text-dim); opacity: .45; }
.txt-cuerpo .cap-libre { background: var(--accent); opacity: .55; }
.txt-cuerpo .cap-voz   { background: var(--warning, #f5c451); opacity: .8; }

/* Abierta: las unidades de medio segundo, para achicar en vez de
   borrar. Achicar es lo que hace un editor; sacar la pausa entera
   deja el habla atropellada. */
.txt-cuerpo .txt-cap-abierta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: -5px;
  margin: 0 3px;
  padding: 4px 6px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: rgba(87, 221, 255, .07);
}
.txt-cuerpo .cap-u {
  /* 33 px: los 22 de antes +50 %. Cada uno es medio segundo de aire y se
     tocan de a uno, asi que el ancho es lo que decide si se marca el que
     se queria o el de al lado. */
  width: 33px;
  height: 26px;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg, #0b0f14);
  color: var(--text-dim);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.txt-cuerpo .cap-u:hover { border-color: var(--text-dim); }

/* EL LENGUAJE DE LOS CUADRADITOS, sin depender del color.
   Lleno = ese medio segundo esta en el video. Hueco = ya lo saque.
   En un telefono al sol el color no siempre se distingue; lleno contra
   hueco si. El punto de antes no distinguia nada: el mismo signo servia
   para el aire que estaba y para el que ya no. */
.txt-cuerpo .cap-u { font-size: 13px; line-height: 1; }

/* Ya sacado: hueco y apagado. Es lo que MAS hay en un video editado, asi
   que tiene que ser lo mas tranquilo de la pantalla. */
.txt-cuerpo .cap-u.yafuera {
  color: var(--text-dim);
  opacity: .55;
  background: transparent;
}
.txt-cuerpo .cap-u.yafuera:hover { opacity: 1; }

/* Con voz adentro: la flechita invita a escuchar, que es lo unico que
   sirve ahi. El ambar es el mismo de esto lo decidis vos. */
/* EL MARGEN. No es un boton: no se toca, no se saca. Se dibuja finito y
   apagado justamente para que no invite -- son 0,08 s que protegen la
   palabra de al lado, no aire que alguien pueda decidir. */
/* LA FLECHITA DEL BORDE COMIDO.
   Chiquita y amarilla a proposito: es un aviso, no una alarma. La palabra
   esta y se entiende; lo que falta son decimas del ataque o de la cola, y
   capaz suena bien igual. Marcada para devolver se rellena. */
.txt-cuerpo .txt-borde {
  width: auto;
  min-height: 0;
  height: 16px;
  padding: 0 3px;
  margin: 0 1px 0 -1px;
  border: 1px solid rgba(245, 196, 81, .55);
  border-radius: 4px;
  background: transparent;
  color: var(--warning, #f5c451);
  font-size: 10px;
  line-height: 1;
  vertical-align: super;
  cursor: pointer;
}

.txt-cuerpo .txt-borde.vuelve {
  background: rgba(245, 196, 81, .22);
  border-color: rgba(245, 196, 81, .9);
}

.txt-cuerpo .cap-u.margen {
  width: 6px;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  opacity: .4;
  cursor: default;
  padding: 0;
}

.txt-cuerpo .cap-u.voz {
  color: var(--warning, #f5c451);
  border-color: rgba(245, 196, 81, .5);
}

.txt-cuerpo .cap-u.voz {
  border-color: var(--warning, #f5c451);
  color: var(--warning, #f5c451);
  background: rgba(245, 196, 81, .1);
}
.txt-cuerpo .cap-u.yafuera {
  opacity: .3;
  cursor: default;
  text-decoration: line-through;
}

/* MARCADO PARA SACAR.
   ------------------
   VA ULTIMO A PROPOSITO. Estaba escrito ANTES que `.cap-u.voz`, con la
   misma especificidad, asi que la voz le ganaba: marcar un cuadradito con
   voz adentro no mostraba absolutamente nada. Y ese es el que mas importa
   marcar, porque es el unico que decide la persona y no el sistema.

   RELLENO ENTERO, no un tinte. Antes era coral al 16% sobre fondo oscuro,
   en un cuadrado de 22x24 px: en pantalla grande se adivina, en un
   telefono al sol no esta. Lo unico que marcaba era el borde de un pixel.

   El color no se inventa: el coral ya significa "esto se saca" en toda la
   app. Lo que cambia es el volumen.

   Y la senal no depende solo del color: lleno contra hueco se distingue
   aunque el color no, que es la regla que ya seguian los cuadraditos. */
.txt-cuerpo .cap-u.marcada,
.txt-cuerpo .cap-u.voz.marcada,
.txt-cuerpo .cap-u.yafuera.marcada {
  background: var(--danger, #ff8a8a);
  border-color: var(--danger, #ff8a8a);
  /* Oscuro sobre el coral. Coral sobre coral no se leeria. */
  color: #16181d;
  opacity: 1;
  font-weight: 700;
  text-decoration: line-through;
  /* Un halo del color del fondo lo despega de los de al lado: pegados, tres
     marcados seguidos se leian como una sola barra. */
  box-shadow: 0 0 0 1px var(--bg, #0b0f14);
}
.txt-cuerpo .cap-todo {
  height: 24px;
  width: auto;
  min-height: 0;
  padding: 0 8px;
  margin-left: 2px;
  border: 1px solid var(--danger, #ff8a8a);
  border-radius: 6px;
  background: transparent;
  color: var(--danger, #ff8a8a);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.txt-cuerpo .cap-todo:hover { background: rgba(255, 138, 138, .14); }

/* ────────────────────────────────────────────────────────────────
   LA BARRA DE ACCIÓN

   El caso común es un botón, no veinte decisiones. Medido sobre un
   video sin editar: 23 pausas y 59,6 s de un toque.

   NO toca los tramos con voz adentro. Ahí está la ventaja de tener
   una persona mirando -- meterlos en un botón ciego sería tirarla.
   ──────────────────────────────────────────────────────────────── */

.txt-barra {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(255, 255, 255, .02);
}
.txt-barra-btn {
  flex: 1 1 15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  width: auto;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  /* TURQUESA, NO VERDE. El verde de `--success` significa "esto ya se
     hizo" en toda la app -- y este boton ofrece trabajo pendiente, que
     es lo contrario. Encima el cartel de abajo (.hecho), que SI confirma,
     usaba el mismo verde: los dos sentidos pintados igual. */
  background: var(--accent);
  color: #06232b;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.txt-barra-btn:disabled { opacity: .4; cursor: default; }
/* Después del barrido dice el estado nuevo, no vuelve a ofrecer lo
   mismo: un botón que ofrece algo que ya se hizo se lee como que no
   pasó nada. */
.txt-barra-btn.hecho {
  background: transparent;
  border: 1px solid var(--success, #7fffb3);
  color: var(--success, #7fffb3);
  opacity: 1;
}
.txt-barra-gana {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  padding: 1px 7px;
  border-radius: 5px;
  background: rgba(0, 0, 0, .16);
}
.txt-barra-chico {
  min-height: 46px;
  width: auto;
  padding: 0 15px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: transparent;
  color: var(--text-dim);
  font-size: 13.5px;
  cursor: pointer;
}
.txt-barra-chico:disabled { opacity: .3; cursor: default; }
.txt-barra-nota {
  flex: 1 1 100%;
  margin: 0;
  font-size: 12.5px;
  color: var(--text-dim);
}
.txt-barra-nota b { color: var(--warning, #f5c451); font-weight: 600; }


/* Una pausa que el sistema ya achicó. La flecha del "4,3 → 0,5 s" no
   necesita color: lo que necesita es que el número final se lea como el
   dato principal, porque es el que dice cómo suena el video ahora. */
.txt-cuerpo .txt-cap.achicada .cap-num { color: var(--text-dim); }
.txt-cuerpo .txt-cap.achicada .cap-num b {
  color: var(--text);
  font-weight: 700;
}


/* Lo que el sistema ya hizo, arriba del texto. No es un botón: es el
   estado del video cuando el agente llega. Antes esto se ofrecía como
   trabajo pendiente y apretarlo deshacía la edición automática. */
.txt-barra-hizo {
  flex: 1 1 100%;
  font-size: 13.5px;
  color: var(--success, #7fffb3);
}
.txt-barra-hizo b { font-weight: 700; }
/* Sin acciones, la barra es un aviso y no una fila de botones. */
.txt-barra.solo-resumen { padding: 9px 11px; }


/* EL NUMERO DE LA PAUSA.
   Chiquito y apagado: es una etiqueta para poder nombrarla --"la 7 quedó
   larga"-- no un dato del video. Tiene que poder ignorarse al leer el
   texto y encontrarse cuando se lo busca. */
.txt-cuerpo .cap-n {
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-dim);
  opacity: .65;
  margin-right: 4px;
  font-variant-numeric: tabular-nums;
}
.txt-cuerpo .txt-cap.achicada .cap-n { color: var(--success, #7fffb3); opacity: .8; }

/* EL NUMERO QUE DEVUELVE LA PAUSA.
   --------------------------------
   Se marca con un subrayado punteado: es la unica parte de la capsula que
   hace algo distinto del resto, y sin una señal nadie lo va a descubrir.
   No lleva fondo ni borde completo porque no es un boton aparte -- es el
   mismo numero de siempre, que ademas deshace.

   AREA TACTIL: la suya y unos pocos pixeles, NADA MAS. Este elemento vive
   ADENTRO del boton de la capsula y frena la propagacion, asi que un area
   grande se come al de afuera: es exactamente lo que le paso a la capsula
   el 20/08 con el area de 44 px del play, que la dejo sin abrir durante
   dos dias. El padding de 2px y el margen negativo que lo compensa dan
   algo mas de blanco para el dedo sin invadir nada.

   Ver tests/test_area_tactil.py, que se pone rojo si esto crece. */
.txt-cuerpo .cap-n.devolver {
  cursor: pointer;
  border-bottom: 1px dotted currentColor;
  padding: 2px 3px;
  margin: -2px -3px;
  border-radius: 4px;
}

/* Marcada para volver: se ve que va a pasar antes de aplicar. El ámbar es
   el mismo que usa el resto del texto para "esto lo decidís vos". */
.txt-cuerpo .cap-n.devolver.vuelve {
  color: var(--warning, #f5c451);
  background: rgba(245, 196, 81, .16);
  border-bottom-style: solid;
}

/* El boton que devuelve, adentro de la capsula abierta. Va al lado de
   "sacar toda": son las dos direcciones de lo mismo, y juntos se entienden
   sin que nadie explique nada. Ambar, que es el color de "esto lo decidis
   vos" en el resto del texto. */
/* EL CUADRADO QUE DEVUELVE. Ya sacado se ve apagado; marcado para volver
   se prende en ambar y cambia el punto por un +, que es lo que va a hacer:
   agregar ese medio segundo. */
.txt-cuerpo .cap-u.yafuera.vuelve {
  color: var(--warning, #f5c451);
  background: rgba(245, 196, 81, .2);
  border-color: rgba(245, 196, 81, .7);
}

/* LA LINEA QUE EXPLICA LA CAPSULA.
   Va en renglon aparte y en chico: no compite con los cuadrados, que son
   lo que hay que tocar. Aparece solo con la capsula abierta, asi que no
   ocupa lugar en el texto normal. */
.txt-cuerpo .cap-ayuda {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
  font-weight: 400;
  white-space: normal;
}

.txt-cuerpo .cap-ayuda b { color: var(--text); font-weight: 600; }
.txt-cuerpo .cap-ojo { color: var(--warning, #f5c451); }

/* Cerrar: la salida del que abrio a mirar. Sin color propio -- no hace
   nada al video, solo cierra. */
/* Cerrar ya no hereda de la clase cap-todo --esa engancha el manejador de
   sacar-- asi que se le da su propia forma, igual de chica. */
.txt-cuerpo .cap-cerrar {
  margin-left: 6px;
  opacity: .75;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: var(--text-dim);
  border-radius: 6px;
  padding: 1px 8px;
  font-size: 12px;
  cursor: pointer;
}

/* La capsula entera, cuando esta marcada para volver: se apaga lo tachado
   para que se lea que ese aire vuelve al video. */
.txt-cuerpo .txt-cap.devolviendo,
.txt-cuerpo .txt-cap-abierta.devolviendo {
  outline: 1px dashed rgba(245, 196, 81, .55);
  outline-offset: 2px;
  border-radius: 6px;
}
.txt-cuerpo .txt-descarte .cap-n { color: var(--warning, #f5c451); opacity: .85; }
.txt-cuerpo .txt-cap-abierta .cap-n { margin-right: 6px; }


/* EL PLAY DE UN TRAMO CON VOZ.
   Solo aparece donde hay algo que escuchar: un tramo ámbar del que no
   sabemos qué dice. Es el dato que falta para decidirlo -- antes había que
   escuchar el video entero buscando el momento. */
.txt-cuerpo .cap-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 5px;
  border-radius: 999px;
  border: 1px solid var(--warning, #f5c451);
  color: var(--warning, #f5c451);
  background: rgba(245, 196, 81, .12);
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
}
.txt-cuerpo .cap-play:hover { background: rgba(245, 196, 81, .28); }
.txt-cuerpo .cap-play.sonando {
  background: var(--warning, #f5c451);
  color: #241d06;
}


/* ---------------------------------------------------------------------
   BLOQUE D -- pantalla de texto
   --------------------------------------------------------------------- */

/* LA GRAMATICA DE COLOR.
   El color dice A DONDE te lleva; el relleno dice si es lo recomendado.
   Lleno = recomendado. Contorno = alternativa igual de valida.
   Por eso "Seguir sin fotos" es turquesa de contorno y no gris: gris se
   lee como "peor opcion", y no lo es. */
.btn-turquesa-contorno {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  font-weight: 600;
}
.btn-turquesa-contorno:hover { background: rgba(0, 0, 0, .08); }

/* Los dos primeros van en una linea; el tercero abajo, a lo ancho. */
.rep-fila {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.rep-fila .btn { flex: 1 1 0; min-width: 0; }

/* El aviso de mirar el video, pegado al video. */
.rep-aviso-video {
  margin: 6px 0 10px;
  padding: 8px 11px;
  border-radius: 8px;
  background: rgba(157, 180, 208, .14);
  border-left: 3px solid var(--aviso-info, #9db4d0);
  font-size: .92rem;
}

/* GRABAR DE NUEVO: texto chico, sin caja y sin color, separado por una
   linea fina. Es la salida para el que la busca, no una opcion para el
   que duda. */
.txt-regrabar {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .10);
}
.txt-regrabar-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: .88rem;
  color: var(--muted, #8b97a6);
  text-decoration: underline;
  cursor: pointer;
}
.txt-regrabar-link:hover { color: inherit; }

/* EL CUADERNO. Al lado del play y con el mismo peso visual: son dos
   iconos que hacen lo mismo --mostrar que hay adentro-- por dos sentidos
   distintos. */
.cap-cuaderno-btn {
  margin-left: 4px;
  cursor: pointer;
  opacity: .8;
  font-size: .95em;
}
.cap-cuaderno-btn:hover { opacity: 1; }

/* El desplegado. Se abre debajo, igual que el reproductor. */
.cap-cuaderno {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 3px 0 3px 6px;
  padding: 5px 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .05);
  border-left: 3px solid var(--muted, #8b97a6);
  font-size: .92rem;
}
.cap-cuaderno.vuelve {
  border-left-color: var(--verde);
  background: rgba(0, 200, 120, .10);
}
.cap-cuaderno-txt { opacity: .85; }
.cap-cuaderno.vuelve .cap-cuaderno-txt {
  opacity: 1;
  text-decoration: none;
}
.cap-cuaderno-volver {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 1.05em;
  color: inherit;
  padding: 0 2px;
}

/* El numero de marca, ahora tambien en el aviso y en el sin-escribir:
   un solo contador para todo lo que el sistema marca. */
.txt-aviso-tag .cap-n,
.txt-sinescribir .cap-n { margin-right: 4px; }

/* ---------------------------------------------------------------------
   BLOQUE E -- chat de soporte
   FUERA de la gramatica verde/turquesa/amarillo: no es un paso del flujo,
   es una salida lateral que siempre esta.
   --------------------------------------------------------------------- */

.sop-flota {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  /* Gris oscuro, no bordo. El coral ya significa "lo que se saca": un
     circulo entero rojizo se leeria como parte de ese sistema. El bordo
     va solo en el borde. */
  background: #2a2e33;
  border: 1.5px solid var(--bordo, #7d2b3a);
  color: #e8eaed;
  font-size: 1.3rem;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .35);
}
.sop-flota:hover { background: #33383e; }
.sop-globo { line-height: 1; }

/* Sin leer: rojo mas vivo que el bordo, para que se recorte contra el. */
.sop-punto {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e5484d;
}

.sop-caja {
  position: fixed;
  right: 16px;
  bottom: 78px;
  z-index: 41;
  width: min(340px, calc(100vw - 32px));
  max-height: min(60vh, 460px);
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: #22262b;
  border: 1px solid var(--bordo, #7d2b3a);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
  overflow: hidden;
}
.sop-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.sop-hilo {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.sop-msg {
  max-width: 85%;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: .92rem;
  line-height: 1.35;
}
.sop-msg.suyo { background: rgba(255, 255, 255, .07); align-self: flex-start; }
.sop-msg.mio { background: var(--bordo, #7d2b3a); align-self: flex-end; }

.sop-pie {
  display: flex;
  gap: 6px;
  padding: 9px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.sop-pie input {
  flex: 1;
  min-width: 0;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: #1b1e22;
  color: inherit;
}
.sop-enviar {
  padding: 7px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--bordo, #7d2b3a);
  background: transparent;
  color: #e8eaed;
  cursor: pointer;
}
.sop-enviar:hover { background: rgba(125, 43, 58, .25); }

/* AIRE AL FINAL DEL SCROLL para que el flotante no tape el ultimo
   elemento -- abajo de todo esta "grabar de nuevo". */
#app { padding-bottom: 84px; }

/* ---------------------------------------------------------------------
   EL PIE DE MARCA
   --------------------------------------------------------------------- */

/* Callado a proposito. Es una firma, no una seccion: si compite con el
   ultimo boton de la pantalla, esta mal puesto. Por eso el separador es
   una linea fina y el texto va en el gris apagado, no en el del cuerpo. */
.pie-marca {
  margin-top: 8px;
  /* Abajo, el lugar del boton flotante de soporte: son 52 px mas 16 de
     borde. Sin esto la firma le queda debajo. */
  padding: 22px 16px calc(52px + 26px);
  border-top: 1px solid var(--border);
  text-align: center;
}

/* AGRANDADO A PEDIDO, 21/09/2026, dos veces: 18px -> 36px -> 54px. Con
   la bajada y la firma afuera, es lo unico que queda del pie -- opacity
   .85 se mantiene, la misma que tenia desde que era texto. */
.pie-logo {
  height: 54px;
  width: auto;
  display: inline-block;
  opacity: .85;
}


/* ---------------------------------------------------------------------
   HALLAZGOS DE LA PRUEBA DE PUNTA A PUNTA
   --------------------------------------------------------------------- */

/* 1. QUE GANE EL HIDDEN.
   `.sop-caja` declara `display: flex`, que le gana al `display: none` que
   el navegador le pone a `[hidden]`. La caja aparecia desplegada al entrar
   a la pantalla sin que nadie la tocara -- justo el limite duro que decia
   "NO SE ABRE SOLO". */
.sop-caja[hidden] { display: none !important; }

/* 3. AREA TACTIL DE 44 px, INVISIBLE.
   El primer intento le puso min-width/min-height al elemento, y eso no
   agrando el simbolo: agrando EL CIRCULO. `.cap-play` ya era un circulo de
   18 px con borde y fondo, y paso a ser uno de 44 al lado de una palabra.

   Ahora el area es un pseudo-elemento posicionado encima del simbolo: se
   puede tocar en 44 px, se ve del tamano de siempre, y no mueve el renglon
   porque al estar posicionado no ocupa lugar en el flujo. */
.cap-play,
.cap-cuaderno-btn,
.cap-volver {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  cursor: pointer;
}
/* EL AREA TACTIL NO PUEDE SER MAS GRANDE QUE LO QUE LA CONTIENE.
   ---------------------------------------------------------------
   REGRESION del 20/08 (commit c1676ff), encontrada el 22/08: la capsula
   de cortes dejo de abrirse. Tocarla solo reproducia el audio.

   La cadena:

     1. Estos tres controles viven ADENTRO del boton de la capsula
        (`.txt-cap`): el play, el cuaderno y el volver.
     2. Los tres llaman `e.stopPropagation()` a proposito, para que
        tocarlos no abra tambien la capsula.
     3. El area invisible era de 44x44 CENTRADA en un simbolo de 18 px, y
        la capsula entera mide menos que eso.

     => cualquier toque en la capsula caia en el simbolo, y ahi moria.
        La herramienta para achicar los silencios habia dejado de abrirse,
        que es por lo que no se podian corregir a mano.

   Y habia un segundo daño del mismo tamaño: el renglon del texto mide
   28,5 px (15 px x 1,9), asi que 44 px de alto se metian ~8 px en la
   linea de arriba y ~8 en la de abajo. Las palabras vecinas a un icono
   tampoco se podian tocar.

   LA REGLA QUE QUEDA: un control adentro de otro control no puede tener
   area tactil mas grande que su propia caja visible mas unos pocos
   pixeles, porque se come al de afuera. 26 px es lo que entra en el
   renglon sin pisar nada.

   Para llegar a los 44 px recomendados haria falta sacar el play AFUERA
   del boton de la capsula, que es un cambio de estructura y no de estilo.
   Queda anotado; entre un area comoda y una capsula que no abre, abre la
   capsula. */
.cap-play::after,
.cap-cuaderno-btn::after,
.cap-volver::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
}

/* 2. LA PALABRA SACADA, A LA VISTA.
   Cuando es una sola no se esconde detras de un icono: se muestra tachada
   adentro de la capsula, y al lado el simbolo de devolver. */
.cap-sacada {
  margin-left: 5px;
  opacity: .75;
  text-decoration: line-through;
  font-style: italic;
}
.cap-sacada.vuelve {
  opacity: 1;
  text-decoration: none;
  color: var(--verde);
  font-style: normal;
}


/* ---------------------------------------------------------------------
   OTRAS VERSIONES DEL MISMO VIDEO
   --------------------------------------------------------------------- */

/* Una fila por version: el titulo a la izquierda y sus descargas a la
   derecha. Se lee como una lista de lo que hay, no como un formulario. */
.ver-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0 14px;
}
.ver-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .05);
}
.ver-t {
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}
.ver-b { display: flex; gap: 6px; flex: 0 0 auto; }

/* Los titulos que sobraron: contorno, porque son alternativas igual de
   validas y ninguna esta recomendada sobre la otra. */
.ver-opciones {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 12px;
}
.ver-opciones .btn { text-align: left; }

.ver-propio { display: flex; gap: 6px; }
.ver-propio input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: #1b1e22;
  color: inherit;
}


/* El copy de cada version, plegado. */
.ver-item { display: flex; flex-direction: column; }
.ver-copy { margin: 2px 0 0 10px; font-size: .9rem; }
.ver-copy summary { cursor: pointer; opacity: .75; padding: 4px 0; }
.ver-copy summary:hover { opacity: 1; }
.ver-copy-b {
  margin: 6px 0;
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
}
.ver-copy-b div { margin: 3px 0 6px; white-space: pre-wrap; opacity: .9; }


/* ---------------------------------------------------------------------
   VERSIONES, elegidas en Filtros antes de generar
   --------------------------------------------------------------------- */

#fltVersiones h3 { margin: 0 0 4px; font-size: 1rem; }

/* La original: se nombra pero no se edita. Su imagen se elige con la tira
   de cuadros de arriba, que ya existia. */
.ver-orig {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 10px 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .05);
  border-left: 3px solid var(--accent);
}

.ver-extra {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .10);
}

/* Que se vea que es un campo con un nombre, y no una caja suelta. */
/* Lo que no se puede dejar vacio, dicho con letras y no con un asterisco.
   Un asterisco hay que saber que significa; "obligatorio" no. */
/* UN DATO QUE FALTA Y HACE FALTA.
   No es un error --nadie hizo nada mal-- pero tampoco una sugerencia. El
   borde ambar es el mismo de "esto lo decidis vos" que ya usa el resto de
   la app. */
.falta-dato {
  margin: 8px 0 12px;
  padding: 10px 12px;
  border-left: 3px solid var(--warning, #f5c451);
  background: rgba(245, 196, 81, .08);
  border-radius: 0 8px 8px 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
}

.falta-dato b { display: block; margin-bottom: 3px; }

/* UN DATO QUE FALTA, DENTRO DE UNA LINEA DE TEXTO.
   En la lista de agentes hay cuatro datos seguidos y varios pueden estar
   vacios. Un "—" entre otros "—" no distingue lo que es opcional
   --seguidores de TikTok-- de lo que no --el telefono, sin el cual no le
   llega ningun aviso. */
/* =====================================================================
   LA PANTALLA DE STOCK
   Tres piezas separadas por una linea fina. No tarjetas: una tarjeta por
   pieza pone tres cajas compitiendo, y la que hay que mirar es la de
   adentro -- el hook. Solo la recomendada lleva borde propio, y por eso se
   distingue.
   ===================================================================== */

.stock { margin: 4px 0 18px; }

.pieza {
  padding: 16px 2px 14px;
  border-top: 1px solid var(--border);
  cursor: pointer;
}

/* La primera no lleva linea arriba: separa de nada. */
.stock .pieza:first-child { border-top: 0; padding-top: 6px; }

.pieza:active { background: rgba(255, 255, 255, .03); }

/* LA RECOMENDADA: BORDE, NO FONDO.
   Un fondo distinto la convierte en otra cosa; un borde dice "esta misma,
   marcada". */
.pieza.pieza-recomendada {
  border: 1.5px solid var(--accent);
  border-radius: 12px;
  padding: 14px 14px 12px;
  margin: 10px 0;
}

.pieza-propongo {
  display: inline-block;
  margin-bottom: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--bg, #0b0f14);
  background: var(--accent);
}

/* Arriba de cada pieza: el objetivo a la izquierda, la forma a la derecha. */
.pieza-arriba {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

/* EL OBJETIVO: TEXTO GRIS CON UN PUNTO.

   Eran tres pastillas pintadas --verde, celeste y amarillo-- o sea los
   mismos tres colores que en esta misma lista dicen de que camino es
   cada boton: el amarillo de ALCANCE al lado del amarillo de «Guion».
   El nombre del proposito esta escrito al lado; no hacia falta un color
   para distinguirlos, y el color hacia falta para otra cosa. */
.pieza-objetivo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--text-dim, #8b949e);
}

.pieza-objetivo::before {
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: currentColor;
  opacity: .7;
}

/* A LA DERECHA VAN EL MODO Y LA FORMA, en ese orden y juntos.
   El modo primero porque es el que evita un error que no se arregla
   despues; la forma detras, mas callada. */
.pieza-derecha {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

/* EL MODO, EN TONO NEUTRO Y NO EN COLOR.
   El proposito ya tiene su color, y son tres que se aprenden por color. Si
   el modo tambien fuera de color, dos pastillas distintas en la misma fila
   compiten y ninguna se lee de un vistazo. Este se distingue por FORMA --el
   borde-- no por color. */
.pieza-modo {
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--text-dim);
  white-space: nowrap;
}

/* "SITUACION" SE MARCA UN POCO MAS.
   Es la que avisa que el caso NO es suyo, y es el unico de los dos que
   puede terminar en un video diciendo algo falso. Sigue siendo neutro
   --sin color propio-- pero con el texto lleno en vez de apagado. */
.pieza-modo.modo-creada {
  color: var(--text);
  border-color: var(--text-dim);
}

/* LA FORMA, GRIS CHICO Y SIN FONDO.
   No compite con el objetivo: dice de que esta hecha la pieza, no que
   busca. Pero se lee ANTES de grabar -- "experiencia propia" y "caso
   creado" son la advertencia de si el caso es del agente o no. */
.pieza-forma {
  font-size: 12px;
  color: var(--text-dim);
  text-align: right;
}

/* EL HOOK ES LA PIEZA. Es lo que se lee para decidir, asi que es lo mas
   grande de la fila. */
.pieza-hook {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
}

/* POR QUE ESTA. Una linea, debajo del hook. */
.pieza-motivo {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-dim);
}

/* LOS TRES BOTONES DE LA PIEZA.
   ----------------------------------------------------------------------
   NO PESAN IGUAL, a proposito: si los tres pesaran lo mismo, tres opciones
   equivalentes son una pregunta y no un camino.

       grabar      la accion principal: mas ancho y lleno
       ver guion   el paso del medio: contorno con fondo tenue
       rehacer     el mas chico y el mas callado

   LAS CUENTAS, en la pantalla de 380 px:

       380  la pantalla
       -32  el padding de #app
       -28  el padding de la pieza recomendada (el peor caso)
       -12  las dos separaciones
       ---
       308  reparto real, en 1 : 1,2 : 1,55  ->  82 / 99 / 127 px

   NO SE LLEGA A 110 CADA UNO Y NO SE PUEDE: 110x3 mas separaciones son
   342 px y hay 320. Los 110 salen de dividir en partes iguales, que es lo
   que se pidio NO hacer.

   Lo que si se cuida es el area tocable, que es de DOS dimensiones: 44 px
   de ALTO en los tres, que es el minimo comodo para un dedo. El mas
   angosto, 82 px, es casi el doble de ese minimo a lo ancho.

   Y el texto se achica antes que el boton: 11,5 px y `nowrap`. */
.pieza-pie {
  display: flex;
  align-items: stretch;
  /* 4 px y no 6: son cuatro botones y tres separaciones. En una pantalla
     de 360 px cada dos pixeles de aire salen del texto de las etiquetas. */
  gap: 4px;
  margin-top: 10px;
}

.pz-btn {
  /* 44 px: el minimo comodo para un dedo. Los tres, iguales. */
  min-height: 44px;
  /* El relleno lateral tambien se achico al pasar a cuatro: es ancho que
     no muestra nada y que el texto necesita. */
  padding: 0 4px;
  border-radius: 9px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  /* El texto se achica antes que el boton, y nunca se parte en dos
     renglones: una etiqueta de dos lineas hace crecer la fila entera. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background .12s;
}

/* EL REPARTO, PARA LOS CUATRO. `min-width: 0` para que flex pueda
   achicarlos de verdad: sin eso, el contenido impone un piso y el mas
   largo se roba el espacio.

   TODOS TIENEN QUE TENER SU REGLA. Un boton sin `flex` toma `0 1 auto`:
   no crece, se encoge, y se queda con el ancho de su contenido antes de
   repartir -- y los que si tienen regla absorben el faltante hasta quedar
   en puntos suspensivos. Fue lo que paso al agregar Editar como cuarto.

   Las proporciones se rehicieron para cuatro: con las de tres, en un
   telefono angosto no entraban las etiquetas. */
.pz-rehacer { flex: 1 1 0; min-width: 0; }
.pz-guion   { flex: 1 1 0; min-width: 0; }
.pz-editar  { flex: 1 1 0; min-width: 0; }
.pz-grabar  { flex: 1.3 1 0; min-width: 0; }

/* REHACER, el mas callado: solo contorno, y en el verde de "esto se
   rehace" -- el mismo que ya marca lo que el sistema arreglo solo. */
.pz-rehacer {
  border: 1px solid rgba(127, 255, 179, .45);
  background: transparent;
  color: var(--success, #7fffb3);
}
.pz-rehacer:hover { background: rgba(127, 255, 179, .10); }

/* VER GUION, el del medio: contorno mas firme y un fondo tenue, en el
   ambar de "esto lo decidis vos". */
.pz-guion {
  border: 1.5px solid rgba(245, 196, 81, .55);
  background: rgba(245, 196, 81, .10);
  color: var(--warning, #f5c451);
}
.pz-guion:hover { background: rgba(245, 196, 81, .18); }

/* EDITAR: turquesa DE CONTORNO.
   La gramatica de la app: lleno = el recomendado, contorno = alternativa
   igual de valida. Editar es la otra cosa que se hace con una pieza que
   te sirve -- no es de segunda, es la alternativa a grabarla como vino.

   Sin esta regla salia con el estilo de boton por defecto, que en esta
   fila no se parece a ninguno de los otros tres. */
.pz-editar {
  border: 1.5px solid var(--accent);
  background: transparent;
  color: var(--accent);
}
.pz-editar:hover { background: rgba(87, 221, 255, .12); }

/* GRABAR, la principal: llena. En modo oscuro un boton lleno de color
   claro con el texto oscuro es lo que mas contrasta contra el fondo, y es
   la unica de las tres que no se puede deshacer. */
.pz-grabar {
  border: 1.5px solid var(--accent);
  background: var(--accent);
  color: #0b0f14;
  font-weight: 700;
}
.pz-grabar:hover { background: #7ae4ff; }

/* EL GUION DESPLEGADO.
   Debajo de la pieza, no en otra pantalla: volver de una pantalla para
   seguir eligiendo es un paso de mas sobre una decision que se toma
   comparando tres. */
.pieza-guion[hidden] { display: none !important; }

.pieza-guion {
  margin-top: 10px;
  padding: 12px 13px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
}

.pz-guion-cuerpo p {
  margin: 0 0 9px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}

.pz-guion-cuerpo p:last-child { margin-bottom: 0; }

/* Por que le toco esta. Va al final y apagado: es contexto, no la pieza. */
.pz-guion-porque {
  margin: 10px 0 0;
  padding-top: 9px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-dim);
}

.pieza.rehaciendo { opacity: .55; cursor: default; }

/* LAS DOS SALIDAS, ABAJO Y EN ORDEN.
   "Ninguna me sirve" es la segunda opcion de verdad. "Ya grabe" va ultima
   y mas apagada: es la del que ya hizo el trabajo afuera. */
.stock-salidas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

.stock-subir {
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text-dim);
  font: inherit;
  cursor: pointer;
}

.stock-subir:hover { background: rgba(255, 255, 255, .05); }

/* MARCAR EL PEDAZO QUE NO SIRVE.
   La pieza partida en frases, cada una tocable. Se marca UN PASAJE y no se
   describe un problema: "suena a folleto" sobre una pieza de seis frases no
   dice cual. */
.marcar {
  margin: 12px 0;
  padding: 14px;
  border: 1.5px solid var(--accent);
  border-radius: 12px;
  background: var(--surface);
}

.marcar b { display: block; margin-bottom: 2px; font-size: 15px; }

.marcar-frases {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0;
}

/* Cada frase se lee como texto, no como boton: es la pieza, y tiene que
   poder leerse de corrido para decidir cual esta mal. Lo que dice que se
   puede tocar es el borde izquierdo. */
.marcar-frase {
  width: 100%;
  text-align: left;
  padding: 9px 11px;
  border: 0;
  border-left: 2px solid var(--border);
  border-radius: 0 8px 8px 0;
  background: rgba(255, 255, 255, .03);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
}

.marcar-frase:hover { background: rgba(255, 255, 255, .06); }

.marcar-frase.elegida {
  border-left-color: var(--danger, #ff8a8a);
  background: rgba(255, 138, 138, .10);
}

.marcar-lbl {
  display: block;
  margin: 8px 0 4px;
  font-size: 12px;
  color: var(--text-dim);
}

.marcar textarea {
  width: 100%;
  resize: vertical;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2, #1f2330);
  color: inherit;
  font: inherit;
  font-size: 13px;
}

.marcar .btn { margin-top: 8px; }

/* DONDE QUEDARON LAS TRANSICIONES.
   ----------------------------------------------------------------------
   En el mismo tono de aviso que "Le faltó algo": el video está bien --y de
   hecho está mejor, porque no se comió una palabra-- así que no puede
   leerse como una falla. */
.cruce-card { border-left: 3px solid var(--warning, #f5c451); }
.cruce-lista { margin: 8px 0 0; padding-left: 18px; }
.cruce-lista li { margin-bottom: 10px; line-height: 1.35; }
.cruce-lista .cruce-motivo { opacity: 0.75; font-size: 0.9em; }
.cruce-lista .cruce-fuera b { opacity: 0.75; }

/* EL BOTON QUE SE LLEVA ALGO CON SONIDO.
   ----------------------------------------------------------------------
   En ambar, como todo lo que en esta app quiere decir "ojo con esto". No
   prohibe nada -- el rotulo ya dice cuantos segundos con sonido se lleva,
   y adentro de la capsula cada tramo tiene su ▶ para escucharlo antes. */
.txt-cuerpo .cap-todo.con-sonido {
  border-color: var(--warning, #f5c451);
  color: var(--warning, #f5c451);
}

/* "SACARLO IGUAL": la salida del aviso.
   ----------------------------------------------------------------------
   Va PEGADO al motivo y no en otra fila: la decision se toma leyendo por
   que se freno, y separarlos obliga a acordarse de lo que decia. */
.txt-forzar {
  margin-left: 8px;
  padding: 3px 10px;
  min-height: 0;
  width: auto;
  border: 1px solid var(--warning, #f5c451);
  border-radius: 7px;
  background: transparent;
  color: var(--warning, #f5c451);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.txt-forzar:hover { background: rgba(245, 196, 81, .16); }
.txt-forzar:disabled { opacity: .5; cursor: default; }

/* QUE ES CADA CUADRADO DE LA CAPSULA.
   ----------------------------------------------------------------------
   Eran ocho simbolos entre puntos, guiones y barras: el texto decia "4 ya
   saque, 4 de aire" y mirando no se sabia cual era cual.

   Se separan por COLOR Y RELLENO, que se leen de un vistazo, y ademas hay
   una linea con letras adentro de la capsula -- un color que hay que
   adivinar es un simbolo con otro nombre. */

/* YA LO SAQUE: apagado y hueco. No se puede sacar dos veces, y el hueco
   dice "aca ya no hay nada". */
.txt-cuerpo .cap-u[data-que="sacado"] {
  background: transparent;
  border-color: var(--border);
  color: var(--text-dim);
  opacity: .55;
}

/* AIRE: turquesa, que en toda la app es "esto se puede hacer". */
.txt-cuerpo .cap-u[data-que="aire"] {
  background: rgba(87, 221, 255, .16);
  border-color: var(--accent);
  color: var(--accent);
}

/* TIENE VOZ: ambar, el mismo "ojo con esto" del resto de la app. Sacarlo
   se come una palabra, asi que no puede parecerse al aire. */
.txt-cuerpo .cap-u[data-que="voz"] {
  background: rgba(245, 196, 81, .18);
  border-color: var(--warning, #f5c451);
  color: var(--warning, #f5c451);
}

/* MARGEN: una rayita fina, sin caja. No es un tramo que se pueda tocar --
   es lo que evita comerse el borde de la palabra de al lado-- asi que no
   tiene que parecer un boton. */
.txt-cuerpo .cap-u[data-que="margen"] {
  width: 8px;
  min-width: 8px;
  background: transparent;
  border: 0;
  color: var(--text-dim);
  opacity: .5;
  cursor: default;
}

/* MARCADO: el borde grueso gana sobre el color de arriba, para que se vea
   que ESE lo elegiste vos. */
.txt-cuerpo .cap-u.marcada {
  outline: 2px solid var(--text);
  outline-offset: -2px;
}

/* ESCUCHAR ESE MEDIO SEGUNDO. Aparte del cuadrado a proposito: marcar y
   escuchar son dos cosas distintas y antes las hacia el mismo dibujo. */
.txt-cuerpo .cap-oir {
  width: 22px;
  height: 26px;
  min-height: 0;
  margin-left: -2px;
  padding: 0;
  border: 1px solid var(--warning, #f5c451);
  border-left: 0;
  border-radius: 0 5px 5px 0;
  background: transparent;
  color: var(--warning, #f5c451);
  font-size: 10px;
  cursor: pointer;
}
.txt-cuerpo .cap-oir:hover { background: rgba(245, 196, 81, .18); }

/* LA LINEA QUE DICE CUAL ES CUAL. */
.cap-leyenda {
  display: block;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--text-dim);
}

.cap-ref {
  display: inline-block;
  margin-right: 3px;
  vertical-align: -1px;
}
.cap-ref.sacado { color: var(--text-dim); opacity: .55; }
.cap-ref.aire   { color: var(--accent); }
.cap-ref.voz    { color: var(--warning, #f5c451); }

/* "NO TE LA OFRECI": el rotulo del descarte.
   Un descarte se dibujaba igual que una capsula --mismo signo, mismo
   numero, mismo play-- pero no abre, porque no tiene tramos adentro que
   separar. Se dice con palabras en vez de con un simbolo que hay que
   aprender de memoria. */
.dsc-rotulo {
  margin: 0 5px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  opacity: .85;
}

/* EL RESPIRO DEL CIERRE: apagado, no escondido.
   La pausa entre el final y el saludo queda bien, asi que no se ofrece --
   pero esconderla seria una decision invisible, y si el agente la quiere
   sacar tiene que poder. */
.txt-cuerpo .txt-cap.deliberada {
  border-style: dashed;
  opacity: .6;
}

/* LO QUE EL GUION TENIA Y EL VIDEO NO.
   ----------------------------------------------------------------------
   Cada linea que falta, en su propio renglon y entre comillas: son frases
   que el agente escribio o leyo, y verlas enteras es lo que le permite
   decidir en un segundo si le importan o no. Apiladas en un parrafo hay
   que releer para separarlas. */
.txt-guion-falta { margin-bottom: 10px; }

.txt-guion-linea {
  display: block;
  margin: 8px 0;
  padding-left: 10px;
  border-left: 2px solid var(--warning, #f5c451);
  font-style: italic;
  /* MAS AIRE ENTRE UNA LINEA Y LA SIGUIENTE. Con varias faltantes
     seguidas, 1.45 las montaba una contra la otra -- Gustavo,
     17/09/2026. El resto del texto (.txt-cuerpo) ya usa 1.9. */
  line-height: 1.6;
}

/* EL MOTIVO NEUTRO: "no se, simplemente no me gusta".
   ----------------------------------------------------------------------
   Separado de los otros nueve a proposito. No es una opcion mas: es la
   salida para el que no encuentra la suya. Mezclado entre los demas se
   elegiria por accidente, y ese es justo el dato falso que este motivo
   viene a evitar -- el que no sabe cual es, sin esta salida, inventa uno
   de los otros nueve para poder seguir. */
.motivo-neutro {
  margin-top: 6px;
  border-style: dashed;
  opacity: .85;
}

/* EDITAR EL GUION, EN UN TELEFONO.
   ----------------------------------------------------------------------
   La comodidad es la condicion: si editar molesta, el agente vuelve a
   rechazar -- que tira las cuarenta lineas que estaban bien -- y la
   funcion no sirvio para nada. */
.edit-card { padding-bottom: 18px; }

.edit-regla {
  margin-bottom: 10px;
  padding-left: 10px;
  border-left: 2px solid var(--border);
}

.edit-texto {
  width: 100%;
  min-height: 40vh;
  /* SIN BARRA PROPIA: crece con el texto (lo hace `crecer()` en app.js).
     Dos barras de desplazamiento en un telefono es la forma mas rapida de
     que el agente pierda donde estaba. */
  overflow: hidden;
  resize: none;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2, rgba(255, 255, 255, .03));
  color: var(--text);
  /* 17 px: esto no se completa, se LEE y se corrige. Y nunca menos de 16,
     porque abajo de eso Safari de iPhone hace zoom solo al tocarlo y
     descoloca la pantalla entera. */
  font-size: 17px;
  /* Cada renglon es un bloque del prompter: tienen que verse como pedazos
     separados y no como un parrafo corrido. */
  line-height: 2;
  font-family: inherit;
}

.edit-texto:focus {
  outline: none;
  border-color: var(--accent);
}

.edit-botones {
  display: flex;
  gap: 9px;
  margin-top: 14px;
}

.edit-botones .btn { flex: 1 1 0; width: auto; min-height: 48px; }

/* LA PREGUNTA DE UN TOQUE, al guardar. */
.edit-pregunta {
  margin-top: 14px;
  padding: 14px;
  border: 1.5px solid var(--accent);
  border-radius: 11px;
  background: rgba(87, 221, 255, .05);
}

.edit-pregunta b { display: block; margin-bottom: 10px; font-size: 1.05rem; }

/* UNO POR RENGLON Y ALTOS. Cuatro opciones en fila quedan de 80 px en un
   telefono angosto: se tocan mal y se elige la de al lado. */
.edit-motivos { display: flex; flex-direction: column; gap: 8px; }
.edit-motivos .btn { width: 100%; min-height: 48px; }

/* "Guardar sin decir" NO es un boton mas: elegir no puede ser obligatorio
   --el que no quiere elegir tocaria cualquiera para pasar, y ahi el dato
   deja de valer para todos-- pero tampoco tiene que competir con las
   cuatro opciones. */
.edit-sin-decir {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}

/* LA PASTILLA DE LA PIEZA: este guion lo escribio el agente.
   Viendo solo el texto no hay forma de distinguir su version de una del
   Cerebro que se le parezca. */
.pieza-editada {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 9px;
  border-radius: 20px;
  background: rgba(87, 221, 255, .12);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
}

/* LOS PASOS PARA PONER EL ICONO A MANO.
   ----------------------------------------------------------------------
   Se siguen mirando el telefono, no la pantalla: se lee un paso, se
   levanta la vista, se hace, y se vuelve. Por eso van numerados y con
   aire entre uno y otro, no en un parrafo corrido. */
.inst-pasos {
  margin: 10px 0 4px;
  padding-left: 1.35em;
  line-height: 1.5;
  font-size: 14px;
  color: var(--text);
}

.inst-pasos li { margin-bottom: 8px; }
.inst-pasos li:last-child { margin-bottom: 0; }

/* CUANDO EL PREVIEW NO SE PUDO.
   ----------------------------------------------------------------------
   Va adentro de `.video-box`, que es negra y tiene la forma del video: el
   cartel ocupa el lugar donde tendria que estar la imagen, asi que se ve
   que falto ESO y no otra cosa. */
.preview-fallo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 22px 16px;
  text-align: center;
}

.preview-fallo p { margin: 0; }
.preview-fallo .hint { max-width: 34ch; line-height: 1.45; }
.preview-fallo .btn { margin-top: 10px; width: auto; min-width: 180px; }

/* "SUBIENDO", QUE ES LO CONTRARIO.
   ----------------------------------------------------------------------
   La espera 1 es la unica de las tres donde irse cuesta algo, asi que va
   en el ambar de "ojo con esto" y no en el turquesa del flujo. Puestas
   una al lado de la otra, el color solo ya dice cual es cual sin leer.

   Y ES UNA TARJETA Y NO UN RENGLON a proposito: antes era un `hint` con
   una ruedita al lado, indistinguible de cualquier otro texto de la
   pantalla. Tres minutos mirando eso se sienten como una app colgada. */
/* EL FONDO NEGRO SE QUEDA. Esto flota encima del video de la camara y
   es lo unico que hace que el texto se lea -- un fondo ambar traslucido
   sobre una pared blanca deja el aviso ilegible justo cuando importa.
   Lo que cambia es el borde. */
.pr-subiendo.pr-cargando {
  border: 1.5px solid var(--warning, #f5c451);
  padding: 14px;
}

.cargando-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem;
}

/* LA BARRA SOLO APARECE MIENTRAS SUBE.
   Es el unico tramo con un porcentaje de verdad. En los otros dos una
   barra tendria que inventarse un avance, y una barra que miente es peor
   que no tener barra. */
.cargando-barra {
  height: 6px;
  margin-top: 12px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.cargando-barra-int {
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--warning, #f5c451);
  /* Que el salto entre porcentajes se vea como avance y no como un
     parpadeo: los bloques son grandes y llegan de a saltos. */
  transition: width .35s ease;
}

.cargando-aviso {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
}

.cargando-aviso b { display: inline; font-size: inherit; }

/* "LISTO, LO ESTOY ARMANDO."
   ----------------------------------------------------------------------
   Reemplaza a la barra de progreso. No es un cartel de espera: es el
   permiso para irse.

   El turquesa del flujo y no el ambar de aviso: no paso nada raro, esta
   todo bien y puede seguir. */
.card.armando {
  border: 1.5px solid var(--accent);
  background: rgba(87, 221, 255, .05);
}

.card.armando b {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.card.armando p { margin: 0; line-height: 1.5; }

/* LOS DOS BOTONES, uno al lado del otro y del mismo tamano.
   "Grabar otro" va lleno porque es lo que se quiere que haga --seguir
   grabando es el punto de todo esto-- pero "ver mis videos" no se achica:
   las dos son salidas validas y ninguna es un error. */
.armando-botones {
  display: flex;
  gap: 9px;
  margin-top: 14px;
}

/* TRES BOTONES TIENEN QUE ENTRAR SIN CORTARSE.
   Con `flex-wrap` pasan a dos líneas en una pantalla angosta en vez de
   apretarse hasta que el texto se parte. El mínimo de 96 px es lo que mide
   "Ver mis videos" sin cortarse: abajo de eso, salta de línea. */
.armando-botones { flex-wrap: wrap; }
.armando-botones .btn { flex: 1 1 96px; width: auto; min-height: 46px; }

/* La aclaración de que no puede cerrarse sola: chica y debajo, no compite
   con los botones. */
.armando-aclara { margin: 9px 0 0; font-size: 13px; }

/* ¿LO PUBLICASTE?
   Se pregunta apenas el video sale de la app, y si no contesta, la proxima
   vez que abra. Tiene que verse como una pregunta y no como un aviso: por
   eso el turquesa del flujo y no el ambar de "ojo con esto". */
.pub-pregunta {
  margin: 12px 0 2px;
  padding: 13px 14px;
  border: 1.5px solid var(--accent);
  border-radius: 12px;
  background: rgba(87, 221, 255, .05);
}

.pub-pregunta b { display: block; margin-bottom: 3px; font-size: 15px; }

/* De cual se esta hablando. Sin esto, el que bajo tres videos no sabe cual
   le estan preguntando. */
.pub-cual {
  margin: 4px 0 6px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--text);
  font-style: italic;
}

/* Los dos botones del mismo tamano: "todavia no" es una respuesta tan
   valida como "si", y hacerla chiquita empuja a mentir. */
.pub-botones {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.pub-botones .btn { flex: 1 1 0; width: auto; }

/* GENERADA SIN EL CEREBRO.
   No es un error --el fallback existe para que el agente no se quede sin
   nada-- pero tampoco es normal. Ambar: lo que hay que mirar, no lo que
   esta roto. */
.badge.sin-cerebro {
  color: var(--warning, #f5c451);
  background: rgba(245, 196, 81, .12);
  border: 1px solid rgba(245, 196, 81, .35);
}

.falta-inline {
  color: var(--warning, #f5c451);
  font-weight: 700;
}

/* Una casilla con su texto al lado, en una linea y tocable entera: el
   cuadradito solo mide 16 px y errarle es lo normal en un telefono. */
.check-linea {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 10px 0 2px;
  padding: 6px 0;
  cursor: pointer;
}

.check-linea input { width: 18px; height: 18px; margin: 0; flex: none; }

.obligatorio {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--warning, #f5c451);
  background: rgba(245, 196, 81, .12);
}

.ver-titulo-lbl {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--text-dim);
}

.ver-titulo-ayuda { margin: 0 0 4px; font-size: 11.5px; }

.ver-titulo-libre {
  width: 100%;
  margin: 6px 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: #1b1e22;
  color: inherit;
}

/* Las caratulas propuestas. Chicas a proposito: asi se ven parecido a
   como se van a ver en la grilla, que es donde tienen que funcionar. */
.ver-caras {
  display: flex;
  gap: 8px;
  margin: 8px 0 4px;
}
.ver-cara {
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  line-height: 0;
  overflow: hidden;
}
.ver-cara img { width: 96px; height: 170px; object-fit: cover; display: block; }
.ver-cara.elegida { border-color: var(--accent); }
.ver-cara:hover { border-color: rgba(87, 221, 255, .5); }

.btn-turquesa-contorno.elegido {
  background: var(--accent);
  color: #06232b;
}


/* La version que corre, en el encabezado.
   Chica y apagada: no es informacion de todos los dias, es lo primero que
   hay que mirar cuando algo no anda. */


/* Lo que le faltó al video, con su motivo debajo. */
.falto-lista { margin: 6px 0 12px; padding-left: 20px; }
.falto-lista li { margin-bottom: 8px; line-height: 1.4; }
.falto-motivo {
  font-size: .85em;
  color: rgba(255, 255, 255, .62);
}


/* Los motivos del rechazo del guion. En columna y del mismo tamaño: las
   cuatro son opciones equivalentes, incluida la de no decir nada. */
.guion-motivos {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.guion-motivos .btn { width: 100%; }


/* El menú de "qué pasó", arriba del hilo del chat. */
.sop-menu-caja:empty { display: none; }
.sop-menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.sop-menu .hint { margin: 0; }
.sop-opcion {
  width: 100%;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid rgba(125, 43, 58, .45);
  background: #23262b;
  color: inherit;
  text-align: left;
  font-size: .9rem;
  cursor: pointer;
}
.sop-opcion:hover { border-color: var(--bordo, #7d2b3a); background: #2b2f35; }
.sop-menu-pie { display: flex; gap: 6px; }
.sop-menu-pie .sop-opcion { text-align: center; }
.sop-caps {
  width: 100%;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: #14161a;
  color: inherit;
  font-size: 1rem;
}


/* ---------------------------------------------------------------------
   El texto libre de la burbuja: grande, y el botón debajo.

   Antes era un input de una línea con `flex: 1` al lado del botón. Sobre
   340 px de ancho menos el botón quedaba una franja de dos centímetros,
   y nadie escribe ahí.
   --------------------------------------------------------------------- */

.sop-pie {
  flex-direction: column;   /* pisa el `row` de arriba: el botón va debajo */
  gap: 8px;
}
.sop-pie textarea {
  width: 100%;
  min-height: 76px;
  resize: vertical;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: #1b1e22;
  color: inherit;
  font: inherit;
  line-height: 1.35;
}
.sop-pie textarea:focus {
  outline: none;
  border-color: var(--bordo, #7d2b3a);
}
.sop-pie .sop-enviar { width: 100%; padding: 9px 12px; }

/* CERRAR, DEBAJO DE ENVIAR.
   Se ve claramente que no es lo mismo que enviar --sin borde, apagado-- y
   al mismo tiempo es un boton de verdad, del ancho de la caja y con alto de
   dedo. Antes esto era una cruz en la esquina de arriba: chica, lejos del
   pulgar y pegada a la cabecera. */
.sop-cerrar-pie {
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  border: 0;
  background: none;
  color: var(--text-dim);
  font: inherit;
  cursor: pointer;
}
.sop-cerrar-pie:hover { background: rgba(255, 255, 255, .06); }

/* LA OPCION QUE SUENA A LO QUE ESCRIBIO.
   Va sola y marcada, no perdida entre las otras cinco: ya dijo cual es. La
   salida de al lado --"era otra cosa"-- es la que devuelve la lista
   entera, y va apagada para que no compita con la de arriba. */
.sop-opcion-suena {
  border-color: var(--bordo, #7d2b3a) !important;
  font-weight: 600;
}
.sop-otra {
  opacity: .65;
  font-size: .9em;
}

/* La caja crece un poco: ahora el texto libre ocupa alto de verdad. */
.sop-caja { max-height: min(76vh, 580px); }

/* ---------------------------------------------------------------------
   Que la burbuja NO se desborde.

   Con el menú adentro, el contenido pasó a ser más alto que la caja y el
   botón Enviar quedaba abajo del borde, fuera de la vista. La caja es
   flex column con `max-height`: hay que decir explícitamente qué se
   encoge y qué no.

   El pie NUNCA se encoge -- si el botón de mandar no se ve, la caja no
   sirve. El menú y el hilo comparten lo que sobra y scrollean.
   --------------------------------------------------------------------- */

.sop-menu-caja {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.sop-hilo { flex: 1 1 auto; min-height: 0; }
.sop-pie { flex: 0 0 auto; }
.sop-pie textarea { min-height: 62px; }


/* ---------------------------------------------------------------------
   LAS OPCIONES SE VEN AL ABRIR, SIN SCROLLEAR.

   Antes el menú tenía `flex: 0 1 auto` con su propio scroll, para que la
   caja no se desbordara. Eso arregló el desborde y creó algo peor: al
   crecer el hilo, el menú se encogía y las opciones quedaban arriba de su
   propio scroll. El agente veía una caja de texto y un mensaje que le
   decía "elegí arriba", con nada arriba.

   El menú NO se encoge. Lo que scrollea es el hilo, que es lo único que
   puede crecer sin límite.
   --------------------------------------------------------------------- */

.sop-menu-caja {
  flex: 0 0 auto;
  overflow: visible;
  min-height: auto;
}

/* Y la caja se estira para que las cinco opciones entren enteras junto
   con el texto libre: 5 x 54 + textarea + botón + encabezado. */
.sop-caja { max-height: min(86vh, 660px); }

/* El hilo se queda con lo que sobre, y nunca empuja al menú. */
.sop-hilo { flex: 1 1 auto; min-height: 0; max-height: 40vh; }

/* En pantallas bajas, el que scrollea es el MENÚ, no el que se tapa es el
   botón. `flex: 0 0 auto` para que nunca ceda espacio al hilo -- eso fue
   lo que hizo que las opciones quedaran invisibles -- más un techo con su
   propio scroll para el caso en que de verdad no entren.

   El orden de lo que cede: primero el hilo, después el menú por dentro, y
   el pie nunca. Si no se ve el botón de mandar, la caja no sirve. */
.sop-menu-caja {
  flex: 0 0 auto;
  max-height: 46vh;
  overflow-y: auto;
}

/* ---------------------------------------------------------------------
   EL REPARTO DEFINITIVO DE LA BURBUJA.

   Los intentos anteriores usaban techos en vh, y un vh no sabe cuánto
   miden la cabecera y el pie: con 46vh el menú se quedaba con 411 px, la
   suma daba 690 sobre una caja de 660, y el botón Enviar quedaba 30 px
   afuera.

   Sin números mágicos: el pie es intocable, el hilo pide lo que necesita
   y cede, y el MENÚ SE QUEDA CON LO QUE SOBRE, con su propio scroll. Así
   el botón de mandar siempre se ve, y las opciones se ven enteras
   siempre que haya lugar -- que es el caso normal.
   --------------------------------------------------------------------- */

.sop-menu-caja {
  flex: 1 1 auto;      /* se queda con lo que sobre */
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}
.sop-hilo {
  flex: 0 1 auto;      /* pide lo suyo y cede primero */
  min-height: 0;
  max-height: 30vh;
}
.sop-pie { flex: 0 0 auto; }   /* nunca cede: sin botón no hay caja */
.sop-pie textarea { min-height: 56px; }

/* La caja usa todo el alto disponible, no un tope fijo.
   660 px alcanzaban para el chat solo; con las cinco opciones adentro la
   última quedaba cortada. La caja arranca a 78 px del piso, así que puede
   crecer hasta casi toda la ventana. */
.sop-caja { max-height: calc(100vh - 104px); }


/* El número de cobertura: grande, porque es el que hay que ver de un
   vistazo. En cero se marca -- cero es una noticia, no un estado normal. */
.cob-num {
  margin: 6px 0 2px;
  font-size: 2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cob-num.cob-cero { color: #c9737f; }


/* LOS SIETE MOTIVOS, DEBAJO DE LA PIEZA.
   ----------------------------------------------------------------------
   Mismo marco que el marcado de pasaje: es la misma conversacion --que le
   ves de malo-- y dos marcos distintos la harian parecer dos cosas. */
.pieza-motivos[hidden] { display: none !important; }

.motivos {
  margin: 10px 0 2px;
  padding: 14px;
  border: 1.5px solid var(--accent);
  border-radius: 12px;
  background: var(--surface);
}

.motivos b { display: block; margin-bottom: 2px; font-size: 15px; }

/* NUEVE MOTIVOS, EN DOS COLUMNAS CUANDO ENTRAN.
   ---------------------------------------------
   En un telefono de 380 px quedan 316 px utiles adentro del panel. En una
   sola columna, nueve botones de 44 px son 444 px de tira para leer; en
   dos son 272. Cada boton mide 154 px, que a 14 px de letra entra en dos
   renglones -- el mas largo, "El hook no va con el guion", son 26
   caracteres.

   EL AREA TOCABLE NO SE ACHICA: sigue en 44 px de alto. Esa era la
   condicion, y por eso son dos columnas y no siete botones apretados.

   No son dos columnas FIJAS: en un telefono de 320 px quedan 256 px
   utiles y dos columnas darian 124 px cada una, que ya no se lee. Con
   `auto-fit` y un minimo de 140, abajo de ~288 px vuelve solo a una
   columna ancha. */
.motivos-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin: 10px 0;
  align-items: stretch;
}

/* Uno abajo del otro y no en dos columnas: son siete frases de largo
   distinto, y en columnas la mas larga parte en dos lineas mientras la de
   al lado queda con la mitad vacia. Ademas se leen en orden. */
.motivo-op {
  width: 100%;
  height: 100%;          /* toda la fila mide lo que el mas alto */
  text-align: left;
  min-height: 44px;
  line-height: 1.35;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: rgba(255, 255, 255, .03);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
}

.motivo-op:hover {
  border-color: var(--accent);
  background: rgba(255, 255, 255, .07);
}

.motivos textarea {
  width: 100%;
  resize: vertical;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2, #1f2330);
  color: inherit;
  font: inherit;
  font-size: 13px;
}

/* La otra salida: marcar un pedazo en vez de tirar la pieza. Apagada, no
   es la accion principal de este panel. */
.motivos-pedazo {
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}

.motivos-pedazo:hover { color: var(--text); background: rgba(255, 255, 255, .05); }


/* ESTE APARATO -- lo que midio y que camino eligio.
   ----------------------------------------------------------------------
   Va en Configuracion y no escondido en un diagnostico: cuando un agente
   dice "se me traba", esto es lo primero que hay que mirar, y tiene que
   poder leerlo el que lo esta sufriendo. */
.ap-aparato {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--text-dim);
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

/* EL CAMINO ELEGIDO, EN GRANDE. Es la respuesta; todo lo demas es por
   que. */
.ap-camino {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
}

/* Verde y ambar, no verde y rojo: la camara directa NO es una falla. Es
   el camino que corresponde a ese aparato, y el video sale igual. */
.ap-si { color: var(--success, #7fffb3); }
.ap-no { color: var(--warning, #f5c451); }
.ap-sin { color: var(--text-dim); }

.ap-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px 14px;
  margin: 12px 0 8px;
}

.ap-datos > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
}

.ap-datos dt { font-size: 12.5px; color: var(--text-dim); }

/* Tabulares: son numeros que se comparan entre si de una medicion a la
   siguiente, y con cifras de ancho distinto no se pueden comparar de un
   vistazo. */
.ap-datos dd {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* CAMBIARLO A MANO VA PLEGADO. No es lo que el agente tiene que hacer:
   es la salida para el aparato que quedo mal clasificado. */
.ap-mano { margin-top: 12px; }

.ap-mano summary {
  cursor: pointer;
  font-size: 13.5px;
  color: var(--text-dim);
  padding: 6px 0;
}

.ap-mano summary:hover { color: var(--text); }

.ap-botones {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
}

/* Los tres botones son de contorno y no llenos: ninguno es lo
   recomendado. Lo recomendado es dejar lo que midio. */
.ap-botones .stock-subir {
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 9px;
}

.ap-mano input[type="number"] {
  width: 100%;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2, #1f2330);
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
}


/* LA GRABACION QUE QUEDO SIN SUBIR.
   ----------------------------------------------------------------------
   Vive FUERA de #app, como la caja de soporte: el router redibuja #app
   entero en cada pantalla y se llevaria el cartel puesto en la mitad de
   la subida.

   Abajo y cruzando la pantalla: es lo mas importante que esta pasando --
   una grabacion que todavia no llego-- y tiene que verse desde cualquier
   pantalla. */
.grab-pendiente {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  padding: 12px 16px;
  background: var(--panel, #131922);
  border-top: 2px solid var(--accent);
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .45);
}

/* PLEGADO: UN RENGLÓN. ABIERTO: LO DE SIEMPRE.
   ---------------------------------------------
       para mí hay que contraerlo o expandirlo (...) porque está jodiendo
       toda la app                       -- Gustavo, 09/09/2026

   El cartel es fijo al pie y vive fuera de `#app`, así que se queda arriba
   de todas las pantallas. Con título, tres renglones de datos y tres
   botones son ~40% del alto de un teléfono tapando lo que el agente vino a
   hacer -- y la decisión que pide es sobre material de hace horas.

   Plegado queda el renglón que dice qué es, de cuándo y cuánto dura: con
   eso ya se sabe si vale la pena abrirlo. */
.grab-plegable { padding: 0; }

/* CON `.grab-pendiente` ADELANTE, Y NO SUELTO.
   `.grab-pendiente button` --la regla de los botones de acción, unas
   líneas más abajo-- pesa más que `.grab-tira` sola, así que la tira salía
   pintada del turquesa de "Subirla": un renglón informativo con cara de
   botón principal, cruzando la pantalla entera. */
.grab-pendiente .grab-tira {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.grab-tira-t {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La flecha la dibuja el CSS y no el HTML: así el estado de abierto vive
   en UN solo lugar --la clase-- y no en dos que se pueden desincronizar. */
.grab-tira-ch::before { content: "⌃"; opacity: .6; font-size: 16px; }
.grab-abierto .grab-tira-ch::before { content: "⌄"; }

.grab-plegable .grab-cuerpo { display: none; }
.grab-abierto .grab-cuerpo {
  display: block;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--line, #21262d);
}

/* Y ABIERTO NO SE DICE DOS VECES. La tira ya es el título --"Grabación por
   la mitad · 9/9, 04:28 p. m. · 14 s"-- y abajo estaba otra vez, palabra
   por palabra. El renglón de datos sí se queda: agrega los MB. */
.grab-abierto .grab-cuerpo > b:first-child { display: none; }

/* NI LA BARRA DE ABAJO. El cartel es `fixed` a `bottom: 0` con z-index 60
   y `.barra-abajo` está en 40: le tapaba los tres destinos enteros --o sea
   que la grabación pendiente se comía la navegación de la app--. Se apoya
   arriba de la barra, y usa el mismo 74px que la barra le pone al body:
   dos números distintos para la misma barra se separan el día que uno
   cambie. */
body.con-barra .grab-pendiente {
  bottom: calc(var(--alto-barra) + var(--alto-cuaderno));
}

/* Y LO QUE HAY DEBAJO NO SE TAPA. El cartel flota, así que el último
   renglón de cualquier pantalla le quedaba abajo. `--alto-grab` lo mide
   `_grabCartel`, porque el alto cambia al abrirlo y al cerrarlo. */
body.con-grab-pendiente { padding-bottom: var(--alto-grab, 58px); }

/* Con las dos cosas al pie, el relleno es la suma. Va con las dos clases
   --pesa más que `body.con-barra`-- así que no depende de en qué orden
   estén escritas las reglas. */
body.con-barra.con-grab-pendiente {
  padding-bottom: calc(var(--alto-barra) + var(--alto-cuaderno)
                       + var(--alto-grab, 58px));
}

.grab-pendiente b { display: block; margin-bottom: 2px; }

.grab-pendiente button {
  min-height: 44px;
  margin-top: 8px;
  padding: 10px 16px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #04222b;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* DESCARTAR NO SE VE COMO SUBIR. Los dos con el mismo color son dos
   botones grandes e iguales para dos cosas opuestas, y una de ellas
   borra material del agente. */
.grab-pendiente button.secundario {
  background: transparent;
  color: var(--text-dim, #8b949e);
  border: 1px solid var(--line, #21262d);
  font-weight: 500;
  margin-left: 8px;
}

.grab-pendiente p { margin: 4px 0 0; }
.grab-pendiente .hint { color: var(--text-dim, #8b949e); font-size: 13px; }

/* La entrada a Cortes desde el texto: ancha y secundaria. Ancha porque
   se toca con el pulgar mirando el video; secundaria porque el camino
   normal sigue siendo seguir leyendo hacia abajo. */
/* LA MARCA DEL COSTADO, EN EL MODO PREGUNTA.
   Le dice dónde mirar mientras suena la pregunta. Un punto y nada más: no
   es texto para leer -- quien está grabando lee todo lo que le pongan
   delante, y esto tiene que quedar fuera del video. */
.pr-mira {
  position: absolute;
  top: 42%;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(126, 226, 184, .22);
  border: 3px solid rgba(126, 226, 184, .9);
  box-shadow: 0 0 24px rgba(126, 226, 184, .45);
  z-index: 6;
  pointer-events: none;
  animation: pr-mira-late 1.6s ease-in-out infinite;
}

.pr-mira-izquierda { left: 18px; }
.pr-mira-derecha { right: 18px; }

@keyframes pr-mira-late {
  0%, 100% { transform: scale(1); opacity: .85; }
  50% { transform: scale(1.12); opacity: 1; }
}

/* LA BANDA, APAGADA HASTA QUE LA PREGUNTA TERMINE.
   `visibility` y no `display`: el tren de párrafos ya está medido y
   posicionado, y sacarlo del flujo lo haría recalcular todo justo cuando
   aparece -- que es el único instante en que tiene que ser instantáneo. */
.pr-banda-callada {
  visibility: hidden;
}

/* ================================================================
   ESTO O AQUELLO -- la guia de grabacion.
   Nada de esto sale en el video: vive en el DOM, y lo que el grabador
   codifica es el chorro de la camara.
   ================================================================ */
.eoa-par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.eoa-lados { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.eoa-lado {
  display: flex; align-items: center; gap: 8px; padding: 12px;
  border: 1px solid var(--line, #21262d); border-radius: 10px;
  min-height: 48px;
}
.eoa-lado input { width: 22px; height: 22px; }

/* LA MANO DE CADA PREGUNTA. Es un DATO, no un control: se lee y no se
   toca. Por eso no tiene borde de caja ni area de toque -- parecerse a
   algo que se aprieta es lo que hacia que se apretara. Ver
   `_eoaLeerPantalla`, donde vivian los radios. */
.eoa-mano {
  margin-top: 10px;
  padding: 8px 10px;
  border-left: 3px solid var(--hn-auto, #2ea8c8);
  background: rgba(46, 168, 200, 0.06);
  border-radius: 0 6px 6px 0;
}

.eoa-capa {
  position: absolute; inset: 0;
  z-index: 7; pointer-events: none;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 10vh;
}

/* LA CAPA NO RECIBE TOQUES; SU CONTENIDO SI.

   La capa mide la pantalla entera. Poniendole `pointer-events: auto`
   --que es lo que hacia el panel de revision para volverse clickeable--
   se traga TODOS los toques, incluidos los de los botones de abajo, que
   quedan debajo de un vidrio invisible. El boton verde del cierre estaba
   pintado y cableado, y no respondia por esto.

   Asi que la capa se queda transparente al dedo y lo que se toca es el
   panel. Apagarlo --mientras se rehace una-- se hace sobre el panel
   tambien, no sobre la capa. */
.eoa-capa > * { pointer-events: auto; }

/* LOS DOS FORMATOS PARA BAJAR, en la pantalla de publicar. En fila:
   son la misma accion sobre dos archivos, no dos decisiones. */
.hn-bajar { display: flex; gap: 10px; margin: 10px 0 4px; }

/* LO QUE LA APP ARREGLO SOLA ANTES DE ENTREGARTE EL GUION. Se ve, pero
   no grita: no es un error -- ya esta resuelto. Lo que grita es el
   `.error-box` de al lado, que si frena. */
.eoa-revisado {
  border-left: 3px solid var(--verde, #7ee0a0);
  background: rgba(126, 224, 160, .07);
  padding: 10px 12px; border-radius: 0 6px 6px 0; margin: 10px 0;
  font-size: .92rem;
}
.eoa-revisado ul, .error-box ul { margin: 6px 0 0; padding-left: 18px; }
.hn-bajar .hn-secundario { flex: 1 1 0; }

/* El video terminado ocupa la caja entera. `object-fit: contain` y no
   `cover`: recortar el video que se esta por publicar para que entre en
   la caja es mostrar algo que no es lo que va a salir. */
.hn-video video { width: 100%; height: 100%; object-fit: contain; display: block; }

.eoa-guia {
  width: 100%; text-align: center;
  background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,0));
  padding: 24px 12px 18px;
}

.eoa-cuenta { color: #EDE4D2; opacity: .6; font-size: 14px; letter-spacing: .18em; }

.eoa-pregunta {
  color: #EDE4D2; font-size: 26px; font-weight: 600; margin: 6px 0 14px;
  text-shadow: 0 2px 12px rgba(0,0,0,.9);
}

.eoa-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.eoa-op {
  color: #EDE4D2; opacity: .5; font-size: 20px; padding: 10px 6px;
  border: 2px solid transparent; border-radius: 12px;
}

/* EL LADO QUE LE TOCA, MARCADO DESDE ANTES DE QUE LA VOZ TERMINE. Asi lo
   ve venir y no tiene que leer la flecha de golpe: cuando llega el momento
   ya sabia para donde iba. */
.eoa-elegida { opacity: 1; border-color: #D4A32C; color: #D4A32C; }

/* HACIA DONDE SEÑALAR: LA PALABRA, DEBAJO DE LA PREGUNTA.
   Grande y en dorado sobre el marfil de la pregunta: es lo único que hay
   que leer en el momento. La pregunta está para saber de qué se trata; la
   palabra es la orden.
   Se ve desde el principio en gris y se enciende cuando la voz termina --
   así la ve venir y no tiene que leerla de golpe. */
.eoa-donde {
  margin-top: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}

.eoa-donde-chico {
  color: #EDE4D2; opacity: .55; font-size: 15px; letter-spacing: .14em;
  text-transform: uppercase;
}

.eoa-donde-grande {
  font-size: 58px; line-height: 1.05; font-weight: 800; letter-spacing: .04em;
  color: rgba(237, 228, 210, .45);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .95);
  transition: color .12s ease-out, transform .12s ease-out;
}

.eoa-donde-cual {
  color: #EDE4D2; opacity: .6; font-size: 17px; margin-top: 2px;
}

/* Y ACÁ SE ENCIENDE. Ese cambio de color es la orden de señalar. */
.eoa-ahora .eoa-donde-grande {
  color: #D4A32C;
  transform: scale(1.08);
}

.eoa-ahora .eoa-pregunta { opacity: .35; }

@media (prefers-reduced-motion: reduce) {
  .eoa-flecha { transition: none; }
}

/* EL PANEL DE REVISION. Es lo unico de la capa que se toca, asi que es lo
   unico que recibe eventos. */
/* LA REVISION ES UN PANEL, NO LA BANDA DE ABAJO.

   `.eoa-guia` pinta un degradado que arranca opaco abajo y termina
   TRANSPARENTE arriba. Sirve para lo que fue hecho: una pregunta sola,
   pegada al borde inferior. La revision son cinco filas y ocupa casi toda
   la pantalla, asi que la mitad de arriba quedaba sin fondo -- y por
   detras se veian la camara y el texto del teleprompter, todo encimado.
   Se leian tres cosas a la vez y no se entendia ninguna.

   Fondo propio, opaco, y separado de los bordes para que se lea como una
   hoja puesta encima y no como parte del video. */
.eoa-revision {
  max-height: 76vh; overflow: auto; text-align: left;
  background: rgba(11, 9, 8, .96);
  border: 1px solid rgba(237, 228, 210, .14);
  border-radius: 16px;
  margin: 0 10px;
  padding: 16px 14px;
}

.eoa-fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 4px;
  border-bottom: 1px solid rgba(237, 228, 210, .18);
  color: #EDE4D2;
}

/* QUE EL TITULO TENGA DONDE ENTRAR. Sin esto la columna de texto se
   achica hasta una palabra por renglon: "Para / invertir / hoy". */
.eoa-fila > div { flex: 1 1 auto; min-width: 0; }
.eoa-fila-op { color: #EDE4D2; opacity: .6; font-size: 13px; margin-top: 2px; }

/* EL ANCHO, QUE ES LA MITAD QUE FALTABA.
   
   `button` declara `width: 100%` y esta regla declaraba `flex` y
   `min-width` pero NO `width`: la propiedad caia al 100% de la regla
   generica, el boton se llevaba todo el renglon y encima se salia por la
   derecha. Es la misma cascada que ya se pago en la fila de Mis videos --
   una clase gana solo en lo que declara. */
.eoa-fila .pr-b {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  padding: 7px 14px;
  font-size: .88rem;
}

.eoa-revision .pr-terminar { width: 100%; margin-top: 14px; }

/* EL BOTON QUE ABRE LA GRABACION DEL CIERRE.

   VERDE Y NO TURQUESA. El turquesa de `.pr-terminar` significa "cerrar y
   entregar" en toda la app -- y esto es lo contrario: abre una toma
   nueva. Dos acciones opuestas del mismo color, una al lado de la otra,
   es como se aprieta la que no era.

   Es el `--verde` de accion que ya usa el resto de la app. */
.eoa-revision .eoa-grabar-cta {
  width: 100%;
  margin-top: 14px;
  background: var(--verde);
  color: #06281a;
  border-color: var(--verde);
  font-weight: 700;
}

.preview-a-cortes {
  width: 100%;
  margin: 8px 0 4px;
}

.grab-pendiente a { color: var(--accent); }

/* DESCARTAR TODAS, Y ADONDE ESCRIBIR.
 *
 *     Descartá todas, y ahí abajo el correo que te pasé: ya no es ése el
 *     lugar donde recuperar una grabación.  -- Gustavo, 12/09/2026
 *
 * VA SEPARADO DE LOS OTROS TRES, con una línea arriba: los de arriba son
 * sobre ESTA grabación y éste es sobre todas. Pegado al de «Descartarla»
 * se toca uno por el otro, y lo que se pierde no vuelve. */
.grab-pendiente .grab-todas {
  margin-top: 12px;
  border-top: 1px solid var(--hn-borde, #2C302C);
  padding-top: 12px;
  border-radius: 0 0 12px 12px;
}


/* EL VIDEO DEL BORRADOR, arriba de la lista.
   La lista explica cada imagen; el video muestra como quedo. Sin el, el
   agente toca "armar borrador", el armado ocurre, y lo unico que ve es
   una lista. */
.bor-video {
  position: relative;
  margin: 10px 0 14px;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  min-height: 120px;
}

.bor-video video {
  display: block;
  width: 100%;
  max-height: 62vh;
  background: #000;
}

.bor-video .hint { padding: 26px 14px; text-align: center; }

/* LA PANTALLA PUENTE — cuando la app se abrio adentro de WhatsApp.
   ----------------------------------------------------------------------
   Es lo unico que ve el agente en ese caso, asi que no comparte espacio
   con nada: el texto grande, el boton grande, y las dos salidas de
   respaldo debajo. Ver "EL NAVEGADOR DE ADENTRO DE WHATSAPP" en app.js. */
.card.puente p {
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 12px;
}

/* Lo usan la pantalla puente, la del enlace vencido, la de "no pude
   terminar de entrar" y la de sin sesion. Estaba atado a `.card.puente` y
   en las otras tres salia como un h3 pelado. */
.puente-sub {
  font-size: 14px;
  margin: 20px 0 4px;
  color: var(--muted);
}

/* El enlace se muestra ENTERO y en una sola linea que se puede arrastrar:
   cortado con puntos suspensivos no se puede copiar a mano, que es
   justamente la salida de ultimo recurso. */
.puente-enlace {
  width: 100%;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 10px;
  margin-bottom: 8px;
}

/* La contracara de `.error-box`: algo salio bien y hay que esperar. La usa
   el "te mandé el enlace por WhatsApp" de la pantalla de enlace vencido. */
.ok-box {
  background: rgba(0, 200, 150, 0.12);
  border: 1px solid var(--accent);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.88rem;
  margin-top: 10px;
}

/* EL CAMINO DE ATRAS DE LA PANTALLA SIN SESION.
   ----------------------------------------------------------------------
   Pegar el enlace a mano y "es otro numero" son las salidas del que el
   camino de un toque no resolvio. Van plegadas: abiertas, la pantalla se
   lee como un formulario de cuatro campos y el toque que alcanza queda
   escondido entre ellos. */
.sin-sesion-otro {
  margin: 10px 0 4px;
}

.sin-sesion-otro > summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--muted);
  padding: 6px 0;
  list-style: none;
}

.sin-sesion-otro > summary::before {
  content: "▸ ";
}

.sin-sesion-otro[open] > summary::before {
  content: "▾ ";
}

.sin-sesion-otro > summary::-webkit-details-marker {
  display: none;
}

/* POR DONDE SIGUE LA PIEZA, cuando dos arrancan con la misma frase.
   Mas apagada que el hook y en cursiva: no compite con lo que se lee para
   decidir, esta para desempatar. */
.pieza-sigue {
  margin: 2px 0 0;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--muted);
  line-height: 1.4;
}

/* EL HOOK QUE NO ENTRO EN LA FRANJA.
   ----------------------------------------------------------------------
   Amarillo y no rojo: no se rompio nada. El sistema decidio no poner una
   franja de tres renglones --que dejaria de ser la misma franja en todos
   los videos-- y eso hay que verlo, no sufrirlo. */
.bor-hook-fuera {
  background: rgba(212, 163, 44, 0.10);
  border-left: 3px solid #D4A32C;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 14px 0;
  font-size: 0.9rem;
}

.bor-hook-fuera p { margin: 6px 0; }

/* El hook entero y sin cortar: lo que se hace con esto es reescribirlo
   mas corto, y para eso hay que poder leerlo completo. */
.bor-hook-cual {
  font-style: italic;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* LAS ZONAS DEL AGENTE, en la ficha del panel.
   ----------------------------------------------------------------------
   Setenta barrios en cuatro grupos. Como pastillas y no como lista: se
   marcan varias de un vistazo y se ve cuáles están puestas sin leer. */
.zona-grid {
  display: grid;
  gap: 12px;
  margin: 6px 0 12px;
}

.zona-titulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 4px;
}

.zona-barrios {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.zona-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}

.zona-chip input { margin: 0; }

.zona-chip.elegida {
  background: rgba(87, 221, 255, .15);
  border-color: var(--accent);
}

/* LA BARRA DE ABAJO — v2 de distribución.
   ----------------------------------------------------------------------
   Fija, tres destinos, y NUNCA tapa contenido: el padding se lo pone
   , que solo se agrega cuando la barra existe de verdad.
   Con la bandera apagada no hay barra ni padding. */
.barra-abajo {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  background: var(--bg-elevated, #221c18);
  border-top: 1px solid var(--linea, #3a322c);
  padding-bottom: env(safe-area-inset-bottom, 0);
  z-index: 40;
}

.barra-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 4px 8px;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 11.5px;
  color: var(--muted, #a2968b);
  cursor: pointer;
}

.barra-item svg { width: 21px; height: 21px; }

/* EL DE AHORA SE MARCA CON COLOR Y CON PESO, no solo con color: en un
   teléfono al sol un cambio de color solo no se ve. */
.barra-item.aqui { color: var(--accent); font-weight: 600; }

/* EL PADDING VA EN EL BODY Y NO EN #app: hay pantallas que dibujan cosas
   fuera de #app, y el último botón de la pantalla es casi siempre el que
   hay que tocar. */
/* LAS DOS, NO SOLO LA BARRA. El pastel del cuaderno flota arriba de la
   barra y tambien tapa: reservar una sola dejaba el ultimo boton abajo. */
body.con-barra {
  padding-bottom: calc(var(--alto-barra) + var(--alto-cuaderno));
}

/* PANTALLA DE INICIO — v2.
   ----------------------------------------------------------------------
   Una sola cosa abierta arriba; todo lo demás plegado en líneas de una
   altura. Los colores son la gramática: verde publicar, turquesa grabar,
   amarillo sólo cuando hay algo pendiente. */
.ini-hola { font-size: 1.35rem; margin: 4px 0 16px; }

.ini-abierto { display: flex; gap: 14px; align-items: flex-start; }

.ini-tapa {
  width: 66px; height: 83px; flex: none;
  border-radius: 8px; overflow: hidden; position: relative;
  background: linear-gradient(165deg, #4a4038, #2b2521);
  border: 1px solid var(--linea, #3a322c);
  background-size: cover; background-position: center;
}
.ini-tapa.con-imagen .ini-tapa-hook { display: none; }
.ini-tapa-hook {
  position: absolute; inset: 5px; background: #0c0c0c; border-radius: 3px;
  font-size: 6px; color: var(--accent); text-align: center;
  padding: 4px 2px; font-weight: 700; line-height: 1.25; overflow: hidden;
}

.ini-rotulo {
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.ini-titulo { font-size: 15px; line-height: 1.35; margin-bottom: 8px; }
.ini-donde { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }

.ini-ico { width: 14px; height: 14px; flex: none; }
.ini-ico.verde { color: #7dd695; }
.ini-ico.turquesa { color: var(--accent); }
.ini-ico.amarillo { color: #f0c548; }

/* EL BOTÓN DE PUBLICAR VA VERDE: se resuelve en esta pantalla. Turquesa
   es para lo que graba; verde para lo que publica. */
.btn.ini-publicar {
  width: 100%; margin-top: 14px; padding: 14px;
  background: #7dd695; color: #10281a; border: 0; font-weight: 600;
  border-radius: 10px; font-size: 15px;
}
.ini-nota { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 10px; text-align: center; }
.ini-despues {
  display: block; width: 100%; background: none; border: 0;
  color: var(--muted); font-family: inherit; font-size: 12.5px;
  padding: 14px 0 4px; cursor: pointer;
}
.ini-vacio { display: block; text-align: center; }
.ini-nada { font-size: 15px; margin-bottom: 6px; }

/* LOS PLIEGUES: una línea de altura cada uno. */
.ini-pliegue { border-top: 1px solid var(--linea, #3a322c); }
.ini-pliegue summary {
  cursor: pointer; list-style: none; display: flex; align-items: center;
  gap: 11px; padding: 16px 2px; font-size: 14px; color: var(--muted);
}
.ini-pliegue summary::-webkit-details-marker { display: none; }
.ini-pliegue summary::after { content: '+'; margin-left: auto; font-size: 16px; }
.ini-pliegue[open] summary::after { content: '−'; }
.ini-pliegue.pendiente summary { color: #f0c548; }
.ini-cuerpo { padding: 0 2px 16px; font-size: 13.5px; line-height: 1.55; }

.ini-fila {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--linea-suave, #2a2420);
  font-size: 13.5px;
}
.ini-fila:last-child { border-bottom: 0; }
.ini-dia { color: var(--muted); flex: none; font-size: 12.5px; }

/* MIS VIDEOS — el estado dice a donde fue, no "descargado". */
.mv-fila { cursor: pointer; }
.mv-estado { font-size: 12.5px; color: var(--muted); flex: none; text-align: right; }
.mv-estado.mandado { color: #7dd695; }
.mv-estado.bajado { color: var(--muted); }

/* --------------------------------------------------------------------
   LA ENTREGA v2

   LOS BOTONES DE RED SON VERDES porque son lo de publicar, que es la
   gramática de color de la app: verde publicar, turquesa grabar, amarillo
   pendiente. "Volver a inicio" va turquesa de contorno: es irse, no
   publicar, y un botón lleno abajo de seis botones llenos se toca solo.

   EL COPY VA A LA VISTA, no plegado: es lo que el agente tiene que pegar,
   y plegarlo agrega un toque a lo único que la pantalla viene a hacer.
   -------------------------------------------------------------------- */
.ent-titulo { font-size: 22px; margin: 4px 0 12px; }

.ent-video { margin-bottom: 14px; }
.ent-video video {
  width: 100%;
  max-height: 46vh;
  border-radius: var(--radius);
  background: #000;
  display: block;
}

.ent-aviso {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  padding: 10px 12px;
  margin: 0 0 16px;
}

.ent-sin-compartir {
  font-size: 13.5px;
  line-height: 1.5;
  background: rgba(255, 221, 87, .08);
  border: 1px solid rgba(255, 221, 87, .3);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 16px;
}

.ent-redes { display: flex; flex-direction: column; gap: 14px; }

.ent-red {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.ent-red-cab {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
/* EL ICONO DE LA RED. Cuadrado redondeado del color de la red, con la
   marca blanca adentro. 26 px: se distingue de un vistazo y no le come
   lugar al nombre, que sigue siendo lo que se lee. */
.ent-red-icono {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ent-red-icono svg { width: 18px; height: 18px; display: block; }

.ent-red-nombre { font-weight: 600; font-size: 16px; }
.ent-etiqueta {
  font-size: 11.5px;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
}

/* El texto, tal cual se va a pegar. `pre-wrap` para que los renglones y
   las líneas en blanco del copy se vean como se van a pegar: si acá se
   ve en un bloque corrido, el agente no sabe qué va a aparecer. */
.ent-copy {
  white-space: pre-wrap;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-dim);
  background: var(--surface-2);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  max-height: 8.5em;
  overflow-y: auto;
}

/* LOS SEIS DESTINOS, EN AMARILLO: PUBLICAR ES EL CAMINO MANUAL.

   Instagram, TikTok, Facebook, YouTube, LinkedIn y el estado de WhatsApp
   copian el texto y abren la red PARA QUE EL AGENTE PEGUE Y PUBLIQUE EL.
   Eso es el camino manual, y estaban en verde.

   SON SEIS Y VAN PINTADOS. La regla de «una sola accion pintada por
   pantalla» habla de acciones que compiten entre ellas; estas no
   compiten: son la misma accion repetida una vez por destino, cada una
   adentro de la tarjeta de su red. Cual de los seis es EL principal es
   una decision que no tiene la hoja de estilos. */
.ent-boton {
  width: 100%;
  background: var(--accent-2);
  color: #2b2000;
  border: 0;
  font-weight: 600;
}

.ent-nota {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-dim);
  margin: 10px 0 0;
}
.ent-nota b { color: var(--text); }

.ent-hecho:not(:empty) { margin-top: 10px; font-size: 13px; }
.ent-ok { color: var(--success); }
.ent-falla { color: var(--danger); }

.ent-pliegue { border-top: 1px solid var(--border); margin-top: 4px; }
.ent-pliegue summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 2px;
  font-size: 14.5px;
  display: flex;
  align-items: center;
}
.ent-pliegue summary::-webkit-details-marker { display: none; }
.ent-pliegue summary::after { content: '+'; margin-left: auto; font-size: 16px; }
.ent-pliegue[open] summary::after { content: '−'; }
.ent-pliegue .ini-cuerpo .btn { width: 100%; margin-bottom: 8px; }

/* El pliegue de transiciones reusa la tarjeta que ya existía; adentro del
   pliegue no necesita el fondo ni el borde de tarjeta otra vez. */
.ent-pliegue .cruce-card {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
}
.ent-pliegue .cruce-card h2 { display: none; }

.ent-redes + .ent-pliegue { margin-top: 20px; }
.ent-volver { width: 100%; margin-top: 20px; }

/* --------------------------------------------------------------------
   LOS CARTELES DE LA SONDA

   A PANTALLA COMPLETA Y POR ENCIMA DE TODO. La sonda va a abrir la cámara
   y grabar; en algunos teléfonos la pantalla se pone negra. Que eso pase
   con la app de fondo, como si nada, es lo que no puede volver a pasar.

   SIN BOTÓN DE CERRAR Y SIN CERRAR TOCANDO AFUERA: las dos salidas son
   botones con nombre. Un cartel que se cierra sin querer deja al agente
   sin saber si la prueba corrió o no.
   -------------------------------------------------------------------- */
.so-cartel {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 17, 23, .97);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}

.so-caja {
  max-width: 480px;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}

.so-caja h2 {
  font-size: 20px;
  line-height: 1.3;
  margin: 0 0 14px;
}

.so-caja p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0 0 12px;
}

.so-botones {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.so-botones .btn { width: 100%; }
/* LA FOTO PRODUCIDA EN LA TIRA DE LA PORTADA.
   Va primera y se distingue: el que la cargó tiene que reconocerla de un
   vistazo entre nueve cuadros del video que se parecen entre sí. */
.flt-cuadro.flt-propia { position: relative; border-color: var(--accent); }
.flt-propia-rot {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(15, 17, 23, .82);
  color: var(--text);
  font-size: 10.5px;
  padding: 2px 0;
  text-align: center;
}

/* EL EDITOR DE LA FOTO DE PORTADA */
/* HASTA TRES CUPOS: cada uno es su propia tarjetita chica, con su botón
   de subir o sus acciones si ya tiene foto. El editor de abajo es UNO
   SOLO y se reusa para cualquiera de los tres -- ver POR.cupo en app.js. */
.por-cupos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.por-cupo { text-align: center; }
.por-lienzo {
  width: 100%; max-width: 420px; height: auto;
  border-radius: 10px; background: #0f1117; touch-action: none;
  display: block; margin: 0 auto 10px;
}
.por-actual { width: 100%; border-radius: 10px; display: block; margin-bottom: 8px; aspect-ratio: 4 / 5; object-fit: cover; }
.por-acciones { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.por-acciones .btn { font-size: 12px; padding: 6px 4px; }
.por-subir { display: block; text-align: center; aspect-ratio: 4 / 5; border: 1px dashed var(--border); border-radius: 10px; font-size: 12px; display: flex; align-items: center; justify-content: center; padding: 8px; }
.por-controles { display: flex; gap: 12px; align-items: center; margin: 10px 0; flex-wrap: wrap; }
.por-zoom { flex: 1 1 160px; display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-dim); }
.por-zoom input { flex: 1; }
/* LOS DOS LUGARES DONDE SE VE. Gustavo, 16/09/2026: "mostrarle cómo va
   a quedar en los dos lugares: la grilla y el video". La misma foto
   recortada, una vez a 4:5 (la grilla) y otra centrada en un marco 9:16
   (el video) -- ahí se nota si queda con bandas. */
.por-previews { display: flex; gap: 18px; justify-content: center; align-items: flex-end; margin: 12px 0; }
.por-preview { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.por-preview canvas { border-radius: 8px; background: #000; display: block; }
.por-preview-etiqueta { font-size: 11px; color: var(--text-dim); }
/* LOS BORRADORES DE ANTES. Un pliegue cerrado: el que no lo necesita no
   lo ve. Las miniaturas van chicas y en fila -- están para reconocer cuál
   era, no para juzgar la imagen. */
.bor-antes {
  margin: 14px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.bor-antes > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14.5px;
}
.bor-antes-uno { margin-top: 12px; }
.bor-antes-uno b { font-size: 14px; margin-right: 6px; }
.bor-antes-tira {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  overflow-x: auto;          /* la fila scrollea sola, la pantalla no */
}
.bor-antes-tira img {
  width: 48px;
  height: 72px;
  object-fit: cover;
  border-radius: 6px;
  flex: 0 0 auto;
  background: var(--surface);
}
/* ====================================================================
   EL TELEPROMPTER NUEVO -- solo se ve con la bandera prendida
   ==================================================================== */

/* EL PARRAFO QUE SIGUE.
   Verde clarito y MAS CHICO que el de arriba, separado por una línea del
   mismo verde. La diferencia tiene que ser evidente: si los dos se ven
   parecidos, alguien lee el renglón equivocado con la cámara prendida.

   El de arriba no se toca -- ni tamaño, ni color, ni posición. */
.pr-sig {
  border-top: 2px solid #9be89b;
  margin: 8px 10px 0;
  padding-top: 7px;
  color: #9be89b;
  /* 0,62 del tamaño del párrafo activo. La banda entera lleva el tamaño
     que eligió el agente con A−/A+, así que esto lo sigue solo. */
  font-size: 0.62em;
  line-height: 1.35;
  opacity: 0.92;
  /* Solo lectura: no se selecciona ni se toca. */
  user-select: none;
  pointer-events: none;
}

/* EL OJO. Apagado, gris como los demás de la fila. Prendido, relleno en
   verde clarito. */
.pr-b.pr-ojo { font-size: 17px; }
.pr-b.pr-ojo.prendido {
  background: #9be89b;
  border-color: #9be89b;
  color: #10231a;
}
/* En el último párrafo no hay nada que mostrar: apagado y en gris. */
.pr-b.pr-ojo:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Repetir ocupa el resto del ancho de la fila de arriba. El color no
   cambia: sigue amarillo. */
.pr-b.pr-rehacer-ancho { flex: 1 1 auto; }

/* LA DESPEDIDA. En blanco, centrada, y sin nada que tocar.
   El `body` lleva la clase para que ninguna regla de la app --la barra de
   abajo, el globo de soporte, el ancho de `#app`-- siga valiendo. */
body.despedida {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 24px;
  background: var(--bg);
  text-align: center;
}
.despedida-caja { max-width: 320px; }
.despedida-titulo {
  font-size: 26px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px;
}
.despedida-texto {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-dim);
  margin: 0;
}


/* LA TARJETA DE LA PLACA DE APOYO.
   Los colores son los de la paleta nueva --negro, marfil, oro-- para que
   la pantalla donde se escribe la frase se parezca a lo que va a salir.
   El filo de oro a la izquierda es el mismo gesto que la franja del hook. */
.placa-card {
  border-left: 3px solid #D4A32C;
}
.placa-card h3 {
  margin: 0 0 6px;
}
.placa-lbl {
  display: block;
  margin: 12px 0 4px;
  font-size: 0.86rem;
  opacity: 0.85;
}
.placa-in {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: 1rem;
}
.placa-fila {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  flex-wrap: wrap;
}
.placa-fila .placa-in {
  flex: 1 1 8ch;
  min-width: 8ch;
}
.placa-seg {
  max-width: 10ch;
  text-align: center;
}
.placa-fila .btn,
.placa-fila .btn-amarillo {
  flex: 0 0 auto;
}

/* ====================================================================
   LA TARJETA DEL MENSAJE, EN EL VISOR

   Se dibuja mientras graba para que el agente sepa a donde señalar, y con
   las MISMAS FRACCIONES que usa el render -- `PR_MSG_GEO` en prompter.js y
   `GEOMETRIA` en app/services/mensaje.py. Los tamanios los pone el HTML en
   porcentajes; aca van solo los colores y la forma.

   VA A LA IZQUIERDA DEL VISOR Y EN EL VIDEO SALE A LA DERECHA. No es un
   error: el visor muestra la camara espejada y el archivo sale sin
   espejar. Ver el encabezado de `_prTarjetaDelMensaje`.
   ==================================================================== */

/* LA MISMA LETRA QUE EL VIDEO, Y NO LA QUE TENGA EL TELEFONO.

   `.pr-tarjeta` pedia "Work Sans" y la PWA no la traia: en el Android
   salia la Roboto, en el iPhone la SF Pro y en el escritorio la Segoe UI.
   Tres placas distintas, y ninguna la del archivo.

   Y NO ES SOLO COMO SE VE. El bloque gris del apellido arranca donde
   TERMINA el nombre, asi que lo corre cada letra que mide distinto: una
   fuente prestada mueve el tachado, y el tachado es a lo que el agente le
   apunta con el dedo.

   RECORTADAS AL LATINO CON ACENTOS --de 188 KB a 47 KB cada una, 27 KB
   comprimidas--: esto baja por datos moviles. La receta esta en
   `deploy/recortar_fuente.py` y la caja de linea queda intacta, que es de
   donde sale `escala_de_la_letra`.

   `swap` Y NO `block`: si la fuente tarda, la placa se dibuja con lo que
   haya. Una placa que no aparece deja al agente seniallando el vacio. */
@font-face {
  font-family: "Work Sans";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("./fuentes/WorkSans600.ttf") format("truetype");
}

@font-face {
  font-family: "Work Sans";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("./fuentes/WorkSans700.ttf") format("truetype");
}

.pr-tarjeta {
  position: absolute;
  z-index: 4;
  box-sizing: border-box;
  /* BLANCA CON LETRAS NEGRAS, igual que en el video. Los mismos valores
     que en services/mensaje.py: si se separan, la pantalla miente sobre
     lo que va a salir. */
  background: rgba(255, 255, 255, .9);
  color: #0B0908;
  pointer-events: none;
  font-family: "Work Sans", system-ui, sans-serif;
  /* EL INTERLINEADO LO PONE EL HTML, dividido por la escala de la letra.

     `line-height` cuenta sobre el `font-size`, y el render cuenta sobre el
     CUERPO PEDIDO, que es un 31% mas grande. Con el 1.32 escrito aca el
     renglon del mensaje media 25 px en el video y 17 px en el visor. */
}

/* EL AIRE ENTRE EL CIRCULO Y EL NOMBRE, Y ENTRE LA CABEZA Y EL MENSAJE.

   LOS DOS SALEN DEL RELLENO Y NO DEL CUERPO, que es de donde los saca el
   render: `x_texto` suma `relleno * 0.7` y el alto de la tarjeta suma
   `relleno * 0.6`. Estaban los dos en `.5em` --dos numeros escritos aca
   que nadie comparaba con nada-- y el relleno es fraccion del ANCHO
   mientras que el em lo es de la ALTURA: en cualquier cuadro que no sea
   el que se probo, se separan. Los pone el HTML, con las fracciones
   compartidas. */
.pr-tarjeta-quien {
  display: flex;
  align-items: center;
}

/* LA FOTO DE PERFIL: un circulo de color con un icono de linea adentro.
   Es lo que termina de volverla una captura.

       si parece una captura real, se cree. Si parece un cartel, no.
                                        -- Gustavo, 08/09/2026

   EL COLOR Y EL ICONO SALEN DEL NOMBRE --ver `_prAvatarDe`-- asi que el
   mismo guion sale igual aca, en el borrador y en el video final. El
   tamanio lo pone el HTML, en fraccion del ancho del cuadro: aca no va
   ni un numero, porque un numero aca es un numero que se puede separar
   del de `services/mensaje.py`. */
.pr-tarjeta-foto {
  flex: 0 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pr-tarjeta-icono { display: block; }

.pr-tarjeta-datos {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* El nombre a la izquierda y la hora al otro extremo, como en cualquier
   aplicacion de mensajes. Alineados por la linea de base: el nombre y la
   hora tienen cuerpos distintos y por el medio quedarian escalonados. */
.pr-tarjeta-fila {
  display: flex;
  align-items: baseline;
}

.pr-tarjeta-nombre {
  /* Sin el dorado: sobre blanco no se lee. La separacion con el mensaje
     la hace el peso de la letra. */
  color: #0B0908;
  font-weight: 700;
}

/* EL ARROBA Y LA HORA VAN EN 600, que es la pesada con la que los dibuja
   el video --`ARCHIVO_MENSAJE`, la Work Sans 600--. Estaban en 500: una
   pesada que el render no tiene y que no se pidio en ningun lado. */
.pr-tarjeta-hora {
  margin-left: auto;
  padding-left: .5em;
  white-space: nowrap;
  /* El mismo `GRIS_DEL_USUARIO` de services/mensaje.py. */
  color: #6E6862;
  font-weight: 600;
}

.pr-tarjeta-usuario {
  color: #6E6862;
  font-weight: 600;
}

/* EL TACHADO ES UN BLOQUE GRIS SOLIDO, NO UN DESENFOQUE.

       desenfocar exige dibujar el texto, procesar esa zona y volver a
       pegarla, y eso se hace distinto en el telefono y en el render --
       con dos caminos distintos, se separan. Un bloque gris se dibuja
       igual en los dos lados y no se puede desincronizar.
                                        -- Gustavo, 08/09/2026

   SE APOYA EN LA LINEA DE BASE, que es donde lo apoya el render: un
   bloque centrado en el renglon queda alto y deja ver el pie de las
   letras. El ancho y el alto los pone el HTML, por cantidad de letras.
   El gris es `GRIS_DEL_TACHADO`. */
.pr-tachado {
  display: inline-block;
  background: #9B9691;
  border-radius: .13em;
  vertical-align: baseline;
}

.pr-tarjeta-texto { font-weight: 600; }

/* COMO VA A SALIR LA PLACA, en la pantalla de armado del mensaje.

   El apellido y el arroba tachados son inventados, y esta es la unica
   pantalla donde el agente los puede mirar antes de grabar. Los
   tamanios de adentro los pone el HTML con las fracciones compartidas;
   aca va solo el tamanio del circulo, que en esta pantalla no depende
   del cuadro del video sino del renglon. */
.msg-placa {
  display: flex;
  align-items: center;
  gap: .5em;
  margin-top: 10px;
  color: var(--text);
  font-size: 0.95rem;
}

.msg-placa .pr-tarjeta-foto { width: 2.1em; height: 2.1em; }


/* SE TOCA PARA SACARLA, y se vuelve a tocar para traerla. El cableado
   esta en _prPantalla, con el motivo. Sin esto la tarjeta no recibe el
   toque: la regla de arriba le pone pointer-events en none para que no se
   coma los toques del visor. */
.pr-tarjeta { pointer-events: auto; cursor: pointer; }

/* "TOCALA CUANDO LA TERMINES DE LEER" VA DEBAJO DE LA TARJETA, NO ADENTRO.

   Adentro le sumaba su alto a la tarjeta: MEDIDO en un cuadro de 9:16, la
   del visor daba 127 px de alto contra 101 px la del video. La tarjeta es
   a lo que el agente le apunta con el dedo, asi que su caja tiene que ser
   la del archivo y nada mas. Sale de la caja con `position: absolute`
   --el ancla es la tarjeta, que ya es `absolute`-- y queda pegada abajo,
   que es donde estaba.

   Sigue adentro del elemento para que se vaya con ella cuando se la
   saca: la regla de `.pr-tarjeta-ida` esconde a los hijos. */
.pr-tarjeta-irse {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: .6em;
  font-size: .8em;
  font-weight: 500;
  /* AFUERA DE LA TARJETA HAY QUE PINTARLO DE NUEVO, Y CON FONDO.

     Adentro heredaba el negro sobre el blanco de la tarjeta y se leía
     solo. Colgado abajo cae sobre la CÁMARA, y ahí no hay color que
     alcance: en negro desaparecía contra una pared clara, y en marfil con
     sombra desapareció igual --visto en el teléfono, sobre una pared casi
     blanca--. Una sombra no es un fondo: sirve contra un fondo medio, no
     contra uno del mismo valor que la letra.

     Así que lleva su propia pastilla oscura, como la explicación del
     espejo. Es lo único que se lee sobre cualquier cámara: la del que
     graba contra una ventana y la del que graba contra una pared negra.

     `width: fit-content` con los márgenes automáticos: la pastilla abraza
     al texto y queda centrada bajo la tarjeta, en vez de cruzar la
     pantalla de lado a lado. */
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(11, 9, 8, .72);
  color: #EDE4D2;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
}

/* SACADA QUEDA EL CONTORNO. Es a donde apunta el dedo: la tarjeta se va
   de la vista sin llevarse la referencia de donde va a estar en el video.
   Y sigue recibiendo el toque, que es como vuelve. */
.pr-tarjeta.pr-tarjeta-ida {
  background: transparent;
  border: 1px dashed rgba(212, 163, 44, .5);
}

.pr-tarjeta.pr-tarjeta-ida > * { visibility: hidden; }

/* La explicacion del espejo. Se va sola cuando arranca a grabar: es para
   leerla antes.

   VA DEBAJO DE LA BANDA, y no al 40% de la altura como antes. Con la
   banda corrida para no pisar la tarjeta, el 40% cae justo adentro de
   ella y la explicacion quedaba escrita encima del mensaje. El borde de
   abajo de la banda lo mide `_prBajarLaBandaDeLaTarjeta`, que se vuelve a
   correr cada vez que el agente agranda la banda con el asa. */
.pr-tarjeta-guia {
  position: absolute;
  z-index: 4;
  left: 6%;
  top: 40%;
  width: 50%;
  color: #EDE4D2;
  background: rgba(11, 9, 8, .72);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.35;
  pointer-events: none;
}

/* ====================================================================
   LA HOME NUEVA

   TODO CUELGA DE `.hn` Y ESO NO ES UN DETALLE: la ve un solo agente, y la
   app de los otros once tiene que quedar exactamente igual. Una variable
   suelta en `:root` o un `body{}` se les derrama encima sin que nadie lo
   note hasta que alguien mira su pantalla.

   Los valores salen de `MOCKUP_HOME_FINAL.html`, que es la
   especificacion.
   ==================================================================== */
.hn {
  --hn-negro: #0C0D0C;
  --hn-carbon: #171917;
  --hn-carbon2: #1F221F;
  --hn-borde: #2C302C;
  --hn-blanco: #F4F4F1;
  --hn-gris: #A3A8A2;
  --hn-gris2: #848983;
  --hn-luz: #A79BE8;
  --hn-luz-tenue: rgba(167, 155, 232, .12);

  /* EL CRITERIO DE COLOR, Y RIGE TODA LA APP.
     ------------------------------------------------------------------
     TRES COLORES, TRES CAMINOS, Y UN CUARTO QUE NO ES UN CAMINO.

     TURQUESA  el camino automatico: lo que hace el sistema solo. Y
               tambien LA ACCION PRINCIPAL DE LA PANTALLA, la que la
               pantalla vino a pedir -- grabar es turquesa aunque lo haga
               el agente.
     VERDE     se queda aca: cambia algo sin salir de la pantalla. Traer
               otro guion, ir y volver entre guiones, abrir el selector
               de formato, ver y editar.
     AMARILLO  el camino manual: lo que hace el agente por su cuenta.
               Cargar sus seguidores, publicar a mano, subir un video
               grabado afuera, bajarse el archivo.
     LAVANDA   NO ES UN CAMINO. Es el color de la marca: titulos,
               numeros, acentos, el formato. No le busques significado.
     NEUTRO    salidas: volver, seguir en otra cosa.

     UN BOTON DE SALIDA ES NEUTRO, no turquesa: irse no es el camino que
     el sistema propone.

     LO QUE SE CAYO EL 11/09/2026: «un boton que navega a otra pantalla
     no es verde». El criterio nuevo pone a «ver y editar» en verde, y
     «ver y editar» abre otra pantalla. Lo que decide el color no es si
     cambia de pantalla, es si el agente vuelve a lo mismo.

     LO MAS IMPORTANTE ES LA INTENSIDAD, no el color.

         Si aplicas los tres colores a full en cada pantalla, queda un
         semaforo y se cae el diseno.   -- SISTEMA_DE_COLORES.md

     UNA SOLA ACCION POR PANTALLA VA PINTADA, con fondo lleno: la
     principal. LAS DEMAS USAN SU COLOR EN EL BORDE O EN EL TEXTO, sobre
     gris. Asi se distinguen si las buscas, pero no compiten entre ellas.

     Y NINGUN COLOR PUEDE DECIR DOS COSAS EN LA MISMA PANTALLA. Por eso
     los propositos --captacion, autoridad, alcance-- dejaron de tener
     color el 11/09/2026: eran estos mismos tres con otro significado.
     Quedan como texto gris con un punto.

     EL COLOR VA SIEMPRE POR CLASE, nunca con estilo suelto en el
     elemento: un color escrito a mano es uno que nadie encuentra el dia
     que el criterio cambia.

     Y ES UN SOLO JUEGO DE TRES PARA TODA LA APP. Hasta el 11/09/2026
     esta piel tenia los suyos --#2FBFAE, #E8B04B, #4CAF6A, los de la
     maqueta de la cola-- mientras el resto usaba #57DDFF, #FFDD57 y
     #7EE0A0. El agente tocaba «Grabar este» celeste en la home y caia en
     un «Grabar ahora» verde azulado: la misma accion, dos colores, dos
     segundos. */
  --hn-auto: #57DDFF;
  --hn-auto-t: rgba(87, 221, 255, .13);
  --hn-auto-b: rgba(87, 221, 255, .32);
  --hn-man: #FFDD57;
  --hn-man-t: rgba(255, 221, 87, .13);
  --hn-man-b: rgba(255, 221, 87, .32);
  --hn-aqui: #7EE0A0;
  --hn-aqui-t: rgba(126, 224, 160, .13);
  --hn-aqui-b: rgba(126, 224, 160, .32);

  position: relative;
  min-height: 100%;
  margin: -16px -16px 0;
  padding: 6px 20px 26px;
  background: var(--hn-negro);
  color: var(--hn-blanco);
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
}

/* El resplandor de arriba. Es lo unico decorativo y no compite con nada:
   no tiene borde ni forma reconocible. */
.hn::before {
  content: '';
  position: absolute;
  top: -140px; left: 50%;
  transform: translateX(-50%);
  width: 420px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167,155,232,.09) 0%, rgba(167,155,232,0) 68%);
  pointer-events: none;
}

.hn-cuerpo { position: relative; display: flex; flex-direction: column; min-height: 78vh; }
.hn-cargando { color: var(--hn-gris2); font-size: 15px; padding: 24px 0; }
.hn-abajo { margin-top: auto; }
.hn-arriba { margin-top: 18px; }
.hn-centrado { text-align: center; }

/* TODA PANTALLA LLEVA FLECHA DE VOLVER, incluidas las del nav. */
.hn-enc { display: flex; align-items: center; gap: 12px; padding: 8px 0 16px; }
.hn-enc h2 { font-size: 21px; font-weight: 500; letter-spacing: -.015em; margin: 0; }
.hn-icobtn {
  background: var(--hn-carbon); border: 1px solid var(--hn-borde); border-radius: 11px;
  width: 36px; height: 36px; display: grid; place-items: center; padding: 0;
  cursor: pointer; color: var(--hn-blanco); line-height: 0; flex: 0 0 36px;
}
.hn-icobtn:active { background: var(--hn-carbon2); }

/* Las bandas de pendiente. Solo aparecen si hay algo. */
.hn-pendiente {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: 8px 0 0;
  background: var(--hn-luz-tenue); border: 1px solid rgba(167, 155, 232, .24);
  border-radius: 100px; padding: 9px 14px 9px 12px;
  font-family: inherit; font-size: 15px; color: var(--hn-luz);
  cursor: pointer; text-align: left;
}
.hn-pendiente + .hn-pendiente { margin-top: 8px; }
.hn-pendiente b { font-weight: 600; }
.hn-pendiente.hn-man { background: var(--hn-man-t); border-color: var(--hn-man-b); color: var(--hn-man); }
.hn-pendiente.hn-man .hn-ch { color: var(--hn-man); }
.hn-ch { margin-left: auto; opacity: .7; }

/* La tarjeta del guion. */
.hn-hoy {
  background: var(--hn-carbon); border: 1px solid var(--hn-borde);
  border-radius: 20px; padding: 22px 20px; margin-top: 16px;
}
.hn-formato { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; min-width: 0; }
.hn-fico {
  width: 34px; height: 34px; border-radius: 11px;
  background: var(--hn-carbon2); border: 1px solid var(--hn-borde);
  display: grid; place-items: center; color: var(--hn-man); flex: 0 0 34px;
}
.hn-fcol { min-width: 0; overflow: hidden; }

/* DOS ETIQUETAS Y NO TRES: proposito y formato. El tipo de guion se fue
   -- nombraba lo mismo que el formato con otras palabras.

   EL PROPOSITO CON LOS COLORES QUE LA APP YA USA, apagados, solo como
   fondo de pildora y NUNCA con peso de boton: dice de que clase es la
   pieza, no invita a tocar nada. */
.hn-fnom {
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; white-space: nowrap;
}
.hn-form, .hn-prop {
  font-style: normal; font-weight: 600; letter-spacing: .03em;
  padding: 2px 6px; border-radius: 100px;
}
.hn-form { border: 1px solid rgba(244,244,241,.16); background: rgba(244,244,241,.06); color: #C6C9C3; }
.hn-prop { background: var(--hn-luz-tenue); color: var(--hn-luz); border: 1px solid rgba(167,155,232,.26); }
/* SIN UN COLOR POR PROPOSITO. Eran verde, celeste y amarillo --los tres
   caminos-- puestos sobre algo que no es un camino. El chip queda con el
   lavanda de `.hn-prop`, que es marca y no significa nada. */

/* LO QUE HAY PARA PUBLICAR, EN LA HOME NUEVA.
   Turquesa como el resto de lo automático: es lo que el sistema ya
   hizo y está esperando que el agente lo suelte. */
.hn-prop.pub { background: rgba(45,212,191,.10); color: var(--hn-auto); border-color: var(--hn-auto-b); }

/* La portada, ancha y baja: se reconoce el video sin robarle la
   pantalla al hook, que es lo que se lee. */
.hn-tapa-pub {
  height: 132px; border-radius: 13px; margin: 12px 0 2px;
  background: var(--hn-carbon2) center/cover no-repeat;
  border: 1px solid var(--hn-borde);
}
.hn-tapa-pub.con-imagen { border-color: transparent; }

/* EL COPY A LA VISTA. Monoespaciado no: es un texto para leer, no
   para revisar. Con el ancho de siempre y un fondo apenas distinto,
   para que se lea como una cita de lo que va a pegar. */
.hn-copy { margin-top: 13px; }
.hn-copy-t {
  background: var(--hn-carbon2); border: 1px solid var(--hn-borde);
  border-radius: 12px; padding: 11px 12px; margin: 0 0 9px;
  font-size: 13.5px; line-height: 1.5; color: var(--hn-gris);
  white-space: pre-wrap; word-break: break-word;
}
.hn-copy .hn-otra { width: auto; }
.hn-copy-uno { margin: 11px 0 0; }
.hn-copy-uno b { font-size: 12.5px; color: var(--hn-gris2); }
.hn-copy-uno p {
  margin: 5px 0 7px; font-size: 13px; line-height: 1.5;
  color: var(--hn-gris); white-space: pre-wrap; word-break: break-word;
}

/* EL PLIEGUE. Mismo gesto que en el resto de la app: el título con
   una flecha, y adentro lo que estaba guardado. */
.hn-pliegue { margin-top: 12px; }
.hn-pliegue > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  gap: 7px; font-size: 13px; color: var(--hn-gris2); padding: 7px 2px;
}
.hn-pliegue > summary::-webkit-details-marker { display: none; }
.hn-pliegue > summary::after { content: '›'; margin-left: auto; font-size: 17px; }
.hn-pliegue[open] > summary::after { content: '⌄'; }
.hn-pliegue-cuerpo { padding-top: 4px; }

/* TUS VIDEOS, COMO COLA.
   La tarjeta de la cola no es la del guion: no lleva icono ni chips
   de proposito. Lo que tiene que leerse de un vistazo es CUANDO sale
   y QUE es, en ese orden. */
.hn-resumen { margin: -2px 0 14px; }
.hn-cola-t {
  background: var(--hn-carbon); border: 1px solid var(--hn-borde);
  border-radius: 16px; padding: 14px 15px; margin-bottom: 10px;
}
/* La primera se distingue con un filo, no con otro color de fondo:
   sigue siendo una tarjeta mas de la misma lista. */
.hn-cola-t.hn-destacada { border-color: var(--hn-auto-b); }
.hn-marbete {
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--hn-auto); margin-bottom: 6px;
}
.hn-cola-t h4 {
  margin: 0; font-size: 15.5px; font-weight: 500; line-height: 1.35;
  color: var(--hn-blanco);
}
.hn-cola-t .hn-sub { margin: 8px 0 0; }

/* LAS VERSIONES DE UNA SERIE. Chips y no renglones: son la misma
   pieza contada distinto, y como renglones vuelven a leerse como
   videos separados, que es el problema que esto viene a sacar. */
.hn-variantes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.hn-v {
  font-size: 12px; padding: 4px 9px; border-radius: 999px;
  background: var(--hn-carbon2); border: 1px solid var(--hn-borde);
  color: var(--hn-gris2);
}
.hn-v.hn-v-activa { border-color: var(--hn-auto-b); color: var(--hn-auto); }

.hn-cola-b { display: flex; gap: 8px; margin-top: 12px; }
.hn-cola-b .hn-otra { flex: 1 1 0; }

/* Los enlaces a donde salio: se leen como texto, no como botones. */
.hn-item a { color: var(--hn-auto); text-decoration: none; }
.hn-item a:hover { text-decoration: underline; }

/* De qué video se está hablando, cuando se pregunta si salió. */
.hn-pub-cual { margin: 6px 0 0; font-size: 13.5px; color: var(--hn-gris2); }
.hn-fsub { font-size: 13.5px; color: var(--hn-gris2); display: block; margin-top: 2px; }
.hn-hoy h2 {
  font-size: 19px; line-height: 1.32; font-weight: 500;
  letter-spacing: -.012em; margin: 0; color: #E8E8E4;
}

/* El boton de grabar. Es el objeto mas brillante de la pantalla y nada
   mas compite con el: por eso el halo esta solo aca. */
.hn-grabar { margin-top: 18px; display: flex; flex-direction: column; align-items: center; }
/* EL BOTON DE GRABAR, UN 30% MAS GRANDE — 03/09/2026.
   Es el objeto mas brillante de la pantalla y el unico que el agente
   busca con la camara en la mano: 54 px era chico para el pulgar. Sube
   la caja, el boton y el icono en la misma proporcion, y el halo se
   acomoda solo porque va con `inset: 0`.
   Vale para las tres pantallas donde aparece: la home, contar y la
   repregunta -- las tres usan `.hn-rec`. */
.hn-rec { position: relative; width: 70px; height: 70px; display: grid; place-items: center; }

/* EL HALO NO SE COME EL CLIC. Esta `position:absolute; inset:0` sobre una
   caja de 54 px y el boton mide 44 y va adentro sin posicionar: un
   elemento POSICIONADO se pinta encima de uno que no lo esta, asi que el
   halo cubria el boton entero y "Grabar" no abria nada. */
.hn-halo {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(244,244,241,.28);
  animation: hn-respirar 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hn-respirar {
  0%, 100% { transform: scale(1); opacity: .45 }
  50% { transform: scale(1.16); opacity: 0 }
}
.hn-rec button {
  position: relative; z-index: 1;
  width: 57px; height: 57px; border-radius: 50%;
  background: var(--hn-blanco); border: none; cursor: pointer;
  display: grid; place-items: center; color: var(--hn-negro);
}
.hn-rec button:active { transform: scale(.96); }
.hn-rec.hn-auto button { background: var(--hn-auto); color: #04211E; }
.hn-rec.hn-auto .hn-halo { border-color: rgba(87, 221, 255,.42); }
.hn-rec.hn-rojo button { background: #D9483B; color: #fff; }
.hn-rec.hn-rojo .hn-halo { border-color: rgba(217,72,59,.5); animation-duration: 1.6s; }
.hn-rotulo { margin-top: 10px; font-size: 16px; font-weight: 600; text-align: center; }
.hn-rotulo small { display: block; font-size: 14px; font-weight: 400; color: var(--hn-gris2); margin-top: 3px; }

/* Los tres accesos chicos. Viven en la home y no adentro del guion:
   pedir otro no puede obligar a abrir el que no le gusto. */
.hn-otras { display: flex; gap: 7px; margin-top: 16px; }
.hn-otra {
  flex: 1; background: var(--hn-carbon); border: 1px solid var(--hn-borde);
  border-radius: 13px; padding: 11px 6px 9px;
  font-family: inherit; font-size: 13.5px; font-weight: 500; color: var(--hn-gris);
  cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.hn-otra.hn-auto { border-color: var(--hn-auto-b); color: var(--hn-auto); }
.hn-otra.hn-man { border-color: var(--hn-man-b); color: var(--hn-man); }

/* «OTRO», ENTRE SUS DOS FLECHAS.
   El marco lo pone `.hn-otra`; adentro van en fila y sin padding propio, asi
   el toque de cada flecha llega hasta el borde de la celda.

   LAS DOS FLECHAS MIDEN LO MISMO. Es la mitad del arreglo: mientras una era
   un chevron pelado y la otra un boton ancho con rotulo, la celda se leia
   como dos controles distintos y no como la ida y la vuelta de uno. */
.hn-par { flex-direction: row; align-items: stretch; padding: 0; gap: 0; overflow: hidden; }
.hn-par-f {
  /* `width: auto` NO SOBRA. La regla general de la app --`button, .btn`--
     trae `width: 100%`, asi que el primero se llevaba la celda entera (185px
     medidos) y el resto quedaba tapado por el `overflow`. Es la misma trampa
     que ya anotan otros dos bloques de este archivo. */
  width: auto; flex: 0 0 auto;
  background: none; border: none; color: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0 10px; line-height: 1;
}
/* EN LA PRIMERA NO HAY ADONDE VOLVER, y se ve apagada en vez de desaparecer:
   una fila que cambia de forma al segundo toque se lee como un error. */
.hn-par-f:disabled { opacity: .26; cursor: default; }
/* EL MEDIO NO ES UN BOTON: es el rotulo del par y dice en cual va. */
.hn-par-c {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px;
  padding: 9px 0 8px; font-size: 13.5px; font-weight: 500;
}
.hn-par-n {
  font-size: 10.5px; letter-spacing: .05em; color: var(--hn-gris2);
  font-variant-numeric: tabular-nums;
  /* NO PARTE EN DOS RENGLONES. La celda es un tercio de la fila; si el
     rotulo envuelve, esta celda queda mas alta que sus dos vecinas y la
     fila se ve rota. Por eso el texto es corto Y ademas no envuelve. */
  white-space: nowrap;
}

/* EL MES EN CERO, MAS APAGADO QUE EL MES CON DATOS. Es la misma linea y el
   mismo lugar --el agente la busca donde siempre-- pero no compite con la
   tarjeta del dia, que es lo que la pantalla viene a mostrar. */
.hn-linea-cero { color: var(--hn-gris2); }
.hn-linea-cero .hn-linea-t { font-weight: 400; }

.hn-puerta {
  display: flex; align-items: center; gap: 13px; width: 100%; margin-top: 22px;
  background: var(--hn-carbon); border: 1px solid var(--hn-borde); border-radius: 17px;
  padding: 15px; font-family: inherit; cursor: pointer; text-align: left; color: var(--hn-blanco);
}
.hn-puerta.hn-man { border-color: var(--hn-man-b); background: var(--hn-man-t); }
.hn-puerta.hn-man .hn-pico { color: var(--hn-man); border-color: var(--hn-man-b); }
.hn-puerta.hn-man .hn-ch { color: var(--hn-man); }
.hn-pico {
  width: 38px; height: 38px; border-radius: 12px; background: var(--hn-carbon2);
  border: 1px solid var(--hn-borde);
  display: grid; place-items: center; color: var(--hn-luz); flex: 0 0 38px;
}
.hn-puerta b { display: block; font-size: 16.5px; font-weight: 500; margin-bottom: 2px; }
.hn-puerta small { font-size: 14px; color: var(--hn-gris2); display: block; }

/* La semana. Cuatro marcas que se dibujan una por una al entrar, y LA DEL
   PERSONAL PUNTEADA DESDE EL LUNES: el mix se anuncia antes de tocarle. */
.hn-semana {
  margin-top: auto; padding-top: 24px; display: flex; align-items: center; gap: 12px;
}
.hn-semana-btn {
  background: none; border: none; border-top: 1px solid var(--hn-borde);
  width: 100%; font-family: inherit; cursor: pointer; text-align: left;
}
.hn-puntos { display: flex; gap: 6px; }
.hn-pt { width: 22px; height: 4px; border-radius: 2px; background: #262926; transform-origin: left; }
.hn-pt.ok { background: var(--hn-man); }
.hn-pt.per { background: transparent; border: 1px dashed rgba(255, 221, 87,.55); }
.hn-pt.per.ok { background: var(--hn-man); border-color: var(--hn-man); }
.hn-semana.animar .hn-pt.ok { animation: hn-llenar .5s cubic-bezier(.2,.8,.3,1) both; }
.hn-semana.animar .hn-pt.ok:nth-child(2) { animation-delay: .12s; }
.hn-semana.animar .hn-pt.ok:nth-child(3) { animation-delay: .24s; }
.hn-semana.animar .hn-pt.ok:nth-child(4) { animation-delay: .36s; }
@keyframes hn-llenar { from { transform: scaleX(0) } to { transform: scaleX(1) } }
.hn-semana p { font-size: 14px; color: var(--hn-gris2); margin: 0; }
.hn-semana b { color: var(--hn-blanco); font-weight: 600; }

/* OBJETIVO CUMPLIDO. El cuerpo lo ocupa lo que hizo: los cuatro videos en
   LISTA y no en grilla -- el titulo completo en un renglon y las vistas a
   la derecha. */
.hn-cumplido {
  background: var(--hn-carbon); border: 1px solid rgba(255, 221, 87,.22);
  border-radius: 20px; padding: 20px; margin-top: 16px;
}
.hn-arriba { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.hn-tic {
  width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 221, 87,.12);
  border: 1px solid rgba(255, 221, 87,.3); display: grid; place-items: center;
  color: var(--hn-man); flex: 0 0 38px;
}
.hn-cumplido h2 { font-size: 19px; font-weight: 500; letter-spacing: -.012em; line-height: 1.25; margin: 0; }
.hn-cumplido h2 small { display: block; font-size: 14px; font-weight: 400; color: var(--hn-gris2); margin-top: 3px; }
.hn-hechos { display: flex; flex-direction: column; gap: 1px; }
.hn-hecho { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-top: 1px solid var(--hn-borde); }
.hn-cu {
  width: 28px; height: 28px; border-radius: 8px; background: var(--hn-carbon2);
  display: grid; place-items: center; color: var(--hn-gris2); flex: 0 0 28px;
}
.hn-hecho p {
  flex: 1; font-size: 14.5px; color: #C6C9C3; line-height: 1.3; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0;
}
.hn-v { font-size: 13px; color: var(--hn-gris2); font-weight: 600; white-space: nowrap; }
.hn-tuyo {
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; padding: 2px 6px;
  border-radius: 100px; background: rgba(255, 221, 87,.12); color: #FFDD57;
  border: 1px solid rgba(255, 221, 87,.22); white-space: nowrap;
}
/* EL GUION BAJA A UN ACCESO SECUNDARIO. No hay boton turquesa de grabar:
   seguir es opcional y el sistema no lo empuja. Si lo empujara, el
   compromiso no significaria nada. */
.hn-adelantar {
  display: flex; align-items: center; gap: 11px; width: 100%; margin-top: 14px;
  background: none; border: 1px solid var(--hn-borde); border-radius: 15px; padding: 13px;
  font-family: inherit; cursor: pointer; text-align: left; color: var(--hn-gris);
}
.hn-adelantar b { display: block; font-size: 15.5px; font-weight: 500; color: var(--hn-blanco); margin-bottom: 2px; }
.hn-adelantar small { font-size: 13.5px; color: var(--hn-gris2); display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hn-adelantar .hn-ch { color: var(--hn-gris2); }

/* Las cuatro opciones: la directa ocupando el ancho y los tres tonos. */
.hn-elige { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 16px; }
.hn-eb {
  background: var(--hn-carbon); border: 1px solid var(--hn-borde); border-radius: 15px;
  padding: 14px 6px 12px; font-family: inherit; font-size: 14.5px; font-weight: 500;
  color: var(--hn-blanco); cursor: pointer; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.hn-eb .hn-ei { line-height: 0; color: var(--hn-luz); }
.hn-eb.hn-directa {
  grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: center;
  gap: 11px; padding: 15px; background: var(--hn-auto-t); border-color: var(--hn-auto-b);
}
.hn-eb.hn-directa b { display: block; font-size: 16px; font-weight: 500; }
.hn-eb.hn-directa .hn-ei { color: var(--hn-auto); }
.hn-eb.hn-directa .hn-ch { margin-left: auto; color: var(--hn-auto); }

.hn-intro { font-size: 22px; line-height: 1.25; font-weight: 500; letter-spacing: -.02em; margin: 6px 0 8px; }
.hn-sub { font-size: 15px; color: var(--hn-gris2); line-height: 1.55; margin-bottom: 20px; }
.hn-pregunta { font-size: 20px; line-height: 1.35; font-weight: 500; letter-spacing: -.014em; padding: 12px 0 0; }
.hn-pregunta.hn-chica { font-size: 19px; margin-top: 20px; }
.hn-pie { font-size: 14px; color: var(--hn-gris2); padding-top: 10px; }
.hn-pie b { color: var(--hn-blanco); cursor: pointer; }

/* LOS BOTONES, POR CLASE. Ver el criterio arriba. */
.hn-principal {
  width: 100%; background: var(--hn-blanco); color: var(--hn-negro); border: none;
  font-family: inherit; font-size: 17.5px; font-weight: 600;
  padding: 16px; border-radius: 14px; cursor: pointer; margin-top: 16px;
}
.hn-principal.hn-auto, .hn-b-auto { background: var(--hn-auto); color: #06232B; }
.hn-principal.hn-man { background: var(--hn-man); color: #231704; }
.hn-principal.hn-aqui { background: var(--hn-aqui); color: #04210D; }
.hn-secundario {
  width: 100%; background: none; color: var(--hn-gris); border: 1px solid var(--hn-borde);
  font-family: inherit; font-size: 16.5px; padding: 14px; border-radius: 14px;
  cursor: pointer; margin-top: 9px;
}
.hn-secundario.hn-man { border-color: var(--hn-man-b); color: var(--hn-man); }
.hn-secundario.hn-auto-b { border-color: var(--hn-auto-b); color: var(--hn-auto); }
/* LA QUE FALTABA: la de «se queda aca».

   Habia `hn-man` y `hn-auto-b` y ninguna verde, asi que «Este no me
   sirve, traeme otro» --el ejemplo que SISTEMA_DE_COLORES.md nombra con
   todas las letras para el verde-- salio en celeste, del mismo color que
   «Grabar ahora» justo arriba. */
.hn-secundario.hn-aqui { border-color: var(--hn-aqui-b); color: var(--hn-aqui); }
.hn-saltar {
  background: none; border: none; font-family: inherit; font-size: 15.5px;
  color: var(--hn-gris); cursor: pointer; padding: 14px 0;
  display: flex; align-items: center; gap: 7px; justify-content: center; width: 100%;
}
.hn-saltar.hn-auto-t { color: var(--hn-auto); font-weight: 600; }

/* LA TERCERA SALIDA: «No lo voy a publicar».
   MAS APAGADA QUE «Hoy no puedo», a proposito. Las dos son salidas, pero
   una es para hoy y la otra es para siempre: la que no se deshace sola no
   puede pesar lo mismo que la que si. Y no es roja -- no borra nada. */
.hn-saltar.hn-nunca { font-size: 14.5px; opacity: .68; padding-top: 2px; }
.hn-nunca-ask { text-align: center; padding: 6px 0 2px; }
.hn-nunca-ask .hn-sub { margin-bottom: 10px; }

.hn-onda { display: flex; align-items: center; justify-content: center; gap: 3px; height: 34px; margin: 22px 0 4px; }
.hn-onda i { width: 3px; border-radius: 2px; background: var(--hn-luz); opacity: .75; animation: hn-vibrar 1s ease-in-out infinite; }
@keyframes hn-vibrar { 0%, 100% { height: 6px } 50% { height: 26px } }

.hn-transcripto {
  background: var(--hn-carbon); border: 1px solid var(--hn-borde); border-radius: 16px;
  padding: 16px; font-size: 16.5px; line-height: 1.6; color: #D2D4CF; margin-top: 6px;
}
.hn-guion { font-size: 17.5px; line-height: 1.72; color: #D9DAD6; }
.hn-guion p { margin-bottom: 13px; }
.hn-guion .hn-hook { color: var(--hn-luz); font-weight: 600; }
.hn-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--hn-borde); background: var(--hn-carbon);
  border-radius: 100px; padding: 5px 12px; font-size: 13.5px; font-weight: 600;
  color: var(--hn-gris); margin-bottom: 14px;
}
.hn-campo {
  width: 100%; font-family: inherit; font-size: 18px; padding: 14px;
  border: 1px solid var(--hn-borde); border-radius: 13px;
  background: var(--hn-carbon); color: var(--hn-blanco); margin-bottom: 10px;
}
.hn-largo { min-height: 290px; font-size: 17px; line-height: 1.65; }
.hn-video {
  width: 100%; aspect-ratio: 9/13; border-radius: 18px; background: var(--hn-carbon);
  border: 1px solid var(--hn-borde); display: grid; place-items: center;
  color: var(--hn-gris2); margin-bottom: 16px;
}

/* Mis videos: lo que te espera tiene boton, lo que se esta haciendo no
   -- porque no hay nada que hacer. */
.hn-grupo { font-size: 13.5px; font-weight: 600; letter-spacing: .05em; color: var(--hn-gris2); margin: 6px 0 11px; }
.hn-grupo.hn-sep { margin-top: 22px; }
.hn-item, .hn-espera {
  display: flex; gap: 13px; align-items: center; border-radius: 16px;
  padding: 11px; width: 100%; text-align: left; margin-bottom: 10px;
}
.hn-item { background: var(--hn-carbon); border: 1px solid var(--hn-borde); color: var(--hn-blanco); }
.hn-espera { background: transparent; border: 1px dashed var(--hn-borde); color: var(--hn-gris2); }
/* El que no salio. Apagado y sin boton: no hay nada que tocar ahi.
   Se distingue por el borde de la izquierda y por el texto en gris, no
   por un color de alarma -- no es una urgencia, es algo que ya paso. */
.hn-item.hn-fallido {
  background: transparent; border-color: var(--hn-borde);
  border-left: 3px solid var(--hn-man); color: var(--hn-gris2);
}
.hn-fallido h4 { color: var(--hn-gris); }
.hn-fallido .hn-tapa { background: transparent; border: 1px solid var(--hn-borde); }
.hn-tapa {
  width: 44px; height: 58px; border-radius: 9px; background: var(--hn-carbon2);
  flex: 0 0 44px; display: grid; place-items: center; color: var(--hn-gris2);
}
.hn-espera .hn-tapa { background: transparent; border: 1px dashed var(--hn-borde); }
.hn-it { flex: 1; min-width: 0; }
.hn-it h4 {
  font-size: 16px; font-weight: 500; line-height: 1.3; margin: 0 0 4px;
  /* EL TITULO OCUPA LO QUE LE QUEDA Y CORTA CON PUNTOS SUSPENSIVOS.
     Sin esto se parte en una palabra por renglon apenas el boton de al
     lado crece: la columna se queda sin ancho y el texto busca donde
     entrar. `min-width: 0` en `.hn-it` deja que la columna se encoja;
     esto decide que pasa cuando ya no entra. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hn-it p {
  font-size: 13.5px; color: var(--hn-gris2); margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hn-espera .hn-it h4 { font-size: 15.5px; color: var(--hn-gris); }
.hn-reloj { margin-left: auto; font-size: 13px; color: var(--hn-gris2); display: flex; align-items: center; gap: 5px; }
.hn-reloj i { width: 5px; height: 5px; border-radius: 50%; background: var(--hn-gris2); animation: hn-latir 1.4s ease-in-out infinite; }
@keyframes hn-latir { 0%, 100% { opacity: .3 } 50% { opacity: 1 } }
/* EL BOTON DE LA FILA ES CHICO, Y SE QUEDA CHICO.
   -----------------------------------------------
   Es lo unico de la home nueva que NO subio dos puntos con el resto: acá
   el tamaño no es una preferencia de lectura, es cuanto espacio le queda
   al titulo. Subido, se comia la columna del medio y el titulo se partia
   en una palabra por renglon.

   `flex: 0 0 auto` para que no crezca ni se encoja, y `margin-left: auto`
   para que quede pegado a la derecha con el titulo ocupando el resto. */
.hn-accion {
  margin-left: auto;
  /* LAS TRES QUE HAY QUE DECLARAR, Y `width` ES LA QUE FALTABA.
     La regla general `button, .btn` trae `width: 100%`, y una clase gana
     SOLO en lo que declara. Con `flex: 0 0 auto` encima era peor todavia:
     el ancho base sale de `width` --o sea 100%-- y `flex-shrink: 0` le
     prohibe encogerse. El boton ocupaba la fila entera y tapaba el
     titulo; en PUBLICADOS, que no tiene boton, el titulo se leia bien.
     Ese contraste era la pista. */
  width: auto;
  min-height: 0;
  margin-top: 0;
  flex: 0 0 auto;
  border: none; font-family: inherit; font-size: 12.5px; font-weight: 600;
  padding: 7px 11px; border-radius: 9px; cursor: pointer; white-space: nowrap;
  background: var(--hn-blanco); color: var(--hn-negro);
}
.hn-pill { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 100px; background: #22261F; color: #9BB58A; white-space: nowrap; }
.hn-opt {
  width: 100%; background: var(--hn-carbon); border: 1px solid var(--hn-borde);
  border-radius: 13px; padding: 14px; font-family: inherit; font-size: 16.5px;
  color: var(--hn-blanco); text-align: left; cursor: pointer; margin-bottom: 9px;
}
.hn-opt.on { border-color: var(--hn-auto-b); background: var(--hn-auto-t); color: var(--hn-auto); }

/* El cierre semanal: un paso por pantalla. */
.hn-pasos { display: flex; gap: 6px; margin: 0 0 20px; }
.hn-pasos i { flex: 1; height: 3px; border-radius: 2px; background: #262926; }
.hn-pasos i.ok { background: var(--hn-aqui); }
.hn-pasos i.on { background: var(--hn-blanco); }
.hn-fila-red {
  display: flex; align-items: center; gap: 11px; background: var(--hn-carbon);
  border: 1px solid var(--hn-borde); border-radius: 13px; padding: 10px 12px; margin-bottom: 9px;
}
.hn-rico {
  width: 32px; height: 32px; border-radius: 10px; background: var(--hn-carbon2);
  display: grid; place-items: center; flex: 0 0 32px;
}
.hn-rico.ig { color: #E1719B; }
.hn-rico.tk { color: #5FD3D8; }
.hn-rico.fb { color: #7EA6E0; }
.hn-rnom { flex: 1; font-size: 15.5px; font-weight: 500; min-width: 0; }
.hn-rnom small { display: block; font-size: 13px; font-weight: 400; color: var(--hn-gris2); margin-top: 2px; }
.hn-num-red {
  width: 80px; flex: 0 0 80px; font-size: 21px; font-weight: 500; text-align: right;
  background: none; border: none; border-bottom: 1px solid var(--hn-borde);
  color: var(--hn-blanco); padding: 3px 4px; font-family: inherit;
}
.hn-num-red:focus { outline: none; border-bottom-color: var(--hn-aqui); }
.hn-num-red::placeholder { color: #3A3E3A; }
.hn-vid {
  display: flex; gap: 12px; align-items: center; background: var(--hn-carbon);
  border: 1px solid var(--hn-borde); border-radius: 14px; padding: 11px; margin-bottom: 16px;
}
.hn-tapa-g {
  width: 40px; height: 52px; border-radius: 8px; background: var(--hn-carbon2);
  flex: 0 0 40px; display: grid; place-items: center; color: var(--hn-gris2);
}
.hn-vid h4 { font-size: 16px; font-weight: 500; margin: 0 0 3px; }
.hn-vid p { font-size: 13.5px; color: var(--hn-gris2); margin: 0; }
.hn-cerrado { text-align: center; padding: 34px 0 10px; }
.hn-tic-g {
  width: 64px; height: 64px; border-radius: 50%; background: rgba(126, 224, 160,.13);
  border: 1px solid rgba(126, 224, 160,.3); display: grid; place-items: center;
  color: var(--hn-aqui); margin: 0 auto 18px;
}
.hn-cerrado h3 { font-size: 23px; font-weight: 500; margin-bottom: 8px; }
.hn-cerrado p { font-size: 15.5px; color: var(--hn-gris2); line-height: 1.55; }

/* Procesando. */
.hn-proc { text-align: center; padding: 56px 0 20px; }
.hn-aro {
  width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--hn-borde);
  border-top-color: var(--hn-auto); margin: 0 auto 20px; display: block;
  animation: hn-girar 1s linear infinite;
}
@keyframes hn-girar { to { transform: rotate(360deg) } }
.hn-proc h3 { font-size: 22px; font-weight: 500; margin-bottom: 8px; }
.hn-proc p { font-size: 15.5px; color: var(--hn-gris2); line-height: 1.55; }

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

/* EL SELECTOR DE FORMATO — un renglon arriba de la tarjeta.
   -------------------------------------------------------
   ES PARA PROBAR y lo ve una sola persona: vive adentro de `.hn`, asi que
   la bandera de la home nueva ya es su bandera. Por eso puede tomar las
   variables `--hn-*` -- esta adentro del bloque que las define, que es
   justo lo que el prompter no podia hacer.

   Chico y en una fila que se desplaza: son cinco nombres y no cinco
   decisiones. El que esta puesto se marca en turquesa; tocarlo de nuevo
   lo suelta y vuelve el guion del dia. */
/* ES UNA HERRAMIENTA DE PRUEBA Y TIENE QUE VERSE COMO TAL.
   No es una pantalla del producto: es un banco de trabajo para mirar los
   cinco formatos. Si se viera como el resto, en un mes alguien lo
   confunde con una funcion y lo defiende.

   Lo dicen tres cosas juntas: el borde punteado --que en esta app ya
   significa "todavia no es definitivo", como la marca del personal y la
   fila de un video en proceso--, el rotulo, y el amarillo del criterio,
   que es el color de salirse del camino automatico. */
.hn-probar {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px dashed var(--hn-man-b);
  border-radius: 12px;
  padding: 8px 9px;
  margin: 0 0 12px;
  background: var(--hn-man-t);
}
.hn-probar-rotulo {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--hn-man);
  padding-left: 3px;
}

.hn-formatos {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0 0 10px;
  margin: 0 0 4px;
  scrollbar-width: none;
}
.hn-formatos::-webkit-scrollbar { display: none; }

/* ANCHO, ALTO Y MARGEN, DECLARADOS A MANO. No es de más.
   La regla general de la app --`button, .btn`-- trae `width: 100%`,
   `min-height: var(--alto-boton)` y `margin-top: 12px`. Una clase gana en
   especificidad SOLO en lo que declara: lo que no diga se lo lleva la
   regla de abajo. Sin estas tres líneas cada chip ocupaba el ancho
   entero, y el renglón de cinco formatos se veía como cinco botones
   enormes de una palabra. */
.hn-fbtn {
  flex: 0 0 auto;
  width: auto;
  min-height: 0;
  margin-top: 0;
  background: var(--hn-carbon);
  border: 1px solid var(--hn-borde);
  border-radius: 100px;
  padding: 7px 13px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--hn-gris);
  cursor: pointer;
  white-space: nowrap;
}
.hn-fbtn:hover { border-color: #3D423D; color: var(--hn-blanco); }
.hn-fbtn.on {
  background: var(--hn-auto-t);
  border-color: var(--hn-auto-b);
  color: var(--hn-auto);
}
.hn-fbtn:focus-visible { outline: 2px solid var(--hn-auto); outline-offset: 2px; }

/* Cuando no hay ninguno de ese formato. No se muestra un guion de otro:
   se dice cual falta y cual hay. */
.hn-sin-formato .hn-fsub { color: var(--hn-man); }

/* ==================================================================
   ACA VIVIA EL TELEPROMPTER CON EL ESTILO DE LA HOME NUEVA
   ==================================================================

   Se fue el 03/09/2026, el mismo dia que llego. Eran 156 lineas que
   repintaban el visor, los controles, el punto rojo y el parrafo que
   sigue, colgadas de `.pr-nueva` -- la clase que recibia el unico agente
   con la bandera de la home nueva.

   POR QUE SE FUE. Usaban las variables `--hn-*`, y esas estan definidas
   adentro de `.hn` A PROPOSITO: el bloque de la home lo dice arriba, con
   todas las letras. El prompter NO esta adentro de `.hn` -- su contenedor
   es `.pr-pantalla` -- asi que ahi esas variables no existen.

   Y UNA VARIABLE QUE NO EXISTE NO DEJA GANAR A LA REGLA ANTERIOR: anula
   la declaracion entera, y `background` cae en `transparent`. El boton de
   grabar quedaba transparente con letra casi negra sobre el fondo negro
   del prompter. Estaba, ocupaba su lugar y se podia tocar: era invisible.

   LE PASABA A UNA SOLA PERSONA. Los otros diez agentes veian el
   teleprompter de siempre, perfecto, y por eso costo encontrarlo: no
   habia con que comparar hasta que se comparo justamente eso.

   NINGUNA PRUEBA LO IBA A VER. Las pruebas leen el texto de los archivos:
   el CSS estaba escrito, la clase se agregaba, todo "existia". Lo que
   fallaba era el ALCANCE de una variable, que no se lee -- se resuelve.

   SI ALGUN DIA VUELVE, la condicion es una sola: las variables tienen que
   existir donde se usan. O el prompter se dibuja adentro de `.hn`, o el
   estilo trae sus propios colores y no toma prestados los de otro bloque.
   ================================================================== */

/* LA TARJETA DEL GUION, CENTRADA — 03/09/2026.
   ---------------------------------------------
   Todo su contenido va al centro: las dos etiquetas, la línea de qué hay
   que hacer y el título. La tarjeta es lo único que se mira antes de
   tocar Grabar, y centrada se lee como una sola cosa en vez de tres
   renglones alineados contra el borde.

   EL ICONO PASA ARRIBA. Alineado a la izquierda de un bloque centrado
   quedaba descolgado: la fila entera se apila y el icono encabeza. */
.hn-hoy .hn-formato {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.hn-hoy .hn-fcol { text-align: center; }
.hn-hoy .hn-fnom { justify-content: center; flex-wrap: wrap; }
.hn-hoy h2 { text-align: center; }

/* La línea de ayuda deja de recortarse: centrada y sin el `nowrap` del
   nombre, puede usar dos renglones si el formato tiene una frase larga. */
.hn-hoy .hn-fsub { white-space: normal; }

/* El corte de la barra de probar: separa los formatos de las dos caras
   de la home. Son dos cosas distintas en el mismo renglón. */
.hn-probar-corte {
  flex: 0 0 auto;
  width: 1px;
  align-self: stretch;
  margin: 2px 3px;
  background: var(--hn-man-b);
}

/* Los accesos a las pantallas de armado. Se distinguen de los chips de
   formato porque hacen otra cosa: aquellos piden un guion del pozo,
   estos abren una pantalla donde se escribe la pieza. */
.hn-fbtn-armar {
  color: var(--hn-man);
  border-style: dashed;
}
.hn-fbtn-armar:hover { color: var(--hn-blanco); border-color: var(--hn-man); }

/* La caja del video del borrador, en la home nueva. Es `.bor-video` --la
   que ya sabe contener un <video>-- con el redondeo y el borde de esta
   home. NO lleva `.hn-video`: esa tiene `aspect-ratio: 9/13` y recorta
   un video que puede venir en cualquier proporción. */
.hn .bor-video.hn-bor-video {
  border-radius: 18px;
  border: 1px solid var(--hn-borde);
  margin: 0 0 16px;
}
.hn .bor-video.hn-bor-video .hint {
  padding: 22px 16px;
  color: var(--hn-gris2);
  text-align: center;
}


/* LAS VOCES DEL APARATO. Una fila por voz: quien es a la izquierda y los
   dos botones a la derecha. */
.voz-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.voz-quien { flex: 1 1 auto; min-width: 0; }
.voz-quien small { display: block; margin-top: 2px; }

.voz-botones { display: flex; flex: 0 0 auto; gap: 8px; }

/* EL ANCHO, QUE ES LA TRAMPA DE SIEMPRE. `button` declara `width: 100%`,
   asi que sin esto los dos botones se llevan el renglon y el nombre de la
   voz queda en una palabra por linea. Ya se pago en Mis videos y en la
   revision de ping pong. */
.voz-botones button {
  width: auto;
  padding: 7px 12px;
  font-size: .85rem;
}

/* La que esta usando ahora, marcada sin gritar. */
.voz-usa { border-color: var(--accent-2); }

/* EL PLIEGUE DE PING PONG.
   ==================================================================

       la explicacion que das de como funciona el ping pong resumila al
       maximo y mostra de manera contraida o expandida explicacion y
       edicion de preguntas             -- Gustavo, 07/09/2026

   Reusa `.ini-pliegue`, que es el pliegue de una linea que ya usa el
   inicio. Lo unico propio es el cuerpo: adentro van tarjetas con campos
   editables, y `.ini-cuerpo` esta pensado para texto suelto. Sin esto las
   tarjetas quedan pegadas al borde del pliegue. */
.eoa-pliegue { border-top: 1px solid var(--linea, #3a322c); margin: 0; }
.eoa-pliegue summary { font-size: 15px; color: var(--text); }
.eoa-pliegue > .ini-cuerpo { padding: 0 0 4px; }
/* Las tarjetas traen su propio margen; el cuerpo no le suma otro. */
.eoa-pliegue > .ini-cuerpo > .card:first-child { margin-top: 0; }
/* Los parrafos del instructivo, ya adentro del pliegue, se leen como
   lista: uno abajo del otro y sin el margen grande de un parrafo suelto. */
.eoa-pliegue > .ini-cuerpo > p.hint { margin: 0 0 10px; }
.eoa-pliegue > .ini-cuerpo > p.hint:last-child { margin-bottom: 0; }

/* EL RITMO, EN AJUSTES.
   Tres opciones en fila y no un campo con un numero: 'uno por dia' se
   entiende y '1.0 dias' hay que traducirlo. La elegida se marca con el
   turquesa de lo automatico, que es lo que esto es -- el sistema
   repartiendo solo. */
.ritmo-opts { display: flex; gap: 8px; margin: 10px 0 12px; flex-wrap: wrap; }
.ritmo-opt { flex: 1 1 30%; min-width: 116px; }
/* La elegida se llena; las otras dos quedan de contorno. Es el mismo
   par que la app ya usa para «Sí / Todavía no»: relleno es la que
   está puesta, contorno es la que se puede tocar. Con las tres
   rellenas se leen como tres acciones y no como una elección. */
.ritmo-opt.activa {
  background: var(--accent); color: #06232B; border-color: var(--accent);
  font-weight: 600;
}

/* LO QUE YA SALIO, Y LO QUE SALE DESPUES.
   La de arriba no tiene boton --no hay nada que hacer con un video que
   ya salio-- y la de abajo tampoco: es para mirar que viene, no para
   apurarlo. */
.hn-sigue { opacity: .92; }
.hn-donde { margin: 8px 0 0; font-size: 13.5px; color: var(--hn-gris2); }
.hn-donde a { color: var(--hn-auto); text-decoration: none; }
.hn-donde a:hover { text-decoration: underline; }

/* LOS NUMEROS. Tres por red y no siete: en la home una planilla no se
   lee. El resto esta en la pantalla de la pieza. */
.hn-metricas { margin-top: 12px; }
.hn-met {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  padding: 9px 0; border-top: 1px solid var(--hn-borde);
}
.hn-met-red {
  flex: 1 1 100%; font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--hn-gris2);
}
.hn-met-n { font-size: 12.5px; color: var(--hn-gris2); }
.hn-met-n b {
  display: block; font-size: 19px; font-weight: 600; line-height: 1.15;
  color: var(--hn-blanco);
}

/* LA PREGUNTA ANTES DE VACIAR LA COLA. Amarilla y no turquesa: no es
   un paso del camino, es una decision que no se puede deshacer. */
.hn-tanda-ask { border-color: var(--hn-man-b); margin-top: 12px; }
.hn-tanda-ask h2 { text-align: center; }

/* LO QUE YA SALIO, EN UN RENGLON.
   Es informacion, no accion: no puede ocupar media pantalla ni
   competir con lo que hay que hacer hoy. Se toca y se abre ahi mismo,
   sin salir de la home. */
.hn-salio { margin-bottom: 10px; }
.hn-salio > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  gap: 8px; padding: 9px 12px; border-radius: 12px;
  background: var(--hn-carbon); border: 1px solid var(--hn-borde);
  font-size: 13px; color: var(--hn-gris2);
}
.hn-salio > summary::-webkit-details-marker { display: none; }
.hn-tic-ok {
  flex: 0 0 auto; display: grid; place-items: center; color: var(--hn-auto);
}
.hn-salio-t {
  flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap;
  text-overflow: ellipsis; color: var(--hn-gris);
}
.hn-salio-t b { color: var(--hn-auto); font-weight: 600; }

/* Las siglas: dos letras por red. Con titulo, vistas y cuatro redes en
   el mismo renglon, «Instagram» no entra. */
.hn-salio-redes { flex: 0 0 auto; display: flex; gap: 4px; }
.hn-sig {
  font-style: normal; font-size: 10.5px; font-weight: 600;
  letter-spacing: .02em; padding: 2px 5px; border-radius: 5px;
  background: var(--hn-carbon2); border: 1px solid var(--hn-borde);
  color: var(--hn-auto);
}
/* MANDADO NO ES PUBLICADO. Salio de la app y la red no confirmo:
   pintarla igual que las confirmadas seria afirmar de una lo que solo
   se sabe de la otra. */
.hn-sig.hn-sig-duda { color: var(--hn-gris2); border-style: dashed; }

.hn-salio-vistas {
  flex: 0 0 auto; font-size: 12.5px; color: var(--hn-gris2);
  font-variant-numeric: tabular-nums;
}
.hn-salio-vistas:empty { display: none; }

.hn-salio-mas { padding: 10px 12px 2px; }
/* LAS REDES EN FILA Y NO UNA DEBAJO DE OTRA.
   Cuatro renglones para cuatro palabras era media pantalla; en fila
   entran en una y se sigue tocando cada una para ir a ver el posteo. */
.hn-salio-fila {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 2px;
}
.hn-red {
  font-size: 12.5px; padding: 4px 10px; border-radius: 999px;
  background: var(--hn-carbon2); border: 1px solid var(--hn-borde);
  color: var(--hn-auto); text-decoration: none;
}
a.hn-red:hover { border-color: var(--hn-auto-b); }
/* MANDADO NO ES PUBLICADO: la red no confirmó. */
.hn-red.hn-red-duda { color: var(--hn-gris2); border-style: dashed; }

/* EL HOOK, EN NEGRITA, EN EL INFORME DE COMO LE FUE.
   Ahi el resto es contexto --quien lo mando, en que redes, cuantas
   vistas-- y el titulo es DE QUE video se esta hablando: es lo unico
   que el agente reconoce de un vistazo.

   Clase propia y no `.hn-hook`, que ya existe y es el primer parrafo
   del guion en la pantalla de leerlo: dos cosas distintas con el mismo
   nombre se pisan el dia que una cambie. */
.hn-elhook { color: var(--hn-blanco); font-weight: 600; }

/* LA LINEA DEL MES, EN LA HOME.
   UNA sola y no una por video: con un video por dia, en una semana la
   parte de arriba de la home era una lista de historial. Dos datos, y
   una flecha que lleva a donde esta el resto. */
.hn-linea-res {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin-top: 0; min-height: 0;
  padding: 9px 12px; margin-bottom: 10px; border-radius: 12px;
  background: var(--hn-carbon); border: 1px solid var(--hn-borde);
  font-size: 13px; color: var(--hn-gris2); text-align: left;
}
.hn-linea-t { flex: 1 1 auto; min-width: 0; }
.hn-linea-t b { color: var(--hn-blanco); font-weight: 600; }

/* RESULTADOS: la pantalla del historial.
   Lo que ya salio es para mirar cuando se quiere mirar, no todos los
   dias arriba de todo. */
.hn-res-total { font-size: 15px; color: var(--hn-gris2); margin: 2px 0 14px; }
.hn-res-total b { color: var(--hn-blanco); font-weight: 600; }

.hn-periodos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
/* `width: 100%` y `margin-top` vienen del boton global de la app: sin
   pisarlos, los cuatro periodos salen uno debajo del otro y ocupan
   media pantalla para elegir entre cuatro palabras. */
.hn-per {
  width: auto; margin-top: 0; min-height: 0;
  font-size: 12.5px; padding: 6px 12px; border-radius: 999px;
  background: transparent; border: 1px solid var(--hn-borde);
  color: var(--hn-gris2); font-weight: 500;
}
.hn-per.activa {
  background: var(--hn-auto); border-color: var(--hn-auto); color: #04211E;
  font-weight: 600;
}
/* ARRIBA LOS DOS. Sin `flex-start` los rotulos quedaban alineados
   por abajo y el `Hasta` arrancaba doce pixeles mas abajo que el
   `Desde`, como dos cosas distintas en vez de un rango. */
.hn-rango {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  margin: -4px 0 14px;
}
/* EN COLUMNA, LOS DOS. Con el texto y el campo en la misma linea,
   cada rotulo acomodaba su campo donde le entraba y el `Hasta`
   quedaba un renglon mas abajo que el `Desde`. */
.hn-rango label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* MEDIDO en Chrome: el segundo rotulo tenia doce pixeles de margen
     arriba --se los pone una regla general de los rotulos-- y el
     `Hasta` arrancaba mas abajo que el `Desde` aunque los dos
     estuvieran alineados arriba. */
  margin: 0;
  font-size: 12.5px;
  color: var(--hn-gris2);
}
.hn-rango input {
  display: block; margin-top: 4px; padding: 7px 9px; border-radius: 9px;
  background: var(--hn-carbon2); border: 1px solid var(--hn-borde);
  color: var(--hn-blanco); font-size: 13px;
}

.hn-res-fila {
  background: var(--hn-carbon); border: 1px solid var(--hn-borde);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 9px;
}
.hn-res-fila h4 {
  margin: 3px 0 0; font-size: 15px; font-weight: 500; line-height: 1.35;
  color: var(--hn-blanco);
}
.hn-res-fila .hn-sub { margin: 0; font-size: 12px; }
.hn-res-fila .hn-fnom { margin-top: 7px; }
.hn-res-pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 10px;
}
.hn-res-vistas {
  font-size: 12.5px; color: var(--hn-gris2);
  font-variant-numeric: tabular-nums;
}

/* LA FILA SE TOCA Y SE ABRE AHI MISMO.

       agrega una función que cuando se toque se expandan y muestre el
       detalle por red
                                        -- Gustavo, 09/09/2026

   La fila es un `<details>` y la tarjeta sigue siendo la misma caja: el
   fondo y el borde quedan en el contenedor, asi que lo que se abre cae
   ADENTRO de la tarjeta y no debajo. El `summary` no lleva fondo propio
   por eso mismo.

   SIN EL TRIANGULITO DEL NAVEGADOR --se dibuja distinto en cada uno-- y
   con la flecha que ya usa el resto de la app, que gira al abrir. */
details.hn-res-fila > summary {
  list-style: none;
  cursor: pointer;
}
details.hn-res-fila > summary::-webkit-details-marker { display: none; }

.hn-res-ch {
  flex: 0 0 auto; opacity: .55; font-size: 15px; line-height: 1;
  transition: transform .15s ease;
}
details.hn-res-fila[open] > summary .hn-res-ch { transform: rotate(90deg); }

/* EL CUERPO YA ESTA ADENTRO DE LA TARJETA, que trae su propio relleno:
   el de `.hn-salio-mas` --pensado para el renglon suelto de la home--
   lo duplicaria. Se le saca a los costados y se le deja el de arriba,
   que es lo que lo separa del renglon. */
.hn-res-fila .hn-salio-mas { padding: 2px 0 0; }
.hn-res-fila .hn-metricas { margin-top: 6px; }

/* LA FRASE DEL CIERRE, EN EL PANEL DE REVISION DEL PING PONG.

       fíjate que en esta instancia no está el ojo para ver la frase del
       cta. prefiero que saques la opción de grabar cada parte de nuevo
       para solucionar esto              -- Gustavo, 09/09/2026

   El ojo muestra el párrafo QUE SIGUE en el tren del teleprompter, y en
   esta pantalla no hay tren: las cinco rondas ya salieron y el cierre es
   otro texto que todavía no se cargó. Así que la frase se escribe acá,
   que es lo que hacía falta: se lee, se acomoda, y recién después aprieta
   «Grabar el cierre».

   EN ORO Y NO EN BLANCO. Arriba está lo que ya salió --gris, informativo--
   y esto es lo único que queda por hacer. El mismo criterio que el botón
   verde de abajo: es una invitación, no un registro. */
.eoa-cierre {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(212, 163, 44, .45);
  background: rgba(212, 163, 44, .08);
}

.eoa-cierre-tag {
  display: block;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(212, 163, 44, .95);
  margin-bottom: 6px;
}

.eoa-cierre p {
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
  color: #EDE4D2;
}

/* DESCARTAR LO QUE QUEDO A MEDIO CAMINO.

       ¿Cómo hago para borrar este video en esta instancia?
                                        -- Gustavo, 09/09/2026

   CHICA Y AL COSTADO, no como botón. Lo que hay que hacer con esa pieza
   es seguirla --el verde es esa-- y descartar es la salida. Una salida
   del mismo tamaño que el camino se toca por error.

   Y GRIS HASTA QUE SE LA TOCA: en rojo permanente, una lista de cinco
   videos son cinco alarmas por algo que casi nunca se hace. */
.hn-descartar {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  /* Y EL MINIMO, QUE ES LA QUE FALTABA. `height` no gana sobre el
     `min-height: var(--alto-boton)` de la regla general de los botones:
     la cruz salia de 30 de ancho por 48 de alto. En «videos sin
     terminar» no se veia porque el flex la encogia; en «sin confirmar»,
     que es columna, salio estirada. */
  min-height: 0;
  padding: 0;
  margin-top: 0;
  margin-left: 4px;
  border-radius: 9px;
  border: 1px solid var(--hn-borde);
  background: transparent;
  color: var(--hn-gris2);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.hn-descartar:hover:not(:disabled) {
  color: #ff8a8a;
  border-color: rgba(255, 138, 138, .5);
}

.hn-descartar:disabled { opacity: .4; cursor: default; }

/* MIENTRAS SUBE, EL GUION SE VA.
   ------------------------------
   La toma ya está hecha: no hay nada que leer. La banda seguía puesta y
   con la tarjeta del mensaje baja `--pr-bajo-tarjeta` SIN achicarse
   --sigue midiendo 42vh-- así que su borde de abajo cae adentro de
   `.pr-subiendo`, que vive a 26vh del piso. Dos cajas encimadas.
   Vuelve sola: `_prPantalla()` redibuja la pantalla de cero. */
.pr-pantalla.pr-subiendo-activo .pr-banda,
.pr-pantalla.pr-subiendo-activo .pr-tarjeta,
.pr-pantalla.pr-subiendo-activo .pr-guia {
  display: none;
}

/* LOS TRES CONTROLES DEL AUDIO — PAUSAR, CONTINUAR, TERMINAR.
   ----------------------------------------------------------------------
       poné algo que sea más claro: pausa, continuar, parar
       en todo lo que sea grabación de audio  -- Gustavo, 09/09/2026

   Antes había UN círculo que hacía todo: tocar arrancaba, tocar de nuevo
   terminaba, y lo único que lo decía era un renglón chico abajo. Sin
   pausa: si sonaba el teléfono en la mitad, o se terminaba y se perdía lo
   dicho, o se seguía grabando el ruido.

   Con palabras y no con símbolos: un ícono solo hay que descifrarlo, y
   esto se toca hablando, sin mirar fijo. */
.hn-audio-ctrl {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 14px 0 2px;
}

.hn-ac {
  flex: 1 1 0;
  max-width: 168px;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--hn-borde);
  background: var(--hn-carbon);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: #E7E8E4;
  cursor: pointer;
}

.hn-ac:active { transform: scale(.98); }

/* CONTINUAR SE VE COMO SEGUIR, no como un botón más: es el que se busca
   apurado cuando se corta la llamada y hay que retomar. */
.hn-ac.hn-ac-seguir {
  border-color: var(--hn-auto-b, rgba(87, 221, 255,.42));
  color: var(--hn-auto, #57DDFF);
}

/* TERMINAR NO SE VE COMO PAUSAR. Es el único de los tres que no se
   deshace: apretarlo de más manda el audio a transcribir. */
.hn-ac.hn-ac-parar {
  border-color: rgba(217, 72, 59, .45);
  color: #E8776B;
}

/* GRABANDO, EL CÍRCULO ES UN INDICADOR Y NO UN BOTÓN. Dos formas de parar
   la misma grabación, una de ellas sin nombre, es lo que estaba confuso. */
.hn-rec.hn-sin-toque button { pointer-events: none; }

/* EN PAUSA EL HALO SE QUEDA QUIETO. Un círculo latiendo dice "te estoy
   escuchando", y en pausa eso es mentira. */
.hn-rec.hn-quieto .hn-halo { animation: none; opacity: .3; }
.hn-rec.hn-quieto button { background: #8C3B33; }

/* CONTESTAR ESCRIBIENDO, AL LADO DE CONTESTAR HABLANDO.
   ----------------------------------------------------------------------
       Contesto grabando o escribiendo, indistinto, en las dos clases de
       pregunta.                         -- Gustavo, 10/09/2026

   El audio se transcribe antes de salir del teléfono, así que del otro
   lado llega texto en los dos casos. Y hay preguntas que se contestan con
   un sí o un no —las propuestas del guion— donde abrir el micrófono para
   decir una palabra es de más. */
.hn-o-escribir {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 18px 0 4px;
}

.hn-o-escribir .hn-campo { min-height: 62px; }

/* SECUNDARIO Y NO PRINCIPAL: el camino grande sigue siendo hablar. Esto
   está para el que no puede o no quiere, y para el sí/no. */
.hn-o-escribir .hn-secundario { align-self: flex-end; min-width: 128px; }

/* QUÉ LE PREGUNTARON, ESCRITO Y CHICO.
   ----------------------------------------------------------------------
       fijate que en grabación no figura la pregunta en el guion
                                          -- Gustavo, 10/09/2026

   Y no figuraba en ningún lado: `state.preguntaTexto` se usaba para saber
   el formato y para decirlo por el parlante, y no se dibujaba nunca. Con
   la voz fallando, el agente se queda mirando un punto verde sin saber
   qué le preguntaron.

   CHICO Y APAGADO A PROPÓSITO, y fuera de la banda: el tren se lee en voz
   alta y la pregunta la dice la voz. Esto es para SABER, no para LEER —
   por eso el cuerpo es el de un pie de página y no el del guion. */
.pr-la-pregunta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 25vh;
  z-index: 6;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(11, 9, 8, .72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: rgba(255, 255, 255, .72);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
}

/* LA SALIDA DEL PEDIDO DE PUBLICACIÓN.
   ----------------------------------------------------------------------
       debe estar la opción de borrarlo porque no hay salida, me obliga a
       publicar                          -- Gustavo, 10/09/2026

   Las dos opciones eran «sí» y «todavía no», y la segunda posterga y
   vuelve. Un video que se decidió no publicar no tenía forma de salir de
   la lista nunca.

   EN TEXTO Y NO EN BOTÓN: es la salida, no una tercera opción del mismo
   peso. El camino normal sigue siendo contestar. */
.pub-nunca {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--text-dim, #8b949e);
  cursor: pointer;
}

/* TUS GUIONES — donde recuperar lo que se contó.
   ----------------------------------------------------------------------
       no tengo dónde recuperar los guiones en la app
                                          -- Gustavo, 10/09/2026

   Una fila por historia, y el estado adelante: es lo primero que decide si
   vale la pena tocarla. Vienen todas —con guion, esperando respuesta y
   borradores—: esconder las que no tienen guion las convierte en trabajo
   perdido. */
.hn-guiones { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

.hn-guion-fila {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "estado titulo flecha" "estado cuando flecha";
  align-items: center;
  gap: 2px 10px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--hn-borde);
  border-radius: 14px;
  background: var(--hn-carbon);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.hn-guion-fila .hn-eg { grid-area: estado; }
.hn-guion-t {
  grid-area: titulo;
  font-size: 16px; font-weight: 600; color: #E7E8E4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hn-guion-c { grid-area: cuando; font-size: 13px; color: var(--hn-gris2); }
.hn-guion-fila .hn-ch { grid-area: flecha; color: var(--hn-gris2); }

/* EL ESTADO, EN UNA PÍLDORA Y CON COLOR. Listo para grabar es lo que se
   busca; el resto informa sin invitar. */
.hn-eg {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--hn-borde);
  color: var(--hn-gris);
}
.hn-eg-listo { border-color: rgba(87, 221, 255,.42); color: #57DDFF; }
.hn-eg-espera { border-color: rgba(211,166,92,.42); color: #FFDD57; }
.hn-eg-borrador, .hn-eg-contada { opacity: .75; }

/* LA AYUDA — un signo de pregunta en todas las pantallas.
   ----------------------------------------------------------------------
       un lugar dentro de la app donde el agente puede preguntar cómo
       funciona algo, avisar que se rompió algo, o dejar una sugerencia
                                          -- Gustavo, 10/09/2026

   El botón va en la cabecera, al lado del engranaje y antes que él: la
   ayuda se busca apurado, la configuración no. */
.icon-ayuda {
  /* SIN COLOR PROPIO SALE AZUL DE ENLACE: es un `<a>`, y el navegador le
     pone su color por omision. El engranaje no se notaba porque es un
     emoji, que trae el suyo. */
  color: var(--text);
  font-weight: 700;
  font-size: 21px;
  line-height: 1;
}

  /* ==================================================================
   LA PANTALLA DE AYUDA

   Sigue `ayuda-soporte-v2.html`, que manda sobre lo visual. Lo que cambia
   respecto de antes no es el funcionamiento --el chat, el envio, el audio
   y la derivacion quedan como estaban-- sino que se pueda leer:

       La ayuda funciona pero esta toda en el mismo gris: los atajos
       parecen cuatro cajas iguales, la respuesta no se distingue del
       fondo, y no hay jerarquia.          -- AYUDA_REDISENO.md

   EL LAVANDA ES DE ESTA PANTALLA Y DE NINGUNA OTRA. La gramatica de color
   de la app --celeste automatico, amarillo manual-- vale para el camino
   del video, y la ayuda no es parte de ese camino: es donde se viene
   cuando el camino no se entiende. Por eso los tokens viven aca adentro y
   no en `:root`, para que no se filtren a una pantalla que si tiene que
   respetar la gramatica.
   ================================================================== */
.ayuda-pant {
  --ay-lav: #A79BE8;
  --ay-lav-d: #1A1726;
  --ay-lav-b: #2E2846;
  --ay-oro: #E8B04B;
  --ay-tx3: #55555F;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* -- LA CABECERA --------------------------------------------------
   Estaba dibujada como una burbuja gris mas, arriba del hilo: se leia
   como algo que habia dicho alguien. */
.ayuda-top {
  display: flex; align-items: center; gap: 11px;
  padding: 2px 0 14px;
  border-bottom: 1px solid var(--line, #21262d);
}
.ayuda-volver {
  width: 34px; height: 34px; flex-shrink: 0;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid var(--line, #21262d); border-radius: 10px;
  background: none; color: var(--text-dim, #8b949e);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.ayuda-tit { flex: 1; min-width: 0; }
.ayuda-h { font-size: 18px; font-weight: 600; line-height: 1.2; }
/* LOS DOS DATOS QUE IMPORTAN, RESALTADOS. El resto de la frase es relleno
   que se lee una sola vez. */
.ayuda-s {
  margin-top: 3px;
  font-size: 13.5px; line-height: 1.35;
  color: var(--text-dim, #8b949e);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ayuda-s b { font-weight: 600; color: var(--ay-lav); letter-spacing: .02em; }
/* NUEVA CONSULTA, en la cabecera. Estuvo al final del hilo y despues en su
   propia fila arriba; en las dos se leia como una linea mas. */
.ayuda-nuevo {
  width: auto; flex-shrink: 0;
  padding: 7px 10px;
  border: 1px solid var(--line, #21262d); border-radius: 9px;
  background: none; color: var(--text-dim, #8b949e);
  font-family: inherit; font-size: 12.5px; white-space: nowrap;
  cursor: pointer;
}

/* -- EL HILO ------------------------------------------------------ */
.ayuda-hilo {
  display: flex; flex-direction: column;
  gap: 0;
  /* SIN ALTO MINIMO: vacio no ocupa nada. Con `min-height` dejaba una caja
     en blanco entre la cabecera y los atajos, que es la primera pantalla
     que ve el agente. */
  max-height: 62vh;
  overflow-y: auto;
  padding: 18px 2px 2px;
}
/* Y VACIO NO DEJA NI EL AIRE DE ARRIBA. */
.ayuda-hilo:empty { display: none; }

.ayuda-msg {
  max-width: 86%;
  margin-bottom: 14px;
  font-size: 15px; line-height: 1.52;
}
.ayuda-msg.suya {
  padding: 13px 15px;
  background: var(--panel, #131922);
  border: 1px solid var(--line, #21262d);
  border-radius: 15px; border-bottom-left-radius: 5px;
}
/* LA DEL AGENTE, EN LAVANDA Y LLENA: es lo unico que escribio el. */
.ayuda-msg.mia {
  margin-left: auto;
  padding: 11px 14px;
  background: var(--ay-lav); color: #15121F;
  border-radius: 15px; border-bottom-right-radius: 5px;
  font-weight: 500;
}
.ayuda-msg.pensando { opacity: .55; font-style: italic; }
/* LA BURBUJA CON CAPTURA, DEL ANCHO ENTERO. Las otras se cortan al 86%
   porque una pared de texto de borde a borde se lee peor; una captura
   adentro de ese 86% queda como una estampilla. */
.ayuda-msg.con-captura { max-width: 100%; }
.ayuda-txt { white-space: pre-wrap; }

/* -- LOS PASOS, NUMERADOS -----------------------------------------
   Los separa el Cerebro y los numera la app: partirlos de este lado seria
   adivinar donde termina cada uno. */
.ayuda-pasos { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.ayuda-paso { display: flex; gap: 10px; align-items: flex-start; }
.ayuda-pn {
  width: 19px; height: 19px; flex-shrink: 0; margin-top: 2px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: var(--ay-lav-d); border: 1px solid var(--ay-lav-b);
  color: var(--ay-lav); font-size: 10.5px; font-weight: 700;
}
.ayuda-pt { font-size: 14.5px; line-height: 1.45; }

/* -- ESCUCHAR Y CUANTO DURA, ARRIBA DE TODO -----------------------

       Si el agente va a escuchar en vez de leer, tiene que verlo antes
       del texto.                           -- Gustavo, 11/09/2026

   Abajo se encuentra recien cuando ya leiste todo, que es cuando ya no
   hace falta. Va antes de la explicacion, con la linea DEBAJO en vez de
   encima: sigue separando lo que se toca de lo que se lee.

   Y en su propio bloque, no pegado al texto: con `inline-flex` suelto el
   boton ENTRA EN EL RENGLON y se mete adentro de la frase. */
.ayuda-escuchar {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 13px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line, #21262d);
}
.ayuda-play {
  width: auto;
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0; padding: 7px 13px;
  border: 1px solid var(--ay-lav-b); border-radius: 999px;
  background: var(--ay-lav-d); color: var(--ay-lav);
  font-family: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer;
}
/* MIENTRAS SUENA SE VE. Sin esto el boton queda igual sonando que callado,
   y el agente lo vuelve a tocar creyendo que no arranco. */
.ayuda-play.sonando {
  color: var(--hn-auto, #57DDFF);
  border-color: var(--hn-auto-b, rgba(87, 221, 255, .32));
  background: var(--hn-auto-t, rgba(87, 221, 255, .13));
}
.ayuda-dur {
  font-size: 12px; color: var(--ay-tx3);
  font-variant-numeric: tabular-nums;
}

/* -- LA CAPTURA ---------------------------------------------------
   Del ancho de la burbuja, con una franja abajo que dice que se toca: en
   un telefono no hay cursor, asi que el `zoom-in` no lo ve nadie. */
/* LA IMAGEN, SEPARADA DEL TEXTO.

       Entre el texto y la imagen falta una separación: una línea fina o
       más aire. Hoy quedan pegados.        -- Gustavo, 11/09/2026

   La linea la lleva el bloque de afuera y no la captura: la captura ya
   tiene su propio borde alrededor, y dos bordes arriba del mismo elemento
   no se pueden dibujar. */
.ayuda-imagen {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--line, #21262d);
}
.ayuda-captura {
  width: 100%; display: block;
  margin: 0; padding: 0;
  background: var(--panel-2, #191921);
  border: 1px solid var(--line, #21262d); border-radius: 11px;
  overflow: hidden; cursor: zoom-in;
}
.ayuda-captura img { width: 100%; display: block; }
.ayuda-captura-pie {
  display: block;
  padding: 8px 11px;
  border-top: 1px solid var(--line, #21262d);
  font-size: 12px; color: var(--ay-tx3);
  text-align: center;
}

/* -- LA RESPUESTA DE GUSTAVO --------------------------------------
   No es una burbuja: es una barra dorada al costado. Llega horas despues
   y es sobre algo que el Cerebro NO pudo resolver -- si se ve igual que
   las otras, se lee como una respuesta automatica mas y no se contesta. */
.ayuda-deg {
  margin-bottom: 14px; padding-left: 12px;
  border-left: 2px solid var(--ay-oro);
}
.ayuda-deg-q {
  margin-bottom: 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ay-oro);
}
.ayuda-deg-t { font-size: 14.5px; line-height: 1.5; }

/* -- LOS ATAJOS, EN DOS GRUPOS ------------------------------------
   Preguntar y avisar son cosas distintas: una busca una respuesta, la otra
   deja algo anotado. Eran cuatro cajas iguales. */
.ayuda-atajos { display: flex; flex-direction: column; gap: 22px; padding-top: 6px; }
.ayuda-bloque { display: flex; flex-direction: column; gap: 8px; }
.ayuda-bt {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 3px;
  font-size: 12px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ay-tx3);
}
.ayuda-bt::after { content: ""; flex: 1; height: 1px; background: var(--line, #21262d); }
.ayuda-atajo {
  width: 100%;
  display: flex; align-items: center; gap: 11px;
  padding: 13px 14px;
  text-align: left;
  background: var(--panel, #131922);
  border: 1px solid var(--line, #21262d); border-radius: 13px;
  font-family: inherit; font-size: 14.5px; color: var(--text, #c9d1d9);
  cursor: pointer;
}
.ayuda-atajo:hover { border-color: var(--ay-lav-b); }
.ayuda-ic {
  width: 26px; height: 26px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 8px; font-size: 13px;
}
/* PREGUNTAR es lavanda; AVISAR se parte en dos porque no es lo mismo que
   algo se rompa a que se te ocurra algo. */
.ayuda-ic.preguntar { background: var(--ay-lav-d); color: var(--ay-lav); }
.ayuda-ic.roto { background: #1B2A33; color: #6FB5CC; }
.ayuda-ic.idea { background: #2A2419; color: var(--ay-oro); }
/* LA FLECHA. Es `HN_SVG.adelante`, el mismo chevron que el resto de la
   app, con el grosor que pide el mockup: `hnIcono` lo dibuja en 1.7 para
   todos y aca va mas marcado, que es lo unico que lo distinguia.

   Era un «›» de texto, que lo dibuja la tipografia: mas fino y mas chico
   que los demas iconos de la misma fila. */
.ayuda-fl {
  margin-left: auto; flex-shrink: 0;
  display: grid; place-items: center;
  color: var(--ay-tx3);
}
.ayuda-fl svg { stroke-width: 2.2; }
/* LAS OPCIONES de "para este PREGUNTA o en general": los mismos botones,
   pegados abajo de la pregunta que las trajo. */
.ayuda-opciones { display: flex; flex-direction: column; gap: 8px; margin: -4px 0 18px; }

/* -- ABAJO: ESCRIBIR O HABLAR ------------------------------------- */
.ayuda-barra {
  display: flex; gap: 8px; align-items: flex-end;
  padding: 11px 0 0;
  border-top: 1px solid var(--line, #21262d);
}
.ayuda-campo {
  flex: 1; min-height: 42px;
  padding: 11px 13px;
  background: var(--panel, #131922);
  border: 1px solid var(--line, #21262d); border-radius: 13px;
  color: var(--text, #c9d1d9); font-family: inherit; font-size: 15px;
  resize: none;
}
.ayuda-mic, .ayuda-enviar {
  width: 42px; height: 42px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 12px;
  border: 1px solid var(--line, #21262d);
  background: var(--panel, #131922); color: var(--text-dim, #8b949e);
  cursor: pointer;
}
/* EL MICROFONO GRABANDO. Rojo y latiendo: la misma senal que el circulo de
   «Contamelo». Sin esto el boton se veia igual apagado que prendido. */
.ayuda-mic.grabando {
  background: rgba(224, 79, 79, .18);
  border-color: rgba(224, 79, 79, .55);
  color: #E04F4F;
  animation: ayuda-latido 1.1s ease-in-out infinite;
}
@keyframes ayuda-latido { 0%, 100% { opacity: 1 } 50% { opacity: .55 } }
/* EL RELOJ Y QUE HACER, al lado. «toca el microfono para terminar» va
   escrito y no supuesto: es un boton que hace dos cosas. */
.ayuda-grabando {
  margin: 0;
  font-size: 15px; text-align: center;
  color: var(--hn-gris, #8B9099);
}
.ayuda-enviar {
  border: none;
  background: var(--accent); color: #08201F;
  font-size: 19px;
}

.ayuda-enviar {
  border: none;
  background: var(--accent);
  color: #08201F;
  font-size: 19px;
}

/* ==================================================================
   LA HOME REDISENADA

   Sigue `home-final-v1.html`, que manda sobre lo visual.

       La home tiene siete cosas apiladas en una pantalla que tenia que
       decir una. La fila de formatos esta arriba de la tarjeta y le da a
       «elegir formato» mas peso del que tiene: el que entra tiene que
       grabar lo que le toco.             -- HOME_REDISENO.md

   EL LAVANDA ES EL MISMO QUE EL DE LA AYUDA, y vive igual que alla:
   ENCERRADO EN LA PANTALLA, nunca en el selector global. La gramatica de
   color de la app --celeste automatico, amarillo manual-- vale para el
   camino del video; estos tokens son de la piel de estas dos pantallas, y
   sueltos le cambiarian pantallas que hoy andan a los otros agentes.
   ================================================================== */
.hn-redisenada {
  --hn-lav: #A79BE8;
  --hn-lav-d: #1A1726;
  --hn-lav-b: #2E2846;
  /* EL FORMATO QUE ESTA PUESTO, ANTES EN TURQUESA Y DESDE EL 21/09/2026
     EN EL AZUL DE "VOX" (a pedido, sobre el logo nuevo).

         el color del formato del selector es turquesa
                                        -- Gustavo, 13/09/2026

     Es el unico de los cuatro que esta distinto, y es lo que el agente
     busca al abrir la lista: en cual estoy. En lavanda --el color de todo
     lo demas del sobre-- habia que leer para encontrarlo.

     SIGUE SIN SER `--accent`, Y LA DIFERENCIA SIGUE IMPORTANDO -- el azul
     de VOX es mas saturado y sin verde, se distingue del celeste aunque
     los dos sean "azules":

         --accent   #57DDFF   celeste. La ACCION: «Grabar este»,
                              «Publicar». Lo que dispara algo.
         --hn-turq  #00C8F8   el formato puesto. Un estado, no una accion.

     Si el formato puesto usara el celeste, en la misma pantalla habria
     dos cosas del mismo color que no se tocan igual -- y una es el boton
     que dispara todo.

     El numero sale del mockup `home-final-v1.html`, `--turq`.

     CAMBIADO A "AZUL VOX", 21/09/2026: el color de "VOX" en el logo
     nuevo, muestreado del propio archivo. El nombre de la variable
     queda igual -- la que cambia es la marca, no la funcion del color
     ("es el formato", ver el comentario de `.hn-pastilla`). */
  --hn-turq: #00C8F8;
  --hn-turq-d: #101F22;
  --hn-turq-b: #1E383E;
  /* EL TEXTO MAS CALLADO, Y SE TIENE QUE PODER LEER. Estaba en #5A5A68
     --2,5 a 1 contra el fondo-- y a 11,5 pixeles no se leia. */
  --hn-tx3: #8C8C9C;
  --hn-sup2: #17171E;
}

/* -- LA BANDA DE ARRIBA -------------------------------------------
   Una sola, y la elige quien publica. */
.hn-mes, .hn-cargar {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 16px; padding: 11px 13px;
  border-radius: 12px;
  font-family: inherit; text-align: left;
  cursor: pointer;
}
.hn-mes {
  background: var(--panel, #131922);
  border: 1px solid var(--line, #21262d);
  font-size: 12.5px; color: var(--text-dim, #8b949e);
}
.hn-mes b { color: var(--text, #c9d1d9); font-weight: 600; font-variant-numeric: tabular-nums; }
.hn-mes-t { flex: 1; }
.hn-mes-ch { color: var(--hn-tx3); flex-shrink: 0; display: grid; place-items: center; }
/* LA DE CARGAR VA EN LAVANDA Y LLENA: es lo unico de la pantalla que pide
   algo, y aparece el lunes y se queda hasta que carga. */
.hn-cargar {
  background: var(--hn-lav-d); border: 1px solid var(--hn-lav-b);
  font-size: 13.5px; font-weight: 600; color: var(--hn-lav);
}
.hn-cargar-s { color: var(--text-dim, #8b949e); font-weight: 400; font-size: 12.5px; }

/* -- LA FECHA Y EL TITULO ----------------------------------------- */
.hn-fecha { font-size: 14px; color: var(--hn-tx3); margin: 2px 0 4px; }
.hn-hoy-t {
  font-size: 22px; font-weight: 600; letter-spacing: -.02em;
  margin-bottom: 18px;
}

/* -- EL SOBRE -----------------------------------------------------
   Arriba de donde viene, adentro que dice. Antes era una fila de datos
   --icono, proposito, formato, que hace-- todos del mismo peso y del
   mismo gris. */
.hn-sobre {
  border: 1px solid var(--line, #21262d); border-radius: 20px;
  overflow: hidden; background: var(--panel, #131922);
}
/* CUMPLIDA LA SEMANA SE APAGA, y no se esconde: el guion sigue ahi por si
   quiere adelantar uno. Lo que se apaga es el empuje. */
.hn-sobre.hn-apagado { opacity: .72; }
.hn-cab {
  display: flex; align-items: center; gap: 9px;
  /* MENOS ALTO: la cabecera son dos etiquetas, no una seccion. */
  padding: 9px 14px;
  background: var(--hn-sup2);
  border-bottom: 1px solid var(--line, #21262d);
}
/* EL PUNTO DEL PROPOSITO, GRIS Y UNO SOLO.

   Tenia un color por proposito --verde, celeste, amarillo-- y el celeste
   de AUTORIDAD quedaba a cuatro centimetros del turquesa de «Grabar
   este»: dos celestes en la misma pantalla diciendo cosas distintas.
   Es el caso exacto que SISTEMA_DE_COLORES.md nombra.

   EL PUNTO SE QUEDA aunque no distinga nada: marca donde empieza el
   renglon y separa el proposito de la pastilla del formato. */
.hn-punto {
  width: 7px; height: 7px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--hn-gris2, #848983);
}
.hn-cprop { font-size: 12px; letter-spacing: .07em; color: var(--text-dim, #8b949e); font-weight: 600; }
/* LA PASTILLA DEL FORMATO ES EL SELECTOR. Es el unico lugar donde
   cambiarlo tiene sentido, porque es donde se ve cual es. */
.hn-pastilla {
  width: auto; margin-left: auto;
  display: flex; align-items: center; gap: 5px;
  padding: 5px 9px;
  /* EL BOTON DE CAMBIAR DE FORMATO, EN TURQUESA.

         no quedó turquesa el botón de cambio de formato
                                        -- Gustavo, 13/09/2026

     Es el que se ve SIEMPRE: la lista solo aparece cuando ya lo tocaste.
     Ver `--hn-turq` arriba -- turquesa es el formato; el celeste de
     `--accent` es la accion, y son dos cosas distintas. */
  background: var(--hn-turq-d, #101F22);
  border: 1px solid var(--hn-turq-b, #1E383E);
  border-radius: 8px;
  font-family: inherit; font-size: 12px; font-weight: 600;
  letter-spacing: .04em; color: var(--hn-turq, #00C8F8);
  cursor: pointer;
}
/* EL DIBUJITO DE LA PASTILLA, sin caja.

   Se llamaba `hn-pico`, que es de `hn-puerta` --38x38, fondo carbon y
   borde-- asi que salia adentro de un cuadrito gris. */
.hn-pf { display: grid; place-items: center; }
.hn-pastilla .hn-pch { display: grid; place-items: center; }
/* ABIERTA, EL TURQUESA LLENO: es la unica forma de que se vea que la
   lista salio de ahi. */
.hn-pastilla.abierto {
  background: var(--hn-turq, #00C8F8);
  color: #06201F;
  border-color: var(--hn-turq, #00C8F8);
}
.hn-pastilla.abierto .hn-pch { transform: rotate(180deg); }
/* MENOS AIRE ADENTRO. El sobre ocupaba media pantalla y las opciones de
   abajo quedaban fuera de vista -- que es donde estan las cosas que hay
   que tocar. */
.hn-in { padding: 14px 15px 13px; }
.hn-que { font-size: 12.5px; color: var(--hn-tx3); margin-bottom: 8px; }
/* EL TEXTO DEL GUION, EN TRES RECORTES: 22 -> 20 -> 17 -> 15.

   A 22 empujaba todo lo de abajo fuera de la pantalla, y lo de abajo es
   lo que hay que tocar: el selector, «Grabar este» y las opciones. Los
   tres recortes salieron de mirarlo en el telefono, con el caso peor --
   una pregunta de MENSAJE, que son las largas.

   NO ES EL TITULO DE LA PANTALLA: ese es «Video recomendado de hoy» y
   sigue grande. Este es el guion, y el agente no lo lee aca -- lo lee en
   «Ver y editar» o en el teleprompter. Aca solo tiene que reconocer de
   que se trata. */
.hn-tit { font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: -.015em; margin: 0; }
.hn-txt {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--line, #21262d);
  font-size: 14px; line-height: 1.5; color: var(--text-dim, #8b949e);
}
/* UNA SOLA ACCION AL PIE. «Leerlo» y «Editar» eran dos accesos a lo
   mismo: abrir el guion. Que se pueda editar es lo que hacés adentro. */
.hn-sobre-pie { border-top: 1px solid var(--line, #21262d); }
.hn-sobre-pie button {
  width: 100%; padding: 12px 0;
  background: none; border: none;
  font-family: inherit; font-size: 13.5px; color: var(--text-dim, #8b949e);
  cursor: pointer;
}

/* -- GRABAR, Y LA FILA DE GUIONES --------------------------------- */
.hn-grabar-este {
  width: 100%; margin-top: 18px; padding: 17px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  border: none; border-radius: 17px;
  background: var(--accent); color: #06201F;
  font-family: inherit; font-size: 16px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(63, 201, 192, .15);
}
/* SECUNDARIO A "Grabar este": el mismo ancho y la misma fila, pero sin
   competir en peso visual -- es la salida para el que quiere cambiar algo
   antes, no la accion principal de la pantalla. */
.hn-editar-este {
  width: 100%; margin-top: 10px; padding: 13px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  border: 1px solid var(--line, #21262d); border-radius: 17px;
  background: none; color: var(--text-dim, #8b949e);
  font-family: inherit; font-size: 14.5px; font-weight: 600;
  cursor: pointer;
}
.hn-navg { display: flex; gap: 8px; margin-top: 10px; align-items: stretch; }
.hn-ng {
  width: 46px; flex-shrink: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line, #21262d); border-radius: 14px;
  background: none; color: var(--text-dim, #8b949e);
  cursor: pointer;
}
/* EN EL PRIMERO SE VE APAGADA Y NO ESCONDIDA, para que la fila no cambie
   de forma al segundo toque. */
.hn-ng:disabled { color: #2E2E36; cursor: default; }
.hn-ngc {
  flex: 1; padding: 13px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  border: 1px solid var(--line, #21262d); border-radius: 14px;
  background: none;
  font-family: inherit; font-size: 14px; color: var(--text-dim, #8b949e);
  cursor: pointer;
}
/* EN CUAL VA. Sin esto, apretar «Otro» tres veces no deja ninguna marca.
   No dice «de N»: el pozo no tiene fondo a la vista. */
.hn-ngn { font-size: 11.5px; color: var(--hn-tx3); font-variant-numeric: tabular-nums; }
.hn-mio {
  width: 100%; margin-top: 10px; padding: 13px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--line, #21262d); border-radius: 14px;
  background: none;
  font-family: inherit; font-size: 14px; color: var(--text-dim, #8b949e);
  cursor: pointer;
}

/* -- EL SELECTOR DE FORMATO ---------------------------------------
   Cuatro, sin PERSONAL: ese no es un formato que el sistema reparte. */
.hn-sel {
  margin-top: 11px;
  /* EL BORDE SIGUE A LA PASTILLA. Si ella es turquesa y la lista que
     sale de ella tiene borde lavanda, se leen como dos cosas. */
  border: 1px solid var(--hn-turq-b, #1E383E); border-radius: 15px;
  overflow: hidden; background: var(--hn-sup, #111116);
}
.hn-sel-t {
  padding: 11px 15px;
  border-bottom: 1px solid var(--line, #21262d);
  font-size: 11.5px; letter-spacing: .06em; color: var(--hn-tx3);
}
.hn-sel-o {
  width: 100%; padding: 13px 15px;
  display: flex; align-items: center; gap: 11px;
  background: none; border: none;
  border-bottom: 1px solid var(--line, #21262d);
  font-family: inherit; font-size: 14.5px; color: var(--text, #c9d1d9);
  text-align: left; cursor: pointer;
}
.hn-sel-o:last-child { border-bottom: none; }
/* EL QUE ESTA PUESTO, EN TURQUESA. Ver el token arriba: es un estado,
   no una accion -- por eso no lleva el celeste de «Grabar este». */
.hn-sel-o.on {
  background: var(--hn-turq-d, #101F22);
  color: var(--hn-turq, #00C8F8);
  font-weight: 600;
}
.hn-sel-i {
  width: 30px; height: 30px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 9px; background: var(--hn-sup2); color: var(--text-dim, #8b949e);
}
.hn-sel-o.on .hn-sel-i {
  background: var(--hn-turq-b, #1E383E);
  color: var(--hn-turq, #00C8F8);
}
/* QUE HACE, AL LADO DEL NOMBRE: «PING PONG» no explica que hay que
   señalar. */
.hn-sel-q { margin-left: auto; font-size: 11.5px; color: var(--hn-tx3); font-weight: 400; }
.hn-sel-o.on .hn-sel-q { color: var(--hn-turq, #00C8F8); opacity: .75; }
/* EL TILDE, en el mismo turquesa: es la marca de «estás acá». */
.hn-sel-tk {
  flex-shrink: 0;
  color: var(--hn-turq, #00C8F8);
  display: grid; place-items: center;
}

/* -- LA SEMANA, EN UN ANILLO --------------------------------------
   Abajo de todo, sin competir. */
.hn-semana-abajo { margin-top: auto; padding-top: 18px; }
.hn-sem {
  width: 100%;
  display: flex; align-items: center; gap: 11px;
  padding: 0; background: none; border: none;
  font-family: inherit; font-size: 12.5px; color: var(--hn-tx3);
  text-align: left; cursor: pointer;
}
.hn-sem b { color: var(--text, #c9d1d9); }
.hn-sem-t { line-height: 1.45; }
.hn-anillo { position: relative; width: 34px; height: 34px; flex-shrink: 0; }
.hn-anillo svg { transform: rotate(-90deg); }
.hn-anillo-n {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 600; color: var(--text, #c9d1d9);
  font-variant-numeric: tabular-nums;
}

/* -- CUANDO YA CUMPLIO LA SEMANA ---------------------------------- */
.hn-cumplio { text-align: center; padding: 22px 10px 18px; }
.hn-cumplio-ic {
  width: 50px; height: 50px; margin: 0 auto 15px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: var(--hn-lav-d); border: 1px solid var(--hn-lav-b);
  color: var(--hn-lav);
}
.hn-cumplio-t { font-size: 18px; font-weight: 500; line-height: 1.3; }
.hn-cumplio-s { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--text-dim, #8b949e); }
/* «Grabar este igual»: el guion sigue disponible, pero el sistema no
   empuja -- por eso es de contorno y no el turquesa lleno. */
.hn-otra-igual {
  width: 100%; margin-top: 14px; padding: 13px;
  border: 1px solid var(--line, #21262d); border-radius: 14px;
  background: none;
  font-family: inherit; font-size: 14px; color: var(--text-dim, #8b949e);
  cursor: pointer;
}

/* -- EL POZO VACIO ------------------------------------------------ */
.hn-hoy-sin { padding: 4px 0 14px; }

/* ------------------------------------------------------------------
   EL DIA PERSONAL

       La pantalla del día personal quedó de otro mundo: tarjetas verdes,
       tarjetas grises, íconos con otro estilo y cinco opciones sueltas
       del mismo peso. El agente cambia de app cuando le toca contar algo
       suyo.                             -- DIA_PERSONAL_REDISENO.md

   Es la misma pantalla que la home en otro momento, asi que comparte los
   tokens: cuelgan de `.hn-redisenada` y no se declaran de nuevo.
   ------------------------------------------------------------------ */

/* LA PASTILLA QUE NO SE TOCA. En el dia personal el formato es el que
   toca y no se cambia: se dibuja igual pero sin ser un boton. Uno que no
   hace nada se toca una vez, y despues no se toca ninguno. */
/* LA PASTILLA QUE NO SE TOCA NO PARECE UN BOTON.

       La pastilla PERSONAL se ve igual que en la home, con el mismo
       aspecto de botón, así que invita a tocarla y no hace nada.
                                            -- Gustavo, 11/09/2026

   Tenia `cursor: default` y nada mas, que en un telefono no se ve: seguia
   con el fondo y el borde de la que SI se toca. Queda como la etiqueta
   del proposito que tiene al lado -- solo el dibujo y el nombre. */
.hn-pastilla.hn-fija {
  padding: 0;
  background: none;
  border: none;
  cursor: default;
}
/* LA PASTILLA SOLA, cuando no hay sobre que la contenga: sin guion del
   formato pedido, sigue siendo el unico lugar donde cambiarlo. */
.hn-pastilla.hn-sola { margin: 14px 0 0; justify-content: center; }

/* -- LA INTRO DE «ALGO MIO» ---------------------------------------
   Sin sobre: un sobre vacio promete un guion adentro, y aca no hay
   ninguno -- que es justo lo que la pantalla viene a decir. */
.hn-mia-intro { margin-bottom: 4px; }
.hn-mia-g {
  font-size: 30px; font-weight: 300; line-height: 1.15; letter-spacing: -.03em;
}
.hn-mia-g em { font-style: normal; color: var(--hn-lav); }
/* LA FRASE RESALTADA ES LO QUE EL AGENTE NO SABE, y lo que le saca el
   miedo a no tener nada para contar. Por eso esta marcada y no es una
   linea mas del parrafo. */
.hn-mia-p {
  margin-top: 16px; padding-left: 13px;
  border-left: 2px solid var(--hn-lav-b);
  font-size: 14.5px; line-height: 1.55; color: var(--text-dim, #8b949e);
}
.hn-mia-p b { color: var(--text, #c9d1d9); font-weight: 500; }

/* -- LOS DOS GRUPOS -----------------------------------------------
   «Ya se que contar» son dos caminos enteros; los tres tonos son una
   ayuda para el que NO sabe. Del mismo tamaño y en la misma pila, hay
   que leer las cinco para darse cuenta de que son dos clases. */
.hn-bloque { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.hn-bt {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 3px;
  font-size: 12px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--hn-tx3);
}
.hn-bt::after { content: ""; flex: 1; height: 1px; background: var(--line, #21262d); }

.hn-op {
  width: 100%;
  display: flex; align-items: center; gap: 11px;
  padding: 13px 14px;
  text-align: left;
  background: var(--panel, #131922);
  border: 1px solid var(--line, #21262d); border-radius: 14px;
  font-family: inherit; cursor: pointer;
}
.hn-op:hover { border-color: var(--hn-lav-b); }
.hn-op-i {
  width: 30px; height: 30px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 9px; background: var(--hn-sup2); color: var(--hn-lav);
}
/* LA DESCRIPCION VA EN SU PROPIO RENGLON: hoy el agente tiene que
   adivinar si «Tengo el texto escrito» le abre un campo o lo manda a
   grabar. */
.hn-op-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hn-op-a { font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--text, #c9d1d9); }
.hn-op-b { font-size: 12.5px; line-height: 1.4; color: var(--text-dim, #8b949e); }
.hn-op-fl { flex-shrink: 0; color: var(--hn-tx3); display: grid; place-items: center; }

/* LOS TRES TONOS, EN FILA DE TRES Y MAS CHICOS: son la ayuda, no el
   camino. */
.hn-tonos { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.hn-tono {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 8px;
  background: var(--panel, #131922);
  border: 1px solid var(--line, #21262d); border-radius: 14px;
  font-family: inherit; cursor: pointer;
}
.hn-tono:hover { border-color: var(--hn-lav-b); }
.hn-tono-i {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 9px; background: var(--hn-lav-d); color: var(--hn-lav);
}
.hn-tono-n { font-size: 13px; font-weight: 500; color: var(--text, #c9d1d9); }

/* -- SALIR --------------------------------------------------------
   «Prefiero uno del sistema» si le tocaba; «Volver al video de hoy» si
   entro por su cuenta. Abajo y de contorno: es una salida, no una
   accion. */
.hn-volver-abajo {
  width: 100%; margin-top: 18px; padding: 13px;
  border: 1px solid var(--line, #21262d); border-radius: 14px;
  background: none;
  font-family: inherit; font-size: 14px; color: var(--text-dim, #8b949e);
  cursor: pointer;
}

/* ------------------------------------------------------------------
   MIS LOGROS

       Se llama Mis Logros, no métricas. La diferencia no es cosmética: no
       es un tablero de números, es lo que consiguió.  -- MIS_LOGROS.md
   ------------------------------------------------------------------ */

/* EL PRIMER DIA NO MUESTRA CEROS.

       Un destino llamado Mis Logros que muestra cero es peor que no
       tenerlo.                          -- MIS_LOGROS.md

   Un cero dice «no conseguiste nada». Un guion dice «todavia no lo
   sabemos», que es la verdad. */
.hn-vacio { text-align: center; padding: 30px 12px 22px; }
.hn-vacio-ic {
  width: 52px; height: 52px; margin: 0 auto 15px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: var(--hn-lav-d); border: 1px solid var(--hn-lav-b);
  color: var(--hn-lav);
}
.hn-vacio-t { font-size: 17px; font-weight: 500; line-height: 1.35; }
.hn-vacio-s {
  margin-top: 9px;
  font-size: 14px; line-height: 1.5; color: var(--text-dim, #8b949e);
}

/* UNA FILA POR RED. El punto es el color de la red, que es como el agente
   las reconoce sin leer. */
.hn-red-fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px; padding: 13px 14px;
  background: var(--panel, #131922);
  border: 1px solid var(--line, #21262d); border-radius: 13px;
  font-size: 14px;
}
.hn-red-n { display: flex; align-items: center; gap: 9px; color: var(--text, #c9d1d9); }
.hn-red-pt { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
/* «sin cargar» EN GRIS Y SIN NUMERO: no es un cero, es que no se sabe. */
.hn-red-v { color: var(--hn-tx3); font-size: 13px; font-variant-numeric: tabular-nums; }
.hn-red-v b { color: var(--text, #c9d1d9); font-size: 15px; font-weight: 600; }

/* EL NUMERO GRANDE ARRIBA: es lo primero que ve. */
.hn-logros-total { text-align: center; padding: 12px 0 22px; }
.hn-logros-n {
  font-size: 44px; font-weight: 300; line-height: 1;
  letter-spacing: -.03em; color: var(--hn-lav);
  font-variant-numeric: tabular-nums;
}
.hn-logros-t { margin-top: 8px; font-size: 13.5px; color: var(--text-dim, #8b949e); }

/* LA NOTA DE ABAJO. Es la que explica que los seguidores que ya traia son
   el arranque y no el logro -- lo que el agente no sabe. */
.hn-nota {
  margin-top: 16px;
  font-size: 13px; line-height: 1.55; color: var(--hn-tx3);
}
.hn-nota b { color: var(--text-dim, #8b949e); font-weight: 500; }

/* ====================================================================
   LA ENTREGA NUEVA
   ====================================================================

   Del mockup `entrega-y-videos-v1.html`, que manda sobre lo visual.

   TODO LLEVA `ent-n-` ADELANTE. El CSS no pasa por el interruptor de la
   home nueva: se sirve entero para todos. Una clase repetida le cambia la
   pantalla a los dieciseis que no tienen el rediseno.
   ==================================================================== */

.ent-n-cuerpo { padding-bottom: 8px; }

/* EL VIDEO, 9:16 Y ARRIBA DE TODO. Es lo primero que ve y lo que le
   permite decidir: hasta hoy la pantalla abria con un titulo y un aviso,
   y el reproductor quedaba en el medio. */
.ent-n-video {
  /* UNA SOLA RESTRICCION, Y LA OTRA SALE DE LA PROPORCION.
   *
   *     Por qué el video que entregás no es 9:16.
   *                                       -- Gustavo, 12/09/2026
   *
   * El bug de ese dia era `width: 100%` peleandose con `max-height`: dos
   * reglas mandando sobre la misma caja, el tope cortaba el alto y la
   * caja dejaba de ser 9:16. Medido en Chrome: 600 x 430, apaisada, para
   * un video de 1080x1920.
   *
   *     La última versión muestra el video final chiquito. Antes estaba
   *     en 9:16 y así tiene que estar.    -- Gustavo, 13/09/2026
   *
   * Y EL ARREGLO DE ESE DIA TRAJO ESTE. Decia `height: var(--alto, 430px)`
   * y `--alto` NO EXISTE: en toda esta hoja hay `--alto-boton`,
   * `--alto-barra`, `--alto-cuaderno` y `--alto-grab`, pero `--alto` a
   * secas no se define en ningun lado. Asi que el alto era siempre el de
   * reserva --430 pixeles fijos-- y en el escritorio quedaba un sello de
   * 242 x 430. Era 9:16, pero chiquito.
   *
   * NO SE ARREGLA DEFINIENDO `--alto`: volveria a depender de que alguien
   * lo ponga desde afuera, que es justo la parte que fallo.
   *
   * MANDA EL ANCHO Y EL ALTO SALE DE `aspect-ratio`. En un telefono gana
   * el `100%` --la caja ocupa todo el ancho y se ve grande--; en una
   * pantalla baja o apaisada gana el otro y el ancho se achica lo
   * necesario para que el alto entre. En los dos casos hay UN valor
   * calculado y el otro se deriva, asi que la proporcion no se rompe.
   *
   * `dvh` VA DESPUES Y NO EN LUGAR DE `vh`: en el telefono la barra del
   * navegador aparece y desaparece, y `vh` se queda con la pantalla
   * grande. El que no entienda `dvh` se queda con el renglon de arriba. */
  width: min(100%, calc(72vh * 9 / 16));
  width: min(100%, calc(72dvh * 9 / 16));
  aspect-ratio: 9 / 16;
  height: auto;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(165deg, #16161F, #0E0E14);
  border: 1px solid var(--hn-borde, #2C302C);
  display: grid;
  place-items: center;
  margin: 0 auto;
}
.ent-n-video video { width: 100%; height: 100%; object-fit: contain; }

.ent-n-etq { display: flex; align-items: center; gap: 9px; margin: 15px 0 9px; }

/* EL PUNTO DEL PROPOSITO, GRIS. Ver la cabecera de este bloque. */
.ent-n-prop {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; letter-spacing: .06em;
  color: var(--hn-gris2, #848983); font-weight: 600;
}
.ent-n-prop i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--hn-gris2, #848983);
}
.ent-n-fmt {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; letter-spacing: .05em; font-weight: 600;
  color: var(--hn-lav, #A79BE8);
  background: var(--hn-lav-d, #1A1726);
  border: 1px solid var(--hn-lav-b, #2E2846);
  padding: 4px 9px; border-radius: 7px;
}
.ent-n-tit { font-size: 16px; font-weight: 500; line-height: 1.3; margin: 0 0 3px; }

/* -- los copys, contraidos -- */
.ent-n-copys {
  width: 100%; margin-top: 16px;
  border: 1px solid var(--hn-borde, #2C302C);
  border-radius: 14px; background: var(--hn-carbon, #171917); overflow: hidden;
}
.ent-n-copys-h {
  padding: 14px 15px; display: flex; align-items: center; gap: 10px;
  background: none; border: none; color: var(--hn-blanco, #F4F4F1);
  width: 100%; text-align: left; min-height: 0; margin: 0;
}
.ent-n-copys-h .t { flex: 1; font-size: 13.5px; font-weight: 500; }
.ent-n-copys-h .r { font-size: 11px; color: var(--hn-gris2, #848983); }
.ent-n-copys-h svg { color: var(--hn-gris2, #848983); flex-shrink: 0; }
.ent-n-copys.abierto .ent-n-copys-h svg { transform: rotate(180deg); }
.ent-n-copys-in { border-top: 1px solid var(--hn-borde, #2C302C); padding: 14px 15px; }
.ent-n-red-t { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ent-n-red-t .n {
  font-size: 11px; letter-spacing: .05em;
  color: var(--hn-gris, #A3A8A2); font-weight: 600;
}
.ent-n-ed {
  margin-left: auto; width: auto; min-height: 0; margin-top: 0; padding: 0;
  font-size: 11px; color: var(--verde); background: none; border: none;
}
.ent-n-copy-tx {
  font-size: 12.5px; color: var(--hn-gris, #A3A8A2); line-height: 1.55;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--hn-borde, #2C302C);
  white-space: pre-wrap;
}
.ent-n-copy-g:last-child .ent-n-copy-tx {
  border-bottom: none; margin-bottom: 0; padding-bottom: 0;
}
.ent-n-nocopy {
  font-size: 12px; color: var(--hn-gris2, #848983); line-height: 1.45;
  padding-bottom: 14px;
}
.ent-n-ta {
  width: 100%; border-radius: 10px; padding: 10px;
  border: 1px solid var(--hn-borde, #2C302C);
  background: var(--hn-negro, #0C0D0C); color: var(--hn-blanco, #F4F4F1);
  font: inherit; font-size: 12.5px; line-height: 1.5; resize: vertical;
}
.ent-n-ed-fila { display: flex; gap: 8px; margin-top: 9px; }
.ent-n-ed-fila button { flex: 1; }

/* -- BAJARLO PARA EL ESTADO. Verde: no publica nada, se queda en el
      telefono. -- */
.ent-n-wsp {
  width: 100%; margin-top: 14px; padding: 12px; border-radius: 13px;
  min-height: 0;
  border: 1px solid rgba(126, 224, 160, .3);
  background: rgba(126, 224, 160, .07);
  color: var(--verde); font-size: 13px; font-weight: 500;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.ent-n-wsp.grande { padding: 15px; font-size: 14px; font-weight: 600; }

/* -- los tres botones, abajo -- */
/* LOS TRES BOTONES, CON AIRE ABAJO.

   La barra de navegacion vive FUERA de `#app` y flota encima del
   contenido: sin este espacio, «Publicar» aparecia cortado al medio. */
/* DOS FILAS: los alternativos juntos arriba (`.ent-n-alt`), y el
   primario solo abajo, centrado y con el doble de ancho -- para que no
   compita a simple vista con Rehacer/Volver a grabar/Borrar. */
.ent-n-acc {
  display: flex; flex-direction: column; gap: 10px; padding: 14px 0 76px;
  margin-top: 18px; border-top: 1px solid var(--hn-borde, #2C302C);
}
.ent-n-alt {
  display: flex; gap: 8px;
}
.ent-n-bt {
  border-radius: 14px; border: none; font-weight: 600; min-height: 0;
  margin-top: 0; width: auto;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
/* PINTADO, Y EL UNICO. Es a lo que la pantalla vino. */
.ent-n-bt.pub {
  flex: 1; padding: 15px; background: var(--accent); color: #06232B;
  font-size: 15px; box-shadow: 0 5px 20px rgba(87, 221, 255, .15);
}
.ent-n-bt.reh {
  flex: 1; padding: 15px 14px; background: none;
  border: 1px solid rgba(126, 224, 160, .35); color: var(--verde); font-size: 13px;
}
/* SOLO EL ICONO, ROJO SOBRE GRIS. No va pintado: si compite con
   Publicar, alguien lo va a tocar sin querer. */
.ent-n-bt.bor {
  flex: 1; padding: 15px 14px; background: none;
  border: 1px solid var(--hn-borde, #2C302C); color: #D9736B; font-size: 13px;
}
.ent-n-bt.list {
  flex: 1; padding: 15px; background: var(--accent-2); color: #231800; font-size: 15px;
}
/* EL DOBLE DE ANCHO Y CENTRADO, solo en su propia fila. Pisa el
   `flex: 1` de `.pub`/`.list` -- en una fila en columna ya no hay
   nadie con quien repartir el ancho. */
.ent-n-bt.ent-n-ancho {
  flex: none; align-self: center; width: 66%; min-width: 220px;
}
/* TERMINAR: sin fondo, con borde y texto turquesa. Lo pide la orden. */
.ent-n-bt.fin {
  flex: 1; padding: 15px; background: none;
  border: 1px solid var(--accent); color: var(--accent); font-size: 15px;
}

/* -- una fila por red, para el que sube a mano -- */
.ent-n-trato {
  font-size: 12.5px; color: var(--hn-gris, #A3A8A2);
  line-height: 1.5; margin: 14px 0;
}
.ent-n-trato b { color: var(--hn-blanco, #F4F4F1); }
.ent-n-redb {
  width: 100%; padding: 13px 15px; margin: 0 0 8px; min-height: 0;
  border-radius: 14px; border: 1px solid var(--hn-borde, #2C302C);
  background: var(--hn-carbon, #171917);
  display: flex; align-items: center; gap: 12px; text-align: left;
  color: var(--hn-blanco, #F4F4F1);
}
.ent-n-redb .n { flex: 1; font-size: 14px; font-weight: 500; }
.ent-n-redb .e { font-size: 11px; color: var(--hn-gris2, #848983); }
.ent-n-redb svg { color: var(--accent-2); flex-shrink: 0; }
/* EL QUE YA MANDO, con la hora. Ambar: es el camino manual. */
.ent-n-redb.hecho { background: #16130E; border-color: rgba(255, 221, 87, .25); }
.ent-n-redb.hecho .e { color: var(--accent-2); }

/* -- la confirmacion de borrar -- */
.ent-n-velo {
  position: fixed; inset: 0; background: rgba(6, 6, 9, .82);
  backdrop-filter: blur(3px); display: grid; place-items: center;
  padding: 26px; z-index: 60;
}
.ent-n-dlg {
  background: var(--hn-carbon, #171917);
  border: 1px solid var(--hn-borde, #2C302C);
  border-radius: 20px; padding: 22px 20px;
  width: 100%; max-width: 360px; text-align: center;
}
.ent-n-dlg .ic {
  width: 46px; height: 46px; border-radius: 14px; background: #2A1A18;
  display: grid; place-items: center; margin: 0 auto 14px; color: #D9736B;
}
.ent-n-dlg .t { font-size: 17px; font-weight: 500; line-height: 1.3; }
.ent-n-dlg .s {
  font-size: 13px; color: var(--hn-gris, #A3A8A2);
  margin-top: 9px; line-height: 1.5;
}
.ent-n-dlg .fila { display: flex; gap: 8px; margin-top: 20px; }
.ent-n-dlg .fila button {
  flex: 1; padding: 13px; border-radius: 13px; font-size: 14px;
  font-weight: 600; min-height: 0; margin-top: 0;
  border: 1px solid var(--hn-borde, #2C302C);
  background: none; color: var(--hn-gris, #A3A8A2);
}
.ent-n-dlg .fila button.si {
  background: #2A1A18; border-color: rgba(217, 115, 107, .4); color: #D9736B;
}
.ent-n-falla { color: #D9736B; }

/* -- salio, y la pantalla no se cierra -- */
.ent-n-conf {
  background: rgba(87, 221, 255, .07);
  border: 1px solid rgba(87, 221, 255, .28);
  border-radius: 15px; padding: 14px 15px; margin-top: 15px;
  display: flex; align-items: center; gap: 12px;
}
.ent-n-conf .ic {
  width: 32px; height: 32px; border-radius: 10px;
  background: rgba(87, 221, 255, .13);
  display: grid; place-items: center; flex-shrink: 0; color: var(--accent);
}
.ent-n-conf .t b { display: block; font-size: 13.5px; color: var(--accent); }
.ent-n-conf .t span {
  display: block; font-size: 11.5px;
  color: var(--hn-gris, #A3A8A2); margin-top: 3px;
}
.ent-n-queda {
  font-size: 12.5px; color: var(--hn-gris, #A3A8A2); line-height: 1.5;
  margin-top: 22px; padding-left: 13px;
  border-left: 2px solid rgba(126, 224, 160, .35);
}
.ent-n-queda b { color: var(--hn-blanco, #F4F4F1); }

/* ====================================================================
   MIS VIDEOS · LOS CUATRO GRUPOS
   ==================================================================== */

.mv-resumen { margin: 0 0 14px; }

/* EL TITULO DE GRUPO, EN LAVANDA CON SU CONTADOR. Son lo que separa una
   seccion de otra. La linea que sigue al texto lo empuja a la izquierda y
   hace de separador sin dibujar otro. */
.mv-gt {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--hn-lav, #A79BE8);
  margin: 0 0 11px;
}
.mv-gt::after {
  content: ""; flex: 1; height: 1px;
  background: var(--hn-lav-b, #2E2846); opacity: .5;
}
.mv-gt .n {
  background: var(--hn-lav-d, #1A1726);
  border: 1px solid var(--hn-lav-b, #2E2846);
  padding: 2px 7px; border-radius: 6px; font-size: 10px;
  letter-spacing: 0; text-transform: none;
}
.mv-gt + .mv-gt, .mv-card + .mv-gt, .mv-vermas + .mv-gt { margin-top: 22px; }

.mv-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--hn-carbon, #171917);
  border-radius: 15px; padding: 11px; margin-bottom: 9px;
  border: 1px solid transparent;
}
/* LO QUE ESPERA QUE ENTRE, con el borde de la marca: es lo unico de esta
   pantalla que le pide algo. */
.mv-card.lista { border-color: var(--hn-lav-b, #2E2846); background: #131019; }
/* LO QUE FALTA SUBIR, en ambar: es el camino manual. */
.mv-card.subir { border-color: rgba(255, 221, 87, .25); background: #16130E; }

.mv-th {
  width: 46px; height: 62px; border-radius: 9px;
  background: var(--hn-sup2, #17171E);
  display: grid; place-items: center; flex-shrink: 0;
  color: var(--hn-gris2, #848983);
  border: 1px solid var(--hn-borde, #2C302C);
}
.mv-ci { flex: 1; min-width: 0; display: block; }
.mv-ct {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 13.5px; font-weight: 500; line-height: 1.3;
}
.mv-etq { display: flex; align-items: center; gap: 7px; margin-top: 5px; }
.mv-etq .pr {
  display: flex; align-items: center; gap: 4px;
  font-size: 9.5px; letter-spacing: .05em; font-weight: 600;
  color: var(--hn-gris2, #848983);
}
/* EL PUNTO DEL PROPOSITO, GRIS. Igual que en la home y en la entrega: no
   lleva un color por proposito desde el 11/09/2026. */
.mv-etq .pr i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--hn-gris2, #848983);
}
.mv-etq .fm {
  font-size: 9.5px; letter-spacing: .04em; font-weight: 600;
  color: var(--hn-lav, #A79BE8);
}
.mv-cs {
  display: block; font-size: 11px;
  color: var(--hn-gris2, #848983); margin-top: 4px;
}
.mv-cs .ok { color: var(--hn-lav, #A79BE8); }
.mv-cs .am { color: var(--accent-2); }
.mv-cs .redes { color: var(--accent); }

.mv-cb {
  width: auto; min-height: 0; margin-top: 0; flex-shrink: 0;
  padding: 8px 13px; border-radius: 10px; border: none;
  font-size: 12.5px; font-weight: 600;
}
.mv-cb.v { background: var(--hn-lav, #A79BE8); color: #12121A; }
.mv-cb.a { background: var(--accent-2); color: #231800; }
.mv-cb.g {
  background: none; border: 1px solid var(--hn-borde, #2C302C);
  color: var(--hn-gris, #A3A8A2);
}

/* BAJAR PARA EL ESTADO, en cada publicado. Verde: no publica nada. */
.mv-baj {
  width: 30px; height: 30px; min-height: 0; margin-top: 0; padding: 0;
  border-radius: 9px; border: 1px solid rgba(126, 224, 160, .28);
  background: none; color: var(--verde);
  display: grid; place-items: center; flex-shrink: 0;
}

.mv-filtro {
  display: flex; gap: 6px; overflow-x: auto;
  margin: -2px 0 12px; padding-bottom: 2px; scrollbar-width: none;
}
.mv-filtro::-webkit-scrollbar { display: none; }
.mv-fc {
  flex-shrink: 0; width: auto; min-height: 0; margin-top: 0;
  padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--hn-borde, #2C302C);
  background: none; color: var(--hn-gris2, #848983);
  font-size: 11.5px; white-space: nowrap; font-weight: 400;
}
.mv-fc.on {
  background: var(--hn-lav-d, #1A1726);
  border-color: var(--hn-lav-b, #2E2846);
  color: var(--hn-lav, #A79BE8); font-weight: 600;
}
.mv-vermas {
  width: 100%; min-height: 0; margin-top: 2px;
  padding: 12px; border-radius: 13px;
  border: 1px solid var(--hn-borde, #2C302C);
  background: none; color: var(--hn-gris, #A3A8A2); font-size: 12.5px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}

/* ====================================================================
   EL CUADERNO DE LA PRUEBA
   ====================================================================
   Cerrado es un renglon; abierto, una caja. Vive ARRIBA de la barra de
   abajo: las dos flotan fuera de `#app`, y pisadas el tirador quedaria
   debajo de los tres destinos y no se podria tocar. */

#cuaderno {
  position: fixed;
  left: 0; right: 0;
  /* ARRIBA DE LA BARRA, CON SU MEDIDA Y NO CON OTRA.
     Decia 62 «el alto de la barra de abajo», y la barra mide 69 con 74 de
     reserva: quedaba montado encima de la barra. */
  bottom: var(--alto-barra);
  z-index: 48;
  padding: 0 12px 8px;
  pointer-events: none;
}
#cuaderno > * { pointer-events: auto; }

/* A LA IZQUIERDA Y NO EN EL MEDIO.
   ---------------------------------------------------------------------
       Corré la pastilla del cuaderno, que tapa el botón.
                                        -- Gustavo, 12/09/2026

   MEDIDO EL 12/09: al final de la pantalla NO tapa nada -- `--alto-cuaderno`
   ya reserva sus 46 px y el último botón queda arriba. Lo que sí pasa es
   que a media pantalla, mientras se baja, la pastilla queda justo encima
   del botón que cierra la pantalla: se la ve, se toca, y se abre el
   cuaderno en vez de terminar.

   CENTRADA ERA LO PEOR DE LOS DOS MUNDOS: los botones que cierran una
   pantalla son anchos y su texto va al medio, así que el choque caía
   siempre sobre la palabra.

   A LA IZQUIERDA Y NO A LA DERECHA: a la derecha está el tacho de borrar,
   que es el único botón de la app donde un toque de más cuesta un video. */
.cua-tirador {
  width: auto; min-height: 0; margin: 0 auto 0 0; padding: 8px 14px;
  display: flex; align-items: center; gap: 8px;
  border-radius: 999px;
  border: 1px solid rgba(167, 155, 232, .38);
  background: #1A1726;
  color: var(--hn-lav, #A79BE8);
  font-size: 12.5px; font-weight: 600;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}
/* CUANTAS PREGUNTAS SIN LEER. Es lo unico que justifica un numero encima
   de un boton: hay algo que le frena la prueba si no lo ve. */
.cua-n {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--accent-2); color: #231800;
  font-size: 10.5px; font-weight: 700;
  display: grid; place-items: center;
}

#cuaderno.abierto {
  max-width: 520px; margin: 0 auto;
  background: var(--hn-carbon, #171917);
  border: 1px solid rgba(167, 155, 232, .3);
  border-radius: 16px; padding: 12px 13px 13px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .6);
  max-height: 66vh; overflow-y: auto;
}
.cua-cab { display: flex; align-items: center; margin-bottom: 9px; }
.cua-cab .t {
  flex: 1; font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--hn-lav, #A79BE8);
}
.cua-x {
  width: 26px; height: 26px; min-height: 0; margin: 0; padding: 0;
  border-radius: 8px; border: 1px solid var(--hn-borde, #2C302C);
  background: none; color: var(--hn-gris2, #848983); font-size: 13px;
}

/* LO QUE ESCRIBE LA SESION, ARRIBA. Son preguntas que le frenan la
   prueba: si estuvieran abajo del campo, se contestan sin leerlas. */
.cua-mias { margin-bottom: 11px; }
.cua-mia {
  font-size: 12.5px; line-height: 1.5;
  color: var(--hn-blanco, #F4F4F1);
  background: rgba(255, 221, 87, .07);
  border-left: 2px solid rgba(255, 221, 87, .45);
  border-radius: 0 8px 8px 0;
  padding: 9px 11px; margin-bottom: 7px;
}
/* LA QUE YA SE LEYO SE APAGA Y NO SE VA. Sigue siendo la respuesta a lo
   que preguntó: sacarla obliga a acordarse de lo que decia. */
.cua-mia.leida {
  background: rgba(255, 255, 255, .03);
  border-left-color: var(--hn-borde, #2C302C);
  color: var(--hn-gris, #A3A8A2);
}
.cua-mia.leida .q { color: var(--hn-gris2, #848983); }
.cua-mia .q {
  display: block; font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-2);
  font-weight: 700; margin-bottom: 3px;
}

/* A CUAL DE LAS TRES. Arranca sin ninguna elegida: una por defecto haria
   que la mitad de las notas caiga en la sesion equivocada por inercia. */
.cua-para {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; margin: 0 0 9px;
}
.cua-para-t {
  font-size: 11px; color: var(--hn-gris2, #848983); margin-right: 2px;
}
.cua-ses {
  width: auto; min-height: 0; margin-top: 0;
  padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--hn-borde, #2C302C);
  background: none; color: var(--hn-gris2, #848983);
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.cua-ses.on {
  background: var(--hn-lav-d, #1A1726);
  border-color: var(--hn-lav-b, #2E2846);
  color: var(--hn-lav, #A79BE8);
}

.cua-ta {
  width: 100%; border-radius: 10px; padding: 10px;
  border: 1px solid var(--hn-borde, #2C302C);
  background: var(--hn-negro, #0C0D0C);
  color: var(--hn-blanco, #F4F4F1);
  font: inherit; font-size: 13px; line-height: 1.5; resize: vertical;
}
/* DICTAR Y CAPTURA, en el mismo renglón: son las dos formas de contar lo
   mismo sin escribir. */
.cua-fila { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
/* A SUS HIJOS, SIN NOMBRAR A NINGUNO. Decia `.cua-fila .dictar-fila`, y
   esa clase es de otro bloque: encerrada no hace dano, pero la guarda del
   rediseno no puede distinguirlo de pegarle una clase ajena a un elemento
   propio -- que es como se rompio la pastilla del formato. */
.cua-fila > * { margin-top: 0; }
.cua-adj {
  width: auto; min-height: 38px; margin-top: 0; flex: 0 0 auto;
  padding: 7px 14px; gap: 7px; border-radius: 9px;
  background: transparent;
  border: 1px solid rgba(167, 155, 232, .4);
  color: var(--hn-lav, #A79BE8);
  font-size: 0.9rem; font-weight: 600;
}
.cua-adj:active { background: rgba(167, 155, 232, .1); }

/* LO QUE SE VA A MANDAR, A LA VISTA. Una captura elegida y no mostrada es
   como se manda la del video anterior sin darse cuenta. */
.cua-foto { position: relative; margin-top: 9px; }
.cua-foto img {
  width: 100%; max-height: 190px; object-fit: contain;
  border-radius: 10px; border: 1px solid var(--hn-borde, #2C302C);
  background: var(--hn-negro, #0C0D0C); display: block;
}
.cua-quitar {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; min-height: 0; margin: 0; padding: 0;
  border-radius: 8px; border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(6, 6, 9, .72); color: #fff; font-size: 13px;
}

.cua-pie { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.cua-pie .btn { width: auto; min-height: 0; margin-top: 0; padding: 9px 18px; }
.cua-donde { font-size: 11px; color: var(--hn-gris2, #848983); }
.cua-ok { font-size: 12px; color: var(--verde); margin-top: 8px; }

/* ══════════════════════════════════════════════════════════════════
   VER Y EDITAR · el hook corregible y el guion por tramos
   ══════════════════════════════════════════════════════════════════ */

.hn-lab {
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--hn-tx3, #5A5A68);
  text-transform: uppercase;
  margin: 2px 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hn-lab.con-linea::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hn-linea, #25252F);
}

/* ── EL TITULO ── */
.ve-hook {
  background: var(--hn-sup, #111116);
  border: 1px solid var(--hn-linea, #25252F);
  border-radius: 15px;
  padding: 15px 15px 13px;
  margin-bottom: 9px;
  position: relative;
}
.ve-hook.corregido { border-color: rgba(75, 201, 122, .3); }
.ve-hook.editando {
  border-color: rgba(75, 201, 122, .4);
  background: rgba(75, 201, 122, .05);
}
.ve-hook-txt {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -.015em;
  padding-right: 34px;
}
.ve-hook-campo {
  width: 100%;
  background: none;
  border: none;
  color: var(--hn-tx, #EDEDF2);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -.015em;
  font-family: inherit;
  resize: none;
  outline: none;
}

/* EL LAPIZ. Va arriba a la derecha y no tapa el texto: el `padding-right`
   del renglon le deja el lugar. */
.ve-lapiz {
  position: absolute;
  top: 13px;
  right: 13px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--hn-linea, #25252F);
  background: none;
  color: var(--hn-verde, #4BC97A);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  line-height: 1;
}
.ve-lapiz.chico { top: 8px; right: 8px; }

.ve-nota {
  font-size: 11.5px;
  color: var(--hn-tx3, #5A5A68);
  line-height: 1.5;
  margin-bottom: 22px;
  padding-left: 12px;
  border-left: 2px solid var(--hn-linea, #25252F);
}
.ve-nota b { color: var(--hn-tx2, #8A8A99); }
.ve-nota.hecho {
  border-color: rgba(75, 201, 122, .35);
  color: var(--hn-verde, #4BC97A);
}
.ve-nota.hecho span { color: var(--hn-tx3, #5A5A68); }

/* EL AVISO DE QUE LA CORRECCION VIAJA. En oro, que es el color con el que
   la app dice «esto sale de tu telefono». */
.ve-aviso {
  background: rgba(255, 221, 87, .10);
  border: 1px solid rgba(255, 221, 87, .28);
  border-radius: 12px;
  padding: 11px 13px;
  font-size: 12px;
  color: var(--hn-tx2, #8A8A99);
  line-height: 1.5;
  margin-bottom: 20px;
}
/* EL AMARILLO DEL CAMINO MANUAL --`--hn-man`, #FFDD57-- Y NO EL AMBAR DE
   LA MAQUETA.

   La maqueta trae #E8B04B y esta app tiene UN SOLO #E8B04B: el de la
   ayuda. Copiarlo aca ponia un segundo ambar casi igual a dos toques de
   distancia, que es como se deshacen las paletas.

   Y ademas dice lo correcto: este aviso habla de algo que el agente
   decidio a mano y que viaja a que alguien lo apruebe. Ese es el amarillo
   del camino manual. Lo atrapo
   `test_el_oro_de_la_ayuda_sigue_siendo_el_unico_ambar`. */
.ve-aviso b { color: var(--hn-man, #FFDD57); font-weight: 600; }

/* ── LOS TRAMOS ── */
.ve-tramo {
  margin-bottom: 16px;
  position: relative;
}
.ve-tramo-n {
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--hn-lav, #A79BE8);
  font-weight: 600;
  margin-bottom: 6px;
}
.ve-tramo-n.chico {
  color: var(--hn-tx3, #5A5A68);
  letter-spacing: .04em;
  margin: 12px 0 6px;
  text-transform: none;
  font-weight: 400;
}
.ve-tramo-txt {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--hn-tx, #EDEDF2);
  background: var(--hn-sup, #111116);
  border: 1px solid var(--hn-linea, #25252F);
  border-radius: 13px;
  padding: 13px 14px;
}
.ve-tramo-txt.placa { color: var(--hn-tx2, #8A8A99); font-style: italic; }
.ve-tramo.editando {
  background: rgba(75, 201, 122, .05);
  border: 1px solid rgba(75, 201, 122, .35);
  border-radius: 13px;
  padding: 12px;
}
/* EL CAMPO CON LOS NUMEROS AL COSTADO.

   Los números NO están adentro del texto: se dibujan en una columna a la
   izquierda, fuera del área editable, y se recalculan con cada tecla. Un
   número que vive adentro del texto es texto, y nadie lo vuelve a contar
   -- es lo que dejaba «1», un párrafo sin número, «3» y «4».

   EL ESPEJO es un `div` con la misma tipografía y el mismo ancho que el
   campo, invisible, que sirve para preguntarle dónde empieza cada
   párrafo. Un `textarea` no sabe contestar eso.

   LOS DOS TIENEN EL MISMO RELLENO IZQUIERDO --el ancho de la columna--
   así que el texto del espejo cae exactamente sobre el del campo. */
.pr-campo-caja {
  position: relative;
}

.pr-espejo {
  position: absolute;
  top: 0; left: 0;
  visibility: hidden;
  pointer-events: none;
  margin: 0;
  overflow: hidden;
}

.pr-numeros {
  position: absolute;
  top: 0; left: 0;
  width: 30px;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.pr-n {
  position: absolute;
  right: 6px;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--hn-lav, #A79BE8);
  opacity: .75;
}

/* LA COLUMNA SE RESERVA EN EL CAMPO, no se superpone: si el texto pasara
   por abajo de los números, el primero de cada párrafo quedaría tapado. */
.pr-campo-caja > textarea {
  padding-left: 36px !important;
}

.ve-tramo-campo {
  width: 100%;
  min-height: 120px;
  background: var(--hn-sup, #111116);
  border: 1px solid var(--hn-linea, #25252F);
  border-radius: 11px;
  padding: 12px;
  color: var(--hn-tx, #EDEDF2);
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.6;
  resize: vertical;
  outline: none;
}

/* ACA ESTABAN TAMBIEN LOS BOTONES DEL TRAMO --Guardar y Cancelar-- y se
   fueron el 13/09/2026: lo que se escribe se guarda solo. El del hook se
   queda, que es otra cosa: propone una correccion para todo el equipo y
   eso se decide a proposito, no de paso. */
.ve-hook-botones {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hn-linea, #25252F);
}
.ve-btn {
  flex: 1;
  padding: 10px;
  border-radius: 11px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--hn-linea, #25252F);
  background: none;
  color: var(--hn-tx2, #8A8A99);
}
.ve-btn.ok {
  background: rgba(75, 201, 122, .12);
  border-color: rgba(75, 201, 122, .35);
  color: var(--hn-verde, #4BC97A);
}

/* ══ EL PIE DEL TRAMO ═════════════════════════════════════════════════
   Donde estaban Guardar y Cancelar. Ahora la ayuda de un renglon a la
   izquierda y, a la derecha, la unica cosa que el boton informaba de
   verdad: que el cambio quedo.

   SIN LINEA DE ARRIBA Y SIN FONDO. Los botones necesitaban separarse del
   texto porque se tocaban; esto no se toca, se lee de reojo. */
/* LA AYUDA VA UNA VEZ, ARRIBA DE LOS TRAMOS.
   Antes salia con los botones, y los botones aparecian en el tramo que se
   estaba tocando: uno solo. Sin botones quedaba en el pie de cada tramo,
   y un MENSAJE tiene tres -- tres copias del mismo renglon, una abajo de
   la otra, en la misma pantalla. */
.ve-ayuda {
  margin: 0 0 12px;
}

/* LA MARCA: DOS PALABRAS, EN EL RENGLON DE SUMAR Y SACAR.
   Comparte la fila del bloque que se toco, a la izquierda, para que el
   aviso caiga donde el agente esta mirando. Al pie del tramo quedaba
   abajo de los seis bloques.

   OCUPA SU LUGAR SIEMPRE, aunque este vacia: la fila de botones ya tiene
   su alto, asi que la marca entra y sale sin mover nada. */
.ve-marca {
  margin-right: auto;
  font-size: 12px;
  color: var(--hn-tx3, #5A5A68);
  white-space: nowrap;
  transition: color .2s ease;
}
.ve-marca.guardado { color: var(--hn-verde, #4BC97A); }

/* ── EL CORTE DE VERDAD ──────────────────────────────────────────────

   CADA BLOQUE, UNA TARJETA. Es lo que el agente va a ver en la banda del
   teleprompter, de a uno: dibujarlos como una lista con un hueco entre
   medio es lo que hace visible DONDE salta.

   NO SE PARECE AL TELEPROMPTER A PROPOSITO --ni el tamanio de letra ni el
   fondo-- porque esto no es el teleprompter: es el mapa. Si se pareciera,
   el agente creeria que ya esta viendo la banda y no miraria los cortes,
   que es lo unico que esta pantalla viene a mostrar. */
/* ACA VIVIA `.ve-corte`, LA PREVISUALIZACION DEL CORTE.

   «Así se va a ver mientras grabás»: los bloques que iba a mostrar el
   teleprompter, uno abajo del otro. Se fue el 12/09/2026 con el cortador
   entero -- sin cortador no hay nada que previsualizar, porque lo que el
   agente escribe ES lo que va a ver.

   Y con ella se fue `.ve-bloque.recien`, la marca verde de lo que acababa
   de cambiar al tocarlo, que ya se habia ido con el unir y partir con el
   dedo ese mismo dia.

   LO QUE HAY AHORA SON LOS PARRAFOS NUMERADOS, los mismos del editor de
   la T. Heredan la caja de antes: es la misma idea --un renglon por
   parrafo, con su barra al costado-- y dos cajas distintas para lo mismo
   serian dos lugares donde cambiar el mismo borde. */
.ve-parrafos {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* EL NUMERO VA AL COSTADO Y NO ADENTRO DEL TEXTO, igual que en el campo.
   Adentro seria texto, y el texto se lee en voz alta. */
.ve-parrafo {
  position: relative;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--hn-tx, #EDEDF2);
  background: var(--hn-sup, #111116);
  border: 1px solid var(--hn-linea, #25252F);
  border-left: 3px solid var(--hn-lav, #A79BE8);
  border-radius: 0 13px 13px 0;
  /* El hueco de la izquierda es la columna del numero. Va en el atajo y
     no en un `padding-left` aparte: el atajo lo pisaria. */
  padding: 11px 14px 11px 36px;
  margin: 0;
}

.ve-n {
  position: absolute;
  left: 11px;
  top: 11px;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--hn-lav, #A79BE8);
  opacity: .75;
}

/* EL NIVEL DE EXPOSICION: TRES POSICIONES.
   Tres botones y no un desplegable: son tres opciones fijas y cortas, y
   un desplegable esconde dos de las tres. El elegido se pinta; los otros
   quedan con el borde. */
.ficha-exp-fila {
  display: flex;
  gap: 8px;
  margin: 4px 0 2px;
}
.ficha-exp {
  flex: 1;
  padding: 10px 6px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font-size: 15px;
  cursor: pointer;
}
.ficha-exp.puesto {
  background: #3FC9C0;
  border-color: #3FC9C0;
  color: #06201E;
  font-weight: 600;
}

/* ══ LOS BLOQUES DE «VER Y EDITAR», ESCRIBIBLES ═══════════════════════
   Eran `<p>` de solo lectura y ahora cada uno es un `<textarea>`. Se
   tienen que ver IGUAL que antes --el agente ya reconocia esas cajas--
   asi que el textarea hereda la tipografia y no trae nada de lo que un
   campo de formulario suele traer: ni borde de foco grueso, ni fondo
   distinto, ni la manija de redimensionar.

   Y SIN SCROLL PROPIO: el alto lo pone `veAltoDeLaCaja` con cada tecla.
   Un textarea de alto fijo con el texto adentro es la caja con scroll que
   se saco por inoperable en el telefono. */
.ve-bloque {
  width: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  resize: none;
  overflow: hidden;
  display: block;
  min-height: 0;
}
.ve-bloque:focus {
  outline: none;
}
/* ══ SUMAR Y SACAR UNA FRASE ENTERA ═══════════════════════════════════
   Se podia editar adentro de un bloque y no habia forma de sumar uno ni
   de sacar uno entero. Los dos gestos ya funcionaban --vaciar la caja lo
   saca, un punto y aparte lo parte-- pero ninguno se veia, y un gesto que
   hay que adivinar no existe.

   VAN ABAJO DEL TEXTO Y NO AL COSTADO: al costado le comerian setenta
   pixeles de ancho a cada bloque, y en un telefono de 360 el texto queda
   en una columna de tres palabras. Abajo, a la derecha, no le sacan ni un
   caracter.

   Y SE VEN SIEMPRE, apagados. Mostrarlos solo al tocar el bloque es la
   misma trampa de antes con un paso mas. */
.ve-acciones {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin: 6px 0 -2px;
}
/* EL BOTON DE LA APP ES DE ANCHO COMPLETO Y ALTO FIJO --`width: 100%` y
   `min-height: var(--alto-boton)`, arriba de todo-- y estos dos son lo
   contrario: dos pastillas chicas al costado. Se apagan los tres valores
   a mano; sin esto cada uno ocupaba el renglon entero y la pantalla
   quedaba con ocho botones gigantes entre frase y frase. */
.ve-accion {
  width: auto;
  flex: 0 0 auto;
  min-height: 0;
  margin-top: 0;
  font-weight: 500;
  /* ALTO DE DEDO, NO DE PUNTERO. Con 5px de padding la pastilla media 26
     pixeles: se toca bien con el mouse y se erra con el pulgar, y esta
     pantalla se usa en el telefono. */
  padding: 8px 14px;
  border: 1px solid var(--hn-linea, #25252F);
  border-radius: 999px;
  background: transparent;
  color: var(--hn-tx2, #8A8A99);
  font-size: 12px;
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
}
.ve-accion:hover {
  color: var(--hn-tx, #EDEDF2);
  border-color: var(--hn-lav, #A79BE8);
}
.ve-accion.sacar:hover {
  color: #F3B7B7;
  border-color: #8A4444;
}
/* EL ULTIMO BLOQUE DE UN TRAMO NO SE PUEDE SACAR: `veRenumerar` le pone
   `hidden` al boton. Un tramo sin ningun bloque es un tramo borrado. */
.ve-accion[hidden] { display: none; }

/* QUE SE NOTE CUAL SE ESTA TOCANDO. Sin esto, en una pantalla con ocho
   cajas iguales no hay forma de saber en cual cayo el dedo. */
.ve-parrafo:focus-within {
  background: rgba(63, 201, 192, .08);
  border-radius: 8px;
}

/* EL GUION ORIGINAL TODAVIA NO QUEDO CORREGIDO.
   Amarillo y no rojo, igual que el del hook que no entra: no se rompio
   nada, hay algo que todavia no se pudo hacer. Va ARRIBA del primer
   tramo para que se vea sin desplazar: el agente acaba de tocar Guardar
   y esta mirando esa zona. */
.ve-aviso-maestro {
  margin: 10px 0 14px;
  padding: 11px 13px;
  border-radius: 11px;
  border: 1px solid rgba(232, 184, 58, .38);
  background: rgba(232, 184, 58, .10);
  font-size: 13.5px;
  line-height: 1.45;
}
.ve-aviso-maestro b { display: block; margin-bottom: 3px; }
.ve-aviso-maestro p { margin: 0; color: var(--hn-gris2, #848983); }

/* ══ MIS LOGROS ═══════════════════════════════════════════════════════

   Del mockup `mis-logros-v1.html`, con el prefijo `lg-` para no pelearse
   con las clases `hn-` de la home, que se parecen y no son.

   TRES REGLAS QUE MANDAN, y dos se ven en la hoja:

     CERO Y «NO SABEMOS» NO SON LO MISMO. El guion --«—»-- tiene su color
     apagado a proposito: se lee distinto de un numero.

     NADA DE PORCENTAJES INVENTADOS. No hay ninguna clase para el «+34%
     vs. la semana pasada», y es a proposito: la que no existe no se usa
     por descuido. */
.lg-hero { padding: 14px 0 4px; }
.lg-cifra {
  font-size: 52px;
  font-weight: 200;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--hn-lav, #A79BE8);
  font-variant-numeric: tabular-nums;
}
.lg-cifra span { font-size: 24px; font-weight: 300; margin-right: 3px; vertical-align: .28em; }
.lg-pie { font-size: 13px; color: var(--hn-tx2, #8A8A99); margin-top: 8px; line-height: 1.45; }

.lg-arranque {
  background: var(--hn-sup, #111116);
  border: 1px solid var(--hn-linea, #25252F);
  border-radius: 15px;
  padding: 14px 15px;
  margin: 16px 0 4px;
  display: flex; align-items: center; gap: 13px;
}
.lg-arranque-p {
  width: 34px; height: 34px; border-radius: 10px;
  background: #1A1726; border: 1px solid #2E2846;
  display: grid; place-items: center; flex-shrink: 0;
  color: var(--hn-lav, #A79BE8); font-size: 13px;
}
.lg-arranque-a { font-size: 13px; font-weight: 500; line-height: 1.3; }
.lg-arranque-b { font-size: 11.5px; color: var(--hn-tx3, #5A5A68); margin-top: 3px; }

.lg-curva { margin: 20px 0 4px; }
.lg-curva svg { width: 100%; height: 96px; display: block; overflow: visible; }
.lg-ejes {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--hn-tx3, #5A5A68); margin-top: 7px;
}

.lg-sec { margin-top: 24px; }
.lg-sec-t {
  font-size: 11px; color: var(--hn-tx3, #5A5A68);
  letter-spacing: .09em; text-transform: uppercase;
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.lg-sec-t::after { content: ''; flex: 1; height: 1px; background: var(--hn-linea, #25252F); }

.lg-red {
  display: grid; grid-template-columns: 20px 1fr auto; gap: 11px;
  align-items: center; padding: 12px 0;
  border-bottom: 1px solid var(--hn-linea, #25252F);
}
.lg-red:last-child { border-bottom: none; }
.lg-pt { width: 9px; height: 9px; border-radius: 50%; justify-self: center; }
.lg-rn { font-size: 14px; font-weight: 500; }
.lg-rb { font-size: 11px; color: var(--hn-tx3, #5A5A68); margin-top: 2px; font-variant-numeric: tabular-nums; }
.lg-rd { text-align: right; }
.lg-n { font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.lg-g { font-size: 11px; color: var(--hn-verde, #4BC97A); margin-top: 2px; font-variant-numeric: tabular-nums; }
/* SIN CAMBIOS NO ES UNA MALA NOTICIA: va en gris, no en rojo. Y una baja
   tampoco: es un dato, y pintarla de rojo la convierte en un reto. */
.lg-g.cero, .lg-g.baja { color: var(--hn-tx3, #5A5A68); }

.lg-per {
  display: flex; gap: 7px; overflow-x: auto;
  padding: 2px 0 14px; scrollbar-width: none;
}
.lg-per::-webkit-scrollbar { display: none; }
.lg-chip {
  flex-shrink: 0; width: auto; min-height: 0; margin: 0;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--hn-linea, #25252F);
  background: none; color: var(--hn-tx2, #8A8A99);
  font-size: 12px; font-weight: 400; cursor: pointer; white-space: nowrap;
  font-family: inherit;
}
.lg-chip.on {
  background: var(--hn-lav, #A79BE8);
  border-color: var(--hn-lav, #A79BE8);
  color: #12121A; font-weight: 600;
}

.lg-cuatro {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--hn-linea, #25252F);
  border: 1px solid var(--hn-linea, #25252F);
  border-radius: 14px; overflow: hidden; margin-bottom: 16px;
}
.lg-cel { background: var(--hn-sup, #111116); padding: 14px 13px; }
.lg-cn { font-size: 23px; font-weight: 300; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lg-cl { font-size: 11px; color: var(--hn-tx3, #5A5A68); margin-top: 5px; }
.lg-cd { font-size: 10px; color: var(--hn-verde, #4BC97A); margin-top: 3px; }
.lg-cd.sin { color: var(--hn-tx3, #5A5A68); }

.lg-barra { margin-bottom: 14px; }
.lg-bh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.lg-bn { font-size: 13px; font-weight: 500; }
.lg-bv { font-size: 13px; color: var(--hn-tx2, #8A8A99); font-variant-numeric: tabular-nums; }
.lg-bt { height: 6px; background: var(--hn-sup2, #17171E); border-radius: 3px; overflow: hidden; }
.lg-bf { height: 100%; border-radius: 3px; }

.lg-hito {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 0; border-bottom: 1px solid var(--hn-linea, #25252F);
}
.lg-hito:last-of-type { border-bottom: none; }
.lg-hm {
  width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center; flex-shrink: 0; font-size: 13px;
  background: var(--hn-sup2, #17171E); color: var(--hn-tx3, #5A5A68);
  border: 1px solid var(--hn-linea, #25252F);
}
.lg-ht { flex: 1; min-width: 0; }
.lg-ha { font-size: 13.5px; font-weight: 500; color: var(--hn-tx2, #8A8A99); }
.lg-hb { font-size: 11px; color: var(--hn-tx3, #5A5A68); margin-top: 2px; }
.lg-prog {
  height: 4px; background: var(--hn-sup2, #17171E);
  border-radius: 2px; margin-top: 7px; overflow: hidden;
}
.lg-prog i { display: block; height: 100%; background: var(--hn-lav, #A79BE8); border-radius: 2px; }

.lg-nota { font-size: 11.5px; color: var(--hn-tx3, #5A5A68); line-height: 1.5; margin-top: 16px; }
.lg-nota b { color: var(--hn-tx2, #8A8A99); }
.lg-nota-sola { margin-top: 12px; }
.lg-aviso {
  background: var(--hn-sup, #111116);
  border: 1px solid var(--hn-linea, #25252F);
  border-radius: 13px; padding: 12px 14px;
  font-size: 12px; color: var(--hn-tx2, #8A8A99);
  line-height: 1.5; margin-top: 14px;
}
.lg-aviso b { color: var(--hn-lav, #A79BE8); }

/* ══ EL BUSCADOR DEL STOCK ═══════════════════════════════════════════
   Filtra local sobre lo que ya llego, sin pedirle nada al Cerebro. Ver
   `stockQueHacenJuego` en app.js. */
.stock-buscar {
  position: relative;
  margin: 4px 0 14px;
}
.stock-buscar-in {
  width: 100%;
  padding: 11px 34px 11px 14px;
  border: 1px solid var(--border, #25252F);
  border-radius: 12px;
  background: var(--surface-2, #17171E);
  color: var(--text, #EDEDF2);
  font: inherit;
  font-size: 14.5px;
}
.stock-buscar-in::placeholder { color: var(--tx3, #5A5A68); }
.stock-buscar-in:focus { outline: none; border-color: var(--lav, #A79BE8); }
.stock-buscar-x {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--tx3, #5A5A68);
  font-size: 14px;
  cursor: pointer;
}
.stock-buscar-x:hover { color: var(--tx, #EDEDF2); }

.stock-vermas {
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  border: 1px solid var(--border, #25252F);
  border-radius: 12px;
  background: transparent;
  color: var(--text, #EDEDF2);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.stock-vermas-n {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--tx3, #5A5A68);
}

/* ====================================================================
   NEGOCIOS · cascara visual (APP_NEGOCIOS_VISUAL.md, 20/09/2026)

   Usa las mismas variables --hn-* de siempre: no es una paleta nueva,
   es la misma home rediseñada. Solo la ve la cuenta de Gustavo -- ver
   `negociosVisual()` en app.js.
   ==================================================================== */
.ng-urgente { font-size: 13px; color: var(--hn-man); padding: 4px 0 12px; }
.ng-buscar {
  width: 100%; background: var(--hn-carbon2); border: 1px solid var(--hn-borde);
  border-radius: 11px; padding: 11px 12px; color: var(--hn-blanco);
  font-size: 14px; font-family: inherit; margin-bottom: 14px;
}
.ng-buscar::placeholder { color: var(--hn-gris2); }
.ng-pestanas { display: flex; gap: 18px; margin-bottom: 4px; border-bottom: 1px solid var(--hn-borde); }
.ng-pestana {
  background: none; border: none; color: var(--hn-gris2); font-size: 14px;
  font-family: inherit; padding: 0 0 9px; cursor: pointer; border-bottom: 2px solid transparent;
}
.ng-pestana.on { color: var(--hn-blanco); border-bottom-color: var(--hn-luz); }
.ng-pestana span { color: var(--hn-gris2); margin-left: 5px; }
.ng-lista { margin-top: 2px; }
.ng-fila {
  display: flex; align-items: flex-start; gap: 10px; padding: 14px 2px;
  border-bottom: 1px solid var(--hn-borde); cursor: pointer;
}
.ng-punto { width: 6px; height: 6px; border-radius: 50%; background: var(--hn-man); margin-top: 7px; flex: 0 0 auto; }
.ng-punto.gris { background: transparent; }
.ng-nom { font-size: 15.5px; font-weight: 600; color: var(--hn-blanco); }
.ng-sub { color: var(--hn-gris); font-size: 13px; margin-top: 4px; }
.ng-cuando { margin-left: auto; color: var(--hn-gris2); font-size: 12px; white-space: nowrap; padding-top: 2px; }

.ng-quien { padding: 10px 0 4px; }
.ng-quien h2 { font-size: 24px; font-weight: 600; letter-spacing: -.01em; color: var(--hn-blanco); }
.ng-num { color: var(--hn-gris); font-size: 14.5px; margin-top: 8px; }
.ng-etapa-btn {
  display: block; background: none; border: none; padding: 0; margin-top: 6px;
  color: var(--hn-gris2); font-size: 13px; font-family: inherit; cursor: pointer; text-align: left;
}
.ng-prop {
  margin-top: 20px; padding: 14px; background: var(--hn-carbon); border: 1px solid var(--hn-borde);
  border-radius: 14px; cursor: pointer; display: flex; align-items: center;
}
.ng-prop-l1 { font-size: 14.5px; color: var(--hn-blanco); }
.ng-prop-l2 { color: var(--hn-gris); font-size: 12.5px; margin-top: 4px; }
.ng-prop-val { margin-left: auto; text-align: right; font-size: 14.5px; color: var(--hn-luz); }

.ng-accesos { margin-top: 24px; border-top: 1px solid var(--hn-borde); }
.ng-acceso {
  display: flex; align-items: center; padding: 15px 2px; border-bottom: 1px solid var(--hn-borde);
  font-size: 14.5px; color: var(--hn-blanco); cursor: pointer;
}
.ng-acceso.falta { color: var(--hn-man); }
.ng-flecha { margin-left: auto; color: var(--hn-gris2); }
.ng-pie-acc { margin-top: 20px; }

.ng-rotulo { color: var(--hn-gris2); font-size: 12px; margin: 10px 0 10px; }
.ng-campo { margin-bottom: 12px; }
.ng-campo label { display: block; color: var(--hn-gris2); font-size: 12px; margin-bottom: 5px; }
.ng-campo input, .ng-campo select {
  width: 100%; background: var(--hn-carbon); border: 1px solid var(--hn-borde); border-radius: 11px;
  padding: 11px; color: var(--hn-blanco); font-size: 14px; font-family: inherit;
}
.ng-dos { display: flex; gap: 10px; }
.ng-dos .ng-campo { flex: 1; }

.ng-burbuja {
  background: var(--hn-carbon); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px;
  font-size: 13.5px; line-height: 1.45; color: var(--hn-gris); max-width: 88%;
}
.ng-burbuja.ng-yo { background: var(--hn-luz-tenue); color: var(--hn-blanco); margin-left: auto; }
.ng-rastro {
  display: flex; gap: 10px; font-size: 13.5px; color: var(--hn-gris); line-height: 1.5;
  padding: 11px 2px; border-bottom: 1px solid var(--hn-borde);
}
.ng-dia { color: var(--hn-gris2); min-width: 46px; font-size: 12px; padding-top: 1px; }
.ng-nota {
  width: 100%; background: var(--hn-carbon); border: 1px solid var(--hn-borde); border-radius: 12px;
  padding: 11px; color: var(--hn-blanco); font-size: 13.5px; font-family: inherit; resize: none; height: 80px;
}

.ng-paso {
  display: flex; align-items: center; gap: 12px; padding: 13px 2px; font-size: 14.5px;
  color: var(--hn-blanco); border-bottom: 1px solid var(--hn-borde);
}
.ng-bolita { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--hn-gris2); flex: 0 0 auto; }
.ng-paso.ng-hecho { color: var(--hn-gris2); }
.ng-paso.ng-hecho .ng-bolita { background: var(--hn-gris2); border-color: var(--hn-gris2); }
.ng-paso.ng-actual { color: var(--hn-luz); }
.ng-paso.ng-actual .ng-bolita { border-color: var(--hn-luz); box-shadow: inset 0 0 0 3.5px var(--hn-luz); }
.ng-fecha { margin-left: auto; font-size: 12px; color: var(--hn-gris2); }

.ng-motivos { margin-top: 6px; }
.ng-motivo { padding: 13px 2px; border-bottom: 1px solid var(--hn-borde); font-size: 14px; color: var(--hn-blanco); cursor: pointer; }
.ng-motivo.elegido { color: #D96A6A; }