/**
 * ============================================================================
 *    BREADCRUMBS COMPONENT
 * ============================================================================
 * Componente de migas de pan con tokens CSS centralizados.
 * Diseño compacto para topbar.
 * 
 * Tokens requeridos: design-tokens.css
 * ============================================================================
 */

/* -----------------------------------------------------------------------------
   Contenedor principal
   ----------------------------------------------------------------------------- */
.breadcrumbs {
    display: flex;
    align-items: center;
    font-size: var(--breadcrumbs-font-size);
    color: var(--breadcrumbs-color);
    margin-bottom: var(--breadcrumbs-margin-bottom);
    line-height: var(--breadcrumbs-line-height);
    flex-wrap: wrap;
    gap: var(--breadcrumbs-gap);
}

/* -----------------------------------------------------------------------------
   Items
   ----------------------------------------------------------------------------- */
.breadcrumbs__item {
    display: inline-flex;
    align-items: center;
}

/* -----------------------------------------------------------------------------
   Links
   ----------------------------------------------------------------------------- */
.breadcrumbs__link {
    color: var(--breadcrumbs-link-color);
    text-decoration: var(--breadcrumbs-link-text-decoration);
    transition: color var(--breadcrumbs-link-transition);
}

.breadcrumbs__link:hover {
    color: var(--breadcrumbs-link-hover-color);
}

/* -----------------------------------------------------------------------------
   Separator
   ----------------------------------------------------------------------------- */
.breadcrumbs__separator {
    margin-left: var(--breadcrumbs-sep-margin-x);
    margin-right: var(--breadcrumbs-sep-margin-x);
    color: var(--breadcrumbs-sep-color);
    font-size: var(--breadcrumbs-sep-font-size);
    display: flex;
    align-items: center;
}

/* -----------------------------------------------------------------------------
   Current (página actual)
   ----------------------------------------------------------------------------- */
.breadcrumbs__current {
    color: var(--breadcrumbs-current-color);
    font-weight: var(--breadcrumbs-current-weight);
}

/* -----------------------------------------------------------------------------
   Breadcrumb Steps (para wizard/matrículas)
   ----------------------------------------------------------------------------- */
.breadcrumb-step {
    background-color: var(--breadcrumbs-step-bg);
    border: var(--border-width) solid var(--breadcrumbs-step-border);
    border-radius: var(--breadcrumbs-step-radius);
    color: var(--breadcrumbs-step-color);
    cursor: pointer;
    padding: var(--breadcrumbs-step-padding-y) var(--breadcrumbs-step-padding-x);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.breadcrumb-step:hover {
    background-color: var(--breadcrumbs-step-hover-bg);
}

.breadcrumb-step.active {
    background-color: var(--breadcrumbs-step-active-bg);
    border-color: var(--breadcrumbs-step-active-border);
    color: var(--breadcrumbs-step-active-color);
}

.breadcrumb-step.completed {
    background-color: var(--color-success-50);
    border-color: var(--color-success-300);
    color: var(--color-success-700);
}

.breadcrumb-step.pending {
    background-color: var(--color-gray-100);
    border-color: var(--color-gray-200);
    color: var(--color-gray-400);
}

/* -----------------------------------------------------------------------------
   Variante inversa (fondo oscuro)
   ----------------------------------------------------------------------------- */
.breadcrumbs--inverse {
    color: var(--color-gray-300);
}

.breadcrumbs--inverse .breadcrumbs__link {
    color: var(--color-gray-300);
}

.breadcrumbs--inverse .breadcrumbs__link:hover {
    color: white;
}

.breadcrumbs--inverse .breadcrumbs__separator {
    color: var(--color-gray-500);
}

.breadcrumbs--inverse .breadcrumbs__current {
    color: white;
}

/* -----------------------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .breadcrumbs {
        font-size: var(--text-xs);
    }
    
    .breadcrumb-step {
        padding: var(--space-1) var(--space-2);
        font-size: var(--text-xs);
    }
}