/* ========================================================= CHATS — mensajes y avisos, iguales en las tres pantallas RUTH.il POR QUÉ EXISTE ESTA HOJA ------------------------ vehicles, inmuebles y promises pintan los avisos con el mismo código JavaScript, pero cada uno tenía su copia de los estilos y las copias se habían ido separando. Medido en el navegador antes de tocar nada: propiedad vehicles inmuebles promises tamaño del texto 16px 16px 17px (no lo declaraba y heredaba el del contenedor) resplandor del éxito sí sí no animación del éxito sí sí no El resto (colores, bordes, radios, espaciado) sí coincidía. Se toma como buena la versión de vehicles/inmuebles, que es la de dos de las tres y además la más completa. CÓMO SE USA Se carga DESPUÉS de la hoja propia de cada chat, para ganar en la cascada sin tener que repasar tres hojas ni subir la especificidad de cada regla. Solo toca los mensajes y los avisos. Los colores salen de las variables que ya define cada pantalla (--success, --warning, --danger, --info, --page-ink), con un valor de reserva por si alguna no las declara. ========================================================= */ /* ---------- BASE COMÚN DE LOS CUATRO AVISOS ---------- */ .alert-success-custom, .alert-warning-custom, .alert-danger-custom, .alert-info-custom { border-radius: 14px; padding: 18px 22px; font-size: 1rem; /* promises no lo declaraba y salía a 17px */ line-height: 1.5; display: flex; align-items: center; gap: 16px; max-width: 92%; border-width: 2px; border-style: solid; color: var(--page-ink, var(--text-1, #fff)); } .alert-success-custom i, .alert-warning-custom i, .alert-danger-custom i, .alert-info-custom i { font-size: 2rem; flex-shrink: 0; } .alert-success-custom .alert-title, .alert-warning-custom .alert-title, .alert-danger-custom .alert-title, .alert-info-custom .alert-title { font-weight: 700; font-size: 1.15rem; display: block; margin-bottom: 3px; } .alert-success-custom .alert-text, .alert-warning-custom .alert-text, .alert-danger-custom .alert-text, .alert-info-custom .alert-text { font-size: .95rem; } /* ---------- ÉXITO ---------- */ .alert-success-custom { background: rgba(169, 245, 200, .15); border-color: var(--success, #A9F5C8); box-shadow: 0 0 30px rgba(169, 245, 200, .1); animation: pulseSuccess 2s ease-in-out infinite; } .alert-success-custom i { color: var(--success, #A9F5C8); } /* El título llevaba un verde fijo (#1a7a3a) que sobre fondo oscuro se leía mal. Se usa el color del propio aviso, que sí cambia con el tema. */ .alert-success-custom .alert-title { color: var(--success, #A9F5C8); } @keyframes pulseSuccess { 0%, 100% { box-shadow: 0 0 30px rgba(169, 245, 200, .1); } 50% { box-shadow: 0 0 50px rgba(169, 245, 200, .2); } } /* ---------- AVISO ---------- */ .alert-warning-custom { background: rgba(255, 179, 167, .15); border-color: var(--warning, #FFB3A7); } .alert-warning-custom i { color: var(--warning, #FFB3A7); } .alert-warning-custom .alert-title { color: var(--warning, #FFB3A7); } /* ---------- ERROR ---------- */ .alert-danger-custom { background: rgba(220, 53, 69, .10); border-color: var(--danger, #FF5C5C); } .alert-danger-custom i { color: var(--danger, #FF5C5C); } .alert-danger-custom .alert-title { color: var(--danger, #FF5C5C); } /* ---------- INFORMACIÓN ---------- */ .alert-info-custom { background: rgba(179, 212, 255, .15); border-color: var(--info, #B3D4FF); } .alert-info-custom i { color: var(--info, #B3D4FF); } .alert-info-custom .alert-title { color: var(--info, #B3D4FF); } /* ---------- EN TEMA CLARO ---------- */ /* Sobre fondo blanco los tonos pastel del tema oscuro no contrastan, así que los títulos y los iconos usan una versión más oscura del mismo color. Los fondos se mantienen: son translúcidos y funcionan en ambos. */ :root[data-theme="light"] .alert-success-custom .alert-title, :root[data-theme="light"] .alert-success-custom i { color: #1a7a3a; } :root[data-theme="light"] .alert-warning-custom .alert-title, :root[data-theme="light"] .alert-warning-custom i { color: #b85a4a; } :root[data-theme="light"] .alert-danger-custom .alert-title, :root[data-theme="light"] .alert-danger-custom i { color: #b02a37; } :root[data-theme="light"] .alert-info-custom .alert-title, :root[data-theme="light"] .alert-info-custom i { color: #2a6fa8; } /* ---------- MENSAJES DEL CHAT ---------- LA BURBUJA SE DEFINE AQUÍ, NO EN CADA TRÁMITE. Cada uno de los cuatro tenía su propia copia y habían derivado. Medido inyectando la misma burbuja en los cuatro: · vehículo usaba un BORDE AZUL —var(--info)— en la burbuja del bot, y esquinas de 12px uniformes; los otros tres, 16/16/16/4, que es la esquina que "apunta" a quien habla. · promesa y salida de menor pintaban lo que escribe el CLIENTE con `background: var(--gold)` y texto blanco: 1,08 de contraste, o sea invisible. Ese era el fallo grave. · la tarjeta de archivo subido llevaba sombra en dos y no en los otros dos. Esta hoja se carga DESPUÉS de la propia de cada trámite, así que gana sin tener que subir la especificidad de nada. Las copias de los cuatro archivos se retiraron; si alguna vuelve, vuelve la deriva. */ .bot-message, .user-message { margin-bottom: 14px; animation: fadeInUp .28s ease-out; } .bubble { padding: clamp(12px, .9vw, 16px) clamp(16px, 1.1vw, 22px); max-width: 85%; word-break: break-word; font-size: clamp(.95rem, 1vw, 1.05rem); line-height: 1.6; } /* Lo que dice el sistema: tarjeta neutra, con la esquina de abajo a la izquierda cuadrada. */ .bot-message .bubble { background: var(--page-card, var(--bg-2)); color: var(--page-ink, var(--text-1)); border: 1px solid var(--page-border, var(--border)); border-left: 3px solid var(--magenta-border, var(--magenta)); border-radius: 16px 16px 16px 4px; box-shadow: 0 2px 12px rgba(0, 0, 0, .04); } /* Lo que escribe el cliente: magenta, con la esquina cuadrada al otro lado. Nunca dorado: el dorado de marca es un fondo claro y el texto encima va en blanco. */ .user-message .bubble { background: var(--magenta); color: var(--magenta-ink, #FFF); border: 1px solid var(--magenta-border, var(--magenta)); border-radius: 16px 16px 4px 16px; box-shadow: 0 2px 12px rgba(var(--magenta-rgb, 196, 42, 142), .20); } /* El archivo que acaba de subir. */ .file-card { background: var(--page-card, var(--bg-2)); border: 1px solid var(--page-border, var(--border)); padding: 18px 22px; border-radius: 12px; max-width: 92%; box-shadow: 0 2px 12px rgba(0, 0, 0, .04); } .file-card p { margin: 6px 0 2px; word-break: break-all; } .file-card small { color: var(--text-3); } @keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ---------- MÓVIL ---------- */ @media (max-width: 768px) { .alert-success-custom, .alert-warning-custom, .alert-danger-custom, .alert-info-custom { padding: 14px 16px; gap: 12px; max-width: 100%; } .alert-success-custom i, .alert-warning-custom i, .alert-danger-custom i, .alert-info-custom i { font-size: 1.5rem; } .alert-success-custom .alert-title, .alert-warning-custom .alert-title, .alert-danger-custom .alert-title, .alert-info-custom .alert-title { font-size: 1rem; } } /* ---------- DESPLEGABLE DE RESPUESTA ---------- */ /* Para las preguntas con muchas opciones (provincias, notarías, años del vehículo): una columna de treinta botones obliga a recorrer toda la pantalla, y en el móvil un