/**
 * ItemNavigationBar - Barra de navegación unificada
 *
 * Arquitectura CSS de 2 archivos (patrón nuba.css/nubaext.css):
 * - item-navigation.css: Tokens por defecto y estilos BEM (este archivo)
 * - item-navigation-ext.css: Punto de extensión para skins (vacío en core)
 *
 * Para personalizar por cliente:
 * 1. Crear item-navigation-ext_<skin>.css en el skin del cliente
 * 2. Redefinir los tokens --item-nav-* en :root
 *
 * @since NUBA-8117
 */

/* ============================================
 * Tokens por defecto
 * ============================================
 * Estilo minimalista (links sin fondo ni borde).
 * Redefinir en item-navigation-ext_<skin>.css para personalizar.
 */
:root {
    /* --- Layout --- */
    --item-nav-display: flex;
    --item-nav-flex-direction: row;
    --item-nav-justify-content: space-between;
    --item-nav-align-items: center;
    --item-nav-flex-wrap: wrap;
    --item-nav-gap: var(--nb-space-2);
    --item-nav-padding: 0;
    --item-nav-margin-bottom: var(--nb-space-2);

    /* --- Fondo y borde (contenedor) --- */
    --item-nav-background: transparent;
    --item-nav-border: none;
    --item-nav-border-radius: 0;

    /* --- Sección prev/next --- */
    --item-nav-prev-next-display: flex;
    --item-nav-prev-next-gap: var(--nb-space-2);
    --item-nav-prev-next-align-items: center;


    /* --- Links (estilo minimalista: sin fondo ni borde) --- */
    --item-nav-link-display: inline-flex;
    --item-nav-link-align-items: center;
    --item-nav-link-gap: var(--nb-space-1);
    --item-nav-link-padding: var(--nb-space-1) var(--nb-space-2);
    --item-nav-link-color: var(--nb-link-fg);
    --item-nav-link-background: transparent;
    --item-nav-link-border: none;
    --item-nav-link-border-radius: var(--nb-radius-sm);
    --item-nav-link-text-decoration: none;
    --item-nav-link-transition: background-color var(--nb-duration-fast) var(--nb-ease-out);
    --item-nav-link-margin-top: 0;

    /* --- Links hover --- */
    --item-nav-link-hover-background: color-mix(in srgb, var(--nb-link-fg) 10%, transparent 90%);
    --item-nav-link-hover-color: var(--nb-link-fg-hover);
    --item-nav-link-hover-border: none;

    /* --- Iconos (Font Awesome 4) --- */
    /* Desactivados por defecto por compatibilidad con versiones de FA */
    --item-nav-icon-display: none;
    --item-nav-icon-font-family: FontAwesome;
    --item-nav-icon-font-size: var(--nb-font-body-size);
    --item-nav-icon-prev-content: "\f053";  /* fa-chevron-left */
    --item-nav-icon-next-content: "\f054";  /* fa-chevron-right */
    --item-nav-icon-return-content: "\f060"; /* fa-arrow-left */
    --item-nav-icon-search-content: "\f002"; /* fa-search */

    /* --- Texto --- */
    --item-nav-text-display: inline;
    --item-nav-text-font-size: inherit;

    /* --- Checkbox y contador (visibilidad) --- */
    --item-nav-select-display: flex;
    --item-nav-counter-text-display: inline;

    /* --- Orden de secciones (flexbox order) ---
     * Convención UX: "Volver" a la izquierda (pasado), "Nueva búsqueda" a la derecha (futuro)
     * Orden por defecto: Volver | [Anterior | Contador | Siguiente] | Seleccionado | Nueva
     */
    --item-nav-return-order: -1;       /* Volver: primero (izquierda) */
    --item-nav-prev-next-order: 0;     /* Anterior/Contador/Siguiente: segundo */
    --item-nav-select-order: 1;        /* Checkbox selección: tercero */
    --item-nav-new-search-order: 2;    /* Nueva búsqueda: último (derecha) */

    /* --- Estado disabled (para límites de navegación) --- */
    --item-nav-link-disabled-opacity: 0.4;
    --item-nav-link-disabled-cursor: not-allowed;
    --item-nav-link-disabled-pointer-events: none;
}

/* ============================================
 * Estilos BEM
 * ============================================ */

