/* ===============================
   Comercio (tienda pública) — Compu-Bairestore
   Marca propia de la tienda (NO la de B-Desk): naranja + cyan, sacados
   del logo real (mascota CB). Los --cb-* de acá son locales a .tienda-page
   y no pisan los --cyan/--violet globales de B-Desk (theme.css).
   Reusa igual la estructura de components.css (.pro-card, .pro-table,
   .btn-pro, .btn-icon, .flash) y los tokens neutros de theme.css
   (--panel, --stroke, --muted, --radius, --ok*) — eso sí es compartido.
   =============================== */

.tienda-page{
  --cb-cyan: #6FEBF2;
  --cb-orange: #EC7C30;
  --cb-orange-deep: #D9631A;
  /* Escala tipográfica de la tienda (rediseño fase 1, 05/10/2026): había 14
     tamaños distintos (10.5 a 34px) y casi todo en negrita 800/900, así que
     nada sobresalía. Ahora son 6 tamaños y la negrita fuerte queda para
     títulos y precios. */
  --t-xs: 12px;     /* datos chicos: "con tarjeta", stock, legales */
  --t-sm: 14px;     /* texto de interfaz: cards, filtros, formularios */
  --t-body: 16px;   /* texto de lectura y bajada de la cabecera */
  --t-lg: 20px;     /* precio en card, títulos de sección */
  --t-xl: 28px;     /* títulos de página y precio en la ficha */
  --t-hero: clamp(32px, 4.6vw, 52px);
  /* Movimiento: cortos (200–300 ms) y con resorte solo donde algo "llega"
     (badge del carrito, mascota). Todo se apaga con prefers-reduced-motion. */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  min-height: 100vh; display:flex; flex-direction:column;
  /* Mismo aviso que el <meta name="color-scheme"> en base_tienda.html,
     acá también por si algún navegador mira la propiedad CSS en vez del
     meta — evita que el "modo oscuro forzado" repinte bloques vacíos. */
  color-scheme: dark;
}

/* Pisa el fondo global de B-Desk (theme.css body{}), que trae su propio
   degradé difuso cyan/violeta — acá compite con la marca de la tienda.
   Antes había acá un halo sutil radial en naranja de marca
   (rgba(236,124,48,.07) a transparent en 500px) — mismo tipo de problema
   que el degradé que sacamos de .tienda-card-img (commit c194489): un
   cambio de color demasiado sutil y gradual sobre negro casi puro no tiene
   pasos de color suficientes para verse liso en una pantalla real
   (Retina/HiDPI) y se ve como un anillo/borde duro — las "capas" que
   reportó Bibi, visibles solo en la columna principal del catálogo (sin
   fondo propio) y no en el sidebar (que lo tapa con var(--panel) sólido).
   Fondo plano, sin degradé — no vale el riesgo por un detalle decorativo. */
body.tienda-page{
  background: var(--bg);
}

/* Header */
.tienda-header{
  border-bottom: 1px solid var(--stroke);
  background: rgba(5,8,16,.72);
  backdrop-filter: blur(12px);
  position: sticky; top:0; z-index: 50;
}
.tienda-header-inner{
  /* Pedido de Bibi: "usar los márgenes laterales" — mismo ancho que
     container-wide del resto de B-Desk (Inventario), no 1200px genérico. */
  max-width: 1680px; margin: 0 auto;
  padding: 12px 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.tienda-brand{
  display:flex; align-items:center; gap: 10px;
  text-decoration:none; color: var(--text);
}
.tienda-brand-mark{
  width: 40px; height:40px; border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
}
.tienda-brand-name{ font-family: var(--font-display); font-weight:700; font-size: var(--t-lg); }
.tienda-header-acciones{ display:flex; align-items:center; gap: 8px; }
/* WhatsApp en el header: solo en el celular (ver .tienda-wa-float). */
.tienda-header-wa{
  display:none; width:44px; height:44px; border-radius:50%;
  align-items:center; justify-content:center;
  color:#25D366; border:1px solid var(--stroke); background: var(--panel);
}

.tienda-cart-link{
  display:flex; align-items:center; gap:8px;
  color: var(--text); text-decoration:none; font-weight:600; font-size: var(--t-sm);
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--stroke); background: var(--panel);
  position: relative;
}
.tienda-cart-link:hover{ background: var(--panel2); border-color: rgba(236,124,48,.35); }
.tienda-cart-badge{
  position:absolute; top:-6px; right:-6px;
  min-width: 20px; height:20px; padding: 0 5px;
  border-radius: 999px; background: var(--cb-orange); color:#1a0e04;
  font-size: var(--t-xs); font-weight:600; display:flex; align-items:center; justify-content:center;
}
.tienda-cart-badge.is-bump{ animation: tienda-bump .45s var(--ease-spring); }
@keyframes tienda-bump{
  0%{ transform: scale(1); } 35%{ transform: scale(1.45); } 100%{ transform: scale(1); }
}

/* Main / hero */
.tienda-main{ flex:1; max-width: 1680px; margin: 0 auto; padding: 28px 20px; width:100%; }
.tienda-flash-wrap{ display:grid; gap:10px; margin: 0 0 18px; }

/* Cabecera del catálogo (rediseño fase 1, 05/10/2026). Antes: mascota +
   pill "¡VOLVIMOS!" en mayúsculas + 4 pills de confianza + WhatsApp en
   cyan compitiendo con el naranja. Ahora: titular de lo que se vende, una
   sola línea de confianza en texto (sin pills), una acción principal
   (naranja) y WhatsApp como secundaria. La mascota es lo único "con
   personalidad" de la cabecera: entra una vez al cargar, nada más. */
