/* ============================================================
   casper.css — Maestro de marca Casper
   ------------------------------------------------------------
   [2026-07-28] Fundación del sistema visual (Fase A0).
   Marca Casper: NEGRO #373739 + NARANJA #E96A16 + Poppins.
   (El navy #213080/#243182 y el verde #92c841 eran del template
   base "Zoro", NO son de Casper.)

   Reglas de este archivo:
   - Se carga DESPUÉS del theme (bootstrap, style, color-nineteen,
     nineteen) y ANTES de los feature CSS, para que sus reglas ganen
     sin !important.
   - Bloque 1 (:root): solo declara variables. Declarar una variable
     no repinta nada hasta que un var() la usa → riesgo cero.
   - Bloque 2 (componentes .c-*): clases opt-in reutilizables.
   - Bloque 3 (overrides puntuales): solo unos pocos selectores del
     theme, de bajo alcance y color, bien comentados.
   ============================================================ */

/* ============================================================
   1. TOKENS :root
   ============================================================ */
:root {
    /* Marca */
    --c-negro:   #373739;
    --c-naranja: #E96A16;
    --c-amarillo: #ffe71e;   /* secundario del template, disponible */
    --c-blanco:  #ffffff;

    /* Semánticos (los que consumen los componentes) */
    --c-primary:   var(--c-negro);
    --c-accent:    var(--c-naranja);
    --c-on-accent: var(--c-negro);   /* texto negro sobre naranja: patrón ya establecido */

    /* WhatsApp */
    --c-wa:       #25d366;
    --c-wa-hover: #1da851;

    /* Estados / feedback */
    --c-warn-fg:     #8a6d00;
    --c-warn-bg:     #fff6d9;
    --c-warn-border: #f0d97a;
    --c-muted-fg:     #5f5f5f;   /* gris AA */
    --c-muted-bg:     #f2f2f2;
    --c-muted-border: #dddddd;
    /* Éxito (badge "Pagado" de pedidos; la marca no tenía un verde de éxito). */
    --c-ok-fg:     #1b5e20;
    --c-ok-bg:     #e7f4e8;
    --c-ok-border: #bfe3c3;

    /* Neutros */
    --c-text:         #373739;
    --c-text-2:       #666666;
    --c-border:       #e2e2e2;
    --c-border-2:     #ececec;
    --c-input-border: #dcdcdc;
    --c-accent-tint:  #fff6ef;              /* naranja muy tenue (hover suave) */
    --c-accent-ring:  rgba(233, 106, 22, .18);

    /* Tipografía */
    --c-font: 'Poppins', sans-serif;

    /* Radios */
    --c-radius:      4px;
    --c-radius-pill: 999px;
    --c-radius-card: 14px;

    /* Sombras */
    --c-shadow-card:  0 2px 12px rgba(0, 0, 0, .06);
    --c-shadow-hover: 0 10px 26px rgba(0, 0, 0, .12);

    --c-transition: .15s ease;
}

/* ============================================================
   2. COMPONENTES .c-* (opt-in, se aplican por clase en el Blade)
   ============================================================ */

/* Botón de marca. Base geométrica autocontenida (no depende de .btn). */
.c-btn {
    display: inline-block;
    font-family: var(--c-font);
    font-size: clamp(12px, 1.7vw, 14px);
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    padding: clamp(9px, 2.2vw, 11px) clamp(20px, 5vw, 28px);
    border: 1px solid transparent;
    border-radius: var(--c-radius);
    transition: background var(--c-transition), color var(--c-transition), border-color var(--c-transition);
}

/* Primario: negro → hover naranja (texto negro sobre naranja). */
.c-btn--primary {
    color: var(--c-blanco);
    background: var(--c-primary);
    border-color: var(--c-primary);
}
.c-btn--primary:hover,
.c-btn--primary:focus {
    color: var(--c-on-accent);
    background: var(--c-accent);
    border-color: var(--c-accent);
    text-decoration: none;
}

/* Secundario / outline: contorno negro → hover relleno negro. */
.c-btn--outline {
    color: var(--c-primary);
    background: transparent;
    border-color: var(--c-primary);
}
.c-btn--outline:hover,
.c-btn--outline:focus {
    color: var(--c-blanco);
    background: var(--c-primary);
    border-color: var(--c-primary);
    text-decoration: none;
}
/* El theme (style.css:3005 + color-nineteen) fuerza el color del <a> en hover dentro
   de .widget_manufaturer (el botón "Reiniciar" del filtro) y quedaba texto negro sobre
   fondo negro. Se recupera el blanco con mayor especificidad, sin !important. */
.widget_manufaturer a.c-btn--outline:hover,
.widget_manufaturer a.c-btn--outline:focus {
    color: var(--c-blanco);
}

/* [2026-07-29] Iconos en botones/CTA — espaciado centralizado.
   Vocabulario de acción→icono aplicado en las vistas (fa 4.3.0); aquí SOLO el gap,
   con clases utilitarias para no meter reglas globales que afecten iconos ya existentes.
   .c-ico-l = icono a la izquierda del texto · .c-ico-r = icono a la derecha (progresión). */
.c-ico-l { margin-right: .5em; }
.c-ico-r { margin-left: .5em; }
/* Los iconos heredan color/tamaño del botón; se evita que el line-height los descuadre. */
.c-btn .c-ico-l,
.c-btn .c-ico-r { font-size: .95em; line-height: 1; }

/* [2026-07-29] Buscador del header: el submit pasó de <input> a <button> para poder llevar la
   lupa (un <input> no admite <i> dentro). Las reglas del theme que lo posicionaban usaban
   input.search-submit (position/border/radio) y NO aplican a un <button>, por eso quedaba
   descolocado. Se repone aquí la caja completa, a marca Casper (negro → naranja en hover) y con
   icono+texto en una sola línea. Scope alto para ganar por orden de carga, sin !important. */
.nineteen .flat-header .flat-widgets .widget_search button.search-submit {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: auto;
    min-width: 96px;
    height: auto;
    margin: 0;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border: 0;
    border-radius: 0 20px 20px 0;
    background: var(--c-negro);
    color: var(--c-blanco);
    font: 700 13px/1 var(--c-font);
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--c-transition), color var(--c-transition);
}
.nineteen .flat-header .flat-widgets .widget_search button.search-submit:hover,
.nineteen .flat-header .flat-widgets .widget_search button.search-submit:focus {
    background: var(--c-naranja);
    color: var(--c-on-accent);
}

/* ============================================================
   3. OVERRIDES PUNTUALES del theme (bajo alcance, solo color/caja).
   ============================================================ */

/* --- Casper Card: borde + radio + sombra EN REPOSO ---------------
   Unifica las cards planas del catálogo, promociones y relacionados
   (todas usan .products-grid .item-inner) con el look de /locations.
   Antes: solo borde #eee y sombra únicamente en hover. */
.products-grid .item-inner {
    border: 1px solid var(--c-border-2);
    border-radius: var(--c-radius-card);
    box-shadow: var(--c-shadow-card);
    overflow: hidden;
    transition: box-shadow .3s ease, transform .3s ease;
}
.products-grid .item-inner:hover {
    box-shadow: var(--c-shadow-hover);
    transform: translateY(-4px);
}

/* --- Badges NUEVO / PROMO de las cards ---------------------------
   Antes: PROMO verde #92c841 y NUEVO #faab5b (colores del template).
   Ahora: PROMO naranja de marca, NUEVO negro de marca.
   Se igualan las variantes más específicas del theme (base en style.css:1868,
   adyacente new+promo en :1838, y dentro de .product del detalle en :2296/:2305)
   para ganar por orden de carga, sin !important. */
.sale-top-right,
.new-top-right + .sale-top-right,
.product .sale-top-right,
.product .new-top-right + .sale-top-right { background-color: var(--c-naranja); }
.new-top-right2 { background-color: var(--c-negro); }

/* --- Carrito: botones +/- de cantidad ----------------------------
   Antes: rojo puro. El theme lo pinta con un selector con ID
   (nineteen.css:70 → .nineteen #cart-table .numbers-row .button_inc),
   así que se IGUALA esa especificidad para ganar sin !important.
   Ahora: negro de marca → hover naranja. */
.nineteen #cart-table .numbers-row .button_inc {
    background-color: var(--c-negro);
}
.nineteen #cart-table .numbers-row .button_inc:hover {
    background-color: var(--c-naranja);
    color: var(--c-on-accent);
}

/* --- Header: banda central (logo/buscador/carrito/usuario) --------
   [2026-07-29] REVERTIDO. El gris #575757 (nineteen.css:202) es una DECISIÓN DE PRODUCTO
   intencional: diferencia visualmente esa sección (buscador/carrito/usuario) del resto del
   header. El refactor NO debe pisar decisiones de producto; se conserva el gris del theme.
   Override anterior (a negro) desactivado a propósito (Regla 4):
.nineteen .flat-header {
    background-color: var(--c-negro);
}
*/

/* --- Footer: legibilidad sobre el fondo oscuro (#363636) ----------
   El theme (color-nineteen.css:36-49) pinta hovers de links e iconos ::before
   en #373739 → invisibles sobre #363636. Se llevan al naranja de marca.
   Misma especificidad que el theme; casper.css carga después → gana sin !important. */
.flat-footer-top .widget_services a:hover,
.flat-footer-top .widget_my_account a:hover,
.flat-footer-top .widget_about_us .flat-infomation a:hover {
    color: var(--c-naranja);
}
ul.flat-infomation li::before,
.widget_services ul li::before,
.widget.widget_my_account ul li::before {
    color: var(--c-naranja);
}

/* --- Medios de pago: tarjetas uniformes --------------------------
   Antes: imágenes sueltas con aspect ratios dispares → bordes desalineados.
   Ahora: tarjeta blanca de alto fijo con object-fit: contain. */
.payment-card {
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(120px, 22vw, 160px);
    padding: 16px;
    margin-bottom: 24px;
    background: var(--c-blanco);
    border: 1px solid var(--c-border-2);
    border-radius: var(--c-radius-card);
    box-shadow: var(--c-shadow-card);
}
.payment-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ============================================================
   A4 · Polish
   ============================================================ */

/* Hover de las cards: se retira el overlay oscuro sobre la imagen
   (opacity .55 en style.css:2011), gesto anticuado. Queda solo el
   lift + sombra de la Casper Card. Misma especificidad, carga después. */
.products-grid .item:hover:before {
    opacity: 0;
}
/* [2026-07-29] Se ELIMINA por completo ese overlay (.products-grid .item:before es
   position:absolute; width/height:100%; z-index:1 en style.css:1990). Aunque estaba en
   opacity:0 (sin efecto visual), seguía presente y CAPTURABA los clics; al usar la card en
   el home (col con clase .item) se expandía y tapaba el header (carrito/usuario no clicables).
   content:none quita el pseudo → sin overlay, sin bloqueo. Sin efecto visual (ya era invisible). */
.products-grid .item:before {
    content: none;
}

/* Toasts (toastr): tipografía Poppins + radio de marca; el tipo "info"
   (el más usado, ej. el aviso de sucursal de exhibición) pasa de azul
   default a negro Casper. Se prefija con body/#toast-container para ganar
   sin depender del orden de carga respecto del CSS de toastr. */
body #toast-container > div {
    font-family: var(--c-font);
    border-radius: var(--c-radius);
}
body #toast-container > .toast-info {
    background-color: var(--c-negro);
}

/* ============================================================
   Componentes de formulario de marca (register, cuenta)
   ============================================================ */

/* Card contenedora centrada. */
.c-form-card {
    max-width: 820px;
    margin: 0 auto;
    padding: clamp(20px, 4vw, 40px);
    background: var(--c-blanco);
    border: 1px solid var(--c-border-2);
    border-radius: var(--c-radius-card);
    box-shadow: var(--c-shadow-card);
}

/* Sección con encabezado (icono + título + línea separadora). */
.c-form-section {
    margin-bottom: clamp(20px, 4vw, 30px);
}
.c-form-section__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 18px;
    border-bottom: 2px solid var(--c-border-2);
}
.c-form-section__head .fa {
    color: var(--c-naranja);
    font-size: 1.1em;
}
.c-form-section__title {
    margin: 0;
    font-family: var(--c-font);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    font-size: clamp(14px, 2vw, 16px);
    color: var(--c-negro);
}

/* Campo: label visible + input de marca. */
.c-field {
    margin-bottom: 16px;
}
.c-field > label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--c-font);
    font-size: clamp(12px, 1.6vw, 13px);
    font-weight: 600;
    color: var(--c-negro);
}
.c-field .c-req {
    color: var(--c-naranja);
}
.c-form-card .form-control {
    font-family: var(--c-font);
    font-size: clamp(13px, 1.7vw, 15px);
    border: 1px solid var(--c-input-border);
    border-radius: var(--c-radius);
    padding: clamp(9px, 2vw, 12px) 14px;
}
.c-form-card .form-control:focus {
    border-color: var(--c-naranja);
    box-shadow: 0 0 0 .2rem var(--c-accent-ring);
}

/* Campo tipo checkbox (términos). */
.c-field--check > label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    font-weight: 500;
    text-transform: none;
}
.c-field--check input {
    width: auto;
    margin: 0;
}
.c-field--check a {
    color: var(--c-naranja);
    font-weight: 600;
}

/* Enlace alternativo bajo el form ("¿Ya tenés cuenta?"). */
.c-form-alt {
    margin-top: 16px;
    margin-bottom: 0;
    text-align: center;
    font-family: var(--c-font);
    font-size: clamp(13px, 1.7vw, 14px);
    color: var(--c-text-2);
}
.c-form-alt a {
    color: var(--c-naranja);
    font-weight: 600;
}

/* Texto de ayuda de un campo/sección y nota de campos obligatorios. */
.c-field-hint {
    margin: -4px 0 12px;
    font-family: var(--c-font);
    font-size: clamp(12px, 1.6vw, 13px);
    color: var(--c-text-2);
}
.c-form-req-note {
    margin: 4px 0 16px;
    font-family: var(--c-font);
    font-size: clamp(12px, 1.6vw, 13px);
    color: var(--c-text-2);
}
.c-form-req-note .c-req { color: var(--c-naranja); }

/* ============================================================
   P23 · Acciones de la card (favorito + carrito)
   Antes: iconos sueltos a la izquierda, sin centrar, con hover
   amarillo del template. Ahora: centrados y como botones de marca
   (carrito = primaria rellena, favorito = secundaria outline).
   Se prefija con .producto-accion para ganar al theme (.m-container).
   ============================================================ */
.producto-accion ul.add-to-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
.producto-accion ul.add-to-links li {
    margin: 0;
}
.producto-accion ul.add-to-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--c-negro);
    border-radius: 50%;
    color: var(--c-negro);
    background: transparent;
    transition: background var(--c-transition), color var(--c-transition), border-color var(--c-transition);
}
.producto-accion ul.add-to-links a i {
    margin: 0;
    font-size: 16px;
    color: inherit;
}
/* Carrito = acción primaria: relleno negro → hover naranja (texto negro sobre naranja). */
.producto-accion ul.add-to-links a.add_to_cart_button {
    color: var(--c-blanco);
    background: var(--c-negro);
}
.producto-accion ul.add-to-links a.add_to_cart_button:hover {
    color: var(--c-on-accent);
    background: var(--c-naranja);
    border-color: var(--c-naranja);
}
/* Favorito = acción secundaria: outline → hover naranja. */
.producto-accion ul.add-to-links a.link-wishlist:hover {
    color: var(--c-on-accent);
    background: var(--c-naranja);
    border-color: var(--c-naranja);
}
/* Neutraliza el hover amarillo + scale que el template aplica al icono. */
.producto-accion ul.add-to-links li a i:hover {
    color: inherit;
    transform: none;
}

/* ============================================================
   P25 · Filtros del catálogo
   ============================================================ */

/* --- Card contenedora del filtro (línea visual clara). En desktop es una card sutil;
   en mobile el bottom-sheet ya es el contenedor y la card se aplana (ver media query). --- */
