/**
 * ResultsHeadPanel - Estilos de navegación en cabecera de resultados
 *
 * Arquitectura CSS de 2 archivos (patrón item-navigation):
 * - results-head.css: Tokens por defecto y estilos BEM (este archivo)
 * - results-head-ext.css: Punto de extensión para skins (vacío en core)
 *
 * Para personalizar por cliente:
 * 1. Crear results-head-ext_<skin>.css en el skin del cliente
 * 2. Redefinir los tokens --results-head-* en :root
 *
 */

:root {
    /* --- Links de navegación --- */
    --results-head-link-display: inline-flex;
    --results-head-link-align-items: center;
    --results-head-link-direction: row; /* row = icono izq (estándar), row-reverse = icono dch */
    --results-head-link-gap: var(--nb-space-1);
    --results-head-link-padding: var(--nb-space-1) var(--nb-space-2);
    --results-head-link-color: var(--nb-text-link);
    --results-head-link-background: transparent;
    --results-head-link-border: 1px solid var(--nb-border-color, #ddd);
    --results-head-link-border-radius: var(--nb-radius-sm);
    --results-head-link-text-decoration: none;
    --results-head-link-text-transform: none;
    --results-head-link-font-weight: inherit;
    --results-head-link-font-size: inherit;
    --results-head-link-letter-spacing: normal;
    --results-head-link-transition: background-color var(--nb-duration-fast) var(--nb-ease-out);

    /* --- Links hover --- */
    --results-head-link-hover-background: color-mix(in srgb, var(--nb-text-link) 10%, transparent 90%);
    --results-head-link-hover-color: var(--nb-text-link-hover);

    /* --- Chips de criterios de búsqueda --- */
    --results-head-chips-display: flex;
    --results-head-chips-flex-wrap: wrap;
    --results-head-chips-gap: var(--nb-space-1);
    --results-head-chips-margin-bottom: 0;
    --results-head-chip-bg: var(--nb-surface-secondary, #f0f0f0);
    --results-head-chip-fg: var(--nb-text-secondary);
    --results-head-chip-font-size: var(--nb-font-body-size);
    --results-head-chip-padding: var(--nb-space-1) var(--nb-space-2);
    --results-head-chip-border: 1px solid var(--nb-border-color, #ddd);
    --results-head-chip-border-radius: var(--nb-radius-sm, 4px);
    --results-head-chip-remove-color: var(--nb-text-muted);
    --results-head-chip-remove-hover-color: var(--nb-danger, #c9302c);
    --results-head-chip-remove-size: 1.1em;
    --results-head-chip-fixed-bg: transparent;
    --results-head-chip-fixed-border: 1px solid transparent;

    /* --- Iconos (desactivados por defecto) --- */
    --results-head-icon-display: none;
    --results-head-icon-font-family: var(--nb-icon-font-family);
    --results-head-icon-font-size: var(--nb-icon-font-size);

    /* Icono "Nueva búsqueda" — hereda del token semántico global */
    --results-head-icon-search-content: var(--nb-icon-action-search);
    --results-head-icon-search-font: var(--nb-icon-font-family);

    /* Icono "Volver" — hereda del token semántico global */
    --results-head-icon-return-content: var(--nb-icon-action-return);
    --results-head-icon-return-font: var(--nb-icon-font-family);

    /* Icono "Modificar búsqueda" — hereda del token semántico global */
    --results-head-icon-modify-content: var(--nb-icon-action-edit);
    --results-head-icon-modify-font: var(--nb-icon-font-family);
}

/* Links de navegación */
.nb-results-head__link {
    display: var(--results-head-link-display);
    align-items: var(--results-head-link-align-items);
    gap: var(--results-head-link-gap);
    flex-direction: var(--results-head-link-direction);
    padding: var(--results-head-link-padding);
    color: var(--results-head-link-color);
    background: var(--results-head-link-background);
    border: var(--results-head-link-border);
    border-radius: var(--results-head-link-border-radius);
    text-decoration: var(--results-head-link-text-decoration);
    text-transform: var(--results-head-link-text-transform);
    font-weight: var(--results-head-link-font-weight);
    font-size: var(--results-head-link-font-size);
    letter-spacing: var(--results-head-link-letter-spacing);
    transition: var(--results-head-link-transition);
}

.nb-results-head__link:hover,
.nb-results-head__link:focus {
    background: var(--results-head-link-hover-background);
    color: var(--results-head-link-hover-color);
    text-decoration: none;
}

/* Icono base */
.nb-results-head__icon {
    display: var(--results-head-icon-display);
    font-size: var(--results-head-icon-font-size);
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Variantes de icono según contexto del link */
.nb-results-head__link--search .nb-results-head__icon::before {
    font-family: var(--results-head-icon-search-font);
    content: var(--results-head-icon-search-content);
}

.nb-results-head__link--return .nb-results-head__icon::before {
    font-family: var(--results-head-icon-return-font);
    content: var(--results-head-icon-return-content);
}

.nb-results-head__link--modify .nb-results-head__icon::before {
    font-family: var(--results-head-icon-modify-font);
    content: var(--results-head-icon-modify-content);
}

/* Chips de criterios de búsqueda */
.nb-results-head__chips {
    display: var(--results-head-chips-display);
    flex-wrap: var(--results-head-chips-flex-wrap);
    gap: var(--results-head-chips-gap);
    margin-bottom: var(--results-head-chips-margin-bottom);
}

.nb-results-head__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-1);
    padding: var(--results-head-chip-padding);
    background: var(--results-head-chip-bg);
    color: var(--results-head-chip-fg);
    font-size: var(--results-head-chip-font-size);
    border: var(--results-head-chip-border);
    border-radius: var(--results-head-chip-border-radius);
}

.nb-results-head__chip--fixed {
    background: var(--results-head-chip-fixed-bg);
    border: var(--results-head-chip-fixed-border);
}

.nb-results-head__chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--results-head-chip-remove-color);
    font-size: var(--results-head-chip-remove-size);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.nb-results-head__chip-remove:hover,
.nb-results-head__chip-remove:focus {
    color: var(--results-head-chip-remove-hover-color);
    text-decoration: none;
}

/* Barra principal de cabecera
 * Fila 1: conteo (izquierda) + acciones (derecha)
 * Los botones y el conteo están dentro de ResultsHeadPanel. */
.nb-results-head__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nb-space-2);
    margin-bottom: var(--nb-space-2);
}

/* Acciones de búsqueda: "Modificar búsqueda" + "Nueva búsqueda" */
.nb-search-actions {
    display: flex;
    align-items: center;
    gap: var(--nb-space-1);
    margin-left: auto;
}

/* Conteo de resultados: mismo tamaño que chips, negrita */
.nb-results-count {
    font-size: var(--results-head-chip-font-size);
    font-weight: bold;
    margin: 0;
    white-space: nowrap;
}