/* ==========================================================================
   SimpSale — sistema visual
   Editorial, sobrio, image-forward. Monocromo cálido + un acento contenido.
   ========================================================================== */

:root {
    color-scheme: light;

    /* Tinta y superficies */
    --ink:        #14141a;
    --ink-soft:   #45454f;
    --muted:      #5b5b66;   /* 6,4:1 sobre blanco (antes #86868f = 3,4:1, bajo el minimo AA de 4,5:1) */
    --paper:      #ffffff;
    --canvas:     #faf9f7;
    --canvas-alt: #f2f0ec;

    /* Hairlines: nunca bordes gruesos */
    --line:        #e7e4df;
    --line-strong: #d3cfc8;

    /* Acento único, reservado para rebajas y estados destructivos */
    --accent:      #8a3324;
    --accent-soft: #f6ece9;
    --positive:    #2f6b4f;

    /* Cian de marca: exclusivo del logotipo, no se usa en la interfaz */
    --brand-cyan:  #00a9dc;

    /* Tipografía */
    --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
    --font-ui: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Ritmo vertical */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;

    --radius: 2px;
    --shadow-soft: 0 1px 2px rgba(20, 20, 26, .04), 0 8px 24px rgba(20, 20, 26, .06);
    --ease: cubic-bezier(.22, .61, .36, 1);

    /* Bootstrap: alinea sus tokens con los nuestros */
    --bs-body-font-family: var(--font-ui);
    --bs-body-color: var(--ink);
    --bs-border-color: var(--line);
    --bs-link-color: var(--ink);
    --bs-link-hover-color: var(--accent);
    /* Bootstrap 5.3 pinta los enlaces con las variables -rgb; sin ellas los enlaces seguían en el
       azul por defecto (#0d6efd, contraste 4,25:1 sobre los fondos suaves: no llega a 4,5). */
    --bs-link-color-rgb: 20, 20, 26;
    --bs-link-hover-color-rgb: 138, 51, 36;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: .95rem;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: .003em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

::selection { background: var(--ink); color: var(--paper); }

/* Foco visible y consistente en todo el sitio ------------------------------ */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
    border-radius: var(--radius);
}
.btn:focus, .form-control:focus, .form-select:focus { box-shadow: none; }
.form-control:focus, .form-select:focus { border-color: var(--ink); }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1100;
    background: var(--ink);
    color: var(--paper);
    padding: .75rem 1.25rem;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
}
.skip-link:focus { left: .5rem; top: .5rem; color: var(--paper); }

/* Tipografía --------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { color: var(--ink); text-wrap: balance; }

h1 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -.015em;
}

h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: -.01em;
}

h3, h4, h5, h6 {
    font-family: var(--font-ui);
    font-weight: 600;
    letter-spacing: -.005em;
}

.lead { font-size: 1.02rem; font-weight: 400; color: var(--ink-soft); line-height: 1.7; }
.text-muted { color: var(--muted) !important; }
small, .small { font-size: .82rem; }

/* Etiqueta en versalitas: el recurso que más “premium” aporta */
.eyebrow {
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Cifras siempre alineadas en columnas */
.price, .table td, .table th, .tabular { font-variant-numeric: tabular-nums; }

/* Contenedor y ritmo ------------------------------------------------------- */
.main-content { padding-top: var(--space-8); padding-bottom: var(--space-16); }
@media (min-width: 992px) { .main-content { padding-top: var(--space-12); } }

.rule { border: 0; border-top: 1px solid var(--line); margin: var(--space-12) 0; }

/* ==========================================================================
   Cabecera
   ========================================================================== */

.store-announcement {
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-ui);
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-align: center;
    padding: .6rem 0;
}
@media (max-width: 575.98px) {
    .store-announcement { font-size: .72rem; letter-spacing: .08em; padding: .5rem .75rem; }
}

.store-header { background: var(--paper); }
.store-header .border-bottom { border-color: var(--line) !important; }

.store-brand { gap: .5rem; flex-shrink: 0; padding-block: .9rem; }
.store-logo { width: auto; height: 36px; max-height: 36px; object-fit: contain; }
@media (min-width: 992px) { .store-logo { height: 42px; max-height: 42px; } }

/* Logotipo tipográfico: legible a cualquier tamaño y sin dependencias */
.wordmark .wm-accent { color: var(--brand-cyan); }
.wordmark .wm-ink { color: var(--ink); }
.wordmark {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink);
    white-space: nowrap;
}
@media (min-width: 992px) { .wordmark { font-size: 1.75rem; } }
@media (max-width: 575.98px) { .wordmark { font-size: 1.2rem; letter-spacing: .06em; } }
.store-footer .wordmark { font-size: 1.35rem; }

.store-search { max-width: 460px; }
/* Sugerencias del buscador: lista bajo el campo, con foto y precio; la tecla Enter sobre una opcion la abre. */
.store-search.con-sugerencias { position: relative; }
.sugerencias { position: absolute; z-index: 1050; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: .35rem; list-style: none;
    background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(20, 20, 26, .14); max-height: 70vh; overflow-y: auto; }
.sugerencias[hidden] { display: none; }
.sugerencias a { display: flex; align-items: center; gap: .75rem; padding: .5rem .6rem; border-radius: calc(var(--radius) - 2px); color: var(--ink); text-decoration: none; min-height: 44px; }
.sugerencias a:hover, .sugerencias a.activa { background: var(--canvas-alt); }
.sugerencias img { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; background: var(--canvas-alt); flex: none; }
.sugerencias a > span { display: flex; flex-direction: column; min-width: 0; }
.sug-nombre { font-size: .875rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sug-precio { font-size: .8125rem; color: var(--muted); }
.sugerencias .sug-todos { justify-content: center; font-size: .8125rem; font-weight: 600; border-top: 1px solid var(--line); border-radius: 0 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px); margin-top: .25rem; }
@media (prefers-reduced-motion: no-preference) { .sugerencias:not([hidden]) { animation: sug-entra .12s ease-out; } }
@keyframes sug-entra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.store-search .form-control {
    border: 1px solid var(--line);
    border-right: 0;
    border-radius: var(--radius) 0 0 var(--radius);
    background: var(--canvas);
    font-size: .875rem;
    padding: .55rem .9rem;
    min-width: 0;
}
.store-search .form-control::placeholder { color: var(--muted); }
.store-search .form-control:focus { background: var(--paper); border-color: var(--ink); }
.store-search .btn {
    border: 1px solid var(--line);
    border-left: 0;
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--canvas);
    color: var(--ink);
    padding-inline: .85rem;
}
.store-search .btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.store-search:focus-within .form-control,
.store-search:focus-within .btn { border-color: var(--ink); }

.header-icon-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px;
    border: 0; border-radius: var(--radius);
    background: transparent; color: var(--ink);
    font-size: 1.05rem; text-decoration: none;
    transition: color .18s var(--ease), background-color .18s var(--ease);
}
.header-icon-link:hover, .header-icon-link:focus { background: var(--canvas-alt); color: var(--ink); }
.header-icon-link.dropdown-toggle::after { margin-left: .35rem; }

.cart-count {
    position: absolute; top: 2px; right: 0;
    display: grid; place-items: center;
    min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 999px;
    background: var(--ink); color: var(--paper);
    font-size: .72rem; font-weight: 600; letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

/* Navegación principal */
.store-nav { gap: 0; }
.store-nav .nav-link {
    position: relative;
    padding: .95rem .85rem;
    color: var(--ink);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.store-nav .nav-link::after {
    content: '';
    position: absolute; left: .85rem; right: .85rem; bottom: .55rem;
    height: 1px; background: var(--ink);
    transform: scaleX(0); transform-origin: left;
    transition: transform .25s var(--ease);
}
.store-nav .nav-link:hover::after,
.store-nav .nav-link:focus-visible::after { transform: scaleX(1); }
.store-nav .nav-link.dropdown-toggle::after { content: none; }
.store-nav .nav-link-sale { color: var(--accent); }
.store-nav .nav-link-sale::after { background: var(--accent); }

.navbar { padding-block: 0; }

/* Menús desplegables */
.dropdown-menu {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: .5rem 0;
    font-size: .84rem;
    min-width: 12rem;
}
.dropdown-item { padding: .5rem 1.1rem; color: var(--ink-soft); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--canvas); color: var(--ink); }
.dropdown-header {
    font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); padding: .5rem 1.1rem;
}
.dropdown-divider { border-color: var(--line); }
.dropdown-submenu { position: relative; }
.dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: -.5rem; }
.dropdown-submenu.show > .dropdown-menu,
.dropdown-submenu:hover > .dropdown-menu { display: block; }

@media (max-width: 991.98px) {
    .store-nav { padding: .5rem 0 1rem; }
    .store-nav .nav-link { padding-left: 0; padding-block: .6rem; }
    .store-nav .nav-link::after { left: 0; right: auto; width: 1.5rem; bottom: .3rem; }
    .dropdown-submenu > .dropdown-menu { left: 0; margin-left: 1rem; }
}

/* ==========================================================================
   Hero / carrusel
   ========================================================================== */

