/* css/buscador-avanzado.css */

/* Variables específicas para el buscador avanzado, usando la paleta de user-management.css */
:root {
    --buscador-bg-dark: var(--usermgmt-dark);      /* Fondo oscuro general */
    --buscador-text-light: var(--usermgmt-light);    /* Texto claro */
    --buscador-border: var(--usermgmt-border);     /* Borde para inputs y botones */
    --buscador-hover-bg: var(--usermgmt-hover);    /* Fondo para hover de elementos interactivos */
    --buscador-card-bg: var(--usermgmt-card-bg);   /* Fondo para las tarjetas de resultados */
    --buscador-active-bg: var(--usermgmt-light);   /* Fondo para el estado activo/seleccionado */
    --buscador-active-text: var(--usermgmt-dark);  /* Texto para el estado activo/seleccionado */
}

/* Contenedor principal del buscador, basado en user-management.css */
.dcid-advanced-search-wrapper {
    max-width: 900px; /* Ancho máximo para el wrapper */
    margin: auto;
    padding: 20px;
    box-sizing: border-box;
}

/* Contenedor del formulario de búsqueda, adaptando estilos de user-management.css */
.dcid-advanced-search-wrapper .dcid-form-container {
    background-color: var(--buscador-card-bg); /* Fondo de tarjeta */
    padding: 30px;
    border-radius: 8px;
    border: 1px solid var(--buscador-border);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Título de la sección, usando estilo usermgmt-title */
.dcid-advanced-search-wrapper .usermgmt-title.screen-reader-text {
    display: none !important; 
    visibility: hidden;
    position: absolute;
    top: -9999px;
    left: -9999px;
    text-indent: -9999px;
}

/* Mensajes de feedback (éxito/error), adaptados de usermgmt-message */
.dcid-advanced-search-wrapper .usermgmt-messages-wrapper {
    margin-bottom: 20px;
}
.dcid-advanced-search-wrapper .usermgmt-message {
    padding: 12px 15px;
    border-radius: 4px;
    text-align: center;
    font-weight: bold;
    color: var(--buscador-text-light);
    background-color: var(--buscador-hover-bg);
    border: 1px solid var(--buscador-border);
}
.dcid-advanced-search-wrapper .usermgmt-message.error {
    background-color: #dc3545; /* Rojo de error */
    border-color: #b21f2d;
}
.dcid-advanced-search-wrapper .usermgmt-message.success {
    background-color: #28a745; /* Verde de éxito */
    border-color: #1e7e34;
}
/* Ajustar margen inferior del mensaje "No se encontraron posts" */
#dcid-advanced-search-modal .search-results-section #search-results-container .usermgmt-message.no-posts-found {
    color: var(--buscador-text-light);
    background-color: var(--buscador-card-bg);
    border: 1px solid var(--buscador-border);
    margin-top: 20px !important; 
    margin-bottom: 20px !important; 
}


/* Estilos para las filas del formulario para centrar labels y campos */
#dcid-advanced-search-modal .dcid-advanced-search-wrapper .form-row.centered-field-row {
    display: flex !important; /* Forzar flexbox para apilar elementos */
    flex-direction: column !important; /* Apilar elementos verticalmente */
    align-items: center !important; /* Centrar horizontalmente los elementos */
    grid-template-columns: unset !important; /* Anular grid columns */
    gap: 10px !important; /* Espacio entre el label y su contenido */
    margin-bottom: 25px !important; /* Asegurar este margen entre filas */
    padding: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
}

/* Labels de filtro */
#dcid-advanced-search-modal .dcid-advanced-search-wrapper .usermgmt-label {
    color: var(--buscador-text-light) !important;
    font-weight: bold;
    margin-bottom: 0 !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    max-width: 500px; /* Limitar el ancho máximo del label */
}

/* Wrapper para el contenido de los campos, para centrar */
#dcid-advanced-search-modal .dcid-advanced-search-wrapper .field-content-wrapper {
    display: flex !important;
    justify-content: center !important; /* Centrar el contenido de los campos (input, botones) */
    width: 100% !important; /* Ocupar todo el ancho para permitir el centrado */
    max-width: 600px !important; /* Ancho máximo para los campos de contenido */
}

/* Input de palabras clave */
#dcid-advanced-search-modal .dcid-advanced-search-wrapper #search-keywords {
    width: 100% !important; /* Ocupa el 100% de su field-content-wrapper */
    height: 45px;
    padding: 10px 15px;
    border: 1px solid var(--buscador-border);
    border-radius: 4px;
    background-color: var(--buscador-bg-dark);
    color: var(--buscador-text-light);
    box-sizing: border-box;
    transition: all 0.3s ease;
}
#dcid-advanced-search-modal .dcid-advanced-search-wrapper #search-keywords:focus,
#dcid-advanced-search-modal .dcid-advanced-search-wrapper #search-keywords:hover {
    background-color: var(--buscador-active-bg);
    color: var(--buscador-active-text);
    border-color: var(--buscador-active-bg);
    outline: none;
}


