/* comparaciones/solicitudes.css */

/* --- Variables de Color Específicas para Solicitudes/Comparaciones --- */
:root {
    /* Reafirmar las variables de color del tema, si no están ya en main.css */
    --color-d-azul: #4184f3;               /* Azul (Decisiones) */
    --color-d-azul-claro: rgba(65, 132, 243, 0.7);
    --color-d-azul-rgb: rgba(66, 133, 244, 1);
    --color-c-rojo: #ed1f24;               /* Rojo (Comparaciones & Solicitudes) */
    --color-c-rojo-rgb: rgba(237, 31, 36, 1); /* Versión RGB para el rojo */
    --color-i-naranja: #f4b400;            /* Naranja (dciDocs) */
    --color-D-verde: #0f9d58;              /* Verde (Democrazy) */
    --color-texto-oscuro: #333;             /* Para el texto principal */
    --color-fondo-claro: #f5f5f5;           /* Para fondos claros de secciones/barras */
    --color-borde-claro: #ccc;              /* Para bordes */
    --color-gris-claro: #888;               /* Gris para el botón H2 por defecto */
    --color-alerta-rojo: #ff4136;           /* Rojo para mensajes de alerta/error */
    --color-alerta-amarillo: #FFD700;       /* Amarillo para mensajes de alerta */
}

/* --- Contenedor de Ancho Estrecho (para contenido principal) --- */
.solicitud-narrow-content-wrapper {
    max-width: 800px;
    margin: 0 auto; /* Centrar el bloque */
    width: 100%;
    padding: 0 20px; /* Padding para evitar que el contenido se pegue a los bordes en pantallas pequeñas */
    box-sizing: border-box;
}

/* El <article> es ahora el contenedor más externo de los bloques */
article.post-type-solicitud_ayuda {
    max-width: none !important; /* Anula cualquier max-width heredado para que el carrusel se expanda */
    padding: 0 !important; /* Anula padding heredado */
    margin: 0 auto !important; /* Centra el article en la página */
    box-sizing: border-box;
}

/* --- Estilos del Header del Post de Solicitud (Autor, Título, Fecha, Votens) --- */
.solicitud-post-header {
    text-align: center; /* Centrar todo el contenido del header */
    margin-bottom: 20px; /* Reducido un poco para que no haya tanto espacio antes del autor */
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%; /* Asegurar que ocupe todo el ancho de su narrow wrapper */
}

.entry-title { /* Título principal de la solicitud */
    color: var(--color-c-rojo);
    font-size: 2.2rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    text-align: center; /* Asegurar centrado */
}
.entry-meta { /* Fecha de publicación */
    text-align: center; /* Centrar la fecha */
}
.entry-meta span {
    color: #999;
    font-size: 0.9em;
}

/* --- Bloque de Autor y Votens (Adaptado de decisiones.css) --- */
.author-meta-block {
    text-align: center;
    margin: 30px auto;
    max-width: 200px; /* Un ancho máximo para el bloque del autor */
}

.author-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.author-avatar-wrapper {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 15px;
    background-color: #333;
    border: 3px solid rgba(255, 255, 255, 0.5);
}

.author-avatar-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.author-name {
    font-size: 1.2em;
    margin-bottom: 5px;
    color: #ffffff;
}

.author-level {
    font-size: 0.9em;
    color: var(--color-c-rojo); /* Color Rojo para Solicitudes */
    margin-bottom: 0;
}

.author-votens-display {
    font-size: 0.9em;
    color: var(--color-c-rojo); /* Color Rojo para Solicitudes */
    margin-top: 5px;
    display: block;
}

/* Estilos para la notificación de contenido relacionado */
.related-content-notice {
    text-align: center;
    font-size: 1.1em;
    color: #ffffff;
    margin-top: 15px;
    margin-bottom: 20px;
    padding: 10px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 5px;
}

.related-content-notice p {
    margin: 0;
    font-weight: bold;
}

.related-content-link {
    color: var(--color-c-rojo); /* Usar Rojo para el color del enlace */
    text-decoration: underline;
}


/* --- Contenido Principal de la Solicitud (the_content()) --- */
.single-solicitud .entry-content {
    background-color: #1e1e1e;
    border: 1px solid var(--color-c-rojo);
    border-radius: 4px;
    padding: 25px;
    color: #f1f1f1;
    margin-bottom: 40px;
    box-sizing: border-box; /* Asegurar box-sizing */
}
.single-solicitud .entry-content h2 { /* Estilos para h2 dentro del editor */
    color: var(--color-c-rojo);
    border-left-color: var(--color-c-rojo);
}
.single-solicitud .entry-content img { /* Asegurar que las imágenes dentro del editor no desborden */
    max-width: 100%;
    height: auto;
    display: block;
    margin: 15px auto;
}