.carousel { border-radius: 0; }
.hero-slide { background: var(--canvas-alt); }
.hero-media { height: clamp(320px, 42vw, 520px); width: 100%; object-fit: cover; }
.hero-body { padding: clamp(1.75rem, 4vw, 3.5rem); }
/* El color del carrusel lo elige el administrador por banner (ver la tabla
   `banners`). Estas reglas tenian el blanco escrito a mano porque daban por
   supuesto un fondo siempre oscuro; sobre un fondo claro el texto quedaba
   ilegible. Con `inherit` siguen al color elegido, y con `opacity` conservan
   exactamente la misma atenuacion que antes tenian sobre fondo oscuro. */
.hero-title {
    color: inherit;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);
    line-height: 1.06;
    letter-spacing: -.02em;
    margin-bottom: .75rem;
}
.hero-text { color: inherit; opacity: .78; max-width: 38ch; margin-bottom: 1.75rem; }
.carousel-indicators { margin-bottom: 1rem; }

/* La linea visible mide 2px de alto, pero el area que responde al dedo debe
   llegar a 24px. Se consigue con un pseudoelemento transparente centrado sobre
   el indicador: el diseno no cambia y el objetivo tactil cumple. Agrandar el
   propio boton habria engordado la linea. */
.carousel-indicators [data-bs-target] {
    position: relative;
    width: 28px; height: 2px; border: 0; opacity: .35;
    background-color: var(--paper);
    background-clip: padding-box;
    transition: opacity .2s var(--ease);
}
.carousel-indicators [data-bs-target]::before {
    content: '';
    position: absolute;
    top: 50%; left: 0;
    width: 100%; height: 24px;
    transform: translateY(-50%);
}
.carousel-indicators .active { opacity: 1; }

/* Foco visible: sin esto el indicador activo por teclado era indistinguible. */
.carousel-indicators [data-bs-target]:focus-visible {
    outline: 2px solid var(--paper);
    outline-offset: 6px;
    opacity: 1;
}

.carousel-control-prev, .carousel-control-next { width: 8%; opacity: .55; }
.carousel-control-prev:hover, .carousel-control-next:hover { opacity: 1; }
.carousel-control-prev:focus-visible, .carousel-control-next:focus-visible {
    opacity: 1;
    outline: 2px solid var(--paper);
    outline-offset: -8px;
}

/* En movil los controles laterales se solapan con el gesto de deslizar y son
   demasiado estrechos para acertar: se ocultan y quedan los indicadores. */
@media (max-width: 575.98px) {
    .carousel-control-prev, .carousel-control-next { display: none; }
    .carousel-indicators [data-bs-target] { width: 32px; }
    .carousel-indicators [data-bs-target]::before { height: 28px; }
}

/* ==========================================================================
   Botones
   ========================================================================== */

.btn {
    --bs-btn-border-radius: var(--radius);
    font-family: var(--font-ui);
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .8rem 1.6rem;
    border-width: 1px;
    transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
    touch-action: manipulation;
}
.btn-lg { padding: .95rem 2rem; font-size: .78rem; }
.btn-sm { padding: .5rem .9rem; font-size: .72rem; letter-spacing: .08em; }

.btn-dark, .btn-primary {
    --bs-btn-bg: var(--ink); --bs-btn-border-color: var(--ink);
    --bs-btn-hover-bg: #2c2c36; --bs-btn-hover-border-color: #2c2c36;
    --bs-btn-active-bg: #000; --bs-btn-active-border-color: #000;
    --bs-btn-disabled-bg: var(--line-strong); --bs-btn-disabled-border-color: var(--line-strong);
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff;
}
.btn-outline-dark, .btn-outline-primary {
    --bs-btn-color: var(--ink); --bs-btn-border-color: var(--line-strong);
    --bs-btn-hover-bg: var(--ink); --bs-btn-hover-border-color: var(--ink); --bs-btn-hover-color: #fff;
}
.btn-light {
    --bs-btn-bg: #fff; --bs-btn-border-color: #fff; --bs-btn-color: var(--ink);
    --bs-btn-hover-bg: var(--canvas-alt); --bs-btn-hover-border-color: var(--canvas-alt);
}
.btn-success {
    --bs-btn-bg: var(--ink); --bs-btn-border-color: var(--ink);
    --bs-btn-hover-bg: #2c2c36; --bs-btn-hover-border-color: #2c2c36;
}
.btn-danger, .btn-outline-danger { --bs-btn-border-radius: var(--radius); }
.btn-outline-danger {
    --bs-btn-color: var(--accent); --bs-btn-border-color: var(--line-strong);
    --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent);
}

/* Enlace de texto subrayado, para acciones secundarias */
.link-quiet {
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 1px;
    transition: color .18s var(--ease), border-color .18s var(--ease);
}
.link-quiet:hover { color: var(--ink); border-color: var(--ink); }

/* ==========================================================================
   Encabezado de sección y filtros
   ========================================================================== */

.section-head { margin-bottom: var(--space-8); }
.section-head h1 { margin-bottom: .35rem; }
.section-count { font-size: .8rem; color: var(--muted); }

.filter-bar {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: var(--space-4) 0;
    margin-bottom: var(--space-3);
}
.filter-bar .form-label {
    font-size: .72rem; font-weight: 500; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted); margin-bottom: .4rem;
}
.filter-bar .form-control,
.filter-bar .form-select,
.filter-bar .input-group-text {
    border-color: var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    font-size: .875rem;
    padding-block: .5rem;
}
.filter-bar .input-group-text { color: var(--muted); background: var(--canvas); }

/* ==========================================================================
   Tarjeta de producto
   ========================================================================== */

.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: transparent;
    border: 0;
}

.product-media {
    position: relative;
    overflow: hidden;
    background: var(--canvas);
    aspect-ratio: 3 / 4;
    border-radius: var(--radius);
}
.product-media img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 8%;
    transition: transform .6s var(--ease);
}
.product-card:hover .product-media img { transform: scale(1.04); }

.product-flag {
    position: absolute; top: .75rem; left: .75rem; z-index: 2;
    background: var(--ink); color: var(--paper);
    font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
    padding: .3rem .55rem; border-radius: var(--radius);
}
.product-flag--sale { background: var(--accent); }
.product-flag--out { background: var(--paper); color: var(--ink-soft); border: 1px solid var(--line-strong); }
.product-flag--few { background: var(--paper); color: #9a4b00; border: 1px solid #e4c9a8; }

.product-fav {
    position: absolute; top: .5rem; right: .5rem; z-index: 2; margin: 0;
}
.product-fav button {
    display: grid; place-items: center;
    width: 34px; height: 34px; padding: 0;
    border: 0; border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    color: var(--ink-soft);
    font-size: .9rem;
    opacity: 0;
    transition: opacity .2s var(--ease), color .2s var(--ease);
}
.product-card:hover .product-fav button,
.product-fav button:focus-visible { opacity: 1; }
.product-fav button:hover { color: var(--accent); }

/* CTA que asciende sobre la imagen: se revela al pasar el cursor */
.product-cta {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    display: block;
    padding: .85rem;
    background: var(--ink);
    color: var(--paper);
    font-size: .7rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
    text-align: center; text-decoration: none;
    transform: translateY(100%);
    opacity: 0;
    transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.product-card:hover .product-cta,
.product-cta:focus-visible { transform: translateY(0); opacity: 1; }
.product-cta:hover { color: var(--paper); background: #2c2c36; }

.product-info { padding: var(--space-4) 0 0; }
.product-name {
    font-size: .9rem; font-weight: 500; line-height: 1.4;
    margin-bottom: .25rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-name a { color: var(--ink); text-decoration: none; }
.product-name a:hover { color: var(--ink-soft); }
.product-price { font-size: .9rem; color: var(--ink-soft); margin: 0; font-variant-numeric: tabular-nums; }
.product-price del { color: var(--muted); margin-right: .4rem; }

/* Táctil o pantalla pequeña: la CTA nunca puede depender del hover */
@media (hover: none), (max-width: 991.98px) {
    .product-cta { position: static; transform: none; opacity: 1; margin-top: var(--space-3); border-radius: var(--radius); }
    .product-fav button { opacity: 1; }
}

/* ==========================================================================
   Paginación
   ========================================================================== */

.pagination { gap: .25rem; }
.page-link {
    border: 0;
    min-width: 38px;
    padding: .5rem .6rem;
    color: var(--ink-soft);
    background: transparent;
    font-size: .82rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    border-radius: var(--radius);
}
.page-link:hover { background: var(--canvas-alt); color: var(--ink); }
.page-item.active .page-link {
    background: transparent; color: var(--ink); font-weight: 600;
    box-shadow: inset 0 -1px 0 0 var(--ink);
}
.page-item.disabled .page-link { color: var(--line-strong); background: transparent; }

/* ==========================================================================
   Ficha de producto
   ========================================================================== */

.breadcrumb { font-size: .76rem; letter-spacing: .04em; margin-bottom: var(--space-8); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb-item.active { color: var(--ink-soft); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--line-strong); }

#mainImage {
    width: 100%;
    /* height: auto anula el atributo height="1000" (pista de presentacion): sin esto la foto media 1000 px
       fijos en cualquier pantalla y el nombre y el precio quedaban dos pantallas mas abajo en el movil. */
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: contain;
    background: var(--canvas);
    padding: 5%;
    border: 0 !important;
    border-radius: var(--radius);
    box-shadow: none !important;
}
#tallaSelect { min-width: 11rem; }
.img-thumbnail {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 4px;
    background: var(--canvas);
}
.thumb-active, .img-thumbnail:hover { border-color: var(--ink); }

#productPrice {
    font-family: var(--font-ui);
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--ink) !important;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

/* Opiniones */
.nav-tabs { border-bottom: 1px solid var(--line); }
.nav-tabs .nav-link {
    border: 0; border-bottom: 1px solid transparent;
    color: var(--muted);
    font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
    padding: .85rem 0; margin-right: 1.75rem;
}
.nav-tabs .nav-link.active { color: var(--ink); background: transparent; border-bottom-color: var(--ink); }
.tab-content.bg-light { background: transparent !important; border: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }

.review-avatar {
    display: grid; place-items: center;
    width: 44px; height: 44px; border-radius: 999px;
    background: var(--canvas-alt); color: var(--ink-soft);
    font-size: 1rem; font-weight: 500; text-transform: uppercase;
}

/* ==========================================================================
   Checkout: resumen del pedido y medios de pago
   ========================================================================== */

.checkout-step {
    font-family: var(--font-ui);
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ink);
    padding-bottom: .75rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--line);
}