/* Contenedor de grupos de botones de filtro */
#dcid-advanced-search-modal .dcid-advanced-search-wrapper .dcid-filter-button-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center !important;
    width: 100% !important;
}

/* Botones de filtro generales */
#dcid-advanced-search-modal .dcid-advanced-search-wrapper .dcid-filter-button.usermgmt-categoria-label {
    background: var(--buscador-bg-dark);
    color: var(--buscador-text-light);
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    border: 1px solid var(--buscador-border);
    min-width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-grow: 1;
    max-width: 180px;
}

#dcid-advanced-search-modal .dcid-advanced-search-wrapper .dcid-filter-button.usermgmt-categoria-label:hover:not(.active) {
    background-color: var(--buscador-hover-bg);
    border-color: var(--buscador-text-light);
    color: var(--buscador-text-light);
}

#dcid-advanced-search-modal .dcid-advanced-search-wrapper .dcid-filter-button.usermgmt-categoria-label.active,
#dcid-advanced-search-modal .dcid-advanced-search-wrapper .dcid-filter-button.usermgmt-categoria-label.seleccionada {
    background-color: var(--buscador-active-bg) !important;
    color: var(--buscador-active-text) !important;
    border-color: var(--buscador-active-bg) !important;
}

/* Sobrescritura de color de borde para el tipo de contenido si se necesita un color de marca específico */
#dcid-advanced-search-modal .dcid-advanced-search-wrapper .dcid-filter-button.usermgmt-categoria-label[data-filter-type="post_type"].active {
    border-color: var(--filter-color) !important;
    background-color: var(--filter-color) !important;
    color: var(--buscador-text-light) !important;
}
#dcid-advanced-search-modal .dcid-advanced-search-wrapper .dcid-filter-button.usermgmt-categoria-label[data-filter-type="post_type"].active:hover {
    filter: brightness(1.1);
}
#dcid-advanced-search-modal .dcid-advanced-search-wrapper .dcid-filter-button.usermgmt-categoria-label[data-filter-type="post_type"]:hover:not(.active) {
     border-color: var(--filter-color) !important;
     color: var(--filter-color) !important;
     background-color: transparent;
}


/* --- ESTILOS PARA LA DISPOSICIÓN EN CUADRADO DEL FILTRO POR TIPO DE CONTENIDO --- */
#dcid-advanced-search-modal .content-type-filter-row .field-content-wrapper {
    display: grid !important; /* Usar grid para el layout de 2x2 */
    grid-template-columns: repeat(2, 1fr) !important; /* Dos columnas de igual ancho */
    grid-template-rows: repeat(2, 1fr) !important; /* Dos filas de igual altura */
    gap: 10px !important; /* Espacio entre los botones */
    max-width: 280px !important; /* Limitar el ancho máximo del cuadrado */
    justify-content: unset !important; 
    align-items: unset !important;
}

#dcid-advanced-search-modal .content-type-filter-row .field-content-wrapper button {
    width: auto !important; /* Dejar que el grid controle el ancho */
    height: 60px !important; /* Altura fija para hacerlos cuadrados */
    max-width: unset !important; /* Anular el max-width de .dcid-filter-button */
    flex-grow: unset !important; /* Anular flex-grow para que se posicionen por grid */
    font-size: 1.5em !important; /* Tamaño de fuente más grande para las letras */
    padding: 0 !important; /* Eliminar padding para que solo las letras grandes quepan */
}

/* Asignar posiciones específicas a cada botón (según el orden en HTML) */
/* El orden HTML es 's' (c), 'i', 'd', 'D' */
#dcid-advanced-search-modal .content-type-filter-row .field-content-wrapper button:nth-child(1) { /* Solicitud (c) */
    grid-area: 1 / 1 / 2 / 2; /* Fila 1, Columna 1 */
}
#dcid-advanced-search-modal .content-type-filter-row .field-content-wrapper button:nth-child(2) { /* dciDoc (i) */
    grid-area: 1 / 2 / 2 / 3; /* Fila 1, Columna 2 */
}
#dcid-advanced-search-modal .content-type-filter-row .field-content-wrapper button:nth-child(3) { /* Decisión (d) */
    grid-area: 2 / 1 / 3 / 2; /* Fila 2, Columna 1 */
}
#dcid-advanced-search-modal .content-type-filter-row .field-content-wrapper button:nth-child(4) { /* Democrazy (D) */
    grid-area: 2 / 2 / 3 / 3; /* Fila 2, Columna 2 */
}

/* Estilos para la sección de resultados (grid de decisiones) */
.search-results-section {
    margin-top: 40px;
    padding-top: 0 !important; /* Asegurar que no haya padding-top aquí */
    border-top: 1px solid var(--buscador-border);
}

