/* assets/css/clima247_dialog_messages.css */ /* =================================================================================================================== 💬 CLIMA 24.7 - MENSAJES DESTACADOS / MENSAJES DE LA GENTE ------------------------------------------------------------------------------------------------------------------- ESTILO GENERAL ------------------------------------------------------------------------------------------------------------------- ✔ Bubble tipo chat TV overlay. ✔ Mantiene colores originales del canal. ✔ Layout inspirado en mockup de referencia. ✔ Mensaje dentro de badge interno más oscuro. ✔ Muestra la foto enviada cuando existe y carga correctamente. ✔ Si no hay foto válida, mantiene el layout ancho de texto completo. ✔ Piquito inferior izquierdo. =================================================================================================================== */ /* =================================================================================================================== 📦 OVERLAY GENERAL =================================================================================================================== */ .dialog-message-overlay { display: none; position: absolute; left: 55px; bottom: 245px; width: auto; z-index: var(--c247-z-dialog); opacity: 0; pointer-events: none; transition: opacity .35s ease; } .dialog-message-overlay.is-visible { display: block; opacity: 1; } /* =================================================================================================================== 💬 BUBBLE PRINCIPAL =================================================================================================================== */ .dialog-message-card { position: relative; display: block; width: 900px; max-width: 900px; padding: 10px 14px 12px; border-radius: 12px; background: linear-gradient( 90deg, rgba(112, 56, 142, 0.75), rgba(143, 85, 155, 0.45) ); color: var(--blanco); border-top: 1px solid rgba(0,0,0,.55); border-bottom: 1px solid rgba(0,0,0,.55); border-right: 1px solid rgba(0,0,0,.55); border-left: 6px solid var(--codelis-logoL-rgb); box-shadow: 0 10px 30px rgba(0,0,0,.45); overflow: visible; transition: opacity .25s ease, transform .25s ease, filter .25s ease; } /* =================================================================================================================== 🔻 PIQUITO TIPO SPEECH BUBBLE =================================================================================================================== */ .dialog-message-card::before { content: ""; position: absolute; width: 0; height: 0; left: 42px; bottom: -30px; border-left: 24px solid rgba(112, 56, 142, 0.75); border-right: 12px solid transparent; border-top: 12px solid rgba(112, 56, 142, 0.75); border-bottom: 20px solid transparent; } /* Eliminamos piquito viejo */ .dialog-message-card::after { display: none; } /* =================================================================================================================== ✨ ANIMACIONES =================================================================================================================== */ .dialog-message-card.is-changing { opacity: 0; transform: translateY(10px); filter: blur(2px); } .dialog-message-card.is-entering { opacity: 1; transform: translateY(0); filter: blur(0); } /* =================================================================================================================== 🖼️ FOTO ------------------------------------------------------------------------------------------------------------------- Se muestra únicamente cuando el mensaje tiene una imagen válida. El JavaScript agrega o quita la clase .no-image según corresponda. IMPORTANTE: El encabezado ocupa todo el ancho del card. La columna de la foto se reserva únicamente a partir del cuerpo del mensaje para evitar que quede un hueco vacío grande arriba a la izquierda. =================================================================================================================== */ .dialog-message-card:not(.no-image) { display: grid; grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: auto auto auto auto auto; column-gap: 14px; row-gap: 0; align-items: start; width: 1120px; max-width: 1120px; } /* Al usar display: contents, los elementos internos pueden ocupar filas distintas de la grilla principal del card. */ .dialog-message-card:not(.no-image) .dialog-message-content { display: contents; } /* Encabezado y ubicación: ancho completo, sin hueco a la izquierda. */ .dialog-message-card:not(.no-image) .dialog-message-title { grid-column: 1 / -1; grid-row: 1; } .dialog-message-card:not(.no-image) .dialog-message-meta { grid-column: 1 / -1; grid-row: 2; } .dialog-message-card:not(.no-image) .dialog-meta-location { grid-column: 1 / -1; grid-row: 3; } /* Foto únicamente al lado del mensaje y su footer. */ .dialog-message-card:not(.no-image) .dialog-message-photo { grid-column: 1; grid-row: 4 / span 2; align-self: start; margin-top: 8px; } .dialog-message-card:not(.no-image) .dialog-message-text { grid-column: 2; grid-row: 4; } .dialog-message-card:not(.no-image) .dialog-message-footer { grid-column: 2; grid-row: 5; } .dialog-message-photo { display: block !important; width: 220px !important; min-width: 220px !important; height: 220px !important; border-radius: 12px; object-fit: cover !important; overflow: hidden; border: 1px solid rgba(255,255,255,.2); box-shadow: 0 5px 16px rgba(0,0,0,.35); } .dialog-message-photo img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } img.dialog-message-photo { object-fit: cover !important; } /* =================================================================================================================== 📝 CONTENIDO GENERAL =================================================================================================================== */ .dialog-message-content { display: block; width: 100%; min-width: 0; text-align: left; } /* =================================================================================================================== 🏷️ TÍTULO =================================================================================================================== */ .dialog-message-title { display: block; margin: 0 0 8px; padding: 0 0 8px; text-align: center; font-size: 28px; line-height: 1; font-weight: 700; color: var(--blanco); text-transform: none; border-bottom: 2px solid rgba(0,0,0,.35); } /* =================================================================================================================== 👤 FILA SUPERIOR ------------------------------------------------------------------------------------------------------------------- DE: NOMBRE / FECHA =================================================================================================================== */ .dialog-message-meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin: 0 12px 4px; } .dialog-meta-top { display: contents; } /* =================================================================================================================== 👤 NOMBRE =================================================================================================================== */ #dialogMessageName { margin: 0; font-size: 34px !important; line-height: 1.1; font-weight: 700; color: var(--blanco) !important; text-align: left; } /* =================================================================================================================== 📅 FECHA =================================================================================================================== */ #dialogMessageDate { margin: 0; font-size: 28px !important; line-height: 1.1; font-weight: 500; color: rgba(255,255,255,.92) !important; text-align: right; white-space: nowrap; } /* =================================================================================================================== 📍 UBICACIÓN =================================================================================================================== */ .dialog-meta-location { display: block; margin: 0 12px 10px; color: var(--blanco); } #dialogMessageCity, #dialogMessageProvinceCountry { display: inline !important; margin: 0; font-size: 28px !important; line-height: 1.1; font-weight: 500; color: rgba(255,255,255,.92) !important; } #dialogMessageCity::after { content: ", "; } /* =================================================================================================================== 🇦🇷 BANDERA =================================================================================================================== */ .dialog-country-flag { width: 30px !important; height: auto !important; object-fit: cover; padding-bottom: 6px; border-radius: 3px; margin-left: 8px; display: inline-block; vertical-align: middle; flex-shrink: 0; } /* =================================================================================================================== 💬 MENSAJE ------------------------------------------------------------------------------------------------------------------- Badge oscuro interno. =================================================================================================================== */ .dialog-message-text { display: block; margin: 8px 12px 10px; padding: 14px 18px; border-radius: 18px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(6px); font-size: 34px !important; line-height: 1.18 !important; font-weight: 600 !important; color: var(--blanco) !important; text-align: left; word-break: break-word; overflow-wrap: anywhere; } /* =================================================================================================================== 🦶 FOOTER =================================================================================================================== */ .dialog-message-footer { display: block; margin: 0 12px; padding-top: 6px; border-top: 2px solid rgba(0,0,0,.35); text-align: left; font-size: 24px; line-height: 1.1; font-weight: 500; color: rgba(255,255,255,.92) !important; } /* =================================================================================================================== 🚫 NO IMAGE =================================================================================================================== */ .dialog-message-card.no-image { display: block; width: 900px; max-width: 900px; padding: 10px 14px 12px; text-align: left; } .dialog-message-card.no-image .dialog-message-photo, .dialog-message-card.no-image .dialog-message-photo img { display: none !important; } .dialog-message-card.no-image .dialog-message-content { text-align: left; }