/* CONGRESOS — congresos.css
   Paleta y tipografía heredadas de motordeventas/assets/css/consola.css.
   v0.2: se suman cronómetro, respiración, grabación, coach en vivo y
   todo importado de teleprompter, con la estética de
   Motor de Ventas en vez de la del teleprompter viejo.
   v0.28: 4 temas de color (antes 2) — Oscuro, Claro, Blanco (inspirado
   en el tema "plastic-white" de Kdenlive) y Oscuro Blender (inspirado
   en el tema oscuro de Blender/Kdenlive). En los cuatro, --cian/--azul/
   --ok/--mal quedan IGUALES a propósito: son la marca de OratoriaPRO,
   no parte del fondo — cambiar eso ya se probó una vez (v0.13, "azul
   neón" en los bordes) y no funcionó. */

:root, html[data-tema="oscuro"] {
  --fondo:   #000;
  --panel:   #0c0f17;
  /* Historial de este valor, de prueba en prueba:
     1) gris azulado oscuro original (#1c2230) -- poco visible.
     2) blanco puro -- DEMASIADO fuerte.
     3) gris claro (reusando --tenue) -- visible pero "sin gracia".
     4) azul apagado #5A7FA6 -- el tono aprobado.
     5) #3F5974 -- el mismo azul mezclado ~30% con negro (--fondo es
        negro puro acá), para que se note menos sin cambiar el tono.
        Hacer la línea más FINA no se puede (el navegador redondea el
        ancho del borde al píxel entero pase lo que pase, ya
        verificado a mano), pero bajarle la luminosidad sí funciona
        igual de bien para "que se note menos".
     6) 50% menos visible que el punto anterior -- #202D3A.
     7) ahora: un 20% MÁS visible que el punto anterior (subiendo la
        luminosidad de #202D3A en vez de bajarla), sin tocar el matiz
        de azul en ningún paso de toda esta lista. Si hace falta mover
        esto de nuevo, es siempre este mismo valor --borde, subiendo o
        bajando luminosidad. NO es --cian (el celeste de marca) ni una
        versión de él -- eso ya se probó en v0.13 y no funcionó,
        porque diluía la diferencia entre "es un borde" y "está
        activo/seleccionado". */
  --borde:   #263646;
  --apagado: #3a4150;
  --leido:   #ffffff;
  --texto:   #E8EDF2;
  --tenue:   #7A8896;
  --rotulo-color: #8CEBFF;
  --track:   #202634;
}

/* Claro: el gris mate de la v0.13-16, para quien lo prefiera al negro
   puro pero sin llegar al blanco brillante de "Blanco". */
html[data-tema="claro"] {
  --fondo:   #c7ccd2;
  --panel:   #d3d7dc;
  /* A pedido, se prueba negro en vez del gris mate original (#aab1ba)
     para las líneas divisorias y los bordes de los botones — más
     contraste contra el fondo gris claro. */
  --borde:   #000000;
  --apagado: #8b94a0;
  --leido:   #14181f;
  --texto:   #1e232b;
  --tenue:   #4d5661;
  /* A pedido: el texto de la pestañita "Guión discurso | Palabras |
     Tiempo" pasa a negro (su fondo celeste traslúcido NO se toca,
     queda igual). */
  --rotulo-color: #000000;
  --track:   #b9c0c8;
  /* Mismo ajuste que ya tiene el tema Blanco más abajo (ver su
     comentario): el celeste de marca (--cian) se ve perfecto en negro
     o casi-blanco, pero contra un fondo gris claro como este pierde
     contraste y los botones/textos celestes "no se ven" -- se oscurece
     un poco, solo en este tema, igual que ahí. El fondo de acá es
     todavía más claro que el de Blanco, así que se reusa el mismo
     valor ya probado en vez de arriesgar uno nuevo. */
  --cian: #007a94;
}

/* Blanco: reemplazado — ya no es blanco puro, ahora es el gris neutro
   medio con dejo azulado que tiene el tema real de Kdenlive de tu
   segunda captura (la barra seleccionada del timeline tira a
   azul-grisáceo, no a blanco liso). */
html[data-tema="blanco"] {
  --fondo:   #a0a4a8;
  --panel:   #c7cbcf;
  --borde:   #7d8185;
  /* --apagado (palabras sin leer): se había probado igualarlo EXACTO
     al gris de "Detenido" (--texto, #202326) pero quedaba demasiado
     oscuro para texto que todavía no se leyó -- se vuelve a un gris
     intermedio, más claro que --texto/--leido pero todavía bien
     distinguible del fondo gris medio (--fondo, #a0a4a8) de este
     tema. La palabra ACTUAL sigue marcándose aparte con el celeste. */
  --apagado: #6b6f73;
  --leido:   #16181a;
  --texto:   #202326;
  --tenue:   #52565a;
  --rotulo-color: #004f63;
  --track:   #8f9397;
  /* El celeste de marca (--cian) se ve perfecto en negro o casi-blanco,
     pero contra ESTE gris medio pierde demasiado contraste (su brillo
     queda muy cerca del fondo) — legibilidad gana sobre "el mismo
     celeste en todos lados": acá, solo acá, se oscurece un poco. */
  --cian: #007a94;
}

/* Oscuro Blender: inspirado en el tema oscuro de Blender/Kdenlive —
   gris cálido medio, nunca negro puro (es la seña de identidad de ese
   tema: el negro real cansa la vista en sesiones largas). */
html[data-tema="oscuro-blender"] {
  --fondo:   #363636;
  --panel:   #404040;
  --borde:   #2a2a2a;
  --apagado: #5c5c5c;
  --leido:   #f2f2f2;
  --texto:   #e3e3e3;
  --tenue:   #9a9a9a;
  --rotulo-color: #6fe3ff;
  --track:   #4a4a4a;
}

/* Azul: basado en un fondo real de referencia (captura de Mousepad con
   su esquema "azul cobalto") -- --fondo y --borde de acá abajo son los
   colores tal cual sampleados de esa captura, no inventados: el fondo
   del área de texto (#001B33) y el celeste-azul de su línea actual
   resaltada (#003B70), que acá pasa a ser el borde/línea divisoria en
   vez de un resaltado de selección. El resto de las variables (panel,
   apagado, leído, texto, tenue, rótulo, track) se completaron
   siguiendo el mismo criterio que los otros tres temas oscuros de acá
   arriba: --panel algo más claro que --fondo, --apagado bien apagado
   pero legible contra el fondo, --leido casi blanco. */
html[data-tema="azul"] {
  --fondo:   #001B33;
  --panel:   #062A4D;
  --borde:   #003B70;
  --apagado: #3C5A78;
  --leido:   #ffffff;
  --texto:   #DCE8F5;
  --tenue:   #5D7FA0;
  --rotulo-color: #7EC8FF;
  --track:   #0A3355;
}