/* Contenedor principal */
.nb-item-navigation {
    display: var(--item-nav-display);
    flex-direction: var(--item-nav-flex-direction);
    justify-content: var(--item-nav-justify-content);
    align-items: var(--item-nav-align-items);
    flex-wrap: var(--item-nav-flex-wrap);
    gap: var(--item-nav-gap);
    padding: var(--item-nav-padding);
    margin-bottom: var(--item-nav-margin-bottom);
    background: var(--item-nav-background);
    border: var(--item-nav-border);
    border-radius: var(--item-nav-border-radius);
}

/* Fila interna (para alineación) */
.nb-item-navigation__row {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--item-nav-gap);
}

/* Sección: Anterior / Siguiente */
.nb-item-navigation__prev-next {
    display: var(--item-nav-prev-next-display);
    gap: var(--item-nav-prev-next-gap);
    align-items: var(--item-nav-prev-next-align-items);
    order: var(--item-nav-prev-next-order);
}

/* Sección: Checkbox de selección */
.nb-item-navigation__select-section {
    display: var(--item-nav-select-display);
    align-items: center;
    order: var(--item-nav-select-order);
}

/* Sección: Volver (izquierda por convención UX) */
.nb-item-navigation__return {
    display: flex;
    align-items: center;
    order: var(--item-nav-return-order);
}

/* Sección: Nueva búsqueda (derecha por convención UX) */
.nb-item-navigation__new-search {
    display: flex;
    align-items: center;
    order: var(--item-nav-new-search-order);
}

/* Links */
.nb-item-navigation__link {
    display: var(--item-nav-link-display);
    align-items: var(--item-nav-link-align-items);
    gap: var(--item-nav-link-gap);
    padding: var(--item-nav-link-padding);
    margin-top: var(--item-nav-link-margin-top);
    color: var(--item-nav-link-color);
    background: var(--item-nav-link-background);
    border: var(--item-nav-link-border);
    border-radius: var(--item-nav-link-border-radius);
    text-decoration: var(--item-nav-link-text-decoration);
    transition: var(--item-nav-link-transition);
}

.nb-item-navigation__link:hover,
.nb-item-navigation__link:focus {
    background: var(--item-nav-link-hover-background);
    color: var(--item-nav-link-hover-color);
    border-color: var(--item-nav-link-hover-border);
    text-decoration: none;
}

/* Estado disabled (para límites de navegación: primer/último resultado) */
.nb-item-navigation__link--disabled,
.nb-item-navigation__link--disabled:hover,
.nb-item-navigation__link--disabled:focus {
    opacity: var(--item-nav-link-disabled-opacity);
    cursor: var(--item-nav-link-disabled-cursor);
    pointer-events: var(--item-nav-link-disabled-pointer-events);
    /* Mantener apariencia base sin efecto hover */
    background: var(--item-nav-link-background);
    color: var(--item-nav-link-color);
    border-color: var(--item-nav-link-border);
}

/* Iconos */
.nb-item-navigation__icon {
    display: var(--item-nav-icon-display);
    font-family: var(--item-nav-icon-font-family);
    font-size: var(--item-nav-icon-font-size);
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.nb-item-navigation__icon--prev::before {
    content: var(--item-nav-icon-prev-content);
}

.nb-item-navigation__icon--next::before {
    content: var(--item-nav-icon-next-content);
}

.nb-item-navigation__icon--return::before {
    content: var(--item-nav-icon-return-content);
}

.nb-item-navigation__icon--search::before {
    content: var(--item-nav-icon-search-content);
}

/* Texto */
.nb-item-navigation__text {
    display: var(--item-nav-text-display);
    font-size: var(--item-nav-text-font-size);
}

/* Checkbox de selección */
.nb-item-navigation__select {
    display: var(--item-nav-select-display);
    align-items: center;
    gap: var(--nb-space-1);
}

.nb-item-navigation__checkbox {
    margin: 0;
}

.nb-item-navigation__checkbox-label {
    margin: 0;
    cursor: pointer;
}

/* Texto del contador */
.nb-item-navigation__counter-text {
    display: var(--item-nav-counter-text-display);
}

/* ============================================
 * Responsive
 * ============================================ */
@media (max-width: 767px) {
    .nb-item-navigation__row {
        flex-direction: column;
        align-items: stretch;
    }

    .nb-item-navigation__return,
    .nb-item-navigation__prev-next,
    .nb-item-navigation__select-section,
    .nb-item-navigation__new-search {
        justify-content: center;
    }
}