/* Resumen */
.order-summary { background: var(--canvas); border-radius: var(--radius); padding: 1.5rem; }
.summary-lines { list-style: none; padding: 0; margin: 0 0 1rem; }
.summary-lines li {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .5rem 0; font-size: .88rem;
    border-bottom: 1px solid var(--line);
}
.summary-item { min-width: 0; overflow-wrap: anywhere; }
.summary-qty { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: .35rem; }
.summary-amount { white-space: nowrap; font-variant-numeric: tabular-nums; }

.summary-totals { margin: 0; font-size: .88rem; }
.summary-totals > div { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; }
.summary-totals dt { font-weight: 400; color: var(--ink-soft); margin: 0; }
.summary-totals dd { margin: 0; font-variant-numeric: tabular-nums; min-width: 0; text-align: right; overflow-wrap: anywhere; }   /* sin nowrap: con el texto al 200 % empujaba la pagina hacia el costado */
.summary-totals .is-discount dd { color: var(--positive); }
.summary-totals .is-total {
    margin-top: .5rem; padding-top: .85rem;
    border-top: 1px solid var(--line-strong);
    font-size: 1.05rem;
}
.summary-totals .is-total dt { color: var(--ink); font-weight: 500; }
.summary-totals .is-total dd { font-weight: 600; }
.summary-currency { font-size: .7rem; color: var(--muted); margin-left: .3rem; letter-spacing: .06em; }

/* Medios de pago */
.payment-options { border: 0; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .6rem; }

.payment-option { position: relative; min-width: 0; overflow-wrap: anywhere; }
.payment-option input {
    position: absolute; top: 1.15rem; left: 1.1rem; margin: 0; z-index: 1;
}
.payment-option label {
    display: block;
    padding: 1rem 1.1rem 1rem 2.9rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.payment-option label:hover { border-color: var(--ink); }
.payment-option input:checked + label { border-color: var(--ink); background: var(--canvas); }
.payment-option input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; }

.payment-option-head { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.payment-option-head .bi { color: var(--brand-cyan); font-size: 1.05rem; }
.payment-option-name { font-weight: 500; font-size: .95rem; }
.payment-option-desc { display: block; font-size: .84rem; color: var(--ink-soft); margin-top: .25rem; }
.payment-option-note { display: block; font-size: .78rem; color: var(--muted); margin-top: .2rem; }

.payment-badge {
    font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
    padding: .2rem .45rem; border-radius: var(--radius);
    background: var(--canvas-alt); color: var(--muted);
}
.payment-badge--test { background: #fdf6e9; color: #7a5410; }

/* No disponible: se muestra, pero no se puede elegir */
.payment-option.is-unavailable label { cursor: not-allowed; background: var(--canvas); opacity: .62; }
.payment-option.is-unavailable label:hover { border-color: var(--line-strong); }
.payment-option.is-unavailable .payment-option-head .bi { color: var(--muted); }

.checkout-note { font-size: .78rem; color: var(--muted); text-align: center; margin: .75rem 0 0; }

/* ==========================================================================
   Página de resultado de pago
   ========================================================================== */

.payment-result { display: flex; justify-content: center; padding: var(--space-8) 0; }
.payment-result-card {
    width: 100%; max-width: 34rem; text-align: center;
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: clamp(1.75rem, 4vw, 3rem);
    background: var(--paper);
}
.payment-result-icon { font-size: 2.75rem; line-height: 1; display: block; margin-bottom: 1rem; }
.payment-result-card h1 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); margin-bottom: .5rem; }
.payment-result-text { color: var(--ink-soft); margin-bottom: 1.75rem; }

.payment-result-card.is-ok      .payment-result-icon { color: var(--positive); }
.payment-result-card.is-error   .payment-result-icon { color: var(--accent); }
.payment-result-card.is-pending .payment-result-icon { color: #b98900; }
.payment-result-card.is-neutral .payment-result-icon { color: var(--muted); }

.payment-result-data {
    margin: 0 0 1.75rem; text-align: left;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    padding: .5rem 0;
}
.payment-result-data > div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; font-size: .9rem; }
.payment-result-data dt { color: var(--muted); font-weight: 400; margin: 0; }
.payment-result-data dd { margin: 0; font-variant-numeric: tabular-nums; }

.payment-result-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.payment-result-actions .btn { flex: 1 1 12rem; }
.payment-result-note { font-size: .8rem; color: var(--muted); margin: 1.5rem 0 0; }

/* ==========================================================================
   Panel de pagos
   ========================================================================== */

.pagos-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: .75rem;
}
.pagos-kpi {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .9rem 1rem;
    background: var(--paper);
}
.pagos-kpi.is-alert { border-color: var(--accent); background: var(--accent-soft); }
.pagos-kpi-n { display: block; font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.pagos-kpi-t { display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: .25rem; }
.pagos-kpi.is-alert .pagos-kpi-n { color: var(--accent); }

.pago-estado {
    display: inline-block;
    font-size: .7rem; font-weight: 500; letter-spacing: .06em;
    padding: .25rem .5rem; border-radius: var(--radius);
    background: var(--canvas-alt); color: var(--ink-soft);
    white-space: nowrap;
}
.pago-estado.is-ok    { background: #eaf3ee; color: var(--positive); }
.pago-estado.is-warn  { background: #fdf6e9; color: #7a5410; }
.pago-estado.is-error { background: var(--accent-soft); color: var(--accent); }

/* ==========================================================================
   Formularios
   ========================================================================== */

.form-label { font-size: .78rem; font-weight: 500; color: var(--ink-soft); margin-bottom: .4rem; }
.form-control, .form-select {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: .7rem .9rem;
    font-size: .9rem;
    color: var(--ink);
    background-color: var(--paper);
}
.form-control::placeholder { color: var(--muted); }
.form-select:disabled { background-color: var(--canvas-alt); color: var(--muted); }
.form-text { font-size: .78rem; color: var(--muted); }
.form-check-input:checked { background-color: var(--ink); border-color: var(--ink); }
.form-check-input:focus { border-color: var(--ink); box-shadow: none; }
.form-check-label { font-size: .88rem; }

/* ==========================================================================
   Tarjetas, tablas y avisos (carrito, cuenta, panel)
   ========================================================================== */

.card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
}
.card.shadow, .card.shadow-sm { box-shadow: var(--shadow-soft) !important; }
.card-header {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    font-size: .74rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
    padding: 1rem 1.25rem;
}
.card-header.bg-dark { background: var(--ink) !important; }

/* Tarjeta de color (bg-success, bg-primary, bg-dark) con texto blanco: la
   cabecera heredaba el fondo claro de arriba y el titulo quedaba blanco sobre
   blanco, invisible. Debe dejar pasar el color de la tarjeta. */
.card.text-white > .card-header {
    background: transparent;
    border-bottom-color: rgba(255, 255, 255, .25);
}

/* ==========================================================================
   Panel de administracion
   Misma paleta que la tienda: monocromo calido, filetes finos y cifras en la
   serif. La jerarquia se construye con contraste y tamano, no con colores
   saturados; el acento queda reservado para lo que de verdad requiere accion.
   ========================================================================== */

.admin-head { margin-bottom: var(--space-8); }
.admin-head h1 { margin: 0; }

/* --- Metricas --- */
.admin-metric {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--space-6);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: border-color .2s var(--ease);
}
.admin-metric:hover { border-color: var(--line-strong); }

/* La metrica principal ancla la vista. Una sola, no tres compitiendo. */
.admin-metric--ink { background: var(--ink); border-color: var(--ink); }

.admin-metric-label {
    font-size: .72rem; font-weight: 500; letter-spacing: .16em;
    text-transform: uppercase; color: var(--muted);
    display: flex; align-items: center; gap: .45rem;
    margin-bottom: var(--space-4);
}
.admin-metric--ink .admin-metric-label { color: rgba(255,255,255,.55); }

.admin-metric-value {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 4vw, 2.9rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -.01em;
    color: var(--ink);
    margin: 0 0 var(--space-2);
    font-variant-numeric: tabular-nums;
}
.admin-metric--ink .admin-metric-value { color: var(--paper); }

.admin-metric-note { font-size: .82rem; color: var(--muted); margin: 0; }
.admin-metric--ink .admin-metric-note { color: rgba(255,255,255,.6); }

.admin-metric-link {
    margin-top: auto; padding-top: var(--space-4);
    font-size: .74rem; font-weight: 500; letter-spacing: .1em;
    text-transform: uppercase; text-decoration: none;
    color: var(--ink); align-self: flex-start;
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 2px;
    transition: border-color .2s var(--ease);
}
.admin-metric-link:hover { color: var(--ink); border-bottom-color: var(--ink); }
.admin-metric--ink .admin-metric-link { color: var(--paper); border-bottom-color: rgba(255,255,255,.4); }
.admin-metric--ink .admin-metric-link:hover { color: var(--paper); border-bottom-color: var(--paper); }

/* --- Paneles --- */
.admin-panel {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    /* Sin height:100% aqui: un panel que cuelga directo de la columna del layout se estiraba a
       toda la pagina. Los paneles en rejilla igualan altura con la clase h-100 de Bootstrap. */
    overflow: hidden;
}
.admin-panel-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--line);
    background: var(--canvas);
    font-size: .7rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink);
}
.admin-panel-head .admin-panel-meta {
    letter-spacing: .04em; text-transform: none; color: var(--muted); font-weight: 400;
}
.admin-panel-body { padding: var(--space-6); }

