/* vista-whatsapp.css */

/* INICIO ESTILOS PORTADAS AVISOS */
.portadas-contenedor {
    display: flex;
    margin-bottom: 15px;
    position: relative;
    width: 100%;
    max-width: 100%;
}

.portadas-contenedor-foto {
    margin-right: 15px;
    align-self: flex-start;
    flex-shrink: 0;
}

.portadas-foto {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #dcf8c6;
}

.portadas-contenido {
    background-color: #dcf8c6;
    border-radius: 0px 8px 8px 8px;
    padding: 2px 7px; /* Aumentado el padding para más espacio */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    position: relative;
    margin-top: 1px;
    min-height: 100px; /* Mayor altura mínima */
    --altura-flecha: 24px;
    flex-grow: 1;
    width: auto;
    display: flex;
    flex-direction: column; /* Organiza el contenido en columna */
}

.portadas-contenido::before {
    content: "";
    position: absolute;
    left: -22px;
    top: 0px;
    width: 22px;
    height: var(--altura-flecha, 24px);
    background-image: url('https://www.ponelo.cl/avisos/flecha.png');
    background-repeat: no-repeat;
    background-size: 22px var(--altura-flecha, 24px);
    background-position: left top;
    z-index: 3;
    cursor: pointer;
}

.portadas-remitente {
    font-size: 15px;
    font-weight: 600;
    color: #1a73e8;
    margin-bottom: 8px; /* Más margen inferior */
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

.portadas-texto {
    font-size: 15px;
    color: #0a0a0a;
    margin: 0;
    line-height: 1.4;
    padding-right: 1px;
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    letter-spacing: 0.01em;
    word-wrap: break-word;
    flex-grow: 1; /* Ocupa todo el espacio vertical disponible */
    display: flex;
    align-items: center; /* Centra verticalmente */
    min-height: 40px; /* Altura mínima para el texto */
}

.portadas-info {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative; /* Cambiado a relative para mejor flujo */
    bottom: auto;
    right: auto;
    gap: 4px;
    margin-top: 8px; /* Espacio arriba del info */
}

.portadas-hora {
    font-size: 9px;
    color: #667781;
    margin: 0;
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

.portadas-estado {
    color: #53bdeb;
    font-size: 13px;
    display: flex;
    align-items: center;
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

.portadas-enlace {
    position: absolute;
    top: 0;
    left: -22px;
    width: calc(100% + 22px);
    height: 100%;
    z-index: 2;
    cursor: pointer;
    text-decoration: none;
}

.portadas-contenido:hover {
    background-color: #d0f0c0;
    transition: background-color 0.2s ease;
}

.portadas-contenido:hover::before {
    background-image: url('https://www.ponelo.cl/avisos/flecha.png');
    filter: brightness(0.95);
}
/* FIN ESTILOS PORTADAS AVISOS */