/* back-button.css — barra superior "volver atras"
   Se carga en giemei/layout.blade.php y layout/pago.blade.php.
   Vive aparte de cdm-system.css porque esos dos layouts no cargan style.css
   ni cdm-system.css: alli no existen ni --color-principal/--color-secundario
   ni los tokens --md-*, asi que el color va con fallback propio.

   El .header ya es sticky con top:0 (tienda-navbar.css:37-48), asi que esta
   barra se pega justo debajo de el con position:sticky y su propio top. */

.cdm-backbar {
    position: sticky;
    /* main.js sobreescribe esto con el alto real del .header. Los dos valores
       de abajo son el fallback sin JS: 91px es el alto fijo de desktop
       (tienda-navbar.css:44) y 68px el del flex de mobile, que se arma con
       padding de 14px + el boton de hamburguesa de 40px
       (tienda-navbar.css:307-328). */
    top: 91px;
    z-index: 19;              /* por debajo del .header, que va en 20 */
    display: flex;
    align-items: center;
    height: 48px;
    /* Mismo padding horizontal que el .header, para que el texto del boton
       quede alineado con el logo. */
    padding: 0 4vw;
    background: #fbf8f3;
    border-bottom: 1px solid #ddd4c8;
}

@media (max-width: 900px) {
    .cdm-backbar { top: 68px; padding: 0 14px; }
}

/* El atributo hidden no alcanza por si solo: la regla de arriba pone
   display:flex en la barra y le gana a la regla de user-agent para [hidden].
   Sin esto la barra se muestra siempre y el atributo queda como adorno. */
.cdm-backbar[hidden] { display: none; }

.cdm-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 12px 0 8px;
    margin-left: -8px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--md-hierro, #171715);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease;
}

.cdm-back:hover,
.cdm-back:focus-visible {
    background: #f1e9dc;
    color: #9b7440;
    outline: none;
}

.cdm-back svg { width: 18px; height: 18px; flex: 0 0 18px; }

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