/* ==========================================================================
   Hoja de Estilos Final v8 - Con Integración Visual de Edición de Comentarios
   ========================================================================== */

/* --- Contenedor Principal y Cabecera --- */
#wpdcom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); }
.wpd-thread-head { margin-bottom: 25px; }
.wpd-thread-info { font-size: 1.4rem; font-weight: bold; color: var(--text-main); }
.wpd-thread-info .wpdtc { font-size: 1rem; background-color: var(--bg-surface); padding: 3px 9px; border-radius: 5px; margin-right: 10px; vertical-align: middle; }

/* --- Formulario de Comentarios --- */
.wpd-form-wrap { margin-bottom: 30px; }
.wc-field-submit { text-align: right; margin-top: 10px; }
.wpd-prim-button { background-color: var(--color-primary, #5A4FCF); color: #fff; border: none; padding: 9px 18px; border-radius: 5px; cursor: pointer; font-weight: 600; transition: opacity 0.2s ease; }
.wpd-prim-button:hover { opacity: 0.9; }

/* --- Lista de Comentarios --- */
.wpd-thread-list { display: flex; flex-direction: column; gap: 20px; }

/* --- Estructura de un Comentario Individual --- */
.wpd-comment-wrap { display: flex; gap: 15px; }
.wpd-comment-left { flex-shrink: 0; width: 48px; }
.wpd-comment-right { flex-grow: 1; min-width: 0; }
.wpd-avatar img { width: 48px; height: 48px; border-radius: 50%; }
.wpd-comment-label { font-size: 0.7em; font-weight: bold; color: #fff; background-color: #00a896; border-radius: 4px; padding: 2px 0; margin-top: 5px; text-align: center; }

/* --- Contenido del Comentario --- */
.wpd-comment-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.wpd-comment-author { font-weight: 700; color: var(--text-main); }
.wpd-comment-date { font-size: 0.8em; color: var(--text-muted); }
.wpd-comment-text { color: var(--text-normal); line-height: 1.6; word-wrap: break-word; }
.wpd-comment-text .ql-editor { padding: 0; min-height: 0; font-size: inherit; }
.wpd-comment-footer { display: flex; align-items: center; gap: 15px; margin-top: 10px; flex-wrap: wrap; }

/* --- Acciones (Votos, Responder y Editar) --- */
.wpd-vote { display: flex; align-items: center; gap: 8px; }
.wpd-vote-up, .wpd-vote-down { cursor: pointer; color: var(--text-muted); transition: color 0.2s ease; }
.wpd-vote-up:hover, .wpd-vote-down:hover { color: var(--text-main); }
.wpd-vote svg { width: 16px; height: 16px; }
.wpd-vote-result { font-weight: bold; font-size: 0.9em; }
.wpd-vote-up.wpd-vote-voted, .wpd-vote-down.wpd-vote-voted { color: var(--color-primary, #5A4FCF); }

.wpd-reply-button,
.wpd-edit-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-weight: bold;
    font-size: 0.9em;
    cursor: pointer;
    transition: color 0.2s ease;
}
.wpd-reply-button:hover,
.wpd-edit-button:hover {
    color: var(--text-main);
}
.wpd-reply-button svg,
.wpd-edit-button svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}
.wpd-edit-button svg {
    transform: scale(0.85); /* Ajuste visual para el icono de editar */
}


/* --- Anidación de Respuestas --- */
.wpd-reply-list { margin-top: 20px; padding-left: 25px; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 20px; }
.wpd-reply .wpd-comment-left { width: 40px; }
.wpd-reply .wpd-avatar img { width: 40px; height: 40px; }
.reply-form-wrap { margin-top: 15px; padding-left: 63px; }

/* --- Estilos del Editor Quill.js (CON CONTRASTE) --- */
[id^="quill-toolbar-"] { background: var(--bg-surface) !important; border: 1px solid var(--border) !important; border-bottom: none !important; padding: 8px; border-radius: 5px 5px 0 0; text-align: left; }
.quill-editor { background: var(--bg-darker, #1a1b26); border: 1px solid var(--border); border-top: none; border-radius: 0 0 5px 5px; min-height: 120px; padding: 12px; color: var(--text-normal); }
.quill-editor.ql-blank::before { color: var(--text-muted); font-style: normal; opacity: 0.7; }
.reply-form-wrap .quill-editor { min-height: 90px; }

/* --- SECCIÓN DE CORRECCIÓN DE LA BARRA DE HERRAMIENTAS QUILL (A PRUEBA DE FALLOS) --- */
.ql-snow .ql-toolbar button svg, .ql-snow.ql-toolbar button svg { stroke: var(--text-muted) !important; fill: transparent !important; }
.ql-snow .ql-toolbar .ql-fill { fill: var(--text-muted) !important; }
.ql-snow .ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button:hover .ql-stroke { stroke: #FFFFFF !important; }
.ql-snow .ql-toolbar button:hover .ql-fill, .ql-snow.ql-toolbar button:hover .ql-fill { fill: #FFFFFF !important; }
.ql-snow .ql-toolbar .ql-picker-label:hover { color: #FFFFFF !important; }
.ql-snow .ql-toolbar button.ql-active .ql-stroke, .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--color-primary) !important; }
.ql-snow .ql-toolbar button.ql-active .ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--color-primary) !important; }
.ql-snow .ql-toolbar .ql-picker-label { color: var(--text-muted) !important; }
.ql-snow .ql-toolbar .ql-picker.ql-active .ql-picker-label, .ql-snow.ql-toolbar .ql-picker.ql-active .ql-picker-label { color: var(--color-primary) !important; }
.ql-snow .ql-toolbar .ql-picker.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker.ql-active .ql-stroke { stroke: var(--color-primary) !important; }

/* --- Estilos para Renderizado de Contenido Quill --- */
.wpd-comment-text .ql-editor-display { font-size: 0.95rem; }
.wpd-comment-text .ql-editor ul { list-style-type: disc !important; list-style-position: inside !important; padding-left: 1.5em !important; margin: 0.5em 0 !important; }
.wpd-comment-text .ql-editor ol { list-style-type: decimal !important; list-style-position: inside !important; padding-left: 1.5em !important; margin: 0.5em 0 !important; }
.wpd-comment-text .ql-editor li { display: list-item !important; margin-bottom: 0.25em !important; }
.wpd-comment-text a { color: var(--color-primary, #5A4FCF); text-decoration: underline; }
.wpd-comment-text .ql-editor blockquote { border-left: 4px solid var(--color-primary) !important; background-color: rgba(90, 79, 207, 0.1) !important; margin: 1em 0 1em 1em !important; padding: 0.5em 1em !important; color: var(--text-normal) !important; }
.wpd-comment-text .ql-editor pre.ql-syntax { background-color: #23241f; color: #f8f8f2; padding: 1em; border-radius: 5px; white-space: pre-wrap; word-wrap: break-word; }

/* Mensajes de 'login' o 'no hay comentarios' */
.comment-login-prompt, .no-comments-message { padding: 20px; background-color: var(--bg-surface); border-radius: 5px; text-align: center; color: var(--text-muted); margin: 20px 0; }


/* ==========================================================================
   NUEVA SECCIÓN: ESTILOS PARA EDICIÓN DE COMENTARIOS
   ========================================================================== */

.edit-form-wrap {
    margin-top: 15px;
    border: 1px solid var(--border);
    padding: 10px;
    border-radius: 5px;
    background-color: var(--bg-surface);
}

/* El editor de Quill dentro del modo de edición tendrá una altura mínima y podrá crecer */
.edit-form-wrap .quill-editor {
    min-height: 100px;
    max-height: 450px; /* Evita que se haga excesivamente grande */
    overflow-y: auto;  /* Añade scroll si el contenido es muy largo */
}

/* Contenedor de los botones Guardar/Cancelar */
.edit-form-wrap .wc-field-submit {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Botón secundario para "Cancelar" */
.wpd-cancel-button {
    background-color: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 9px 18px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}

.wpd-cancel-button:hover {
    background-color: var(--bg-surface);
    color: #fff;
    border-color: #fff;
}

/* --- Estilos para el botón de Borrar --- */
.wpd-comment-footer .wpd-delete-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-weight: bold;
    font-size: 0.9em;
    cursor: pointer;
    transition: color 0.2s ease;
}

.wpd-comment-footer .wpd-delete-button:hover {
    color: #e53935; /* Un color rojo para indicar peligro */
}

.wpd-comment-footer .wpd-delete-button svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    transform: scale(0.85);
}

.comment-guidelines {
    position: relative;
    
    /* Fondo y borde */
    background-color: rgba(44, 47, 56, 0.5); /* Un fondo oscuro semitransparente */
    border: 1px solid rgba(110, 110, 120, 0.3);
    border-radius: 8px;
    
    /* Espaciado */
    padding: 1.5rem;
    margin-bottom: 2.5rem; /* Más separación del resto */
    
    /* Sombra sutil para darle profundidad */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.comment-guidelines h4 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center; /* Centrar el título */
    gap: 0.75rem;
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--text-primary, #fff);
    text-align: center;
}

.comment-guidelines ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid; /* Usamos Grid para un alineamiento perfecto */
    /* Crea 3 columnas en escritorio, 1 en móvil */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 1rem;
    justify-items: center; /* Centra los items horizontalmente */
    text-align: center; /* Centra el texto dentro de cada item */
}

.comment-guidelines li {
    display: flex;
    flex-direction: column; /* Icono arriba, texto abajo */
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--text-secondary, #ccc);
}

.comment-guidelines li i {
    font-size: 1.75rem; /* Iconos más grandes */
    width: 40px; /* Ancho fijo para alineación */
    height: 40px; /* Alto fijo */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Colores de los iconos (sin cambios) */
.icon-spoiler { color: #f1c40f; }
.icon-respect { color: #e91e63; }
.icon-spam   { color: #e74c3c; }

.spoiler {
    background-color: #2f3136; /* Un gris oscuro, similar al de Discord */
    color: transparent;      
    padding: 0 4px;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    
    /* --- LA MAGIA DE LA TRANSICIÓN --- */
    /* Animamos el cambio de color de fondo y el color del texto. */
    transition: background-color 0.15s ease-in-out, color 0.1s ease-in-out;
}

.spoiler:hover {
    background-color: #3a3d44; /* Un gris ligeramente más claro al pasar el ratón */
}

/* Estado cuando el spoiler ha sido revelado */
.spoiler.revealed {
    /* El color de fondo cambia a uno semitransparente para dar un "resplandor" sutil */
    background-color: rgba(62, 65, 75, 0.5); 
    
    /* El color del texto vuelve a ser el normal */
    color: inherit; 
    
    user-select: text;
    cursor: text;
}

/* Para que se pueda hacer foco con el teclado (accesibilidad) */
.spoiler:focus {
    outline-offset: 1px;
}