.tienda-hero{
  display:grid; grid-template-columns: minmax(0, 760px) auto; justify-content: space-between;
  align-items:center; gap: 32px;
  max-width: 1080px; padding: 32px 0 48px;
}
.tienda-hero-text{ min-width:0; max-width: 760px; }
.tienda-hero h1{
  font-size: var(--t-hero); line-height: 1.05; letter-spacing: -.01em;
  margin: 0 0 12px; font-weight: 800; text-wrap: balance;
}
.tienda-hero p{ color: var(--muted); margin:0; font-size: var(--t-body); line-height:1.5; max-width: 52ch; text-wrap: pretty; }
.tienda-hero-trust{
  display:flex; flex-wrap:wrap; align-items:center; gap: 4px 18px; margin-top: 14px;
  font-size: var(--t-sm); color: var(--muted);
}
.tienda-hero-trust a{ color: var(--text); text-decoration:none; font-weight:600; display:inline-flex; align-items:center; gap:4px; min-height: 32px; }
@media (max-width: 640px){ .tienda-hero-trust a{ min-height: 44px; } .tienda-brand{ min-height: 44px; } }
.tienda-hero-trust a:hover{ color: var(--cb-orange); }
.tienda-hero-star{ color: #FFC23D; }
.tienda-hero-actions{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 22px; }
.tienda-hero-mascot{
  width: 200px; height: 200px; object-fit:contain;
  filter: drop-shadow(0 12px 32px rgba(236,124,48,.28));
  animation: tienda-mascota-entra .7s var(--ease-spring) .1s both;
}
@keyframes tienda-mascota-entra{
  from{ opacity:0; transform: translateY(14px) rotate(-6deg) scale(.92); }
  to{ opacity:1; transform: none; }
}
@media (max-width: 640px){
  .tienda-hero{ grid-template-columns: minmax(0,1fr) 76px; gap: 14px; padding: 4px 0 24px; align-items:start; }
  .tienda-hero-mascot{ width: 76px; height: 76px; }
  .tienda-hero-actions .btn-pro{ flex: 1 1 auto; justify-content:center; }
}

/* Destacados */


/* Filtro de categorías — pasó por dos formas antes de esta: una fila de
   chips (impracticable con ~40 categorías reales de NewBytes) y después un
   dropdown dark (quedaba escondido, Bibi pidió algo más a la vista, tipo
   sidebar de NewBytes). Ahora es un sidebar de categorías siempre visible,
   sticky en desktop, que colapsa a una fila horizontal scrolleable en mobile
   — mismo patrón que cualquier lista lateral de filtros, sin inventar un
   componente nuevo. */
.tienda-catalogo-layout{
  display:grid; grid-template-columns: 220px 1fr; gap: 24px; align-items:start;
}
.tienda-cat-sidebar{
  position: sticky; top: 16px;
  background: var(--panel); border: 1px solid var(--stroke); border-radius: var(--radius);
  padding: 14px 10px; min-width: 0;
}
.tienda-cat-sidebar-title{
  font-size: var(--t-sm); font-weight:600; color: var(--muted); padding: 0 8px; margin-bottom: 8px;
}
/* Buscador de categoría (pedido de Bibi: poder escribir en vez de revisar
   toda la lista) — mismo input dark que el resto del design system. */
.tienda-cat-search{
  width:100%; height:38px; padding:0 10px; margin-bottom:8px;
  border-radius:9px; border:1px solid var(--stroke);
  background: rgba(255,255,255,.03); color: var(--text);
  font-family: var(--font-body); font-size: var(--t-sm);
}
.tienda-cat-search:focus{ outline:none; border-color: rgba(111,235,242,.45); }
.tienda-cat-empty{ padding: 6px 8px; font-size: var(--t-sm); }
.tienda-cat-list{ display:flex; flex-direction:column; gap:2px; max-height: 72vh; overflow-y:auto; }
.tienda-cat-item{
  display:block; padding: 8px 10px; border-radius: 8px;
  font-size: var(--t-sm); font-weight:500; color: var(--text); text-decoration:none;
  white-space: normal; line-height:1.3;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.tienda-cat-item:hover{ background: rgba(111,235,242,.08); color: var(--cb-cyan); }
.tienda-cat-item.is-active{
  background: linear-gradient(135deg, var(--cb-orange), var(--cb-orange-deep));
  color:#1a0e04; font-weight:600;
}
.tienda-catalogo-main{ min-width: 0; }
/* Dropdown de categoría para mobile (.fp-dd, mismo que orden/marca) — vive
   en el DOM siempre pero se muestra solo bajo los 860px; en desktop el
   filtro de categoría sigue siendo el sidebar de arriba. */
.tienda-dd-categoria{ display:none; width:100%; }
@media (max-width: 860px){
  /* Mobile/tablet: la fila horizontal scrolleable de chips (probada antes)
     quedaba cortada a la mitad y sin indicio de que había más categorías
     para el costado — Bibi la reportó directamente como "fea". El sidebar
     completo se oculta y se reemplaza por el mismo dropdown .fp-dd que ya
     usan orden/marca, con buscador incluido (ver extra_js en catalogo.html). */
  .tienda-catalogo-layout{ grid-template-columns: 1fr; gap: 14px; }
  .tienda-cat-sidebar{ display:none; }
  .tienda-dd-categoria{ display:block; order:-1; margin-bottom: 4px; }
}

/* Barra de orden/stock del catálogo público (pedido de Bibi: "sumar un
   filtro de ordenar, varias opciones") — vive arriba de la grilla, al lado
   del sidebar de categorías, mismo dropdown dark del design system. */
.tienda-orden-bar{
  /* Pedido de Bibi: "colocarlos más hacia la izquierda" — con el contenedor
     ya ancho (container-wide), alinear a la derecha dejaba un hueco enorme
     a la izquierda, pegado a la barra lateral de categorías. */
  display:flex; align-items:center; justify-content:flex-start; gap:14px;
  flex-wrap:wrap; margin-bottom: 16px;
}
.tienda-dd-orden{ width: 220px; }
.tienda-dd-orden .fp-dd-btn{ border-color: var(--stroke); }
.tienda-dd-marca{ width: 180px; }
.tienda-dd-marca .fp-dd-btn{ border-color: var(--stroke); }
.tienda-dd-categoria .fp-dd-btn{ border-color: var(--stroke); }
/* El núcleo .fp-dd-menu (components.css) no trae tope de alto — está pensado
   para listas cortas. Acá marca/categoría pueden tener ~40 opciones: sin
   esto el menú se expandía entero en vez de cortar, quedando larguísimo e
   incómodo si lo que buscás está al final (pedido de Bibi). El buscador que
   ya se inyecta por JS (ver extra_js en catalogo.html) sigue arriba, fijo,
   fuera del scroll. */
.tienda-dd-marca .fp-dd-menu,
.tienda-dd-categoria .fp-dd-menu{
  max-height: 320px; overflow-y: auto; overflow-x: hidden;
}
.tienda-dd-marca .fp-dd-menu .fp-dd-search,
.tienda-dd-categoria .fp-dd-menu .fp-dd-search{
  position: sticky; top: -10px; margin: -10px -10px 8px; padding: 10px 10px 6px;
  background: linear-gradient(180deg, rgba(7,14,24,.985), rgba(4,9,18,.985));
  z-index: 1;
}
/* La opción activa del dropdown (núcleo .fp-dd en components.css) usa el
   cyan/violeta de B-Desk por default — correcto en el admin, pero en la
   tienda pública (.tienda-page) tiene que ser la marca de Compu-Bairestore
   (cyan/naranja propios), no la de B-Desk. Mismo criterio que ya se usa
   para el sidebar de categoría (.tienda-cat-item.is-active). */
.tienda-dd-orden .fp-dd-opt.is-active,
.tienda-dd-marca .fp-dd-opt.is-active,
.tienda-dd-categoria .fp-dd-opt.is-active,
.tienda-dd-provincia .fp-dd-opt.is-active{
  background: linear-gradient(135deg, var(--cb-orange), var(--cb-orange-deep));
  color:#1a0e04;
}
/* .is-focus: resaltado al navegar con flechas (antes de elegir, ver
   bdesk_dd_keyboard.js) — core .fp-dd-opt.is-focus en components.css usa
   el cyan de B-Desk a propósito (focus ring, no selección). En la tienda
   pública tiene que ser naranja de Compu como todo lo demás (pedido de
   Bibi, 02/10/2026, mismo criterio que .is-active de arriba). */
.tienda-dd-orden .fp-dd-opt.is-focus,
.tienda-dd-marca .fp-dd-opt.is-focus,
.tienda-dd-categoria .fp-dd-opt.is-focus,
.tienda-dd-provincia .fp-dd-opt.is-focus{
  background: rgba(236,124,48,.14); color: rgba(236,124,48,.98);
}
/* Buscador de producto (pedido de Bibi, 02/10/2026) — mismo input visual
   que .tienda-precio-range de acá abajo, pero más ancho (texto libre, no
   un número de pocos dígitos) y con un ícono de lupa adentro. */
.tienda-busqueda{
  position: relative; display:flex; align-items:center;
  /* Encoge antes de forzar el salto de línea del resto de los filtros
     (categoria+marca+precio+orden+stock+limpiar ya ocupan casi todo el
     ancho disponible en pantallas ~1440-1512px, típico de notebook) — un
     ancho fijo acá era la gota que rebalsaba el vaso y hacía que la barra
     se viera distinta según el ancho real de cada pantalla. */
  flex: 1 1 200px; min-width: 160px; max-width: 280px;
}
.tienda-busqueda-icon{
  position: absolute; left: 12px; color: var(--muted); pointer-events: none;
}
.tienda-busqueda input{
  width: 100%; height:44px; padding:0 12px 0 36px; border-radius:10px;
  background: var(--panel); border:1px solid var(--stroke); color: var(--text);
  font-family: var(--font-body); font-size: var(--t-sm);
}
.tienda-busqueda input:focus{ outline:none; border-color: rgba(236,124,48,.45); }
/* Flask/navegador agregan una "x" nativa en type=search con contenido —
   la de WebKit (Chrome/Safari) viene fea sin estilar, re-estilarla acá para
   que no desentone con el resto del input dark. */
.tienda-busqueda input::-webkit-search-cancel-button{
  filter: invert(1) opacity(.6);
}
/* Rango de precio: dos inputs numéricos + botón — no hay un slider en el
   design system y un slider de precio con ~1300 productos reales (montos
   muy dispersos) no aporta más que dos campos simples. */
.tienda-precio-range{ display:flex; align-items:center; gap:8px; }
.tienda-precio-range input{
  width: 124px; height:44px; padding:0 10px; border-radius:10px;
  background: var(--panel); border:1px solid var(--stroke); color: var(--text);
  font-family: var(--font-body); font-size: var(--t-sm);
}
.tienda-precio-range input:focus{ outline:none; border-color: rgba(236,124,48,.45); }
/* Pedido de Bibi: "limpiar filtro debe aparecer en el mismo nivel" — ahora
   vive dentro de .tienda-orden-bar (mismo flex+wrap que el resto de
   controles) en vez de en su propio renglón aparte. */
.tienda-limpiar-filtros{ height:44px; display:inline-flex; align-items:center; }
/* Quiebre intermedio (pedido de Bibi, 02/10/2026: "en la PC queda bien" pero
   en pantallas más chicas tipo notebook el wrap quedaba a mitad de camino,
   impredecible según el ancho exacto). Por debajo de 1300px el buscador pasa
   a ocupar su propio renglón arriba — el resto de los filtros (marca+precio+
   orden+stock+limpiar) entra cómodo en un segundo renglón, en vez de romper
   en cualquier punto intermedio según cuánto sobre. Este wrap no reemplaza
   al de 640px de acá abajo: por debajo de esa medida cada filtro pasa a
   ocupar su propio renglón, como ya hacía. */
@media (max-width: 1300px){
  .tienda-busqueda{ flex: 1 1 100%; max-width: none; order: -1; }
}
@media (max-width: 640px){
  .tienda-orden-bar{ justify-content:stretch; }
  .tienda-busqueda{ width:100%; flex-basis:100%; }
  .tienda-dd-orden, .tienda-dd-marca{ width:100%; }
  .tienda-precio-range{ width:100%; }
  .tienda-precio-range input{ width:0; flex:1; }
  .tienda-limpiar-filtros{ width:100%; justify-content:center; }
}

/* Grid de productos */
.tienda-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.tienda-card{
  display:flex; flex-direction:column;
  border: 1px solid var(--stroke); background: var(--panel);
  border-radius: var(--radius); overflow:hidden;
  text-decoration:none; color: var(--text);
  transition: transform .25s var(--ease-out), border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
  min-width: 0;
}
/* Hover solo con mouse de verdad: en el celular el :hover queda "pegado"
   después de tocar y la card quedaba levantada al volver atrás. */
@media (hover: hover){
  .tienda-card:hover{
    color: var(--text);   /* el hover global de links pintaba el nombre de cyan */
    transform: translateY(-3px);
    border-color: rgba(236,124,48,.35);
    box-shadow: 0 14px 32px rgba(0,0,0,.38);
  }
  .tienda-card:hover .tienda-card-img img{ transform: scale(1.04); }
}
/* Al apretar: la card "se hunde" un poco — confirma el toque antes de que
   cargue la ficha. */
.tienda-card:has(.tienda-card-link:active){ transform: scale(.97); transition-duration: .1s; }
/* La card es un <article>: el link ocupa todo menos el botón "Agregar". */
.tienda-card-link{
  display:flex; flex-direction:column; flex:1; min-width:0;
  color: inherit; text-decoration: none;
}
.tienda-card-link:hover{ color: inherit; }
.tienda-card-add{ padding: 0 14px 14px; }
.tienda-card-add .tienda-add-btn{ width: 100%; height: 40px; font-size: var(--t-sm); }
.tienda-card-add .tienda-add-btn-texto{ display:inline-flex; align-items:center; gap: 8px; }
@media (hover: hover){
  .tienda-card-add .tienda-add-btn:hover{ border-color: rgba(236,124,48,.55); color: var(--cb-orange); }
}
.tienda-card-add .tienda-add-btn.is-ok{ border-color: rgba(74,222,128,.5); color: #4ADE80; }
.tienda-card-img{
  height: 140px; display:flex; align-items:center; justify-content:center;
  /* Las fotos de NewBytes vienen con fondo de estudio blanco. Pintar todo el
     bloque de blanco (#eef0f3 lleno) quedaba como un rectángulo claro
     flotando sobre la card oscura — se notaba como error, no como diseño.
     Después pasó por un degradé sutil cyan/naranja de marca atrás del tile
     blanco, tipo "product stage" — pero ese degradé terminó siendo UN TERCER
     tono visible (card oscura > bloque degradé > foto blanca), que es
     justo lo que Bibi reportó como "capas" (3 rectángulos apilados en vez
     de 2). Ahora el bloque no tiene color propio — se funde con el panel
     de la card — y solo queda el tile blanco flotando directo sobre la
     card oscura, sin marco intermedio. */
  background: transparent;
  position: relative; overflow:hidden; padding: 12px;
}
.tienda-card-img img{
  position:relative; width:100%; height:100%;
  object-fit: contain; object-position: center; padding: 10px;
  /* Blanco puro, no #f4f5f7: las fotos de NewBytes ya traen fondo de
     estudio blanco puro. Con un gris apenas distinto ahí donde el
     object-fit:contain deja hueco alrededor de una foto no cuadrada,
     se notaba la costura entre "mi blanco" y "el blanco de la foto" —
     dos tonos de blanco pegados, que es justo lo que se veía mal. */
  background: #fff; border-radius: 10px;
  /* Blur clavado en 10px con solo 12px de padding alrededor (en
     .tienda-card-img, que tiene overflow:hidden para redondear el bloque):
     la sombra llegaba justo al borde del contenedor y el overflow:hidden la
     cortaba en seco ahí — se veía como una línea recta de "capa" pegada
     debajo de cada foto, en vez de una sombra que se apaga sola. Blur más
     chico que el padding disponible = se apaga antes de llegar al borde. */
  box-shadow: 0 2px 6px rgba(0,0,0,.22);
  transition: transform .35s var(--ease-out), opacity .3s var(--ease-out);
}
.tienda-card-img img.is-cargando,
.tienda-producto-img img.is-cargando{ opacity: 0; }
.tienda-card-icon{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color: rgba(255,255,255,.28);
}
.tienda-card-icon svg{ width: 56px; height:56px; }
.tienda-card:hover .tienda-card-icon{ color: var(--cb-cyan); }
/* Categoría: antes vivía flotando arriba de la foto (.tienda-card-img);
   con fotos reales de fondo blanco esa pill quedaba mal ubicada / se sentía
   redundante con el filtro activo. Ahora es un eyebrow chico en el cuerpo
   de la card, junto al resto del texto — ver catalogo.html/producto.html. */
/* Rediseño fase 1: sin mayúsculas ni cyan — el cyan queda solo para precios. */
.tienda-card-cat{ font-size: var(--t-xs); font-weight:500; color: var(--muted); }
.tienda-card-body{ padding: 14px; display:flex; flex-direction:column; gap:4px; flex:1; }
.tienda-card-name{
  font-weight:600; font-size: var(--t-sm); line-height:1.35; margin-top:2px;
  /* Nombres de NewBytes muy largos: 3 líneas máx, así las cards de una fila
     quedan parejas y el precio siempre a la misma altura. */
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.tienda-card-precios{ margin-top:auto; padding-top: 6px; }
.tienda-card-price{ font-family: var(--font-display); font-weight:700; font-size: var(--t-lg); line-height:1.2; color: var(--cb-cyan); }
/* Precio tarjeta (recargo vinculado al precio transferencia) — línea chica
   debajo del precio principal, solo aparece si el producto tiene
   precio_tarjeta cargado. Ver templates/comercio/_precio.html. */
.tienda-precio-tarjeta{ font-size: var(--t-xs); font-weight:400; color: var(--muted); }
.tienda-producto-price + .tienda-precio-tarjeta{ font-size: var(--t-sm); margin-bottom: 4px; }
.tienda-card-stock{ font-size: var(--t-xs); color: var(--muted); }
.tienda-card-stock--low{ color: var(--cb-orange); font-weight:600; }

.tienda-empty{ text-align:center; padding: 40px 20px; color: var(--muted); grid-column: 1/-1; }

/* Ficha de producto */
.tienda-back{ display:inline-block; margin-bottom: 16px; color: var(--muted); text-decoration:none; font-weight:600; font-size: var(--t-sm); }
.tienda-back:hover{ color: var(--cb-orange); }
/* Ficha (rediseño fase 1): foto más grande (lo que se compra es lo que se
   ve) y la info sin caja alrededor — una caja dentro de otra era ruido. */
.tienda-producto{ display:grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items:start; }
.tienda-producto-img{
  view-transition-name: tienda-foto;
  height: clamp(320px, 42vw, 520px); border-radius: var(--radius); border: 1px solid var(--stroke);
  /* Mismo ajuste que .tienda-card-img: sin degradé de marca atrás, para no
     repetir el efecto "capas" acá — el tile blanco flota directo sobre el
     fondo de la página, con el borde de la card como único marco. */
  background: transparent;
  padding: 20px;
  display:flex; align-items:center; justify-content:center;
  position: relative; overflow:hidden;
}
.tienda-producto-img img{
  position:relative; width:100%; height:100%;
  object-fit: contain; object-position: center; padding: 18px;
  background: #fff; border-radius: 12px; /* ver nota en .tienda-card-img img */
  box-shadow: 0 2px 14px rgba(0,0,0,.3);
}
.tienda-producto-img .tienda-card-icon{ color: rgba(255,255,255,.32); }
.tienda-producto-img .tienda-card-icon svg{ width: 120px; height:120px; }
.tienda-producto-info{ min-width:0; padding-top: 8px; }
.tienda-producto-info .tienda-card-cat{ display:block; margin-bottom: 8px; font-size: var(--t-sm); }
.tienda-producto-info h1{ margin: 0 0 16px; font-size: var(--t-xl); line-height:1.2; font-weight:700; text-wrap: balance; }
.tienda-producto-price{ font-family: var(--font-display); font-weight:700; font-size: var(--t-xl); line-height:1.1; color: var(--cb-cyan); margin-bottom: 4px; }
.tienda-producto-info .tienda-card-stock{ margin-top: 8px; font-size: var(--t-sm); }
.tienda-producto-desc{ color: var(--muted); line-height:1.6; margin: 18px 0 0; max-width: 60ch; }
.tienda-add-form{ margin-top: 24px; }
.tienda-add-form{ display:flex; align-items:center; gap: 12px; flex-wrap:wrap; }
.tienda-qty-input{
  width: 70px; height: 44px; border-radius: 12px;
  border: 1px solid var(--stroke); background: rgba(255,255,255,.04);
  color: var(--text); text-align:center; font-weight:600;
}

@media (max-width: 860px){
  .tienda-producto{ grid-template-columns: 1fr; gap: 20px; }
  .tienda-producto-img{ height: min(86vw, 420px); padding: 12px; }
  .tienda-producto-img img{ padding: 12px; }
}

/* Botón de marca (reemplaza btn-pro-gradient cyan/violeta de B-Desk por
   el naranja/cyan de Compu-Bairestore, mismo tamaño/forma que .btn-pro) */
.tienda-btn-brand{
  background: linear-gradient(135deg, var(--cb-orange), var(--cb-orange-deep));
  color:#1a0e04;
}
.tienda-btn-brand:hover{ color:#1a0e04; -webkit-text-fill-color:#1a0e04; }

/* Características (specs) */
.tienda-specs{ margin-top: 24px; }
.tienda-specs-table{ width:100%; border-collapse: collapse; }
.tienda-specs-table th, .tienda-specs-table td{
  text-align:left; padding: 10px 0; font-size: var(--t-sm);
  border-bottom: 1px solid var(--stroke);
}
.tienda-specs-table th{ width: 220px; color: var(--muted); font-weight:600; }
.tienda-specs-table td{ color: var(--text); }
.tienda-specs-table tr:last-child th,
.tienda-specs-table tr:last-child td{ border-bottom: none; }
@media (max-width: 560px){
  .tienda-specs-table th, .tienda-specs-table td{ display:block; width:auto; padding: 4px 0; }
  .tienda-specs-table tr{ display:block; padding: 10px 0; border-bottom: 1px solid var(--stroke); }
  .tienda-specs-table tr:last-child{ border-bottom:none; }
}

/* Relacionados */
.tienda-relacionados{ margin-top: 36px; }
.tienda-section-title{ font-size: var(--t-lg); font-weight:700; margin: 0 0 16px; }

/* Carrito / checkout */
.tienda-page-title{ font-size: var(--t-xl); font-weight:700; margin: 0 0 20px; }
.tienda-cart-table td, .tienda-cart-table th{ min-width: 0; }
.tienda-cart-total{
  display:flex; justify-content:flex-end; gap: 14px; align-items:baseline;
  padding: 16px 4px; font-size: var(--t-body); color: var(--muted);
}
.tienda-cart-total strong{ font-family: var(--font-display); font-size: var(--t-lg); color: var(--cb-cyan); }
.tienda-cart-actions{ display:flex; justify-content:flex-end; gap: 12px; flex-wrap:wrap; }

.tienda-checkout{ display:grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items:start; }
/* min-width:0 — hijo de grid: sin esto la tarjeta no puede achicarse por
   debajo del ancho mínimo de su contenido (la fila Número + "Sin número") y
   a 320px desbordaba la página. */
.tienda-checkout-form{ display:flex; flex-direction:column; gap: 14px; min-width:0; }
.tienda-checkout-row{ display:flex; gap:14px; }
.tienda-checkout-row label{ flex:1; min-width:0; }
@media (max-width: 480px){ .tienda-checkout-row{ flex-direction:column; gap:14px; } }
.tienda-checkout-form label{ display:flex; flex-direction:column; gap:6px; font-size: var(--t-sm); font-weight:600; color: var(--muted); }
.tienda-checkout-form input, .tienda-checkout-form textarea, .tienda-checkout-form select{
  height: 44px; padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--stroke); background: rgba(255,255,255,.04);
  color: var(--text); font-size: var(--t-sm); font-family: inherit;
}
.tienda-checkout-form textarea{ height: auto; padding: 10px 14px; resize: vertical; }
.tienda-checkout-form input:focus, .tienda-checkout-form textarea:focus, .tienda-checkout-form select:focus{
  outline: none; border-color: rgba(236,124,48,.55);
  box-shadow: 0 0 0 3px rgba(236,124,48,.15);
}
.tienda-checkout-form input:disabled{ opacity:.45; cursor:not-allowed; }
.tienda-field-opcional{ font-weight:400; text-transform:none; letter-spacing:0; }
.tienda-field-label{ display:inline; }
/* Wrapper para un campo que no es un <label><input> directo (acá, Provincia:
   el macro .fp-dd arma su propio <button>, un <label for> no puede apuntar
   a un <div>) — mismo spacing/tipografía que .tienda-checkout-form label,
   que es flex-column, para que la fila siga alineada con "Código postal". */
.tienda-field{ display:flex; flex-direction:column; gap:6px; font-size: var(--t-sm); font-weight:600; color: var(--muted); flex:1; min-width:0; }

/* Provincia usa el dropdown global del design system (.fp-dd, ver
   templates/_dd.html) en vez de uno propio — mismo motivo y mismo patrón
   de color que el filtro de categoría/marca/orden más arriba: el <select>
   nativo no se puede repintar (sale con los colores del sistema operativo
   — reportado por Bibi 02/10/2026) y el .fp-dd además ya trae navegación
   por teclado (bdesk_dd_keyboard.js), que una versión hecha a mano no
   tenía. Altura 44px para alinear con los inputs de texto de al lado. */
.tienda-dd-provincia .fp-dd-btn{ border-color: var(--stroke); height:44px; width:100%; }
.tienda-dd-provincia .fp-dd-menu{ max-height:260px; overflow-y:auto; }
.tienda-numero-wrap{ display:flex; align-items:center; gap:10px; }
.tienda-numero-wrap input{ flex:1; min-width:0; }
/* ⚠️ Lleva .tienda-checkout-form delante por lo mismo que
   .tienda-marketing-opt (abajo): sin eso `.tienda-checkout-form label`
   (0,1,1) le ganaba el flex-direction:column y la casilla quedaba apilada
   arriba del texto. */
.tienda-checkout-form .tienda-sin-numero-opt{
  display:flex; flex-direction:row; align-items:center; gap:6px; flex:none;
  font-size: var(--t-xs); font-weight:600; color: var(--muted); white-space:nowrap; cursor:pointer;
}
/* padding/flex en 0: la casilla heredaba el padding de los campos de texto
   (`.tienda-checkout-form input`) y el flex:1 de `.tienda-numero-wrap input`,
   y ocupaba ~45px en vez de 15. */
.tienda-checkout-form .tienda-sin-numero-opt input{ accent-color: var(--cb-cyan); width:15px; height:15px; padding:0; margin:0; flex:none; }
/* Checkbox + texto en fila, no apilado como el resto de los campos del
   form (mismo patrón que usaba .tienda-stock-toggle del catálogo, antes
   de sacar el filtro "Solo con stock" el 02/10/2026). ⚠️ El selector
   lleva .tienda-checkout-form delante a propósito: `.tienda-checkout-form
   label` (0,1,1) es MÁS específico que `.tienda-marketing-opt` (0,1,0) y le
   ganaba el flex-direction:column — el comentario anterior decía "misma
   especificidad" y no era cierto (02/10/2026: casilla y radios apilados
   arriba del texto). */
.tienda-checkout-form .tienda-marketing-opt{
  display:flex; flex-direction:row; align-items:center;
  gap:9px; font-size: var(--t-sm); font-weight:600; color: var(--muted); cursor:pointer;
}
.tienda-marketing-opt input{
  accent-color: var(--cb-cyan); width:16px; height:16px; flex-shrink:0;
}
.tienda-metodo-pago{ display:flex; flex-direction:column; gap:8px; }
.tienda-metodo-pago-label{ font-size: var(--t-sm); font-weight:600; color: var(--muted); }
.tienda-metodo-pago-options{ display:flex; flex-direction:column; gap:8px; }
.tienda-checkout-form .tienda-metodo-pago-opt{
  display:flex; align-items:center; gap:10px; flex-direction:row;
  padding: 10px 14px; border-radius: 12px; border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03); cursor:pointer; font-size: var(--t-sm); font-weight:600;
}
.tienda-metodo-pago-opt:has(input:checked){ border-color: rgba(236,124,48,.55); background: rgba(236,124,48,.08); }
.tienda-metodo-pago-opt input{ width:auto; height:auto; }
/* Foco por teclado en radios y casillas del checkout. `.tienda-checkout-form
   input:focus` (arriba) saca el outline y lo reemplaza por borde + sombra,
   que en un campo de texto se ve y en un radio/casilla nativo no: el foco
   quedaba invisible. El anillo va en la etiqueta entera, mismo patrón que
   `.tienda-opcion` (cotizador). La variante con [data-teclado] cubre a
   Safari, que pierde :focus-visible al moverse con las flechas dentro del
   grupo (lo marca tienda_ui.js, sección 6). */
.tienda-metodo-pago-opt:has(input:focus-visible),
.tienda-metodo-pago-options[data-teclado] .tienda-metodo-pago-opt:has(input:focus),
.tienda-checkout-form .tienda-marketing-opt:has(input:focus-visible),
.tienda-sin-numero-opt:has(input:focus-visible){
  outline: 2px solid var(--cb-orange); outline-offset: 2px; border-radius: 12px;
}
.tienda-metodo-pago-opt input:focus,
.tienda-marketing-opt input:focus,
.tienda-sin-numero-opt input:focus{ box-shadow: none; }
.tienda-checkout-note{ font-size: var(--t-xs); line-height:1.5; display:grid; gap:4px; }
.tienda-checkout-note p{ margin:0; }
.tienda-checkout-submit{ margin-top: 4px; width:100%; }
.tienda-summary-row{ display:flex; justify-content:space-between; gap: 10px; padding: 8px 0; font-size: var(--t-sm); border-bottom: 1px solid var(--stroke); }
.tienda-summary-total{ display:flex; justify-content:space-between; align-items:baseline; padding-top: 14px; font-size: var(--t-sm); color: var(--muted); }
.tienda-summary-total strong{ font-family: var(--font-display); font-size: var(--t-lg); color: var(--cb-cyan); }

/* Aviso de envío con mascota, pegado al total dentro de la misma tarjeta
   de resumen (no una caja aparte más abajo: así queda a la vista sin
   que haya que bajar la mirada). Refuerza el mismo aviso que ya está
   arriba del botón "Confirmar pedido", no agrega info nueva. */
.tienda-envio-tip{
  display:flex; gap:12px; align-items:flex-start; font-size: var(--t-sm); line-height:1.5;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--stroke);
}
.tienda-envio-tip-bot{ width:44px; height:44px; border-radius:10px; flex:none; }
.tienda-envio-tip strong{ display:block; margin-bottom:4px; color: var(--text); font-size: var(--t-body); }
.tienda-envio-tip p{ margin:0; font-size: var(--t-sm); }

/* Botón de arrepentimiento: una sola columna (no la grilla de checkout,
   acá no hay resumen de carrito al lado) con el texto legal arriba y el
   formulario abajo, mismo ancho máximo que el resto de la tienda. */
.tienda-arrepentimiento{ display:flex; flex-direction:column; gap: 20px; max-width: 560px; }
.tienda-arrepentimiento-info p{ margin: 0 0 10px; line-height:1.5; }
.tienda-arrepentimiento-info p:last-child{ margin-bottom:0; }
.tienda-arrepentimiento-ayuda{ font-size: var(--t-xs); margin-top:-8px; }

/* Términos y Privacidad: mismo ancho de lectura que arrepentimiento (no la
   grilla de dos columnas del checkout — acá es un solo bloque de texto
   largo). h2 por sección para poder escanear, no un muro de texto. */
/* Layout de dos columnas: índice fijo a la izquierda + texto a la derecha.
   Antes era una sola columna de 720px y quedaba un hueco vacío al lado en
   pantallas anchas (pedido de Bibi, 02/10/2026) — el índice no es relleno,
   deja saltar directo a una sección en un texto largo. */
.tienda-legal-layout{ display:grid; grid-template-columns: 200px 1fr; gap:28px; align-items:start; }
.tienda-legal-toc{
  position:sticky; top:20px; display:flex; flex-direction:column; gap:2px;
  padding:14px; border:1px solid var(--stroke); border-radius:14px; background: rgba(255,255,255,.03);
}
.tienda-legal-toc a{
  padding:7px 10px; border-radius:8px; font-size: var(--t-xs); font-weight:600;
  color: var(--muted); text-decoration:none; line-height:1.4;
}
.tienda-legal-toc a:hover{ background: rgba(236,124,48,.10); color: var(--cb-orange); }
@media (max-width: 760px){
  .tienda-legal-layout{ grid-template-columns: 1fr; }
  .tienda-legal-toc{ display:none; }
}

/* La tarjeta ocupa todo el ancho de la columna (que ahora llega hasta el
   borde real de .tienda-main, como el resto de la tienda — antes el grid
   entero cortaba a los 960px y quedaba un hueco al lado, pedido de Bibi,
   02/10/2026). El texto adentro sí mantiene una medida legible (no tiene
   sentido una línea de 1400px), pero la tarjeta ya no se ve angosta y
   perdida en la página. */
.tienda-legal{ line-height:1.6; }
.tienda-legal h2{ font-size: var(--t-body); margin: 24px 0 8px; color: var(--text); scroll-margin-top: 20px; max-width: 980px; }
.tienda-legal h2:first-of-type{ margin-top: 4px; }
.tienda-legal p{ margin: 0 0 12px; color: var(--muted); max-width: 980px; }
.tienda-legal a{ color: var(--cb-cyan); }

@media (max-width: 860px){
  .tienda-checkout{ grid-template-columns: 1fr; }
}

/* Gracias */
.tienda-gracias{ max-width: 520px; margin: 40px auto; padding: 36px 28px; display:flex; flex-direction:column; gap: 22px; }
.tienda-gracias-head{ text-align:center; }
.tienda-gracias-head p{ margin:0; line-height:1.5; }
/* /tienda/comprobante con el link del mail y el pedido ya en revisión,
   pagado, enviado o cancelado (comprobante.html): misma tarjeta que gracias,
   con los botones centrados, y "Subir otro" como un desplegable discreto
   debajo, del mismo ancho. */
.tienda-comprobante-estado-acciones{ justify-content:center; }
.tienda-comprobante-otro{ max-width: 520px; margin: 0 auto; display:flex; flex-direction:column; gap:12px; }
.tienda-comprobante-otro > summary{
  cursor:pointer; color: var(--muted); font-size: var(--t-sm); font-weight:600;
  text-align:center; list-style:none; padding:6px 0;
}
.tienda-comprobante-otro > summary::-webkit-details-marker{ display:none; }
.tienda-comprobante-otro > summary:hover{ color: var(--text); text-decoration: underline; }
.tienda-comprobante-otro > summary:focus-visible{ outline: 2px solid var(--cb-cyan); outline-offset: 3px; border-radius: 6px; }
.tienda-comprobante-otro > p{ margin:0; text-align:center; font-size: var(--t-sm); }
.tienda-gracias-icon{
  width: 56px; height:56px; margin: 0 auto 16px; border-radius: 50%;
  background: rgba(111,235,242,.12); border: 1px solid rgba(111,235,242,.30); color: var(--cb-cyan);
  display:flex; align-items:center; justify-content:center; font-size: var(--t-xl); font-weight:600;
}
/* Pago con tarjeta que no se completó (pago_tarjeta.html). */
.tienda-gracias-icon-alerta{
  background: rgba(251,146,60,.12); border-color: rgba(251,146,60,.35); color: #fb923c;
}
.tienda-gracias h1{ font-size: var(--t-lg); margin: 0 0 8px; }
.tienda-gracias-resumen{ border: 1px solid var(--stroke); border-radius: 12px; padding: 4px 14px 14px; }
.tienda-gracias-resumen .tienda-summary-row span:first-child{ min-width:0; overflow-wrap:anywhere; }
.tienda-gracias-resumen .tienda-summary-row span:last-child{ white-space:nowrap; font-variant-numeric: tabular-nums; }
/* Un bloque por paso del pago (transferencia: 1. transferir, 2. comprobante). */
.tienda-gracias-paso{
  padding-top: 20px; border-top: 1px solid var(--stroke);
  display:flex; flex-direction:column; gap:10px; font-size: var(--t-sm);
}
.tienda-gracias-paso h2{ display:flex; align-items:center; gap:10px; margin:0; font-size: var(--t-body); }
.tienda-gracias-paso p{ margin:0; line-height:1.5; }
.tienda-gracias-paso-num{
  width:24px; height:24px; flex:0 0 24px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size: var(--t-xs); font-weight:600; color: var(--cb-cyan);
  background: rgba(111,235,242,.12); border: 1px solid rgba(111,235,242,.30);
}
.tienda-gracias-alt{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; font-size: var(--t-sm); }
.tienda-gracias-salida{ padding-top: 4px; }
/* Acciones: fila de botones alineada a la izquierda, igual que los pasos.
   (Antes un botón quedaba centrado y el otro a la izquierda.) */
.tienda-gracias-actions{ display:flex; flex-wrap:wrap; gap:10px; }

/* Form "Subir comprobante" (paso 2 de gracias.html): selector, vista previa
   y botón, cada uno en su fila. El botón es el CTA principal de la pantalla. */
.tienda-gracias-comprobante{ display:flex; flex-direction:column; gap:10px; }
.tienda-gracias-comprobante > .btn-pro{ width:100%; justify-content:center; }

/* Selector de archivo (_input_comprobante.html). El input nativo queda
   oculto pero accesible; el selector lleva .tienda-file delante para ganarle
   a `.tienda-checkout-form input/label` (0,1,1) en comprobante.html. */
.tienda-file{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; min-width:0; }
.tienda-file .tienda-file-btn{
  position:relative; display:inline-flex; flex-direction:row; align-items:center;
  cursor:pointer; color: var(--text); font-size: var(--t-sm); font-weight:600;
}
.tienda-file .tienda-file-input{
  position:absolute; width:1px; height:1px; padding:0; margin:0; border:0;
  opacity:0; overflow:hidden; clip: rect(0 0 0 0);
}
.tienda-file:focus-within .tienda-file-btn{ outline: 2px solid var(--cb-cyan); outline-offset: 2px; }
.tienda-file-nombre{ font-size: var(--t-sm); color: var(--muted); min-width:0; overflow-wrap:anywhere; }
.tienda-field{ display:flex; flex-direction:column; gap:6px; }
.tienda-field-label{ font-size: var(--t-sm); font-weight:600; color: var(--muted); }

/* Cuentas bancarias (transferencia): reutiliza .pro-card/.pro-table como
   base visual (border + radius de theme.css vía var(--stroke)), no inventa
   un componente nuevo. Una card chica por banco, con badge circular del
   color de marca real (logo de Bibi) de fondo y el isologo del banco
   adentro; si algún banco no tiene logo cargado, cae a la inicial en
   círculo de color como respaldo (ver {% if cta.logo %} en gracias.html). */
.tienda-cuentas-titular{ color: var(--muted); }
.tienda-cuentas-lista{ display:flex; flex-direction:column; gap:8px; }
.tienda-cuenta-card{
  border: 1px solid var(--stroke); border-radius: 12px; padding: 10px 12px;
  background: rgba(255,255,255,.03);
  display:flex; flex-direction:column; gap:6px;
}
.tienda-cuenta-banco{ display:flex; align-items:center; gap:8px; }
.tienda-banco-badge{
  width:22px; height:22px; border-radius:50%; flex:0 0 22px;
  display:flex; align-items:center; justify-content:center;
  font-size: var(--t-xs); font-weight:600; color:#fff;
  overflow:hidden;
}
.tienda-banco-badge img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.tienda-cuenta-datos{ display:flex; flex-direction:column; gap:4px; color: var(--text); }
/* El valor (alias o CBU) NUNCA se corta: un CBU partido en dos líneas se
   copia mal a mano. Si no entra al lado, el botón Copiar baja de línea. */
.tienda-cuenta-dato{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 10px; min-width:0; }
.tienda-cuenta-dato > span{ min-width:0; }
.tienda-cuenta-dato strong{ white-space:nowrap; }
.tienda-cbu{ font-variant-numeric: tabular-nums; letter-spacing:.01em; }
.tienda-copiar{
  flex:0 0 auto; padding: 4px 10px; border-radius: 999px; cursor:pointer;
  border:1px solid var(--stroke); background: rgba(255,255,255,.04);
  color: var(--text); font: inherit; font-size: var(--t-xs); font-weight:600;
}
.tienda-copiar:hover{ border-color: rgba(111,235,242,.45); color: var(--cb-cyan); }
.tienda-copiar:focus-visible{ outline: 2px solid var(--cb-cyan); outline-offset: 2px; }

/* Footer */
.tienda-footer{ border-top: 1px solid var(--stroke); padding: 18px 20px; }
.tienda-footer-inner{ max-width:1680px; margin:0 auto; color: var(--muted); font-size: var(--t-xs); text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; }
.tienda-footer-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 16px; }
.tienda-footer-links a{ color: var(--muted); text-decoration:none; font-weight:500; display:inline-flex; align-items:center; min-height: 32px; }
@media (max-width: 640px){
  /* Área táctil de 44px (Apple HIG): antes eran links de texto de ~18px de alto. */
  .tienda-footer-links{ gap: 0 18px; }
  .tienda-footer-links a{ min-height: 44px; }
}
.tienda-footer-links a:hover{ color: var(--cb-orange); }

/* Botón flotante de WhatsApp — verde oficial de la marca, NO el naranja de
   Compu-Bairestore ni el cyan/violeta de B-Desk: es el ícono de un servicio
   externo (igual criterio que un ícono de Instagram), no un componente del
   design system propio. Fijo sobre todo el contenido público de la tienda. */
.tienda-wa-float{
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #25D366; color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.tienda-wa-float:hover{ transform: scale(1.06); box-shadow: 0 8px 22px rgba(0,0,0,.45); }
/* Celular: el flotante tapaba la columna derecha de la grilla de 2
   columnas. Ahí WhatsApp vive en el header (siempre visible). */
@media (max-width: 640px){
  .tienda-wa-float{ display:none; }
  .tienda-header-wa{ display:inline-flex; }
  /* Header del celular: el nombre en una sola línea y el carrito como
     ícono redondo de 44px (el texto "Carrito" partía el nombre en dos). */
  .tienda-header-inner{ padding: 8px 16px; gap: 12px; }
  .tienda-brand{ min-width: 0; }
  .tienda-brand-mark{ width: 36px; height: 36px; }
  .tienda-brand-name{ font-size: var(--t-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tienda-cart-link{ width: 44px; padding: 0; justify-content: center; flex: none; }
  .tienda-cart-link > span:not(.tienda-cart-badge){ position:absolute; width:1px; height:1px; overflow:hidden; clip: rect(0 0 0 0); }
}
/* Antes reservaba una columna fija a la derecha de .tienda-main (padding-right)
   para que el botón flotante de WhatsApp nunca tapara contenido. En mobile esa
   reserva (78px derecha vs 20px izquierda) corría visiblemente todo el
   contenido hacia la izquierda — Bibi lo notó en celular, 02/10/2026: "queda
   todo sin centrar". Se cambia a padding-bottom simétrico: el botón flotante
   puede cubrir un instante contenido al hacer scroll (normal en la mayoría de
   las tiendas, no bloquea clicks de otros elementos por debajo), pero el
   layout queda centrado en vez de corrido. Lo único que sí se protege es el
   final de la página, para que el último bloque de contenido no quede
   escondido permanentemente detrás del botón una vez que se llega al fondo. */
.tienda-main{ padding-bottom: 90px; }
@media (max-width: 480px){
  .tienda-main{ padding-bottom: 72px; }
}

/* ===============================
   Rediseño fase 1 — componentes nuevos de la tienda pública (05/10/2026)
   =============================== */

/* Utilidad: texto solo para lectores de pantalla (aviso "Agregado"). */
.tienda-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip: rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Grilla en el celular: 2 columnas, como cualquier tienda en el celu. Con 1
   columna cada producto ocupaba una pantalla entera y había que scrollear
   muchísimo para comparar. */
@media (max-width: 640px){
  .tienda-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tienda-card-img{ height: 128px; padding: 8px; }
  .tienda-card-img img{ padding: 6px; }
  .tienda-card-body{ padding: 10px 12px 12px; }
  .tienda-card-price{ font-size: var(--t-lg); }
  .tienda-card-add{ padding: 0 10px 10px; }
  .tienda-card-add .tienda-add-btn{ height: 44px; }
}

/* ── Filas de productos (destacados, PCs armadas) ──
   Se desliza con el dedo (celular) o con flechas (compu). Nunca pasa sola:
   un carrusel automático cambia justo cuando la persona está leyendo. */
.tienda-fila{ margin-bottom: 36px; min-width: 0; }
.tienda-fila-head{ display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-bottom: 14px; }
.tienda-fila-head .tienda-section-title{ margin: 0; }
.tienda-fila-acciones{ display:flex; align-items:center; gap: 8px; }
.tienda-fila-ver{
  display:inline-flex; align-items:center; min-height: 44px; padding: 0 6px;
  color: var(--cb-orange); font-weight: 600; font-size: var(--t-sm); text-decoration:none;
}
.tienda-fila-ver:hover{ text-decoration: underline; }
.tienda-fila-flecha{
  width: 40px; height: 40px; border-radius: 50%; display:inline-flex; align-items:center; justify-content:center;
  background: var(--panel); border: 1px solid var(--stroke); color: var(--text); cursor: pointer;
  transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), opacity .2s var(--ease-out);
}
.tienda-fila-flecha:hover:not(:disabled){ border-color: rgba(236,124,48,.45); color: var(--cb-orange); }
.tienda-fila-flecha:active:not(:disabled){ transform: scale(.94); }
.tienda-fila-flecha:disabled{ opacity: .35; cursor: default; }
@media (hover: none), (max-width: 640px){ .tienda-fila-flecha{ display:none !important; } }
.tienda-fila-track{
  display:grid; grid-auto-flow: column;
  grid-auto-columns: clamp(220px, calc((100% - 4 * 18px) / 5), 320px);
  gap: 18px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 4px 2px 10px; margin: -4px -2px 0;
}
.tienda-fila-track::-webkit-scrollbar{ display:none; }
.tienda-fila-track > .tienda-card{ scroll-snap-align: start; }
.tienda-fila-track .tienda-card-img{ height: 160px; }
@media (max-width: 640px){
  .tienda-fila-track{
    grid-auto-columns: 62%; gap: 10px;
    margin-inline: -20px; padding: 4px 20px 10px; scroll-padding-inline: 20px;
  }
  .tienda-fila-track .tienda-card-img{ height: 140px; }
}

/* ── Accesos por categoría (portada) ── */
.tienda-cats{ margin-bottom: 40px; }
.tienda-cats-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.tienda-cat-tile{
  display:flex; flex-direction:column; gap: 2px; min-width: 0;
  padding: 12px; border-radius: 14px; border: 1px solid var(--stroke); background: var(--panel);
  color: var(--text); text-decoration: none;
  transition: transform .25s var(--ease-out), border-color .25s var(--ease-out);
}
@media (hover: hover){
  .tienda-cat-tile:hover{ color: var(--text); border-color: rgba(236,124,48,.35); transform: translateY(-2px); }
  .tienda-cat-tile:hover img{ transform: scale(1.05); }
}
.tienda-cat-tile:active{ transform: scale(.97); }
.tienda-cat-tile-img{
  position: relative; height: 96px; margin-bottom: 8px; border-radius: 10px; overflow: hidden;
  display:flex; align-items:center; justify-content:center;
}
.tienda-cat-tile-img img{
  width:100%; height:100%; object-fit: contain; padding: 8px; background:#fff; border-radius: 10px;
  transition: transform .35s var(--ease-out), opacity .3s var(--ease-out);
}
.tienda-cat-tile-img img.is-cargando{ opacity: 0; }
.tienda-cat-tile-img .tienda-card-icon svg{ width: 40px; height: 40px; }
.tienda-cat-tile-nombre{ font-weight: 600; font-size: var(--t-sm); line-height: 1.3; overflow-wrap: anywhere; }
.tienda-cat-tile-cant{ font-size: var(--t-xs); color: var(--muted); }
@media (max-width: 640px){
  .tienda-cats-grid{
    display:grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 40%;
    gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: -20px; padding: 0 20px 6px; scroll-padding-inline: 20px;
  }
  .tienda-cats-grid::-webkit-scrollbar{ display:none; }
  .tienda-cat-tile{ scroll-snap-align: start; }
  .tienda-cat-tile-img{ height: 80px; }
}

/* ── Cotizá tu PC: aviso en la portada ── */
.tienda-cotiza-banner{
  display:grid; grid-template-columns: auto minmax(0,1fr) auto; align-items:center; gap: 20px;
  margin-bottom: 40px; padding: 20px 24px; border-radius: var(--radius);
  border: 1px solid rgba(236,124,48,.28); background: rgba(236,124,48,.06);
}
.tienda-cotiza-mascota{ width: 72px; height: 72px; object-fit: contain; }
.tienda-cotiza-texto h2{ margin: 0 0 4px; font-size: var(--t-lg); font-weight: 700; }
.tienda-cotiza-texto p{ margin: 0; color: var(--muted); font-size: var(--t-sm); line-height: 1.5; max-width: 60ch; }
@media (max-width: 640px){
  .tienda-cotiza-banner{ grid-template-columns: 56px minmax(0,1fr); gap: 12px 14px; padding: 16px; }
  .tienda-cotiza-mascota{ width: 56px; height: 56px; }
  .tienda-cotiza-banner .btn-pro{ grid-column: 1 / -1; justify-content:center; }
}

/* ── Cotizá tu PC: página ── */
.tienda-cotizar{ max-width: 720px; display:flex; flex-direction:column; gap: 20px; }
.tienda-cotizar-intro p{ margin: -8px 0 0; color: var(--muted); font-size: var(--t-body); line-height: 1.55; }
.tienda-cotizar-form{ display:flex; flex-direction:column; gap: 22px; }
.tienda-opciones{ border: 0; margin: 0; padding: 0; min-width: 0; }
.tienda-opciones legend{ padding: 0; margin-bottom: 10px; font-weight: 600; font-size: var(--t-body); }
.tienda-opciones-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.tienda-opciones-grid--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.tienda-opcion{
  position: relative; display:flex; align-items:center; min-height: 52px; padding: 10px 14px;
  border-radius: 12px; border: 1px solid var(--stroke); background: var(--panel);
  font-size: var(--t-sm); font-weight: 500; cursor: pointer;
  transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out), transform .1s var(--ease-out);
}
.tienda-opcion input{ position:absolute; opacity:0; pointer-events:none; }
.tienda-opcion:hover{ border-color: rgba(236,124,48,.35); }
.tienda-opcion:active{ transform: scale(.98); }
.tienda-opcion:has(input:checked){ border-color: var(--cb-orange); background: rgba(236,124,48,.10); color: var(--text); font-weight: 600; }
.tienda-opcion:has(input:focus-visible){ outline: 2px solid var(--cb-orange); outline-offset: 2px; }
.tienda-cotizar-comentario{ display:flex; flex-direction:column; gap: 8px; font-weight: 600; font-size: var(--t-body); }
.tienda-cotizar-comentario textarea{
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--stroke); background: rgba(255,255,255,.04);
  color: var(--text); font: inherit; font-weight: 400; font-size: var(--t-sm); resize: vertical;
}
.tienda-cotizar-comentario textarea:focus{ outline:none; border-color: rgba(236,124,48,.55); box-shadow: 0 0 0 3px rgba(236,124,48,.15); }
.tienda-cotizar-enviar{ align-self: flex-start; height: 52px; padding: 0 24px; gap: 10px; }
.tienda-cotizar-nota{ margin: -12px 0 0; font-size: var(--t-xs); }
@media (max-width: 640px){
  .tienda-opciones-grid--3{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tienda-cotizar-enviar{ align-self: stretch; justify-content: center; }
}

/* ── "Ver más productos" debajo de la grilla ── */
.tienda-ver-mas{ display:flex; flex-direction:column; align-items:center; gap: 10px; margin-top: 28px; }
.tienda-ver-mas p{ margin: 0; font-size: var(--t-sm); }
.tienda-ver-mas .btn-pro{ min-width: 220px; height: 48px; justify-content:center; }
.tienda-ver-mas .btn-pro.is-cargando{ opacity: .6; pointer-events: none; }

/* ── Ahorro por transferencia (solo con Nave activo, ver _precio.html) ── */
.tienda-precio-ahorro{ font-size: var(--t-xs); font-weight: 600; color: #4ADE80; }
.tienda-producto-info .tienda-precio-ahorro{ font-size: var(--t-sm); margin-bottom: 4px; }

/* ── Despacho, envío y garantía en la ficha ── */
.tienda-beneficios{
  list-style: none; margin: 24px 0 0; padding: 16px 0 0; border-top: 1px solid var(--stroke);
  display:flex; flex-direction:column; gap: 12px;
}
.tienda-beneficios li{ display:flex; align-items:flex-start; gap: 12px; font-size: var(--t-sm); line-height: 1.45; }
.tienda-beneficios svg{ flex: none; color: var(--cb-orange); margin-top: 1px; }
.tienda-beneficios small{ display:block; font-size: var(--t-xs); color: var(--muted); }

/* ── Filtros: botón + panel desde abajo (celular/tablet) ── */
.tienda-filtros,
.tienda-filtros-campo{ display: contents; }   /* desktop: los controles quedan en la barra */
.tienda-filtros-label{ display:none; }
.tienda-filtros-btn,
.tienda-filtros-head,
.tienda-filtros-foot,
.tienda-filtros-fondo{ display:none; }
.tienda-filtros-count{
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--cb-orange); color:#1a0e04; font-size: var(--t-xs); font-weight:600;
}

@media (max-width: 860px){
  .tienda-orden-bar{ flex-wrap: nowrap; gap: 8px; }
  .tienda-busqueda{ flex: 1 1 auto; max-width:none; min-width: 0; order: 0; }
  .tienda-limpiar-filtros{ display:none; }
  .tienda-filtros-btn{
    display:inline-flex; align-items:center; gap: 8px; flex: none;
    height: 44px; padding: 0 14px; border-radius: 10px;
    background: var(--panel); border: 1px solid var(--stroke); color: var(--text);
    font-size: var(--t-sm); font-weight: 600; cursor: pointer;
  }
  .tienda-filtros-btn:active{ transform: scale(.97); }

  .tienda-filtros{
    display:flex; flex-direction:column; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    max-height: 86vh; overflow-y: auto; overscroll-behavior: contain;
    padding: 8px 20px calc(16px + env(safe-area-inset-bottom));
    background: #0d111b; border-top: 1px solid var(--stroke);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -18px 50px rgba(0,0,0,.5);
    transform: translateY(100%); visibility: hidden;
    transition: transform .3s var(--ease-out), visibility 0s linear .3s;
  }
  .is-filtros-abiertos .tienda-filtros{
    transform: none; visibility: visible;
    transition: transform .3s var(--ease-out), visibility 0s;
  }
  /* "Manija" arriba del panel: indica que es una hoja que sube desde abajo. */
  .tienda-filtros::before{
    content:""; align-self:center; flex:none;
    width: 36px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.18);
  }
  .tienda-filtros-head{ display:flex; align-items:center; justify-content:space-between; }
  .tienda-filtros-head h2{ margin:0; font-size: var(--t-lg); font-weight:700; }
  .tienda-filtros-cerrar{ width: 44px; height: 44px; }
  .tienda-filtros .tienda-dd-categoria{ order: 0; margin: 0; }
  .tienda-filtros-campo{ display:flex; flex-direction:column; gap: 6px; }
  .tienda-filtros-campo > .tienda-filtros-label{ display:block; font-size: var(--t-sm); font-weight:600; color: var(--muted); }
  .tienda-filtros .tienda-dd-orden,
  .tienda-filtros .tienda-dd-marca{ width: 100%; }
  .tienda-filtros .fp-dd-btn{ height: 44px; }
  .tienda-filtros .tienda-precio-range{ width:100%; }
  .tienda-filtros .tienda-precio-range input{ width:0; flex:1; }
  .tienda-precio-aplicar{ display:none; }   /* lo aplica "Ver resultados" */
  .tienda-filtros-foot{
    display:flex; gap: 10px; padding-top: 4px;
    position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom));
    background: #0d111b; padding-bottom: 4px;
  }
  .tienda-filtros-foot .btn-pro{ flex: 1; justify-content:center; height: 48px; }
  .tienda-filtros-fondo:not([hidden]){
    display:block; position: fixed; inset: 0; z-index: 65;
    background: rgba(0,0,0,.55);
    animation: tienda-fade-in .25s var(--ease-out);
  }
}
html.tienda-sin-scroll, html.tienda-sin-scroll body{ overflow: hidden; }
@keyframes tienda-fade-in{ from{ opacity: 0; } to{ opacity: 1; } }