:root {
  --cian:    #00E5FF;
  --azul:    #2962FF;
  --ok:      #6BCE3B;
  --mal:     #ff4757;
  /* Se probó bajar el grosor de las líneas finas (var(--borde)) por
     debajo de 1px (0.75px, 0.5px con @media para pantallas retina,
     etc.) y se descartó: se verificó píxel por píxel en Chrome (el
     mismo motor de Android) y el navegador redondea el ancho del
     borde al píxel entero antes de dibujar, sea cual sea el valor
     pedido o la densidad de la pantalla -- así que no hay cambio
     visual real, solo CSS de más. Para una línea genuinamente más
     fina que 1px haría falta reemplazar cada borde por un elemento
     aparte "achicado" con transform (scaleY), un cambio mucho más
     grande y arriesgado para las líneas que además tienen esquinas
     redondeadas (botones, tarjetas) -- no vale la pena para esto. */
  --tam-guion: 3.3rem;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

html[data-tema="claro"] .breathe, html[data-tema="blanco"] .breathe { background: rgba(255,255,255,.97); }
html[data-tema="claro"] .ov, html[data-tema="blanco"] .ov { background: rgba(20,24,30,.55); }

* { margin: 0; padding: 0; box-sizing: border-box; }

html { overflow-x: hidden; }
body {
  background: var(--fondo); color: var(--texto);
  font-family: 'Poppins', system-ui, sans-serif;
  /* 100vh no siempre es el alto REAL visible en Chrome mobile -- la
     barra de direcciones y la barra de gestos de Android le restan
     espacio que "vh" no descuenta (se calcula sobre el viewport más
     grande posible, con esas barras ocultas). Como más abajo el
     scroll queda bloqueado a propósito (para que todo entre "a
     pantalla" sin scrollear), esa diferencia no se puede compensar
     scrolleando un poco como en una página normal -- se corta la
     última fila sin forma de llegar a verla (la barra inferior, en
     horizontal). 100dvh sí sigue el alto visible real, en vivo,
     aunque la barra de Chrome aparezca/desaparezca. La línea de
     100vh queda antes a propósito, como resguardo para el puñado de
     navegadores viejos que todavía no conocen "dvh" (ahí la ignoran
     y se quedan con esta). */
  height: 100vh;
  height: 100dvh;
  display: flex; flex-direction: column; overflow: hidden;
}

/* ===================== ENCABEZADO ===================== */

header {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 10px;
  padding: 10px 20px; border-bottom: 1px solid var(--borde); flex-shrink: 0;
  position: relative; z-index: 30; overflow: visible; min-width: 0;
}
.cab-izq { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; flex-wrap: wrap; row-gap: 8px; }
.cab-centro { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; margin: 0 auto; }
.marca { display: flex; align-items: center; gap: 9px; flex-shrink: 0;
  text-decoration: none; color: inherit; cursor: pointer; opacity: 1; transition: opacity .15s; }
.marca:hover { opacity: .8; }
.marca i { color: var(--cian); font-size: 1.6rem; }
.marca-textos { display: flex; flex-direction: column; line-height: 1.15; }
.marca-op { font-weight: 600; font-size: 1.1rem; letter-spacing: .5px; }
.marca-op b { color: var(--cian); font-weight: 600; }
.marca-prod { font-size: .64rem; color: var(--tenue);
              text-transform: uppercase; letter-spacing: 2.4px; }

.modo-switch { display: inline-flex; border: 1px solid var(--borde); border-radius: 8px;
               overflow: hidden; flex-shrink: 0; }
.modo-op { background: transparent; border: none; color: var(--tenue); font-family: inherit;
           font-size: .82rem; padding: 8px 13px; cursor: pointer; transition: background .15s, color .15s; }
.modo-op:hover { color: var(--texto); }
/* Auto e IA activos usaban dos azules DISTINTOS (--cian acá, --azul
   en la de abajo) -- a pedido, ahora los dos usan el mismo --cian:
   son el mismo tipo de estado (modo activo), tienen que verse del
   mismo color, no uno "especial" distinto al resto de la marca. */
.modo-op.activa { background: var(--cian); color: var(--fondo); font-weight: 500; }
/* "IA" en negrita se nota más que "Auto" con el mismo peso -- ayuda a
   distinguirlos de un vistazo, esté activo o no (independiente del
   color de arriba). */
.modo-op[data-modo="ia"] { font-weight: 800; }

.ritmo-caja { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
              color: var(--tenue); font-size: .78rem; position: relative; }
.ritmo-caja i { color: var(--cian); }
/* Ícono + flechita: juntos avisan "esto se abre" — antes era un ícono
   suelto sin ninguna pista de que se podía tocar. La flecha es la
   misma que ya usamos en otros desplegables (tema, color, renglones). */
.ritmo-icono-btn { background: transparent; border: none; padding: 2px; display: flex;
  align-items: center; gap: 1px; cursor: pointer; }
.ritmo-flecha { font-size: .6rem !important; }

/* El valor YA NO es un tooltip que aparece al pasar el mouse — ahora
   es fijo, siempre a la vista, grande y en el celeste de marca, mismo
   tamaño de letra que el texto del botón Play (.85rem) para que pese
   visualmente lo que corresponde a un dato así de importante. */
.ritmo-numero { font-size: .85rem; font-weight: 700; color: var(--cian);
  font-family: var(--mono); min-width: 30px; text-align: right; }

.deslizador { width: 68px; accent-color: var(--cian); background: transparent; cursor: pointer; }

/* Panel para escribir la velocidad exacta a mano — se abre tocando el
   ícono del velocímetro, para cuando el slider no permite ser tan
   preciso como hace falta. */
.ritmo-manual { display: none; position: absolute; top: 100%; left: 0; margin-top: 8px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 8px;
  padding: 8px; z-index: 15; align-items: center; gap: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.ritmo-manual.abierto { display: flex; }
.ritmo-manual input { width: 56px; background: transparent; border: 1px solid var(--borde);
  border-radius: 6px; color: var(--texto); padding: 5px 6px; font-family: inherit;
  font-size: .85rem; text-align: center; }
.ritmo-manual input:focus { outline: none; border-color: var(--cian); }
.ritmo-manual span { font-size: .78rem; color: var(--tenue); }

.pastilla-estado {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border: 1px solid var(--borde);
  border-radius: 20px; font-size: .8rem; color: var(--texto);
  white-space: nowrap; flex-shrink: 0; width: 138px; justify-content: center;
}
#estado { display: inline-block; }
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--tenue); transition: background .25s; }
.punto.ok  { background: var(--ok);  box-shadow: 0 0 8px var(--ok); }
.punto.mal { background: var(--mal); }

/* Vúmetro: SOLO en modo IA mientras está escuchando de verdad — el
   resto del tiempo (modo Auto siempre, o modo IA sin escuchar) sigue
   mostrando el texto de siempre (#estado). Fila simple de cuadraditos
   que se van prendiendo de izquierda a derecha con el volumen real del
   micrófono — no es un ecualizador de espectro, es un medidor de pico
   básico. Ver Escucha.al('volumen', ...) en congresos.js. */
.vumetro { display: none; align-items: center; gap: 2px; }
.vumetro i { width: 4px; height: 11px; border-radius: 1px; background: var(--tenue);
  opacity: .5; transition: background .08s, opacity .08s; }
.vumetro i.prendido { background: var(--cian); opacity: 1; }
/* Peak hold: se queda marcado un rato en blanco (bien distinto del
   celeste normal) aunque el volumen ya bajó — ver la lógica de caída
   en congresos.js. */