#secondary.has-filtros-sheet .sidebar_shop_sidebar {
    background: var(--c-blanco);
    border: 1px solid var(--c-border-2);
    border-radius: var(--c-radius-card);
    box-shadow: var(--c-shadow-card);
    padding: clamp(14px, 2vw, 18px);
    overflow: hidden;
}

/* Título de la card + badge de total. */
#secondary.has-filtros-sheet .filtros-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--c-border-2);
    font-family: var(--c-font);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    font-size: clamp(14px, 2vw, 16px);
    color: var(--c-negro);
}
#secondary.has-filtros-sheet .filtros-titulo__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 12px;
    color: var(--c-blanco);
    background: var(--c-naranja);
    border-radius: var(--c-radius-pill);
}

/* --- Filas de acordeón (antes botones negros): transparentes, separador, chevron. --- */
#secondary.has-filtros-sheet .filtro-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 2px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--c-border-2);
    font-family: var(--c-font);
    font-weight: 500;
    font-size: 14px;
    color: var(--c-negro);
    text-align: left;
    cursor: pointer;
    transition: color var(--c-transition);
}
#secondary.has-filtros-sheet .filtro-toggle__label {
    flex: 1;
}
#secondary.has-filtros-sheet .filtro-toggle__caret {
    margin-left: 8px;
    color: var(--c-text-2);
    transition: transform var(--c-transition), color var(--c-transition);
}
/* Hover: acento sutil (label naranja), distinto del estado abierto. */
#secondary.has-filtros-sheet .filtro-toggle:hover .filtro-toggle__label {
    color: var(--c-naranja);
}
/* Abierto/activo: label en negrita naranja + chevron rotado (acento fino, no relleno). */
#secondary.has-filtros-sheet .filtro-toggle[aria-expanded="true"] .filtro-toggle__label {
    color: var(--c-naranja);
    font-weight: 600;
}
#secondary.has-filtros-sheet .filtro-toggle[aria-expanded="true"] .filtro-toggle__caret {
    transform: rotate(180deg);
    color: var(--c-naranja);
}
/* Badge de filtros activos por sección. */
#secondary.has-filtros-sheet .filtro-toggle__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 8px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--c-blanco);
    background: var(--c-naranja);
    border-radius: var(--c-radius-pill);
}

/* Opciones (checkbox) de cada dropdown: mejora sutil — spacing, fila clickeable
   con hover tenue y el check en naranja de marca (accent-color). Aplica desktop y mobile. */
#secondary.has-filtros-sheet .product-categories li {
    margin-bottom: 2px;
}
#secondary.has-filtros-sheet .container_check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px;
    font-family: var(--c-font);
    font-size: 14px;
    color: var(--c-text);
    cursor: pointer;
    border-radius: var(--c-radius);
    transition: background var(--c-transition);
}
#secondary.has-filtros-sheet .container_check:hover {
    background: var(--c-accent-tint);
}
#secondary.has-filtros-sheet .container_check input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--c-naranja);
}

/* Panel colapsable: se aplana la .card-body del theme (sin borde/sombra); el listado
   de opciones va indentado bajo su fila de acordeón. */
#secondary.has-filtros-sheet .collapse .card-body {
    padding: 6px 0 10px 8px;
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* Botonera Filtrar/Reiniciar: se quita la caja gris del theme (style.css:2995 + la línea
   decorativa :after) y se apilan en COLUMNA con espacio real. Antes eran inline-block
   sin margen → envolvían y quedaban pegadas. Scopeado (no afecta promos). */
#secondary.has-filtros-sheet .widget_manufaturer {
    background-color: transparent;
    padding-bottom: 0;
}
#secondary.has-filtros-sheet .widget_manufaturer::after {
    content: none;
}
#secondary.has-filtros-sheet .widget_manufaturer .buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#secondary.has-filtros-sheet .widget_manufaturer .buttons .c-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

/* Paneles de checkboxes: scroll solo si hace falta + scrollbar fino (antes nineteen.css
   forzaba overflow:scroll con ambas barras siempre visibles). */
#secondary.has-filtros-sheet .product-categories {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--c-border) transparent;
}
#secondary.has-filtros-sheet .product-categories::-webkit-scrollbar {
    width: 6px;
}
#secondary.has-filtros-sheet .product-categories::-webkit-scrollbar-thumb {
    background: var(--c-border);
    border-radius: var(--c-radius-pill);
}
#secondary.has-filtros-sheet .product-categories::-webkit-scrollbar-track {
    background: transparent;
}

/* Elementos del bottom-sheet: ocultos en desktop (el sidebar queda como está). */
.filtros-trigger,
.filtros-backdrop,
.filtros-sheet__head {
    display: none;
}

/* --- Mobile (≤991px, igual que la hamburguesa): el sidebar de filtros
   se convierte en una hoja inferior deslizante --- */
@media (max-width: 991px) {
    /* Botón que abre el sheet. */
    .filtros-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        margin-bottom: 16px;
        padding: 12px 20px;
        font-family: var(--c-font);
        font-weight: 600;
        text-transform: uppercase;
        color: var(--c-blanco);
        background: var(--c-negro);
        border: 1px solid var(--c-negro);
        border-radius: var(--c-radius);
        cursor: pointer;
    }

    /* Fondo oscuro. */
    .filtros-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1055;
        background: rgba(0, 0, 0, .5);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease;
    }
    body.filtros-abierto .filtros-backdrop {
        opacity: 1;
        visibility: visible;
    }
    body.filtros-abierto {
        position: fixed;
        left: 0;
        right: 0;
        width: 100%;
        overflow: hidden;
    }
    /* El botón flotante de WhatsApp (z-index alto) no debe taparse con el sheet. */
    body.filtros-abierto .whatsapp-btn,
    body.filtros-abierto .whatsapp-float__tooltip {
        display: none;
    }

    /* El sidebar como hoja inferior deslizante. */
    #secondary.has-filtros-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1060;
        max-height: 85vh;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0 16px;
        background: var(--c-blanco);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, .25);
        transform: translateY(100%);
        transition: transform .3s ease;
    }
    body.filtros-abierto #secondary.has-filtros-sheet {
        transform: translateY(0);
    }

    /* En el sheet, el título "Filtros" de la card es redundante con la cabecera → se oculta,
       y la card se APLANA (el sheet ya es el contenedor: sin borde/sombra/padding propios). */
    #secondary.has-filtros-sheet .filtros-titulo {
        display: none;
    }
    #secondary.has-filtros-sheet .sidebar_shop_sidebar {
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
    }

    /* Cabecera del sheet: handle + título + cerrar, pegada arriba. */
    .filtros-sheet__head {
        display: flex;
        align-items: center;
        justify-content: center;
        position: sticky;
        top: 0;
        z-index: 2;
        padding: 22px 0 16px;
        margin-bottom: 22px;
        background: var(--c-blanco);
        border-bottom: 1px solid var(--c-border-2);
    }
    .filtros-sheet__handle {
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 999px;
        background: var(--c-border);
    }
    .filtros-sheet__title {
        font-family: var(--c-font);
        font-weight: 600;
        text-transform: uppercase;
        color: var(--c-negro);
    }
    .filtros-sheet__close {
        position: absolute;
        right: 0;
        top: 12px;
        width: 34px;
        height: 34px;
        font-size: 26px;
        line-height: 1;
        color: var(--c-negro);
        background: transparent;
        border: 0;
        cursor: pointer;
    }

    /* Filtrar / Reiniciar fijos al fondo del sheet mientras la lista scrollea. */
    #secondary.has-filtros-sheet .widget_manufaturer {
        position: sticky;
        bottom: 0;
        padding: 12px 0;
        background: var(--c-blanco);
        border-top: 1px solid var(--c-border-2);
    }
}

/* ============================================================
   P20 · Dropdown de usuario (post-login) — popover branded
   Scope estricto: .nineteen-auth-header (NO afecta el mini-carrito,
   que comparte .widget_shopping/.flat-ordered). Sin !important.
   ============================================================ */

/* --- Trigger "Hola, [nombre]" en la barra negra del header --- */
.nineteen-auth-header .cuenta-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    background: transparent;
    border: 0;
    font-family: var(--c-font);
    font-size: clamp(12px, 1.4vw, 14px);
    font-weight: 500;
    text-transform: none;            /* el theme pone uppercase a los <button> del header */
    color: var(--c-blanco);
    cursor: pointer;
    transition: color var(--c-transition);
}
.nineteen-auth-header .cuenta-trigger .fa-user { font-size: 15px; }
.nineteen-auth-header .cuenta-trigger__caret {
    font-size: 12px;
    color: rgba(255, 255, 255, .7);
    transition: transform var(--c-transition), color var(--c-transition);
}
.nineteen-auth-header .cuenta-trigger:hover,
.nineteen-auth-header .cuenta-trigger:focus,
.nineteen-auth-header .cuenta-trigger[aria-expanded="true"] {
    color: var(--c-naranja);
}
.nineteen-auth-header .cuenta-trigger:hover .cuenta-trigger__caret,
.nineteen-auth-header .cuenta-trigger[aria-expanded="true"] .cuenta-trigger__caret {
    color: var(--c-naranja);
}
.nineteen-auth-header .cuenta-trigger[aria-expanded="true"] .cuenta-trigger__caret {
    transform: rotate(180deg);
}

/* --- Apertura por CLICK: se neutraliza el hover del theme SOLO acá (0,3,0 vence a
   .widget_shopping:hover .flat-ordered 0,2,0) y se muestra con .is-open. El carrito conserva su hover. --- */
.nineteen-auth-header:hover .flat-ordered { opacity: 0; visibility: hidden; }
.nineteen-auth-header.is-open .flat-ordered { opacity: 1; visibility: visible; }

/* --- Caja del popover (vence borde verde/navy del theme) --- */
.nineteen-auth-header .flat-ordered {
    width: 250px;
    padding: 0;
    background: var(--c-blanco);
    border: 1px solid var(--c-border-2);
    border-top: 3px solid var(--c-naranja);
    border-radius: var(--c-radius-card);
    box-shadow: var(--c-shadow-hover);
    overflow: hidden;
}
.nineteen-auth-header .flat-ordered ul { display: block; margin: 0; padding: 6px; }

