/* public/styles/bloomzy.css * * EL DISENO DE LOS DOS MOCKUPS APROBADOS, extraido de ellos y no reescrito. * `docs/mockups/mockup-asistente-bloomzy.html` (telefono) y * `-desktop.html` (computadora) son la especificacion; sus notas finales * tambien. Lo que se quito al traerlo es el ESCAPARATE —el marco de telefono, * las tiras, los pies de foto y las notas—, que existe para mirar el mockup y * no es producto. * * TODO VA DENTRO DE `#bz-raiz`, Y ESO NO ES COSMETICO. Las clases del mockup * son cortas —`.cell`, `.sec`, `.grp`, `.btn`— y la app tiene las suyas: sin * acotarlas, `.btn` de aqui repintaria botones de Studio. El acotado se hace * con un ancestro y no renombrando las 345 clases, para que el fichero siga * siendo comparable con el mockup linea a linea. * * LOS TOKENS SON LOS DEL SISTEMA DE DISENO, y el blanco de `--cell` entro a la * paleta por decision de Carolina del 2 oct 2026: celdas blancas sobre cream. */ /* LOS TOKENS VAN EN `#bz-raiz`, NUNCA EN `:root`, y esto se midio. * `public/js/footer-marketing.js` pinta un cuadro con `background:var(--teal)` * y HOY NADA DEFINE ESA VARIABLE en la app: ese cuadro sale sin fondo. * Declararlas en `:root` le pondria fondo teal de golpe, en el pie de las * paginas publicas, sin que nadie lo hubiera pedido. Es un cambio fuera de * este modulo y por eso no se hace: se nombra y se deja (regla 13). */ #bz-raiz{ --teal:#094D5F; --amber:#FFBD59; --sage:#D5D6C9; --cream:#F2F2F1; --warm:#C58F74; --dark:#1C1C1B; --muted:#687067; --cell:#FFFFFF; --hair:rgba(9,77,95,.12); } /* ── LOS TRES ANFITRIONES ────────────────────────────────────────────────── * * Los mockups ensenan Bloomzy en tres sitios y los tres son el MISMO arbol de * pantallas: hoja encima de Studio en el telefono, panel a la derecha en la * computadora, y pagina propia desde el menu, en la misma columna centrada. * Lo que cambia es el marco, nunca el contenido, y por eso el marco vive aqui * y no en el render. */ #bz-raiz{position:fixed;inset:0;z-index:900;display:none;font-family:'Gilroy',-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',sans-serif;color:var(--dark);-webkit-font-smoothing:antialiased} #bz-raiz.bz-visible{display:block} #bz-raiz .bz-scrim{position:absolute;inset:0;background:rgba(28,28,27,.35)} /* Telefono: hoja al 90 %, con su agarradera. */ #bz-raiz.bz-hoja .bz-marco{position:absolute;left:0;right:0;bottom:0;height:90%;background:var(--cream);border-radius:14px 14px 0 0;display:flex;flex-direction:column;overflow:hidden} /* Computadora: panel a la derecha. */ #bz-raiz.bz-panel .bz-marco{position:absolute;right:0;top:0;bottom:0;width:420px;max-width:100%;background:var(--cream);border-left:.5px solid var(--hair);box-shadow:-12px 0 32px rgba(28,28,27,.12);display:flex;flex-direction:column;overflow:hidden} /* Pagina propia: la misma columna centrada, sin velo. */ #bz-raiz.bz-pagina{position:static;z-index:auto;display:none} #bz-raiz.bz-pagina.bz-visible{display:flex;min-height:100vh;background:var(--sage)} #bz-raiz.bz-pagina .bz-scrim{display:none} #bz-raiz.bz-pagina .bz-marco{width:680px;max-width:100%;margin:0 auto;background:var(--cream);display:flex;flex-direction:column;min-height:100vh} /* ── LA PAGINA PROPIA ES FIJA, A CUALQUIER ANCHO · 4 oct y 29 oct 2026 ─── * * `bz-pagina` es `position:static`, o sea un bloque EN FLUJO, y `bzRaiz()` * cuelga `#bz-raiz` de `document.body` DESPUES de `#app`. Asi que en flujo * empieza justo donde acaba `#app`, y `#app` mide el alto de la ventana. * * EN EL TELEFONO se encontro primero, el 4 oct 2026. `index.html` pone * `@media (max-width:768px){html,body{height:100dvh;overflow:hidden}}` y le da * el scroll a `#app`, asi que el modulo se pintaba una pantalla por debajo del * borde, dentro de un `body` recortado y sin scroll: ninguna forma de llegar a * el. MEDIDO a 375x780: `top:780, bottom:1560` sobre un alto de 780. * * Y ESE ARREGLO SE QUEDO CORTO, porque se acoto al rango donde `body` lleva * `overflow:hidden` —se penso que el culpable era ese `overflow`— cuando el * culpable es que la pagina propia esta EN FLUJO detras de algo que mide una * ventana entera. En escritorio el documento si baja, pero nadie baja: se * pulsa, no pasa nada, y el modulo esta ahi abajo. * * MEDIDO otra vez el 29 oct 2026, en staging y con un navegador: a 1280x800 el * marco quedaba en `top:800` sobre una ventana de 800, o sea empezando * exactamente en el borde inferior. Lo reporto Rosiris al abrir el modulo a su * cuenta, y la otra puerta —el boton flotante de Studio, que usa `bz-panel`— * abria bien, que es lo que lo dejo aislado aqui. * * UNA PAGINA PROPIA QUE SE ABRE DESDE EL MENU TAPA LO QUE HABIA. Llevar el * scroll hasta ella en vez de esto se descarto: dejaria el asistente con Studio * entero por encima, que no es una pagina propia, es la misma pantalla con algo * pegado abajo. * * LO VIGILA `scripts/arnes-pagina-propia-visible.js`, Y NO LEYENDO ESTA HOJA: * mide el rectangulo con un navegador, a 1280 y a 375. Un aserto que buscara * `position:fixed` en el fichero habria dado verde sobre el fallo las tres * semanas que vivio, porque la declaracion ESTABA, dentro de un `@media` que en * escritorio no entra. */ #bz-raiz.bz-pagina.bz-visible{position:fixed;inset:0;z-index:900; overflow-y:auto;-webkit-overflow-scrolling:touch} /* La agarradera solo la lleva la hoja: en el panel y en la pagina no se * arrastra nada, y dibujarla prometeria un gesto que no existe. */ #bz-raiz:not(.bz-hoja) .grab{display:none} /* El marco se mueve como el teclado del telefono. */ #bz-raiz .bz-marco{padding-bottom:env(safe-area-inset-bottom)} #bz-raiz button{font-family:inherit;border:none;background:none;color:inherit;cursor:pointer} #bz-raiz svg.i{width:20px;height:20px;fill:none;stroke:var(--teal);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0} #bz-raiz svg.i.s{width:16px;height:16px} /* 40 Y NO 24 ABAJO · 5 oct 2026. Carolina en el iPhone: «90 minutos de voz en vivo te quedan este mes» quedaba cortado detras del compositor. Esa frase es lo ULTIMO del scroll de la portada, y con 24 px el ultimo renglon llegaba al borde justo donde empieza el compositor —que es translucido y con `backdrop-filter`, asi que lo que hay debajo se adivina y no se lee. SE ARREGLA EN `.scroll` Y NO EN ESA FRASE, a proposito: el que quede pegado al compositor es el ULTIMO elemento de cualquier pantalla, no esa linea en particular. Arreglarlo en la frase dejaria a la siguiente pantalla con el mismo borde. */ /* ── EL REBOTE DE SAFARI SE ROBA EL GESTO · 5 oct 2026 ────────────────── * * Criterio de Carolina. Al llegar al final de la lista, Safari de iOS pasa el * gesto al ancestro y empieza a estirar la PAGINA: el dedo sigue bajando, la * hoja ya no se mueve y el tirador deja de responder a mitad del gesto. * * `overscroll-behavior:contain` lo corta donde nace, que es esta zona de * scroll. `overflow:hidden` en el fondo NO lo arregla: el rebote es del * elemento que llega a su tope, no del documento. * * Y `-webkit-overflow-scrolling:touch` para que el scroll de dentro siga * siendo el de iOS: sin el, la lista se mueve a tirones. */ #bz-raiz .scroll{flex:1;overflow-y:auto;padding-bottom:40px; overscroll-behavior:contain;-webkit-overflow-scrolling:touch} /* EL VELO NO SE ARRASTRA. Sin esto, un dedo sobre la parte oscura estira la * pagina de debajo, que es el mismo rebote con otra superficie. */ #bz-raiz .bz-scrim{touch-action:none} /* EL FONDO QUIETO MIENTRAS LA HOJA ESTA ABIERTA. La clase la pone `bzAbrir` y * la quita `bzCerrar`, y SOLO para la hoja y el panel: la pagina propia ES el * documento en la computadora. En el telefono `index.html` ya deja `html` y * `body` en `overflow:hidden`, asi que esto es el caso de la computadora. */ html.bz-sin-scroll, html.bz-sin-scroll body{overflow:hidden;overscroll-behavior:none} #bz-raiz .scroll::-webkit-scrollbar{display:none} #bz-raiz .nav{height:44px;display:flex;align-items:center;padding:0 8px;position:relative;flex-shrink:0} #bz-raiz .nav .back{display:flex;align-items:center;gap:2px;color:var(--teal);font-size:17px;min-height:44px;padding:0 8px} #bz-raiz .nav .mid{position:absolute;left:50%;transform:translateX(-50%);font-size:17px;font-weight:600;white-space:nowrap} #bz-raiz .nav .right{margin-left:auto;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;color:var(--teal);font-size:17px} #bz-raiz .large{font-size:32px;font-weight:700;letter-spacing:-.02em;padding:4px 20px 2px;line-height:1.15} #bz-raiz .sub{font-size:15px;color:var(--muted);padding:2px 20px 0} #bz-raiz .word{font-family:Georgia,serif;font-weight:700} #bz-raiz .word em{color:var(--amber);font-style:italic} #bz-raiz .sec{font-size:13px;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);padding:22px 36px 7px;display:flex;justify-content:space-between} #bz-raiz .sec a{text-transform:none;letter-spacing:0;color:var(--teal);text-decoration:none;font-size:15px} #bz-raiz .grp{margin:0 16px;background:var(--cell);border-radius:12px;overflow:hidden} #bz-raiz .cell{display:flex;align-items:center;gap:14px;min-height:56px;padding:10px 14px 10px 16px;position:relative;width:100%;text-align:left} #bz-raiz .cell + .cell::before{content:"";position:absolute;top:0;left:50px;right:0;height:.5px;background:var(--hair)} #bz-raiz .cell.noic + .cell.noic::before{left:16px} #bz-raiz .cell .tx{flex:1;min-width:0} #bz-raiz .cell .t{font-size:16px;font-weight:600;line-height:1.3;display:block} #bz-raiz .cell .d{font-size:13px;color:var(--muted);line-height:1.35;display:block;margin-top:1px} #bz-raiz .chev{width:8px;height:13px;flex-shrink:0;stroke:#B9BCB1;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round} #bz-raiz .foot{font-size:13px;color:var(--muted);padding:8px 36px 0;line-height:1.4} #bz-raiz .composer{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:8px 12px 30px;background:rgba(242,242,241,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:.5px solid var(--hair)} #bz-raiz .field{flex:1;height:40px;border-radius:20px;background:var(--cell);border:.5px solid var(--hair);display:flex;align-items:center;padding:0 14px;font-size:16px;color:#9a9f96} #bz-raiz .mic{width:44px;height:44px;border-radius:22px;background:var(--teal);display:flex;align-items:center;justify-content:center;flex-shrink:0} #bz-raiz .mic svg{stroke:var(--cream)} /* ── LA BARRA DE DICTADO · punto 4 del 5 oct 2026 ────────────────────────── * * La caja se convierte en barra al tocar el microfono: onda a la izquierda, * el texto en vivo en medio, ✕ y ■ a la derecha, y el ↑ ambar fuera, donde * estaba el boton de ondas. * * LA ALTURA SUBE DE 40 A 44 px. Son dos botones de 32 px dentro, y a 40 el * dedo cae sobre el borde de la caja: el suelo de un control es 44. * * Y EL ↑ ES EL UNICO AMBAR DE LA FILA, que es la regla del sistema de diseno * —«amber: CTAs only»— y la razon de que las dos salidas de dentro no lo * lleven: tres ambares compitiendo no dicen cual manda. */ #bz-raiz .field.dictando{height:44px;padding:0 6px 0 12px;gap:8px;color:var(--dark)} #bz-raiz .dwave{display:flex;align-items:center;gap:3px;height:20px;flex-shrink:0} #bz-raiz .dwave i{display:block;width:3px;height:18px;border-radius:2px;background:var(--teal);transform:scaleY(.25);transform-origin:center;transition:transform 60ms linear;animation:bz-dlatido 1s ease-in-out infinite} #bz-raiz .dwave i:nth-child(2){animation-delay:.12s} #bz-raiz .dwave i:nth-child(3){animation-delay:.24s} #bz-raiz .dwave i:nth-child(4){animation-delay:.36s} #bz-raiz .dwave i:nth-child(5){animation-delay:.48s} /* CON MEDIDOR, LA ANIMACION SE APAGA. Dos cosas moviendo el mismo `transform` * se pisan, y la que tiene que ganar es la voz. Lo pone `bzDictarNivel`. */ #bz-raiz .dwave[data-bz-medido="1"] i{animation:none} @keyframes bz-dlatido{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(.8)}} /* LA COLA DEL TEXTO ES LO QUE SE VE, y la trae `bzDictarTexto` con * `scrollLeft`. El truco de `direction:rtl` tambien ensena el final, y se * descarto: reordena los signos de puntuacion del final de la frase. */ #bz-raiz .dtexto{flex:1;min-width:0;font-size:16px;color:var(--dark);line-height:1.2;white-space:nowrap;overflow:hidden} #bz-raiz .dbtn{width:32px;height:32px;border-radius:16px;background:var(--cell);display:flex;align-items:center;justify-content:center;flex-shrink:0} #bz-raiz .dbtn svg{stroke:var(--teal);width:18px;height:18px} #bz-raiz .mic.enviar{background:var(--amber)} #bz-raiz .mic.enviar svg{stroke:var(--dark)} #bz-raiz .btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:50px;border-radius:14px;background:var(--amber);color:var(--dark);font-size:17px;font-weight:600} #bz-raiz .btn small{font-size:13px;font-weight:500;opacity:.7} #bz-raiz .btn2{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;border-radius:12px;color:var(--teal);font-size:15px;font-weight:600} #bz-raiz .dock{flex-shrink:0;padding:10px 16px 30px;background:rgba(242,242,241,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:.5px solid var(--hair)} #bz-raiz .tools{display:flex;justify-content:space-around;margin-top:6px} #bz-raiz .tool{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:64px;min-height:44px;font-size:11px;color:var(--teal);font-weight:500;padding-top:4px} #bz-raiz .lbl{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--warm);font-weight:600} #bz-raiz .pill{display:inline-block;font-size:12px;font-weight:600;color:var(--teal);background:rgba(9,77,95,.08);border-radius:6px;padding:2px 7px} /* ── LAS LISTAS SON VERTICALES · 4 oct 2026 ───────────────────────────── Decision de Carolina: se baja, nunca se va de lado. `.hs` era un carril horizontal con `scroll-snap` y tarjetas de 272 px fijos, asi que en un telefono la tercera idea no existia hasta que ella la buscaba de lado. Un carril esconde su contenido y no dice cuanto hay. SE CONSERVA EL NOMBRE `.hs` a proposito: lo usan tres pantallas y el renombre no cambia nada en pantalla, solo obliga a tocar tres sitios mas. Lo que cambia es la direccion. */ #bz-raiz .hs{display:flex;flex-direction:column;gap:12px;padding:0 16px} #bz-raiz .icard{width:auto;background:var(--cell);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:8px} #bz-raiz .icard h4{font-size:17px;font-weight:600;line-height:1.3} #bz-raiz .icard p{font-size:15px;color:var(--muted);line-height:1.4} #bz-raiz .icard .act{display:flex;align-items:center;justify-content:space-between;margin-top:4px} #bz-raiz .mini{min-height:44px;padding:0 16px;border-radius:22px;background:var(--amber);font-size:15px;font-weight:600;color:var(--dark)} #bz-raiz .u{font-size:13px;color:var(--muted)} #bz-raiz .askbar{margin:16px 16px 0;display:flex;align-items:center;gap:10px;min-height:48px;padding:0 6px 0 14px;border-radius:14px;background:var(--cell);font-size:16px;color:var(--muted)} #bz-raiz .askbar .mic{width:36px;height:36px;border-radius:18px} #bz-raiz .dim{opacity:.4} #bz-raiz .gapnote{display:flex;gap:10px;align-items:flex-start;margin:12px 16px 0;font-size:14px;color:var(--dark);line-height:1.4} #bz-raiz .gapnote b{font-weight:600} #bz-raiz .scrim{position:absolute;inset:0;background:rgba(28,28,27,.35);z-index:3} #bz-raiz .sheet{position:absolute;left:0;right:0;bottom:0;z-index:4;background:var(--cream);border-radius:14px 14px 0 0;padding:6px 0 34px;display:flex;flex-direction:column} #bz-raiz .grab{width:36px;height:5px;border-radius:3px;background:#C7C9BE;margin:0 auto 6px} #bz-raiz .seg{display:flex;margin:0 16px;background:rgba(118,118,128,.12);border-radius:9px;padding:2px} #bz-raiz .seg span{flex:1;text-align:center;font-size:14px;font-weight:600;padding:7px 0;border-radius:7px;color:var(--dark)} #bz-raiz .seg span.on{background:var(--cell);box-shadow:0 1px 3px rgba(28,28,27,.12)} #bz-raiz .check{width:20px;height:20px;stroke:var(--teal);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0} #bz-raiz .meta{display:flex;gap:6px;flex-wrap:wrap;padding:8px 20px 0} #bz-raiz .beat{padding:14px 16px;position:relative} #bz-raiz .beat + .beat::before{content:"";position:absolute;top:0;left:16px;right:0;height:.5px;background:var(--hair)} #bz-raiz .beat .tm{font-size:12px;font-weight:600;color:var(--warm);letter-spacing:.02em} #bz-raiz .beat .say{font-size:17px;line-height:1.45;margin:4px 0 8px} #bz-raiz .beat .see{display:flex;gap:8px;font-size:13px;color:var(--muted);line-height:1.4} #bz-raiz .beat .see svg{width:16px;height:16px;stroke:var(--muted);margin-top:1px} #bz-raiz .beat .ons{display:inline-block;margin-top:8px;font-size:12px;font-weight:600;color:var(--dark);background:var(--amber);border-radius:6px;padding:2px 8px} /* ── `min-height:0` ES LO QUE MANTIENE EL CONTROL EN PANTALLA · 3 oct 2026 ── * * `.tp` y `.live` son hijos flex de `.bz-marco`, que tiene `overflow:hidden` * y NO hace scroll. Sin `min-height:0`, el minimo automatico de un hijo flex * sale de su CONTENIDO, asi que un guion largo estira `.tp` muy por debajo * del marco y se lleva con el a Grabar, Pausa, Terminar y Borrar. No hay * scroll que los alcance: dejan de existir para la clienta. * * MEDIDO a 375x780 con un guion de 30 lineas: el boton de grabar quedaba en * y=5085 sobre un marco que acaba en 780, y `elementFromPoint` no lo * encontraba. Con esta sola declaracion vuelve a y=596, igual que con dos * lineas. Las otras dos candidatas no cambian nada y por eso no estan aqui: * `.tptext` ya tiene minimo cero por su `overflow:hidden`, y `.tpctl` no se * encoge porque su minimo si sale de su contenido. * * La voz tenia el mismo defecto: con seis mensajes de largo real, «Terminar» * caia en y=1336. */ /* ── EL VIDEO LLENA LA PANTALLA Y EL GUION VA ENCIMA · 5 oct 2026 ──────── MOCKUP APROBADO (`docs/mockups/mockup-teleprompter-editor.html`), punto 2 de la segunda ronda: «El video llena la pantalla. El guion va arriba, sobre una franja transparente con degradado, y el texto lleva sombra suave. La linea actual va en ambar.» ESTO REVIERTE LA MAQUETA DEL 4 OCT 2026, que ponia el guion en una franja OPACA arriba y el video en su propia caja debajo. Aquella decision nacio de «nunca texto blanco sobre la imagen», y lo que la sustituye no es un descuido: es el degradado mas la SOMBRA del texto, que son las dos cosas que hacen legible una letra sobre cualquier fondo. El video a media pantalla era lo que se leia como «graba cuadrado». LA CAPA LA DECIDE UNA REGLA DERIVADA, no una clase por hijo: el video es el FONDO y todo lo demas flota encima, asi que el hijo que alguien anada manana entra solo. La excepcion es al reves que antes —antes se excluia el video, ahora se le baja a proposito— y necesita MAS especificidad que la general: `.tp > .tpvid` lleva dos clases contra una. */ #bz-raiz .tp{background:var(--dark);color:var(--cream);min-height:0;position:relative;overflow:hidden} #bz-raiz .tp > *{position:relative;z-index:2} /* LA CAJA DEL VIDEO ES 9:16, NO LA PANTALLA · decision de Carolina, 5 oct 2026 despues de grabar en el iPhone: «muestra el video en una caja 9:16 con object-fit: cover, el mismo encuadre que tendra el reel». POR QUE NO `inset:0`: una pantalla de telefono es mas alta que 9:16 —375x812 es 9:19,5— asi que a pantalla completa ella encuadra contra una ventana que el reel no tiene. La union recorta a 9:16, y la previa tiene que recortar igual o lo que aprueba no es lo que sale. DIVERGE DEL MOCKUP APROBADO A PROPOSITO, y hay que saberlo antes de «arreglarlo» de vuelta: el mockup del 5 oct pone el video a pantalla completa, y esta instruccion es posterior y la sustituye. Lo que se conserva entero es que el video sigue siendo el FONDO —`z-index:0`— con el guion flotando encima. EL ANCHO MANDA Y LA ALTURA SALE DE EL. Con `width:100%` + `aspect-ratio` la caja mide 375x667 en un telefono y sobra altura; en el panel de escritorio, que es mas bajo, se sale y el `overflow:hidden` del padre la recorta por arriba y por abajo, dejando el centro — que es lo que el reel conserva. Fijar la altura en su lugar daria el caso contrario y en el telefono, que es donde se graba, dejaria franjas a los lados. */ #bz-raiz .tp > .tpvid{position:absolute;top:50%;left:0;right:0;margin:0 auto; transform:translateY(-50%);width:100%;aspect-ratio:9/16; z-index:0;background:#000;overflow:hidden} /* LA BARRA DE VUELTA FLOTA SOBRE EL VIDEO, como en el mockup: en flujo le robaria al video la unica franja donde se ve la cara. */ #bz-raiz .tp > .nav{position:absolute;top:0;left:0;right:0;z-index:4} #bz-raiz .tp .sicons i, #bz-raiz .live .sicons i{border-color:var(--cream)} #bz-raiz .tp .home, #bz-raiz .live .home{background:var(--cream)} /* ── LA FRANJA DEL GUION ────────────────────────────────────────────────── EL DEGRADADO SE DESVANECE HACIA ABAJO y no es decoracion: en su tramo opaco la letra se lee, y donde el guion se acaba la imagen se ve limpia. El 36 % es el del mockup; en `vh` se saldria del marco cuando el modulo vive en panel o en pagina, donde `.tp` no mide la pantalla. `pointer-events:none` EN LA FRANJA Y `auto` EN EL TEXTO: la franja cubre el tercio superior del video, y con eventos se comeria cualquier toque de ahi. El pellizco vive en `.tptext`, que es quien lo necesita. */ #bz-raiz .tpfranja{position:absolute;top:0;left:0;right:0;height:36%;z-index:3; padding:56px 22px 14px;overflow:hidden;pointer-events:none; background:linear-gradient(rgba(28,28,27,.55),rgba(28,28,27,.38) 80%,rgba(28,28,27,0))} /* `position:relative` NO ES DECORACION: `p.offsetTop` —lo que decide cual es la frase activa— sale relativo al ANCESTRO POSICIONADO mas cercano. Sin esto, ese ancestro pasa a ser `.tpfranja` y el `offsetTop` arrastra sus 56 px de relleno: la frase activa quedaba 60 px por encima de la banda legible, y el aserto que lo caza es el del navegador. Antes lo ponia la regla de las capas, porque `.tptext` era hijo directo de `.tp`; ahora vive dentro de la franja y hay que decirlo aqui. */ /* `touch-action:pan-y` EN EL GUION: un dedo sigue arrastrando para leer y el * navegador deja de reclamar el pellizco. NO BASTA SOLO: en Safari de iOS el * zoom de la pagina lo para `preventDefault()` sobre `gesturestart`, que vive * en `bzTpGestoEmpieza`. Las dos mitades, o el encuadre de la camara se va. */ /* ── `touch-action:none` Y `overscroll-behavior:contain` · 7 oct 2026 ─── Instruccion de Carolina, con el arrastre del guion: era `touch-action:pan-y`, que es lo que se escribe cuando el navegador hace el scroll. Aqui NO lo hace: el guion se mueve con `transform` desde `bzTpCuadro` y desde el dedo, y `pan-y` le deja al navegador reclamar el gesto vertical — en Safari de iOS eso es el rebote de la pagina robandose el arrastre a mitad, que es el mismo defecto que `overscroll-behavior:contain` corta en las hojas. LAS DOS, porque son dos cosas: `none` impide que el navegador se lleve el gesto, y `contain` impide que el rebote lo pase al ancestro cuando ya no hay mas que desplazar. Y el pellizco sigue funcionando: lo paran los eventos `gesture*` de WebKit en `bzTpGestoEmpieza`, que no dependen de esto. */ #bz-raiz .tptext{position:relative;height:100%;overflow:hidden;pointer-events:auto;font-weight:600; -webkit-mask-image:linear-gradient(transparent,#000 10%,#000 78%,transparent); touch-action:none;overscroll-behavior:contain} /* ── EL RODILLO: LO QUE SE DESPLAZA · 6 oct 2026 ─────────────────────── `.tptext` esta RECORTADO y lleva la mascara; un `transform` sobre el moveria la caja entera, mascara incluida. El que se desliza es este hijo, con `transform: translateY` en subpixeles desde `bzTpPonerY`. `position:relative` PORQUE EL DESPLAZAMIENTO SE ACUMULA EN SUS COORDENADAS: `p.offsetTop` sale relativo a el, y es contra ese numero contra el que `bzTpLineaDeY` decide cual es la frase activa. `will-change:transform` lo sube a su propia capa: sin el, Safari de iOS repinta el texto con su sombra en cada cuadro y el desplazamiento continuo —que son 60 cuadros por segundo, no uno cada tres segundos— se entrecorta. */ #bz-raiz .tptext .tproll{position:relative;will-change:transform} /* LA SOMBRA ES LO QUE SUSTITUYE A LA FRANJA OPACA. Sin ella, una linea del guion sobre una ventana o una pared blanca desaparece. */ /* LAS DOS CIFRAS DE ESTA REGLA LAS LEE EL RITMO DEL TELEPROMPTER: `BZ_TP_LINEA_ALTO` es este `line-height` y `BZ_TP_LINEA_SEP` este `margin-bottom`. Quien las cambie aqui las cambia alli, o «una linea cada tres segundos» deja de ser cierto sin que nada falle. */ #bz-raiz .tptext p{margin-bottom:14px;line-height:1.3;color:rgba(242,242,241,.7); text-shadow:0 1px 6px rgba(0,0,0,.55)} /* ── Y LA FRASE ACTUAL EN AMBAR, QUE NUNCA SE PINTO ──────────────────── La regla era `.tptext p.now span span{color:var(--amber)}` y exigia DOS spans anidados que `bzTeleprompterHtml` no emite: pinta `