/* El acento solo cuando hay algo que atender. Sin alertas, el panel es neutro
   y no grita: una alarma permanente deja de leerse como alarma. */
.admin-panel--alerta { border-color: var(--line-strong); }
.admin-panel--alerta .admin-panel-head {
    background: var(--accent-soft); color: var(--accent); border-bottom-color: rgba(138,51,36,.18);
}

/* --- Lista de mas vendidos --- */
.admin-rank { list-style: none; margin: 0; padding: 0; }
.admin-rank li {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-6);
    border-bottom: 1px solid var(--line);
}
.admin-rank li:last-child { border-bottom: 0; }
.admin-rank img { width: 40px; height: 40px; object-fit: cover; border-radius: var(--radius); flex: 0 0 auto; }
.admin-rank-nombre { font-size: .86rem; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-rank-n {
    font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.admin-rank-vacio { padding: var(--space-6); color: var(--muted); font-size: .86rem; text-align: center; }

/* --- Stock --- */
.admin-stock-n { color: var(--accent); font-weight: 500; font-variant-numeric: tabular-nums; }
.admin-ok { color: var(--positive); font-size: .88rem; margin: 0; }

@media (max-width: 575.98px) {
    .admin-metric, .admin-panel-body { padding: var(--space-4); }
    .admin-panel-head { padding: var(--space-3) var(--space-4); }
    .admin-rank li { padding-left: var(--space-4); padding-right: var(--space-4); }
}

.table { --bs-table-border-color: var(--line); font-size: .88rem; }
.table > :not(caption) > * > * { padding: .85rem .75rem; }
.table thead th {
    font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted); background: var(--canvas); border-bottom: 1px solid var(--line);
}
.table-dark, .table thead.table-dark th { background: var(--ink) !important; color: var(--paper) !important; }
.table-hover > tbody > tr:hover > * { background-color: var(--canvas); }

.alert {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: .88rem;
    padding: .9rem 1.1rem;
}
.alert-success { background: #f1f6f3; border-color: #d5e5db; color: var(--positive); }
.alert-danger  { background: var(--accent-soft); border-color: #ecd5d0; color: var(--accent); }
.alert-warning { background: #fdf6e9; border-color: #efe0c4; color: #7a5410; }
.alert-info, .alert-secondary { background: var(--canvas); border-color: var(--line); color: var(--ink-soft); }

.badge { font-weight: 500; letter-spacing: .08em; border-radius: var(--radius); padding: .35em .6em; }
.bg-danger { background-color: var(--accent) !important; }

/* Bootstrap pinta .text-primary de azul #0d6efd, ajeno a la paleta.
   Regla: los iconos toman el cian de marca; el texto vuelve a tinta. */
.text-primary { color: var(--ink) !important; }
.bi.text-primary, .icon-brand { color: var(--brand-cyan) !important; }

/* ==========================================================================
   Pie de página
   ========================================================================== */

.store-footer {
    background: var(--canvas);
    border-top: 1px solid var(--line);
    padding-top: var(--space-12);
    padding-bottom: env(safe-area-inset-bottom);
}
.store-footer .footer-title {
    font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink); margin-bottom: var(--space-4);
}
.store-footer ul { list-style: none; padding: 0; margin: 0; }
.store-footer li + li { margin-top: .55rem; }
.store-footer a { color: var(--ink-soft); text-decoration: none; font-size: .86rem; }
.store-footer a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.store-footer .footer-note { font-size: .86rem; color: var(--muted); max-width: 34ch; }
.store-footer-copy {
    border-top: 1px solid var(--line);
    margin-top: var(--space-12);
    padding: var(--space-6) 0;
    font-size: .78rem;
    color: var(--muted);
}
.footer-logo { height: 30px; width: auto; filter: grayscale(1); opacity: .65; }

/* --- Credito del pie ---
   El logotipo va en gris, no en el cian de marca: aqui es una firma, no la
   cabecera. Se remarca con peso y espaciado para que se lea como marca y no
   se confunda con el texto legal que tiene al lado. */
.footer-credit { display: inline-flex; align-items: center; gap: .5rem; }
.footer-credit-mark {
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: .14em;
}
/* Credito en dos grises, sin cian y dos tonos mas claros que la version
   anterior. "Sa" queda en 4.7:1 sobre blanco y cumple el minimo; "Simp" y
   "le" bajan a 2.7:1, por debajo de ese minimo. Se acepta por decision de
   diseno: es una firma decorativa y el nombre de la tienda se lee completo
   en el logotipo grande del pie, a tamano mayor y con contraste de sobra. */
.footer-credit-mark .wm-ink    { color: #73737d; }
.footer-credit-mark .wm-accent { color: #9d9da5; }
.footer-credit-logo { height: 22px; width: auto; filter: grayscale(1); opacity: .8; }
@media (max-width: 575.98px) { .footer-credit-mark { font-size: .9rem; } }

/* --- Boton flotante de WhatsApp ---
   Verde de marca de WhatsApp: es el unico color saturado de la tienda, y se
   permite porque identifica un servicio externo que la gente reconoce de
   inmediato. Sin animacion en bucle ni burbujas parpadeantes: la elegancia
   aqui es estar disponible sin reclamar atencion. */
/* Los dos botones flotantes se apilan en la misma columna a la derecha. El
   margen al borde y el diametro viven en variables para que el asistente
   pueda calcular su posicion a partir del de WhatsApp: si cambia uno, el otro
   se recoloca solo y la separacion de 30px se mantiene. */
:root {
    --wa-green: #25d366;
    --wa-green-dark: #1da851;
    --float-margen: clamp(1rem, 3vw, 1.75rem);
    --float-diametro: 54px;
    --float-separacion: 30px;
}

.wa-float {
    position: fixed;
    right: var(--float-margen);
    bottom: calc(var(--float-margen) + env(safe-area-inset-bottom, 0px));
    z-index: 1030;                     /* bajo los modales de Bootstrap (1055) */
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
}
.wa-float-btn {
    display: grid;
    place-items: center;
    width: var(--float-diametro); height: var(--float-diametro);
    border-radius: 50%;
    background: var(--wa-green);
    color: #fff;
    box-shadow: 0 2px 6px rgba(20,20,26,.14), 0 10px 28px rgba(37,211,102,.28);
    /* 80% opaco: se integra con la pagina en reposo y se vuelve solido al
       apuntarlo, para que al ir a pulsarlo no quede lavado. */
    opacity: .8;
    transition: transform .25s var(--ease), background .25s var(--ease),
                box-shadow .25s var(--ease), opacity .25s var(--ease);
}
.wa-float:hover .wa-float-btn,
.wa-float:focus-visible .wa-float-btn {
    background: var(--wa-green-dark);
    transform: translateY(-2px);
    opacity: 1;
    box-shadow: 0 4px 10px rgba(20,20,26,.16), 0 14px 34px rgba(37,211,102,.34);
}
.wa-float:focus-visible { outline: none; }
.wa-float:focus-visible .wa-float-btn { outline: 2px solid var(--ink); outline-offset: 3px; }

/* La etiqueta se despliega al pasar el raton, no de entrada: el icono ya se
   entiende solo y un cartel permanente tapa el contenido. */
.wa-float-tip {
    background: var(--ink);
    color: var(--paper);
    font-size: .78rem;
    letter-spacing: .02em;
    white-space: nowrap;
    padding: .5rem .85rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    opacity: 0;
    transform: translateX(8px);
    pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.wa-float:hover .wa-float-tip,
.wa-float:focus-visible .wa-float-tip { opacity: 1; transform: translateX(0); }

@media (max-width: 767.98px) {
    :root { --float-diametro: 50px; }
    .wa-float-tip { display: none; }   /* sin raton no hay hover que la revele */
}

@media (prefers-reduced-motion: reduce) {
    .wa-float-btn, .wa-float-tip { transition: none; }
    .wa-float:hover .wa-float-btn { transform: none; }
}

/* ==========================================================================
   Asistente de la tienda
   Se apila 30px por encima del boton de WhatsApp, en la misma columna. Va en
   tinta y no en verde: son dos canales distintos y deben distinguirse de un
   vistazo.
   ========================================================================== */

.cb {
    position: fixed;
    right: var(--float-margen);
    /* Margen inferior + zona segura + el boton de WhatsApp + la separacion. */
    bottom: calc(var(--float-margen) + env(safe-area-inset-bottom, 0px)
                 + var(--float-diametro) + var(--float-separacion));
    z-index: 1030;
    display: flex;
    flex-direction: column;
    align-items: flex-end;             /* el panel crece hacia la izquierda */
}

/* Circulo negro del mismo diametro que el de WhatsApp: los dos flotantes
   comparten forma y tamano, y se distinguen solo por el color. La etiqueta
   deja de ocupar sitio y pasa a ser un rotulo que aparece al apuntar, igual
   que en el boton verde. */
.cb-launcher {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--float-diametro);
    height: var(--float-diametro);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ink);
    color: var(--paper);
    box-shadow: 0 2px 6px rgba(20,20,26,.14), 0 10px 28px rgba(20,20,26,.16);
    cursor: pointer;
    /* Mismo criterio que el boton de WhatsApp: 80% en reposo, solido al
       apuntarlo. Los dos flotantes deben comportarse igual. */
    opacity: .8;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), opacity .25s var(--ease);
}
.cb-launcher:hover,
.cb-launcher:focus-visible { opacity: 1; }
.cb-launcher:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(20,20,26,.18), 0 14px 34px rgba(20,20,26,.2); }
.cb-launcher:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.cb-launcher i { font-size: 1.25rem; line-height: 1; }
.cb.is-open .cb-launcher { display: none; }

.cb-launcher-txt {
    position: absolute;
    right: calc(100% + .6rem);
    top: 50%;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-ui);
    font-size: .78rem;
    font-weight: 400;
    letter-spacing: .02em;
    white-space: nowrap;
    padding: .5rem .85rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    opacity: 0;
    transform: translateY(-50%) translateX(8px);
    pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.cb-launcher:hover .cb-launcher-txt,
.cb-launcher:focus-visible .cb-launcher-txt { opacity: 1; transform: translateY(-50%) translateX(0); }

.cb-panel {
    width: min(360px, calc(100vw - 2rem));
    /* Arranca por encima del boton de WhatsApp, asi que hay que descontar esa
       altura ademas de los margenes; si no, el panel se sale por arriba. */
    max-height: min(560px, calc(100vh - var(--float-margen) * 2
                                 - var(--float-diametro) - var(--float-separacion) - 1rem));
    /* iPhone: 100vh es la altura SIN la barra de Safari; dvh (iOS 15.4+) es la visible. Safari antiguo ignora esta linea y conserva la de arriba. */
    max-height: min(560px, calc(100dvh - var(--float-margen) * 2
                                 - var(--float-diametro) - var(--float-separacion) - 1rem));
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(20,20,26,.1), 0 24px 60px rgba(20,20,26,.18);
    overflow: hidden;
}
.cb-panel[hidden] { display: none; }

.cb-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-4) var(--space-4) var(--space-3);
    background: var(--ink);
    color: var(--paper);
}
.cb-title { margin: 0; font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; }
.cb-sub { margin: .15rem 0 0; font-size: .74rem; color: rgba(255,255,255,.6); }
.cb-close {
    border: 0; background: transparent; color: rgba(255,255,255,.7);
    padding: .2rem; cursor: pointer; line-height: 1; border-radius: var(--radius);
}
.cb-close:hover { color: var(--paper); }
.cb-close:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }

