/* migas.css — migas de pan en chips
   Reemplaza a back-button.css. Se carga en giemei/layout.blade.php,
   layout/pago.blade.php y layout/app.blade.php (detalle de producto).

   Esos dos primeros layouts no cargan style.css ni cdm-system.css, así que
   los colores van con fallback propio (los tokens se usan si existen).

   El .header es sticky con top:0 (tienda-navbar.css:37-48); la barra se pega
   justo debajo con position:sticky y su propio top, que main.js ajusta al alto
   real del header. */

.cdm-migas {
    --migas-texto: var(--md-hierro, #171715);
    --migas-fondo: #fbf8f3;
    --migas-borde: #ddd4c8;
    --migas-suave: #f1e9dc;
    --migas-acento: #9b7440;

    position: sticky;
    /* main.js sobreescribe esto con el alto real del .header. Los dos valores
       son el fallback sin JS: 91px desktop fijo (tienda-navbar.css:44) y 68px
       el flex de mobile (tienda-navbar.css:307-328). */
    top: 91px;
    z-index: 19; /* por debajo del .header, que va en 20 */
    background: var(--migas-fondo);
    border-bottom: 1px solid var(--migas-borde);
}

@media (max-width: 900px) {
    .cdm-migas { top: 68px; }
}

/* El atributo hidden no alcanza por sí solo si alguna regla fija display. */
.cdm-migas[hidden] { display: none; }

.cdm-migas__track {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 6px 4vw;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.cdm-migas__track::-webkit-scrollbar { display: none; }

@media (max-width: 900px) {
    .cdm-migas__track { padding: 6px 14px; }
}

.cdm-migas__sep {
    flex: 0 0 auto;
    color: #b8ac99;
    font-size: 14px;
    line-height: 1;
}

.cdm-migas__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 4px 12px;
    border: 1px solid var(--migas-borde);
    border-radius: 999px;
    background: #fff;
    color: var(--migas-texto);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .01em;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

a.cdm-migas__chip:hover,
a.cdm-migas__chip:focus-visible {
    border-color: var(--migas-acento);
    background: var(--migas-suave);
    color: var(--migas-acento);
    outline: none;
}

.cdm-migas__chip--actual {
    border-color: transparent;
    background: var(--migas-texto);
    color: var(--migas-fondo);
    cursor: default;
}

/* Filtros activos: chip informativo (no clicable); se quitan desde el panel. */
.cdm-migas__chip--filtro {
    border-style: dashed;
    color: #6b6459;
    cursor: default;
}

/* Modo inline (dentro del contenido, p. ej. detalle de producto):
   sin barra pegada ni fondo. */
.cdm-migas--inline {
    position: static;
    background: none;
    border: 0;
    margin: 18px 0;
}

.cdm-migas--inline .cdm-migas__track {
    min-height: 0;
    padding: 0;
    flex-wrap: wrap;
    gap: 6px 8px;
}

@media (prefers-reduced-motion: reduce) {
    .cdm-migas__chip { transition: none; }
}