` con el texto pelado. Asi que el ambar no se aplicaba nunca. */ #bz-raiz .tptext p.now{color:var(--amber)} /* EL CHIP DE LA ESCENA, DENTRO DE LA FRANJA. Es el `.chipe` del mockup: dice por donde va el guion sin gastar una linea de texto. */ #bz-raiz .tpescena{display:inline-block;margin-bottom:8px;font-size:13px; color:var(--cream);background:rgba(242,242,241,.14);border-radius:999px;padding:4px 10px} /* ── LOS MANDOS, ABAJO Y SOBRE EL VIDEO ────────────────────────────────── Punto 3: antes de grabar se ven el cambio de camara, el boton rojo, «Tomas (N)», el tamano de letra y la velocidad. Mientras graba, SOLO el reloj con punto rojo, el boton y «Terminar»: la franja de ajustes no se pinta. */ #bz-raiz .tpmandos{position:absolute;left:0;right:0;bottom:0;z-index:3; padding:16px 18px 22px;background:linear-gradient(transparent,rgba(28,28,27,.75) 30%)} #bz-raiz .tpfila{display:flex;align-items:center;justify-content:space-between} #bz-raiz .tprec{width:72px;height:72px;border-radius:50%;border:4px solid var(--cream); display:flex;align-items:center;justify-content:center;flex-shrink:0;background:none} #bz-raiz .tprec i{width:52px;height:52px;border-radius:50%;background:#E2564A;display:block} /* EL CUADRADO ES LA SENAL DE QUE ESTA GRABANDO, y es el mismo boton: dos botones distintos dejarian el de parar donde el dedo buscaba el de grabar. */ #bz-raiz .tprec.on i{width:28px;height:28px;border-radius:6px} #bz-raiz .tpico{width:44px;height:44px;border-radius:50%;flex-shrink:0;display:flex; align-items:center;justify-content:center;background:rgba(242,242,241,.14)} #bz-raiz .tpico svg{stroke:var(--cream);width:22px;height:22px} #bz-raiz .tptxtb{font-size:15px;font-weight:600;color:var(--cream);min-height:44px; min-width:44px;display:flex;align-items:center;justify-content:flex-end} /* EL PUNTO ROJO DEL RELOJ. Es lo que distingue «grabando» de «listo» sin leer ningun texto, y vive en el reloj porque el reloj ya esta mirando. */ #bz-raiz .tp .nav .right.rec::before{content:"";display:inline-block;width:8px;height:8px; border-radius:50%;background:#E2564A;margin-right:6px} /* ── LA FRANJA DE AJUSTES DEL TELEPROMPTER ───────────────────────────── La letra en pildora y la velocidad en barra continua, en una sola fila de 375 px. `min-width:0` en la barra es lo que le permite encogerse: sin el, un `input[type=range]` reclama su ancho por defecto y empuja la pildora fuera de la pantalla. */ #bz-raiz .tpajustes{display:flex;align-items:center;gap:10px;margin-top:14px} #bz-raiz .tpvel{flex:1;min-width:0;display:flex;align-items:center;gap:6px} #bz-raiz .tpvel input[type=range]{flex:1;min-width:0;accent-color:var(--amber)} /* 11 px ES EL SUELO DEL SISTEMA y estas dos etiquetas son eyebrow en mayusculas, que es el unico sitio donde ese suelo se usa. */ #bz-raiz .tpvel .lbl{font-size:11px;font-weight:700;text-transform:uppercase; letter-spacing:.04em;color:rgba(242,242,241,.7);flex-shrink:0} /* ── LA MINIATURA DE UN TRAMO · punto 18 ─────────────────────────────── «Las miniaturas de Revisa y corta salen vacías», y era literal: no habia ninguna. La fila ensenaba el numero del tramo en un chip y nada mas. ES UN `