.cb-log {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--space-4);
    background: var(--canvas);
    display: flex; flex-direction: column; gap: var(--space-3);
    scroll-behavior: smooth;
}
.cb-msg { max-width: 88%; }
.cb-msg p {
    margin: 0;
    padding: .65rem .85rem;
    font-size: .85rem;
    line-height: 1.55;
    border-radius: var(--radius);
}
.cb-msg--bot { align-self: flex-start; }
.cb-msg--bot p { background: var(--paper); border: 1px solid var(--line); color: var(--ink); }
.cb-msg--yo { align-self: flex-end; }
.cb-msg--yo p { background: var(--ink); color: var(--paper); }

/* En bloque y no en linea: dentro de una burbuja estrecha varios enlaces
   seguidos se parten a mitad de palabra y quedan con sangrias distintas. */
.cb-link {
    display: block;
    width: fit-content;
    margin-top: .45rem;
    font-size: .76rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink); text-decoration: none;
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 2px;
    word-break: break-word;
}
.cb-link:hover { color: var(--ink); border-bottom-color: var(--ink); }
.cb-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.cb-opciones {
    display: flex; flex-direction: column; gap: .4rem;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--line);
    background: var(--paper);
    max-height: 12.5rem;
    overflow-y: auto;
}
.cb-op {
    text-align: left;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    border-radius: var(--radius);
    padding: .55rem .8rem;
    font-family: var(--font-ui);
    font-size: .82rem;
    cursor: pointer;
    transition: border-color .2s var(--ease), background .2s var(--ease);
}
.cb-op:hover { border-color: var(--ink); background: var(--canvas); }
.cb-op:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.cb-op--humano { border-color: var(--line-strong); font-weight: 500; }
.cb-op--humano:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cb-op--suave { color: var(--muted); }

.cb-foot {
    padding: .6rem var(--space-4) .75rem;
    border-top: 1px solid var(--line);
    background: var(--canvas);
}
.cb-foot p { margin: 0; font-size: .72rem; color: var(--muted); line-height: 1.5; }

@media (max-width: 767.98px) {
    /* Sin raton no hay hover que revele el rotulo. El diametro ya viene de
       --float-diametro, que el bloque movil reduce a 50px. */
    .cb-launcher-txt { display: none; }
    .cb-launcher i { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
    .cb-launcher { transition: none; }
    .cb-launcher:hover { transform: none; }
    .cb-log { scroll-behavior: auto; }
}

/* Quien pide mas contraste no deberia recibir botones semitransparentes. */
@media (prefers-contrast: more) {
    .cb-launcher, .wa-float-btn { opacity: 1; }
}

/* --- Boletin ------------------------------------------------------------
   Banda oscura sobre el pie claro: separa la unica accion del pie del resto,
   que son enlaces. Sin acento de color, para no competir con las rebajas. */
.newsletter-band {
    background: var(--ink);
    color: var(--paper);
    border-radius: var(--radius);
    padding: var(--space-8);
    margin-bottom: var(--space-12);
}
.newsletter-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 400;
    margin: 0 0 var(--space-2);
    color: var(--paper);
}
.newsletter-note { font-size: .88rem; color: rgba(255,255,255,.72); max-width: 42ch; }
.newsletter-form { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.newsletter-form .form-control {
    flex: 1 1 240px;
    min-width: 0;
    border: 1px solid rgba(255,255,255,.28);
    background: rgba(255,255,255,.06);
    color: var(--paper);
    border-radius: var(--radius);
    font-size: .9rem;
    padding: .7rem .9rem;
}
.newsletter-form .form-control::placeholder { color: rgba(255,255,255,.45); }
.newsletter-form .form-control:focus {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.6);
    color: var(--paper);
    box-shadow: none;
}
.newsletter-form .btn {
    border-radius: var(--radius);
    padding: .7rem 1.6rem;
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 500;
    flex: 0 0 auto;
}

/* Trampa para bots: fuera de la vista sin usar display:none, que algunos
   rellenadores automaticos detectan y omiten. */
