/* ===== ESTILOS PARA LA SECCIÓN DE COMENTARIOS Y LIKES ===== */

/* Contenedor principal de un comentario individual */
.comment_container {
    display: flex;
    justify-content: flex-start; /* Alinea al inicio */
    align-items: flex-start;
    width: 100%;
    padding: 8px;
    background-color: #f0f2f5; /* Un gris más moderno y suave */
    border-bottom: 1px solid #dddfe2; /* Separador sutil */
}

/* Sección interna del comentario */
.comment_section {
    display: flex;
    flex-direction: row; /* Imagen al lado del texto */
    align-items: flex-start;
    width: 100%;
}

.comment_section img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin-right: 10px;
}

.comment_text {
    background-color: #e4e6eb;
    padding: 8px 12px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.4;
    color: #050505;
}

.comment_text a {
    font-weight: bold;
    color: #050505;
    text-decoration: none;
}

.comment_text a:hover {
    text-decoration: underline;
}

.time-message {
    font-size: 12px;
    color: #65676b;
    margin-left: 10px;
}

/* Formulario para escribir un nuevo comentario */
.comment-form-container {
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.comment-form-container textarea {
    width: 100%;
    height: 40px;
    border-radius: 20px;
    border: 1px solid #ccc;
    padding: 8px 15px;
    font-size: 14px;
    resize: none;
    background-color: #f0f2f5;
}

.comment-form-container input[type="submit"] {
    padding: 8px 15px;
    background-color: #1877f2;
    border: none;
    color: white;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.comment-form-container input[type="submit"]:hover {
    background-color: #166fe5;
}

/* ===== ESTILOS PARA LIKES (MOVIDOS DE STYLE.CSS) ===== */
.like_section {
    display: inline-flex; /* Permite alinear botón y contador */
    align-items: center;
    gap: 5px;
}

.like_form {
    display: contents; /* Evita que el form afecte el layout */
}

.comment_like {
    background-color: transparent;
    border: none;
    font-size: 14px;
    padding: 0;
    cursor: pointer;
    color: #65676b; /* Color por defecto */
}

.comment_like.liked {
    color: #1877f2; /* Color cuando ya se dio like */
    font-weight: bold;
}

.comment_like .fa-thumbs-up {
    margin-right: 4px;
}

.like_value {
    display: inline;
    font-size: 14px;
    color: #65676b;
}


/* ===== ESTILOS PARA LA BARRA DE OPCIONES DEL POST (ICONOS) ===== */

.newsfeedPostOptions {
    /* Flexbox para alineación y espaciado moderno */
    display: flex;
    justify-content: center; /* Centra el grupo de iconos */
    align-items: center;     /* Alinea verticalmente los iconos y el texto */
    gap: 25px;               /* ¡La clave! Añade un espacio de 25px entre cada elemento */
    
    padding: 10px 0;         /* Añade un poco de espacio vertical arriba y abajo */
    border: none;
}

/* Estilo unificado para todos los elementos dentro de la barra de opciones */
.newsfeedPostOptions a,
.newsfeedPostOptions .like_section {
    color: #65676b; /* Un color gris consistente */
    text-decoration: none;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease; /* Transición suave para el hover */
}

/* Efecto hover para todos los enlaces */
.newsfeedPostOptions a:hover {
    color: #1877f2; /* Color azul al pasar el ratón */
    text-decoration: none;
}

/* Espacio entre el icono (ej. el pulgar) y el texto/número */
.newsfeedPostOptions .fas,
.newsfeedPostOptions .fab {
    margin-right: 5px; 
}

/* Oculta el iframe viejo si todavía existe */
.newsfeedPostOptions iframe {
    display: none;
}