/* --- Bloque de identidad (nombre + email) --- */
.nineteen-auth-header .cuenta-menu__id {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 12px;
    border-bottom: 1px solid var(--c-border-2);
}
.nineteen-auth-header .cuenta-menu__id .fa-user { font-size: 26px; color: var(--c-naranja); }
.nineteen-auth-header .cuenta-menu__id-datos { display: flex; flex-direction: column; min-width: 0; }
.nineteen-auth-header .cuenta-menu__nombre {
    font-family: var(--c-font); font-weight: 600; font-size: 14px; color: var(--c-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nineteen-auth-header .cuenta-menu__email {
    font-family: var(--c-font); font-size: 12px; color: var(--c-text-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- Items (vence float + separador li:before del theme) --- */
.nineteen-auth-header .flat-ordered li { float: none; width: 100%; margin: 0; list-style: none; }
.nineteen-auth-header .flat-ordered li:before { content: none; display: none; }
.nineteen-auth-header .flat-ordered li a,
.nineteen-auth-header .cuenta-menu__logout {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;
    background: transparent;
    border: 0;
    border-radius: var(--c-radius);
    font-family: var(--c-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: none;            /* el theme pone uppercase al <button> de logout */
    text-align: left;
    color: var(--c-text);
    cursor: pointer;
    transition: background var(--c-transition), color var(--c-transition);
}
.nineteen-auth-header .flat-ordered li a .fa,
.nineteen-auth-header .cuenta-menu__logout .fa {
    width: 18px; text-align: center; font-size: 15px; color: var(--c-text-2);
    transition: color var(--c-transition);
}
.nineteen-auth-header .flat-ordered li a:hover,
.nineteen-auth-header .flat-ordered li a:focus {
    background: var(--c-accent-tint); color: var(--c-naranja);
}
.nineteen-auth-header .flat-ordered li a:hover .fa,
.nineteen-auth-header .flat-ordered li a:focus .fa { color: var(--c-naranja); }

/* --- Cerrar sesión: acción secundaria, separada, en neutro (sin rojo, Regla 2). --- */
.nineteen-auth-header .cuenta-menu__logout-li {
    margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--c-border-2);
}
.nineteen-auth-header .cuenta-menu__logout { color: var(--c-muted-fg); }
.nineteen-auth-header .cuenta-menu__logout .fa { color: var(--c-muted-fg); }
.nineteen-auth-header .cuenta-menu__logout:hover,
.nineteen-auth-header .cuenta-menu__logout:focus { background: var(--c-muted-bg); color: var(--c-negro); }
.nineteen-auth-header .cuenta-menu__logout:hover .fa { color: var(--c-negro); }

/* --- Responsive: recentrar el popover (el theme lo posiciona para 360px) --- */
@media (max-width: 991px) {
    .nineteen-auth-header .flat-ordered { right: 50%; margin-right: -125px; width: 250px; }
}

/* --- Modal de confirmación de logout (mismo lenguaje que sign-in/sucursal) --- */
#logout-modal .modal-content { border: 0; border-radius: 6px; overflow: hidden; }
#logout-modal .modal-header { background: var(--c-negro); border-bottom: 3px solid var(--c-naranja); }
#logout-modal .modal-title {
    color: var(--c-blanco); font-family: var(--c-font); font-weight: 600;
    text-transform: uppercase; letter-spacing: .3px; font-size: clamp(15px, 2.2vw, 18px);
}
#logout-modal .modal-body { font-family: var(--c-font); font-size: clamp(13px, 1.7vw, 15px); color: var(--c-text); }
#logout-modal .modal-footer { gap: 8px; }
#logout-modal .modal-footer form { margin: 0; }

/* ============================================================
   P21 · Mis puntos / Billetera  (scope .billetera-page)
   ============================================================ */
/* Ficha: el número de puntos es el foco (grande, naranja). */
.billetera-page .billetera-ficha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: clamp(20px, 4vw, 32px);
    background: var(--c-blanco);
    border: 1px solid var(--c-border-2);
    border-radius: var(--c-radius-card);
    box-shadow: var(--c-shadow-card);
}
.billetera-page .billetera-ficha__puntos { display: flex; flex-direction: column; }
.billetera-page .billetera-ficha__label {
    font-family: var(--c-font); font-size: 13px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .3px; color: var(--c-text-2);
}
.billetera-page .billetera-ficha__valor {
    font-family: var(--c-font); font-weight: 700; line-height: 1;
    font-size: clamp(40px, 9vw, 64px); color: var(--c-naranja);
}
.billetera-page .billetera-ficha__desde { font-family: var(--c-font); font-size: 12px; color: var(--c-text-2); margin-top: 4px; }
.billetera-page .billetera-ficha__canje h3 {
    font-family: var(--c-font); font-weight: 600; font-size: clamp(15px, 2.2vw, 18px);
    color: var(--c-negro); margin: 0 0 4px;
}
.billetera-page .billetera-ficha__canje p { font-family: var(--c-font); color: var(--c-text-2); margin: 0 0 12px; }

/* Tabs a marca (subrayado naranja en la activa). */
.billetera-page .nav-tabs { border-bottom: 1px solid var(--c-border-2); }
.billetera-page .nav-tabs .nav-link {
    font-family: var(--c-font); font-weight: 500; font-size: 14px;
    color: var(--c-text-2); background: transparent; border: 0;
    border-bottom: 3px solid transparent; border-radius: 0; padding: 12px 16px;
}
.billetera-page .nav-tabs .nav-link:hover { color: var(--c-negro); }
.billetera-page .nav-tabs .nav-link.active {
    color: var(--c-negro); font-weight: 600; background: transparent;
    border-bottom-color: var(--c-naranja);
}

/* Tablas de la billetera (header negro, sin colisionar con #cart-table del carrito). */
.billetera-page .billetera-tabla { margin-top: 16px; font-family: var(--c-font); font-size: 14px; }
.billetera-page .billetera-tabla thead th {
    background: var(--c-negro); color: var(--c-blanco); font-weight: 600;
    text-transform: uppercase; font-size: 12px; border: 0; white-space: nowrap;
}
.billetera-page .billetera-tabla td { border-color: var(--c-border-2); vertical-align: middle; }
.billetera-page .billetera-tabla__vacio { color: var(--c-text-2); font-style: italic; padding: 24px 0; }

/* Modal de canje (mismo lenguaje que sign-in/sucursal/logout). */
#myModal .modal-content { border: 0; border-radius: 6px; overflow: hidden; }
#myModal .modal-header { background: var(--c-negro); border-bottom: 3px solid var(--c-naranja); }
#myModal .modal-title {
    color: var(--c-blanco); font-family: var(--c-font); font-weight: 600;
    text-transform: uppercase; letter-spacing: .3px; font-size: clamp(15px, 2.2vw, 18px);
}
#myModal .modal-body { font-family: var(--c-font); }
#myModal .modal-footer { gap: 8px; }

/* ============================================================
   P21/P5 · Badges de estado de pedido
   Color + texto siempre visible (colorblind-safe). Cancelado = negro
   de marca (cerrado); Pagado = verde de éxito (--c-ok-*); Pendiente =
   ámbar (--c-warn-*); Abierto = gris neutro (--c-muted-*).
   ============================================================ */
.estado-badge {
    display: inline-block;
    padding: .28em .7em;
    font-family: var(--c-font);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: var(--c-radius-pill);
    white-space: nowrap;
}
.estado-badge--abierto { color: var(--c-muted-fg); background: var(--c-muted-bg); border-color: var(--c-muted-border); }
.estado-badge--pend    { color: var(--c-warn-fg);  background: var(--c-warn-bg);  border-color: var(--c-warn-border); }
.estado-badge--ok      { color: var(--c-ok-fg);    background: var(--c-ok-bg);    border-color: var(--c-ok-border); }
.estado-badge--cancel  { color: var(--c-blanco);   background: var(--c-negro);    border-color: var(--c-negro); }
/* [2026-09-24] En camino (azul = en curso). Mismos valores que el admin. */
.estado-badge--info    { color: #1c6fe0; background: #eaf3ff; border-color: #cfe2ff; }

/* --- Breadcrumb: el item ACTUAL (texto plano, sin <a>) heredaba un color claro y quedaba
   ilegible sobre la banda gris (ej. "Mis Pedidos"). Los <a> tienen su propio color oscuro. --- */
.breadcrumbs li { color: var(--c-text-2); }

/* ============================================================
   P22 · Mini-carrito del header — popover branded
   Scope estricto: .nineteen-cart-header (NO afecta el dropdown de
   usuario, que comparte .widget_shopping/.flat-ordered). Vence el
   borde navy/verde y el hover verde del theme por especificidad
   (.nineteen-cart-header ...) + orden de carga. Sin !important.
   ============================================================ */

/* [2026-07-29] P9 Fase 1 · El contenedor deja de ser popover flotante y pasa a DRAWER deslizante
   (panel fijo full-height que entra desde la derecha). Caja del popover anterior (no se borra — Regla 4):
.nineteen-cart-header .flat-ordered {
    width: 320px;
    max-width: calc(100vw - 30px);
    padding: 0;
    background: var(--c-blanco);
    border: 1px solid var(--c-border-2);
    border-top: 3px solid var(--c-naranja);
    border-bottom: 1px solid var(--c-border-2);
    border-radius: var(--c-radius-card);
    box-shadow: var(--c-shadow-hover);
    overflow: hidden;
}
*/

/* --- Panel deslizante (drawer) --- Vence position:absolute/top/right, borde y opacity del theme
   (.flat-ordered base es 0,1,0; esta regla 0,2,0 gana). Se controla la visibilidad con transform +
   visibility (ver hover/is-open más abajo), no con opacity. --- */
.nineteen-cart-header .flat-ordered {
    /* --cart-w: ancho del panel, tope 88vw en pantallas chicas. */
    --cart-w: 360px;
    position: fixed;
    top: 0;
    /* [2026-07-29] P9 Fase 1 · Se posiciona por 'left' (no 'right' ni 'transform'). En este theme, a
       anchos <= ~700px el 'right:0' de un fixed se ancla ~180px pasado el borde visual derecho (el layout
       desborda), dejando el panel medio fuera de pantalla. El 'left' sí se ancla al borde visual, así que
       abrimos/cerramos animando 'left': cerrado en 100vw (fuera de pantalla), abierto en 100vw - ancho. */
    left: 100vw;
    right: auto;
    bottom: 0;
    height: 100%;
    width: var(--cart-w);
    max-width: 88vw;
    padding: 0;
    background: var(--c-blanco);
    border: 0;
    border-left: 3px solid var(--c-naranja);
    border-radius: 0;
    box-shadow: -8px 0 30px rgba(0, 0, 0, .25);
    display: flex;
    flex-direction: column;
    opacity: 1;
    visibility: hidden;
    transition: left .3s ease, visibility .3s ease;
    z-index: 1049;                    /* sobre el header (999–2000) y bajo el modal BS5 (1050/1055) */
    overflow: hidden;
}

/* Neutraliza el hover del theme SOLO en el carrito (.widget_shopping:hover .flat-ordered 0,3,0):
   la misma especificidad, cargada después, lo mantiene cerrado; .is-open (0,3,0, aún más abajo) lo abre. */
.nineteen-cart-header:hover .flat-ordered { left: 100vw; visibility: hidden; }
.nineteen-cart-header.is-open .flat-ordered { left: max(calc(100vw - var(--cart-w)), 12vw); visibility: visible; }

/* --- Cabecera del drawer: título + cerrar (X) --- */
.nineteen-cart-header .cart-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 16px 14px;
    background: var(--c-blanco);
    border-bottom: 1px solid var(--c-border-2);
}
.nineteen-cart-header .cart-drawer__title {
    font-family: var(--c-font);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--c-negro);
}
.nineteen-cart-header .cart-drawer__close {
    width: 34px;
    height: 34px;
    font-size: 26px;
    line-height: 1;
    color: var(--c-negro);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color var(--c-transition);
}
.nineteen-cart-header .cart-drawer__close:hover,
.nineteen-cart-header .cart-drawer__close:focus { color: var(--c-naranja); }

/* [2026-07-29] P9 Fase 1 · La lista pasa a ocupar el alto disponible y scrollear (footer sticky abajo).
   Lista anterior (popover con max-height fijo) — no se borra (Regla 4):
.nineteen-cart-header .flat-ordered ul {
    display: block;
    width: 100%;
    margin: 0;
    padding: 4px 14px;
    max-height: 320px;
    overflow-y: auto;
}
*/
/* Body scrolleable: contiene la lista + el subtotal (que cierra los productos). El footer
   de acciones queda fijo aparte. min-height:0 permite que el flex hijo scrollee de verdad. */
.nineteen-cart-header .cart-drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.nineteen-cart-header .flat-ordered ul {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
    padding: 4px 16px;
    max-height: none;
    overflow: visible;
}

/* Vence float + divider li:before del theme; item compacto en fila. */
.nineteen-cart-header .flat-ordered li {
    position: relative;
    float: none;
    display: flex;
    align-items: flex-start;      /* imagen/nombre/subtotal alineados arriba: jerarquía más clara */
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 14px 0;
    border-bottom: 1px solid var(--c-border-2);
}
.nineteen-cart-header .flat-ordered li:before { content: none; display: none; }
.nineteen-cart-header .flat-ordered li:last-child { border-bottom: 0; }

.nineteen-cart-header .flat-ordered li img {
    width: 54px;
    height: 54px;
    margin: 0;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--c-border-2);
    flex-shrink: 0;
}
.nineteen-cart-header .flat-ordered h3 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-family: var(--c-font);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 500;
}
.nineteen-cart-header .flat-ordered h3 a {
    color: var(--c-text);
    transition: color var(--c-transition);
}
.nineteen-cart-header .flat-ordered h3 a:hover,
.nineteen-cart-header .flat-ordered h3 a:focus { color: var(--c-naranja); }

/* Precio + botón eliminar en línea (vence el color verde y el :before absoluto del theme). */
.nineteen-cart-header .flat-ordered li span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    font-family: var(--c-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text);
    white-space: nowrap;
}
.nineteen-cart-header .flat-ordered li .delete {
    position: static;
    display: inline-block;
    width: auto;
    line-height: 1;
}
.nineteen-cart-header .flat-ordered li .delete:before {
    content: '\f1f8';
    position: static;
    top: auto;
    right: auto;
    font-family: "FontAwesome";
    font-size: 14px;
    color: var(--c-text-2);
    transition: color var(--c-transition);
}
.nineteen-cart-header .flat-ordered li .delete:hover:before,
.nineteen-cart-header .flat-ordered li .delete:focus:before { color: var(--c-naranja); }

/* ============================================================
   [2026-07-29] P9 Fase 2 · Stepper de cantidad dentro de cada item del drawer.
   Reusa las clases del carrito (numbers-row / button_inc / cant-number-input)
   que el JS de nineteen.js ya maneja; acá solo se estila compacto y a marca.
   Scope estricto a .nineteen-cart-header: NO toca el stepper de la página del
   carrito (.nineteen #cart-table .numbers-row ...), que vive con sus propias reglas.
   ============================================================ */

/* Cuerpo del item en dos filas: (arriba) nombre + borrar; (abajo) stepper + subtotal.
   Separa los elementos interactivos (WCAG 2.5.8: targets grandes, ≥10px entre ellos). */
.nineteen-cart-header .cart-drawer-item-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.nineteen-cart-header .cart-drawer-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;                        /* separación nombre ↔ borrar */
}
.nineteen-cart-header .cart-drawer-item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;                        /* separación stepper ↔ subtotal */
}
.nineteen-cart-header .cart-drawer-cant-form { margin: 0; }

/* Botón BORRAR: área de toque ~40px, esquina superior derecha, separado del nombre y del stepper
   para no clicar por error (antes estaba pegado al texto). */
.nineteen-cart-header .cart-drawer-item-remove {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: -10px -8px 0 0;           /* alinea al borde compensando el padding del li, sin agrandar la fila */
    color: var(--c-text-2);
    font-size: 15px;
    border-radius: var(--c-radius);
    transition: color var(--c-transition), background var(--c-transition);
}
.nineteen-cart-header .cart-drawer-item-remove:hover,
.nineteen-cart-header .cart-drawer-item-remove:focus {
    color: var(--c-naranja);
    background: var(--c-accent-tint);
}

/* Subtotal del item, a la derecha del stepper. */
.nineteen-cart-header .flat-ordered li .cart-drawer-item-subtotal {
    flex-shrink: 0;
    display: inline-block;
    font-family: var(--c-font);
    font-size: 14px;
    font-weight: 700;
    color: var(--c-negro);
    white-space: nowrap;
}

/* Stepper compacto:  [-] [input] [+]  (el orden visual se fija con `order`;
   las clases se conservan tal cual para que el handler del JS las encuentre). */
/* Grupo cohesivo con borde único y esquinas redondeadas: [-] [input] [+]. */
.nineteen-cart-header .numbers-row {
    display: inline-flex;
    align-items: center;
    width: auto;
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius);
    overflow: hidden;
}
.nineteen-cart-header .numbers-row .cant-number-input {
    order: 2;
    width: 42px;
    height: 30px;
    margin: 0;
    padding: 0 4px;
    text-align: center;
    background-color: var(--c-blanco);
    border: 0;
    border-left: 1px solid var(--c-border);
    border-right: 1px solid var(--c-border);
    border-radius: 0;
    font-family: var(--c-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text);
    -moz-appearance: textfield;
}
.nineteen-cart-header .numbers-row .button_inc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background-color: var(--c-blanco);
    color: var(--c-negro);
    border-radius: 0;
    line-height: 1;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background var(--c-transition), color var(--c-transition);
}
.nineteen-cart-header .numbers-row .button_inc:hover,
.nineteen-cart-header .numbers-row .button_inc:focus {
    background-color: var(--c-negro);
    color: var(--c-blanco);
}
/* [-] a la izquierda, [+] a la derecha, input al centro (solo orden visual). */
.nineteen-cart-header .numbers-row .dec { order: 1; }
.nineteen-cart-header .numbers-row .inc { order: 3; }

/* [2026-07-29] .cart-drawer-item-end quedó obsoleta con el rediseño del item (el subtotal
   pasó a la fila inferior junto al stepper, y el borrar a la esquina superior). Regla como
   referencia (Regla 4):
.nineteen-cart-header .flat-ordered li span.cart-drawer-item-end {
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
} */

/* --- Estado vacío --- */
.nineteen-cart-header .flat-ordered li.cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 26px 0;
    border-bottom: 0;
    color: var(--c-text-2);
    font-family: var(--c-font);
    font-size: 14px;
    text-align: center;
}
.nineteen-cart-header .flat-ordered li.cart-empty .fa { font-size: 24px; color: var(--c-muted-border); }

/* --- Subtotal: CIERRE del bloque de productos (body), no va con las acciones.
   Fondo blanco como la lista + borde superior que lo separa del listado. Fijo (siempre visible). --- */
.nineteen-cart-header .flat-ordered .total {
    flex-shrink: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 14px 16px;
    border-top: 1px solid var(--c-border);
    background: var(--c-blanco);
}

/* --- Footer del drawer: SOLO las acciones, separado del subtotal por un borde. --- */
.nineteen-cart-header .cart-drawer__foot {
    flex-shrink: 0;
    background: var(--c-blanco);
    border-top: 1px solid var(--c-border-2);
    padding-top: 14px;
}
.nineteen-cart-header .flat-ordered .total:before { content: none; }
.nineteen-cart-header .flat-ordered .total .flat-left,
.nineteen-cart-header .flat-ordered .total .flat-right { float: none; }
.nineteen-cart-header .flat-ordered .total strong {
    font-family: var(--c-font);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--c-text-2);
}
.nineteen-cart-header .flat-ordered .total .flat-right {
    font-family: var(--c-font);
    font-size: 18px;
    font-weight: 700;
    color: var(--c-negro);
}

/* --- Botones VER CARRITO / FINALIZAR COMPRA: separados y a marca ---
   Vence .flat-ordered .event a (verde, ancho fijo 120px) del theme. */
.nineteen-cart-header .flat-ordered .event {
    display: flex;
    gap: 10px;
    margin-top: 0;
    padding: 0 16px 16px;
}
.nineteen-cart-header .flat-ordered .event a {
    flex: 1 1 0;
    width: auto;
    margin: 0;
    padding: 10px 12px;
    line-height: 1.4;
    border: 1px solid transparent;
    border-radius: var(--c-radius);
    font-family: var(--c-font);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    transition: background var(--c-transition), color var(--c-transition), border-color var(--c-transition);
}
/* Secundario (outline negro → relleno negro en hover). */
.nineteen-cart-header .flat-ordered .event a.cart-event__ver {
    color: var(--c-primary);
    background: transparent;
    border-color: var(--c-primary);
}
.nineteen-cart-header .flat-ordered .event a.cart-event__ver:hover,
.nineteen-cart-header .flat-ordered .event a.cart-event__ver:focus {
    color: var(--c-blanco);
    background: var(--c-primary);
    border-color: var(--c-primary);
}
/* Primario (negro → naranja en hover, texto negro sobre naranja). */
.nineteen-cart-header .flat-ordered .event a.cart-event__checkout {
    color: var(--c-blanco);
    background: var(--c-primary);
    border-color: var(--c-primary);
}
.nineteen-cart-header .flat-ordered .event a.cart-event__checkout:hover,
.nineteen-cart-header .flat-ordered .event a.cart-event__checkout:focus {
    color: var(--c-on-accent);
    background: var(--c-accent);
    border-color: var(--c-accent);
}

/* [2026-07-29] P9 Fase 1 · Como drawer ya no se recentra el popover; entra desde la derecha en todas
   las anchuras y el max-width:calc(100vw - 40px) evita que se salga en mobile. Responsive anterior
   (recentrado del popover) — no se borra (Regla 4):
@media (max-width: 991px) {
    .nineteen-cart-header .flat-ordered { right: 50%; margin-right: -160px; }
}
*/