/* --- Sección de Detalles de la Solicitud (Características Deseadas) --- */
.single-solicitud .solicitud-details {
    background-color: #151515;
    border: 1px solid var(--color-c-rojo);
    padding: 1.5rem;
    margin-top: 2rem;
    border-radius: 8px;
    color: #f1f1f1;
    box-sizing: border-box; /* Asegurar box-sizing */
}
.single-solicitud .solicitud-details h2 { /* Título "Detalles de la Solicitud" */
    color: var(--color-c-rojo);
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    text-align: center; /* ¡¡CENTRADO!! */
}
.single-solicitud .solicitud-details h3 { /* "Características deseadas:" */
    color: var(--color-c-rojo);
    font-size: 1.2rem;
    margin-top: 1rem;
    margin-bottom: 0.8rem;
    text-align: left; /* Alineado a la izquierda */
}
.single-solicitud .solicitud-characteristics-list {
    list-style: disc inside;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
    display: block !important;
    color: #f1f1f1;
}
.single-solicitud .solicitud-characteristics-list li {
    margin-bottom: 0.5rem;
}
.single-solicitud .solicitud-characteristics-list li strong {
    color: var(--color-c-rojo);
}
.single-solicitud .solicitud-details p {
    color: #ccc;
}

/* --- Sección Unificada para Seleccionar/Proponer Productos --- */
.solicitud-proponer-producto-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    /* Esta sección en sí misma NO tendrá max-width para que el carrusel pueda expandirse */
    width: 100%;
    box-sizing: border-box;
}
.solicitud-proponer-producto-section .solicitud-narrow-content-wrapper h2 { /* Título de la sección de propuestas */
    color: var(--color-c-rojo);
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
    text-align: center; /* Centrar el título */
}

/* --- Carrusel de Productos --- */
.solicitud-proponer-producto-section .carrusel-container {
    max-width: none; /* ¡CRÍTICO! Permite que el carrusel ocupe todo el ancho de la pantalla */
    width: 100%;
    margin: 10px auto;
    position: relative;
    box-sizing: border-box;
    padding: 40px 0;
}

.solicitud-proponer-producto-section .grid-productos-comparacion {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    
    /* VALORES SOLICITADOS (sobrescriben comparaciones.css) */
    gap: 50px;
    padding: 20px;
    
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    justify-content: flex-start; /* Asegurar que los ítems se alineen a la izquierda para el scroll */
}
.solicitud-proponer-producto-section .grid-productos-comparacion::-webkit-scrollbar {
    display: none;
}

.solicitud-proponer-producto-section .producto-card {
    min-width: 250px;
    max-width: 300px; /* Para mantener uniformidad si hay pocas tarjetas */
    flex-shrink: 0;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    background: #1e1e1e; /* Fondo ligeramente diferente al principal */
    border: 1px solid var(--color-c-rojo);
    padding: 15px;
    gap: 15px;
    cursor: pointer;
}
.solicitud-proponer-producto-section .producto-card:hover:not(.add-proposal-card) {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.5);
}

/* Ocultar la imagen thumbnail en las tarjetas de solicitud */
.producto-card.solicitud-product-card .producto-imagen-wrapper {
    display: none;
}

/* Estilo para tarjetas seleccionadas para responder (efecto visual) */
.solicitud-product-card.selected-for-response {
    box-shadow: 0 0 15px 3px var(--color-c-rojo);
    transform: scale(1.02);
    z-index: 5;
}

/* Colores de texto dentro de tarjetas seleccionadas */
.solicitud-product-card.selected-for-response .producto-header h4 a,
.solicitud-product-card.selected-for-response .producto-header .producto-fabricante,
.solicitud-product-card.selected-for-response .producto-caracteristicas h3,
.solicitud-product-card.selected-for-response .producto-valoraciones h3,
.solicitud-product-card.selected-for-response .producto-media-total h3,
.solicitud-product-card.selected-for-response .caracteristica-item .item-nombre,
.solicitud-product-card.selected-for-response .valoracion-item .item-nombre,
.solicitud-product-card.selected-for-response .caracteristica-item .item-valor,
.solicitud-product-card.selected-for-response .valoracion-stats .valor-medio,
.solicitud-product-card.selected-for-response .valoracion-stats .total-valoraciones {
    color: #fff !important; /* Forzar blanco */
}