/* Las reglas viejas de ≤640px apilaban cada filtro en su renglón — dentro
   del panel ya no hace falta pisar el ancho del buscador. */
@media (max-width: 640px){
  .tienda-orden-bar .tienda-busqueda{ width:auto; flex-basis:auto; }
}

/* ── Agregar al carrito: estados del botón ── */
.tienda-add-btn{
  position: relative; display:inline-grid; place-items:center;
  transition: transform .2s var(--ease-out), filter .2s var(--ease-out);
}
.tienda-add-btn > span{ grid-area: 1 / 1; transition: opacity .2s var(--ease-out), transform .25s var(--ease-spring); }
.tienda-add-btn-ok{ opacity: 0; transform: translateY(6px); }
.tienda-add-btn.is-ok .tienda-add-btn-texto{ opacity: 0; transform: translateY(-6px); }
.tienda-add-btn.is-ok .tienda-add-btn-ok{ opacity: 1; transform: none; }
.tienda-add-btn.is-cargando{ filter: saturate(.6) brightness(.9); pointer-events: none; }
.btn-pro.tienda-btn-brand:active,
.btn-pro.btn-pro-ghost:active{ transform: scale(.97); }
.tienda-add-ir{
  display:inline-flex; align-items:center; min-height: 44px; margin-top: 6px;
  color: var(--cb-orange); font-weight: 600; font-size: var(--t-sm); text-decoration: none;
  animation: tienda-fade-in .25s var(--ease-out);
}
.tienda-add-ir:hover{ text-decoration: underline; }