/* ============================================================
   P9 Fase 1 · Drawer del mini-carrito — piezas del deslizante
   (footer sticky abajo, backdrop, scroll-lock del body y
   ocultar el botón flotante de WhatsApp mientras está abierto).
   ============================================================ */

/* El subtotal y los botones no encogen: quedan fijos al fondo mientras la lista (ul) scrollea. */
.nineteen-cart-header .flat-ordered .total,
.nineteen-cart-header .flat-ordered .event {
    flex-shrink: 0;
}

/* Fondo oscuro del drawer (mismo criterio que #filtros-backdrop de P25). */
.cart-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1048;                    /* justo bajo el panel (1049) y bajo el modal BS5 (1050) */
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease;
}
body.carrito-abierto .cart-backdrop {
    opacity: 1;
    visibility: visible;
}
/* Scroll-lock del body mientras el drawer está abierto (la posición la fija/restaura el JS). */
body.carrito-abierto {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}
/* El botón flotante de WhatsApp (z-index alto) no debe quedar sobre el drawer. */
body.carrito-abierto .whatsapp-btn,
body.carrito-abierto .whatsapp-float__tooltip {
    display: none;
}

/* ============================================================
   [2026-07-29] Carrito (/cart): acotar el thumbnail del producto para que las filas
   no se expandan. El alto gigante venía de un style="width:200px" inline (removido del
   blade), que dejaba el alto natural del placeholder (~280px). Scope .nineteen #cart-table
   (convención del proyecto, ver nineteen.css:56-86); casper.css carga último → gana por
   orden, sin !important. No toca .numbers-row/.button_inc (stepper) ni .nineteen-cart-header.
   ============================================================ */
.nineteen #cart-table tbody td {
    vertical-align: middle;
}
.nineteen #cart-table tbody td img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border: 1px solid var(--c-border-2);
    border-radius: var(--c-radius);
}

/* ============================================================
   [2026-07-29] Checkout · restyle de marca (patrón P18). Reusa .c-form-card /
   .c-form-section / .c-field / .c-btn. CSS propio SOLO para: mapa, opciones (radio) de
   pago/envío y el resumen de compra. Todo scopeado a .checkout-page.
   ============================================================ */
/* Neutraliza el azul del template en radios/checkbox → acento naranja. */
.checkout-page input[type="radio"],
.checkout-page input[type="checkbox"] {
    accent-color: var(--c-naranja);
}
/* Mapa de ubicación (antes en <style> inline de la vista). */
.checkout-page #checkout-map {
    height: 220px;
    width: 100%;
    border: 1px solid var(--c-input-border);
    border-radius: var(--c-radius);
}
/* Opción seleccionable (método de pago / tipo de envío). */
.checkout-page .checkout-option {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 12px 14px;
    font-family: var(--c-font);
    font-size: clamp(13px, 1.7vw, 15px);
    color: var(--c-text);
    background: var(--c-blanco);
    border: 1px solid var(--c-input-border);
    border-radius: var(--c-radius);
    cursor: pointer;
    transition: border-color var(--c-transition), background var(--c-transition);
}
.checkout-page .checkout-option:hover {
    border-color: var(--c-naranja);
    background: var(--c-accent-tint);
}
.checkout-page .checkout-option input {
    margin: 0;
    flex: 0 0 auto;
}
.checkout-page .checkout-option__label {
    line-height: 1.3;
}
/* [2026-09-24] Aclaración bajo el nombre del método y opción bloqueada (pago "solo retiro"). */
.checkout-page .checkout-option__hint {
    display: block;
    font-size: 12px;
    color: var(--c-text-2);
}
.checkout-page .checkout-option.is-disabled {
    opacity: .5;
    cursor: not-allowed;
}
.checkout-page .checkout-option.is-disabled:hover {
    border-color: var(--c-input-border);
    background: var(--c-blanco);
}
/* El atributo hidden debe ganarle al display de las columnas de Bootstrap. */
.checkout-page .checkout-entrega[hidden],
.checkout-page .checkout-option__hint[hidden] {
    display: none;
}
/* Resumen de la compra. */
.checkout-page .checkout-summary__items {
    margin-bottom: 14px;
}
.checkout-page .checkout-summary__item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-family: var(--c-font);
    font-size: clamp(12px, 1.6vw, 14px);
    color: var(--c-text-2);
    border-bottom: 1px solid var(--c-border-2);
}
.checkout-page .checkout-summary__item-name {
    padding-right: 8px;
}
.checkout-page .checkout-summary__item-price {
    white-space: nowrap;
    font-weight: 600;
    color: var(--c-text);
}
.checkout-page .checkout-summary__row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-family: var(--c-font);
    font-size: clamp(13px, 1.7vw, 15px);
    color: var(--c-text);
}
.checkout-page .checkout-summary__row--total {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 2px solid var(--c-border-2);
    font-weight: 700;
    font-size: clamp(15px, 2vw, 18px);
    color: var(--c-negro);
}
.checkout-page .checkout-summary__row--total .checkout-summary__amount {
    color: var(--c-naranja);
}
/* Botón de confirmación a ancho completo. */
.checkout-page .checkout-submit {
    display: block;
    width: 100%;
    margin-top: 6px;
}
@media (max-width: 767.98px) {
    .checkout-page .c-form-card {
        margin-bottom: 18px;
    }
}

/* ==========================================================================
   [2026-07-29] P24 · Paginación
   Markup REAL (Laravel 5.7 → vista pagination = bootstrap-4, NO BS3):
     <ul class="pagination"> <li class="page-item"><a class="page-link">1</a></li>
       <li class="page-item active"><span class="page-link">2</span></li>
       <li class="page-item disabled"><span class="page-link">…</span></li> ... </ul>
   El azul lo mete Bootstrap 5.1.3 (CDN): .page-link{color:#0d6efd} (0,1,0) y
   .page-item.active .page-link{background:#0d6efd} (0,3,0). Vencemos SIN !important
   prefijando con .pagination (suma una clase): base gana por especificidad (0,2,0>0,1,0);
   activo/disabled ganan (0,4,0>0,3,0); el reset de margen negativo y radios de primero/último
   de BS5 (0,3,0) se igualan a (0,3,0) y ganan por orden (casper.css carga después).
   Vistas: productos/index, productos/promotions, publicaciones/index,
   publicaciones/publicacion-categoria, orders/index.
   ========================================================================== */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 24px 0 8px;
    padding: 0;
    list-style: none;
    font-family: var(--c-font);
}
/* Celda base: aplica a <a> navegable y al <span> de activo/disabled (0,2,0 > BS5 0,1,0) */
.pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--c-border);
    background: var(--c-blanco);
    color: var(--c-text);
    font-family: var(--c-font);
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    transition: background var(--c-transition), color var(--c-transition), border-color var(--c-transition);
}
/* Anula el margin-left:-1px y los radios de primero/último de BS5 (0,3,0); radio propio en todas. */
.pagination .page-item .page-link {
    margin: 0;
    border-radius: var(--c-radius);
}
/* Página actual: <li class="page-item active"><span> — negro de marca (0,4,0 > BS5 0,3,0) */
.pagination .page-item.active .page-link {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-blanco);
    cursor: default;
}
/* Prev/Next inactivo y separador "…": <li class="page-item disabled"><span> — atenuado (0,4,0 > BS5 0,3,0) */
.pagination .page-item.disabled .page-link {
    color: var(--c-muted-fg);
    background: var(--c-muted-bg);
    border-color: var(--c-border);
    cursor: not-allowed;
}
/* Hover/foco SOLO en celdas navegables (ni active ni disabled) — tinte naranja */
.pagination .page-item:not(.active):not(.disabled) .page-link:hover,
.pagination .page-item:not(.active):not(.disabled) .page-link:focus {
    background: var(--c-accent-tint);
    border-color: var(--c-accent);
    color: var(--c-text);
    text-decoration: none;
}
.pagination .page-item:not(.active):not(.disabled) .page-link:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}

/* ============================================================
   [2026-07-29] Checkout · STEPPER de 3 pasos (Resumen · Pago · Envío).
   Un panel visible por vez; indicador arriba + botones Atrás/Siguiente.
   Reusa tokens y .c-btn / .c-btn--outline. Todo scopeado a .checkout-page.
   ============================================================ */
/* Panels: solo uno visible; el resto oculto por atributo [hidden]. */
.checkout-page .checkout-step-panel[hidden] {
    display: none;
}
/* --- Indicador de pasos (1 Resumen · 2 Pago · 3 Envío) --- */
.checkout-page .checkout-steps {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    list-style: none;
    margin: 0 auto 22px;
    padding: 0;
    max-width: 560px;
}
.checkout-page .checkout-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1 1 0;
    position: relative;
    font-family: var(--c-font);
    text-align: center;
}
/* Línea conectora entre pasos (a la izquierda de cada paso, menos el primero). */
.checkout-page .checkout-step::before {
    content: "";
    position: absolute;
    top: 16px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: var(--c-border);
}
.checkout-page .checkout-step:first-child::before {
    display: none;
}
.checkout-page .checkout-step.is-active::before,
.checkout-page .checkout-step.is-done::before {
    background: var(--c-naranja);
}
/* Círculo con el número del paso. */
.checkout-page .checkout-step__num {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--c-radius-pill);
    background: var(--c-blanco);
    border: 2px solid var(--c-border);
    color: var(--c-text-2);
    font-weight: 600;
    font-size: 15px;
    transition: background var(--c-transition), border-color var(--c-transition), color var(--c-transition);
}
.checkout-page .checkout-step.is-active .checkout-step__num {
    background: var(--c-naranja);
    border-color: var(--c-naranja);
    color: var(--c-on-accent);
}
.checkout-page .checkout-step.is-done .checkout-step__num {
    background: var(--c-accent-tint);
    border-color: var(--c-naranja);
    color: var(--c-naranja);
}
/* Etiqueta del paso. */
.checkout-page .checkout-step__label {
    font-size: clamp(12px, 1.6vw, 14px);
    color: var(--c-text-2);
    line-height: 1.2;
}
.checkout-page .checkout-step.is-active .checkout-step__label {
    color: var(--c-text);
    font-weight: 600;
}
/* --- Botonera Atrás / Siguiente dentro de cada panel --- */
.checkout-page .checkout-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
}
/* Paso 1: solo "Siguiente", alineado a la derecha. */
.checkout-page .checkout-nav--end {
    justify-content: flex-end;
}
/* En el stepper el confirmar convive con "Atrás"; deja el ancho completo (0,3,0 vence a .checkout-submit 0,2,0). */
.checkout-page .checkout-nav .checkout-submit {
    display: inline-block;
    width: auto;
    margin-top: 0;
}
/* Mobile: los botones se apilan y ocupan el ancho completo. */
@media (max-width: 575.98px) {
    .checkout-page .checkout-nav {
        flex-direction: column-reverse;
    }
    .checkout-page .checkout-nav .c-btn {
        width: 100%;
    }
    .checkout-page .checkout-step__label {
        font-size: 11px;
    }
}

/* [2026-07-29] Salida al catálogo fuera del card (pasos 2 y 3). En el paso 1 va como
   .c-btn--outline dentro del .checkout-nav (donde iría "Atrás"). */
.checkout-page .checkout-keep-shopping {
    margin: 14px 0 0;
    text-align: center;
    font-family: var(--c-font);
    font-size: 14px;
}
.checkout-page .checkout-keep-shopping a {
    color: var(--c-text-2);
    text-decoration: none;
    transition: color var(--c-transition);
}
.checkout-page .checkout-keep-shopping a:hover,
.checkout-page .checkout-keep-shopping a:focus {
    color: var(--c-naranja);
    text-decoration: underline;
}

/* [2026-07-29] Botón "ir arriba": a marca (era verde #92c841 del template) y APILADO sobre el
   WhatsApp flotante + su tooltip (que llega a ~bottom:142) para que no colisionen al scrollear. */
.go-top { background-color: var(--c-negro); border-radius: 50%; }
.go-top:hover { background-color: var(--c-naranja); }
/* right:40 = mismo centro vertical que el WhatsApp (que tiene right:30 + margin:5 → centro a 60px del borde). */
.go-top.show { bottom: 150px; right: 40px; }

/* ============================================================
   [2026-07-29] Footer · jerarquía título↔opciones, iconos y hover.
   Se PREFIJA con `.nineteen footer` (igual raíz que el theme) + clases extra para
   VENCER el círculo del ícono (nineteen.css:181 `.nineteen footer .widget ul li:before`,
   30px #373739) que solapaba el texto. Sin !important.
   ============================================================ */
.flat-footer-top { padding: 50px 0; }
/* Título del widget: destacado + acento naranja, claramente separado de los links. */
.flat-footer-top .widget > h2 {
    font-family: var(--c-font);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    margin: 0 0 18px;
    padding-bottom: 12px;
    position: relative;
}
.flat-footer-top .widget > h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 2px;
    background: var(--c-naranja);
}
/* Spacing parejo de los items (el theme ponía padding-left:40px por el círculo). */
.nineteen footer .widget ul li { padding-left: 22px; margin-bottom: 2px; }
/* Reset del CÍRCULO del theme en todos los íconos del footer + acento naranja. */
.nineteen footer .widget.widget_services ul li::before,
.nineteen footer .widget.widget_my_account ul li::before,
.nineteen footer .widget_about_us .flat-infomation li::before {
    background: none;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    border-radius: 0;
    left: 0;
    top: 9px;
    color: var(--c-naranja);
}
/* Links: chevron limpio (antes círculo-flecha \f0a9). */
.nineteen footer .widget.widget_services ul li::before,
.nineteen footer .widget.widget_my_account ul li::before {
    content: "\f105";
    font-family: FontAwesome;
    font-size: 14px;
    transition: transform var(--c-transition);
}
.nineteen footer .widget_services a,
.nineteen footer .widget.widget_my_account a {
    display: inline-block;
    transition: color var(--c-transition), transform var(--c-transition);
}
/* Hover: el link y su chevron se desplazan levemente + color de marca. */
.nineteen footer .widget.widget_services ul li:hover::before,
.nineteen footer .widget.widget_my_account ul li:hover::before { transform: translateX(3px); }
.nineteen footer .widget_services a:hover,
.nineteen footer .widget.widget_my_account a:hover { color: var(--c-naranja); transform: translateX(3px); }
/* CONTÁCTENOS: conserva el glifo de tipo (ubicación/email/teléfono); solo resetea el círculo
   (arriba) y ajusta spacing + hover. */
.nineteen footer .widget_about_us .flat-infomation li { padding-left: 24px; margin-bottom: 8px; }
.nineteen footer .widget_about_us .flat-infomation a { transition: color var(--c-transition); }
.nineteen footer .widget_about_us .flat-infomation a:hover { color: var(--c-naranja); }

/* [2026-07-29] Badge flotante PROMO/NUEVO sobre la card de producto (esquinas superiores de la imagen).
   Antes se renderizaban como bloque al fondo de la card; ahora flotan sobre la imagen como indicativo. */
