/* ============================================================================ Bandeja de WhatsApp — aspecto fiel a WhatsApp Web. ---------------------------------------------------------------------------- Decisión de Mario (2026-09-01): que se parezca a WhatsApp aunque rompa con la paleta de Ubold. El motivo es de uso, no de gusto: quien atiende la bandeja viene de usar WhatsApp todo el día y no debería tener que aprender otra cosa. Va en su PROPIO archivo y no en `personalizados.css` porque estos colores son agresivos y `personalizados.css` lo carga TODA pantalla del sistema: una variable mal puesta acá teñiría facturación. Paleta oficial de WhatsApp Web: #008069 verde de acento #efeae2 fondo del chat #d9fdd3 burbuja propia #f0f2f5 barras #ffffff burbuja ajena #667781 texto secundario ============================================================================ */ /* ⚠ La paleta va en `:root`, no en `.wa-app`. Las modales de Bootstrap se pintan FUERA de ese contenedor, así que declarada ahí les llegaba vacía: `color:var(--wa-verde)` quedaba inválido y el ícono heredaba el gris del tema. Esta hoja solo la carga la pantalla de WhatsApp, de modo que `:root` no se le filtra a ninguna otra. */ :root{ --wa-verde:#008069; --wa-fondo:#efeae2; --wa-propia:#d9fdd3; --wa-barra:#f0f2f5; --wa-sec:#667781; --wa-borde:#e9edef; --wa-tick:#53bdeb; /* Altura compartida por las DOS cabeceras: si difieren, la línea que separa el encabezado del contenido se ve quebrada justo en el medio de la pantalla. */ --wa-head-h:60px; } /* La maquetación se queda en el contenedor: en `:root` le pondría `display:flex` y un borde al de la página entera. */ .wa-app{ /* ⚠ 118 px: 70 de la barra superior, 24 del `mt-3` —la bandeja estaba pegada a la barra, lo notó Mario el 2026-09-10— y 24 de aire abajo, los mismos de arriba. Eran 168 mientras la pantalla tuvo pie. Desde que no lo lleva —pedido de Mario, ver el comentario en `whatsapp/index.php`— esos 70 px se los queda el chat, que es donde hacen falta: la lista de mensajes crece hasta el borde de la ventana. */ /* ⚠ Las DOS declaraciones, en este orden. `dvh` es el alto que de verdad se ve —descuenta la barra del navegador del teléfono— y `vh` no; el navegador que no entienda `dvh` se queda con la primera y el que sí, con la segunda. Ver el bloque del teléfono, más abajo. */ display:flex; min-height:460px; /* ⚠ 70 px: solo la barra superior. Antes eran 118 —70 de barra, 24 del `mt-3` y 24 de aire abajo—; Mario pidió el 100 % de la pantalla, así que el `mt-3` se fue del markup y el aire de abajo con él. Medido a 1440×900: la bandeja pasa de 1152×782 a 1200×830. */ height:calc(100vh - 70px); height:calc(100dvh - 70px); /* Sin borde ni esquinas redondeadas: pegada a los bordes, un recuadro dibujaría una caja dentro de otra. Se conserva la línea de arriba para separarla de la barra superior. */ border-top:1px solid var(--wa-borde); overflow:hidden; background:#fff; } /* ⚠ Los dos contenedores del tema ponen 12 px de relleno a cada lado y 0 abajo; acá se los quita para que la bandeja llegue a los bordes. Va por clase y NO tocando `.content-page`: esa clase la usan todas las pantallas del sistema. */ .content-page.wa-pantalla, .container-fluid.wa-pantalla{ padding-left:0; padding-right:0; } /* ---------- Lista de conversaciones ---------- */ .wa-lista{ width:380px; min-width:300px; display:flex; flex-direction:column; border-right:1px solid var(--wa-borde); background:#fff; } /* La barra va BLANCA y el buscador gris, como en WhatsApp Web — no al revés. El contraste invertido hacía que la cabecera pesara más que la lista que la sigue. */ .wa-lista-head{ background:#fff; padding:0 10px 0 12px; height:var(--wa-head-h); display:flex; align-items:center; gap:6px; border-bottom:1px solid var(--wa-borde); } .wa-lista-head .wa-buscar{ flex:1; min-width:0; } .wa-lista-head .badge{ flex-shrink:0; } .wa-buscar{ position:relative; } .wa-buscar input{ width:100%; border:0; border-radius:8px; background:var(--wa-barra); padding:8px 12px 8px 44px; font-size:14px; outline:none; color:#111b21; } .wa-buscar input::placeholder{ color:var(--wa-sec); } .wa-buscar input:focus{ background:#fff; box-shadow:inset 0 0 0 1px var(--wa-borde); } .wa-buscar .ti{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--wa-sec); font-size:17px; } .wa-convs{ flex:1; overflow-y:auto; } .wa-conv{ display:flex; gap:13px; padding:11px 14px; cursor:pointer; border-bottom:1px solid #f5f6f6; align-items:center; } .wa-conv:hover{ background:#f5f6f6; } .wa-conv.activa{ background:#f0f2f5; } .wa-avatar{ width:44px; height:44px; min-width:44px; border-radius:50%; background:#d1d7db; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:15px; } .wa-conv-cuerpo{ flex:1; min-width:0; } .wa-conv-fila{ display:flex; align-items:baseline; gap:8px; } .wa-conv-nombre{ font-size:14.5px; color:#111b21; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .wa-conv-hora{ font-size:12px; color:var(--wa-sec); white-space:nowrap; } .wa-conv-prev{ font-size:14px; color:var(--wa-sec); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; /* Ocupa el sobrante para empujar al globito y a la palomita contra el borde derecho, en la misma vertical que la hora de arriba. Sin esto quedaban pegados al final del texto y la palomita, al aparecer, no desplazaba a nadie. */ flex:1; min-width:0; } /* Encabezado de sección en la lista («Mensajes · 3»), como el de WhatsApp al buscar. */ .wa-seccion{ font-size:12px; color:var(--wa-sec); text-transform:uppercase; letter-spacing:.04em; padding:14px 14px 6px; border-top:1px solid var(--wa-borde); background:#fff; } .wa-conv-prev mark{ background:#a7f3d0; color:inherit; padding:0 1px; border-radius:2px; } .wa-conv-prev .ti{ font-size:14px; vertical-align:-2px; } .wa-badge{ background:#25d366; color:#fff; border-radius:999px; font-size:12px; font-weight:600; min-width:20px; height:20px; padding:0 6px; display:flex; align-items:center; justify-content:center; } /* Palomita de acciones de la fila, como la de WhatsApp Web. Va EN EL FLUJO, al lado del globito de no leídos y no encima: escondida mide cero, y al aparecer empuja al globito a la izquierda en vez de taparlo. Superponerla obligaba a tapar con un degradado lo que quedara debajo —la hora, el globito—, y eso esconde justo el dato por el que uno mira la fila. */ .wa-conv-mas{ align-self:center; border:0; background:none; padding:0; line-height:0; color:var(--wa-sec); cursor:pointer; overflow:hidden; width:19px; flex:0 0 auto; } .wa-conv-mas .ti{ font-size:19px; } /* Con ratón se esconde del todo —ancho cero y sin el hueco del `gap`— y aparece al pasar por la fila. Eso devuelve esos 27 px al último mensaje en todas las filas que nadie está mirando. */ @media (hover:hover){ .wa-conv-mas{ width:0; opacity:0; margin-left:-8px; transition:width .12s, opacity .12s, margin-left .12s; } .wa-conv:hover .wa-conv-mas, .wa-conv-mas:focus-visible, .wa-conv-mas.abierto{ width:19px; opacity:1; margin-left:0; } } /* Sin ratón no hay hover que la revele, así que se queda puesta y tenue. Ocupa su lugar en la fila —no tapa nada— y el globito se corre solo. Ver `tooltip_title_no_funciona_en_movil`. */ @media (hover:none){ .wa-conv-mas{ opacity:.45; } } /* ---------- Panel del chat ---------- */ .wa-chat{ flex:1; display:flex; flex-direction:column; min-width:0; position:relative; } /* ── Buscador de la conversación (2026-09-12) ─────────────────────────────────────────────── Panel propio a la derecha que ACHICA el chat, no una capa encima: hay que poder tocar un resultado y leerlo en su lugar sin cerrar nada. */ .wa-buscador{ flex:0 0 340px; min-width:0; display:flex; flex-direction:column; background:#fff; border-left:1px solid var(--wa-borde); } /* ⚠ `--wa-head-h` y no un relleno propio: es la MISMA altura que la cabecera del chat y la de la lista, y las tres se ven una al lado de la otra. Con `padding:12px` esta medía 64 px contra los 60 de la de al lado y la línea que separa las cabeceras del contenido quedaba quebrada justo en el medio de la pantalla —4 px, suficiente para que se note; lo vio Mario el 2026-09-12—. El relleno vertical se va: lo pone la altura, y el caño de al lado se alinea solo el día que la variable cambie. */ .wa-buscador-cab{ height:var(--wa-head-h); display:flex; align-items:center; flex-shrink:0; padding:0 12px; border-bottom:1px solid var(--wa-borde); background:var(--wa-barra); } .wa-buscador-cab > *{ flex:1; min-width:0; } .wa-buscador-caja{ display:flex; align-items:center; gap:8px; background:#fff; border-radius:22px; padding:6px 12px; border:1px solid var(--wa-borde); } .wa-buscador-caja:focus-within{ border-color:var(--wa-verde); box-shadow:0 0 0 1px var(--wa-verde); } .wa-buscador-caja input{ flex:1; min-width:0; border:0; outline:0; font-size:14px; padding:2px 0; } .wa-buscador-caja button{ border:0; background:transparent; color:var(--wa-sec); cursor:pointer; line-height:1; padding:2px; } .wa-buscador-caja .ti{ font-size:18px; color:var(--wa-sec); } .wa-buscador-cuerpo{ flex:1; overflow-y:auto; } .wa-buscador-vacio{ padding:22px 18px; color:var(--wa-sec); font-size:13.5px; text-align:center; } .wa-buscador-vacio span{ font-size:12.5px; opacity:.8; } /* El día, como separador de grupo: los resultados se leen por fecha, igual que en el hilo. */ .wa-res-dia{ padding:10px 14px 4px; font-size:12px; color:var(--wa-sec); text-transform:none; } .wa-res{ display:block; width:100%; text-align:left; border:0; background:transparent; cursor:pointer; padding:9px 14px; border-bottom:1px solid var(--wa-borde); font-size:13.5px; line-height:1.35; } .wa-res:hover{ background:var(--wa-barra); } .wa-res.actual{ background:#e7f3ff; } .wa-res .wa-res-hora{ display:block; font-size:11.5px; color:var(--wa-sec); margin-bottom:2px; } /* ⚠ Lo encontrado va en VERDE y en negrita, no con fondo amarillo como dentro del hilo: acá la fila es angosta y un bloque de color por palabra la vuelve ilegible. */ .wa-res b{ color:var(--wa-verde); font-weight:600; } /* Lo encontrado. El resaltado ACTUAL se distingue del resto: con todos iguales, al ir de uno a otro no se sabe en cuál se está parado. */ .wa-marca{ background:#ffe08a; border-radius:3px; } .wa-marca.actual{ background:#ffb703; } @media (max-width: 767.98px){ /* ⚠ En el teléfono el panel ocupa TODO: 340 px al lado de una pantalla de 390 deja un chat de 50 px. Se muestra el buscador y se esconde el chat, como hace WhatsApp. */ .wa-app.buscando .wa-chat{ display:none !important; } .wa-app.buscando .wa-buscador{ flex:1 1 auto; border-left:0; } } /* Bajar al último mensaje (2026-09-12). Flota sobre el hilo, encima del compositor. ⚠ `position:absolute` contra `.wa-chat` —que por eso pasó a `relative`— y no dentro de `.wa-mensajes`: ahí sería contenido y se desplazaría junto con los mensajes. ⚠ El `bottom` lo pone el JS con el alto real del compositor: ese alto cambia al citar un mensaje o al escribir varias líneas, y un valor fijo dejaba el botón montado encima. */ .wa-bajar{ position:absolute; right:18px; bottom:var(--wa-bajar-abajo, 90px); z-index:5; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#fff; color:var(--wa-sec); border:1px solid rgba(0,0,0,.08); box-shadow:0 2px 6px rgba(0,0,0,.18); cursor:pointer; transition:opacity .15s ease, transform .15s ease; } .wa-bajar:hover{ color:var(--wa-verde, #128c7e); transform:translateY(-1px); } .wa-bajar .ti{ font-size:22px; } .wa-chat-head{ background:#fff; padding:0 16px; height:var(--wa-head-h); display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--wa-borde); } /* El avatar de la cabecera se achica para caber en la altura compartida; el de la lista se queda en 49 px, que es el de WhatsApp. */ .wa-chat-head .wa-avatar{ width:40px; height:40px; min-width:40px; font-size:15px; } .wa-chat-nombre{ font-size:16px; color:#111b21; } .wa-chat-sub{ font-size:13px; color:var(--wa-sec); } .wa-chat-iconos{ display:flex; gap:6px; color:#54656f; } .wa-icono{ background:none; border:0; color:#54656f; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:19px; cursor:pointer; } .wa-icono:hover{ background:rgba(0,0,0,.05); } .wa-icono[disabled]{ opacity:.45; cursor:not-allowed; } /* El fondo con textura del chat. Es un SVG embebido: la CSP prohíbe imágenes externas, y un data: URI cuenta como `img-src data:`, que sí está permitido. */ .wa-mensajes{ flex:1; overflow-y:auto; padding:18px 6%; background-color:var(--wa-fondo); /* Papel tapiz de garabatos, como el de WhatsApp. Antes eran ocho figuras geométricas sueltas en un mosaico de 110 px: se leía como una trama de puntos, no como un fondo dibujado. Ahora son 25 figuras variadas —cámara, corazón, sobre, taza, cohete…— en un mosaico de 300 px. El archivo lo genera `~/goroute-seed/whatsapp_fondo_svg.py` y NO se edita a mano: cada figura está dibujada también corrida un mosaico en cada dirección, para que las que caen sobre el borde no queden cortadas y no aparezca la cuadrícula de «calles» vacías al repetir. */ background-image:url("../images/whatsapp-fondo.svg"); background-size:300px 300px; } /* ---------- Burbujas ---------- */ .wa-fila{ display:flex; margin-bottom:8px; } .wa-fila.propia{ justify-content:flex-end; } .wa-burbuja{ max-width:min(65%,520px); padding:6px 9px 8px; border-radius:7.5px; position:relative; box-shadow:0 1px .5px rgba(11,20,26,.13); font-size:14.2px; line-height:19px; color:#111b21; word-wrap:break-word; white-space:pre-wrap; } .wa-fila:not(.propia) .wa-burbuja{ background:#fff; border-top-left-radius:0; } .wa-fila.propia .wa-burbuja{ background:var(--wa-propia); border-top-right-radius:0; } /* Bloque del adjunto dentro de la burbuja. La etapa A solo anuncia que el archivo llegó; la B lo reemplazará por la imagen o por un enlace de descarga. */ .wa-adjunto{ display:flex; align-items:center; gap:8px; margin:0; padding:8px 10px; background:rgba(0,0,0,.045); border-radius:6px; font-size:13.5px; } .wa-adjunto .ti{ font-size:20px; opacity:.6; flex-shrink:0; } .wa-adjunto span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .wa-adjunto .peso{ margin-left:auto; font-size:11.5px; color:var(--wa-sec); flex-shrink:0; } /* La imagen ocupa la burbuja, como en WhatsApp. */ /* ⚠ `width:300px` + `max-width:100%`, NO `min(300px, 100%)`. La burbuja se ajusta a su contenido, así que su ancho es INDEFINIDO mientras se calcula: ahí el `100%` no resuelve, `min()` da 0 y el ancla queda en cero. Con la imagen ya cargada no se notaba —su tamaño natural sostenía la burbuja—, pero con `loading=lazy` no hay nada que la sostenga y la burbuja se encogía a sus 6 px de relleno hasta que bajara el archivo. El `max-width` sí funciona porque se aplica cuando el ancho de la burbuja ya está resuelto. */ .wa-imagen{ display:block; position:relative; margin:-2px -5px 4px; border-radius:6px; overflow:hidden; width:300px; max-width:100%; } .wa-imagen img{ display:block; width:100%; height:auto; background:#e9edef; /* Techo de seguridad: una imagen que el recorte no alcance a domar no puede ocupar más que esto. Al abrirla se ve completa. */ max-height:440px; object-fit:cover; object-position:center top; } /* ⚠ Solo las MUY altas o MUY anchas se recortan, y el recorte lo decide `bandeja.js` al cargarlas. Antes bastaba con `max-height` + `object-fit:cover`, y no servía: con una imagen de 400×1600 el navegador conserva la proporción y **encoge el ancho a 85 px** para respetar el alto. La caja se medía a partir de la imagen en vez de al revés, así que `cover` no tenía nada que recortar. Fijando la proporción de la caja, `cover` por fin recorta. La original se ve completa al abrirla. */ .wa-imagen img.recortada{ aspect-ratio:4/5; object-fit:cover; object-position:center top; } .wa-imagen img.recortada-ancha{ aspect-ratio:16/9; object-fit:cover; object-position:center; } /* ── Miniatura sola: ocupa la burbuja entera y la hora va ENCIMA ───────────────────────────────── Medido antes de arreglarlo: la imagen quedaba a +4 px de la izquierda pero a +14 de la derecha —la burbuja salía 10 px más ancha que su contenido— y debajo sobraban 35 px de blanco para una hora de 19. Con la imagen al ras y la hora superpuesta, como en WhatsApp, no sobra nada. Solo aplica cuando NO hay pie de foto: con texto, la hora vuelve abajo, que es donde se lee. */ /* Al ras: vale con pie de foto y sin él. ⚠ La galería estaba fuera de esta lista y se notaba: quedaba a 3 px por la izquierda y 15 por la derecha, porque su `width:min(300px,100%)` la dejaba más angosta que la burbuja. */ .wa-burbuja.con-media{ padding:3px; } /* ⚠ `300px` + `max-width:100%`, no `width:100%` a secas: esta regla es MÁS específica que la de `.wa-imagen` y le devolvía el porcentaje contra un ancho indefinido, que es exactamente lo que colapsaba la burbuja a 6 px mientras la imagen no bajaba. Sigue ocupando todo el ancho de la burbuja, pero ahora aporta un tamaño con el que la burbuja puede dimensionarse sola. */ .wa-burbuja.con-media .wa-imagen, .wa-burbuja.con-media .wa-galeria, .wa-burbuja.con-media .wa-video-envoltura{ margin:0; width:300px; max-width:100%; } /* El pie recupera el aire que la burbuja ya no tiene. */ .wa-burbuja.con-media .wa-pie-media{ padding:3px 6px 0; } /* ⚠ La hora de las burbujas con foto Y pie queda EXACTAMENTE como la de un audio o un texto: 5 px del borde derecho y 4 del de abajo. Medido en las tres, no ajustado a ojo. El problema no era solo el margen derecho: el de ABAJO daba -1, o sea que la hora colgaba por fuera de la burbuja. La burbuja `con-media` baja su relleno a 3 px para que la imagen vaya al ras, y el pie arrastra `-4px` a la derecha y abajo, pensados para una burbuja con relleno normal. Se compensan los dos. */ .wa-burbuja.con-media:not(.solo-media) .wa-pie-burbuja{ margin-right:2px; margin-bottom:1px; } /* ⚠ En una burbuja de SOLO FOTO se posiciona el PIE ENTERO sobre la imagen, no solo la hora. Antes se posicionaba únicamente `.wa-meta`: la hora quedaba superpuesta sobre la foto y el badge del autor —que sigue en flujo normal— caía DEBAJO de la imagen, en otro renglón. Los dos decían pertenecer a la misma línea y se veían desalineados, que es justo lo que se notó en el teléfono. Posicionando el contenedor, el `flex` de siempre los acomoda: autor a la izquierda, hora a la derecha, misma línea, sobre el degradado que ya está dibujado ahí para que se lean. */ .wa-burbuja.solo-media .wa-pie-burbuja{ position:absolute; left:9px; right:9px; bottom:9px; margin:0; /* Encima del degradado del `::after` de la imagen, o quedaría tapado por él. */ z-index:2; } .wa-burbuja.solo-media .wa-meta{ position:static; margin:0; float:none; color:#fff; /* Sombra y no fondo: un recuadro sólido tapa parte de la foto. */ text-shadow:0 1px 3px rgba(0,0,0,.85), 0 0 8px rgba(0,0,0,.5); } /* ⚠ Solo la palomilla SIN estado se pinta de blanco. Con `.wa-tick` a secas —tres clases— esta regla le ganaba a `.wa-tick.leido`, que tiene dos, y sobre una foto la palomilla se quedaba blanca para siempre: nunca pasaba a celeste ni a roja. El color del contexto decide el neutro; el del ESTADO decide siempre el suyo. */ .wa-burbuja.solo-media .wa-meta .wa-tick:not(.leido):not(.fallido){ color:#fff; } .wa-burbuja.solo-media .wa-meta .wa-tick.leido{ color:var(--wa-tick); } /* Rojo claro y no el de siempre: el oscuro se pierde contra el degradado de la foto. */ .wa-burbuja.solo-media .wa-meta .wa-tick.fallido{ color:#ff8a80; } /* Degradado suave para que la hora se lea sobre cualquier foto, clara u oscura. */ .wa-burbuja.solo-media .wa-imagen::after, .wa-burbuja.solo-media .wa-video-envoltura::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:52px; background:linear-gradient(to top, rgba(0,0,0,.42), transparent); pointer-events:none; } /* ⚠ «Ver completa» va ARRIBA a la izquierda en las burbujas de solo foto, no abajo. La línea de abajo la ocupa ahora el pie —autor a la izquierda, hora a la derecha, superpuestos sobre la imagen—, así que el rótulo quedaba justo debajo del badge del autor y se pisaban. Arriba a la izquierda no estorba a nadie: el botón de acciones vive arriba a la DERECHA. */ .wa-burbuja.solo-media .expandir{ top:9px; left:9px; right:auto; bottom:auto; } /* ── Álbum: varias fotos que llegaron juntas ────────────────────────────────────────────────── Las baldosas son CUADRADAS y recortadas para que la cuadrícula quede pareja: con proporciones mezcladas se ve como un collage desordenado. Cada una abre su original completa. */ .wa-galeria{ display:grid; gap:3px; width:300px; max-width:100%; } .wa-galeria a{ display:block; position:relative; overflow:hidden; } .wa-galeria img{ display:block; width:100%; height:100%; object-fit:cover; background:#e9edef; } .wa-galeria.g2{ grid-template-columns:1fr 1fr; } .wa-galeria.g2 a{ aspect-ratio:1; } /* Tres: una grande a la izquierda y dos apiladas, como WhatsApp. */ .wa-galeria.g3{ grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; } .wa-galeria.g3 a:first-child{ grid-row:span 2; } .wa-galeria.g3{ aspect-ratio:1; } .wa-galeria.g4{ grid-template-columns:1fr 1fr; } .wa-galeria.g4 a{ aspect-ratio:1; } .wa-galeria .mas{ position:absolute; inset:0; background:rgba(0,0,0,.5); color:#fff; display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:600; } /* Señal de que hay más: sin esto el recorte parece la foto entera y nadie la abre. */ .wa-imagen .expandir{ position:absolute; right:6px; bottom:6px; background:rgba(0,0,0,.55); color:#fff; border-radius:4px; font-size:11px; padding:2px 6px; display:flex; align-items:center; gap:3px; pointer-events:none; } .wa-imagen .expandir .ti{ font-size:13px; } /* Nota de voz con su onda, como WhatsApp. */ .wa-audio{ display:flex; align-items:center; gap:9px; width:270px; max-width:100%; margin:2px 0; height:38px; } .wa-audio .btn{ width:34px; height:34px; min-width:34px; border:0; border-radius:50%; background:var(--wa-verde); color:#fff; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; } .wa-audio .onda{ flex:1; min-width:0; height:30px; cursor:pointer; } .wa-audio .t{ font-size:11.5px; color:var(--wa-sec); min-width:34px; text-align:right; } /* Velocidad: pastilla discreta, que compite poco con el botón de reproducir. */ .wa-audio .vel{ border:0; border-radius:10px; background:rgba(0,0,0,.07); color:#111b21; font-size:11px; font-weight:500; padding:2px 7px; cursor:pointer; line-height:15px; min-width:30px; } .wa-audio .vel:hover{ background:rgba(0,0,0,.12); } .wa-audio .vel[hidden]{ display:none; } .wa-audio.sin-onda .vel{ display:none; } .wa-audio audio{ display:none; } /* Si el navegador no supo decodificarlo, se cae al reproductor nativo: sin onda, pero suena. */ .wa-audio.sin-onda{ display:block; height:auto; } .wa-audio.sin-onda .btn, .wa-audio.sin-onda .onda, .wa-audio.sin-onda .t{ display:none; } .wa-audio.sin-onda audio{ display:block; width:100%; } /* El `