.vumetro i.pico { background: #fff; opacity: 1; }

/* Cronómetro: el protagonista del centro de la barra. */
.timer-wrap { position: relative; display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.timer { font-family: var(--mono); font-size: 2.1rem; font-weight: 700; color: var(--leido);
         min-width: 96px; text-align: center; letter-spacing: 1px; transition: color .2s, opacity .15s;
         cursor: pointer; }
.timer:hover { opacity: .8; }
.timer:active { opacity: .6; }
.timer.alerta { color: #FFD46A; }
.timer.rojo { color: var(--mal); }
.timer.agotado { color: var(--mal); animation: latir .7s ease-in-out infinite; }
@keyframes latir { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.timer-menu-btn { background: transparent; border: 1px solid var(--borde); color: var(--tenue);
  border-radius: 8px; padding: 8px 11px; cursor: pointer; display: flex; align-items: center;
  justify-content: center; font-size: 1.05rem; transition: border-color .15s, color .15s; }
.timer-menu-btn:hover { color: var(--cian); border-color: var(--cian); }
.timer-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 8px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; padding: 6px;
  display: none; flex-direction: column; gap: 2px; z-index: 40; min-width: 200px; }
.timer-menu.active { display: flex; }
.timer-menu button { background: transparent; border: none; color: var(--texto); text-align: left;
  padding: 8px 12px; border-radius: 6px; cursor: pointer; font-family: inherit; font-size: .8rem;
  display: flex; align-items: center; gap: 8px; white-space: nowrap; width: 100%; }
.timer-menu button:hover { background: rgba(0,229,255,.08); color: var(--cian); }
.timer-menu .sep { height: 1px; background: var(--borde); margin: 3px 0; }

/* Selector de tema — mismo patrón que el menú del cronómetro (botón +
   desplegable), pero con 4 opciones en vez de una lista de presets. */
.tema-wrap { position: relative; flex-shrink: 0; }
.tema-menu { position: absolute; top: 100%; right: 0; margin-top: 8px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; padding: 6px;
  display: none; flex-direction: column; gap: 2px; z-index: 40; min-width: 170px; }
.tema-menu.active { display: flex; }
.tema-menu button { background: transparent; border: none; color: var(--texto); text-align: left;
  padding: 8px 12px; border-radius: 6px; cursor: pointer; font-family: inherit; font-size: .8rem;
  display: flex; align-items: center; gap: 8px; white-space: nowrap; width: 100%; }
.tema-menu button:hover { background: rgba(0,229,255,.08); color: var(--cian); }
.tema-menu button.activo { color: var(--cian); }
.tema-menu button.activo i { color: var(--cian); }
.tema-menu button .ph-check { margin-left: auto; }

.boton {
  background: transparent; border: 1px solid var(--cian); color: var(--cian);
  font-family: inherit; font-size: .85rem; font-weight: 500;
  padding: 9px 20px; border-radius: 8px; cursor: pointer; text-decoration: none;
  transition: background .2s, color .2s; display: inline-flex; align-items: center; gap: 8px;
}
.boton:hover { background: var(--cian); color: var(--fondo); }
.boton.grabar.activo { background: var(--cian); color: var(--fondo); border-color: var(--cian); }
.boton.chico { font-size: .84rem; padding: 8px 16px; border-color: var(--borde); color: var(--texto); }
.boton.chico:hover { border-color: var(--cian); color: var(--cian); background: transparent; }
.boton.chico.congelado { border-color: var(--cian); color: var(--cian); }
/* Cambios sin guardar: parpadea como una baliza — mismo lenguaje visual
   que "agotado" en el cronómetro, para que sea inconfundible. */
.boton.chico.pendiente { border-color: #FFD46A; color: #FFD46A; animation: latir .8s ease-in-out infinite; }
.boton.chico.icono { padding: 8px 11px; }
.boton.chico.icono i { font-size: 1.05rem; line-height: 1; }
.boton.chico.activo { background: var(--cian); border-color: var(--cian); color: var(--fondo); }
.boton.chico.activo:hover { background: var(--cian); color: var(--fondo); }

/* Grabar — el propio botón es el indicador (icono mic → stop, relleno
   rojo pulsante), no hace falta una insignia aparte que sume ancho. */
.boton.rec { border-color: var(--mal); color: var(--mal); }
.boton.rec:hover { background: var(--mal); color: #fff; }
.boton.rec.grabando { background: var(--mal); color: #fff; border-color: var(--mal); animation: latir 1.2s ease-in-out infinite; }

.barra-acciones { display: inline-flex; align-items: stretch; flex-shrink: 0;
                  border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; }
.barra-acciones .boton { white-space: nowrap; border: none; border-radius: 0; padding: 8px 13px; }
.barra-acciones .boton + .boton { border-left: 1px solid var(--borde); }
.barra-acciones .boton.icono { padding: 8px 10px; }
#btn { width: 92px; justify-content: center; flex-shrink: 0; }

.cabecera-derecha { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; flex-wrap: wrap;
  row-gap: 8px; justify-content: flex-end; }
.letra-global { display: inline-flex; align-items: center; gap: 6px; color: var(--tenue); }
.letra-global .deslizador { width: 53px; }

/* Coach: vive adentro del rótulo "Asistente" ("ASISTENTE | ONLINE"),
   no como botón aparte. Conectado por defecto. Sin fondo propio —
   hereda la tipografía del rótulo (mayúsculas, .66rem) y el único
   cambio entre conectado/desconectado es el color del texto+ícono:
   celeste brillante (Online) o gris apagado (Offline). */
.rotulo-online { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: none;
  padding: 0; margin: 0; font: inherit; text-transform: inherit; letter-spacing: inherit;
  color: var(--tenue); cursor: pointer; transition: color .15s; }
.rotulo-online:hover { color: var(--cian); }
.rotulo-online.conectado { color: var(--cian); }
.rotulo-online i { font-size: 1em; line-height: 1; }

/* Dónde aparecen los mensajes del coach: en el texto, o acá en Mensajes. */
.destino-switch { display: flex; border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.destino-op { flex: 1; background: transparent; border: none; color: var(--tenue); font-family: inherit;
  font-size: .7rem; padding: 7px 6px; cursor: pointer; transition: background .15s, color .15s; }
.destino-op:hover { color: var(--texto); }
.destino-op.activa { background: var(--cian); color: var(--fondo); font-weight: 500; }

.aviso { margin: 0 24px; padding: 10px 14px; border-radius: 8px; font-size: .8rem;
  background: rgba(255,71,87,.08); border: 1px solid var(--mal); color: var(--mal); display: none; flex-shrink: 0; }
.aviso.visible { display: block; }

/* ===================== BARRA POST-GRABACIÓN ===================== */
.postrec { display: none; align-items: center; gap: 14px; flex-wrap: wrap; padding: 8px 24px;
  border-bottom: 1px solid var(--borde); background: var(--panel); flex-shrink: 0; }
.postrec.activo { display: flex; }
.postrec .listo { color: var(--ok); font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .5px; }

.reproductor { display: none; }
.reproductor.visible { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 240px; }
.reproductor.sonando .rep-barra { box-shadow: 0 0 10px rgba(0,229,255,.25); }
.rep-btn, .rep-bajar { background: transparent; border: 1px solid var(--cian); color: var(--cian);
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; transition: all .18s; }
.rep-btn i { font-size: 1rem; }
.rep-btn:hover, .rep-bajar:hover { background: var(--cian); color: var(--fondo); }
.rep-bajar { width: 28px; height: 28px; border-color: var(--borde); color: var(--apagado); }
.rep-bajar:hover { border-color: var(--cian); background: transparent; color: var(--cian); }
.rep-barra { flex: 1; height: 4px; background: var(--track); border-radius: 3px; position: relative; cursor: pointer; min-width: 60px; }
.rep-barra::before { content: ''; position: absolute; inset: -9px 0; }
.rep-relleno { height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--azul), var(--cian));
  box-shadow: 0 0 10px rgba(0,229,255,.5); }
.rep-aguja { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: var(--cian); box-shadow: 0 0 12px var(--cian); }
.rep-tiempo { font-family: var(--mono); font-weight: 300; font-size: .89rem; color: var(--tenue);
  flex-shrink: 0; letter-spacing: .5px; }

/* ===================== LAS DOS COLUMNAS ===================== */

.tablero {
  flex: 1; min-height: 0; display: grid;
  grid-template-columns: minmax(0,1fr) minmax(280px,340px);
  gap: 1px; background: var(--borde);
}
.tablero.otros-min { grid-template-columns: minmax(0,1fr) 52px; }

.columna { background: var(--fondo); display: flex; flex-direction: column; min-height: 0; position: relative; }

.col-titulo {
  padding: 11px 18px;
  border-bottom: 1px solid var(--borde);
  background: linear-gradient(180deg, rgba(41,98,255,.06), transparent);
  display: flex; align-items: center; gap: 12px; flex-shrink: 0; flex-wrap: wrap; row-gap: 8px;
}
.col-progreso { margin-left: auto; }
.col-colapsar { margin-left: auto; }
.col-rotulo {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px;
  text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600;
  color: var(--rotulo-color);
  background: rgba(0,229,255,.08);
  border: 1px solid rgba(0,229,255,.28);
  border-radius: 7px; padding: 5px 12px;
}
/* Tamaño de fuente separado por rótulo — antes vivía adentro de
   .col-rotulo y subía/bajaba a los dos juntos. Ahora cada uno se
   edita acá, por separado, sin tocar al otro. */
.rotulo-guion     { font-size: .75rem; }
.rotulo-asistente { font-size: .73rem; }
.col-progreso { font-family: var(--mono); font-size: .78rem; color: var(--tenue); }
.col-titulo .boton.chico { font-size: .72rem; padding: 6px 10px; }

#colStats b { font-weight: inherit; }   /* mismo peso que el resto — nada se resalta distinto */
.col-rotulo-sep { margin: 0 8px; opacity: .5; }
#tituloGuion.editando #colStats { display: none; }

.col-cuerpo { flex: 1; overflow-y: auto; padding: 14px 18px 20px; min-height: 0; }
.col-cuerpo::-webkit-scrollbar { width: 6px; }
.col-cuerpo::-webkit-scrollbar-thumb { background: var(--track); border-radius: 6px; }

.tablero.otros-min .columna.otros .col-titulo { padding: 6px 7px; justify-content: center; }
.tablero.otros-min .columna.otros .col-rotulo,
.tablero.otros-min .columna.otros .col-cuerpo { display: none; }

/* ---------- el texto (teleprompter) ---------- */

/* Wrapper sin scroll propio, del mismo tamaño exacto que #guion (que sigue
   siendo el que scrollea) — existe solo para que la franja de Modo Grilla
   se pueda centrar respecto del ÁREA DE LECTURA nomás, sin contar el alto
   variable del título de arriba (que cambia cuando aparecen las tarjetas
   de indicadores al editar). */
.guion-viewport { position: relative; flex: 1; min-height: 0; }
.guion-viewport > .guion { position: absolute; inset: 0; z-index: 2; }

/* Modo Grilla: franja fija en el área de lectura, con el alto exacto de
   3 renglones al tamaño de letra que esté puesto (line-height es 1.5,
   así que 3 renglones = 4.5 veces el tamaño de fuente). Va DETRÁS del
   texto (z-index 1, #guion arriba con z-index 2): el texto sigue con su
   resaltado de siempre (leído, actual, por leer) — la franja solo le pone
   un fondo de color al tramo donde cae la línea que se está leyendo ahora.
   pointer-events:none para no interferir con nada (edición, clicks). El
   "top" NO lo pone este CSS: lo escribe siempre congresos.js, calculado
   a partir de lo mismo que usa guion.js para el scroll — así la franja
   pintada y el punto real donde se alinea el texto nunca pueden quedar
   desincronizados entre sí. */
.franja-grilla { position: absolute; left: 0; right: 0; top: 0;
  height: calc(var(--tam-guion) * 4.5); background: var(--cian); opacity: .9;
  pointer-events: none; z-index: 1; display: none; }
.franja-grilla.activa { display: block; }

/* Candado: OJO, no va adentro de .franja-grilla (aunque se vea pegado
   a ella) — .franja-grilla vive en la MISMA capa que el fondo (z-index
   1, detrás del texto), así que cualquier hijo suyo queda atrapado ahí
   también sin importar su propio pointer-events: el texto de arriba
   (#guion, z-index 2) le seguiría tapando los clics. Por eso es
   hermano de #guion y de .franja-grilla, con su PROPIO z-index por
   encima de los dos.

   Historial de intentos previos con este panel, por si se vuelve a
   tocar: primero apilado en columna (desbordaba con pocos renglones),
   después en fila horizontal DENTRO de la franja (fondo semitransparente
   dejaba traslucir las letras del guion de atrás), después ventana
   flotante negra pero con el candado en su PROPIA caja separada, con un
   huequito antes de la barra de los otros 3 — quedaban como "dos cosas"
   en vez de una. Ahora: UNA sola caja negra continua (`.franja-controles`)
   con los 4 botones adentro, todos con el mismo diseño (celeste tenue +
   ícono celeste neón) — el candado es sencillamente el primero de la
   lista, siempre visible; los otros tres (mano, color, renglones) se
   muestran/ocultan juntos según esté trabada o no. Posición fija arriba
   a la derecha de la franja (no centrado en su alto). */
.franja-controles { position: absolute; right: -14px; z-index: 10; display: none;
  background: #000; border-radius: 12px; padding: 8px;
  flex-direction: column; align-items: stretch; gap: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.franja-controles.activa { display: flex; }
.franja-candado { pointer-events: auto; background: rgba(0,229,255,.12); border: none; border-radius: 6px;
  color: var(--cian); width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  font-size: .85rem; cursor: pointer; transition: width .15s, height .15s, font-size .15s; }
.franja-candado:hover { background: rgba(0,229,255,.22); }
/* Mientras está destrabada: crece al tamaño de los demás botones del
   panel (38px, el que ya tenían) y parpadea — mismo lenguaje visual que
   el botón de guardar cuando hay cambios sin guardar (.pendiente), para
   que quede claro que hay que cerrarla antes de poder darle Play.
   Trabada, en cambio, es chica (22px) — el tamaño "de siempre", para no
   llamar la atención cuando no hace falta tocarla. */
.franja-candado.pendiente { color: #FFD46A; animation: latir .8s ease-in-out infinite;
  width: 38px; height: 38px; border-radius: 8px; font-size: 1.3rem; }

/* Los otros 3 (mano, color, renglones) — puro wrapper de visibilidad
   ahora, sin fondo propio (el fondo negro ya lo pone la caja de
   afuera): se muestran/ocultan juntos, debajo del candado, dentro de
   la MISMA caja. */
.franja-controles-extra { display: none; flex-direction: column; align-items: stretch; gap: 6px; }
.franja-controles-extra.destrabada { display: flex; }

/* La "manito" reemplaza a la agarradera vieja (los puntitos flotando en
   el medio de la franja) Y a las flechas de subir/bajar — un solo
   botón que hace de indicador visual ("esto se puede mover") y de
   agarradera de arrastre a la vez: mantenerlo presionado y arrastrar
   mueve la franja, igual que antes. */
.franja-flecha { background: rgba(0,229,255,.12); border: none; border-radius: 8px; color: var(--cian);
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; cursor: grab; padding: 0; }
.franja-flecha:hover { background: rgba(0,229,255,.22); }
.franja-flecha:active, .franja-flecha.arrastrando { cursor: grabbing; }

/* Mientras está destrabada, un borde punteado en la franja avisa "esto
   se puede mover" sin depender de que justo estés mirando el candado. */
.franja-grilla.destrabada { outline: 2px dashed rgba(0,0,0,.35); outline-offset: -2px; }
.franja-grilla.arrastrando { cursor: grabbing; }

/* Capa de arrastre: invisible, del mismo tamaño exacto que la franja
   (JS le copia top/height), pero por ENCIMA de #guion (z-index 3, como
   el candado) — a diferencia de la franja pintada, que tiene que seguir
   detrás del texto para el efecto visual, esta capa sí necesita estar
   arriba para poder recibir clicks en cualquier punto, no solo donde
   no hay letras. pointer-events:none mientras está trabada (deja pasar
   los clicks al texto/editor de abajo, como si no existiera). */
.franja-arrastre-area { position: absolute; left: 0; right: 0; top: 0; height: 0;
  z-index: 3; pointer-events: none; display: none; }
.franja-arrastre-area.activa { display: block; }
.franja-arrastre-area.destrabada { pointer-events: auto; cursor: grab; }
.franja-arrastre-area.arrastrando { cursor: grabbing; }

/* Selector de color de la franja: mismo patrón que el selector de tema
   del header (botón + menú desplegable con las opciones), para que se
   sienta igual a algo que ya conocés de otra parte de la app. Ahora
   vive DENTRO del panel negro, así que su botón sigue el mismo estilo
   celeste-sobre-negro que las flechas. */
.franja-color-wrap { position: relative; }
.franja-color-btn { background: rgba(0,229,255,.12); border: none; border-radius: 8px; color: var(--cian);
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; cursor: pointer; }
.franja-color-btn:hover { background: rgba(0,229,255,.22); }
.franja-color-menu { display: none; position: absolute; top: 0; right: 100%; margin-right: 8px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 8px; padding: 6px;
  flex-direction: column; gap: 2px; min-width: 160px; z-index: 10; box-shadow: 0 4px 16px rgba(0,0,0,.35); }
.franja-color-menu.active { display: flex; }
.franja-color-menu button { background: transparent; border: none; color: var(--texto); text-align: left;
  display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; cursor: pointer;
  font-size: .85rem; }
.franja-color-menu button:hover { background: rgba(0,229,255,.08); }
.franja-color-menu button.activo { font-weight: 600; }
.franja-color-menu .swatch { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; }
.franja-color-menu .ph-check { margin-left: auto; }

/* Selector de renglones: mismo patrón visual que el de color (reutiliza
   sus clases .franja-color-btn/.franja-color-menu). */
.franja-lineas-wrap { position: relative; }
.franja-lineas-wrap .franja-color-btn { font-weight: 700; font-size: 1.05rem; }

/* Espaciadores en blanco arriba y abajo de TODO el texto — sin esto, la
   primera y la última línea nunca podrían llegar a pisar la franja (haría
   falta scrollear a negativo, o más allá del final del texto). Los crea y
   les pone el alto Guion.actualizarEspaciadores(); acá solo el reset. */
.espaciador-franja { margin: 0; padding: 0; }
.parrafo { margin-bottom: 1.1em; }

.palabra {
  color: var(--apagado);
  font-size: var(--tam-guion); line-height: 1.5; font-weight: 500;
  transition: color .12s;
}
.palabra.leida  { color: var(--leido); }
.palabra.actual { color: var(--cian); }

/* Sobre la franja de Modo Grilla, blanco/celeste se pierden contra el
   fondo celeste — acá se necesita lo opuesto: oscuro sobre claro. Lo
   que todavía no se leyó (--apagado, ya oscuro) no se toca: contrasta
   bien tal cual, como en la vista "antes de dar Play". */
.palabra.en-franja.leida  { color: #0a0a0a; font-weight: 900; }
.palabra.en-franja.actual { color: #0a0a0a; font-weight: 900; }
.palabra.en-franja:not(.leida):not(.actual) { color: #333333; font-weight: 500; }

/* Indicador embebido en el guion (respirar/agua/pausa/etc.) — no es una
   palabra: no se lee en voz alta, no cuenta para el avance ni para el
   matching del modo IA. Es una viñeta fija en ese punto del texto. */
.indicador {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: middle;
  line-height: 1;
  font-size: 1.617rem;   /* fijo — 30% menos que la vuelta pasada (2.31rem), que seguía siendo grande */
  font-weight: 600; letter-spacing: .3px; text-transform: uppercase;
  padding: .2em .55em; border-radius: 20px; margin: 0 6px;
  background: rgba(0,229,255,.1); border: 1px solid var(--cian); color: var(--cian);
}
.indicador i { font-size: 1.1em; }

.guion-vacio { color: var(--apagado); font-size: .9rem; line-height: 1.6; padding-top: 40px; text-align: center; }

/* CTA cuando no hay texto cargado — "Pegá tu guion", bien visible. */
.guion-cta { height: 100%; min-height: 260px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; text-align: center; color: var(--apagado); }
.guion-cta i { font-size: 2.4rem; color: var(--borde); }
.guion-cta p { font-size: .92rem; max-width: 320px; line-height: 1.5; }

/* Edición directa sobre "Guión discurso": el mismo lugar que la
   lectura, ahora editable — nada de una caja aparte en otro sitio. Sin
   foco casi no se nota que es distinto del modo lectura; el borde cian
   es la única señal de "estás escribiendo acá". */
.guion.editando-directo {
  outline: none; border-radius: 10px; caret-color: var(--cian);
  border: 1px solid transparent; margin: -1px; transition: border-color .15s;
}
.guion.editando-directo:focus { border-color: var(--cian); }
.guion.editando-directo.recibiendo-drop { border-color: var(--cian); background: rgba(0,229,255,.03); }
.guion.editando-directo p { font-size: var(--tam-guion); line-height: 1.5; color: var(--texto); margin-bottom: 1.1em; }
.guion.editando-directo:empty:before,
.guion.editando-directo p:only-child:empty:before {
  content: 'Pegá acá el texto del discurso. Una línea en blanco separa párrafos.';
  color: var(--apagado); font-size: 1rem; line-height: 1.5; pointer-events: none;
}

/* Cartel del coach — VIVE ADENTRO de #guion (como hijo suyo), no como
   overlay fijo de toda la pantalla: así scrollea junto con el texto y
   queda pegado al punto exacto del guion donde se ancló. SIEMPRE
   position:absolute y sin agregar altura al documento: no empuja nada,
   no dispara ningún scroll — es una etiqueta que se superpone al
   texto, no una inserción real en el flujo. "left" y "top" los pone
   SIEMPRE congresos.js con un valor exacto en píxeles (no está
   centrado): pegado justo después de la última palabra del párrafo
   donde se ancló, en la MISMA línea si entra, o al principio de la
   línea de abajo si no entra — para que el ojo lo lea como una
   continuación más del texto, no como un cartel flotando en el medio
   de la pantalla. Ver calcularDestinoCue() en congresos.js. */
.cue-inline { position: absolute;
  z-index: 5; pointer-events: none; display: block; font-size: 1.05rem; font-weight: 600;
  letter-spacing: .4px; padding: 8px 22px; border-radius: 24px; text-transform: uppercase;
  color: #04121a; background: var(--cian); box-shadow: 0 6px 24px rgba(0,0,0,.5); white-space: nowrap;
  animation: cueIn .2s ease; }
.cue-inline.warn  { background: #FFD46A; }
.cue-inline.alert { background: var(--mal); color: #fff; }
@keyframes cueIn { from { opacity: 0; transform: scale(.85) translateY(6px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* ---------- mensajes / coach (antes "Otros") ---------- */

.mensajes-cuerpo { display: flex; flex-direction: column; gap: 14px; height: 100%; }

.mensaje-actual {
  flex: 0 0 auto; min-height: 90px; border: 1px solid var(--borde); border-radius: 10px;
  background: var(--panel); padding: 16px; display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: 1.1rem; font-weight: 500; color: var(--leido); line-height: 1.4;
}
.mensaje-actual .mensaje-vacio { color: var(--apagado); font-size: .85rem; font-weight: 400; }

/* Indicadores: tarjetas para arrastrar al editor mientras escribís el
   guion. No son mensajes del coach — son marcas que dejás vos mismo.
   Viven en la fila de "Guión discurso" y solo se muestran mientras el
   editor está activo (le pisan el lugar al "0%" de progreso, que ahí
   no tiene sentido mostrar). */
#tituloGuion { position: relative; }
.indicadores-grid { display: none; align-items: center; gap: 8px; }
#tituloGuion.editando .indicadores-grid { display: flex; }
#tituloGuion.editando .col-progreso { display: none; }

.indicador-card {
  display: flex; align-items: center; gap: 8px; padding: .5em .9em; border-radius: 999px;
  border: 2px solid var(--cian); background: rgba(0,229,255,.1); color: var(--cian);
  font-family: inherit; font-weight: 600; white-space: nowrap;
  font-size: calc(var(--tam-guion) * 0.35);   /* crece y achica junto con el "Aa" del texto real */
  cursor: grab; user-select: none; box-shadow: 0 0 14px rgba(0,229,255,.2);
}
.indicador-card i { color: var(--cian); font-size: 1.2em; flex-shrink: 0; }
.indicador-card:hover { background: rgba(0,229,255,.18); }
.indicador-card:active { cursor: grabbing; }
.indicador-card.arrastrando { opacity: .4; }
.indicador-card.personalizado { cursor: pointer; }

/* Deshacer: mismo lugar que las tarjetas, pero sin el estilo "azul
   neón" (no es un indicador, es una acción distinta). */
.indicador-card.deshacer { border-color: var(--borde); background: transparent; color: var(--tenue); cursor: pointer; }
.indicador-card.deshacer i { color: var(--tenue); }
.indicador-card.deshacer:hover { border-color: var(--tenue); color: var(--texto); background: rgba(255,255,255,.04); }
.indicador-card.deshacer:hover i { color: var(--texto); }

/* La viñeta VIVA que se ve mientras estás editando — la misma pinta que
   la que arma guion.js al terminar de editar, para que no haya ningún
   salto visual entre "editando" y "leyendo". contenteditable="false"
   la vuelve un bloque atómico: se borra entera de un backspace, no
   se puede escribir "adentro" por accidente. */
.indicador-editor {
  position: relative; display: inline-flex; align-items: center; gap: 5px; vertical-align: middle;
  line-height: 1;
  font-size: 2rem;   /* más grande que la vista final (1.617rem) — a propósito,
    para que la "×" entre cómoda y se pueda tocar bien mientras editás */
  font-weight: 600; letter-spacing: .3px; text-transform: uppercase;
  padding: .2em 1.1em .2em .55em; border-radius: 20px; margin: 0 6px; user-select: none;
  background: rgba(0,229,255,.1); border: 1px solid var(--cian); color: var(--cian);
  cursor: grab;
}
.indicador-editor i { font-size: 1.1em; }
.indicador-editor.arrastrando { opacity: .4; }

/* La "×" para sacar la viñeta de un toque, sin tener que seleccionarla
   ni nada — solo existe en la versión editable, nunca en la lectura final. */
.indicador-x {
  position: absolute; top: -.25em; right: -.25em; width: .8em; height: .8em;
  display: flex; align-items: center; justify-content: center;
  background: var(--mal); color: #fff; border: none; border-radius: 50%;
  font-size: inherit;   /* los <button> no heredan font-size solos — hay que forzarlo */
  line-height: 1; cursor: pointer; padding: 0;
}
.indicador-x:hover { background: #ff2c40; }
.indicador-x i { font-size: .6em; }

.mensaje-historial { flex: 1; overflow-y: auto; display: flex; flex-direction: column-reverse; gap: 8px; min-height: 0; }
.mensaje-item { font-size: .78rem; color: var(--tenue); padding: 6px 10px; border-left: 2px solid var(--borde); }
.mensaje-item.remoto { border-left-color: var(--cian); }
.mensaje-item time { display: block; font-family: var(--mono); font-size: .62rem; color: var(--apagado); margin-bottom: 2px; }

#btnAsistenteToggle { display: none; }
/* La barra inferior móvil (Fila 1 + Fila 2, con el botón de flecha)
   solo existe para la versión mobile — sin esta línea, el botón de
   flecha de la Fila 2 (que vive fijo en el HTML, sin JS que lo mueva)
   quedaba visible también en desktop, apenas debajo del guion. La
   media query de más abajo la vuelve a mostrar en mobile. */
.barra-inferior-movil { display: none; }
/* Botón flotante para ocultar/mostrar la barra inferior entera — solo
   tiene sentido en mobile horizontal (ver el @media orientation:
   landscape más abajo, que es el único lugar que lo vuelve a mostrar);
   en desktop y en mobile vertical no existe forma de "ocultar" la
   barra que tenga sentido (en vertical ya arranca colapsada). */
.fab-barra-movil { display: none; }

@media (max-width: 900px) {
  .tablero, .tablero.otros-min { grid-template-columns: 1fr; }
  .columna.otros { min-height: 260px; }
  /* Con el panel de Asistente ya colapsado (el usuario lo achicó, o se
     colapsa solo al entrar en este ancho — ver aplicarMensajesMin() en
     congresos.js), no tiene sentido seguir reservándole 260px: eso era
     justo lo que hacía que "ocupe toda la parte de abajo" e impida leer
     el guion. Colapsado, que ocupe solo lo que mide su propia pestaña.
     OJO: no alcanza con min-height:0 — sin un grid-template-rows
     explícito, el grid reparte el espacio sobrante 50/50 entre las dos
     filas "auto" (los tracks "auto" SÍ entran en el reparto de espacio
     extra cuando el contenedor tiene alto de sobra, por spec). Con
     "1fr auto", el guion se lleva todo lo que sobra y la pestaña de
     Asistente se queda con lo justo. */
  .tablero.otros-min { grid-template-rows: 1fr auto; }
  .tablero.otros-min .columna.otros { min-height: 0; }
  /* A pedido, va todavía más lejos: ni siquiera la pestañita chica de
     "Asistente | Online" se queda ocupando lugar — se oculta del todo,
     y el guion se lleva el 100% del alto. Se accede de vuelta con
     #btnAsistenteToggle, adentro del panel de "más opciones" — no con
     el "<" de siempre, que vive DENTRO de esta columna y por lo tanto
     también queda oculto junto con ella. */
  .tablero.otros-oculto { grid-template-rows: 1fr; }
  .tablero.otros-oculto .columna.otros { display: none; }
  /* El "0%" de progreso también se saca — es otro pedacito de lugar
     que no hace falta cuando el objetivo es leer, no monitorear el
     avance en números. */
  .col-progreso { display: none; }
  /* A pedido, las tarjetas de indicadores (Respirar/Agua/Pausa/
     Preguntar) se sacan SOLO en mobile: ocupan demasiado lugar en una
     pantalla chica y ahí no cumplen la misma función que en desktop
     (arrastrarlas al editor con el mouse). Mismo selector con más
     especificidad que la regla de más arriba que las muestra durante
     la edición (#tituloGuion.editando .indicadores-grid), para poder
     pisarla. */
  #tituloGuion.editando .indicadores-grid { display: none; }

  /* Barra de arriba: se fuerza a una sola fila siempre (nada de wrap a
     una segunda fila) — se sacan del medio el logo, la pastillita de
     estado y el rótulo de "Guión discurso | palabras | tiempo".
     A pedido, en la barra de arriba solo quedan, siempre visibles:
     Auto/IA, Play, Stop, el reloj + su controlador y Pantalla completa.
     Todo lo demás (Editar, Grabar, Escuchar, Respirar, Grilla, Tema,
     Reiniciar, velocidad, tamaño de letra) se manda de verdad (mismos
     botones, no copias — ver moverBotonesMovilSegunAncho() en
     congresos.js) a la barra inferior de dos filas, ver más abajo. */
  header { flex-wrap: nowrap; overflow: visible; gap: 3px; padding: 7px 7px; }
  /* Play sigue alternando texto Play/Stop en ancho normal (ver JS) —
     acá se le esconde el texto y se le libera el ancho fijo de 92px
     (pensado justo para que ese texto no le hiciera saltar el tamaño),
     dejando solo el ícono, que también alterna solo. A pedido, Play
     queda más grande que el resto (es la acción principal); el resto
     de la barra se ajustó un poco para hacerle lugar sin desbordar.
     Este tamaño es el "grande", verificado con navegador para que
     entre sin desbordar desde 355px de ancho (cubre los celulares
     reales de 360px, el más angosto de uso común hoy); el
     @media(max-width:340px) de más abajo achica SOLO lo justo para los
     pocos modelos más viejos/angostos que eso. */
  #btn span { display: none; }
  #btn { padding: 11px 13px; width: auto; }
  #btn i { font-size: 1.3rem; }
  .marca, .pastilla-estado { display: none; }
  .cab-izq, .cab-centro { flex-shrink: 0; }
  .cab-izq { gap: 3px; }
  .modo-op { padding: 6px 8px; font-size: .76rem; }
  /* Stop, Reiniciar, Grabar y Editar ya no viven acá (se mudan a la
     barra inferior) — de la barra de entrenamiento de siempre solo
     quedan Play y Stop en el header. */
  .barra-acciones .boton.chico.icono { padding: 8px 9px; }
  .barra-acciones .boton.chico.icono i,
  .barra-acciones .boton.chico.icono svg { font-size: 1rem; width: 15px; height: 15px; }
  .timer-wrap { gap: 5px; }
  /* El reloj (y su ícono de configurar) son justo lo que pidió ver más
     grande — crecen bastante respecto al resto, que se apretó un poco
     más para hacerles lugar sin desbordar. Nunca se manda a la barra
     inferior. */
  .timer { font-size: 1.62rem; min-width: 74px; letter-spacing: 0; }
  .timer-menu-btn { padding: 9px 10px; font-size: 1.05rem; }
  #btnPantalla { padding: 8px 9px; }
  #btnPantalla i { font-size: 1rem; }
  /* Botón "Más opciones" (⋮) ya no existe — lo reemplaza el botón con
     flecha de la Fila 2, más abajo. */
  /* Por ahora, Asistente se saca del todo de la versión mobile (a
     pedido) — ver aplicarAsistenteOculto() en congresos.js: la columna
     se sigue ocultando sola al entrar a este ancho, dándole el 100%
     del alto al guion, pero sin botón visible para volver a mostrarla
     todavía. */
  #btnAsistenteToggle { display: none; }
  /* Todo lo que sigue viviendo en .cabecera-derecha en desktop (Tema,
     el resto) se muda a la barra inferior o a la de arriba — a este
     contenedor no le queda nada adentro en mobile, así que se oculta
     del todo (si no, quedaría como una cajita vacía en el header). */
  .cabecera-derecha { display: none; }

  /* ===== Cantidad de palabras / tiempo aproximado en mobile =====
     Antes se escondía junto con el resto del rótulo ("Guión discurso |
     Cantidad de palabras... | Tiempo aproximado..."), pero eso dejaba
     una franja vacía debajo del header (el padding/borde de
     .col-titulo, que sigue ahí aunque no tenga nada adentro) — a
     pedido, esa franja ahora se usa para mostrar el dato, sin el
     texto "Guión discurso" (ocupa lugar de más y no aporta nada que
     ya no se sepa). .rotulo-guion vuelve a mostrarse; adentro, se
     esconde puntualmente el texto del título y el primer "|" (quedaría
     colgando solo al principio, sin nada antes que separar). */
  .rotulo-guion-texto { display: none; }
  .rotulo-guion #colStats .col-rotulo-sep:first-child { display: none; }
  .col-titulo { padding: 8px 14px; justify-content: center; }
  .rotulo-guion {
    font-size: .72rem; background: none; border: none; padding: 0;
    letter-spacing: .5px; color: var(--tenue);
  }

  /* ===== Punto rojo de "grabando" en la barra de arriba =====
     Grabar vive ahora oculto en la Fila 1 de abajo, así que sin esto no
     habría forma de saber "estoy grabando" sin desplegarla. Prende con
     la misma clase "grabando" que ya usa #btnGrabar (ver el handler de
     click en congresos.js) — no es un botón, no hace nada al tocarlo. */
  .punto-grabando { display: none; }
  .punto-grabando.activo {
    display: block; width: 9px; height: 9px; border-radius: 50%;
    background: var(--mal); flex-shrink: 0; margin-left: 2px;
    animation: latir 1.2s ease-in-out infinite;
  }

  /* ===== Barra inferior móvil (dos filas, NUNCA tres) =====
     Vive como hermana del <header>, justo antes del pie de página (ver
     el HTML) — ninguna de las dos filas flota encima del guion: son
     parte del flujo normal, así que al desplegar la Fila 1 el guion se
     corre hacia arriba (el contenedor 1fr se achica) en vez de quedar
     tapado.
     Fila 2 queda SIEMPRE pegada al guion (nunca se la corre): es la que
     se usa mientras se lee — Editar, Grabar, Escuchar, Tema, Respirar
     y Reiniciar, más el botón con flecha que sube/baja la Fila 1,
     siempre al final del todo. Fila 1 es la que arranca colapsada —
     velocidad, tamaño de letra y Grilla, en ese orden — y aparece
     DEBAJO de la Fila 2 (nunca la empuja lejos del texto) al tocar
     ese botón. Ninguna de las dos filas envuelve a una segunda línea
     propia: así el total, con la Fila 1 desplegada, son 2 filas
     siempre, nunca 3.
     OJO con las reglas de acá abajo: como qué control vive en cada
     fila es ahora una simple lista en congresos.js (grupoFila1 /
     grupoFila2, se puede reordenar sin tocar este CSS), el estilo de
     cada TIPO de control (botón-ícono chico, deslizador de rango) se
     aplica por igual a las dos filas — nunca a una sola — para que
     una reordenada futura no deje algo sin su estilo. */
  .barra-inferior-movil { display: flex; flex-direction: column; flex-shrink: 0; }
  .bim-fila1, .bim-fila2 {
    display: flex; flex-wrap: nowrap; align-items: center;
    gap: 8px; background: var(--panel); padding: 9px 11px;
  }
  .bim-fila2 { border-top: 1px solid var(--borde); justify-content: flex-start; }
  /* Ancho de las barritas de rango (velocidad y tamaño de letra),
     vivan en la fila que vivan. */
  .bim-fila1 .deslizador, .bim-fila2 .deslizador { width: 80px; }
  /* A pedido, más separación entre el control de velocidad y el de
     tamaño de letra — juntos como estaban costaba tocar el que
     correspondía sin querer arrastrar el otro. Por ID nomás (no por
     fila): #ritmoCaja es único, vive en una sola fila a la vez. */
  #ritmoCaja { margin-right: 16px; }

  /* Los botones-ícono chicos y el botón de desplegar comparten EL
     MISMO tamaño (mismo selector, para que no se puedan desalinear
     en un cambio futuro) — grandes, con poco espacio libre entre
     medio: el espacio de sobra en pantallas más anchas se reparte
     afuera del grupo (justify-content:center en Fila 1), no como
     separación extra entre cada botón. */
  .bim-fila1 .boton.chico.icono, .bim-fila2 .boton.chico.icono, #bimHandle {
    padding: 9px 12px; flex: 0 0 auto;
  }
  .bim-fila1 .boton.chico.icono i, .bim-fila1 .boton.chico.icono svg,
  .bim-fila2 .boton.chico.icono i, .bim-fila2 .boton.chico.icono svg,
  #bimHandle i { font-size: 1.1rem; width: 16px; height: 16px; }
  .bim-fila1 { justify-content: center; }
  #bimHandle { margin-left: auto; }
  /* Bug real: el menú de Tema se abre hacia abajo (top:100%, pensado
     para cuando vive arriba en el header de escritorio) — acá adentro
     de la barra inferior, pegada abajo de todo de la pantalla, ese
     menú terminaba renderizado por debajo del borde inferior del
     celular: se veía "Oscuro" (la primera opción) y las demás
     quedaban inalcanzables, sin scroll posible para llegar a ellas.
     Ahora abre para arriba en este contexto en vez de para abajo —
     en las dos filas, porque Tema puede vivir en cualquiera de las
     dos según el orden elegido. */
  .bim-fila1 .tema-menu, .bim-fila2 .tema-menu { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 8px; }

  /* Fila 1 colapsada: no ocupa lugar. Desplegada: aparece (empuja el
     pie hacia abajo y el guion hacia arriba, nunca tapa nada). */
  .bim-fila1 { display: none; }
  .bim-fila1.desplegada { display: flex; }
}

/* ===== Celular en horizontal (apaisado) =====
   Sigue siendo "modo mobile" en alto, pero de ancho hay mucho más lugar
   que en vertical — a pedido, ahí SÍ entran las dos filas de la barra
   inferior juntas, en una sola fila, sin depender de desplegar nada.
   El "and (orientation:landscape)" es lo que evita que esto se cuele en
   desktop: una pantalla de escritorio nunca mide 900px o menos de
   ancho, así que la combinación de las dos condiciones nunca se da ahí. */
@media (max-width: 900px) and (orientation: landscape) {
  /* El fondo va acá, en el contenedor de las dos filas, no en cada
     fila por separado — si no, apenas una fila es más angosta que la
     otra (que es lo normal, al no estirar los botones con flex:1),
     quedaba un pedazo sin pintar a la derecha, como en la captura. Con
     esto la barra siempre cubre el 100% del ancho, ocupen lo que
     ocupen las dos mitades. */
  .barra-inferior-movil { flex-direction: row; background: var(--panel); justify-content: space-between; }
  .bim-fila2 { border-top: none; border-right: 1px solid var(--borde); flex-shrink: 0; background: none; }
  /* El handle ya no tiene nada para desplegar (la Fila 1 queda siempre
     visible acá al lado) — se oculta en vez de dejarlo de adorno. */
  #bimHandle { display: none; }
  /* La Fila 1 se fuerza a visible SIEMPRE en este modo (pisa el
     display:none/toggle de más arriba, pensado para vertical). Con
     space-between en el contenedor, esta fila queda pegada del todo a
     la derecha — la separación entre las dos mitades se reparte sola
     según cuánto ancho real tenga la pantalla, en vez de quedar todo
     amontonado a la izquierda. */
  .bim-fila1 { display: flex; justify-content: flex-start; background: none; }
  /* A pedido: acá hay ancho de sobra (por eso, de hecho, entran las
     dos filas juntas en una sola línea) — así que en vez de apretar
     todo como hacía falta antes, los controles de la Fila 2 y los
     botones de la Fila 1 se separan bastante más entre sí, para poder
     tocar el que corresponde sin arrastrar el de al lado. Verificado
     con navegador en los anchos apaisados típicos (desde 650px) que
     sigue sin desbordar con este espaciado más generoso. */
  .bim-fila1, .bim-fila2 { padding: 10px 14px; gap: 16px; }
  .bim-fila1 .deslizador, .bim-fila2 .deslizador { width: 60px; }
  #ritmoCaja { margin-right: 26px; }
  .bim-fila1 .boton.chico.icono, .bim-fila2 .boton.chico.icono { padding: 9px 12px; }
  .bim-fila1 .boton.chico.icono i, .bim-fila1 .boton.chico.icono svg,
  .bim-fila2 .boton.chico.icono i, .bim-fila2 .boton.chico.icono svg { font-size: 1.05rem; width: 15px; height: 15px; }

  /* Botón flotante para ocultar/mostrar la barra entera: solo tiene
     sentido en este modo — es el único donde la barra queda siempre
     visible de por sí (nada que "desplegar" con un handle, porque acá
     arriba se ocultó). Vive fijo sobre el guion, en la esquina inferior
     derecha, sin empujar ni reordenar nada del resto de la página. */
  .fab-barra-movil {
    display: flex; align-items: center; justify-content: center;
    position: fixed; right: 14px; bottom: 96px; z-index: 55;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--cian); color: var(--fondo); border: none;
    box-shadow: 0 4px 14px rgba(0,0,0,.5); cursor: pointer; font-size: 1.05rem;
  }
  /* Con la barra oculta, el ícono pasa a apuntar para arriba (mismo
     lenguaje que el handle de vertical: la flecha indica hacia dónde
     "sube" lo que está oculto). */
  .fab-barra-movil.barra-oculta i { transform: rotate(180deg); }
}

/* ===== Resguardo SOLO para celulares angostos de verdad (≤340px) =====
   Con el tamaño "grande" de arriba, a partir de 360px todo entra con
   margen de sobra (probado con navegador) — pero unos pocos modelos
   viejos/chicos bajan de eso. Acá se achica lo justo y necesario para
   que en esos casos tampoco desborde ni se pase a una fila de más;
   nada de esto se ve en un celular normal actual. */
@media (max-width: 340px) {
  header { gap: 3px; padding: 7px 7px; }
  #btn { padding: 7px 9px; }
  #btn i { font-size: .95rem; }
  .cab-izq { gap: 4px; }
  .modo-op { padding: 7px 9px; font-size: .74rem; }
  .barra-acciones .boton.chico.icono { padding: 7px 8px; }
  .barra-acciones .boton.chico.icono i,
  .barra-acciones .boton.chico.icono svg { font-size: .95rem; width: 15px; height: 15px; }
  .timer-wrap { gap: 3px; }
  .timer { font-size: 1.2rem; min-width: 50px; }
  .timer-menu-btn { padding: 6px 7px; font-size: .85rem; }
  #btnPantalla { padding: 7px 8px; }
  #btnPantalla i { font-size: .95rem; }
  .bim-fila1, .bim-fila2 { gap: 5px; padding: 7px 8px; }
  .bim-fila1 .deslizador, .bim-fila2 .deslizador { width: 56px; }
  .bim-fila1 .boton.chico.icono, .bim-fila2 .boton.chico.icono, #bimHandle { padding: 6px 8px; }
  .bim-fila1 .boton.chico.icono i, .bim-fila1 .boton.chico.icono svg,
  .bim-fila2 .boton.chico.icono i, .bim-fila2 .boton.chico.icono svg,
  #bimHandle i { font-size: .9rem; width: 14px; height: 14px; }
}
/* ===================== OVERLAYS (respiración, final, coach) ===================== */

.ov { position: fixed; inset: 0; background: rgba(0,0,0,.94); z-index: 60; display: none;
  align-items: center; justify-content: center; padding: 24px; }
.ov.active { display: flex; }
.card { position: relative; width: min(480px, 92vw); background: var(--panel); border: 1px solid var(--borde);
  border-radius: 14px; padding: 26px 24px; display: flex; flex-direction: column; gap: 12px; }
.card.grande { width: min(680px, 94vw); }
.card .logo { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1.05rem; }
.card .logo i { color: var(--cian); }
.card .sub { color: var(--tenue); font-size: .82rem; line-height: 1.45; }
.card input, .card textarea { background: var(--fondo); color: var(--texto); border: 1px solid var(--borde);
  border-radius: 8px; padding: 10px 12px; font-family: inherit; font-size: .9rem; width: 100%; }
.card input:focus, .card textarea:focus { outline: none; border-color: var(--cian); }
.card textarea { resize: none; min-height: 160px; line-height: 1.5; }
.card .err { color: var(--mal); font-size: .76rem; min-height: 14px; }
/* El "cerrar" de este modal en particular (el único que usa esta
   clase) venía muy apagado — borde tenue, ícono gris sobre fondo
   transparente, casi no se distinguía del resto de la ventana. Ahora
   tiene fondo propio, ícono claro y un pelín más grande, para que se
   note de entrada tanto en desktop como en mobile. */
.card-close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 8px;
  background: rgba(255,255,255,.08); border: 1px solid var(--tenue); color: var(--texto); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.card-close:hover { color: var(--cian); border-color: var(--cian); background: rgba(0,229,255,.1); }
.card-edit { position: absolute; top: 10px; right: 48px; width: 30px; height: 30px; border-radius: 8px;
  background: transparent; border: 1px solid var(--borde); color: var(--tenue); cursor: pointer; }
.card-edit:hover { color: var(--cian); border-color: var(--cian); }
.card .acciones { display: flex; gap: 10px; justify-content: flex-end; }

/* Respiración: pantalla completa, encima de todo. */
.breathe { position: fixed; inset: 0; background: rgba(0,0,0,.97); z-index: 70; display: flex;
  flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none;
  transition: opacity .3s; }
.breathe.active { opacity: 1; pointer-events: all; }
.breathe-text { font-size: 2.2rem; font-weight: 600; letter-spacing: 4px; text-transform: uppercase;
  margin-bottom: 14px; text-align: center; }
.breathe-count { font-size: 2rem; font-weight: 300; color: var(--texto); font-family: var(--mono); }

/* Sesiones guardadas (grabaciones) — letra un 20% más grande a pedido,
   quedaba muy chica para leer la fecha/duración de un vistazo. Escribo
   la mayoría de estos escondida bajo #sesionesOverlay (en vez de tocar
   .sub/.logo a secas) para no agrandarle la letra de paso a los demás
   modales (Compartir, Guardar guion, etc.) que usan esas mismas clases. */
#sesionesOverlay .logo { font-size: 1.26rem; }
#sesionesOverlay .sub { font-size: .98rem; }
.sesiones-lista { display: flex; flex-direction: column; gap: 10px; max-height: 55vh; overflow-y: auto; }
.sesiones-vacio { color: var(--apagado); font-size: 1.06rem; text-align: center; padding: 34px 0; }
.sesion-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; flex-wrap: wrap;
  border: 1px solid var(--borde); border-radius: 10px; background: var(--fondo); }
.sesion-info { flex: 1 1 160px; min-width: 0; }
.sesion-fecha { font-size: 1rem; color: var(--texto); }
.sesion-dur { font-size: .86rem; color: var(--tenue); font-family: var(--mono); }
.sesion-acciones { display: flex; gap: 6px; flex-shrink: 0; }
.sesion-item .reproductor { flex: 1 1 100%; margin-top: 6px; }
/* Adentro de "Tus grabaciones" la fila de arriba (Play/Bajar/Compartir/
   Borrar) YA tiene su propio botón de Compartir y de Bajar — los que
   trae el reproductor de acá abajo quedaban repetidos, de más. Ojo:
   esta regla apunta puntualmente al reproductor DENTRO de .sesion-item
   — el que aparece solo al terminar de grabar (en #postrec, más arriba
   en el HTML) no tiene esa fila de arriba, así que ahí los dos siguen
   siendo el único acceso y no se tocan. */
.sesion-item .reproductor .rep-compartir,
.sesion-item .reproductor .rep-bajar { display: none; }

/* ===================== PIE ===================== */

.pie {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 22px; border-top: 1px solid var(--borde); flex-shrink: 0;
  font-size: .72rem; color: var(--tenue); background: var(--fondo);
}
.pie a { color: var(--tenue); text-decoration: none; }
.pie a:hover { color: var(--cian); }
.pie-sep { margin: 0 8px; opacity: .4; }
.pie-marca b { color: var(--cian); }
.pie-prod b { color: var(--texto); font-weight: 500; }