body { /* Heredará el estilo oscuro de tu body principal si esta página es parte del mismo HTML/CSS base */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Coincide con tu fuente principal */
    line-height: 1.6;
    margin: 0; /* Asumiendo que el body principal ya lo maneja */
    padding: 0; /* Asumiendo que el body principal ya lo maneja */
    background-color: #3d313a; /* Fondo oscuro del body principal */
    color: #e8e8e8; /* Color de texto general claro del body principal */
}

/* Si la página de comunidad tiene su propio header, puedes estilizarlo aquí */
/* O si usa el header global, estos estilos podrían no ser necesarios o necesitar ajustes */
header { /* Estilo para el header específico de la página de comunidad */
    background: #2c2c2e; /* Un tono oscuro de tus columnas */
    color: #e8e8e8;
    padding: 1rem 0;
    text-align: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #444; /* Borde similar a tus columnas */
}

header h1 {
    margin: 0;
    color: #00b894; /* Color de H1 de tu sitio */
    font-size: 1.6em; /* Un poco más grande para el título principal de la página */
    border-bottom: none; /* El header ya tiene un borde inferior */
}

.container { /* Contenedor principal de la sección de comentarios */
    width: 90%;
    max-width: 900px; /* O el ancho que prefieras */
    margin: auto;
    /* overflow: hidden; Comentado por posible conflicto con sticky */
    padding: 20px; /* Espaciado interno */
    background-color: #343a40; /* Similar a tu columna central */
    color: #e8e8e8;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3); /* Sombra más sutil para tema oscuro */
    border-radius: 6px; /* Bordes redondeados */
    box-sizing: border-box;
}

.comments-section h2 {
    color: #dadada; /* Color de H2 de tu sitio */
    font-size: 1.3em; /* Tamaño ajustado */
    border-bottom: 1px solid #00897b; /* Borde inferior de H2 de tu sitio */
    padding-bottom: 8px;
    margin-top: 0; /* Ajustado, el contenedor padre dará el espacio superior */
    margin-bottom: 20px;
}

.comment-form textarea {
    width: calc(100% - 22px); 
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #555; /* Borde de controles de tu sitio */
    border-radius: 4px;
    font-size: 1em;
    box-sizing: border-box;
    background-color: #2c2c2e; /* Fondo oscuro para inputs */
    color: #e0e0e0; /* Texto claro en inputs */
}
.comment-form textarea:focus {
    border-color: #00b894; /* Color de acento al enfocar */
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 184, 148, 0.3);
}

.comment-form button[type="submit"],
.comment-form button[type="button"] {
    background: #00b894; /* Color de acento principal */
    color: #ffffff;
    border: none;
    padding: 10px 18px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 1em;
    font-weight: bold;
    transition: background-color 0.2s ease;
}
.comment-form button[type="button"] { /* Botón de cancelar */
    background: #4a4a4e; /* Un gris oscuro, como tus dropdowns */
    margin-left: 10px;
}

.comment-form button[type="submit"]:hover {
    background: #00a080; /* Un poco más oscuro al pasar el ratón */
}
.comment-form button[type="button"]:hover {
    background: #5a5a5e;
}

.comments-separator {
    margin: 25px 0;
    border: 0;
    border-top: 1px solid #444; /* Separador más oscuro */
}

.comment-list {
    list-style: none;
    padding: 0;
}

.comment-list .nested {
    margin-left: 30px; 
    padding-left: 15px;
    border-left: 1px solid #444; /* Borde de anidación más sutil */
}

.comment-item {
    background: #2c2c2e; /* Fondo para cada item de comentario, como tus columnas laterales */
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #404040; /* Borde sutil para cada comentario */
    border-radius: 5px;
    position: relative; 
}
.comments-list-box .comment-item:last-child {
    margin-bottom: 0;
}

.comment-header {
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.comment-author {
    font-weight: bold;
    color: #00b894; /* Color de acento para el autor */
}

.comment-date {
    font-size: 0.8em; /* Más pequeño */
    color: #a0a0a0; /* Gris claro para la fecha */
}

.comment-body {
    margin-bottom: 10px;
    white-space: pre-wrap; 
    word-wrap: break-word; 
    color: #c5c5c5; /* Color de texto principal para comentarios */
}

.comment-actions button {
    background: none;
    border: none;
    color: #61dafb; /* Color de enlace de tu sitio */
    cursor: pointer;
    padding: 5px;
    font-size: 0.9em;
    transition: color 0.2s ease;
}
.comment-actions button:hover {
    color: #8be9fd; /* Más brillante al pasar el ratón */
    text-decoration: none;
}
.comment-actions .like-button.liked {
    color: #50fa7b; /* Verde "dracula" de tu sitio para "liked" */
    font-weight: bold;
}
.comment-actions .like-count {
    font-size: 0.9em;
    color: #a0a0a0; /* Gris claro para el contador */
}

.reply-form-container {
    margin-top: 15px;
    padding: 15px;
    background-color: #343a40; /* Mismo fondo que el contenedor principal para el form de respuesta */
    border-radius: 4px;
    border: 1px solid #444;
}
.reply-form-container h4 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.1em;
    color: #dadada; /* Similar a H2 */
    border-bottom: 1px solid #00897b;
    padding-bottom: 5px;
}