/* Ajuste del margen superior e inferior del título de resultados */
#dcid-advanced-search-modal .search-results-section .usermgmt-title {
    margin-top: 20px !important; /* Margen superior consistente después de la línea */
    margin-bottom: 20px !important; /* Margen inferior consistente antes del grid */
}

/* MODIFICADO: Contenedor del grid de resultados: forzamos el auto-sizing de filas y alineación */
#dcid-advanced-search-modal .search-results-section #search-results-container.decisiones-grid {
    margin-top: 0 !important; /* Eliminar cualquier margen superior del grid en sí */
    padding: 0 !important; /* Eliminar padding del grid que pueda contribuir al hueco */
    
    /* Propiedades clave para evitar el hueco gigante */
    grid-auto-rows: min-content !important; /* Las filas solo toman el espacio que necesitan sus elementos */
    align-content: start !important; /* El contenido se alinea al inicio del contenedor, no se estira */
    min-height: 0 !important; /* Asegurar que no haya una altura mínima forzada cuando no hay contenido o está vacío */
    /* Mantener display: grid del .decisiones-grid original si es necesario para el layout interno */
}

/* Y para el mensaje de placeholder, si el grid está vacío */
#dcid-advanced-search-modal .search-results-section #search-results-container .usermgmt-message.no-posts-found {
    margin-top: 20px !important; /* Margen superior para el mensaje cuando el grid está vacío */
    margin-bottom: 20px !important; /* Margen inferior para el mensaje */
}


/* NUEVO: Ocultar el .post-type-badge dentro de las tarjetas de resultados de la modal */
#dcid-advanced-search-modal .decisiones-grid .item-decision .post-type-badge {
    display: none !important;
    visibility: hidden !important;
}


/* Indicador de carga en el grid */
#dcid-advanced-search-modal .search-results-section #search-results-container.decisiones-grid.loading {
    min-height: 150px !important; /* Aplicar min-height solo durante la carga para el spinner */
    opacity: 0.7;
    pointer-events: none;
    position: relative;
    display: grid !important; /* Forzar display grid para centrar el spinner */
    align-items: center !important;
    justify-content: center !important;
}
#dcid-advanced-search-modal .search-results-section #search-results-container.decisiones-grid.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    margin-left: -20px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--buscador-active-bg);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 10; 
}

/* Cuando el grid está cargando, ocultar los resultados actuales temporalmente */
#dcid-advanced-search-modal .search-results-section #search-results-container.decisiones-grid.loading .item-decision {
    visibility: hidden;
}


/* Estilos para el botón "Cargar Más Resultados" */
#load-more-results-container {
    margin-top: 30px;
    text-align: center;
    display: flex !important; /* Forzar flexbox para centrar horizontalmente */
    justify-content: center !important; /* Centramos sus hijos */
}

#load-more-results-btn {
    background-color: var(--buscador-hover-bg);
    color: var(--buscador-text-light);
    border: 1px solid var(--buscador-border);
    padding: 12px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: all 0.3s ease;
    width: 100%;
    max-width: 250px;
    margin: 0 auto !important; /* Forzar el centrado del botón */
}

#load-more-results-btn:hover:not(:disabled) {
    background-color: var(--buscador-active-bg);
    border-color: var(--buscador-active-bg);
    color: var(--buscador-active-text);
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

#load-more-results-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #dcid-advanced-search-modal .dcid-advanced-search-wrapper .form-row.centered-field-row {
        gap: 8px !important;
    }
    #dcid-advanced-search-modal .dcid-advanced-search-wrapper .usermgmt-label {
        text-align: center !important;
        margin-bottom: 5px !important;
    }
    #dcid-advanced-search-modal .dcid-advanced-search-wrapper .field-content-wrapper {
        max-width: 100%;
    }
    /* El grupo de botones de tipo de contenido se apila en móvil */
    #dcid-advanced-search-modal .content-type-filter-row .field-content-wrapper {
        display: flex !important; /* Volver a flexbox */
        flex-direction: column !important; /* Apilar */
        max-width: 100% !important; /* Ocupar todo el ancho */
        gap: 8px !important; /* Espacio reducido */
    }
    #dcid-advanced-search-modal .content-type-filter-row .field-content-wrapper button {
        width: 100% !important; /* Ocupar todo el ancho */
        height: 45px !important; /* Altura estándar */
        font-size: 1.2em !important; /* Volver al tamaño estándar */
    }

    #dcid-advanced-search-modal .dcid-advanced-search-wrapper .dcid-filter-button-group {
        flex-direction: column !important;
    }
    #dcid-advanced-search-modal .dcid-advanced-search-wrapper .dcid-filter-button.usermgmt-categoria-label {
        width: 100% !important;
        flex-grow: unset !important;
        max-width: unset !important;
    }
    #load-more-results-btn {
        max-width: 100%;
    }

    /* Estilos responsive para el label-botón de categorías */
    #dcid-advanced-search-modal .dcid-advanced-search-wrapper .usermgmt-label.dcid-category-toggle-label {
        width: 100% !important;
        max-width: unset !important;
        min-width: unset !important;
    }
}

