/* ==========================================================================
   14. MÓDULO: NOTIFICACIONES (DETALLE / CONTENIDO RICO)
   ========================================================================== */

/* Contenedor principal del cuerpo del mensaje */
.message-content {
    overflow-wrap: break-word; /* Evita que palabras largas rompan el layout */
    word-wrap: break-word;
}

/* 1. Imágenes Responsivas: Nunca exceden el ancho del padre */
.message-content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px;         /* Bordes redondeados estéticos */
    box-shadow: var(--shadow-sm);
    margin: 1rem 0;             /* Espaciado vertical */
    display: block;             /* Evita comportamientos extraños de inline */
}

/* 2. Tablas: Scroll horizontal si son muy anchas */
.message-content table {
    width: 100% !important;
    display: block;
    overflow-x: auto;           /* Barra de scroll si la tabla es gigante */
    margin-bottom: 1rem;
    border-collapse: collapse;
}

/* Estilo básico para tablas del editor si no traen estilo */
.message-content table td, 
.message-content table th {
    padding: 8px;
    border: 1px solid var(--border-color);
}

/* 3. Videos (Iframes): Responsivos */
.message-content iframe,
.message-content video {
    max-width: 100%;
    border-radius: 8px;
}

/* 4. Listas y Párrafos: Ajustes de espaciado */
.message-content ul, 
.message-content ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.message-content p {
    margin-bottom: 1rem;
}