/* ── Barra fija de compra en la ficha (celular) ── */
.tienda-buybar{ display:none; }
@media (max-width: 860px){
  .tienda-buybar{
    display:flex; align-items:center; justify-content:space-between; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(9,12,20,.92); backdrop-filter: blur(14px);
    border-top: 1px solid var(--stroke);
    transform: translateY(110%);
    transition: transform .3s var(--ease-out);
  }
  .tienda-buybar.is-visible{ transform: none; }
  .tienda-buybar-precio{ display:flex; flex-direction:column; min-width:0; line-height:1.2; }
  .tienda-buybar-precio strong{ font-family: var(--font-display); font-weight:700; font-size: var(--t-lg); color: var(--cb-cyan); }
  .tienda-buybar-precio span{ font-size: var(--t-xs); color: var(--muted); }
  .tienda-buybar .btn-pro{ height: 48px; padding: 0 22px; flex:none; }
  /* La barra y el flotante de WhatsApp no se pisan. */
  .tienda-page--producto .tienda-wa-float{ bottom: 88px; }
  /* Que la barra no tape el final de la página (footer). */
  .tienda-page--producto .tienda-main{ padding-bottom: 96px; }
}

/* ── Transición card → ficha (View Transitions entre páginas) ── */
@view-transition{ navigation: auto; }
::view-transition-group(tienda-foto){
  animation-duration: .38s; animation-timing-function: var(--ease-out);
}
::view-transition-old(root),
::view-transition-new(root){ animation-duration: .2s; }