/* Estilos para los enlaces de los títulos de producto en estado normal */
.solicitud-product-card .producto-header h4 a {
    color: #f1f1f1;
    text-decoration: none;
    transition: color 0.2s ease;
}
.solicitud-product-card .producto-header h4 a:hover {
    color: var(--color-c-rojo);
}
.solicitud-product-card.selected-for-response .producto-header h4 a:hover {
    color: #fff !important;
}

/* --- Tarjeta "Proponer un Producto" --- */
.add-proposal-card {
    background-color: #1a1a1a;
    border: 2px dashed var(--color-c-rojo);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: all 0.2s ease;
    min-height: 400px;
    flex-shrink: 0;
}
.add-proposal-card:hover {
    background-color: rgba(237, 31, 36, 0.1);
    border-color: var(--color-c-rojo);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.add-proposal-card .add-proposal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-c-rojo);
}
.add-proposal-card .add-icon {
    font-size: 3em;
    margin-bottom: 10px;
}
.add-proposal-card .add-proposal-title {
    font-size: 1.4em;
    font-weight: bold;
    color: var(--color-c-rojo);
}
.add-proposal-card .add-proposal-description {
    font-size: 0.9em;
    color: #ccc;
    max-width: 80%;
}

/* --- Flechas del Carrusel --- */
.solicitud-proponer-producto-section .carrusel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    opacity: 0; /* Ocultar por defecto */
    pointer-events: none; /* Deshabilitar clics si no son visibles */
    transition: opacity 0.2s ease;
    width: 40px;
    height: 40px;
    background-color: var(--color-c-rojo);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.solicitud-proponer-producto-section .carrusel-arrow-left {
    left: 0px;
}
.solicitud-proponer-producto-section .carrusel-arrow-right {
    right: 0px;
}
.solicitud-proponer-producto-section .carrusel-arrow.show-arrow {
    opacity: 1;
    pointer-events: auto;
}


/* --- Editor de Respuestas (Colores Rojos) --- */
.solicitud-response-editor-wrapper {
    margin-top: 40px;
}
.solicitud-response-editor-wrapper h3 { /* Título "Explica tu propuesta (opcional):" */
    color: var(--color-c-rojo);
    font-size: 1.2em; /* Estilo de título de sección, como en decisiones.css */
    text-align: center; /* Centrar título */
    margin-bottom: 20px;
}
.solicitud-response-editor-wrapper .editor-toolbar {
    background-color: #1a1a1a;
    border: 1px solid var(--color-c-rojo);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
}
.solicitud-response-editor-wrapper .editor-toolbar .editor-button,
.solicitud-response-editor-wrapper .editor-toolbar .file-upload-label-editor {
    color: #f1f1f1;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.solicitud-response-editor-wrapper .editor-toolbar .editor-button:hover,
.solicitud-response-editor-wrapper .editor-toolbar .file-upload-label-editor:hover {
    background-color: rgba(237, 31, 36, 0.2);
    color: #fff;
}
.solicitud-response-editor-wrapper .custom-editor {
    border: 1px solid var(--color-c-rojo);
}
.solicitud-response-editor-wrapper .custom-editor h2 {
    border-left: 4px solid var(--color-c-rojo);
    color: var(--color-c-rojo);
}
.solicitud-response-editor-wrapper .custom-editor h2.h2-rojo {
    color: var(--color-c-rojo);
    border-left-color: var(--color-c-rojo);
}


/* --- Botón de Enviar Propuesta --- */
#btn-submit-response {
    background-color: var(--color-c-rojo);
    color: #fff;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: block; /* Para centrar con margin auto */
    margin: 20px auto 0 auto; /* Centrar y margen superior */
}
#btn-submit-response:hover {
    background-color: rgba(237, 31, 36, 0.8);
}
#btn-submit-response:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}


/* --- Modal de Selección de Productos (colores basados en c-rojo) --- */
#dcid-productos-selector-modal .dcid-modal-header h2 {
    color: var(--color-c-rojo);
    text-align: center;
    margin-bottom: 25px;
}
#dcid-productos-selector-modal .dcid-modal-footer button.boton-principal {
    background-color: var(--color-c-rojo);
    border-color: var(--color-c-rojo);
}
#dcid-productos-selector-modal .dcid-modal-footer button.boton-principal:hover {
    background-color: rgba(237, 31, 36, 0.8);
}
#dcid-productos-selector-modal .dcid-modal-footer button.boton-secundario {
    color: var(--color-c-rojo);
    border-color: var(--color-c-rojo);
    background-color: #151515;
}
#dcid-productos-selector-modal .dcid-modal-footer button.boton-secundario:hover {
    background-color: rgba(237, 31, 36, 0.2);
}