.products-grid .item-inner .pimg { position: relative; }
.products-grid .item-inner .c-card-badge {
    position: absolute;
    top: 10px;
    z-index: 3;
    padding: 4px 10px;
    border-radius: var(--c-radius);
    font-family: var(--c-font);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .05em;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
.products-grid .item-inner .c-card-badge--promo { left: 10px; background: var(--c-naranja); color: var(--c-blanco); }
.products-grid .item-inner .c-card-badge--new { right: 10px; background: var(--c-negro); color: var(--c-blanco); }

/* [2026-07-29] P14 · Empty-state de páginas legales/genéricas (generic-info) sin contenido. */
.generic-info-empty {
    padding: 3rem 1rem;
    color: var(--c-text-2);
    font-family: var(--c-font);
    font-size: 1.05rem;
}

/* ============================================================
   [2026-07-29] P7/Blog · Sistema visual del blog (marca Casper).
   Consolidado de las 3 vistas (index, categoría, detalle). Scope .blog-page.
   Componentes (card/sidebar/widget/cat-list/latest) canónicos y consistentes.
   El layout se scopea a cada wrapper para no chocar: index .blog-layout (grid),
   categoría .blog-page__layout (flex), detalle Bootstrap row/col.
   ============================================================ */
.blog-page {
    font-family: var(--c-font);
    color: var(--c-text);
    padding: 40px 0 60px;
}

/* --- Breadcrumb propio (categoría) --- */
.blog-page .blog-breadcrumb { font-size: 13px; color: var(--c-text-2); margin-bottom: 14px; }
.blog-page .blog-breadcrumb a { color: var(--c-text-2); }
.blog-page .blog-breadcrumb a:hover { color: var(--c-naranja); }
.blog-page .blog-breadcrumb__sep { margin: 0 8px; color: var(--c-border); }
.blog-page .blog-breadcrumb__current { color: var(--c-text); font-weight: 600; }

/* --- Encabezado de página (categoría) --- */
.blog-page .blog-page__header { margin-bottom: 24px; padding-bottom: 14px; border-bottom: 2px solid var(--c-naranja); }
.blog-page .blog-page__title { font-family: var(--c-font); font-size: 26px; font-weight: 700; color: var(--c-negro); margin: 0; }

/* --- Layout index (grid: sidebar 280 | artículos) --- */
@media (min-width: 992px) {
    .blog-page .blog-layout { display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: start; }
    .blog-page .blog-layout .blog-sidebar { grid-column: 1; grid-row: 1; }
    .blog-page .blog-layout .blog-articles { grid-column: 2; grid-row: 1; }
}
/* --- Layout categoría (flex) --- */
.blog-page .blog-page__layout { display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-start; }
.blog-page .blog-page__main { flex: 1 1 0; min-width: 0; }
@media (min-width: 992px) {
    .blog-page .blog-page__layout .blog-sidebar { flex: 0 0 300px; max-width: 300px; }
}

/* --- Grid de cards --- */
.blog-page .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 26px; }

/* --- Card de publicación (canónica: index + categoría) --- */
.blog-page .blog-card { display: flex; flex-direction: column; background: var(--c-blanco); border: 1px solid var(--c-border-2); border-radius: var(--c-radius-card); box-shadow: var(--c-shadow-card); overflow: hidden; transition: box-shadow var(--c-transition), transform var(--c-transition); }
.blog-page .blog-card:hover { box-shadow: var(--c-shadow-hover); transform: translateY(-2px); }
.blog-page .blog-card__media { display: block; overflow: hidden; background: var(--c-muted-bg); aspect-ratio: 16 / 10; }
.blog-page .blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--c-transition); }
.blog-page .blog-card:hover .blog-card__media img { transform: scale(1.04); }
.blog-page .blog-card__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 10px; padding: 18px 20px 22px; text-align: center; }
.blog-page .blog-card__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0; font-size: 12.5px; color: var(--c-text-2); text-transform: uppercase; letter-spacing: .04em; }
.blog-page .blog-card__sep { color: var(--c-border); }
.blog-page .blog-card__cat { color: var(--c-naranja); font-weight: 600; }
.blog-page .blog-card__title { margin: 0; font-size: 18px; line-height: 1.35; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.blog-page .blog-card__title a { color: var(--c-negro); transition: color var(--c-transition); }
.blog-page .blog-card__title a:hover { color: var(--c-naranja); }
.blog-page .blog-card__excerpt { margin: 0; font-size: 14px; line-height: 1.6; color: var(--c-text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-page .blog-card__cta, .blog-page .blog-card__body .c-btn { align-self: flex-start; }
/* Pie de la card: separa la acción del resto con una línea suave (jerarquía consistente con la card de producto). */
.blog-page .blog-card__foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--c-border-2); text-align: center; }

/* --- Estado vacío --- */
.blog-page .blog-empty { padding: 48px 20px; text-align: center; color: var(--c-text-2); background: var(--c-muted-bg); border: 1px solid var(--c-border-2); border-radius: var(--c-radius-card); font-size: 15px; }
.blog-page .blog-empty__title { font-family: var(--c-font); font-size: 18px; font-weight: 600; color: var(--c-negro); margin: 0 0 6px; }
.blog-page .blog-empty__text { font-size: 14px; color: var(--c-text-2); margin: 0 0 18px; }

/* --- Paginación (contenedor; .page-item/.page-link ya a marca en P24) --- */
.blog-page .blog-pagination { margin-top: 34px; display: flex; justify-content: center; }

/* --- Sidebar (común a las 3 vistas) --- */
.blog-page .blog-sidebar { margin-top: 40px; }
@media (min-width: 992px) { .blog-page .blog-sidebar { margin-top: 0; } }
.blog-page .blog-widget { background: var(--c-blanco); border: 1px solid var(--c-border-2); border-radius: var(--c-radius-card); box-shadow: var(--c-shadow-card); padding: 20px 22px; margin-bottom: 24px; }
.blog-page .blog-widget__title { font-family: var(--c-font); font-size: 16px; font-weight: 600; color: var(--c-negro); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--c-naranja); }
/* Categorías: chevron naranja, sin celeste */
.blog-page .blog-cat-list { list-style: none; margin: 0; padding: 0; }
.blog-page .blog-cat-list li + li { border-top: 1px solid var(--c-border-2); }
.blog-page .blog-cat-list a { display: block; position: relative; padding: 9px 0 9px 16px; color: var(--c-text); font-size: 14px; transition: color var(--c-transition), padding var(--c-transition); }
.blog-page .blog-cat-list a::before { content: "\203A"; position: absolute; left: 0; color: var(--c-naranja); font-weight: 700; }
.blog-page .blog-cat-list a:hover { color: var(--c-naranja); padding-left: 20px; }
/* Últimas publicaciones: soporta .blog-latest__thumb y .blog-latest__item img */
.blog-page .blog-latest { list-style: none; margin: 0; padding: 0; }
.blog-page .blog-latest__item { padding: 12px 0; }
.blog-page .blog-latest__item + .blog-latest__item { border-top: 1px solid var(--c-border-2); }
.blog-page .blog-latest__item:first-child { padding-top: 0; }
.blog-page .blog-latest__item:last-child { padding-bottom: 0; }
.blog-page .blog-latest__item a { display: flex; align-items: center; gap: 12px; }
.blog-page .blog-latest__thumb, .blog-page .blog-latest__item img { width: 58px; height: 58px; flex: 0 0 58px; object-fit: cover; border-radius: var(--c-radius); background: var(--c-muted-bg); }
.blog-page .blog-latest__title { font-size: 13.5px; line-height: 1.4; color: var(--c-text); transition: color var(--c-transition); }
.blog-page .blog-latest__item a:hover .blog-latest__title { color: var(--c-naranja); }

/* ============================================================
   Detalle del artículo (única vista; sin conflicto con lo anterior)
   ============================================================ */
.blog-page .blog-article { background: var(--c-blanco); border: 1px solid var(--c-border-2); border-radius: var(--c-radius-card); box-shadow: var(--c-shadow-card); overflow: hidden; margin-bottom: 32px; }
.blog-page .blog-article__header { padding: clamp(20px, 4vw, 32px) clamp(20px, 4vw, 40px) 0; }
.blog-page .blog-article__title { font-family: var(--c-font); font-weight: 700; color: var(--c-negro); font-size: clamp(24px, 4vw, 36px); line-height: 1.2; margin: 0 0 16px; }
.blog-page .blog-article__meta { list-style: none; margin: 0; padding: 0 0 20px; display: flex; flex-wrap: wrap; gap: 8px 20px; border-bottom: 1px solid var(--c-border-2); }
.blog-page .blog-article__meta li { display: inline-flex; align-items: center; gap: 6px; font-size: clamp(12px, 1.7vw, 13px); color: var(--c-text-2); }
.blog-page .blog-article__meta i { color: var(--c-naranja); }
.blog-page .blog-article__meta a { color: var(--c-text-2); transition: color var(--c-transition); }
.blog-page .blog-article__meta a:hover { color: var(--c-naranja); }
/* Imagen destacada: acepta cualquier proporción sin desbordar ni dominar.
   Ancho completo; alto natural pero capado a 480px (una foto muy alta se recorta
   por el centro con object-fit:cover, nunca se sale de su caja). */
.blog-page .blog-article__media { margin: 0; background: var(--c-muted-bg); overflow: hidden; }
.blog-page .blog-article__media img { display: block; width: 100%; height: auto; max-height: 480px; object-fit: cover; object-position: center; }
.blog-page .blog-article__body { max-width: 72ch; margin: 0 auto; padding: clamp(24px, 4vw, 40px); font-size: clamp(15px, 2vw, 17px); line-height: 1.75; color: var(--c-text); }
.blog-page .blog-article__body > *:first-child { margin-top: 0; }
.blog-page .blog-article__body > *:last-child { margin-bottom: 0; }
.blog-page .blog-article__body p { margin: 0 0 1.25em; }
.blog-page .blog-article__body h1, .blog-page .blog-article__body h2, .blog-page .blog-article__body h3, .blog-page .blog-article__body h4, .blog-page .blog-article__body h5, .blog-page .blog-article__body h6 { font-family: var(--c-font); font-weight: 600; color: var(--c-negro); line-height: 1.3; margin: 1.6em 0 .6em; }
.blog-page .blog-article__body h2 { font-size: clamp(20px, 3vw, 26px); }
.blog-page .blog-article__body h3 { font-size: clamp(18px, 2.6vw, 22px); }
.blog-page .blog-article__body h4 { font-size: clamp(16px, 2.2vw, 19px); }
.blog-page .blog-article__body a { color: var(--c-naranja); text-decoration: underline; word-break: break-word; }
.blog-page .blog-article__body a:hover { color: var(--c-negro); }
.blog-page .blog-article__body img { max-width: 100%; height: auto; border-radius: var(--c-radius); margin: 1em 0; }
.blog-page .blog-article__body ul, .blog-page .blog-article__body ol { margin: 0 0 1.25em; padding-left: 1.4em; }
.blog-page .blog-article__body li { margin-bottom: .4em; }
.blog-page .blog-article__body blockquote { margin: 1.5em 0; padding: 4px 20px; border-left: 4px solid var(--c-naranja); background: var(--c-accent-tint); color: var(--c-text-2); font-style: italic; border-radius: 0 var(--c-radius) var(--c-radius) 0; }
.blog-page .blog-article__body table { width: 100%; max-width: 100%; border-collapse: collapse; margin: 1.5em 0; }
.blog-page .blog-article__body th, .blog-page .blog-article__body td { border: 1px solid var(--c-border); padding: 8px 12px; text-align: left; }
/* Comentarios */
.blog-page .blog-comments { background: var(--c-blanco); border: 1px solid var(--c-border-2); border-radius: var(--c-radius-card); box-shadow: var(--c-shadow-card); padding: clamp(20px, 4vw, 32px); }
.blog-page .blog-comments__title { font-family: var(--c-font); font-weight: 600; font-size: clamp(18px, 2.6vw, 22px); color: var(--c-negro); margin: 0 0 20px; padding-bottom: 12px; border-bottom: 2px solid var(--c-negro); }
.blog-page .blog-comments__list { list-style: none; margin: 0 0 28px; padding: 0; }
.blog-page .blog-comment { padding: 16px 0; border-bottom: 1px solid var(--c-border-2); }
.blog-page .blog-comment:last-child { border-bottom: 0; }
.blog-page .blog-comment__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 6px; }
.blog-page .blog-comment__author { font-style: normal; font-weight: 600; color: var(--c-negro); font-size: clamp(14px, 2vw, 15px); }
.blog-page .blog-comment__date { font-size: 12px; color: var(--c-text-2); }
.blog-page .blog-comment__text { margin: 0; font-size: clamp(14px, 2vw, 15px); line-height: 1.65; color: var(--c-text); }
.blog-page .blog-comments__empty { margin: 0 0 28px; padding: 24px; text-align: center; background: var(--c-muted-bg); border: 1px dashed var(--c-muted-border); border-radius: var(--c-radius-card); color: var(--c-muted-fg); font-size: clamp(14px, 2vw, 15px); }
/* Form de comentar (reusa .c-btn) */
.blog-page .blog-comment-form { padding-top: 8px; border-top: 1px solid var(--c-border-2); }
.blog-page .blog-comment-form__title { font-family: var(--c-font); font-weight: 600; font-size: clamp(18px, 2.6vw, 20px); color: var(--c-negro); margin: 20px 0 16px; }
.blog-page .blog-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.blog-page .comment-form .form-control { font-family: var(--c-font); font-size: clamp(13px, 1.7vw, 15px); width: 100%; border: 1px solid var(--c-input-border); border-radius: var(--c-radius); padding: clamp(9px, 2vw, 12px) 14px; background: var(--c-blanco); margin-bottom: 16px; }
.blog-page .comment-form .form-control:focus { border-color: var(--c-naranja); box-shadow: 0 0 0 .2rem var(--c-accent-ring); outline: none; }
.blog-page .comment-form textarea.form-control { resize: vertical; min-height: 120px; }
/* Sidebar sticky solo en detalle (BS col) */
@media (min-width: 992px) { .blog-page .row .blog-sidebar { position: sticky; top: 20px; } }

/* --- Responsive blog --- */
@media (max-width: 575px) {
    .blog-page .blog-grid { grid-template-columns: 1fr; }
    .blog-page .blog-page__title { font-size: 22px; }
    .blog-page .blog-form-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   [2026-07-29] Toolbar del listado (catálogo + promociones):
   contador a la izquierda, control de orden a la derecha.
   Scope .flat-top-bar-shop.c-toolbar (doble clase para ganar al theme).
   ============================================================ */
.flat-top-bar-shop.c-toolbar { margin-bottom: 24px; padding-bottom: 14px; }
.flat-top-bar-shop.c-toolbar:first-child:before { bottom: 0; background-color: var(--c-border); }
.flat-top-bar-shop.c-toolbar .flat-filter { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; width: 100%; float: none; }
.flat-top-bar-shop.c-toolbar .flat-filter > div { display: block; float: none; margin: 0; }
.flat-top-bar-shop.c-toolbar .flat-showpost { font-family: var(--c-font); font-size: 14px; line-height: 1.4; color: var(--c-text-2); }
.flat-top-bar-shop.c-toolbar .flat-sortby { display: flex; align-items: center; gap: 10px; }
.flat-top-bar-shop.c-toolbar .flat-sortby .c-toolbar__sort-label { font-family: var(--c-font); font-size: 14px; font-weight: 500; color: var(--c-text-2); white-space: nowrap; }
.flat-top-bar-shop.c-toolbar .flat-sortby .flat-blog-select { display: inline-block; position: relative; margin: 0; min-width: 150px; background: var(--c-blanco); border: 1px solid var(--c-border); border-radius: var(--c-radius); cursor: pointer; transition: border-color var(--c-transition); }
.flat-top-bar-shop.c-toolbar .flat-sortby .flat-blog-select:hover { border-color: var(--c-naranja); }
.flat-top-bar-shop.c-toolbar .flat-sortby .flat-blog-select:before { display: none; }
.flat-top-bar-shop.c-toolbar .flat-sortby .flat-blog-select > li { padding: 9px 38px 9px 14px; font-family: var(--c-font); font-size: 14px; line-height: 1.2; color: var(--c-text); white-space: nowrap; }
.flat-top-bar-shop.c-toolbar .flat-sortby .flat-blog-select > li > span { color: var(--c-text); }
.flat-top-bar-shop.c-toolbar .flat-sortby .flat-blog-select:after { content: '\f078'; font-family: "FontAwesome"; font-size: 10px; line-height: 1; position: absolute; top: 50%; right: 14px; transform: translateY(-50%); color: var(--c-text-2); pointer-events: none; transition: color var(--c-transition), transform var(--c-transition); }
.flat-top-bar-shop.c-toolbar .flat-sortby .flat-blog-select:hover:after { color: var(--c-naranja); transform: translateY(-50%) rotate(180deg); }
.flat-top-bar-shop.c-toolbar .flat-sortby .flat-blog-select ul { position: absolute; top: 100%; left: 0; right: 0; min-width: 100%; margin: 0; padding: 6px 0; background: var(--c-blanco); border: 1px solid var(--c-border); border-radius: var(--c-radius); box-shadow: var(--c-shadow-card); list-style: none; visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity var(--c-transition), transform var(--c-transition), visibility var(--c-transition); z-index: 20; }
.flat-top-bar-shop.c-toolbar .flat-sortby .flat-blog-select > li:hover ul { visibility: visible; opacity: 1; transform: translateY(0); width: auto; background: var(--c-blanco); }
.flat-top-bar-shop.c-toolbar .flat-sortby .flat-blog-select ul li { padding: 0; }
.flat-top-bar-shop.c-toolbar .flat-sortby .flat-blog-select ul li a { display: block; padding: 9px 16px; font-family: var(--c-font); font-size: 14px; color: var(--c-text); text-decoration: none; white-space: nowrap; transition: background var(--c-transition), color var(--c-transition); }
.flat-top-bar-shop.c-toolbar .flat-sortby .flat-blog-select ul li a:hover { background: var(--c-accent-tint); color: var(--c-naranja); }
.flat-top-bar-shop.c-toolbar .flat-sortby .flat-blog-select li li:hover { background: var(--c-accent-tint); color: var(--c-naranja); }
@media (max-width: 575px) {
    .flat-top-bar-shop.c-toolbar .flat-filter { flex-direction: column; align-items: flex-start; }
    .flat-top-bar-shop.c-toolbar .flat-sortby { width: 100%; }
    .flat-top-bar-shop.c-toolbar .flat-sortby .flat-blog-select { flex: 1; min-width: 0; }
}

/* ============================================================
   [2026-07-29] Card de producto · Jerarquía visual (imagen → nombre → precio → acciones).
   Scope .products-grid .item-inner (item.blade.php). Sobrescribe el theme (título/precio verde).
   ============================================================ */
.products-grid .item-inner .info-inner { padding: 0 14px 16px; }
.products-grid .item-inner .c-card-title { margin: 0 0 10px; min-height: 2.7em; font-family: var(--c-font); font-size: 15px; font-weight: 600; line-height: 1.35; } /* [2026-07-30] nombre 14→15px: es el identificador primario del listado */
.products-grid .item-inner .c-card-title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--c-negro); }
.products-grid .item-inner .c-card-title a:hover { color: var(--c-naranja); }
.products-grid .item-inner .item-price { margin: 0 0 14px; }
.products-grid .item-inner .price-box { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px; min-height: 26px; }
.products-grid .item-inner .price-box ins { margin: 0; text-decoration: none; }
/* [2026-07-30] Precio regular en NEGRO: el naranja reprobaba WCAG AA (contraste 3.2:1 a 17px)
   y el acento de marca se reserva para señalar oferta. El nombre recupera su rol de identificador. */
