como las carpetas del correo (son acciones, no un árbol): hay que quitarles el cromo del botón y que ocupen el ancho de la barra, o quedarían escalonados y de anchos distintos. */ #waFiltros .ml-folder { width: 100%; background: none; border: 0; font: inherit; text-align: left; } #waFiltros .ml-folder:hover { background: var(--panel); } #waFiltros .ml-folder.active { background: var(--panel); color: var(--accent); } /* Hilo de burbujas. Lo mío a la derecha, lo del otro a la izquierda: es la convención de cualquier cliente de mensajería y no hace falta más pista. */ .wa-hilo { display: flex; flex-direction: column; gap: 8px; padding: 12px 4px; max-height: calc(100vh - 320px); overflow-y: auto; } .wa-burbuja { align-self: flex-start; max-width: min(78%, 620px); background: var(--panel2); border: 1px solid var(--border); border-radius: 12px 12px 12px 4px; /* El hueco de la derecha es para el ⌄ de las acciones, que va dentro de la burbuja: sin él se sienta encima de la primera línea del mensaje. */ padding: 8px 26px 8px 11px; } .wa-burbuja.mia { align-self: flex-end; background: var(--accent-suave); border-color: var(--accent-dim); border-radius: 12px 12px 4px 12px; } .wa-autor { font-size: 12px; font-weight: 600; color: var(--accent); margin-bottom: 3px; } .wa-cita { border-left: 3px solid var(--accent-dim); padding: 2px 8px; margin-bottom: 5px; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* `pre-wrap` y no `pre`: los mensajes traen sus saltos de línea, pero una URL larga no debe ensanchar la columna entera. */ .wa-texto { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; } .wa-transcripcion { margin-top: 6px; padding: 6px 8px; border-radius: 8px; background: var(--bg2); font-size: 13px; font-style: italic; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; } /* La fila de acciones del adjunto va DEBAJO de la vista previa y en pequeño: con la foto delante, el nombre del fichero es letra pequeña, no el mensaje. */ .wa-media { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; margin-top: 5px; color: var(--muted); } .wa-media-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .wa-media-link { color: var(--blue); text-decoration: none; font-size: 12px; } .wa-media-link:hover { text-decoration: underline; } .wa-media-error { color: var(--err); font-size: 12px; margin-top: 4px; } /* Vista previa dentro de la burbuja. Los topes de alto son para que una foto vertical no ocupe la pantalla entera y haya que hacer scroll para leer el mensaje siguiente; a tamaño completo se ve en el visor. */ .wa-vista { margin: 2px 0; } .wa-img { max-width: 100%; max-height: 280px; display: block; border-radius: 10px; background: var(--bg2); cursor: zoom-in; } .wa-img.sticker { max-height: 130px; background: none; cursor: zoom-in; } .wa-video { max-width: 100%; max-height: 320px; display: block; border-radius: 10px; background: #000; } .wa-audio { display: flex; align-items: center; gap: 6px; } .wa-audio audio { flex: 1; min-width: 0; height: 34px; } .wa-vel { flex: none; min-width: 38px; } /* Visor a pantalla completa (foto, vídeo, audio, PDF y texto). Por encima de los modales (.modal es z-index 50): se abre desde el hilo, y si algún día se abre desde dentro de un modal tiene que quedar delante, no detrás. Aquí SÍ hay negro y blanco literales, y es la excepción a la regla de arriba: un visor de fotos va oscuro en las dos pieles —como cualquier galería— porque lo que tiene que mandar es la imagen, no el tema del panel. Con `--overlay` (que es translúcido y aclara en la piel clara) se vería el hilo por debajo. */ .visor { position: fixed; inset: 0; z-index: 120; background: rgba(0, 0, 0, .88); display: flex; flex-direction: column; } .visor-barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; background: rgba(0, 0, 0, .35); color: #fff; } .visor-barra .spacer { flex: 1; } .visor-barra .ghost-btn { color: #fff; border-color: rgba(255, 255, 255, .35); background: transparent; } .visor-barra .ghost-btn:hover { background: rgba(255, 255, 255, .12); } .visor-nombre { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; } .visor-cuerpo { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 14px; overflow: auto; } .visor-img, .visor-video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; } .visor-pdf { width: min(1100px, 96vw); height: 100%; border: 0; border-radius: 6px; background: #fff; } .visor-texto { width: min(1100px, 96vw); max-height: 100%; overflow: auto; align-self: stretch; background: var(--bg2); color: var(--text); border-radius: 8px; padding: 14px; font-family: var(--mono, monospace); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; } .visor-aviso { color: #fff; font-size: 14px; text-align: center; } .visor-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border: 0; border-radius: 8px; cursor: pointer; background: rgba(255, 255, 255, .12); color: #fff; font-size: 30px; line-height: 1; } .visor-nav:hover { background: rgba(255, 255, 255, .22); } .visor-nav.prev { left: 10px; } .visor-nav.next { right: 10px; } .wa-pie { margin-top: 4px; font-size: 11px; color: var(--muted); text-align: right; } /* `relative` para que el menú de adjuntar (.ac-menu, que es absoluto) se ancle a la caja de escribir y no al primer contenedor posicionado. `wrap` + un mínimo en la caja, por lo mismo que en el compositor del chat: 📎, 🎤 y «📤 Enviar» son fijos y la caja era la única que encogía, así que en el móvil se quedaba en un par de centímetros. Cuando no caben todos en una línea, la caja se lleva la suya entera. */ .wa-escribir { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; padding: 10px 0 0; border-top: 1px solid var(--border); position: relative; } .wa-escribir .attach-menu { left: auto; right: 8px; bottom: calc(100% + 6px); min-width: 220px; } .wa-escribir textarea { flex: 1 1 200px; min-width: 150px; resize: vertical; min-height: 42px; background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font: inherit; } @media (max-width: 820px) { /* La caja arriba y los botones debajo, con Enviar a la derecha: es la fila que se pulsa con el pulgar. */ .wa-escribir textarea { flex: 1 1 100%; } .wa-escribir .primary-btn { margin-left: auto; } } /* Aviso de la tarjeta de Ajustes: vincular por Baileys tiene consecuencias reales para el número, así que se ve antes de pulsar nada. */ .wa-aviso { border: 1px solid var(--warn); border-radius: 8px; background: rgba(251, 191, 36, .10); padding: 10px 12px; margin: 8px 0 14px; font-size: 13px; line-height: 1.5; } .wa-qr { display: flex; justify-content: center; padding: 14px; background: #fff; border-radius: 10px; min-height: 200px; } .wa-qr svg { width: 100%; max-width: 260px; height: auto; } .wa-codigo { margin-top: 12px; text-align: center; font-family: var(--mono, monospace); font-size: 26px; letter-spacing: 5px; padding: 10px; background: var(--panel2); border-radius: 8px; } .wa-tab { padding-top: 12px; } .wa-draft-body { width: 100%; resize: vertical; background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font: inherit; } @media (max-width: 820px) { /* Igual que en Microsoft 365: leyendo un chat, el buscador de arriba solo roba pantalla. Aquí la .ml-head cuelga de .ml-main, no de .m365-body. */ body:not([data-m365-pane="lista"]) #view-whatsapp .ml-head { display: none !important; } .wa-hilo { max-height: none; } .wa-burbuja { max-width: 88%; } } /* Cuadro de «chat nuevo»: los dos campos, uno debajo del otro y a todo lo ancho. En una fila, el del nombre queda tan estrecho que no se lee ni su propio placeholder. */ #waNuevo input { width: 100%; margin-bottom: 8px; } #waNuevo .ml-modal-results { margin-bottom: 8px; } /* Acciones de un mensaje (responder, reaccionar, reenviar…). El ⌄ vive en la esquina de la burbuja y solo se ve al pasar por encima, como en la app: con uno visible en cada mensaje el hilo se convierte en una lista de botones. En táctil no hay «encima», así que ahí se ve siempre. */ .wa-burbuja { position: relative; } .wa-menu-btn { position: absolute; top: 2px; right: 4px; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: 6px; opacity: 0; transition: opacity .12s; } .wa-burbuja:hover .wa-menu-btn, .wa-menu-btn:focus-visible { opacity: 1; } .wa-menu-btn:hover { background: var(--hover); color: var(--text); } @media (hover: none) { .wa-menu-btn { opacity: .65; } } /* Fila de reacciones rápidas, arriba del menú del mensaje. */ .wa-react-fila { display: flex; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--border); } .wa-react-btn { border: 0; background: none; cursor: pointer; font-size: 19px; line-height: 1; padding: 4px 5px; border-radius: 8px; } .wa-react-btn:hover { background: var(--hover); transform: scale(1.15); } .wa-react-btn.puesta { background: var(--accent-suave2); } /* Reacciones puestas, colgando de la burbuja. */ .wa-reacciones { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; } .wa-reaccion { border: 1px solid var(--border); background: var(--bg2); color: var(--text); border-radius: 999px; padding: 1px 7px; font-size: 12px; cursor: pointer; line-height: 1.6; } .wa-reaccion.mia { border-color: var(--accent-dim); background: var(--accent-suave); } /* Barra de mensajes fijados, sobre el hilo. */ .wa-fijado { display: flex; align-items: center; gap: 6px; padding: 6px 10px; margin-top: 8px; background: var(--accent-suave); border-left: 3px solid var(--accent-dim); border-radius: 6px; } .wa-fijado-texto { flex: 1; min-width: 0; text-align: left; border: 0; background: none; cursor: pointer; color: var(--text); font: inherit; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wa-burbuja.resaltada { outline: 2px solid var(--accent); } /* «Respondiendo a…» / «Editando», encima de la caja de escribir. */ .wa-contexto { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin-top: 8px; font-size: 12px; background: var(--bg2); border-left: 3px solid var(--accent); border-radius: 6px; } .wa-contexto-tipo { color: var(--accent); font-weight: 600; flex: none; } .wa-contexto-texto { flex: 1; min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Barra de grabación: sustituye a la caja de escribir mientras dura. */ .wa-grabando { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 10px 0 0; border-top: 1px solid var(--border); } .wa-grabando .spacer { flex: 1; } .wa-rec-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--err); animation: waLatido 1s ease-in-out infinite; } .wa-rec-tiempo { font-family: var(--mono, monospace); } @keyframes waLatido { 50% { opacity: .25; } } /* Modo «escoger mensajes»: la burbuja entera es la diana, así que necesita sitio para la casilla y una señal clara de estar marcada. */ .wa-burbuja.seleccionable { cursor: pointer; padding-left: 32px; position: relative; } .wa-burbuja.seleccionable.mia { padding-left: 11px; padding-right: 32px; } .wa-check { position: absolute; left: 10px; top: 10px; margin: 0; cursor: pointer; } .wa-burbuja.seleccionable.mia .wa-check { left: auto; right: 10px; } .wa-burbuja.marcada { outline: 2px solid var(--accent); background: var(--accent-suave); } .wa-selbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0 0; border-top: 1px solid var(--border); font-size: 13px; } .wa-selbar .spacer { flex: 1; } /* Editor de texto del explorador de archivos de la nube. Es un textarea a secas a propósito: para una nota, un CSV o un fichero de configuración basta, y un editor de código completo aquí solo añadiría peso a la carga inicial. */ .ml-editor { width: 100%; min-height: 40vh; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.5; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg2); color: var(--text); } .ml-detalles { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 8px; } .ml-detalles > summary { cursor: pointer; color: var(--muted); font-size: 13px; } /* Barra de acciones en lote de las tareas y trabajos en segundo plano. */ .tasks-bar-head .spacer { flex: 1; } .tasks-bar-head .ghost-btn { padding: 2px 8px; font-size: 12px; } .tasks-selbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 12px; border-top: 1px solid var(--border); background: var(--panel2); font-size: 12.5px; } .tasks-selbar .spacer { flex: 1; } /* En modo selección la fila gana una columna a la izquierda para la casilla. */ .task-row.seleccionable { grid-template-columns: auto auto auto 1fr auto auto; } .task-row.marcada { background: var(--accent-suave); } .task-check { margin: 0; cursor: pointer; } /* Panel global de tareas de la barra superior. */ .tareas-filtros { flex-wrap: wrap; } /* Los tres botones viajan juntos: si envuelven, envuelven en bloque y no se queda uno suelto en una línea para él solo. */ .tareas-acciones { display: flex; gap: 6px; flex: 0 0 auto; } .tareas-filtros .spacer { flex: 1; } .tareas-lista { max-height: 46vh; overflow-y: auto; } .tareas-lista .task-row { grid-template-columns: auto auto auto 1fr auto; } .tareas-lista .task-row:hover { background: var(--panel2); } .tarea-sesion { color: var(--muted); font-size: 11.5px; } #tareasBadge.con-curso { border-color: var(--accent); color: var(--accent); } /* Ajustes → Sistema: tabla de procesos y de caché de ficheros. Reaprovechan `.tabla-gasto`; aquí solo va lo propio de una fila de proceso, que lleva dos líneas (qué es y su línea de comando entera, que puede ser larguísima). */ .proc-cmd { max-width: 520px; } .proc-etiqueta { font-weight: 600; } .proc-cmd .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tabla-gasto td .mini-btn { margin-left: 4px; }