/* ── Movimiento reducido: todo instantáneo ── */
@media (prefers-reduced-motion: reduce){
  .tienda-page *, .tienda-page *::before, .tienda-page *::after{
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .tienda-card:hover, .tienda-card:active, .tienda-cat-tile:hover{ transform: none; }
  @view-transition{ navigation: none; }
}
html:has(body.tienda-page){ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html:has(body.tienda-page){ scroll-behavior: auto; } }

/* ===============================
   Panel de admin de pedidos (autenticado, dentro de B-Desk — NO la tienda
   pública). Antes usaba los tokens GLOBALES de B-Desk (--cyan/--violet) por
   "vivir del lado admin, no del storefront" — pero Bibi pidió explícitamente
   que ESTE panel, al ser de uso personal para Compu-Bairestore (no un
   feature de B-Desk como producto), lleve los colores de la tienda. Mismos
   --cb-* que .tienda-page (static/css/comercio.css arriba), redefinidos acá
   scopeados a .cadmin para no tocar nada del lado storefront ni del resto
   de B-Desk (Finanzas/CxP/CxC/P2P/Trading siguen con cyan/violeta global,
   sin cambios).
   =============================== */
.cadmin{
  --cb-cyan: #6FEBF2;
  --cb-orange: #EC7C30;
  --cb-orange-deep: #D9631A;
}
/* Los modales de este panel (Agregar producto manual, Categorías
   excluidas) viven FUERA de .fp.cadmin a propósito (necesitan posicionarse
   como overlay fixed sobre toda la página, no adentro de un contenedor con
   scroll) — así que var(--cb-orange) ahí adentro no resolvía a nada: sin
   una definición visible, el navegador trata TODA la declaración como
   inválida y la ignora (por eso el botón "Agregar producto" quedaba
   transparente en vez de naranja, aunque la regla "matcheaba" bien). Mismo
   valor redefinido acá, en el body que sí envuelve tanto el panel como sus
   modales, para no depender de en qué div particular termine viviendo
   cada modal nuevo que se agregue. */
body.page-comercio-admin{
  --cb-cyan: #6FEBF2;
  --cb-orange: #EC7C30;
  --cb-orange-deep: #D9631A;
}

/* Mismo fix que body.tienda-page (arriba): theme.css define un fondo de
   PÁGINA global con glow cyan/violeta (body{}). Las tarjetas del panel ya
   usan colores de marca, pero atrás seguía el halo azul/violeta de B-Desk
   compitiendo con el naranja — esa es la "capa" que quedaba. Un solo halo
   sutil en naranja de marca, igual que en el storefront público. */
/* ⚠️ no-repeat (02/10/2026): theme.css pone `html, body { height: 100% }`,
   así que la caja del fondo mide UNA pantalla y el degradado se repetía
   como baldosa cada alto de ventana. En una lista larga de pedidos aparecía
   otro halo naranja más abajo, con un borde duro justo en la unión, visto a
   través de la tarjeta semitransparente de la tabla. */
body.page-comercio-admin{
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(236,124,48,.06), transparent 60%) no-repeat,
    var(--bg);
}

