/* ════════════════════════════════════════════════════════════════════════
   storefront.css — Invesbull Commerce, storefront público (9-sep-2026)
   Paleta y estructura tomadas del mockup aprobado (Claude Design):
   fondo blanco + zonas de color, navy (#0f2942→#1a4a7a) + acento naranja.
   Compartido entre index.html (Home) y catalogo.html — cualquier cambio acá
   se ve en las dos páginas.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --navy-dark: #0f2942;
  --navy-light: #1a4a7a;
  --navy-gradient: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-light) 100%);
  --accent: #ffb020;
  --text: #1a2430;
  --text-secondary: #6b7684;
  --border: #edeff2;
  --bg-soft: #f7f8fa;
  --bg-soft-2: #f2f4f7;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  background: #fff;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { max-width: 100%; display: block; }

.container { max-width: 1320px; margin: 0 auto; padding: 0 32px; }

/* Utility bar */
.util-bar { background: #0b1e33; color: rgba(255,255,255,0.75); font-size: 12.5px; }
.util-bar .container { display: flex; justify-content: space-between; align-items: center; height: 34px; }
.util-bar .util-left { display: flex; align-items: center; gap: 6px; }
.util-bar .util-right { display: flex; gap: 20px; }
.util-bar .util-right span { display: none; }
@media (min-width: 720px) { .util-bar .util-right span { display: inline; } }

/* Header */
.site-header { border-bottom: 1px solid var(--border); }
.site-header .container { display: flex; align-items: center; gap: 28px; height: 76px; }
.logo { font-size: 24px; font-weight: 800; letter-spacing: 0.5px; color: var(--navy-dark); white-space: nowrap; }
.logo span { color: var(--accent); }

.search-box { flex: 1; display: flex; align-items: center; background: var(--bg-soft-2); border-radius: 8px; height: 44px; padding: 0 8px 0 16px; min-width: 0; }
.search-box input { flex: 1; border: none; background: none; outline: none; font-size: 14.5px; color: var(--text); min-width: 0; }
.search-box input::placeholder { color: var(--text-secondary); }
.search-box button { background: var(--accent); height: 34px; padding: 0 20px; border-radius: 6px; color: #1a2430; font-weight: 700; font-size: 13.5px; white-space: nowrap; }

.header-actions { display: flex; align-items: center; gap: 26px; white-space: nowrap; }
.account-link { display: flex; align-items: center; gap: 8px; cursor: pointer; position: relative; }
.account-link .lines { line-height: 1.25; }
.account-link .eyebrow { font-size: 11.5px; color: var(--text-secondary); }
.account-link .label { font-size: 13.5px; font-weight: 700; color: var(--navy-dark); }

/* Menú "Mi cuenta" (11-sep-2026) — antes tocar "Mi cuenta" logueado solo
   preguntaba si cerrar sesión, sin forma de llegar a "Mis pedidos". Ahora
   se abre este mini-menú con las 2 opciones; en checkout.html no hay menú
   (el account-link ahí no lo trae en el HTML), se deja el comportamiento
   de siempre para no tentar a navegar fuera del checkout a medio llenar. */
.account-menu {
  position: absolute; top: calc(100% + 8px); right: 0; background: #fff; min-width: 180px;
  border-radius: 10px; box-shadow: 0 8px 24px rgba(15,41,66,0.18); border: 1px solid var(--border);
  z-index: 60; overflow: hidden;
}
.account-menu[hidden] { display: none; }
.account-menu-item {
  display: block; width: 100%; text-align: left; padding: 12px 16px; font-size: 13.5px;
  font-weight: 700; color: var(--navy-dark); background: #fff; border: none; text-decoration: none;
  border-bottom: 1px solid var(--border); cursor: pointer;
}
.account-menu-item:last-child { border-bottom: none; }
.account-menu-item:hover { background: var(--bg-soft); }

/* Header en mobile (9-sep-2026, fix): sin este bloque, el buscador (flex:1)
   se achica pero su botón "Buscar" no (white-space:nowrap), así que en
   pantallas angostas el botón se sale de su caja y queda flotando encima
   de "Hola, [nombre]"/carrito — no es un tema de z-index, es que no había
   espacio para los 3 bloques (logo+buscador+acciones) en una sola fila.
   Abajo de 640px el buscador pasa a su propia fila completa. */
@media (max-width: 640px) {
  .site-header .container { flex-wrap: wrap; height: auto; padding-top: 14px; padding-bottom: 14px; row-gap: 12px; }
  .search-box { order: 3; flex-basis: 100%; }
  .header-actions { margin-left: auto; }
}
@media (max-width: 480px) { .container { padding: 0 16px; } }

.cart-link { position: relative; cursor: pointer; }
.cart-badge {
  position: absolute; top: -6px; right: -8px; background: var(--accent); color: #1a2430;
  font-size: 11px; font-weight: 800; border-radius: 999px; min-width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.cart-badge[hidden] { display: none; }

/* Category nav */
.category-nav { background: var(--navy-gradient); position: relative; }
.category-nav .container { display: flex; gap: 26px; height: 46px; align-items: center; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,0.92); overflow-x: auto; white-space: nowrap; }
.category-nav a.active { color: var(--accent); }
.category-nav .see-all { margin-left: auto; color: var(--accent); }

/* NUEVO (10-sep-2026) — bug "scroll feo/bloquea en PC": se oculta la barra
   de scroll nativa (el scroll sigue funcionando igual, con el dedo en
   táctil, o con las flechas/rueda/arrastre en PC — ver storefront.js) en
   TODOS los dispositivos, sin afectar el scroll táctil de celular/tablet. */
.category-nav .container { scrollbar-width: none; -ms-overflow-style: none; }
.category-nav .container::-webkit-scrollbar { display: none; }

/* Flechas de navegación — reusadas por el menú de categorías (fondo navy)
   Y la tira de tarjetas de Categorías del home (fondo blanco), ver
   setupHorizontalScroller en storefront.js. Solo se agregan por JS en
   dispositivos con mouse real (pantallas táctiles nunca las ven). */
.cat-nav-arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 34px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  opacity: 0.55;
  transition: opacity 0.15s;
  z-index: 3;
}
.cat-nav-arrow:hover { opacity: 1; }
.cat-nav-arrow[hidden] { display: none; }
.cat-nav-arrow-prev { left: 0; }
.cat-nav-arrow-next { right: 0; }
/* Variante navy (menú de categorías) */
.cat-nav-arrow.is-navy { color: rgba(255,255,255,0.85); }
.cat-nav-arrow.is-navy.cat-nav-arrow-prev { background: linear-gradient(to right, var(--navy-dark) 45%, transparent); }
.cat-nav-arrow.is-navy.cat-nav-arrow-next { background: linear-gradient(to left, var(--navy-dark) 45%, transparent); }
/* Variante clara (tarjetas de Categorías del home, fondo blanco) */
.cat-nav-arrow.is-light { color: var(--navy-dark); }
.cat-nav-arrow.is-light.cat-nav-arrow-prev { background: linear-gradient(to right, #fff 55%, transparent); }
.cat-nav-arrow.is-light.cat-nav-arrow-next { background: linear-gradient(to left, #fff 55%, transparent); }

/* Hero */
.hero-wrap { padding-top: 28px; }
.hero {
  background: linear-gradient(120deg, var(--navy-dark) 0%, var(--navy-light) 100%);
  border-radius: 14px; padding: 48px 56px; display: flex; align-items: center;
  justify-content: space-between; overflow: hidden; position: relative; gap: 24px;
}
.hero .eyebrow { display: inline-block; background: var(--accent); color: #1a2430; font-size: 12.5px; font-weight: 800; padding: 5px 12px; border-radius: 999px; margin-bottom: 16px; }
.hero h1 { font-size: 34px; font-weight: 800; color: #fff; line-height: 1.2; margin: 0 0 14px; }
.hero p { font-size: 15px; color: rgba(255,255,255,0.8); margin: 0 0 24px; max-width: 480px; }
.hero .cta { background: var(--accent); color: #1a2430; font-weight: 800; font-size: 14.5px; padding: 13px 26px; border-radius: 8px; }

/* Section titles */
.section-title { font-size: 20px; font-weight: 800; color: var(--navy-dark); margin: 0 0 18px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.section-head .see-all { font-size: 13.5px; font-weight: 700; color: var(--accent); }

/* Category cards */
/* REDISEÑADO (10-sep-2026) — bug reportado: "debería ser scrolleable igual
   que arriba, y la foto cubrir toda la tarjeta con el texto encima". Antes
   era una grilla fija de 6 columnas + la lista venía cortada a 6 por JS
   (sin scroll posible); ahora es una tira horizontal scrolleable (mismas
   flechas/auto-avance del menú de categorías, ver setupHorizontalScroller
   en storefront.js) con tarjetas de ancho fijo. */
.cat-cards-wrap { position: relative; }
.category-cards {
  display: flex; gap: 16px; overflow-x: auto; padding-bottom: 2px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.category-cards::-webkit-scrollbar { display: none; }
.category-card {
  position: relative; flex: 0 0 170px; width: 170px; aspect-ratio: 1 / 1;
  border-radius: 12px; overflow: hidden; background: var(--bg-soft-2); display: flex;
}
.category-card:nth-child(odd) { background: #fdf3e2; }
@media (max-width: 900px) { .category-card { flex-basis: 132px; width: 132px; } }

/* Categoría SIN foto todavía — se mantiene el look de siempre (emoji +
   nombre centrados, fondo pastel), nunca queda una tarjeta vacía. */
.category-card:not(.has-img) { flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 22px 16px; }
.category-card .emoji { font-size: 30px; margin-bottom: 8px; }
.category-card:not(.has-img) .name { font-size: 13px; font-weight: 700; color: var(--text); }

/* Categoría CON foto — la foto cubre toda la tarjeta (object-fit:cover, a
   propósito se recorta lo que sobre — acá es una foto, no un logo, así
   que cubrir se ve mejor que dejar espacio vacío), con el nombre
   superpuesto abajo en blanco sobre un degradado oscuro para que se lea
   sobre cualquier foto. */
.category-card.has-img { align-items: flex-end; }
.category-card.has-img .cat-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.category-card.has-img .name {
  position: relative; z-index: 1; width: 100%; box-sizing: border-box;
  padding: 30px 12px 12px; font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(to top, rgba(15,41,66,0.88), rgba(15,41,66,0.05));
}

/* Product grid + card */
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.product-card { border: 1px solid var(--border); border-radius: 12px; padding: 16px; position: relative; display: flex; flex-direction: column; }
.product-card-link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }
.product-card-link:hover { color: inherit; }
.product-card-link:hover .name { color: var(--accent); }
.product-card .badge {
  position: absolute; top: 14px; left: 14px; background: var(--accent); color: #1a2430;
  font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; z-index: 1;
}
/* Bug reportado (10-sep-2026): el cambio a contain con padding, sobre el
   fondo gris que tenía este cuadro, se veía como un "recuadro gris" atrás
   de la foto — el dueño pidió sacar el gris y en cambio solo delinear el
   marco. Se saca el relleno y se agrega un borde fino en su lugar. */
.product-card .thumb {
  height: 150px; border-radius: 8px; background: #fff; border: 1px solid var(--border); display: flex;
  align-items: center; justify-content: center; margin-bottom: 14px; overflow: hidden;
}
/* object-fit: contain (10-sep-2026, antes cover) — bug reportado: fotos de
   producto descentradas/cortadas en Destacados y Catálogo. Con cover se
   recortaba lo que sobrara para llenar el cuadro, y como las fotos suelen
   tener harto margen blanco alrededor del producto, el recorte no
   coincidía con dónde está el producto. Con contain se ve la foto
   COMPLETA siempre, centrada, sin recortar ni estirar, sea cual sea la
   proporción del cuadro (4 columnas en PC, 1-2 en celular). */
.product-card .thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8px; box-sizing: border-box; }
.product-card .thumb .placeholder { font-size: 48px; }
.product-card .category { font-size: 11.5px; color: var(--text-secondary); margin-bottom: 4px; }
.product-card .name { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 10px; min-height: 38px; flex: 1; }
.product-card .price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.product-card .price { font-size: 18px; font-weight: 800; color: var(--navy-dark); }
.product-card .old-price { font-size: 12.5px; color: #a7afb9; text-decoration: line-through; }
.product-card .add-btn { width: 100%; background: var(--accent); color: #1a2430; font-weight: 800; font-size: 13px; padding: 10px; border-radius: 7px; }
.product-card .add-btn.added { background: #6fcf97; }
.product-card .out-of-stock { font-size: 12px; color: #c0392b; font-weight: 700; margin-bottom: 8px; }

.empty-state { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--text-secondary); font-size: 14.5px; }

/* Trust strip */
.trust-strip { background: var(--bg-soft); border-radius: 14px; padding: 28px 36px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; }
@media (max-width: 900px) { .trust-strip { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.trust-item { display: flex; align-items: center; gap: 14px; }
.trust-item svg { flex: none; }
.trust-item .title { font-size: 13.5px; font-weight: 800; color: var(--navy-dark); }
.trust-item .sub { font-size: 12px; color: var(--text-secondary); }

/* Footer */
.site-footer { background: var(--navy-gradient); margin-top: 12px; }
.site-footer .container { padding: 44px 32px 28px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 900px) { .site-footer .container { grid-template-columns: 1fr 1fr; } }
.site-footer .col-title { font-size: 13px; font-weight: 800; color: #fff; margin-bottom: 12px; }
.site-footer .col-links { display: flex; flex-direction: column; gap: 9px; font-size: 13px; color: rgba(255,255,255,0.65); }
.site-footer .bottom { border-top: 1px solid rgba(255,255,255,0.12); }
.site-footer .bottom .container { padding: 16px 32px; font-size: 12px; color: rgba(255,255,255,0.5); }

/* Catálogo — breadcrumb / title / filtros / paginación */
.breadcrumb { padding: 20px 0 0; font-size: 13px; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; }
.breadcrumb .current { color: var(--navy-dark); font-weight: 700; }

/* NUEVO (10-sep-2026) — botón "Volver" en la ficha del producto (ver
   producto.html) — bug: en PC no había forma de salir del producto al
   entrar desde Destacados. */
.pd-back-link {
  margin-top: 16px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy-light);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pd-back-link:hover { color: var(--accent); }

.catalog-head { padding: 14px 0 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.catalog-head h1 { font-size: 26px; font-weight: 800; color: var(--navy-dark); margin: 0; }
.catalog-head .count { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.sort-box { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #3c4653; }
.sort-box select { border: 1px solid #dde1e6; border-radius: 7px; padding: 9px 14px; font-weight: 700; color: var(--navy-dark); background: #fff; }

.catalog-body { padding: 0 0 48px; display: grid; grid-template-columns: 250px 1fr; gap: 28px; }
@media (max-width: 860px) { .catalog-body { grid-template-columns: 1fr; } }

.filters-panel { border: 1px solid var(--border); border-radius: 12px; padding: 20px; }
.filters-panel .group-title { font-size: 13.5px; font-weight: 800; color: var(--navy-dark); margin-bottom: 10px; }
.filters-panel .divider { height: 1px; background: var(--border); margin: 16px 0; }
.chk { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: #3c4653; padding: 6px 0; cursor: pointer; }

.pagination { display: flex; justify-content: center; gap: 8px; padding: 0 0 48px; }
.pagination button {
  width: 36px; height: 36px; border-radius: 7px; border: 1px solid #dde1e6; color: #3c4653;
  font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 13.5px; background: #fff;
}
.pagination button.active { background: var(--accent); border-color: var(--accent); color: #1a2430; }

/* ─── Carrito: burbuja flotante + panel lateral (drawer) ────────────────── */
.cart-floating {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  display: flex; align-items: center; gap: 12px;
  background: var(--navy-dark); color: #fff; border-radius: 999px;
  padding: 12px 20px 12px 16px; box-shadow: 0 10px 30px rgba(15,41,66,0.35);
}
.cart-floating[hidden] { display: none; }
.cart-floating-icon { font-size: 20px; }
.cart-floating-info { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; }
.cart-floating-label { font-size: 11.5px; color: rgba(255,255,255,0.75); }
.cart-floating-label span { color: var(--accent); font-weight: 800; }
.cart-floating-total { font-size: 15px; font-weight: 800; }
.cart-floating-arrow { font-size: 16px; color: var(--accent); font-weight: 800; }

.cart-overlay {
  position: fixed; inset: 0; background: rgba(15,41,66,0.45); z-index: 70;
}
.cart-overlay[hidden] { display: none; }

.cart-drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: 400px; max-width: 92vw;
  background: #fff; z-index: 71; box-shadow: -12px 0 30px rgba(15,41,66,0.2);
  display: flex; flex-direction: column;
}
.cart-drawer[hidden] { display: none; }
.cart-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px; border-bottom: 1px solid var(--border);
}
.cart-drawer-head h3 { margin: 0; font-size: 17px; font-weight: 800; color: var(--navy-dark); }
.cart-drawer-close { font-size: 16px; color: var(--text-secondary); width: 32px; height: 32px; border-radius: 8px; }
.cart-drawer-close:hover { background: var(--bg-soft-2); color: var(--text); }

/* Botón "Seguir comprando" (11-sep-2026) — varios clientes no ven la ✕ del
   header, o piensan que cerrarla anula el pedido. Este botón dice
   explícitamente lo que hace: cierra el carrito y te deja donde estabas
   comprando. No reemplaza la ✕, solo le da una alternativa clara al lado. */
.cart-continue-shopping {
  display: block; width: 100%; text-align: left; font-size: 13px; font-weight: 700;
  color: var(--navy-dark); background: var(--bg-soft); padding: 12px 22px;
  border: none; border-bottom: 1px solid var(--border); cursor: pointer;
}
.cart-continue-shopping:hover { background: var(--bg-soft-2); }

.cart-drawer-items { flex: 1; overflow-y: auto; padding: 8px 22px; }
.cart-item { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.cart-item:last-child { border-bottom: none; }
/* Mismo ajuste que .product-card .thumb (10-sep-2026) — sin relleno gris,
   solo el borde delinea el marco. */
.cart-item-thumb {
  width: 64px; height: 64px; border-radius: 8px; background: #fff; border: 1px solid var(--border); flex: none;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
/* object-fit: contain (10-sep-2026, antes cover) — mismo motivo que
   .product-card .thumb img: foto completa, centrada, sin recortar. */
.cart-item-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; }
.cart-item-thumb-placeholder { font-size: 26px; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name { font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.cart-item-price { font-size: 12.5px; color: var(--text-secondary); }
.cart-item-subtotal { font-size: 12.5px; font-weight: 700; color: var(--navy-dark); margin-top: 4px; }
.cart-item-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.qty-stepper {
  display: flex; align-items: center; gap: 10px; border: 1px solid var(--border);
  border-radius: 7px; padding: 4px 10px; font-size: 13px; font-weight: 700; color: var(--navy-dark);
}
.qty-stepper button { font-size: 15px; font-weight: 800; color: var(--navy-dark); line-height: 1; padding: 2px; }
/* NUEVO (14-sep-2026) — la cantidad del carrito pasó de <span> fijo a
   <input type="number"> tipeable (mismo criterio visual que
   .summary-qty-stepper input de checkout.html): sin borde propio, se ve
   igual que el texto de antes pero ahora se puede tocar y escribir. */
.qty-stepper input[data-cart-qty-input] {
  width: 34px; border: none; text-align: center; font-size: 13px; font-weight: 700;
  color: var(--navy-dark); background: transparent; padding: 0; font-family: inherit;
  -moz-appearance: textfield;
}
.qty-stepper input[data-cart-qty-input]::-webkit-outer-spin-button,
.qty-stepper input[data-cart-qty-input]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-item-remove { font-size: 11.5px; color: #c0392b; font-weight: 700; }

/* Aviso de "se ajustó por stock" dentro del carrito — mismo estilo que
   .summary-stock-note del checkout. */
.cart-drawer-note { font-size: 12px; font-weight: 700; color: #b4780a; background: #fcefda; border-radius: 7px; padding: 8px 10px; margin: 0 22px 10px; }
.cart-drawer-note[hidden] { display: none; }

.cart-drawer-empty { padding: 40px 22px; text-align: center; color: var(--text-secondary); font-size: 13.5px; }
.cart-drawer-empty a { color: var(--accent); font-weight: 700; }
.cart-drawer-empty[hidden] { display: none; }

.cart-drawer-footer { border-top: 1px solid var(--border); padding: 18px 22px 22px; }
.cart-drawer-footer[hidden] { display: none; }
.cart-row { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; color: var(--text); padding: 5px 0; }
.cart-row.muted { color: var(--text-secondary); font-size: 12.5px; }
.cart-row.total { font-size: 16px; font-weight: 800; color: var(--navy-dark); border-top: 1px solid var(--border); margin-top: 6px; padding-top: 12px; }
.cart-checkout-btn {
  display: block; width: 100%; background: var(--accent); color: #1a2430; font-weight: 800; font-size: 14px;
  padding: 13px; border-radius: 8px; margin-top: 14px; text-align: center; text-decoration: none; box-sizing: border-box;
}
.cart-checkout-btn:hover { color: #1a2430; }
.cart-checkout-alt {
  display: block; width: 100%; text-align: center; font-size: 12.5px; color: var(--text-secondary);
  font-weight: 700; margin-top: 10px; text-decoration: underline;
}
.cart-checkout-note { font-size: 11.5px; color: var(--text-secondary); margin-top: 10px; text-align: center; line-height: 1.4; }

@media (max-width: 480px) {
  .cart-floating { right: 12px; bottom: 12px; padding: 10px 16px 10px 12px; }
  .cart-drawer { width: 100vw; }
}

/* ─── Ficha de producto (producto.html) ──────────────────────────────────── */
.product-detail { padding: 24px 0 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
@media (max-width: 900px) { .product-detail { grid-template-columns: 1fr; gap: 24px; } }

/* NUEVO (10-sep-2026) — envoltorio con position:relative para poder anclar
   el sello de marca (.pd-brand-badge) sobre la esquina de la foto sin que
   se lo pise cada vez que [data-gallery-main] cambia de contenido al
   navegar la galería (ver comentario en producto.html). */
.gallery-wrap { position: relative; }
.pd-brand-badge {
  position: absolute; top: -8px; left: -8px; width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(15,41,66,0.15);
  display: flex; align-items: center; justify-content: center; overflow: hidden; z-index: 2;
}
.pd-brand-badge[hidden] { display: none; }
/* object-fit: contain (10-sep-2026, antes era cover) — así se ve el logo
   COMPLETO sin recortar, sea cual sea su proporción o resolución; el
   espacio que sobre dentro del círculo blanco queda vacío en vez de
   cortar el logo. */
.pd-brand-badge img { width: 100%; height: 100%; object-fit: contain; padding: 5px; box-sizing: border-box; }

/* aspect-ratio: 1/1 (10-sep-2026, antes 4:3 y antes de eso height:380px
   fijo) — el catálogo mezcla fotos horizontales (guantes, lentes, cascos)
   con verticales (botas paradas, protección corporal de cuerpo entero);
   confirmado con el dueño usar el mismo formato que ya probaron Amazon/
   MercadoLibre para la foto principal de producto: cuadrado 1:1, el punto
   medio más parejo entre ambas orientaciones (con 4:3 las fotos verticales
   quedaban chicas con mucho espacio vacío a los costados). Con
   aspect-ratio el cuadro es siempre 1:1 sea cual sea el ancho, en PC y en
   celular. */
/* Bug reportado (10-sep-2026): quedó el mismo "marco gris" acá — se me
   había pasado aplicar a esta foto grande el mismo cambio que ya hicimos
   en las tarjetas chicas (fondo blanco + borde, en vez de relleno gris).
   Con fondo gris, el espacio que sobra alrededor de una foto que no es
   cuadrada se veía como una caja aparte, y el sello de marca (que se
   ancla a la esquina de este mismo cuadro) parecía "flotar afuera" de la
   foto en vez de quedar sobre ella. */
.gallery-main {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; background: #fff; border: 1px solid var(--border); display: flex;
  align-items: center; justify-content: center; overflow: hidden; margin-bottom: 12px;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-main video { width: 100%; height: 100%; object-fit: contain; background: #10151c; }
.gallery-main .placeholder { font-size: 90px; }
.gallery-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.gallery-thumbs button {
  width: 68px; height: 68px; border-radius: 8px; background: var(--bg-soft-2); overflow: hidden;
  border: 2px solid transparent; padding: 0; flex: none; position: relative;
}
.gallery-thumbs button.active { border-color: var(--accent); }
.gallery-thumbs img, .gallery-thumbs video { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs .placeholder { font-size: 26px; display: flex; align-items: center; justify-content: center; height: 100%; }
.gallery-thumbs .play-badge {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.35); color: #fff; font-size: 16px;
}

/* NUEVO (10-sep-2026) — "la imagen de la página web cliente no debería
   tener la opción de búsqueda visual (Google Lens), debería tener mejor un
   zoom (esto en el panel administrativo no hay problema)". Chrome/Google
   ofrecen "Buscar imagen"/Lens en el menú clic-derecho SOLO sobre elementos
   <img> — por eso la foto principal y las miniaturas de esta ficha pública
   se pintan como fondo (background-image) de un <div>/<span> en vez de un
   <img>, y en su lugar se agrega un zoom propio (click abre grande). El
   panel administrativo (productos.html) no se tocó — sigue usando <img>
   normal, tal como pidió el dueño. */
/* background-size: contain (10-sep-2026, antes cover) — bug reportado:
   la foto principal seguía saliendo cortada tras el fix de .gallery-main
   img (ese cambio no alcanzaba a este elemento, que es un div con
   background-image, no un <img> — ver comentario de arriba sobre por qué
   es así). Ahora se ve la foto COMPLETA dentro del cuadro 4:3, centrada,
   sin recortar. */
.pd-zoomable {
  width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center;
  cursor: zoom-in; position: relative;
}
.pd-zoom-hint {
  position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(10,14,20,0.6); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 16px; pointer-events: none;
}
/* background-size: contain (10-sep-2026, antes cover) — mismo motivo que
   .pd-zoomable: la miniatura no debe recortar la foto. */
.pd-thumb-img { width: 100%; height: 100%; display: block; background-size: contain; background-repeat: no-repeat; background-position: center; }
.pd-lightbox {
  position: fixed; inset: 0; background: rgba(8,12,18,0.92); z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 28px;
}
.pd-lightbox[hidden] { display: none; }
.pd-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.pd-lightbox-close {
  position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.14); color: #fff; border: none; font-size: 18px; cursor: pointer;
}
.pd-lightbox-close:hover { background: rgba(255,255,255,0.25); }

/* NUEVO (10-sep-2026) — link a la ficha técnica/certificado (PDF), cuando el
   producto tiene un ProductMedia de tipo Pdf cargado. */
.pd-pdf-link {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700;
  color: var(--navy-dark); background: var(--bg-soft-2); border-radius: 8px; padding: 8px 14px;
  margin: 0 0 16px; text-decoration: none; width: fit-content;
}
.pd-pdf-link:hover { background: var(--border); }

.pd-brand { font-size: 12.5px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; }
.pd-title { font-size: 25px; font-weight: 800; color: var(--navy-dark); margin: 0 0 10px; line-height: 1.25; }
.pd-rating { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; }
.pd-rating .stars { color: var(--accent); font-weight: 800; }
.pd-price-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.pd-price { font-size: 30px; font-weight: 800; color: var(--navy-dark); }
.pd-old-price { font-size: 15px; color: #a7afb9; text-decoration: line-through; }
.pd-badge { display: inline-block; background: var(--accent); color: #1a2430; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; margin-bottom: 14px; }
.pd-stock { font-size: 13px; font-weight: 700; margin: 10px 0 18px; }
.pd-stock.in { color: #1a7f4b; }
.pd-stock.out { color: #c0392b; }
.pd-desc { font-size: 14px; color: var(--text); line-height: 1.6; margin-bottom: 22px; }

.pd-variants { margin-bottom: 20px; }
.pd-variants .group-title { font-size: 12.5px; font-weight: 800; color: var(--navy-dark); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.3px; }
.pd-variant-options { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-variant-btn {
  border: 1px solid var(--border); border-radius: 8px; padding: 9px 16px; font-size: 13px;
  font-weight: 700; color: var(--text); background: #fff;
}
.pd-variant-btn.active { border-color: var(--navy-dark); background: var(--navy-dark); color: #fff; }

.pd-qty-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.pd-qty-row .qty-stepper { border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px; gap: 16px; }
/* NUEVO (14-sep-2026) — el contador de cantidad pasó de <span> a <input> para
   poder tipear la cantidad directo (antes solo se podía sumar de a 1 con los
   botones +/-), ver comentario de diseño en producto.html. */
.pd-qty-row .qty-stepper input[data-pd-qty] {
  width: 44px; border: none; text-align: center; font-size: 14px; font-weight: 700;
  color: var(--navy-dark); background: transparent; -moz-appearance: textfield;
}
.pd-qty-row .qty-stepper input[data-pd-qty]::-webkit-outer-spin-button,
.pd-qty-row .qty-stepper input[data-pd-qty]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pd-add-btn { flex: 1; background: var(--accent); color: #1a2430; font-weight: 800; font-size: 14.5px; padding: 14px; border-radius: 8px; }
.pd-add-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* NUEVO (14-sep-2026) — "Comprar por" (paquete/caja, ver Product.
   PackagingsJson) y el aviso de ajuste de cantidad por stock. */
.pd-packaging { margin-bottom: 16px; }
.pd-packaging .group-title { font-size: 12.5px; font-weight: 800; color: var(--navy-dark); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.3px; }
.pd-packaging select {
  width: 100%; max-width: 320px; border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; font-size: 13.5px; font-weight: 600; color: var(--text); background: #fff;
}
.pd-qty-note { font-size: 12.5px; font-weight: 700; color: #b4780a; margin: -12px 0 18px; }

.pd-specs { border-top: 1px solid var(--border); padding-top: 18px; margin-top: 4px; }
.pd-specs h3 { font-size: 15px; font-weight: 800; color: var(--navy-dark); margin: 0 0 12px; }
.pd-specs table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pd-specs td { padding: 8px 0; border-bottom: 1px solid var(--border); }
.pd-specs td:first-child { color: var(--text-secondary); width: 40%; }
.pd-specs td:last-child { color: var(--text); font-weight: 600; }

.pd-related { padding: 8px 0 48px; }
.pd-loading, .pd-error { padding: 80px 20px; text-align: center; color: var(--text-secondary); font-size: 14.5px; }
.pd-error a { color: var(--accent); font-weight: 700; }

/* ─── Checkout real (checkout.html) ──────────────────────────────────────── */
.checkout-steps { display: flex; gap: 6px; padding: 26px 0 8px; }
.checkout-steps .step {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700;
  color: var(--text-secondary); padding: 6px 14px 6px 6px; border-radius: 999px;
}
.checkout-steps .step span {
  width: 22px; height: 22px; border-radius: 999px; background: var(--bg-soft-2); color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800;
}
.checkout-steps .step.active { color: var(--navy-dark); }
.checkout-steps .step.active span { background: var(--accent); color: #1a2430; }
.checkout-steps .step.done span { background: #6fcf97; color: #fff; }
.checkout-steps .step::after { content: '›'; margin-left: 6px; color: var(--border); font-weight: 400; }
.checkout-steps .step:last-child::after { content: ''; }
.step-label { font-style: normal; }

/* BUGFIX (9-sep-2026) — "desface de ancho" reportado en checkout mobile: los
   4 pasos con su texto completo ("Identificación"/"Entrega"/"Pago"/
   "Confirmar") sumaban más de 500px sin ningún @media que los adaptara —
   en cualquier celular común (~360-412px de ancho) esa fila se salía del
   contenedor y desbordaba la pantalla, corriendo/recortando todo lo demás.
   De 481 a 640px se achica todo; debajo de 480px directamente se esconde el
   texto y quedan solo los círculos numerados conectados por flechas — sigue
   siendo perfectamente claro en qué paso vas, sin depender del ancho del
   texto de cada paso. */
@media (max-width: 640px) {
  .checkout-steps { gap: 2px; padding: 20px 0 6px; }
  .checkout-steps .step { font-size: 11.5px; padding: 5px 10px 5px 4px; }
  .checkout-steps .step span { width: 20px; height: 20px; font-size: 10.5px; }
}
@media (max-width: 480px) {
  .checkout-steps .step { padding: 4px 8px 4px 4px; }
  .checkout-steps .step .step-label { display: none; }
  .checkout-steps .step::after { margin-left: 2px; }
}

.checkout-layout { display: grid; grid-template-columns: 1fr 340px; gap: 32px; padding: 8px 0 56px; align-items: start; }
@media (max-width: 900px) { .checkout-layout { grid-template-columns: 1fr; } }
/* BUGFIX (9-sep-2026): con el panel lateral oculto en el paso "done" (ver
   checkout.html/showStep), sin esto la grilla igual reservaba los 340px de
   esa columna vacía — dejaba un hueco grande a la derecha. */
.checkout-layout.no-summary { grid-template-columns: 1fr; }

.checkout-panel { border: 1px solid var(--border); border-radius: 12px; padding: 28px; }
.checkout-panel h2 { font-size: 18px; font-weight: 800; color: var(--navy-dark); margin: 0 0 18px; }

.auth-tabs { display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.auth-tabs button {
  padding: 10px 4px; font-size: 13.5px; font-weight: 700; color: var(--text-secondary);
  border-bottom: 2px solid transparent; margin-right: 18px;
}
.auth-tabs button.active { color: var(--navy-dark); border-bottom-color: var(--accent); }

.auth-form, .checkout-panel form { display: flex; flex-direction: column; gap: 14px; max-width: 420px; }
.auth-form label, .checkout-panel form label {
  display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--text-secondary);
}
.auth-form input, .checkout-panel form input, .checkout-panel form textarea, .checkout-panel form select {
  border: 1px solid #dde1e6; border-radius: 8px; padding: 11px 13px; font-size: 14px; color: var(--text);
  font-family: inherit; font-weight: 400; background: #fff;
}
.checkout-panel form textarea { min-height: 70px; resize: vertical; }
.checkout-panel form select:disabled { background: #f4f5f7; color: var(--text-secondary); cursor: not-allowed; }
.form-hint { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
/* Aviso GPS del resumen de envío (11-sep-2026) — se muestra cuando el envío
   quedó "estimado" (tramo más caro aplicado por no ubicar al cliente, ver
   PickFallbackTier en OrderService). Tono ámbar para que no se confunda
   con un aviso genérico — es información sobre plata (puede pagar menos). */
.gps-upsell-hint { color: #96650a; background: #fff6e6; border-radius: 7px; padding: 8px 10px; font-weight: 600; }
.form-error {
  font-size: 12.5px; color: #c0392b; background: #fdecea; border-radius: 7px; padding: 10px 12px; font-weight: 600;
}

/* Ubicación GPS del checkout (11-sep-2026, costo de envío por tramos de
   km) — botón opcional, no bloquea nada si no se usa. */
.geo-locate-box { display: flex; flex-direction: column; gap: 6px; margin-top: -4px; }
.btn-locate {
  align-self: flex-start; background: #eef4fb; color: var(--navy-dark); border: 1px solid #cfe0f2;
  font-weight: 700; font-size: 13px; padding: 10px 16px; border-radius: 8px;
}
.btn-locate:hover { background: #e2edf9; }
.btn-locate:disabled { opacity: 0.65; cursor: default; }
.geo-locate-status { font-size: 12px; color: var(--text-secondary); }
.geo-locate-status.ok { color: #1c8a4b; font-weight: 700; }
.geo-locate-status.error { color: #b3760a; }
.btn-primary {
  align-self: flex-start; background: var(--accent); color: #1a2430; font-weight: 800; font-size: 13.5px;
  padding: 12px 26px; border-radius: 8px; margin-top: 4px;
}
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-link-back { font-size: 12.5px; color: var(--text-secondary); font-weight: 700; text-decoration: underline; margin-top: 10px; align-self: flex-start; }
.btn-secondary {
  background: #fff; color: var(--navy-dark); font-weight: 800; font-size: 13.5px;
  padding: 11px 26px; border-radius: 8px; border: 1px solid var(--border);
}
.btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }

/* Modal de confirmación de celular en checkout (11-sep-2026) — ver
   showPhoneConfirmModal en checkout.html. Mismo criterio de overlay que
   .cart-overlay, pero centrado en vez de drawer lateral, porque es una
   decisión puntual (2 botones), no un panel con contenido para navegar. */
.phone-confirm-overlay {
  position: fixed; inset: 0; background: rgba(15,41,66,0.45); z-index: 80;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.phone-confirm-overlay[hidden] { display: none; }
.phone-confirm-modal {
  background: #fff; border-radius: 12px; max-width: 420px; width: 100%;
  padding: 26px; box-shadow: 0 12px 30px rgba(15,41,66,0.25);
}
.phone-confirm-modal h3 { margin: 0 0 10px; font-size: 16px; font-weight: 800; color: var(--navy-dark); }
.phone-confirm-modal p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; margin: 0 0 20px; }
.phone-confirm-actions { display: flex; flex-direction: column; gap: 10px; }
.phone-confirm-actions .btn-primary, .phone-confirm-actions .btn-secondary { width: 100%; text-align: center; }

.billing-toggle { margin-top: 4px; }
.billing-toggle .chk { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }
.billing-fields { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; padding: 14px; background: var(--bg-soft); border-radius: 8px; }

.payment-options { display: flex; flex-direction: column; gap: 10px; max-width: 420px; margin-bottom: 16px; }
.payment-option {
  display: flex; align-items: center; gap: 12px; border: 1px solid #dde1e6; border-radius: 9px;
  padding: 13px 16px; cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--text);
}
.payment-option .icon { font-size: 18px; }
.payment-option.selected { border-color: var(--navy-dark); background: var(--bg-soft-2); }

.review-block { margin-bottom: 20px; }
.review-block .group-title { font-size: 12px; font-weight: 800; color: var(--navy-dark); text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 8px; }
.review-block .review-line { font-size: 13.5px; color: var(--text); line-height: 1.6; }
.review-edit { font-size: 12px; color: var(--accent); font-weight: 700; margin-left: 8px; }

.order-success { text-align: center; padding: 30px 10px; }
.order-success h2 { font-size: 22px; color: var(--navy-dark); margin-bottom: 10px; }
.order-success p { color: var(--text); font-size: 14px; line-height: 1.6; }
.order-success .btn-primary { margin: 20px auto 0; }

/* NUEVO (9-sep-2026) — desglose real (Subtotal/Envío/Descuento/Total) de la
   pantalla de confirmación, ver checkout.html/renderOrderBreakdown. Evita el
   bug de mostrar dos "Total" distintos en la misma pantalla (este y el del
   panel lateral, que ahora se oculta en este paso). */
.success-breakdown { max-width: 320px; margin: 18px auto 0; text-align: left; border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; }
.success-breakdown .row { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--text); padding: 6px 0; }
.success-breakdown .row.total { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 12px; font-weight: 800; font-size: 15px; color: var(--navy-dark); }

.checkout-summary {
  border: 1px solid var(--border); border-radius: 12px; padding: 22px; position: sticky; top: 20px;
}
.checkout-summary h3 { font-size: 15px; font-weight: 800; color: var(--navy-dark); margin: 0 0 16px; }
.summary-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.summary-item:last-child { border-bottom: none; }
.summary-item .thumb { width: 44px; height: 44px; border-radius: 6px; background: var(--bg-soft-2); flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.summary-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.summary-item .info { flex: 1; min-width: 0; }
.summary-item .info .name { font-weight: 700; color: var(--text); }
.summary-item .info .qty { color: var(--text-secondary); font-size: 12px; }
.summary-item .price { font-weight: 700; color: var(--navy-dark); white-space: nowrap; }
/* NUEVO (14-sep-2026) — cantidad editable en el resumen del checkout. */
.summary-qty-stepper { margin: 6px 0; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 7px; padding: 3px 8px; }
.summary-qty-stepper button { font-size: 14px; font-weight: 800; color: var(--navy-dark); line-height: 1; padding: 2px; }
.summary-qty-stepper input { width: 36px; border: none; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--navy-dark); background: transparent; }
.summary-item-remove { display: block; font-size: 11.5px; color: #c0392b; font-weight: 700; margin-top: 2px; }
.summary-stock-note { font-size: 12px; font-weight: 700; color: #b4780a; background: #fcefda; border-radius: 7px; padding: 8px 10px; margin: 6px 0 10px; }

.checkout-empty { padding: 80px 20px; text-align: center; color: var(--text-secondary); font-size: 14.5px; }
.checkout-empty a { color: var(--accent); font-weight: 700; }

/* ─── Mis pedidos (mis-pedidos.html) — 11-sep-2026 ────────────────────────
   Historial simple de pedidos del cliente web (B2C). Los clientes B2B
   (Reseller) van a tener su propio panel más completo aparte — esto NO es
   para ellos, ver nota de diseño en mis-pedidos.html. */
.orders-page-title { font-size: 22px; font-weight: 800; color: var(--navy-dark); margin: 24px 0 6px; }
.orders-page-subtitle { color: var(--text-secondary); font-size: 13.5px; margin-bottom: 24px; }

.orders-empty { padding: 60px 20px; text-align: center; color: var(--text-secondary); font-size: 14.5px; border: 1px dashed var(--border); border-radius: 12px; margin-bottom: 60px; }
.orders-empty a { color: var(--accent); font-weight: 700; }

.orders-login-gate { padding: 60px 20px; text-align: center; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 60px; }
.orders-login-gate p { color: var(--text-secondary); font-size: 14px; margin: 0 0 16px; }

.order-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 60px; }
.order-card {
  display: flex; align-items: center; gap: 16px; border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 18px; text-decoration: none; color: inherit; flex-wrap: wrap;
}
.order-card:hover { border-color: var(--navy-light); }
.order-card .oc-main { flex: 1; min-width: 180px; }
.order-card .oc-number { font-weight: 800; color: var(--navy-dark); font-size: 14.5px; }
.order-card .oc-meta { font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; }
.order-card .oc-total { font-weight: 800; color: var(--navy-dark); font-size: 15px; white-space: nowrap; }
.order-card .oc-arrow { color: var(--text-secondary); font-size: 18px; }

.order-status-badge {
  display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 800;
}
.order-status-badge.Received { background: #eef2ff; color: #3b4fbf; }
.order-status-badge.Confirmed { background: #e8f6ee; color: #1a8a4a; }
.order-status-badge.Preparing { background: #fff4e0; color: #b8720a; }
.order-status-badge.OnWay { background: #e6f3fb; color: #1a6fa8; }
.order-status-badge.Delivered { background: #e8f6ee; color: #1a8a4a; }
.order-status-badge.Cancelled { background: #fdecea; color: #c0392b; }

.order-detail-back { display: inline-block; font-size: 12.5px; color: var(--text-secondary); font-weight: 700; text-decoration: underline; margin-bottom: 16px; }
.order-detail-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.order-detail-head .odh-number { font-size: 19px; font-weight: 800; color: var(--navy-dark); }
.order-detail-head .odh-date { font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; }

.order-detail-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; margin-bottom: 60px; }
@media (max-width: 800px) { .order-detail-grid { grid-template-columns: 1fr; } }

.order-detail-box { border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px; margin-bottom: 18px; }
.order-detail-box h3 { font-size: 14px; font-weight: 800; color: var(--navy-dark); margin: 0 0 14px; }
.order-detail-item { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.order-detail-item:last-child { border-bottom: none; }
.order-detail-item .odi-name { color: var(--text); }
.order-detail-item .odi-qty { color: var(--text-secondary); font-size: 12px; }
.order-detail-item .odi-sub { font-weight: 700; color: var(--navy-dark); white-space: nowrap; }

.order-detail-row { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--text); padding: 5px 0; }
.order-detail-row.total { font-size: 16px; font-weight: 800; color: var(--navy-dark); border-top: 1px solid var(--border); margin-top: 6px; padding-top: 12px; }

.order-detail-note { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; margin-top: 4px; }
.order-detail-note.warn { background: #fff4e0; color: #8a5a06; padding: 10px 12px; border-radius: 8px; margin-top: 10px; }

/* ─── Mi cuenta (mi-cuenta.html) — NUEVO (12-sep-2026) ─────────────────────
   Pantalla única de cuenta del cliente web (B2C), con pestañas: Datos
   personales, Seguridad (contraseña), Mis documentos (factura/boleta
   descargable) y Mis pedidos (absorbe lo que antes era mis-pedidos.html —
   ver nota de diseño ahí). Mismo criterio "solo B2C" que ya documentaba
   mis-pedidos.html: los clientes B2B (Reseller) van a tener su propio
   panel aparte. Reusa a propósito clases ya existentes de checkout.html
   (.checkout-panel, sus inputs) y de mis-pedidos.html (.order-*) para no
   duplicar estilos — acá solo se agrega lo que es realmente nuevo: las
   pestañas y las tarjetas de "Mis documentos". */
.account-page-title { font-size: 22px; font-weight: 800; color: var(--navy-dark); margin: 24px 0 6px; }
.account-page-subtitle { color: var(--text-secondary); font-size: 13.5px; margin-bottom: 20px; }

.account-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--border); margin-bottom: 26px; }
.account-tabs button {
  padding: 12px 16px; font-size: 13.5px; font-weight: 700; color: var(--text-secondary);
  border-bottom: 2px solid transparent; white-space: nowrap; margin-right: 4px;
}
.account-tabs button.active { color: var(--navy-dark); border-bottom-color: var(--accent); }
.account-tab-panel[hidden] { display: none; }
.account-tab-panel { padding-bottom: 60px; }

.form-success {
  font-size: 12.5px; color: #1a8a4a; background: #e8f6ee; border-radius: 7px; padding: 10px 12px; font-weight: 600;
}

.doc-list { display: flex; flex-direction: column; gap: 12px; }
.doc-card {
  display: flex; align-items: center; gap: 16px; border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 18px; flex-wrap: wrap;
}
.doc-card .dc-main { flex: 1; min-width: 180px; }
.doc-card .dc-number { font-weight: 800; color: var(--navy-dark); font-size: 14.5px; }
.doc-card .dc-meta { font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; }
.doc-card .dc-total { font-weight: 800; color: var(--navy-dark); font-size: 15px; white-space: nowrap; }
.doc-card .dc-note { font-size: 12px; color: var(--text-secondary); font-style: italic; }