/* =============================================================
   breadcrumb.css — Componente de Breadcrumb Multi-Tema
   Archivo: assets/css/breadcrumb.css

   Temas disponibles (aplicar mediante clase en <nav>):
     .breadcrumb-nav--overlay   → Sobre page-header oscuro (default servicio.php)
     .breadcrumb-nav--default   → Sobre fondo blanco / área de contenido
     .breadcrumb-nav--light     → Fondo gris claro, interior de sección
     .breadcrumb-nav--dark      → Fondo oscuro sólido
     .breadcrumb-nav--minimal   → Sin fondo, solo texto y separadores
     .breadcrumb-nav--pills     → Items con forma de pastilla

   Uso en PHP (antes de incluir el componente):
     $breadcrumb_style = 'overlay';  // elegir tema
     require BASE_PATH . 'componentes/breadcrumb.php';
   ============================================================= */


/* ── Variables globales del componente ──────────────────────── */
:root {
    --bc-font-size     : 0.875rem;
    --bc-gap           : 0.45rem;
    --bc-separator-size: 0.6em;
    --bc-radius        : 6px;

    /* Colores base – sobrescritos por cada tema */
    --bc-link-color    : #6b7280;
    --bc-link-hover    : var(--thm-primary, #2563eb);
    --bc-text-color    : #6b7280;
    --bc-active-color  : #111827;
    --bc-separator-clr : #9ca3af;
    --bc-bg            : transparent;
}


/* ── Estructura base ─────────────────────────────────────────── */
.breadcrumb-nav {
    width      : 100%;
    background : var(--bc-bg);
    padding    : 0.375rem 0;
    line-height: 1;
}

.breadcrumb-nav__inner {
    width: 100%;
}

.breadcrumb-nav__list {
    display    : flex;
    flex-wrap  : wrap;
    align-items: center;
    gap        : var(--bc-gap);
    list-style : none;
    margin     : 0;
    padding    : 0;
}

.breadcrumb-nav__item {
    display    : inline-flex;
    align-items: center;
    gap        : var(--bc-gap);
    font-size  : var(--bc-font-size);
    font-weight: 400;
    white-space: nowrap;
}

/* Enlace navegable */
.breadcrumb-nav__link {
    display        : inline-flex;
    align-items    : center;
    gap            : 0.3rem;
    color          : var(--bc-link-color);
    text-decoration: none;
    transition     : color 0.2s ease;
}

.breadcrumb-nav__link:hover,
.breadcrumb-nav__link:focus-visible {
    color          : var(--bc-link-hover);
    text-decoration: none;
    outline        : none;
}

/* Texto intermedio sin enlace */
.breadcrumb-nav__text {
    display    : inline-flex;
    align-items: center;
    gap        : 0.3rem;
    color      : var(--bc-text-color);
}

/* Página activa */
.breadcrumb-nav__current {
    color        : var(--bc-active-color);
    font-weight  : 500;
    max-width    : 28ch;
    overflow     : hidden;
    text-overflow: ellipsis;
    white-space  : nowrap;
}

/* Separador */
.breadcrumb-nav__separator {
    display    : inline-flex;
    align-items: center;
    color      : var(--bc-separator-clr);
    font-size  : var(--bc-separator-size);
    flex-shrink: 0;
    line-height: 1;
}

/* Icono de casa */
.breadcrumb-nav__home-icon {
    font-size  : 0.8em;
    line-height: 1;
    flex-shrink: 0;
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  TEMA: overlay                                           ║
   ║  Uso principal: servicio.php (sobre page-header oscuro)  ║
   ╚══════════════════════════════════════════════════════════╝ */
.breadcrumb-nav--overlay {
    --bc-link-color    : rgba(255, 255, 255, 0.72);
    --bc-link-hover    : #ffffff;
    --bc-text-color    : rgba(255, 255, 255, 0.72);
    --bc-active-color  : #ffffff;
    --bc-separator-clr : rgba(255, 255, 255, 0.38);
    padding            : 0.5rem 0 0;
    text-align         : center;
}

.breadcrumb-nav--overlay .breadcrumb-nav__list {
    display                : inline-flex;
    background             : rgba(0, 0, 0, 0.28);
    backdrop-filter        : blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border                 : 1px solid rgba(255, 255, 255, 0.12);
    border-radius          : 999px;
    padding                : 0.35rem 1.1rem;
    gap                    : 0.4rem;
}

.breadcrumb-nav--overlay .breadcrumb-nav__current {
    color      : #ffffff;
    font-weight: 600;
    max-width  : 36ch;
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  TEMA: default                                           ║
   ║  Uso: secciones de contenido sobre fondo blanco          ║
   ╚══════════════════════════════════════════════════════════╝ */
.breadcrumb-nav--default {
    --bc-link-color    : #6b7280;
    --bc-link-hover    : var(--thm-primary, #2563eb);
    --bc-text-color    : #6b7280;
    --bc-active-color  : #111827;
    --bc-separator-clr : #d1d5db;
    padding            : 0.65rem 0;
    border-bottom      : 1px solid #f3f4f6;
    margin-bottom      : 1.5rem;
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  TEMA: light                                             ║
   ║  Uso: dentro de tarjetas o secciones con fondo gris      ║
   ╚══════════════════════════════════════════════════════════╝ */
.breadcrumb-nav--light {
    --bc-link-color    : #6b7280;
    --bc-link-hover    : var(--thm-primary, #2563eb);
    --bc-text-color    : #6b7280;
    --bc-active-color  : #1f2937;
    --bc-separator-clr : #d1d5db;
    --bc-bg            : #f3f4f6;
    border-radius      : var(--bc-radius);
    padding            : 0.7rem 1.25rem;
}

.breadcrumb-nav--light .breadcrumb-nav__link:hover {
    text-decoration: underline;
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  TEMA: dark                                              ║
   ║  Uso: plantillas con header/banner completamente oscuro  ║
   ╚══════════════════════════════════════════════════════════╝ */
.breadcrumb-nav--dark {
    --bc-link-color    : rgba(255, 255, 255, 0.60);
    --bc-link-hover    : #ffffff;
    --bc-text-color    : rgba(255, 255, 255, 0.60);
    --bc-active-color  : #ffffff;
    --bc-separator-clr : rgba(255, 255, 255, 0.25);
    --bc-bg            : #1f2937;
    border-radius      : var(--bc-radius);
    padding            : 0.85rem 1.25rem;
}

.breadcrumb-nav--dark .breadcrumb-nav__link:hover {
    color: #ffffff;
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  TEMA: minimal                                           ║
   ║  Uso: dentro del cuerpo de la página, sin llamar mucho   ║
   ║       la atención; ideal para plantillas SEO/geo limpias ║
   ╚══════════════════════════════════════════════════════════╝ */
.breadcrumb-nav--minimal {
    --bc-link-color    : var(--thm-primary, #2563eb);
    --bc-link-hover    : var(--thm-base, #1d4ed8);
    --bc-text-color    : #6b7280;
    --bc-active-color  : #374151;
    --bc-separator-clr : #d1d5db;
    padding            : 0.5rem 0;
}

.breadcrumb-nav--minimal .breadcrumb-nav__link {
    font-weight: 400;
}

.breadcrumb-nav--minimal .breadcrumb-nav__link:hover {
    text-decoration      : underline;
    text-underline-offset: 2px;
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  TEMA: pills                                             ║
   ║  Uso: plantillas más llamativas o landings de campaña    ║
   ╚══════════════════════════════════════════════════════════╝ */
.breadcrumb-nav--pills {
    --bc-link-color    : #374151;
    --bc-link-hover    : #ffffff;
    --bc-separator-clr : #9ca3af;
    padding            : 0.5rem 0;
}

.breadcrumb-nav--pills .breadcrumb-nav__list {
    gap: 0.3rem;
}

.breadcrumb-nav--pills .breadcrumb-nav__item {
    gap: 0.3rem;
}

.breadcrumb-nav--pills .breadcrumb-nav__link,
.breadcrumb-nav--pills .breadcrumb-nav__text {
    background   : #f3f4f6;
    border-radius: 999px;
    padding      : 0.25rem 0.9rem;
    font-size    : 0.8rem;
    color        : #374151;
    transition   : background 0.2s ease, color 0.2s ease;
}

.breadcrumb-nav--pills .breadcrumb-nav__link:hover {
    background: var(--thm-primary, #2563eb);
    color     : #ffffff;
}

.breadcrumb-nav--pills .breadcrumb-nav__current {
    background   : var(--thm-primary, #2563eb);
    color        : #ffffff;
    font-weight  : 600;
    border-radius: 999px;
    padding      : 0.25rem 0.9rem;
    font-size    : 0.8rem;
    max-width    : none;
}

.breadcrumb-nav--pills .breadcrumb-nav__separator {
    font-size: 0.55em;
    color    : #9ca3af;
}


/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    :root {
        --bc-font-size: 0.82rem;
        --bc-gap      : 0.35rem;
    }

    .breadcrumb-nav--overlay .breadcrumb-nav__list {
        padding: 0.3rem 0.85rem;
    }

    .breadcrumb-nav--overlay .breadcrumb-nav__current {
        max-width: 22ch;
    }
}

@media (max-width: 480px) {
    :root {
        --bc-font-size: 0.78rem;
    }

    .breadcrumb-nav__current {
        max-width: 18ch;
    }

    .breadcrumb-nav--pills .breadcrumb-nav__link,
    .breadcrumb-nav--pills .breadcrumb-nav__text,
    .breadcrumb-nav--pills .breadcrumb-nav__current {
        padding  : 0.2rem 0.7rem;
        font-size: 0.74rem;
    }

    /* En overlay, ocultar items intermedios en pantallas muy pequeñas */
    .breadcrumb-nav--overlay .breadcrumb-nav__item:not(:first-child):not(:last-child) {
        display: none;
    }

    .breadcrumb-nav--overlay .breadcrumb-nav__item:first-child .breadcrumb-nav__separator {
        display: inline-flex;
    }
}