/* .fp-head/.fp-title/.fp-sub/.fp-actions-top viven en finanzas.css — y este
   panel NUNCA cargó ese archivo. Resultado real (confirmado por getComputedStyle,
   no a ojo): esos 4 elementos renderizaban como <div> sueltos sin ningún CSS
   — 16px/400, display:block, margin:0 — layout roto de punta a punta (por
   eso "Ver pedidos" caía en una línea aparte en vez de al lado del título,
   y todo se veía pegado). Traer TODO finanzas.css sería traer un módulo
   entero no diseñado para esta pantalla (KPIs, charts, filtros propios de
   Finanzas) — mismo problema que ya resolvió dashboard.css, con la misma
   solución: replicar acá sólo los 4 primitivos mínimos. */
.fp.cadmin .fp-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:22px;
}
.fp.cadmin .fp-title{
  font-family:"Baloo 2",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:800; font-size:40px; line-height:1.05;
}
.fp.cadmin .fp-sub{ margin-top:6px; opacity:.9; }
.fp.cadmin .fp-actions-top{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* FIX OVERFLOW HORIZONTAL (mismo patrón que body.page-finanzas /
   body.page-admin en sus respectivos módulos): .main-content es flex item
   de .app-layout y por defecto no puede achicarse por debajo del
   min-content de su contenido. La tabla de "Pedidos de la tienda" (7
   columnas + white-space:nowrap) empujaba toda la cadena y el scroll
   terminaba en la PÁGINA en vez de quedar dentro de .pro-table-wrap.
   Scope: solo estas 3 pantallas del panel interno (body.page-comercio-admin),
   no toca el storefront público (.tienda-page, layout propio ya OK). */
body.page-comercio-admin .main-content{ min-width:0; max-width:100%; }
.fp.cadmin{ min-width:0; max-width:100%; }

/* Franja de marca (logo + "Compu-Bairestore") arriba de cada pantalla del
   panel interno — ver _cadmin_brand.html. Reusa .tienda-brand del storefront
   público, sólo se achica para convivir con .fp-title. */
.cadmin-brand{ margin-bottom:14px; }
.cadmin-brand .tienda-brand-mark{ width:28px; height:28px; border-radius:7px; }
.cadmin-brand .tienda-brand-name{ font-size:14px; color: var(--muted); }
.cadmin-brand:hover .tienda-brand-name{ color: var(--cb-orange); }

/* Links de texto plano dentro del panel (fuera de .btn-pro) heredaban el
   cyan GLOBAL de B-Desk (theme.css: a{ color: var(--cyan) }) — de ahí la
   "capa de color" que no pertenecía a la marca de la tienda. Los nav links
   ya se resolvieron como .btn-pro-ghost; esto es red de seguridad para
   cualquier otro <a> suelto que quede dentro de .cadmin (ej. dentro del
   detalle de un pedido). */
.cadmin a{ color: var(--cb-cyan); }
.cadmin a:hover{ color: var(--cb-orange); }
.cadmin .btn-pro{ color: inherit; }
.cadmin .btn-pro-ghost{ color: rgba(255,255,255,.92); }
.cadmin .btn-pro-ghost:hover{ color: rgba(255,255,255,.92); }
.cadmin-filtros{ display:flex; flex-wrap:wrap; gap:8px; margin: 4px 0 0; }
.cadmin .cadmin-chip{
  padding: 7px 15px; border-radius: 999px; border: 1px solid var(--stroke);
  background: var(--panel); color: var(--muted); text-decoration:none;
  font-weight:700; font-size:13px; transition: background .14s ease, color .14s ease;
}
.cadmin .cadmin-chip:hover{ background: var(--panel2); color: var(--text); }
.cadmin-chip.is-active{ background: linear-gradient(135deg, var(--cb-orange), var(--cb-orange-deep)); color:#1a0e04; border-color: transparent; }

.cadmin-estado{
  display:inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.03em;
}
.cadmin-estado--pendiente_pago{ background: rgba(245,158,11,.14); color:#f59e0b; }
/* «A revisar»: violeta, distinto del ámbar de pendiente — el punto es que se
   separe de un vistazo de los que todavía no mandaron nada. */
.cadmin-estado--comprobante_recibido{ background: rgba(168,85,247,.16); color:#c084fc; }
.cadmin-estado--pagado{ background: var(--ok-bg); color: var(--ok); }
.cadmin-estado--enviado{ background: rgba(111,235,242,.14); color: var(--cb-cyan); }
.cadmin-estado--cancelado{ background: rgba(255,93,108,.14); color: var(--red); }
.cadmin-estado--arrepentimiento_solicitado{ background: rgba(236,124,48,.14); color: var(--cb-orange); }

.cadmin-detalle-grid{ display:grid; grid-template-columns: 1fr 1.3fr; gap:16px; margin-top:14px; align-items:start; }
/* Los items de grid traen min-width:auto por defecto y no pueden achicarse
   por debajo del min-content de la tabla de Items (nowrap) — mismo problema
   de fondo que el fix de .main-content de arriba, acá a nivel de columna. */
.cadmin-detalle-grid > *{ min-width:0; }
@media (max-width: 860px){ .cadmin-detalle-grid{ grid-template-columns: 1fr; } }

.cadmin-datos{ display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.cadmin-datos > div{ display:flex; flex-direction:column; gap:2px; font-size:13.5px; }
.cadmin-datos .muted{ font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; }

/* Vista previa del comprobante subido por el cliente, directo en el detalle
   del pedido (antes había que descargar/abrir el archivo para verlo). */
.cadmin-comprobante-preview{ margin-top:-4px; }
.cadmin-comprobante-preview img{
  display:block; max-width:100%; max-height:260px; width:auto;
  border:1px solid var(--stroke); border-radius:10px; cursor:zoom-in;
  background:#fff; /* comprobantes suelen ser capturas con fondo blanco */
}

/* Aviso de "lo mandó por WhatsApp en vez de subirlo" — ver aviso_wa_comprobante_at. */
.cadmin-aviso-wa{
  margin-top:-4px; font-size:13px; font-weight:600;
  color:#fbbf24; display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}

/* Vista previa del comprobante ANTES de subirlo, lado cliente (comprobante.html
   y el form dentro de gracias.html) — mismo criterio visual que la de arriba,
   pero generada por JS (comercio_comprobante_preview.js) con FileReader,
   porque acá todavía no hay nada guardado en el servidor para pedir. */
.tienda-comprobante-preview{
  display:flex; align-items:center; gap:12px; min-width:0;
  padding:10px 12px; border:1px solid var(--stroke); border-radius:12px;
  background: rgba(255,255,255,.03);
}
.tienda-comprobante-preview img{
  display:block; width:64px; height:64px; object-fit:cover; flex:0 0 64px;
  border:1px solid var(--stroke); border-radius:8px; background:#fff;
}
.tienda-comprobante-preview-tipo{
  width:48px; height:56px; flex:0 0 48px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:900; letter-spacing:.04em;
  color:#fff; background:#d93f3f;
}
.tienda-comprobante-preview-info{ display:flex; flex-direction:column; gap:2px; min-width:0; font-size:13px; }
.tienda-comprobante-preview-info strong{ color: var(--text); overflow-wrap:anywhere; }
.tienda-comprobante-preview-info span{ color: var(--muted); }
.tienda-comprobante-preview-quitar{ margin-left:auto; flex:none; }
.tienda-comprobante-preview.is-error{ border-color: rgba(255,93,108,.45); background: rgba(255,93,108,.08); }
.tienda-comprobante-preview-msg{ margin:0; font-size:13px; color: var(--red); }

/* Sub-formulario de método de envío + seguimiento, dentro de "Cambiar
   estado" — solo visible cuando el estado elegido es 'enviado' (toggle
   por JS, ver admin_pedido_detalle.html). Mismo input dark que el resto
   del panel admin (.cadmin-import-form input, arriba). */
.cadmin-envio-sub{
  display:flex; flex-direction:column; gap:8px; margin-top:12px;
  padding-top:12px; border-top:1px solid var(--stroke);
}
.cadmin-envio-sub input[type="text"]{
  width:100%; height:44px; padding:0 12px; border-radius:10px;
  background: var(--panel); border:1px solid var(--stroke); color: var(--text);
  font-family: var(--font-body); font-size:13.5px;
}
.cadmin-envio-sub input[type="text"]:focus{
  outline:none; border-color: rgba(34,211,238,.45); box-shadow: 0 0 0 3px rgba(34,211,238,.12);
}

.cadmin-estado-form{ border-top:1px solid var(--stroke); padding-top:14px; display:flex; flex-direction:column; gap:8px; }
.cadmin-estado-row{ display:flex; gap:8px; align-items:stretch; }
/* Dropdown "Cambiar estado": antes era un <select> nativo del navegador
   (con solo el botón cerrado estilizado — la LISTA desplegada seguía
   siendo el picker nativo del SO/browser, imposible de re-skinear con CSS
   puro). Reemplazado por el dropdown dark custom del design system
   (templates/_dd.html + bdesk_dd.js, ya cargado global en base_user.html)
   — mismo componente que usan Cajas/Inventario, no un patrón nuevo. El
   pill de la opción activa usa el gradiente de marca de la tienda en vez
   del cyan/violeta global (ver bloque .cadmin arriba). */
.cadmin-estado-row .fp-dd{ flex:1; }
.cadmin-estado-row .fp-dd-btn{ width:100%; }
.cadmin .fp-dd-opt.is-active{
  background: linear-gradient(135deg, var(--cb-orange), var(--cb-orange-deep));
  color:#1a0e04;
}
.cadmin .fp-pill:focus{ border-color: rgba(236,124,48,.45); box-shadow: 0 0 0 3px rgba(236,124,48,.12); }
.cadmin .btn-pro-gradient{
  background: linear-gradient(135deg, var(--cb-orange), var(--cb-orange-deep));
  color:#1a0e04; box-shadow: 0 10px 28px rgba(217,99,26,.22);
}
.cadmin .btn-pro-gradient:hover{ color:#1a0e04; -webkit-text-fill-color:#1a0e04; }

.cadmin-total{ display:flex; justify-content:flex-end; gap:12px; align-items:baseline; padding:14px 4px 4px; font-size:14px; color: var(--muted); }
.cadmin-total strong{ font-family: var(--font-display); font-size:20px; color: var(--cb-cyan); }

/* Importador de catálogo (NewBytes) */
.cadmin-import-form{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.cadmin-import-row{ display:flex; gap:14px; flex-wrap:wrap; }
/* .fp-field vive en cajas.css, scopeado a body.page-cajas — tampoco llega
   acá. Se replica sólo el label (los inputs ya tienen su propio estilo más
   abajo) + min-width:0 (sin esto, "Archivo CSV" no se podía achicar dentro
   de .cadmin-import-row y desbordaba unos px en mobile). */
.fp.cadmin .fp-field{ min-width:0; }
.fp.cadmin .fp-field label{
  display:block; font-size:11px; font-weight:800; text-transform:uppercase;
  letter-spacing:.09em; color:rgba(255,255,255,.50); margin-bottom:6px;
}
/* Input de archivo real oculto (no se puede pintar dark — el botón nativo
   "Elegir archivo"/"Choose File" es un control del SO, fuera del control de
   CSS del padre). Mismo patrón ya usado en P2P/Trading: label estilizado +
   caja de nombre de archivo, mismas medidas/colores que .p2p-file-label. */
.cadmin-filewrap{ display:flex; gap:8px; align-items:center; min-width:0; }
/* Ojo con la especificidad: .cadmin-file-label vive anidado DENTRO de un
   .fp-field (junto al <label for="archivo">Archivo CSV</label> de arriba),
   así que ".fp.cadmin .fp-field label" (pensada para esa etiqueta de campo)
   también le pega a este botón-disfrazado-de-label y le pisa display,
   font-size, mayúsculas, color y margin-bottom — por eso se veía chico, en
   mayúsculas y 3px desalineado del cuadro de al lado. El selector de abajo
   necesita la misma cantidad de clases (.fp.cadmin .fp-field ...) para ganar
   esa pulseada de especificidad y restaurar todo lo que se pisaba. */
.fp.cadmin .fp-field .cadmin-file-label{
  flex:0 0 auto; height:44px; padding:0 16px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.92);
  font-weight:900; font-size:13px; text-transform:none; letter-spacing:normal;
  white-space:nowrap; margin-bottom:0;
}
.cadmin-file-label:hover{ background:rgba(255,255,255,.1); }
.cadmin-file-name{
  height:44px; border-radius:999px; display:flex; align-items:center;
  padding:0 14px; border:1px solid var(--stroke); background: var(--panel);
  color: var(--muted); min-width:0; width:100%; overflow:hidden;
  white-space:nowrap; text-overflow:ellipsis; font-size:13px;
}
.cadmin-import-form input[type="number"]{
  /* height:44px explícito — antes el input de margen (sin altura fija, solo
     padding) quedaba unos px más bajo que el widget de archivo de al lado
     (.cadmin-file-label/.cadmin-file-name, 44px), y en la fila flex no
     alineaban: "recuadros mal alineados" que reportó Bibi. */
  width:100%; height:44px; padding:0 12px; border-radius:10px;
  background: var(--panel); border:1px solid var(--stroke); color: var(--text);
  font-family: var(--font-body); font-size:13.5px;
}
.cadmin-import-form input:focus{ outline:none; border-color: rgba(236,124,48,.45); box-shadow: 0 0 0 3px rgba(236,124,48,.12); }
.cadmin-import-form button{ align-self:flex-start; }

/* Buscador del catálogo cargado (pedido de Bibi: "falta poder ver buscar") */
.cadmin-search-form{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.cadmin-pedidos-filtros{ margin-top:12px; }
.cadmin-search-input{ flex:1; min-width:220px; height:44px; text-align:left; font-weight:600; }
/* Ordenar (pedido de Bibi: "falta un botón para organizar los productos") —
   mismo dropdown dark del design system que el resto de la app. */
.cadmin-dd-orden{ width: 220px; flex: 0 0 auto; }
.cadmin-dd-orden .fp-dd-btn{ border-color: var(--stroke); }
@media (max-width: 640px){
  .cadmin-search-form{ flex-direction:column; align-items:stretch; }
  /* En columna, flex:1 le dejaba la ALTURA en 0 (quedaba de ~22px). */
  .cadmin-search-input{ flex:0 0 auto; min-width:0; }
  .cadmin-dd-orden{ width:100%; }
}
/* Barra de selección múltiple sobre la tabla (pedido de Bibi: "vaciar
   catálogo debería tener opción de seleccionar todo o solo unos cuantos"). */
.cadmin-bulk-bar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top: 14px;
}
/* Estrella de "destacado" por fila (pedido de Bibi: poder elegir a mano
   3/4 productos para la sección Destacados). Mismo .btn-icon del resto de
   la app; dorado/naranja de marca cuando está activo, como la pill
   "Destacado" que ya se usa en las cards del catálogo público. */
.cadmin-star-form{ display:inline-block; }
.cadmin-star-btn{ font-size:16px; line-height:1; }
.cadmin-star-btn.is-active{
  color: var(--cb-orange); border-color: rgba(236,124,48,.4);
  background: rgba(236,124,48,.12);
}
.cadmin-star-btn:hover{ color: var(--cb-orange); border-color: rgba(236,124,48,.45); }

/* Tag "Manual" junto al nombre (pedido de Bibi: cargar mercadería propia
   que no viene del CSV de NewBytes, ej. Paraguay). Distingue de un vistazo
   qué productos sobreviven a un reimport y cuáles no. */
.cadmin-tag-manual{
  display:inline-block; font-size:10.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; padding:2px 6px; border-radius:6px;
  background: rgba(236,124,48,.14); color: var(--cb-orange);
  border:1px solid rgba(236,124,48,.3); vertical-align:middle;
}

/* Modal "Agregar producto manual" — mismo patrón .fp-modal-overlay/.fp-modal
   que cajas.html (overlay fijo + card propia, el core .fp-modal de
   finanzas.css está pensado para un modal que se posiciona solo, no para
   vivir dentro de un overlay flex — por eso los !important, igual que en
   cajas.css). TODO(design system): mismo comentario que ya dejó cajas.css,
   esto debería vivir una sola vez en components.css. */
body.page-comercio-admin #modalProductoOverlay,
body.page-comercio-admin #modalCategoriasOverlay{
  position: fixed; inset: 0; background: rgba(0,0,0,.62); backdrop-filter: blur(5px);
  z-index: 400; display:none; align-items:center; justify-content:center; padding:16px;
}
body.page-comercio-admin #modalProductoOverlay.open,
body.page-comercio-admin #modalCategoriasOverlay.open{ display:flex; }
body.page-comercio-admin #modalProductoOverlay .fp-modal,
body.page-comercio-admin #modalCategoriasOverlay .fp-modal{
  position: relative !important; inset: auto !important; display:block !important;
  width:100%; max-width:560px; max-height: calc(100vh - 32px); overflow-y:auto;
  background: linear-gradient(160deg, rgba(10,16,28,.98), rgba(6,11,20,.99));
  border:1px solid var(--stroke); border-radius:20px;
  box-shadow: 0 24px 64px rgba(0,0,0,.58), 0 8px 22px rgba(0,0,0,.28),
              inset 0 1px 0 rgba(255,255,255,.06);
}
body.page-comercio-admin .fp-modal-head{ padding: 18px 22px 16px; border-bottom:1px solid rgba(255,255,255,.08); }
body.page-comercio-admin .fp-modal-body{ padding: 18px 22px 22px; }
body.page-comercio-admin .fp-modal-form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:13px 14px; }
body.page-comercio-admin .fp-modal-form-grid .span-2{ grid-column: span 2; }
body.page-comercio-admin .fp-modal-actions{
  display:flex; gap:10px; justify-content:flex-end; padding-top:14px;
  border-top:1px solid rgba(255,255,255,.06); margin-top:6px;
}
/* Mismo bug que .fp-field: ".cadmin .btn-pro-gradient" (más abajo, pinta el
   CTA principal del panel de naranja/Compu en vez del cyan/violeta default
   de B-Desk) tampoco llega al botón "Agregar producto" del modal, porque el
   modal vive fuera de .fp.cadmin. Reportado por Bibi: "el botón no quedó
   con el color de compu". */
body.page-comercio-admin #modalProductoOverlay .btn-pro-gradient,
body.page-comercio-admin #modalCategoriasOverlay .btn-pro-gradient{
  background: linear-gradient(135deg, var(--cb-orange), var(--cb-orange-deep));
  color:#1a0e04; box-shadow: 0 10px 28px rgba(217,99,26,.22);
}
body.page-comercio-admin #modalProductoOverlay .btn-pro-gradient:hover,
body.page-comercio-admin #modalCategoriasOverlay .btn-pro-gradient:hover{
  color:#1a0e04; -webkit-text-fill-color:#1a0e04;
}
/* .fp-field acá NO tenía estilo propio: el único que existe en este archivo
   (.fp.cadmin .fp-field, más arriba) no llega porque el modal vive FUERA de
   <div class="fp cadmin"> — por eso Bibi lo vio con inputs blancos default
   del navegador y label/input en la misma línea. Mismo patrón que
   body.page-cajas .fp-field en cajas.css, pero self-contained acá (no
   depende de en qué div termine viviendo el modal). */
body.page-comercio-admin #modalProductoOverlay .fp-field{ margin:0; }
body.page-comercio-admin #modalProductoOverlay .fp-field label{
  display:block; font-size:11px; font-weight:800; text-transform:uppercase;
  letter-spacing:.09em; color:rgba(255,255,255,.50); margin-bottom:6px;
}
body.page-comercio-admin #modalProductoOverlay .fp-field input,
body.page-comercio-admin #modalProductoOverlay .fp-field textarea{
  width:100%; height:44px; background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.11); border-radius:12px; color: var(--text);
  padding:0 14px; font-size:14px; font-weight:600; box-sizing:border-box;
  font-family: var(--font-body); transition: border-color .14s ease, background .14s ease;
}
body.page-comercio-admin #modalProductoOverlay .fp-field textarea{
  height:auto; min-height:70px; padding:10px 14px; resize:vertical;
}
body.page-comercio-admin #modalProductoOverlay .fp-field input::placeholder,
body.page-comercio-admin #modalProductoOverlay .fp-field textarea::placeholder{ color: rgba(255,255,255,.26); }
body.page-comercio-admin #modalProductoOverlay .fp-field input:focus,
body.page-comercio-admin #modalProductoOverlay .fp-field textarea:focus{
  outline:none; border-color: rgba(236,124,48,.45); background: rgba(255,255,255,.07);
  box-shadow: 0 0 0 3px rgba(236,124,48,.12);
}
/* El checkbox de "destacado" es un <input> DENTRO de un .fp-field (mismo
   caso que ya pasó con "Elegir archivo": ".fp-field input"/".fp-field label"
   de arriba, pensados para inputs de texto, también le pegan a este
   checkbox y a su label — uppercase, 44px de alto, 100% de ancho. El
   selector de acá necesita la misma cantidad de clases que
   "#modalProductoOverlay .fp-field label/input" para ganar esa pulseada de
   especificidad (ver el comentario de .cadmin-file-label más arriba). */
