/* ==========================================================================
   COMPONENT: GLOBAL BREADCRUMB
   ========================================================================== */

/* Contenedor Principal (Absoluto y fondo paramétrico) */
.c-global__breadcrumb {
    position: absolute !important;
    top: calc(var(--dynamic-header-h, 100px) + var(--bc-pt-d, 0px) + var(--wp-admin-d, 0px)) !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 20 !important;
    pointer-events: none !important;
    margin: 0 !important;
    background-color: var(--bc-bg, transparent) !important;
}

/* Max-width container con padding de ACF */
.c-global__breadcrumb-inner {
    max-width: var(--bc-max-w, 1650px) !important;
    margin: 0 auto !important;
    padding: 0 var(--bc-pr-d, 80px) var(--bc-pb-d, 80px) var(--bc-pl-d, 80px) !important;
    pointer-events: auto !important;
}

/* Flexbox en una sola línea estricta (Nunca salta de línea) */
.c-global__breadcrumb-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* CAMBIADO: Obligamos a que sea 1 sola línea */
    align-items: center !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 44px !important;
    width: 100% !important; /* Ocupa el ancho máximo disponible */
}

/* Items generales (Home, Blog, etc). NO SE ENCOGEN */
.c-global__breadcrumb-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important; /* Evita que el texto de Home o Blog colapse */
    font-family: var(--bc-ff-d) !important;
    font-weight: var(--bc-fw-d) !important;
    font-size: var(--bc-fs-d) !important;
    line-height: var(--bc-lh-d) !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}

.c-global__breadcrumb-item.is-active {
    flex-shrink: 1 !important; /* Permite que este sea el único elemento que se reduzca */
    min-width: 0 !important; /* Hack esencial de Flexbox para permitir el text-overflow */
    width: 100% !important; /* Intenta tomar todo el espacio sobrante */
}

/* Enlaces (Color Base + Borde 1px) */
.c-global__breadcrumb-link {
    color: var(--bc-lnk, #FFFFFF) !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--bc-lnk, #FFFFFF) !important;
    transition: color 0.2s ease, border-color 0.2s ease !important;
    vertical-align: middle !important;
}

/* Enlaces (Hover & Focus) */
.c-global__breadcrumb-link:hover {
    color: var(--bc-hov, #FEB700) !important;
    border-color: var(--bc-hov, #FEB700) !important;
}

.c-global__breadcrumb-link:focus,
.c-global__breadcrumb-link:focus-visible {
    color: var(--bc-foc, #FE9C00) !important;
    border-color: var(--bc-foc, #FE9C00) !important;
    outline: 2px dashed var(--bc-foc, #FE9C00) !important;
    outline-offset: 4px !important;
}

/* Separadores (Tamaño estricto 16x16px) */
.c-global__breadcrumb-sep {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--bc-sep, #B1B5B4) !important;
}

.c-global__breadcrumb-sep-svg {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
    fill: currentColor !important;
    object-fit: contain !important; /* Por si suben un SVG por ACF con ratio distinto */
}

/* Texto de la página actual (Ellipsis dinámico) */
.c-global__breadcrumb-current {
    color: var(--bc-txt, #ECECEC) !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important; /* Eliminamos el límite hardcodeado de 300px */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important; /* Asegura que se trunque con ... */
    vertical-align: middle !important;
}

/* =========================================
   TABLET (<= 1024px)
   ========================================= */
@media (max-width: 1024px) {
    .c-global__breadcrumb {
        top: calc(var(--dynamic-header-h, 80px) + var(--bc-pt-t, 0px) + var(--wp-admin-d, 0px)) !important;
    }
    .c-global__breadcrumb-inner {
        padding: 0 var(--bc-pr-t, 64px) var(--bc-pb-t, 64px) var(--bc-pl-t, 64px) !important;
    }
    .c-global__breadcrumb-item {
        font-size: var(--bc-fs-t) !important;
    }
}

/* =========================================
   MOBILE (<= 768px)
   ========================================= */
@media (max-width: 768px) {
    .c-global__breadcrumb {
        top: calc(var(--dynamic-header-h, 60px) + var(--bc-pt-m, 0px) + var(--wp-admin-m, 0px)) !important;
    }
    .c-global__breadcrumb-inner {
        padding: 0 var(--bc-pr-m, 16px) var(--bc-pb-m, 16px) var(--bc-pl-m, 16px) !important;
    }
    .c-global__breadcrumb-item {
        font-size: var(--bc-fs-m) !important;
    }
}