.products-grid .item-inner .price-box .new_price { font-family: var(--c-font); font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--c-negro); } /* [2026-07-30] precio 17→14px (tamaño original del theme: .price-box ins en style.css). El nombre (15px) recupera el rol de identificador primario; el precio mantiene énfasis por peso 700, no por tamaño */
/* Precio de OFERTA (el theme lo envuelve en <ins>): conserva el naranja como señal de rebaja,
   coherente con el badge PROMO. Mayor especificidad (elemento ins) → gana sin !important. */
.products-grid .item-inner .price-box ins .new_price { color: var(--c-naranja); }
.products-grid .item-inner .price-box del { margin: 0; }
.products-grid .item-inner .price-box .old_price { font-size: 13px; font-weight: 400; line-height: 1.2; color: var(--c-text-2); }
/* Acciones separadas del resto por una línea suave (jerarquía), sin espacio vacío reservado. */
.products-grid .item-inner .item-content > .m-container { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--c-border-2); font-size: inherit; line-height: normal; }
.products-grid .item-inner .producto-accion { min-height: 0; }

/* ============================================================
   [2026-09-22] Checkout manual + comprobante + botones POST del carrito.
   ============================================================ */

/* Botón submit que reemplaza al <a> de agregar al carrito en las cards. */
.producto-accion ul.add-to-links form.add-to-cart-form { display: inline-block; }
.producto-accion ul.add-to-links form.add-to-cart-form button.add_to_cart_button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    /* [2026-09-22] Reset de padding/margen: .nineteen button.add_to_cart_button
       trae padding 8px 24px que estiraba el botón y lo dejaba ovalado. */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 1px solid var(--c-negro);
    border-radius: 50%;
    color: var(--c-blanco);
    background: var(--c-negro);
    cursor: pointer;
    transition: background var(--c-transition), color var(--c-transition), border-color var(--c-transition);
}
.producto-accion ul.add-to-links form.add-to-cart-form button.add_to_cart_button:hover {
    color: var(--c-on-accent);
    background: var(--c-naranja);
    border-color: var(--c-naranja);
}

/* Botones de borrar del carrito como submit: conservan el look de link. */
.nineteen #cart-table .cart-delete-form { display: inline-block; }
.nineteen #cart-table .cart-delete-btn {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--c-text-2);
    transition: color var(--c-transition);
}
.nineteen #cart-table .cart-delete-btn:hover { color: var(--c-naranja); }

.nineteen-cart-header .cart-drawer-delete-form { display: inline-block; margin: 0; }
.nineteen-cart-header .cart-drawer-delete-form button.cart-drawer-item-remove {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* Botón "Usar mi ubicación actual" del mapa del checkout. */
.checkout-page .checkout-ubicacion-btn { margin-top: 10px; }

/* Comprobante post-compra (thank-you): espaciado + ticket en tablas. */
.comprobante-card { max-width: 760px; margin: 40px auto 48px; }
.comprobante-head { text-align: center; margin-bottom: 22px; }
.comprobante-title { font-family: var(--c-font); font-weight: 700; color: var(--c-negro); font-size: clamp(20px, 4vw, 26px); }
.comprobante-sub { color: var(--c-text-2); margin: 8px 0 0; font-family: var(--c-font); }

/* Ticket (misma estructura visual que el PDF). */
.comprobante-ticket {
    background: var(--c-blanco);
    border: 1px solid var(--c-border-2);
    border-radius: 12px;
    padding: 26px 24px;
    font-family: var(--c-font);
    color: var(--c-negro);
    font-size: 14px;
    line-height: 1.5;
}
.comprobante-ticket table { width: 100%; border-collapse: collapse; }

.ticket-head { text-align: center; padding-bottom: 14px; border-bottom: 2px solid var(--c-negro); }
.ticket-head img.ticket-logo { max-width: 150px; max-height: 70px; margin-bottom: 8px; object-fit: contain; }
.ticket-name { font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.ticket-head p { margin: 2px 0; font-size: 12px; color: var(--c-text-2); }

.ticket-title { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--c-text-2); margin: 16px 0 10px; }

.ticket-meta td { padding: 4px 0; font-size: 13px; vertical-align: top; }
.ticket-meta .l { color: var(--c-text-2); width: 45%; }
.ticket-meta .v { text-align: right; font-weight: 600; color: var(--c-negro); }

.ticket-items { margin-top: 12px; }
.ticket-items th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--c-text-2); padding: 9px 0 7px; border-top: 1px dashed var(--c-border); border-bottom: 1px solid var(--c-border-2); }
.ticket-items th.c, .ticket-items td.c { text-align: center; width: 48px; }
.ticket-items th.r, .ticket-items td.r { text-align: right; width: 110px; white-space: nowrap; }
.ticket-items td { padding: 9px 0; font-size: 14px; border-bottom: 1px solid var(--c-border-2); vertical-align: top; }
.ticket-items .pname { font-weight: 600; }

.ticket-tot { margin-top: 8px; }
.ticket-tot td { padding: 5px 0; font-size: 14px; }
.ticket-tot .l { text-align: right; color: var(--c-text-2); padding-right: 14px; width: 70%; }
.ticket-tot .v { text-align: right; width: 30%; white-space: nowrap; }
.ticket-tot .grand .l, .ticket-tot .grand .v { font-size: 16.5px; font-weight: 700; color: var(--c-negro); border-top: 2px solid var(--c-negro); padding-top: 9px; }

.ticket-instrucciones {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--c-warn-bg);
    border: 1px solid var(--c-warn-border);
    border-radius: var(--c-radius);
    font-size: 13px;
}
.ticket-instrucciones p { margin: 4px 0 0; }

.ticket-seal { text-align: center; margin-top: 14px; font-size: 12px; color: #8a6d1a; background: var(--c-warn-bg); border: 1px solid var(--c-warn-border); border-radius: 8px; padding: 8px 12px; }
.ticket-thanks { text-align: center; font-size: 12px; color: var(--c-text-2); margin-top: 8px; }

.comprobante-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.comprobante-actions .c-btn { flex: 1 1 auto; }
.comprobante-wa-icon { color: var(--c-wa); }

/* Botón "Descargar comprobante" en el detalle de pedido del front. */
.comprobante-download-link { margin-top: 10px; display: inline-block; }

/* ============================================================
   [2026-09-22] Panel del cliente (tabs superiores, pedidos, cuenta, puntos).
   ============================================================ */
.panel-cliente-head { background: var(--c-blanco); border: 1px solid var(--c-border-2); border-radius: 12px; padding: 20px 22px 0; margin-bottom: 18px; }
.panel-cliente-head__top h1 { font-family: var(--c-font); font-weight: 700; color: var(--c-negro); font-size: clamp(20px, 3.5vw, 26px); margin-bottom: 4px; }
.panel-cliente-head__top p { color: var(--c-text-2); margin: 0; font-family: var(--c-font); }

.panel-cliente-tabs { display: flex; align-items: center; gap: 6px; list-style: none; margin: 18px 0 0; padding: 0; border-bottom: 1px solid var(--c-border-2); flex-wrap: wrap; }
.panel-cliente-tabs li { margin: 0; }
.panel-tabs-spacer { flex: 1 1 auto; }
.panel-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 16px; border: 0; background: transparent; cursor: pointer;
    font-family: var(--c-font); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
    color: var(--c-text-2); text-decoration: none;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color var(--c-transition), border-color var(--c-transition);
}
.panel-tab:hover { color: var(--c-negro); }
.panel-tab.is-active { color: var(--c-naranja); border-bottom-color: var(--c-naranja); }
.panel-tab--logout { color: var(--c-negro); }
.panel-tab--logout:hover { color: var(--c-naranja); }
.panel-logout-form { margin: 0; }

.panel-section-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.panel-section-head h2 { font-family: var(--c-font); font-weight: 700; color: var(--c-negro); font-size: 18px; margin: 0; }
.panel-filter-form { min-width: 200px; }

.panel-pedido-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--c-border-2); flex-wrap: wrap; }
.panel-pedido-row:last-of-type { border-bottom: 0; }
.panel-pedido-row__thumbs { display: flex; gap: 6px; }
.panel-pedido-row__thumbs img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid var(--c-border-2); }
.panel-pedido-row__info { flex: 1 1 200px; min-width: 180px; }
.panel-pedido-numero { font-family: var(--c-font); font-weight: 700; color: var(--c-negro); }
.panel-pedido-meta { margin: 2px 0 0; color: var(--c-text-2); font-size: 13px; font-family: var(--c-font); }
.panel-pedido-row__total { font-family: var(--c-font); font-weight: 700; color: var(--c-negro); white-space: nowrap; }
.panel-pedido-row__acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.panel-btn-sm { padding: 8px 14px; font-size: 12px; }
.panel-wa-icon { color: var(--c-wa); }

.panel-timeline { display: flex; list-style: none; margin: 18px 0; padding: 0; gap: 8px; flex-wrap: wrap; }
.panel-timeline__step { display: flex; align-items: center; gap: 8px; color: var(--c-text-2); font-family: var(--c-font); font-size: 13px; }
.panel-timeline__step + .panel-timeline__step { margin-left: 12px; }
.panel-timeline__dot { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--c-border-2); background: var(--c-blanco); font-size: 12px; }
.panel-timeline__step.is-done { color: var(--c-negro); }
.panel-timeline__step.is-done .panel-timeline__dot { background: var(--c-negro); border-color: var(--c-negro); color: var(--c-blanco); }

.panel-info-box { border: 1px solid var(--c-border-2); border-radius: 10px; padding: 14px 16px; height: 100%; font-family: var(--c-font); font-size: 14px; }
.panel-info-box h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--c-text-2); margin: 0 0 8px; }
.panel-info-box p { margin: 4px 0; }

.panel-table th { border-top: 0; color: var(--c-text-2); font-size: 12px; text-transform: uppercase; }
.panel-total-label { font-family: var(--c-font); font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: var(--c-text-2); }
.panel-total-valor { font-family: var(--c-font); font-size: 20px; color: var(--c-negro); }

@media (max-width: 767px) {
    .panel-cliente-tabs { overflow-x: auto; flex-wrap: nowrap; }
    .panel-pedido-row { align-items: flex-start; }
}

/* ============================================================
   [2026-09-22] Header: menú principal en UNA fila.
   Con muchas categorías el último item saltaba de línea y
   agrandaba la barra. Se evita el wrap y se ajusta el padding.
   ============================================================ */
.flat-header-bottom #mainnav > ul {
    width: 100%;
    white-space: nowrap;
}
.flat-header-bottom #mainnav > ul > li {
    white-space: normal;
}
.flat-header-bottom #mainnav > ul > li > a {
    padding: 0 12px;
}
@media (min-width: 992px) and (max-width: 1199px) {
    .flat-header-bottom #mainnav > ul > li > a { padding: 0 8px; }
}

/* ============================================================
   [2026-09-22] Panel de cliente v2 — jerarquía, tabs píldora,
   tabla con bordes + striping y cards de detalle (Envío/Pago).
   ============================================================ */
.panel-head { margin-bottom: 14px; }
.panel-head__title { font-family: var(--c-font); font-weight: 700; color: var(--c-negro); font-size: clamp(22px, 4vw, 28px); margin: 0 0 4px; }
.panel-head__sub { color: var(--c-text-2); margin: 0; font-family: var(--c-font); font-size: 14px; }
.panel-head__sub .estado-badge, .panel-head__sub [class*="badge"] { margin-left: 6px; }
.panel-back-link { display: inline-block; margin-bottom: 8px; font-family: var(--c-font); font-size: 13px; font-weight: 600; color: var(--c-text-2); text-decoration: none; }
.panel-back-link:hover { color: var(--c-naranja); }