.newsletter-trap {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

.newsletter-msg { margin: var(--space-3) 0 0; font-size: .84rem; }
.newsletter-msg--success { color: #8fe3b8; }
.newsletter-msg--info    { color: rgba(255,255,255,.75); }
.newsletter-msg--error   { color: #f3b5ab; }

@media (max-width: 575.98px) {
    .newsletter-band { padding: var(--space-6); }
    .newsletter-title { font-size: 1.45rem; }
    .newsletter-form .btn { width: 100%; }
}

/* ==========================================================================
   Estado vacío
   ========================================================================== */

.empty-state { padding: var(--space-16) 0; text-align: center; }
.empty-state h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; }
.empty-state p { color: var(--muted); }

/* ==========================================================================
   Movimiento reducido
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .product-card:hover .product-media img { transform: none; }
    .product-cta { transform: translateY(0); opacity: 1; }
}

/* Objetivos tactiles: WCAG 2.2 AA pide 24x24 px como minimo. Los enlaces sueltos
   del pie, las migas y el menu movil median 16-19 px de alto. */
.store-footer a, .breadcrumb a { display: inline-block; padding-block: .3rem; }
.navbar-toggler { min-width: 44px; min-height: 44px; }

/* Paginación: «Anterior/Siguiente» inactivos y los puntos suspensivos con el gris de texto de la
   tienda (Bootstrap los deja a ~1,5:1 sobre blanco, ilegibles). */
.pagination .page-item.disabled .page-link { color: var(--muted); background-color: transparent; }

/* Tablero: barras del embudo, listas de datos y variaciones */
.admin-barras li { margin-bottom: .6rem; }
.admin-barra { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.admin-barra-relleno { height: 100%; background: var(--ink); }
.admin-barra-relleno.is-perdida { background: var(--accent); }
.admin-datos { display: grid; grid-template-columns: 1fr auto; row-gap: .45rem; column-gap: 1rem; font-size: .9rem; }
.admin-datos dt { font-weight: 500; color: var(--muted); }
.admin-datos dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.admin-var-up { color: var(--positive) !important; }
.admin-var-down { color: var(--accent) !important; }
.admin-metric--ink .admin-var-up, .admin-metric--ink .admin-var-down { color: rgba(255,255,255,.85) !important; }
/* Chart.js con maintainAspectRatio:false exige un contenedor de altura fija: sin el, el lienzo crece sin parar */
.admin-grafico { position: relative; height: 320px; width: 100%; }

/* Mapa de la tienda (portada y vista previa del panel): marco 16:9 con el iframe dentro */
.store-map-frame { position: relative; aspect-ratio: 16 / 9; min-height: 240px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--canvas); }
.store-map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Seguimiento del pedido: barra de avance (antes era un <style> dentro de la vista) */
.tracking-track { position: relative; background: #ddd; height: 5px; display: flex; margin: 25px 0 50px; }
.tracking-bar { position: absolute; left: 0; top: 0; height: 100%; background: #0d6efd; width: 0; transition: width .5s; }
.tracking-step { flex-grow: 1; width: 20%; margin-top: -12px; text-align: center; position: relative; }
.tracking-step .icon { display: inline-block; width: 30px; height: 30px; line-height: 30px; position: relative; border-radius: 100%; background: #ddd; color: #fff; }
.tracking-step .text { display: block; margin-top: 7px; font-size: 12px; color: #999; }
.tracking-step.active .icon { background: #0d6efd; }
.tracking-step.active .text { font-weight: bold; color: #000; }

/* «¿Donde esta mi pedido?»: tarjeta de situacion */
.situacion-pedido { border-left: 4px solid #0d6efd !important; }
.situacion-pedido .situacion-icono { font-size: 2.4rem; line-height: 1; color: #0d6efd; }
.situacion-cerrada { border-left-color: #6c757d !important; }
.situacion-cerrada .situacion-icono { color: #6c757d; }
.situacion-atrasada { border-left-color: #dc3545 !important; }
.situacion-atrasada .situacion-icono { color: #dc3545; }


/* ==========================================================================
   Tema editable (Diseño de la tienda)
   Los valores llegan como variables desde <style nonce> en la cabecera
   (Tema::css): aqui solo se ENGANCHAN. Sin tema publicado, valen los de :root.
   ========================================================================== */

h1, h2 { font-weight: var(--display-peso, 400); }
h1 { letter-spacing: var(--display-espaciado, -.015em); }
.btn { --bs-btn-border-radius: var(--radius-boton, var(--radius)); }
.btn-dark, .btn-primary, .btn-success {
    --bs-btn-bg: var(--boton-fondo, var(--ink)); --bs-btn-border-color: var(--boton-fondo, var(--ink));
    --bs-btn-color: var(--boton-texto, #fff); --bs-btn-hover-color: var(--boton-texto, #fff); --bs-btn-active-color: var(--boton-texto, #fff);
    --bs-btn-hover-bg: var(--boton-hover, #2c2c36); --bs-btn-hover-border-color: var(--boton-hover, #2c2c36);
    --bs-btn-active-bg: var(--boton-hover, #000); --bs-btn-active-border-color: var(--boton-hover, #000);
}
.btn-outline-dark, .btn-outline-primary {
    --bs-btn-color: var(--ink); --bs-btn-hover-bg: var(--boton-fondo, var(--ink));
    --bs-btn-hover-border-color: var(--boton-fondo, var(--ink)); --bs-btn-hover-color: var(--boton-texto, #fff);
}
.tema-botones-contorno .btn-dark, .tema-botones-contorno .btn-primary, .tema-botones-contorno .btn-success {
    --bs-btn-bg: transparent; --bs-btn-color: var(--boton-fondo, var(--ink)); --bs-btn-border-color: var(--boton-fondo, var(--ink));
    --bs-btn-hover-bg: var(--boton-fondo, var(--ink)); --bs-btn-hover-color: var(--boton-texto, #fff);
}
.product-cta { background: var(--boton-fondo, var(--ink)); color: var(--boton-texto, var(--paper)); }
.product-cta:hover { background: var(--boton-hover, #2c2c36); color: var(--boton-texto, var(--paper)); }
.cart-count { background: var(--boton-fondo, var(--ink)); color: var(--boton-texto, var(--paper)); }

/* Superficies de Bootstrap atadas a los tokens: un tema oscuro no deja tarjetas blancas */
.store-header .bg-white, .navbar.bg-white { background: var(--paper) !important; }
.store-header .navbar-light .navbar-toggler { color: var(--ink); }
.bg-light { background: var(--canvas) !important; }
.text-dark { color: var(--ink) !important; }
.card { --bs-card-bg: var(--paper); --bs-card-border-color: var(--line); --bs-card-color: var(--ink); }
.form-control, .form-select { background-color: var(--paper); color: var(--ink); border-color: var(--line); }
.form-control:focus, .form-select:focus { background-color: var(--paper); color: var(--ink); border-color: var(--ink); box-shadow: none; }
.table { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--line); }
.tema-oscuro .table-light { --bs-table-bg: var(--canvas-alt); --bs-table-color: var(--ink); }
.tema-oscuro .btn-light { --bs-btn-bg: var(--paper); --bs-btn-border-color: var(--line-strong); --bs-btn-color: var(--ink); --bs-btn-hover-bg: var(--canvas-alt); --bs-btn-hover-border-color: var(--canvas-alt); --bs-btn-hover-color: var(--ink); }
.tema-oscuro .product-fav button { background: rgba(0, 0, 0, .55); color: var(--ink); }
.tema-oscuro .dropdown-menu { --bs-dropdown-bg: var(--paper); --bs-dropdown-color: var(--ink); --bs-dropdown-link-color: var(--ink-soft); --bs-dropdown-link-hover-bg: var(--canvas); --bs-dropdown-link-hover-color: var(--ink); }
.tema-oscuro .alert { --bs-alert-bg: var(--canvas-alt); --bs-alert-color: var(--ink); --bs-alert-border-color: var(--line); }
.tema-oscuro .img-thumbnail { background: var(--canvas); border-color: var(--line); }
.tema-oscuro .modal-content { background: var(--paper); color: var(--ink); }
.tema-oscuro .carousel-indicators [data-bs-target] { background-color: var(--ink); }
.tema-oscuro .footer-logo, .tema-oscuro .footer-credit-logo { filter: grayscale(1) invert(1); }

/* Barra de vista previa del borrador (solo la ve el administrador) */
.tema-preview-bar {
    position: sticky; top: 0; z-index: 1041;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: .5rem 1rem; background: var(--accent); color: #fff; font-size: .82rem;
}
.tema-preview-bar a { color: #fff; text-decoration: underline; }

/* ==========================================================================
   Portada: secciones
   ========================================================================== */

.portada-seccion { margin-bottom: var(--space-16); }
.portada-seccion--hero { margin-bottom: var(--space-12); }
.hero--baja .hero-media { height: clamp(260px, 32vw, 400px); }
.hero--alta .hero-media { height: clamp(380px, 52vw, 640px); }
.section-head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.section-sub { color: var(--muted); font-size: .92rem; }

.prop-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-6) var(--space-8); padding: var(--space-6) 0;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.prop-item { display: flex; gap: 1rem; align-items: flex-start; }
.prop-icono { flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px; background: var(--canvas-alt); color: var(--ink); font-size: 1.25rem; }
.prop-titulo { font-family: var(--font-ui); font-size: .95rem; font-weight: 600; letter-spacing: 0; margin: .35rem 0 .25rem; }
.prop-texto { color: var(--muted); font-size: .86rem; }

.col-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (min-width: 768px) {
    .col-tiles { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
    .col-tiles--2 { grid-template-columns: repeat(2, 1fr); }
    .col-tiles--4 { grid-template-columns: repeat(4, 1fr); }
}
.col-tile { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--canvas-alt); text-decoration: none; }
.col-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.col-tile:hover img { transform: scale(1.05); }
.col-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 10, 12, .72), rgba(10, 10, 12, 0) 55%); }
.col-tile-vacio { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.5rem; color: var(--muted); }
.col-tile-info { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1rem; z-index: 1; display: flex; flex-direction: column; gap: .15rem; }
.col-tile-nombre { font-family: var(--font-display); font-weight: var(--display-peso, 400); font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem); line-height: 1.05; color: #fff; }
.col-tile-n { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.col-tile:hover .col-tile-nombre { text-decoration: underline; text-underline-offset: 4px; }

.promo-band { display: grid; border-radius: var(--radius); overflow: hidden; }
@media (min-width: 768px) { .promo-band--con-imagen { grid-template-columns: 1fr 1fr; } }
.promo-media img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; display: block; }
.promo-body { padding: clamp(2rem, 5vw, 4rem); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.promo-eyebrow { color: inherit; opacity: .75; }
.promo-titulo { color: inherit; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); margin-bottom: .75rem; }
.promo-texto { color: inherit; opacity: .85; max-width: 46ch; margin-bottom: 1.5rem; }

.opinion-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); }
.opinion-card { margin: 0; padding: var(--space-6); background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius); }
.opinion-stars { color: var(--accent); font-size: .8rem; letter-spacing: .1em; margin-bottom: .75rem; }
.opinion-texto { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.45; color: var(--ink); }
.opinion-autor { font-size: .82rem; color: var(--muted); }
.opinion-autor a { color: var(--ink-soft); }

.texto-bloque { max-width: 62ch; }
.texto-bloque--centro { margin-inline: auto; text-align: center; }
.texto-cuerpo { font-size: 1.02rem; line-height: 1.75; color: var(--ink-soft); }
.newsletter-band--portada { margin: 0; }

/* ==========================================================================
   Editor del tema
   ========================================================================== */

.tema-editor { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.tema-panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); max-height: calc(100vh - 140px); overflow: auto; }
.tema-panel-head { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--paper); z-index: 2; }
.tema-estado { display: flex; justify-content: space-between; gap: .5rem; padding: .6rem var(--space-4); font-size: .78rem; color: var(--muted); border-bottom: 1px solid var(--line); }
.tema-estado[data-hay-borrador="1"] [data-estado-texto] { color: var(--accent); font-weight: 600; }
.tema-acciones { display: flex; gap: .5rem; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.tema-avisos { margin: 0; padding: .6rem var(--space-4) .6rem 2rem; background: var(--accent-soft); color: var(--accent); font-size: .78rem; }
.tema-panel details { border-bottom: 1px solid var(--line); }
.tema-panel summary { cursor: pointer; padding: .9rem var(--space-4); font-weight: 600; font-size: .9rem; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.tema-panel summary::-webkit-details-marker { display: none; }
.tema-panel summary::after { content: "+"; color: var(--muted); }
.tema-panel details[open] > summary::after { content: "–"; }
.tema-cuerpo { padding: 0 var(--space-4) var(--space-4); }
.tema-panel .form-label { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .25rem; }
.tema-presets { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-bottom: var(--space-4); }
.tema-preset { display: flex; flex-direction: column; gap: .35rem; padding: .6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); text-align: left; cursor: pointer; color: var(--ink); }
.tema-preset:hover, .tema-preset.is-activo { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.tema-preset-muestras { display: flex; gap: 3px; }
.tema-preset-muestras span { width: 18px; height: 18px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, .1); }
.tema-preset-nombre { font-size: .82rem; font-weight: 600; }
.tema-preset-desc { font-size: .7rem; color: var(--muted); }
.tema-colores { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem .9rem; }
.tema-color { display: flex; align-items: center; gap: .5rem; font-size: .8rem; }
.tema-color input[type="color"] { width: 36px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: none; cursor: pointer; }
.tema-sec { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: .5rem; background: var(--paper); }
.tema-sec-head { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; }
.tema-sec-mover { display: inline-flex; flex-direction: column; gap: 2px; }
.tema-sec-mover button { width: 22px; height: 15px; padding: 0; border: 1px solid var(--line); background: var(--canvas); color: var(--ink); font-size: .55rem; line-height: 1; border-radius: 2px; }
.tema-sec-toggle { flex: 1; display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .86rem; font-weight: 500; cursor: pointer; }
.tema-sec-abrir { border: 0; background: none; color: var(--ink-soft); font-size: .74rem; text-decoration: underline; }
.tema-sec-campos { padding: .25rem .75rem .75rem; border-top: 1px solid var(--line); }
.tema-lista-item { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: .5rem .6rem; margin-bottom: .5rem; }
.tema-lista-item legend { font-size: .7rem; color: var(--muted); float: none; width: auto; padding: 0 .25rem; margin: 0; }
.tema-preview { position: sticky; top: 90px; }
.tema-preview-tools { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.tema-preview iframe { display: block; width: 100%; max-width: 100%; height: calc(100vh - 190px); min-height: 560px; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: width .25s var(--ease); }
@media (max-width: 991.98px) {
    .tema-editor { grid-template-columns: 1fr; }
    .tema-panel { max-height: none; }
    .tema-preview { position: static; }
}

/* Plantillas por rubro (editor) */
.tema-plantillas { display: grid; grid-template-columns: 1fr; gap: .5rem; }
.tema-plantilla { display: flex; flex-direction: column; gap: .3rem; margin: 0; padding: .65rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.tema-plantilla:hover { border-color: var(--ink); }
.tema-plantilla .btn { align-self: flex-start; margin-top: .25rem; }

/* ==========================================================================
   Vectores por rubro (config/vectores.php): hero ilustrado, iconos SVG, patron
   Los dibujos no llevan colores: fill/stroke van por estas clases y siguen al
   tema (sin style= ni var() en el HTML; la CSP no necesita nada nuevo).
   ========================================================================== */
.vf-accent { fill: var(--accent); }
.vf-accent-soft { fill: var(--accent-soft); }
.vf-ink { fill: var(--ink); }
.vf-paper { fill: var(--paper); }
.vf-boton-fondo { fill: var(--boton-fondo); }
.vs-accent { stroke: var(--accent); }
.vs-accent-soft { stroke: var(--accent-soft); }
.vs-ink { stroke: var(--ink); }
.vs-paper { stroke: var(--paper); }
.vs-boton-fondo { stroke: var(--boton-fondo); }
.vt-ui { font-family: var(--font-ui); }

.hero-ilustrado { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: center; padding: clamp(1.75rem, 4vw, 3.5rem); min-height: clamp(320px, 42vw, 520px); background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 768px) { .hero-ilustrado { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.hero-ilustrado.hero--baja { min-height: clamp(260px, 32vw, 400px); }
.hero-ilustrado.hero--alta { min-height: clamp(380px, 52vw, 640px); }
.hero-ilustrado .hero-title { font-weight: var(--display-peso, 300); letter-spacing: var(--display-espaciado, -.02em); }
.hero-ilustrado .hero-text { opacity: .82; }
.hero-ilustrado-vector { display: flex; justify-content: center; }
.hero-ilustrado-vector svg { display: block; width: 100%; max-width: 520px; height: auto; }
.hero-ilustrado.hero--baja .hero-ilustrado-vector svg { max-width: 400px; }
.hero-ilustrado.hero--alta .hero-ilustrado-vector svg { max-width: 600px; }
.prop-icono svg { width: 24px; height: 24px; }
.col-tile-vacio svg { width: 56px; height: 56px; }
.promo-band--patron { background-repeat: repeat; background-size: auto; }

/* Editor: selector del conjunto de vectores, vista previa del icono, miniatura de cada plantilla */
.tema-vectores { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-bottom: var(--space-3); }
.tema-vector { position: relative; display: flex; flex-direction: column; gap: .4rem; margin: 0; padding: .6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); cursor: pointer; }
.tema-vector input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tema-vector:hover, .tema-vector.is-activo { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.tema-vector:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.tema-vector:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.tema-vector-iconos { display: flex; gap: .45rem; color: var(--ink); }
.tema-vector-iconos svg { width: 20px; height: 20px; }
.tema-icono-fila { display: flex; align-items: center; gap: .5rem; }
.tema-icono-fila .form-select { flex: 1 1 auto; min-width: 0; }
.tema-icono-prev { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: var(--canvas-alt); color: var(--ink); font-size: 1rem; }
.tema-icono-prev svg { width: 18px; height: 18px; }
.tema-plantilla-miniatura { display: block; border-radius: var(--radius); overflow: hidden; background: var(--canvas-alt); }
.tema-plantilla-miniatura svg { display: block; width: 100%; height: auto; max-height: 150px; }

/* ==========================================================================
   Decimoquinta ronda: usabilidad en movil
   ========================================================================== */
/* Tablas que en movil se apilan: cada fila es una tarjeta y cada celda lleva su etiqueta (data-label). */
@media (max-width: 767.98px) {
    .tabla-apilable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .tabla-apilable, .tabla-apilable tbody, .tabla-apilable tr, .tabla-apilable td { display: block; width: 100%; }
    .tabla-apilable tr { border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .8rem; margin-bottom: .75rem; background: var(--paper); }
    .tabla-apilable td { border: 0; padding: .35rem 0; text-align: left !important; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
    .tabla-apilable td + td { border-top: 1px solid var(--line); }
    .tabla-apilable td[data-label]::before { content: attr(data-label); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); flex: 0 0 auto; }
    .tabla-apilable td.celda-imagen { justify-content: center; }
    .tabla-apilable td > br { display: none; }
}
.carrito-tabla .img-thumbnail { width: 60px; height: 60px; object-fit: cover; }

/* Filtros del catalogo: en movil, plegados tras «Filtrar y ordenar» (casilla oculta + etiqueta; abiertos si hay filtro aplicado). */
.filtros-abrir { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.filtros-boton { margin-bottom: .25rem; }
.filtros-abrir:focus-visible + .filtros-boton { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 767.98px) {
    .filtros-form { display: none; }
    .filtros-abrir:checked ~ .filtros-form { display: flex; margin-top: .75rem; }
    .filtros-abrir:checked + .filtros-boton { background: var(--ink); color: var(--paper); }
}
@media (min-width: 768px) { .filtros-boton { display: none !important; } }

/* Avance del pedido: en pantallas estrechas las cinco etiquetas caben sin partir palabras. */
@media (max-width: 575.98px) {
    .tracking-step .text { font-size: 11.5px; letter-spacing: 0; }
}

/* Ficha: selector de cantidad; formulario de producto: filas de variantes propias */
.cantidad-input { width: 6.5rem; }
.variante-fila .form-control-sm { min-width: 0; }

/* Acciones sobre varios pedidos: columna de casillas y barra */
.columna-elegir { width: 2.5rem; }
.barra-masiva { padding: .6rem .8rem; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius); }
@media (max-width: 767.98px) { .tabla-apilable td.columna-elegir { justify-content: space-between; } .tabla-apilable th.columna-elegir { display: none; } }

/* Edicion rapida en la lista de productos */
.campo-rapido { min-width: 6.5rem; max-width: 9rem; margin: 0 auto; -moz-appearance: textfield; appearance: textfield; }
.campo-rapido::-webkit-outer-spin-button, .campo-rapido::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.campo-rapido.is-modificado { border-color: var(--accent); background: var(--accent-soft); }

/* ===== UX premium: ficha y carrito ================================================================================ */
/* Stock en lenguaje humano: «Disponible», y la urgencia solo cuando es verdad (5 o menos). */
.stock-aviso { color: var(--ok, #1f6f4a); font-size: .9rem; margin: 0 0 .85rem; display: flex; align-items: center; gap: .4rem; }
.stock-aviso--poco { color: #9a4b00; font-weight: 600; }

/* Cantidad con − y + (objetivo tactil de 44 px) */
.stepper { display: flex; width: fit-content; align-items: stretch; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper); overflow: hidden; }
.stepper .cantidad-input { width: 3.25rem; min-width: 0; border: 0; border-radius: 0; text-align: center; box-shadow: none; padding-left: 0; padding-right: 0; -moz-appearance: textfield; appearance: textfield; }
.stepper .cantidad-input::-webkit-outer-spin-button, .stepper .cantidad-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper-btn { width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--ink); font-size: 1.25rem; line-height: 1; cursor: pointer; transition: background-color .15s; }
.stepper-btn:hover:not(:disabled) { background: var(--canvas-alt); }
.stepper-btn:disabled { color: var(--muted); opacity: .45; cursor: not-allowed; }
.stepper-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }

/* Lo que se duda justo antes de comprar: envio, plazo, devolucion y pago */
.ficha-garantias { list-style: none; margin: 1.5rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--line); display: grid; gap: .65rem; }
.ficha-garantias li { display: flex; align-items: flex-start; gap: .75rem; font-size: .875rem; color: var(--ink-soft); line-height: 1.4; }
.ficha-garantias .bi { font-size: 1.1rem; color: var(--ink); flex: none; margin-top: .05rem; }
.ficha-garantias a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Carrito: «Quitar» discreto (antes un boton rojo que dominaba la fila) */
.btn-quitar { color: var(--muted); background: transparent; border: 0; padding: .35rem .5rem; min-height: 44px; display: inline-flex; align-items: center; gap: .35rem; }
.btn-quitar:hover, .btn-quitar:focus-visible { color: #b3261e; background: transparent; text-decoration: underline; }
.carrito-tabla .btn-group .btn { min-width: 44px; min-height: 44px; }
.cupon-plegable > summary { cursor: pointer; list-style: none; font-weight: 600; }
.cupon-plegable > summary::-webkit-details-marker { display: none; }
.cupon-plegable > summary::after { content: '+'; float: right; font-weight: 400; }
.cupon-plegable[open] > summary::after { content: '−'; }
.progreso-envio { height: .5rem; background: var(--canvas-alt); border-radius: 999px; overflow: hidden; }
.progreso-envio .progress-bar { background: var(--ink); transition: width .4s ease; }

/* Barras fijas en movil (ficha: comprar; carrito: pagar). Solo existen con JS y <768 px. */
.barra-compra-movil, .barra-pago-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--line-strong); box-shadow: 0 -8px 24px rgba(20, 20, 26, .08); }
.barra-compra-movil[hidden], .barra-pago-movil[hidden] { display: none; }
.barra-compra-info, .barra-pago-movil > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.barra-compra-nombre { font-size: .8125rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-pago-etiqueta { font-size: .8125rem; color: var(--muted); }
.barra-compra-movil .btn, .barra-pago-movil .btn { min-height: 44px; white-space: nowrap; }
body.con-barra-movil { padding-bottom: 5rem; }
body.con-barra-movil .wa-float { bottom: calc(var(--float-margen) + 4.75rem + env(safe-area-inset-bottom, 0px)); }
body.con-barra-movil .cb { bottom: calc(var(--float-margen) + 4.75rem + env(safe-area-inset-bottom, 0px) + var(--float-diametro) + var(--float-separacion)); }
@media (min-width: 768px) { .barra-compra-movil, .barra-pago-movil { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .progreso-envio .progress-bar { transition: none; } }

/* Cualquier producto: el texto lo escribe el dueño de la tienda. Una palabra larga sin espacios (codigos, URLs, nombres
   tecnicos) no debe desbordar la pagina ni empujar el layout en movil. */
main, .breadcrumb, .product-info, .ficha-garantias, .alert { overflow-wrap: break-word; }
.lead, h1, .breadcrumb-item, .product-name, .barra-compra-nombre { overflow-wrap: anywhere; }

/* La accion principal (comprar, ir al pago, pagar) SIEMPRE va rellena, aunque el tema use botones de contorno: es lo que
   el ojo debe encontrar primero. Usa los colores del propio tema (--boton-*). */
.btn.btn-cta, .tema-botones-contorno .btn.btn-cta {
    --bs-btn-bg: var(--boton-fondo, var(--ink)); --bs-btn-border-color: var(--boton-fondo, var(--ink)); --bs-btn-color: var(--boton-texto, #fff);
    --bs-btn-hover-bg: var(--boton-hover, #2c2c36); --bs-btn-hover-border-color: var(--boton-hover, #2c2c36); --bs-btn-hover-color: var(--boton-texto, #fff);
    --bs-btn-active-bg: var(--boton-hover, #2c2c36); --bs-btn-active-border-color: var(--boton-hover, #2c2c36); --bs-btn-active-color: var(--boton-texto, #fff);
    --bs-btn-disabled-bg: var(--boton-fondo, var(--ink)); --bs-btn-disabled-border-color: var(--boton-fondo, var(--ink)); --bs-btn-disabled-color: var(--boton-texto, #fff);
    font-weight: 600;
}

/* Accesibilidad medida con axe-core y el recorrido por dispositivos (tests/navegador_dispositivos.php):
   - contraste minimo 4,5:1 en los colores de Bootstrap que quedaban en 4,2-4,5 sobre el fondo crema;
   - areas tactiles de al menos 24 px en los enlaces sueltos de las paginas legales. */
.text-success { color: #146c43 !important; }
.btn-outline-secondary { --bs-btn-color: #565e64; --bs-btn-border-color: #6c757d; }
code { color: #a61e65; }
nav[aria-label="Otras páginas legales"] a { display: inline-block; padding: .5rem .25rem; }
.badge { font-size: .75rem; }   /* en tablas pequeñas el 0,75em heredado bajaba a 9,8 px */
/* Cabecera fija solo si no se come la pantalla: con texto grande, en horizontal o en pantallas bajas tapaba el contenido (ui.js pone la clase). */
.store-header.sticky-top.header-libre { position: static; }
.flex-grow-1 { min-width: 0; overflow-wrap: anywhere; }   /* un hijo flex no se encoge por debajo de su contenido: con texto al 200 % empujaba la pagina */

/* ---- Experiencia en el movil (vigesima primera ronda) ------------------------------------------------------
   1. UNA sola ayuda flotante y mas pequeña: antes dos botones de 54 px tapaban el codigo de seguimiento, el formulario y la barra de compra.
      El asistente ya ofrece WhatsApp, asi que el boton verde sobra en el movil. En el pago desaparece (ahi cada pixel es del formulario).
   2. Cabecera compacta: el buscador queda junto al menu (antes estaba escondido DENTRO del menu y la fila del menu estaba vacia).
   3. Atajos de pedidos en una fila que se desplaza de lado. */
@media (max-width: 767.98px) {
    :root { --float-diametro: 44px; --float-separacion: 0px; --float-margen: .75rem; }
    .wa-float { display: none; }
    body:has(.barra-compra-movil:not([hidden])) .cb, body:has(.barra-pago-movil:not([hidden])) .cb { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
    body:has(#checkout-form) .cb { display: none; }
    .store-announcement { padding: .35rem .75rem; line-height: 1.3; letter-spacing: .04em; }
    .store-search-movil .form-control { min-height: 44px; }
    .navbar .store-search-movil { min-width: 0; }
}
.atajos-pedidos { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; }
.atajos-pedidos .btn { white-space: nowrap; flex: 0 0 auto; }
.panel-filtros > summary { list-style: none; cursor: pointer; }
.panel-filtros > summary::-webkit-details-marker { display: none; }
.barra-masiva[hidden] { display: none !important; }   /* d-flex de Bootstrap pisaba el atributo hidden */
/* Portada en el movil: la ilustracion del hero es decorativa y ocupaba una pantalla entera antes de llegar a los productos. */
@media (max-width: 767.98px) { .hero-ilustrado { min-height: 0; gap: 1rem; } .hero-ilustrado-vector svg { max-width: 150px; } }

/* ---- iPhone / pantallas tactiles (vigesima cuarta ronda) ------------------------------------------------------
   iOS AMPLIA la pantalla al enfocar un campo con letra menor de 16 px y no vuelve sola: en una tienda eso rompe el formulario de compra en la mano de cada cliente
   de iPhone. Los campos median 14–15 px. En tactil la letra de todo campo es de 16 px (el escritorio no cambia). !important a proposito: Bootstrap fija el tamaño
   de .form-control-sm / .form-select-sm con la misma especificidad y mas tarde en algunas pantallas.
   Los controles del encabezado llegan a 44 px (guia de Apple) para tocarlos sin errar. */
@media (hover: none) and (pointer: coarse), (max-width: 767.98px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
    select, textarea, .form-control, .form-select, .form-control-sm, .form-select-sm { font-size: 16px !important; }
    .header-icon-link { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .store-search-movil .btn, .store-header .btn { min-height: 44px; }
}