/* --- Estilos Mejorados para Breadcrumb --- */

/* Variables de color para fácil personalización */
:root {
    --breadcrumb-bg: linear-gradient(145deg, #f8f9fa, #ffffff);
    --breadcrumb-link-color: #001c70;
    --breadcrumb-link-hover-color: #0a58ca;
    --breadcrumb-active-color: #212529;
    --breadcrumb-separator-color: #6c757d;
    --breadcrumb-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
    --breadcrumb-border-color: #dee2e6;
}

/* Contenedor principal del breadcrumb */
.breadcrumb-container {
    background: var(--breadcrumb-bg);
    padding: 1rem 1.1rem;
    border-radius: 0.75rem; /* Bordes más suaves */
    box-shadow: var(--breadcrumb-shadow);
    border: 1px solid var(--breadcrumb-border-color);
    margin-bottom: 2.5rem;
    overflow-x: auto; /* Permite scroll horizontal en pantallas muy pequeñas */
    white-space: nowrap; /* Evita que los items se rompan en múltiples líneas internamente */
}

/* Lista del breadcrumb */
.breadcrumb {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    font-size: 1rem; /* Tamaño de fuente más grande para mejor legibilidad */
}

/* Separador personalizado con un ícono SVG */
.breadcrumb-item + .breadcrumb-item::before {
    /* Usamos un ícono SVG para el separador, se puede reemplazar con cualquier otro */
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%236c757d' class='bi bi-chevron-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    margin: 0 0.50rem; /* Más espacio alrededor del separador */
    opacity: 0.8;
    vertical-align: middle; /* Alinea el ícono con el texto */
}

/* Estilo para los elementos del breadcrumb */
.breadcrumb-item {
    display: inline-flex; /* Ayuda a la alineación vertical */
    align-items: center;
}

/* Estilo para los enlaces */
.breadcrumb-item a {
    text-decoration: none;
    color: var(--breadcrumb-link-color);
    font-weight: 300;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* Efecto hover para los enlaces */
.breadcrumb-item a:hover {
    background-color: rgba(13, 110, 253, 0.1);
    color: var(--breadcrumb-link-hover-color);
}

/* Estilo para el elemento activo (la página actual) */
.breadcrumb-item.active {
    color: var(--breadcrumb-active-color);
    font-weight: 600; /* Más grueso para destacar */
}