/* Tabs píldora (segmented control). */
.panel-tabs { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0 0 20px; padding: 8px; background: var(--c-blanco); border: 1px solid var(--c-border-2); border-radius: 12px; flex-wrap: wrap; }
.panel-tabs li { margin: 0; }
.panel-tabs__spacer { flex: 1 1 auto; }
.panel-tabs__item {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border: 1px solid transparent; border-radius: 9px;
    font-family: var(--c-font); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
    color: var(--c-text-2); text-decoration: none; background: transparent; cursor: pointer;
    transition: color var(--c-transition), background var(--c-transition), border-color var(--c-transition);
}
.panel-tabs__item:hover { color: var(--c-negro); background: var(--c-surface, #f5f5f5); }
.panel-tabs__item.is-active { color: var(--c-blanco); background: var(--c-negro); border-color: var(--c-negro); }
.panel-tabs__item.is-active:hover { color: var(--c-blanco); background: var(--c-negro); }
.panel-tabs__item--logout { color: var(--c-negro); }
.panel-tabs__item--logout:hover { color: var(--c-naranja); }
.panel-logout-form { margin: 0; }

/* Cards contenedoras. */
.panel-card { background: var(--c-blanco); border: 1px solid var(--c-border-2); border-radius: 12px; padding: 20px 22px; margin-bottom: 20px; }
.panel-card__head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.panel-card__title { font-family: var(--c-font); font-weight: 700; color: var(--c-negro); font-size: 18px; margin: 0; display: flex; align-items: center; gap: 8px; }
.panel-card__title i { color: var(--c-naranja); font-size: 16px; }
.panel-filter-form { min-width: 200px; }

/* Tabla: bordes claros + striping + jerarquía. */
.panel-table { border: 1px solid var(--c-border-2); margin-bottom: 0; }
.panel-table th {
    background: var(--c-surface, #f7f7f7); color: var(--c-text-2); font-family: var(--c-font);
    font-size: 11px; text-transform: uppercase; letter-spacing: .8px; border-bottom: 2px solid var(--c-border-2); border-top: 0;
}
.panel-table td { vertical-align: middle; font-family: var(--c-font); font-size: 14px; border-color: var(--c-border-2); }
.panel-table tbody tr:nth-child(odd) { background: var(--c-surface, #fafafa); }
.panel-table tbody tr:hover { background: var(--c-accent-tint, #fff6ef); }
.panel-table__num { display: block; font-family: var(--c-font); font-weight: 700; color: var(--c-negro); font-size: 15px; line-height: 1.3; }
.panel-table__meta { display: block; margin-top: 3px; color: var(--c-text-2); font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: .2px; }
.panel-table__date { color: var(--c-text-2); white-space: nowrap; }
.panel-table__total { font-family: var(--c-font); font-weight: 700; color: var(--c-negro); }
.panel-row-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.panel-btn-sm { padding: 8px 14px; font-size: 12px; }
.panel-wa-icon { color: var(--c-wa); }
.panel-pagination { margin-top: 14px; }

/* Cards de detalle (Envío / Pago). */
.panel-detail-card { background: var(--c-blanco); border: 1px solid var(--c-border-2); border-radius: 12px; height: 100%; overflow: hidden; }
.panel-detail-card__head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--c-border-2); background: var(--c-surface, #fafafa); }
.panel-detail-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: var(--c-negro); color: var(--c-blanco); font-size: 15px; }
.panel-detail-card__title { font-family: var(--c-font); font-weight: 700; color: var(--c-negro); font-size: 16px; margin: 0; }
.panel-detail-card__body { padding: 16px 18px; }
.panel-detail-row { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--c-border-2); font-family: var(--c-font); font-size: 14px; }
.panel-detail-row:last-child { border-bottom: 0; }
.panel-detail-row__label { flex: 0 0 110px; color: var(--c-text-2); font-size: 13px; }
.panel-detail-row__value { color: var(--c-negro); font-weight: 500; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

@media (max-width: 767px) {
    .panel-tabs { flex-wrap: nowrap; overflow-x: auto; }
    .panel-tabs__item { white-space: nowrap; }
    .panel-detail-row { flex-direction: column; gap: 2px; }
    .panel-detail-row__label { flex: none; }
}

/* ============================================================
   [2026-09-22] Mis Puntos (panel v2) — hero de saldo + canje,
   sub-tabs píldora y tabla de transacciones con jerarquía.
   ============================================================ */
.panel-puntos-hero { display: flex; align-items: stretch; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.panel-puntos-hero__saldo {
    flex: 1 1 240px; display: flex; flex-direction: column; justify-content: center;
    background: var(--c-negro); border-radius: 12px; padding: 20px 24px; color: var(--c-blanco);
}
.panel-puntos-hero__label { font-family: var(--c-font); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: rgba(255,255,255,.65); }
.panel-puntos-hero__valor { font-family: var(--c-font); font-size: 44px; font-weight: 700; line-height: 1.1; margin: 4px 0; }
.panel-puntos-hero__desde { font-family: var(--c-font); font-size: 12px; color: rgba(255,255,255,.6); }

.panel-puntos-hero__canje {
    flex: 2 1 380px; display: flex; align-items: center; gap: 16px;
    border: 1px solid var(--c-border-2); border-radius: 12px; padding: 20px 24px; background: var(--c-blanco);
}
.panel-puntos-hero__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 10px; background: var(--c-naranja); color: var(--c-blanco); font-size: 20px; flex-shrink: 0; }
.panel-puntos-hero__canje-texto { flex: 1 1 auto; }
.panel-puntos-hero__canje h3 { font-family: var(--c-font); font-weight: 700; color: var(--c-negro); font-size: 16px; margin: 0 0 4px; }
.panel-puntos-hero__canje p { margin: 0; color: var(--c-text-2); font-family: var(--c-font); font-size: 13px; }

/* Sub-tabs píldora de Mis Puntos. */
.panel-subtabs { display: inline-flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 16px; padding: 6px; background: var(--c-surface, #f5f5f5); border: 1px solid var(--c-border-2); border-radius: 10px; }
.panel-subtabs li { margin: 0; }
.panel-subtabs__item {
    display: inline-flex; align-items: center; gap: 7px; border: 1px solid transparent; border-radius: 7px;
    padding: 8px 14px; background: transparent; cursor: pointer;
    font-family: var(--c-font); font-size: 12.5px; font-weight: 600; color: var(--c-text-2);
    transition: color var(--c-transition), background var(--c-transition);
}
.panel-subtabs__item:hover { color: var(--c-negro); }
.panel-subtabs__item.is-active { background: var(--c-negro); color: var(--c-blanco); }
.panel-points-num { font-family: var(--c-font); font-weight: 700; color: var(--c-negro); }
.panel-puntos-pane .table-responsive { margin-top: 0; }

@media (max-width: 767px) {
    .panel-puntos-hero__canje { flex-direction: column; align-items: flex-start; }
    .panel-subtabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
}

/* ============================================================
   [2026-09-24] QA front: glosario de estados, checkout y panel.
   ============================================================ */
/* Alias de estado usados por el glosario único (mismos colores que --pend / --abierto). */
.estado-badge--warn  { color: var(--c-warn-fg);  background: var(--c-warn-bg);  border-color: var(--c-warn-border); }
.estado-badge--muted { color: var(--c-muted-fg); background: var(--c-muted-bg); border-color: var(--c-muted-border); }

/* Detalle del pedido (cliente): títulos de card iguales a .c-form-section__title. */
.panel-detail-card__title { font-weight: 600; text-transform: uppercase; letter-spacing: .3px; font-size: clamp(14px, 2vw, 16px); }
.panel-detail-row__muted { color: var(--c-text-2); font-size: 13px; }

/* Filtro de "Mis pedidos" con etiqueta visible. */
.panel-filter-form { display: flex; align-items: center; gap: 10px; }
.panel-filter-form__label { margin: 0; font-size: 13px; font-weight: 600; color: var(--c-text-2); white-space: nowrap; }

/* Carrito: el envío se define en el checkout. */
.cart-envio-pendiente { color: var(--c-text-2); font-size: 13px; }

/* Cantidad: convención "− valor +" (el JS decide por el texto del botón, no por su posición). */
.nineteen #cart-table .numbers-row .button_inc.inc { float: right; }
.nineteen #cart-table .numbers-row .button_inc.dec { float: left; }
.nineteen-cart-header .numbers-row .button_inc.dec { order: 0; }
.nineteen-cart-header .numbers-row .cant-number-input { order: 1; }
.nineteen-cart-header .numbers-row .button_inc.inc { order: 2; }

/* Checkout: campos en blanco (igual que las opciones) y resumen final antes de confirmar. */
.checkout-page .c-form-card .form-control { background: var(--c-blanco); }
.checkout-final-summary { padding: 16px 18px; border: 1px solid var(--c-border); border-radius: var(--c-radius); background: var(--c-accent-tint); }
.checkout-final-summary .c-field-hint { margin: 10px 0 0; }

/* Checkout mobile: el WhatsApp flotante tapaba campos del formulario. */
@media (max-width: 767px) {
    .is-checkout .whatsapp-btn,
    .is-checkout .whatsapp-float__tooltip { display: none; }
}

/* [2026-09-24] Logo del header: ancho fijo (antes inline) y alternativa en texto si no hay logo. */
.flat-logo__img { width: 110px; }
.flat-logo__text { display: inline-block; padding-top: 18px; font-family: var(--c-font); font-weight: 700; font-size: 20px; color: var(--c-blanco); text-transform: uppercase; letter-spacing: .5px; }

/* ============================================================
   [2026-09-24] Fases A–E: identificarse, gracias, tarjetas de opción,
   jerarquía de formularios, resumen del checkout y panel "Mi cuenta".
   ============================================================ */

/* ---------- Formularios: jerarquía (ícono visible + campos con sangría) ---------- */
.c-form-section__head i,
.c-form-section__head .fa { font-size: 18px; width: 20px; text-align: center; }
.c-form-section__head .c-tag { margin-left: 4px; }
.c-form-section > :not(.c-form-section__head) { padding-left: 30px; }
/* Mismo campo en todos los formularios (antes solo dentro de .c-form-card; en el panel quedaba sin borde). */
.c-form-section .form-control {
    background: var(--c-blanco); font-family: var(--c-font); font-size: clamp(13px, 1.7vw, 15px);
    border: 1px solid var(--c-input-border); border-radius: var(--c-radius); padding: clamp(9px, 2vw, 12px) 14px; height: auto;
}
.c-form-section .form-control:focus { border-color: var(--c-naranja); box-shadow: 0 0 0 .2rem var(--c-accent-ring); outline: none; }
@media (max-width: 575px) {
    .c-form-section > :not(.c-form-section__head) { padding-left: 0; }
}

/* ---------- Etiqueta sutil de ayuda (badge) ---------- */
.c-tag {
    display: inline-block; padding: 2px 8px; border-radius: var(--c-radius-pill);
    background: var(--c-muted-bg); color: var(--c-text-2); border: 1px solid var(--c-border-2);
    font-family: var(--c-font); font-size: 11.5px; font-weight: 500; line-height: 1.4; white-space: nowrap;
}
.c-tag--warn { background: var(--c-warn-bg); color: var(--c-warn-fg); border-color: var(--c-warn-border); }

/* ---------- Tarjetas de opción (pago / envío) ---------- */
.checkout-page .checkout-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.checkout-page .checkout-options .checkout-option {
    display: grid; grid-template-columns: 18px 40px minmax(0, 1fr) auto; align-items: center; gap: 12px;
    margin: 0; padding: 14px 16px; border-radius: var(--c-radius-card);
    transition: border-color var(--c-transition), background var(--c-transition), box-shadow var(--c-transition), transform var(--c-transition);
}
.checkout-page .checkout-options .checkout-option:hover { transform: translateY(-1px); box-shadow: var(--c-shadow-card); }
.checkout-page .checkout-options .checkout-option.is-selected { border-color: var(--c-naranja); background: var(--c-accent-tint); }
.checkout-page .checkout-options .checkout-option.is-disabled:hover { transform: none; box-shadow: none; }
/* Radio propio: mismo tamaño en todas las opciones. */
.checkout-page .checkout-option input[type="radio"] {
    -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin: 0;
    border: 2px solid var(--c-input-border); border-radius: 50%; background: var(--c-blanco); cursor: pointer;
    transition: border-color var(--c-transition), box-shadow var(--c-transition);
}
.checkout-page .checkout-option input[type="radio"]:checked { border-color: var(--c-naranja); background: var(--c-naranja); box-shadow: inset 0 0 0 3px var(--c-blanco); }
.checkout-page .checkout-option input[type="radio"]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--c-accent-ring); }
.checkout-page .checkout-option__icon {
    width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    background: var(--c-accent-tint); color: var(--c-naranja); font-size: 18px;
}
.checkout-page .checkout-option__label { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.checkout-page .checkout-option__name { font-weight: 600; color: var(--c-text); }
.checkout-page .checkout-option__price { font-weight: 700; color: var(--c-text); white-space: nowrap; text-align: right; }
.checkout-page .checkout-option__name { overflow-wrap: anywhere; }

/* ---------- Checkout paso 1: productos vs. totales ---------- */
.checkout-page .checkout-summary__item { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; }
.checkout-summary__item-img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid var(--c-border-2); }
.checkout-summary__item-info { display: flex; flex-direction: column; min-width: 0; }
.checkout-page .checkout-summary__item-name { font-weight: 600; color: var(--c-text); }
.checkout-summary__item-meta { font-size: 12.5px; color: var(--c-text-2); }
.checkout-summary__totales { margin-top: 14px; padding: 12px 16px; background: var(--c-muted-bg); border-radius: var(--c-radius-card); }
.checkout-summary__totales .checkout-summary__row span:first-child { color: var(--c-text-2); }
.checkout-summary__totales .checkout-summary__row--total span:first-child { color: var(--c-negro); }

/* ---------- Ingresar ---------- */
.c-auth-aviso { display: flex; align-items: center; max-width: 980px; margin: 0 auto 18px; padding: 12px 16px; border-radius: var(--c-radius-card); background: var(--c-accent-tint); color: var(--c-text); font-family: var(--c-font); font-size: 14px; }
.c-auth-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; max-width: 980px; margin: 0 auto; }
.c-auth-grid .c-auth-card { max-width: none; margin: 0; }
.c-auth-card__text { color: var(--c-text-2); font-size: 14px; margin: 0 0 18px; }
.c-auth-card__btn { width: 100%; justify-content: center; margin-top: 6px; }

/* ---------- Gracias ---------- */
.comprobante-head__eyebrow { display: block; font-family: var(--c-font); font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--c-naranja); }
.gracias-guia { margin: 0 0 18px; padding: 16px 18px; border: 1px solid var(--c-border-2); border-left: 4px solid var(--c-naranja); border-radius: var(--c-radius-card); background: var(--c-blanco); }
.gracias-guia__title { margin: 0 0 8px; font-family: var(--c-font); font-size: 15px; font-weight: 700; color: var(--c-negro); }
.gracias-guia__title i { color: var(--c-naranja); }
.gracias-guia__pasos { margin: 0; padding-left: 20px; font-size: 14px; color: var(--c-text); list-style: decimal outside; }
.gracias-guia__pasos li { padding: 3px 0 3px 4px; }
.gracias-guia__pasos li::marker { color: var(--c-naranja); font-weight: 700; }
.comprobante-actions__alt { margin: 12px 0 24px; font-size: 13px; }
.comprobante-actions__alt a { color: var(--c-text-2); text-decoration: underline; }
.comprobante-actions__alt a:hover { color: var(--c-naranja); }
.gracias-vacio { margin: 60px 0; }

/* Celebración: aparece, se queda un momento y se va (sin JS). */
.gracias-toast {
    position: fixed; top: 22%; left: 50%; z-index: 1050; transform: translate(-50%, 0);
    display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 34px;
    background: var(--c-blanco); border-radius: 18px; box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
    pointer-events: none; animation: gracias-toast 3.2s ease forwards;
}
.gracias-toast__check { width: 72px; height: 72px; }
.gracias-toast__circle { stroke: var(--c-naranja); stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; animation: gracias-trazo .6s ease-out .2s forwards; }
.gracias-toast__tick { stroke: var(--c-naranja); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36; stroke-dashoffset: 36; animation: gracias-trazo .4s ease-out .75s forwards; }
.gracias-toast__text { font-family: var(--c-font); font-weight: 700; font-size: 17px; color: var(--c-negro); }
@keyframes gracias-trazo { to { stroke-dashoffset: 0; } }
@keyframes gracias-toast {
    0% { opacity: 0; transform: translate(-50%, 12px) scale(.96); }
    10%, 78% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -12px) scale(.98); visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
    .gracias-toast { display: none; }
}

/* ---------- Ticket: etiqueta con ":" y valor al lado (sin hueco central) ---------- */
.comprobante-ticket { padding: 26px 28px; }
.ticket-head { padding-bottom: 18px; }
.ticket-meta .l { width: 160px; text-align: left; }
.ticket-meta .l::after { content: ":"; }
.ticket-meta .v { text-align: left; word-break: break-word; }
.ticket-meta td { padding: 5px 0; }
@media (max-width: 575px) {
    .comprobante-ticket { padding: 18px 14px; }
    .ticket-meta .l { width: 42%; }
    .ticket-items th:nth-child(3), .ticket-items td:nth-child(3) { display: none; }
    .ticket-items th.r, .ticket-items td.r { width: auto; }
}

/* ---------- Panel "Mi cuenta" ---------- */
.panel-cliente .panel-section[hidden], .panel-cliente .panel-puntos-pane[hidden] { display: none; }
.panel-card__head--filtro { justify-content: flex-end; }
.panel-vacio__texto { margin: 0 0 12px; color: var(--c-text-2); }
.panel-pedido__head { margin-bottom: 14px; }
.panel-pedido__title { margin: 6px 0 4px; font-family: var(--c-font); font-weight: 700; font-size: 20px; color: var(--c-negro); }
.panel-pedido__meta { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--c-text-2); font-size: 13px; }
.panel-detail-card__badge { margin-left: auto; }
.panel-form-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 8px; }
.panel-puntos-intro { margin: 0 0 16px; }

@media (max-width: 767px) {
    /* Pestañas: tres columnas iguales (todas visibles, sin scroll oculto). */
    .panel-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .panel-tabs__item { flex-direction: column; justify-content: center; gap: 4px; width: 100%; padding: 10px 4px; font-size: 11px; text-align: center; }

    /* Pedidos como tarjetas: cada fila es un bloque con etiqueta → valor. */
    .panel-table--orders thead { display: none; }
    .panel-table--orders, .panel-table--orders tbody, .panel-table--orders tr, .panel-table--orders td { display: block; width: 100%; }
    .panel-table--orders tr { margin-bottom: 12px; padding: 12px 14px; border: 1px solid var(--c-border-2); border-radius: var(--c-radius-card); background: var(--c-blanco); }
    .panel-table--orders td { padding: 4px 0; border: 0; text-align: left; }
    .panel-table--orders td[data-label] { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
    .panel-table--orders td[data-label]::before { content: attr(data-label); font-size: 12px; color: var(--c-text-2); }
    .panel-table--orders td[data-label="Pedido"] { display: block; }
    .panel-table--orders td[data-label="Pedido"]::before { content: none; }
    .panel-table--orders .panel-table__acciones { padding-top: 10px; }
    .panel-table--orders .panel-row-actions { justify-content: flex-start; flex-wrap: wrap; }
    .panel-table__vacio td { text-align: center; }
    .panel-card__head--filtro { justify-content: stretch; }
    .panel-card__head--filtro .panel-filter-form { width: 100%; }

    /* En el panel el cliente ya tiene sus accesos a WhatsApp: el flotante tapaba contenido. */
    .is-panel .whatsapp-btn, .is-panel .whatsapp-float__tooltip { display: none; }
}
/* [2026-09-24] Filtro "Mostrar" alineado con su selector; sin línea gruesa sobre las tarjetas en mobile. */
.panel-filter-form { align-items: center; }
.panel-filter-form .form-control { width: auto; min-width: 180px; }
@media (max-width: 767px) {
    .panel-filter-form .form-control { flex: 1; min-width: 0; }
    .panel-table--orders { border-top: 0; }
}
/* [2026-09-24] Nota de retiro en tienda: separada de las tarjetas de envío. */
.checkout-page .checkout-retiro-hint {
    margin: 14px 0 0 30px; padding: 12px 14px; /* 30px = sangría de la sección */
    border-radius: var(--c-radius-card); background: var(--c-muted-bg);
    font-family: var(--c-font); font-size: 13px; color: var(--c-text-2);
}
.checkout-retiro-hint__aviso { display: flex; align-items: center; margin: 0; }
.checkout-retiro-hint__aviso i { color: var(--c-wa); font-size: 16px; }
.checkout-retiro-hint__link { display: inline-flex; align-items: center; margin-top: 8px; font-weight: 600; color: var(--c-negro); text-decoration: underline; }
.checkout-retiro-hint__link:hover { color: var(--c-naranja); }
.checkout-retiro-hint__link i { color: var(--c-naranja); }
.checkout-retiro-hint__horarios { list-style: none; margin: 8px 0 0; padding: 0; }
.checkout-retiro-hint__horarios li { display: flex; align-items: center; padding: 2px 0; }
.checkout-retiro-hint__horarios i { color: var(--c-text-2); }
/* [2026-09-24] Teléfono con código de país. */
.checkout-telefono { display: flex; gap: 8px; }
.checkout-page .checkout-telefono .checkout-telefono__pais { flex: 0 0 120px; }
.checkout-page .checkout-solo-retiro[hidden] { display: none; }
/* Dentro de una tarjeta de opción las etiquetas pueden partirse en dos líneas (no se enciman con el precio). */
.checkout-page .checkout-option .c-tag { white-space: normal; }
.checkout-page .checkout-retiro-hint[hidden] { display: none; }
@media (max-width: 575px) {
    .checkout-page .checkout-retiro-hint { margin-left: 0; }
}
/* [2026-09-24] Envío incompatible con el pago elegido: la tarjeta no se muestra. */
.checkout-page .checkout-options .checkout-option[hidden] { display: none; }
/* [2026-09-24] Botón terciario: misma tipografía que .c-btn, sin borde ni fondo (acción secundaria de bajo peso). */
.c-btn--ghost { color: var(--c-text); background: transparent; border-color: transparent; }
.c-btn--ghost:hover, .c-btn--ghost:focus { color: var(--c-naranja); background: var(--c-accent-tint); border-color: transparent; text-decoration: none; }
.comprobante-card .comprobante-actions { margin-bottom: 24px; }

/* [2026-09-24] Corazón de favoritos: relleno naranja cuando el producto es favorito. */
ul.add-to-links li a.link-wishlist.is-activo,
.producto-accion ul.add-to-links a.link-wishlist.is-activo {
    color: var(--c-on-accent);
    background: var(--c-naranja);
    border-color: var(--c-naranja);
}
ul.add-to-links li a.link-wishlist.is-cargando { opacity: .6; pointer-events: none; }
/* [2026-09-24] Panel "Mis favoritos": el estado vacío respeta [hidden] (catalogo-vacio define display). */
.panel-favoritos__vacio[hidden] { display: none; }
.panel-favoritos { margin: 0; }

/* [2026-09-25] Contador de favoritos: badge en el trigger de la cuenta y en el ítem "Mis favoritos". */
.nineteen-auth-header .cuenta-trigger__favoritos {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}
.nineteen-auth-header .cuenta-trigger__favoritos .fa-heart { color: var(--c-naranja); }
.nineteen-auth-header .cuenta-trigger__favoritos .js-favoritos-contador[hidden],
.nineteen-auth-header .cuenta-menu__contador[hidden] { display: none; }
.nineteen-auth-header .cuenta-menu__contador {
    margin-left: auto;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--c-naranja);
    color: var(--c-on-accent);
    font-size: 12px;
    text-align: center;
}
/* [2026-09-25] Card no comprable: el corazón de favoritos queda debajo del badge/botón de disponibilidad. */
.producto-accion ul.add-to-links.add-to-links--solo-favorito { margin-top: 8px; }

/* [2026-09-25] Ticket en mobile: etiqueta arriba y valor abajo. En dos columnas el valor quedaba en ~118px
   y el email se cortaba a mitad de palabra (QA). Solo afecta pantalla; el PDF usa su propia vista. */
@media (max-width: 575px) {
    .ticket-meta tr { display: block; padding: 4px 0; }
    .ticket-meta td { display: block; padding: 0; }
    .ticket-meta .l { width: 100%; font-size: 12px; }
    .ticket-meta .v { width: 100%; }
}

/* [2026-09-25] Opciones de envío angostas: el precio puede ir en dos líneas ("A coordinar") para que el
   nombre no se corte a mitad de palabra ("Transportado/ra"). */
.checkout-page .checkout-options .checkout-option__price { white-space: normal; max-width: 90px; }
.checkout-page .checkout-option__name { overflow-wrap: break-word; }

/* ============================================================
   [2026-09-25] Checkout en mobile: más ancho útil y ritmo parejo.
   Todo con clamp(): en desktop los valores quedan como antes y en
   pantallas chicas se achican de forma gradual (sin saltos).
   ============================================================ */

/* Ancho útil: menos margen exterior y menos padding de la card en pantallas chicas.
   Antes: 12px de margen + 20px de padding (294px de contenido a 360px). */
@media (max-width: 575px) {
    .checkout-page .container-fluid.checkout {
        padding-left: clamp(8px, 2.5vw, 15px);
        padding-right: clamp(8px, 2.5vw, 15px);
    }
}
.checkout-page .c-form-card { padding: clamp(14px, 4vw, 40px); }

/* Ritmo vertical: el theme le da 30px de margen a los inputs y se sumaba al del campo
   (quedaban huecos de 30px y de 16px mezclados). Ahora el espacio lo da solo .c-field. */
.checkout-page .c-field .form-control { margin-bottom: 0; }
.checkout-page .c-field { margin-bottom: clamp(16px, 3vw, 22px); }

/* Cajas con fondo dentro de una sección: la sangría de .c-form-section (padding-left 30px,
   0 en mobile) les pisaba su padding propio y el texto quedaba pegado al borde izquierdo.
   La sangría pasa a ser margen y el padding interno queda parejo en los cuatro lados. */
.checkout-page .c-form-section > .checkout-summary__totales {
    margin-left: 30px;
    padding: clamp(10px, 3vw, 14px) clamp(12px, 4vw, 18px);
}
@media (max-width: 575px) {
    .checkout-page .c-form-section > .checkout-summary__totales { margin-left: 0; }
}
.checkout-page .checkout-final-summary { padding: clamp(12px, 4vw, 18px); }

/* Tarjetas de opción (pago / envío): icono, padding y separación proporcionales. */
.checkout-page .checkout-options { gap: clamp(8px, 2.5vw, 12px); }
.checkout-page .checkout-options .checkout-option {
    grid-template-columns: 18px clamp(34px, 9vw, 40px) minmax(0, 1fr) auto;
    column-gap: clamp(8px, 3vw, 12px);
    padding: clamp(11px, 3.2vw, 14px) clamp(12px, 3.5vw, 16px);
}
.checkout-page .checkout-option__icon {
    width: clamp(34px, 9vw, 40px);
    height: clamp(34px, 9vw, 40px);
    font-size: clamp(15px, 4vw, 18px);
}
.checkout-page .checkout-option__name { font-size: clamp(13.5px, 3.8vw, 15px); line-height: 1.3; }

/* Resumen de productos: miniatura y separación proporcionales; nombres largos parten bien. */
.checkout-page .checkout-summary__item {
    grid-template-columns: clamp(36px, 10vw, 44px) minmax(0, 1fr) auto;
    gap: clamp(8px, 3vw, 12px);
}
.checkout-page .checkout-summary__item-img { width: clamp(36px, 10vw, 44px); height: clamp(36px, 10vw, 44px); }
.checkout-page .checkout-summary__item-name { padding-right: 0; font-size: clamp(12.5px, 3.4vw, 14px); line-height: 1.35; overflow-wrap: anywhere; }

/* Teléfono: el selector de país se achica un poco para dejar lugar al número. */
.checkout-page .checkout-telefono { gap: clamp(6px, 2vw, 8px); }
.checkout-page .checkout-telefono .checkout-telefono__pais { flex: 0 0 clamp(96px, 28vw, 120px); }

/* Nota de retiro en tienda. */
.checkout-page .checkout-retiro-hint { padding: clamp(10px, 3vw, 14px) clamp(12px, 3.5vw, 16px); }

/* [2026-09-25] Títulos de sección del checkout: el theme les daba margin-top 20px y line-height 30px
   (el margin: 0 de .c-form-section__title perdía por especificidad) y dejaba ~45px vacíos arriba. */
.checkout-page .c-form-section__head .c-form-section__title { margin: 0; line-height: 1.3; }
.checkout-page .c-form-section__head { padding-bottom: clamp(8px, 2.5vw, 10px); margin-bottom: clamp(14px, 4vw, 18px); }
/* [2026-09-25] Etiqueta dentro de una opción: si se parte en dos líneas, radio moderado (la píldora se deformaba). */
.checkout-page .checkout-option .c-tag { border-radius: 8px; line-height: 1.35; }

/* ============================================================
   [2026-09-25] Páginas de contenido en mobile (gracias, carrito, panel, ingresar…).
   nineteen.css fija .container en 300px entre 320 y 767px: en un celular de 393px
   quedaban ~46px vacíos a cada lado y el contenido angosto. Solo se corrige dentro
   de <main class="bg_gray"> (el header y el footer no cambian).
   ============================================================ */
/* [2026-09-25] Reemplazado por la regla global de .container (ver "Contenedor a ancho completo en todo el
   front", más abajo). Se conserva por referencia (Regla 4):
@media (max-width: 767.98px) {
    main.bg_gray .container {
        width: 100%;
        max-width: 100%;
        padding-left: clamp(12px, 3vw, 15px);
        padding-right: clamp(12px, 3vw, 15px);
    }
}
*/

/* Pantalla de gracias: paddings proporcionales (antes se apilaban 20px de card + 18px de guía). */
.comprobante-card.c-form-card { padding: clamp(14px, 4vw, 40px); margin-top: clamp(20px, 6vw, 40px); }
.gracias-guia { padding: clamp(12px, 3.5vw, 16px) clamp(12px, 3.5vw, 18px); }
.gracias-guia__title { line-height: 1.35; }
.gracias-guia__pasos { padding-left: clamp(18px, 5vw, 20px); }
@media (max-width: 575px) {
    .comprobante-ticket { padding: clamp(12px, 3.5vw, 18px); }
}
/* Acciones apiladas a ancho completo en mobile (con más ancho, dos quedaban lado a lado y desparejas). */
@media (max-width: 575px) {
    .comprobante-actions .c-btn { flex: 1 1 100%; }
}

/* [2026-09-25] Checkout mobile: el margen exterior angosto (8-15px) no compensaba el -12px de .row y
   la columna se salía ~3px (oculto, pero descentraba la card). Row sin márgenes negativos y columna
   sin padding: el margen lo da solo el contenedor. */
@media (max-width: 575px) {
    .checkout-page .container-fluid.checkout > .row { margin-left: 0; margin-right: 0; }
    .checkout-page .container-fluid.checkout > .row > [class*="col-"] { padding-left: 0; padding-right: 0; }
}
/* [2026-09-25] Título + migas de las páginas: el theme les da margin-left -35px y ancho fijo pensados para el
   contenedor de 300px; con el contenedor a ancho completo quedaban corridos a la izquierda. */
/* [2026-09-25] Reemplazado por la regla global (más abajo). Antes (Regla 4):
@media (max-width: 767.98px) {
    main.bg_gray .flat-page-title .breadcrumbs { margin-left: 0; margin-right: 0; width: auto; }
}
*/

/* ============================================================
   [2026-09-25] Contenedor a ancho completo en todo el front (mobile).
   nineteen.css fija .container en 300px entre 320 y 767px: en un celular de
   360-430px quedaban 30-65px vacíos a cada lado (header, listado, detalle,
   footer, carrito, panel…). Se usa todo el ancho con un margen proporcional.
   casper.css solo se carga en el front: el admin no cambia.
   ============================================================ */
@media (max-width: 767.98px) {
    .container {
        width: 100%;
        max-width: 100%;
        /* Mínimo 12px: compensa el margen negativo de .row (-12px) y no se desborda. */
        padding-left: clamp(12px, 3vw, 15px);
        padding-right: clamp(12px, 3vw, 15px);
    }
    /* Título + migas: el theme les da margin-left -35px y ancho fijo pensados para los 300px. */
    .flat-page-title .breadcrumbs { margin-left: 0; margin-right: 0; width: auto; }
}

/* [2026-09-25] Grilla de productos en mobile: el theme le da margin -15px a .products-grid y, con el
   contenedor a ancho completo, las cards se salían ~3px de la pantalla. Margen positivo proporcional:
   la card queda a ~16-20px del borde (antes del contenedor fluido eran 27-62px; recién, -3px). */
@media (max-width: 767.98px) {
    /* Mismo selector que style.css (.product-page .products-grid { margin: 0 -15px }) más .products-grid
       para que funcione también fuera del listado. */
    .products-grid,
    .product-page .products-grid {
        margin-left: clamp(2px, 1.5vw, 8px);
        margin-right: clamp(2px, 1.5vw, 8px);
    }
}