/* Toggle de vista lista/mosaico */
.nb-view-toggle .btn.active,
.nb-view-toggle .btn.active:hover,
.nb-view-toggle .btn.active:focus {
    background-color: var(--nb-btn-primary-bg);
    border-color: var(--nb-btn-primary-border);
    color: var(--nb-btn-primary-fg);
}

.nb-view-toggle .btn:not(.active) {
    color: var(--nb-text-secondary);
}

/* Toolbar unificado
 * Acciones de búsqueda a la izquierda, controles de vista a la derecha.
 * Compactar la navbar y eliminar fondo para integración visual. */
.nb-results-toolbar .navbar {
    min-height: auto;
    margin-bottom: var(--nb-space-1, 0.25rem);
}

/* Override de nuba.css:
 *   .resultsPage .headActions { background: var(--nb-table-header-bg) } (0,2,0)
 *   .resultsPage .headActions .navbar-default { background: ... }       (0,3,0)
 * Eliminar fondo de la banda de headActions para integración limpia. */
.headActions.nb-results-toolbar {
    background: transparent;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.headActions.nb-results-toolbar .navbar-default {
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Eliminar márgenes internos de Bootstrap para que el toolbar
 * ocupe todo el ancho del contenedor sin huecos laterales. */
.nb-results-toolbar .navbar-collapse {
    padding-left: 0;
    padding-right: 0;
}

/* El menú de facetas usa .navbar-collapse para colapsar bajo el botón "Filtrar"
 * en móvil. El padding lateral 15px de Bootstrap es decoración pensada para el
 * menú móvil expandido y, en escritorio, desplaza todo el bloque del facetado
 * (header de cada faceta incluido) respecto al borde de su columna —
 * desalineándolo de la cabecera de resultados. La sangría visual entre el
 * header de cada faceta y sus items la sigue aportando .facetTerms. */
#facet-menu.navbar-collapse {
    padding-left: 0;
    padding-right: 0;
}

/* Controles de vista (⋮, ordenar, lista/mosaico): flex alinea
 * todos los btn-group en el mismo eje vertical, eliminando las
 * discrepancias de padding/line-height del antiguo navbar-nav. */
.nb-results-controls {
    display: flex;
    align-items: center;
    gap: var(--nb-space-1, 0.25rem);
}

/* Centrar el icono dentro de cada botón del toolbar.
 * Bootstrap usa line-height + baseline, que no centra verticalmente.
 * inline-flex + align-items: center resuelve el centrado real. */
.nb-results-controls .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Sort y More son acciones sin énfasis visual — eliminar el chrome
 * de btn-default (borde, fondo) manteniendo el sizing de .btn. */
.nb-results-controls > .btn-group:not(.nb-view-toggle) > .btn {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

/* Item de selección: icono nb-icon--checkbox + btn-group [Todos][Ninguno].
 * A diferencia del resto de items del dropdown, este <li> no envuelve su
 * contenido en un <a>, así que carece del padding (vertical y horizontal)
 * que BS3 aplica a .dropdown-menu > li > a. Sin replicar ese padding, el
 * icono se desalinea de la columna de iconos y el ritmo vertical entre
 * items se rompe (item más bajo o más alto que los otros).
 * align-items: center compensa la mayor altura del btn-group respecto a los
 * items con sólo texto. */
.dropdown-menu-option {
    display: flex;
    align-items: center;
    gap: var(--nb-space-1);
    padding: var(--nb-space-1) var(--nb-space-5);
    white-space: nowrap;
}

/* Pares de enlaces sobrios "Todos · Ninguno". Reemplaza al antiguo
 * btn-group con btn-primary que sobreaccentuaba "Todos" en rojo y
 * rompía la rejilla visual del dropdown ([icono] texto). */
.dropdown-menu-option .nb-select-links {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-1);
}

.dropdown-menu-option .nb-select-links a {
    color: var(--nb-text-link);
}

.dropdown-menu-option .nb-select-links a:hover,
.dropdown-menu-option .nb-select-links a:focus {
    color: var(--nb-text-link-hover);
}

.dropdown-menu-option .nb-select-links__sep {
    color: var(--nb-text-muted);
}

/* Feedback visual de "Compartir" */
.nb-share-link .nb-icon--check {
    color: var(--nb-success, #5cb85c);
}

/* Separación entre la cabecera (.nb-results-head) y el row de cajas inferiores.
 * Específico de la página de resultados — el contrato genérico de
 * .nb-content-area en components.css solo cubre siblings caja-caja en flujo
 * vertical; aquí tenemos caja seguida de un .row que es contenedor de cajas. */
.resultsPage > .nb-content-area + .row {
    margin-top: var(--nb-content-area-gap);
}