/* Ajustes de color de la modal selector (siempre con el color de la sección 'c') */
#dcid-productos-selector-modal .dcid-modal-body .seccion-titulo label {
    color: var(--color-c-rojo); 
}
#dcid-productos-selector-modal .dcid-modal-body .categoria-item:hover,
#dcid-productos-selector-modal .dcid-modal-body .tipo-item:hover,
#dcid-productos-selector-modal .dcid-modal-body .producto-item:hover {
    border-color: var(--color-c-rojo); 
    background-color: rgba(237, 31, 36, 0.2); 
}
#dcid-productos-selector-modal .dcid-modal-body .categoria-item.selected,
#dcid-productos-selector-modal .dcid-modal-body .tipo-item.selected,
#dcid-productos-selector-modal .dcid-modal-body .producto-item.selected {
    border-color: var(--color-c-rojo); 
    background-color: rgba(237, 31, 36, 0.3);
    color: #fff;
}


/* --- Responsive adjustments --- */
@media (max-width: 768px) {
    .solicitud-narrow-content-wrapper {
        padding: 0 10px;
    }
    .editor-toolbar,
    #solicitud-response-editor-wrapper .editor-toolbar {
        flex-wrap: wrap;
        height: auto;
        padding: 5px;
    }
    .editor-toolbar .editor-button,
    .editor-toolbar .file-upload-label-editor,
    #solicitud-response-editor-wrapper .editor-toolbar .editor-button,
    #solicitud-response-editor-wrapper .editor-toolbar .file-upload-label-editor {
        font-size: 0.8em;
        padding: 6px 10px;
        height: auto;
        border-right: none;
    }
    .editor-toolbar .file-upload-container,
    #solicitud-response-editor-wrapper .editor-toolbar .file-upload-container {
        margin-left: 0;
        width: auto;
        text-align: left;
    }
}

/* --- Estilos para la Sección de Votens (Adaptados a color rojo) --- */
.votens-rating-section.post-type-solicitud {
    border-top: 2px solid var(--color-c-rojo); /* Borde superior rojo */
    padding: 20px 0;
    text-align: center;
    max-width: 800px; /* Consistente con el resto del contenido */
    margin: 40px auto; /* Centrar y añadir margen */
    box-sizing: border-box;
}
.votens-rating-section.post-type-solicitud .votens-intro-text-solicitud {
    color: var(--color-c-rojo); /* Texto introductorio rojo */
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 20px;
    text-align: center;
}
.votens-rating-section.post-type-solicitud .votens-rated-message {
    color: var(--color-c-rojo); /* Mensaje "Ya has valorado" en rojo */
    font-weight: bold;
    text-align: center;
    margin-bottom: 0;
}

/* --- Modal de Votens (Adaptada a color rojo) --- */
.votens-modal-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}
.votens-modal-content {
    background-color: #151515;
    margin: auto;
    padding: 30px;
    border: 2px solid #555;
    border-radius: 10px;
    width: 90%;
    max-width: 500px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    text-align: center;
    box-sizing: border-box;
}
.votens-modal-overlay.type-solicitud .votens-modal-content { /* Borde rojo para solicitud */
    border: 2px solid var(--color-c-rojo);
}
.votens-modal-close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}
.votens-modal-close:hover,
.votens-modal-close:focus {
    color: var(--color-c-rojo); /* Color rojo para el botón de cerrar */
    text-decoration: none;
    cursor: pointer;
}
.votens-modal-intro-text {
    color: #fff;
    font-size: 1.1em;
    margin-bottom: 25px;
    line-height: 1.5;
}
.votens-modal-buttons-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 300px;
    margin: 0 auto;
}
.votens-modal-content .btn-votens-option {
    background-color: #333;
    color: #fff;
    border: 1px solid #555;
    transition: all 0.3s ease;
    padding: 12px 20px;
    font-size: 1.1em;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}
.votens-modal-overlay.type-solicitud .votens-modal-content .btn-votens-option:hover {
    background-color: var(--color-c-rojo); /* Fondo rojo al hover */
    color: #fff;
    border-color: var(--color-c-rojo);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
#votens-modal-message {
    font-weight: bold;
    margin-top: 20px;
    color: yellow; /* Mensaje de éxito/error en amarillo */
}