.no-comments {
    color: #a0a0a0; /* Gris claro */
    font-style: italic;
    text-align: center;
    padding: 20px;
}

.login-to-comment, .login-to-interact {
    background-color: #2a2a2e; /* Fondo oscuro */
    padding: 15px;
    border-radius: 5px;
    margin: 20px 0;
    text-align: center;
    border: 1px solid #444;
}
.login-to-comment a, .login-to-interact a {
    color: #61dafb; /* Color de enlace */
    text-decoration: none;
    font-weight: bold;
}
.login-to-comment a:hover, .login-to-interact a:hover {
    text-decoration: underline;
    color: #8be9fd;
}

/* Alertas con tema oscuro */
.alert {
    padding: 12px 15px;
    margin-bottom: 15px;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    border-left: 5px solid transparent;
}
.alert-danger, .error-message { /* Unificando .error-message con .alert-danger */
    background-color: #4d262a; /* Similar a tu alerta-bajada */
    color: #ff9999;
    border-left-color: #dc3545;
}
.alert-success {
    background-color: #2a3b2a; /* Similar a tu alerta-subida */
    color: #90ee90;
    border-left-color: #28a745;
}

/* --- Estilos para el formulario fijo y lista de comentarios desplazable (Tema Oscuro) --- */

.sticky-comment-form-area {
    position: sticky;
    top: 0; 
    background-color: #343a40; /* Mismo fondo que .container para integración visual */
    z-index: 100; 
    padding-top: 1px; /* Evitar que el margen del h2 colapse */
    padding-bottom: 10px;
    /* El H2 dentro ya tiene su propio borde inferior, así que no se necesita uno aquí */
}
.sticky-comment-form-area h2 { 
    margin-top: 20px; /* Espacio superior para el H2 */
    margin-bottom: 15px; 
    /* Hereda estilos de .comments-section h2 */
}

.comments-list-box {
    max-height: 60vh; 
    overflow-y: auto; 
    border: 1px solid #444; /* Borde oscuro */
    border-radius: 5px;       
    padding: 20px;            
    margin-top: 20px;         
    background-color: #2c2c2e; /* Ligeramente diferente al contenedor, como tus columnas */
}

.comments-list-box h2 { 
    margin-top: 0; /* El padding del box se encarga */
    margin-bottom: 20px; 
    /* Hereda estilos de .comments-section h2 */
}

/* Estilos para la barra de scroll (WebKit) - Tema Oscuro */
.comments-list-box::-webkit-scrollbar {
    width: 10px; 
}
.comments-list-box::-webkit-scrollbar-track {
    background: #2c2c2e; /* Fondo del track oscuro */
    border-radius: 10px;
}
.comments-list-box::-webkit-scrollbar-thumb {
    background: #55585c; /* Thumb gris oscuro */
    border-radius: 10px; 
    border: 2px solid #2c2c2e; /* Borde para que parezca más delgado */
}
.comments-list-box::-webkit-scrollbar-thumb:hover {
    background: #77797d; 
}

footer { /* Estilo para el footer específico de la página de comunidad */
    text-align: center;
    padding: 20px;
    margin-top: 30px;
    background: #2c2c2e; /* Similar al header de comunidad */
    color: #a0a0a0; /* Texto gris claro */
    font-size: 0.9em;
    border-top: 1px solid #444;
}

/* Responsive */
@media (max-width: 1023px) { /* Tablets */
     .container {
        width: 95%;
        padding: 15px;
    }
    .sticky-comment-form-area {
        padding-left: 0; 
        padding-right: 0;
    }
    .comments-list-box {
        /* margin-left: 0;
        margin-right: 0; */ /* No necesarios si .container tiene padding */
        padding: 15px;
    }
}

@media (max-width: 767px) { /* Móviles */
    body {
        font-size: 13px; /* Un poco más pequeño en móviles si es necesario */
    }
    .container {
        width: 100%; 
        padding: 10px;
        border-radius: 0; 
        box-shadow: none; 
    }
     .sticky-comment-form-area {
        /* Ajustes si top:0 no es suficiente debido a un header móvil */
    }
    .comments-list-box {
        padding: 10px;
        max-height: 65vh; /* Un poco más de altura en móviles */
    }
    .comment-list .nested {
        margin-left: 15px; 
        padding-left: 10px;
    }
    .comment-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .comment-date {
        margin-top: 5px;
        font-size: 0.75em;
    }
    .comment-form textarea {
        font-size: 0.95em;
    }
    .comment-form button {
        font-size: 0.95em;
        padding: 8px 12px;
    }
}