` de estado debajo. * * Marca buscable: voz_lanzador */ /* ── LAS DOS, JUNTAS ──────────────────────────────────────────────────────────────────── Un solo contenedor. Antes eran dos flotantes independientes, cada uno pegado al `` por su cuenta: aunque hubieran quedado cerca, nada garantizaba que siguieran cerca. */ .bm-voz-lanzador { position: fixed; right: 18px; bottom: 18px; z-index: 70; display: flex; flex-direction: column; align-items: stretch; gap: 10px; /* NUNCA MAS ANCHO QUE LA PANTALLA. Medido: el panel de la conversacion se salia por la izquierda en 375px (x = -3). El tope vive en el contenedor y no en el panel porque es el contenedor el que sabe cuanto lugar hay. */ max-width: calc(100vw - 36px); } /* Los dos modos, uno al lado del otro. Es la fila que antes era el contenedor entero. */ .bm-voz-modos { display: flex; align-items: stretch; gap: 10px; } /* ── LA CONVERSACION EN VIVO, EN SU PROPIA FILA ──────────────────────────────────────── Deja de ser un desplegable anclado al boton —que en telefono se salia de la pantalla y tapaba el otro modo— y pasa a ser una fila del lanzador. Ver la nota larga en `contenedor()` de `voz-lanzador.js`. */ .bm-voz-vivo:empty { display: none; } .bm-voz-vivo > .bm-conv-panel { position: static; width: auto; max-width: 100%; } /* UN HUECO VACIO NO PUEDE COBRAR ESPACIO. El panel apila cinco bloques con `gap:10px`, y tres de ellos —el recorrido, la ruta y la transcripcion— estan vacios hasta que hay algo que contar. Vacios seguian aportando su `gap`: 30px de nada entre el estado y los controles. `:empty` es dinamico: en cuanto su modulo les escribe adentro, vuelven. */ .bm-conv-panel > div:empty { display: none; } /* MINIMIZAR PLIEGA LO QUE OCUPA, NO LOS CONTROLES. El microfono sigue abierto: esconder «Terminar» para ganar alto seria dejarlo abierto sin manera visible de cerrarlo. */ .bm-conv-panel.bm-voz-min #bm-conv-modo, .bm-conv-panel.bm-voz-min #bm-conv-ruta, .bm-conv-panel.bm-voz-min .bm-conv-transcripcion { display: none; } /* ── PLEGADO: LOS DOS MODOS SIGUEN AHI, SIN LA EXPLICACION ───────────────────────────── Lo que se va es el subtexto —«Hablas, terminas tu turno y Brainmore responde.»—, que ayuda la primera vez y sobra cuando ya estás hablando. El botón y el rótulo de cada modo se quedan: plegar no puede ser esconder una de las dos maneras de entrar. */ .bm-voz-plegado .bm-voz-sub { display: none; } .bm-voz-plegado .bm-voz-tarjeta { flex-direction: row; align-items: center; gap: 10px; padding: 8px 12px; text-align: left; } .bm-voz-plegado .bm-voz-modos { grid-auto-rows: auto; } .bm-voz-minimizar { margin-left: auto; font: inherit; font-size: 11px; padding: 4px 9px; min-height: 26px; border: 1px solid var(--border-soft); border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; } .bm-voz-minimizar:hover { border-color: var(--primary); } /* ── UNA TARJETA ──────────────────────────────────────────────────────────────────────── Se ve apretable: tiene borde, fondo propio, sombra y responde al cursor. Un rótulo suelto no hace nada de eso, y por eso el que había se leía como una etiqueta. */ .bm-voz-tarjeta { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 172px; padding: 12px 12px 10px; border-radius: 14px; border: 1px solid var(--border-soft); background: var(--surface-elevated); color: var(--text); box-shadow: 0 6px 22px rgba(0, 0, 0, .14); cursor: pointer; text-align: center; } .bm-voz-tarjeta:hover { border-color: var(--primary); } /* El hueco donde vive el botón real de cada vía, movido tal cual desde su módulo. Se le quita el `position:fixed` que traía de cuando era un flotante suelto. */ /* SIN `position:relative`, y eso importa: con el, los controles secundarios y el panel se anclaban a este hueco de 56px en vez de a la tarjeta, y quedaban ENCIMA del boton. Medido: el de «volver a escuchar» empezaba en x=109 sobre un boton que va de 71 a 127. */ .bm-voz-hueco { display: flex; justify-content: center; } .bm-voz-hueco > #brainmore-voice-fab, .bm-voz-hueco > #brainmore-conv-fab { position: static; right: auto; bottom: auto; left: auto; top: auto; margin: 0; } .bm-voz-titulo { font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; } .bm-voz-sub { font-size: 11.5px; line-height: 1.4; color: var(--text-soft); } /* ── LA QUE ESTA VIVA ─────────────────────────────────────────────────────────────────── Se distingue por el borde y por el color del rótulo, no sólo por un tono: a un metro de distancia, un cambio de tono en un texto de 14px no se ve. */ .bm-voz-tarjeta[data-activa="si"] { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary), 0 6px 22px rgba(0, 0, 0, .14); } .bm-voz-tarjeta[data-activa="si"] .bm-voz-titulo { color: var(--primary); } /* ── LA QUE NO PUEDE ARRANCAR AHORA ───────────────────────────────────────────────────── Atenuada Y EXPLICADA. Un botón gris sin motivo deja a quien lo mira sin saber si está roto, si le falta un permiso o si hizo algo mal. El motivo se muestra siempre que la tarjeta esté impedida — no en un tooltip que hay que descubrir. */ .bm-voz-tarjeta[data-impedida="si"] { cursor: default; } .bm-voz-tarjeta[data-impedida="si"] .bm-voz-hueco, .bm-voz-tarjeta[data-impedida="si"] .bm-voz-titulo, .bm-voz-tarjeta[data-impedida="si"] .bm-voz-sub { opacity: .55; } .bm-voz-tarjeta[data-impedida="si"]:hover { border-color: var(--border-soft); } .bm-voz-impedido { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--border-soft); font-size: 11px; line-height: 1.45; color: var(--text); /* El motivo NO se atenúa: es lo único que hay que poder leer cuando el resto está apagado. */ opacity: 1; } /* ── EN UN TELEFONO ───────────────────────────────────────────────────────────────────── Una debajo de la otra y de borde a borde. Dos tarjetas de 172px más el hueco no entran en 320px, y encogerlas dejaría el subtexto en una palabra por línea. */ @media (max-width: 560px) { .bm-voz-lanzador { left: 12px; right: 12px; bottom: 12px; gap: 8px; max-width: none; } /* ── LAS DOS MIDEN IGUAL TAMBIEN APILADAS ────────────────────────────────────────── MEDIDO a 375 y 414px: 336x106 contra 336x122. La diferencia no era una decision —era que un subtexto entra en dos lineas y el otro en tres—, pero se ve como que una vale mas que la otra, que es exactamente lo que esta hoja existe para que no pase. `grid` con `1fr` reparte el alto de la mas alta entre las dos; `flex-direction:column` no puede hacerlo porque en un eje vertical `stretch` iguala el ANCHO. */ .bm-voz-modos { display: grid; grid-auto-rows: 1fr; gap: 8px; } .bm-voz-tarjeta { width: auto; flex-direction: row; align-items: center; gap: 12px; text-align: left; padding: 10px 14px; /* En fila, el rótulo y el subtexto se apilan a la derecha del botón. */ flex-wrap: wrap; } .bm-voz-tarjeta .bm-voz-titulo, .bm-voz-tarjeta .bm-voz-sub { flex: 1 1 60%; min-width: 0; } .bm-voz-impedido { flex: 1 1 100%; } } /* ── EL FOCO ──────────────────────────────────────────────────────────────────────────── Cuando el botón de adentro recibe el teclado, se ilumina la TARJETA entera: el botón es redondo y chico, y un anillo alrededor de él no dice cuál de los dos modos está elegido. */ .bm-voz-tarjeta:has(:focus-visible) { outline: 2px solid currentColor; outline-offset: 2px; } /* ── LO QUE LOS DOS MODULOS TRAIAN DE CUANDO FLOTABAN SUELTOS ─────────────────────────── * * Sus paneles y sus rotulos estaban dimensionados y colocados para vivir pegados a una esquina * de la pantalla. Adentro de una tarjeta, el panel de la conversacion —320px— reventaba la * tarjeta y se salia del viewport. Se los saca del flujo y se los ancla a SU tarjeta: el panel * pertenece a su modo, y ponerlo en el medio diria que es de los dos. */ .bm-voz-tarjeta { position: relative; } .bm-voz-tarjeta #bm-conv-panel, .bm-voz-tarjeta #bm-voice-status.bm-voice-status-panel { position: absolute; bottom: calc(100% + 10px); right: 0; width: min(320px, calc(100vw - 36px)); max-width: none; z-index: 2; } /* El boton de la conversacion traia su propio rotulo adentro —«Conversar»—. Dentro de la tarjeta eso seria decirlo dos veces, y ademas era la mitad de la asimetria que se vino a arreglar: uno traia rotulo y el otro no. Ahora el rotulo lo pone la tarjeta, para los dos. */ .bm-voz-tarjeta .bm-conv-etiqueta { display: none; } /* El «Toca para hablar» ERA el subtexto de la tarjeta, dicho por otro camino. Mientras la via esta quieta se calla; cuando arranca, ese mismo nodo pasa a llevar el estado y se muestra. */ .bm-voz-tarjeta[data-activa="no"] #bm-voice-status:not(.bm-voice-status-panel) { display: none; } /* ── EL MISMO BOTON, DEL MISMO TAMAÑO ─────────────────────────────────────────────────── * * Cada modulo dimensionaba el suyo por su cuenta: el de la voz por turnos era un circulo grande * y el de la conversacion en vivo uno chico con texto al lado. Aunque estuvieran juntos, un * circulo del doble de area sigue diciendo «esta es la accion principal». * * Peso visual equivalente no es una metafora: es el mismo diametro, escrito una sola vez para * los dos. */ .bm-voz-hueco #bm-voice-btn, .bm-voz-hueco #bm-conv-btn { width: 56px; height: 56px; min-width: 56px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } /* Reiniciar y volver a escuchar son controles SECUNDARIOS de la via por turnos: no compiten con el boton principal. Se van a la esquina de su tarjeta, chicos, donde se encuentran cuando se los busca y no estorban cuando no. */ .bm-voz-tarjeta .bm-voice-row { gap: 0; } .bm-voz-tarjeta .bm-voice-reset { position: absolute; top: 8px; /* `border-box` porque su hoja les da relleno: sin esto, `width:26px` daba 42 de ancho real y el segundo se metia debajo del boton principal. Medido. */ box-sizing: border-box; padding: 0; width: 26px; height: 26px; min-width: 0; font-size: 12px; } .bm-voz-tarjeta .bm-voice-reset:not(.bm-voice-replay) { left: 8px; } .bm-voz-tarjeta .bm-voice-reset.bm-voice-replay { left: 38px; width: 26px; } /* Un control apagado dice POR QUE. «Volver a escuchar» nace deshabilitado porque todavia no hay ninguna respuesta que repetir, y sin decirlo se lee como que esta roto. */ .bm-voz-tarjeta .bm-voice-replay[disabled] { cursor: default; } /* ── LAS CAJAS QUE OCUPAN SIN DECIR NADA ──────────────────────────────────────────────── * * MEDIDO: la tarjeta de la voz por turnos tenia 110px de alto contra 56 de la otra, y la * diferencia eran TRES CAJAS VACIAS —el rotulo del modo, el recorrido y la fila de acciones— * que su modulo deja puestas para llenarlas cuando la via arranca. Vacias siguen ocupando, y * empujaban el rotulo 54px mas abajo que el de al lado. * * Dos tarjetas que dicen lo mismo con distinta altura no tienen el mismo peso, por mucho que * sus botones midan igual. */ .bm-voz-tarjeta .bm-voz-modo-caja:empty, .bm-voz-tarjeta .bm-voz-ruta-caja:empty { display: none; } /* Las acciones —detener, interrumpir, silenciar— son de una via EN CURSO. Con la via quieta no hay nada que detener, y su fila vacia solo separa el boton de su rotulo. */ .bm-voz-tarjeta[data-activa="no"] .bm-voz-controles { display: none; } /* El estado de la via por turnos —«Escuchando...», «Consultando...»— vive en el mismo nodo que antes decia «Toca para hablar». Colocado por su hoja para flotar junto a un boton suelto, dentro de la tarjeta quedaba ENCIMA del boton. Va debajo, en el flujo, donde se lee. */ .bm-voz-tarjeta #bm-voice-status:not(.bm-voice-status-panel) { position: static; margin: 6px 0 0; max-width: 100%; font-size: 11.5px; white-space: normal; } /* ── EL DETALLE DE UNA VIA VIVA NO PUEDE EMPUJAR LA TARJETA ───────────────────────────── * * MEDIDO: con la via por turnos viva y su recorrido pintado, la tarjeta pasaba de 154px de alto * a 452. En un telefono de 667 eso es DOS TERCIOS DE LA PANTALLA, tapando el chat que la persona * vino a leer — y creciendo justo en el momento en que esta hablando y no puede reacomodar nada. * * El recorrido y las acciones salen del flujo y se anclan ARRIBA de la tarjeta, como el panel de * la conversacion en vivo, que ya vivia asi. La tarjeta conserva su tamaño: los dos modos siguen * ocupando lo mismo tambien mientras uno esta hablando. */ .bm-voz-tarjeta[data-activa="si"] .bm-voz-detalle { position: absolute; bottom: calc(100% + 10px); right: 0; width: min(300px, calc(100vw - 36px)); padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border-soft); background: var(--surface-elevated); box-shadow: 0 8px 26px rgba(0, 0, 0, .18); text-align: left; z-index: 3; } .bm-voz-tarjeta[data-activa="no"] .bm-voz-detalle { display: none; } /* ── EL MOTIVO SE PINTABA DENTRO DE ALGO OCULTO ───────────────────────────────────────── * * MEDIDO EN NAVEGADOR el 24-08-2026, con la voz NO instalada: * * #bm-voice-status 0x0 display:block position:absolute width:320px * .bm-voz-detalle 0x0 display:NONE <- el padre * .bm-voz-tarjeta 172x138 display:flex * * El estado estaba BIEN compuesto —«La conversación por voz no está disponible», clase * `es-no-pude`, `role="alert"`, su «cómo seguir»— y con su ancho de 320px puesto. Lo que * nadie veía es que su PADRE estaba en `display: none`, y eso saca del render a todo el * subárbol por mucho que el hijo se declare visible. * * Resultado en pantalla: un micrófono gris de 56x56, deshabilitado, y NI UNA PALABRA de por * qué. `document.body.innerText` no contenía «voz» ni «micr». Exactamente el defecto que la * regla de arriba —`#bm-voice-status:not(.bm-voice-status-panel)`— fue escrita para evitar: * la exención se puso en el HIJO, y quien esconde es el PADRE. * * `display: contents` y no `block`: el grupo deja de pintar caja pero sus hijos siguen * existiendo, así que el panel —que es `position: absolute`— se sigue anclando a la tarjeta * y no empuja nada. Con `block` el grupo ocuparía sitio en la tarjeta y movería los dos * botones. * * Y los DEMAS hijos del grupo siguen ocultos: cuando la voz no está, «modo», «ruta» y los * controles no tienen nada que decir — mostrarlos sería ofrecer los mandos de algo que no * funciona, que es la mitad del defecto original. */ .bm-voz-tarjeta[data-activa="no"] .bm-voz-detalle:has(#bm-voice-status.bm-voice-status-panel) { display: contents; } .bm-voz-tarjeta[data-activa="no"] .bm-voz-detalle:has(#bm-voice-status.bm-voice-status-panel) > :not(#bm-voice-status) { display: none; } /* ── EL LANZADOR UNICO: PLEGADO POR DEFECTO ────────────────────────────────────────────── * * MEDIDO A 1440: los dos flotantes de voz —este y `#brainmore-conv-fab`— tapaban la columna * derecha de la portada, incluida una tarjeta de alerta entera. Dos capacidades que casi * nunca se usan a la vez ocupando permanentemente la esquina donde vive el contenido. * * SE PLIEGAN, NO SE QUITAN. Las dos siguen alcanzables en un clic, y el botón dice qué son — * un icono solo obliga a adivinar. Lo que cambia es que dejan de estar abiertas por defecto. */ .bm-voz-toggle { position: fixed; right: 18px; bottom: 18px; z-index: 71; display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1; border: 1px solid var(--border, #E5E5E5); background: var(--card, #FFFFFF); color: var(--text, #1A1A1A); box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 2px 8px rgba(16, 24, 40, .08); } .bm-voz-toggle:hover { border-color: var(--bm-accent, #7A2C36); } .bm-voz-toggle:focus-visible { outline: 2px solid var(--bm-accent, #7A2C36); outline-offset: 2px; } /* Plegado: los dos contenedores se retiran del flujo y de la lectura. `display: none` y no `visibility`, para que un lector de pantalla tampoco anuncie controles que no se ven. */ body:not(.bm-voz-abierta) .bm-voz-lanzador, body:not(.bm-voz-abierta) #brainmore-conv-fab { display: none; } /* Desplegado: los dos suben por encima del boton, que se queda de ancla. */ body.bm-voz-abierta .bm-voz-lanzador { bottom: 68px; } body.bm-voz-abierta #brainmore-conv-fab { bottom: 166px; } /* Quien pidió quietud no ve aparecer nada: el panel se muestra, no se desliza. */ @media (prefers-reduced-motion: no-preference) { body.bm-voz-abierta .bm-voz-lanzador, body.bm-voz-abierta #brainmore-conv-fab { animation: bm-voz-entra .14s ease-out; } } @keyframes bm-voz-entra { from { opacity: 0; transform: translateY(6px); } }