/* public/assets/css/components/migas.css
   Componente: miga de pan (breadcrumbs) generica para toda la app. La pinta
   layouts/main.php a partir de la variable $migas que cada controlador le
   pasa a la vista (array de ['etiqueta','url'] en orden, el ultimo sin url
   = pagina actual). Si hay mas de 3 niveles, los intermedios se colapsan en
   un "…" desplegable (nativo, <details>) en vez de romper la fila o hacer
   scroll horizontal. Los tramos se separan con "<" (no "/"); cada tramo
   enlazado ya sirve para retroceder al nivel que sea, sin un boton
   "Volver" aparte.

   .app-migas-barra es la franja sticky a todo lo ancho (pegada justo debajo
   de la cabecera, mismo patron que .app-header); .app-migas-fila es el
   contenido centrado dentro, igual que .app-header-inner dentro de
   .app-header. Al hacer scroll, header-nav.js añade
   .app-migas-fila-pegada a la barra (mismo mecanismo que
   .app-header-scrolled): gana fondo solido y sombra, para que se note que
   se ha "pegado" a la cabecera en vez de aparecer/desaparecer de golpe. */
.app-migas-barra {
    position: sticky;
    top: var(--app-header-height);
    z-index: 90;
    /* Fondo solido siempre (no solo al hacer scroll): al ser sticky, sin
       fondo propio se veia "flotando" sobre el contenido de justo debajo
       (transparencia dejando pasar lo que hay detras). El efecto de scroll
       (ver header-nav.js) solo añade la sombra, para notar que se "pega"
       a la cabecera, no aparecer/desaparecer el fondo de golpe. */
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-border-soft);
    transition: box-shadow .25s ease;
}
.app-migas-barra.app-migas-fila-pegada {
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.app-migas-fila {
    width: 100%;
    max-width: var(--app-container-max);
    margin: 0 auto;
    padding: var(--app-space-sm) clamp(var(--app-space-lg), 2vw, var(--app-space-xl));
    display: flex;
    align-items: center;
    gap: var(--app-space-sm);
    flex-wrap: wrap;
}

.app-migas {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--app-space-xs);
    font-size: var(--app-text-2xs);
    color: var(--app-text-muted);
    min-width: 0;
}
.app-migas a {
    color: var(--app-text-soft);
    font-weight: 700;
    text-decoration: none;
}
.app-migas a:hover { color: var(--app-primary-dark); text-decoration: underline; }
.app-migas-actual {
    color: var(--app-text);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 55vw;
}
@media (min-width: 481px) {
    .app-migas-actual { max-width: 40vw; }
}
.app-migas-separador { color: var(--app-border); }

/* Niveles intermedios colapsados (mas de 3 tramos en total): nativo, sin
   JS propio, mismo patron que .app-desplegable-campos de buscador.css. */
.app-migas-colapso { position: relative; }
.app-migas-colapso summary {
    list-style: none;
    cursor: pointer;
    padding: var(--app-space-xs) var(--app-space-xs);
    border-radius: var(--app-radius-sm);
    color: var(--app-text-muted);
    font-weight: 700;
}
.app-migas-colapso summary::-webkit-details-marker { display: none; }
.app-migas-colapso summary:hover { background: rgba(var(--app-primary-rgb), 0.08); color: var(--app-primary-dark); }
.app-migas-colapso-lista {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: var(--app-space-xs);
    min-width: 160px;
    padding: var(--app-space-xs);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface);
    border: 1px solid var(--app-border-soft);
    box-shadow: var(--app-shadow-card);
}
.app-migas-colapso-lista a {
    padding: var(--app-space-xs) var(--app-space-sm);
    border-radius: var(--app-radius-xs);
    color: var(--app-text);
    font-weight: 600;
}
.app-migas-colapso-lista a:hover { background: rgba(var(--app-primary-rgb), 0.08); text-decoration: none; }