/* --- ESTILOS DE LA MODAL GLOBAL PARA EL BUSCADOR AVANZADO --- */

/* La superposición general de la modal */
#dcid-advanced-search-modal.dcid-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    overflow-y: auto;
    padding: 20px 0;
    box-sizing: border-box;
}

/* Contenido del modal del buscador avanzado (usando su clase específica) */
#dcid-advanced-search-modal .dcid-advanced-search-content {
    background-color: var(--buscador-card-bg);
    border: 1px solid var(--buscador-border);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    position: relative;
    width: 95%;
    max-width: 950px; /* Ancho máximo deseado para el buscador */
    max-height: 95vh;
    overflow-y: auto;
    padding: 0;
    box-sizing: border-box;
}

/* Botón de cierre de la modal */
#dcid-advanced-search-modal .dcid-modal-close-btn {
    position: sticky;
    top: 0;
    right: 0;
    margin: 10px;
    font-size: 32px;
    color: var(--buscador-text-light);
    cursor: pointer;
    z-index: 10000;
    background-color: var(--buscador-card-bg);
    padding: 0 5px;
    border-radius: 5px;
    float: right;
}
#dcid-advanced-search-modal .dcid-modal-close-btn:hover {
    color: #ff4136;
}

/* Bloquear el scroll del cuerpo cuando la modal está abierta */
body.dcid-modal-open {
    overflow: hidden !important;
    padding-right: var(--scrollbar-width, 0px) !important;
}

/* Ajustes para el wrapper interno dentro de la modal */
#dcid-advanced-search-modal .dcid-advanced-search-wrapper {
    max-width: 100%;
    padding: 0;
}
#dcid-advanced-search-modal .dcid-advanced-search-wrapper .dcid-form-container {
    box-shadow: none;
    border: none;
    padding: 30px;
}
#dcid-advanced-search-modal .search-results-section {
    padding-bottom: 30px;
}

/* --- ESTILOS PARA EL LABEL DE CATEGORÍAS QUE AHORA ES EL BOTÓN DE TOGGLE --- */
/* Aseguramos que el label funcione como botón */
#dcid-advanced-search-modal .dcid-advanced-search-wrapper .usermgmt-label.dcid-category-toggle-label {
    background-color: var(--buscador-bg-dark) !important; /* Fondo negro */
    color: var(--buscador-text-light) !important; /* Letras blancas */
    border: 1px solid var(--buscador-border) !important;
    padding: 10px 15px !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    font-weight: bold !important;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
    width: 100% !important; /* Ocupa todo el ancho de su field-content-wrapper */
    max-width: 600px !important; /* Ancho máximo igual al de los inputs */
    text-align: center !important;
    display: flex !important; /* Usar flexbox para centrar el texto verticalmente */
    justify-content: center !important; /* Centrar horizontalmente */
    align-items: center !important; /* Centrar verticalmente */
    height: 45px !important; /* Altura del botón igual al input */
}

/* Hover para el label-botón de categorías */
#dcid-advanced-search-modal .dcid-advanced-search-wrapper .usermgmt-label.dcid-category-toggle-label:hover {
    background-color: var(--buscador-hover-bg) !important;
    border-color: var(--buscador-text-light) !important;
    color: var(--buscador-text-light) !important;
}

/* Estado activo/seleccionado para el label-botón de categorías */
#dcid-advanced-search-modal .dcid-advanced-search-wrapper .usermgmt-label.dcid-category-toggle-label.active {
    background-color: var(--buscador-active-bg) !important; /* Fondo blanco */
    color: var(--buscador-active-text) !important; /* Letras negras */
    border-color: var(--buscador-active-bg) !important;
}

/* Contenedor del grid de categorías. Aseguramos que `display: none` se aplique */
#dcid-advanced-search-modal .search-filters-container .categories-filter-row #categories-filter-container {
    display: none !important; /* Forzar oculto al inicio con !important */
    padding-top: 10px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100% !important;
}

/* Clase para mostrar el grid de categorías, a ser añadida por JS */
#dcid-advanced-search-modal .search-filters-container .categories-filter-row #categories-filter-container.is-visible {
    display: flex !important; /* Forzar visibilidad con flexbox cuando JS añade la clase */
}


/* Ajuste para el contenedor del botón de toggle en la fila de categorías */
#dcid-advanced-search-modal .dcid-advanced-search-wrapper .categories-filter-row .field-content-wrapper {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 600px !important;
}