body.page-comercio-admin #modalProductoOverlay .fp-field .cadmin-destacado-check{
  display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600;
  text-transform:none; letter-spacing:normal; color: var(--muted); margin-bottom:0;
}
body.page-comercio-admin #modalProductoOverlay .fp-field .cadmin-destacado-check input{
  width:16px; height:16px; accent-color: var(--cb-orange);
}
@media (max-width: 640px){
  body.page-comercio-admin .fp-modal-form-grid{ grid-template-columns: 1fr; }
  body.page-comercio-admin .fp-modal-form-grid .span-2{ grid-column: span 1; }
}

/* Botón "Categorías excluidas del import" — debajo del form de importar. */
.cadmin-excluidas-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px;
}

/* Checklist del modal "Categorías excluidas" — mismo input de búsqueda que
   .tienda-cat-search (reusado tal cual, ver arriba), lista scrolleable de
   checkboxes en vez de un <select multiple> (más fácil de tildar varias a
   la vez y de buscar con el input de arriba). */
body.page-comercio-admin #modalCategoriasOverlay .cadmin-cat-excl-list{
  display:flex; flex-direction:column; gap:2px; max-height:320px; overflow-y:auto;
  border:1px solid var(--stroke); border-radius:12px; padding:6px; margin-bottom:14px;
}
body.page-comercio-admin #modalCategoriasOverlay .cadmin-cat-excl-item{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px;
  font-size:13.5px; font-weight:600; color: var(--text); cursor:pointer;
}
body.page-comercio-admin #modalCategoriasOverlay .cadmin-cat-excl-item:hover{
  background: rgba(255,255,255,.05);
}
body.page-comercio-admin #modalCategoriasOverlay .cadmin-cat-excl-item input{
  width:16px; height:16px; accent-color: var(--cb-orange); flex:0 0 auto;
}
.cadmin-thumb{
  width:36px; height:36px; border-radius:8px; overflow:hidden; position:relative;
  background:#eef0f3; display:flex; align-items:center; justify-content:center;
  color: rgba(0,0,0,.35); flex:0 0 auto;
}
.cadmin-thumb img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:3px;
}
.cadmin-thumb svg{ width:20px; height:20px; }

/* Subir foto de producto (pedido de Bibi, 02/10/2026) — el form va inline
   junto al botón de editar en la columna de acciones; el input real queda
   oculto, el botón visible solo lo dispara (ver admin_catalogo.html). */
.cadmin-imagen-form{ display:inline-block; margin-left:6px; }
.cadmin-imagen-input{ display:none; }

.cadmin-import-reporte{ display:flex; gap:22px; flex-wrap:wrap; margin-top:4px; }
.cadmin-import-stat{ display:flex; flex-direction:column; gap:2px; }
.cadmin-import-stat .muted{ font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; }
.cadmin-import-stat strong{ font-family: var(--font-display); font-size:20px; }
.cadmin-import-ok{ color: var(--ok); }
.cadmin-import-warn{ color:#f59e0b; }

/* Checkout — Nave (04/10/2026) */
.tienda-summary-tarjeta{ color: var(--muted, #9aa4b2); font-size: 13px; }
.tienda-summary-tarjeta span:last-child{ white-space:nowrap; font-variant-numeric: tabular-nums; }
.tienda-nave-prueba{ color:#fb923c; font-weight:700; }
.tienda-checkout-submit.is-loading{ opacity:.7; cursor:progress; pointer-events:none; }