/* ════════════════════════════════════════════════════════════════
   vitrina-polish.css — sistema de diseño unificado para la vitrina
   ────────────────────────────────────────────────────────────────
   Este archivo se carga DESPUÉS del <style> inline de cada página
   para enforcear consistencia visual a través de todos los archivos
   (categoria, producto, checkout, confirmacion, carrito, web-servicios).

   Usa SIEMPRE las variables --pri / --pri-dk / --sec / --bd / --bg
   ya seteadas dinámicamente en cada página por _cargarConfig(),
   así cada empresa conserva su branding (color_primario / color_hdr).

   El archivo NO se enlaza desde index.html (la home queda intacta).
   ════════════════════════════════════════════════════════════════ */

/* — Tipografía: asegura Montserrat aunque la página no la haya cargado — */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

body {
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ════════════════════════════════════════════════════════════════
   1. CARDS DE PRODUCTO — sombra suave + lift en hover
   Cubre las variantes de los 6 templates más las clases genéricas
   usadas en categoria.html (.prod-card) y producto.html (.marca-item).
   ════════════════════════════════════════════════════════════════ */
.t1-card, .t2-card, .t3-card, .t4-card, .t5-card, .t6-card,
.prod-card, .marca-item {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.t1-card:hover, .t2-card:hover, .t3-card:hover,
.t4-card:hover, .t5-card:hover, .t6-card:hover,
.prod-card:hover, .marca-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12) !important;
}

/* ════════════════════════════════════════════════════════════════
   2. INPUTS, SELECTS, TEXTAREAS — focus turquesa + bordes redondeados
   Targetea cualquier input/select/textarea dentro del <main>/<form>
   pero excluye los del header (que tienen sus propios estilos t*-hd).
   ════════════════════════════════════════════════════════════════ */
main input[type="text"],   form input[type="text"],
main input[type="email"],  form input[type="email"],
main input[type="tel"],    form input[type="tel"],
main input[type="number"], form input[type="number"],
main input[type="search"], form input[type="search"],
main input[type="url"],    form input[type="url"],
main input[type="password"], form input[type="password"],
main select, form select,
main textarea, form textarea,
.field input, .field select, .field textarea,
.fld   input, .fld   select, .fld   textarea {
  border: 1.5px solid var(--bd, #e5e7eb);
  border-radius: 8px;
  padding: 10px 13px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text, #111827);
  background: #fff;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

main input[type="text"]:focus,   form input[type="text"]:focus,
main input[type="email"]:focus,  form input[type="email"]:focus,
main input[type="tel"]:focus,    form input[type="tel"]:focus,
main input[type="number"]:focus, form input[type="number"]:focus,
main input[type="search"]:focus, form input[type="search"]:focus,
main input[type="url"]:focus,    form input[type="url"]:focus,
main input[type="password"]:focus, form input[type="password"]:focus,
main select:focus, form select:focus,
main textarea:focus, form textarea:focus,
.field input:focus, .field select:focus, .field textarea:focus,
.fld   input:focus, .fld   select:focus, .fld   textarea:focus {
  border-color: var(--pri, #0ea7c0) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pri) 15%, transparent) !important;
}

/* Estado de error — rojo, mantiene el mismo formato */
.field input.err, .field select.err, .field textarea.err,
.fld   input.err, .fld   select.err, .fld   textarea.err {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}

/* Labels consistentes en formularios */
.field label, .fld label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #6b7280);
}

/* ════════════════════════════════════════════════════════════════
   3. NAV — el estilo de los ítems del menú (normal / hover / active chip)
   vive en js/cart.js (injectNavPillCss), porque cart.js es el único asset
   que cargan las 8 páginas con nav; este CSS solo lo cargan 6. Fuente única.
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   4. CHECKOUT — pasos, opt-cards, botones de pago
   ════════════════════════════════════════════════════════════════ */

/* Pasos numerados (si la página los usa con .step / .stp) */
.step, .stp {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 13px;
  color: var(--muted, #6b7280);
  transition: color 0.2s ease;
}

.step .step-num, .stp .step-num,
.step-circle, .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bd, #e5e7eb);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}

.step.active, .stp.active,
.step.on,     .stp.on {
  color: var(--pri, #0ea7c0) !important;
}

.step.active .step-num, .stp.active .step-num,
.step.on     .step-num, .stp.on     .step-num,
.step-num.active, .step-num.on {
  background: var(--pri, #0ea7c0) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pri) 18%, transparent);
  transform: scale(1.05);
}

.step.done .step-num, .stp.done .step-num,
.step-num.done {
  background: var(--green, #16a34a) !important;
}

/* opt-card (radio cards de envío y pago) — refuerzo del seleccionado */
.opt-card {
  border-radius: 12px !important;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease !important;
}
.opt-card:hover {
  border-color: color-mix(in srgb, var(--pri) 55%, transparent) !important;
  transform: translateY(-1px);
}
.opt-card.selected {
  border-color: var(--pri, #0ea7c0) !important;
  background: color-mix(in srgb, var(--pri) 6%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pri) 12%, transparent), 0 4px 12px color-mix(in srgb, var(--pri) 8%, transparent) !important;
}

/* ════════════════════════════════════════════════════════════════
   5. BOTONES PRIMARIOS (Continuar, Pagar, Volver) — turquesa
   No toca los botones .prod-add / .t*-add / .marca-btn / .btn-add-cart
   que ya son naranjas CTA (cambio anterior).
   ════════════════════════════════════════════════════════════════ */
.btn-primary, .btn-pay, .btn-confirm, .btn-continuar, .btn-checkout,
.btn-pri, button.bc, .btn.bc {
  background: var(--pri, #0ea7c0) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 22px !important;
  font-weight: 800 !important;
  font-family: inherit !important;
  font-size: 13.5px !important;
  cursor: pointer;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--pri) 25%, transparent);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.08s ease !important;
}
.btn-primary:hover, .btn-pay:hover, .btn-confirm:hover,
.btn-continuar:hover, .btn-checkout:hover,
.btn-pri:hover, button.bc:hover, .btn.bc:hover {
  background: var(--pri-dk, #0a8ba0) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--pri) 40%, transparent);
  transform: translateY(-1px);
}
.btn-primary:active, .btn-pay:active, .btn-confirm:active,
.btn-continuar:active, .btn-checkout:active,
.btn-pri:active, button.bc:active, .btn.bc:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--pri) 30%, transparent);
}

/* Botones secundarios (Volver, Cancelar) — outline turquesa */
.btn-secondary, .btn-back, .btn-volver, .btn-outline {
  background: #fff !important;
  color: var(--pri, #0ea7c0) !important;
  border: 1.5px solid var(--pri, #0ea7c0) !important;
  border-radius: 8px !important;
  padding: 11px 22px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  font-size: 13px !important;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn-secondary:hover, .btn-back:hover, .btn-volver:hover, .btn-outline:hover {
  background: color-mix(in srgb, var(--pri) 8%, transparent) !important;
}

/* ════════════════════════════════════════════════════════════════
   6. CONFIRMACIÓN DE PEDIDO — checkmark + estado de éxito en turquesa
   La página confirmacion.html ya define .confirm-card y .step-dot.
   Aquí solo refinamos colores y shadows.
   ════════════════════════════════════════════════════════════════ */
.confirm-card {
  box-shadow: 0 20px 60px rgba(2, 8, 23, 0.12), 0 0 0 1px var(--bd, #e5e7eb) !important;
  border-radius: 16px !important;
}

/* Checkmark grande de éxito — antes verde, ahora turquesa para
   coincidir con el resto del branding */
.confirm-icon, .check-icon, .success-icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pri, #0ea7c0), var(--pri-dk, #0a8ba0));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  margin: 0 auto 18px;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--pri) 35%, transparent);
  animation: vp-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes vp-pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

/* Step-dots de confirmacion — el "active" / "done" en turquesa */
.step-dot.active {
  background: var(--pri, #0ea7c0) !important;
}

/* ════════════════════════════════════════════════════════════════
   7. CARRITO — items y totales
   ════════════════════════════════════════════════════════════════ */
.items-card, .summary-card, .totals-card {
  box-shadow: 0 4px 18px rgba(2, 8, 23, 0.06) !important;
  border-radius: 12px !important;
}

.items-card:hover {
  box-shadow: 0 6px 22px rgba(2, 8, 23, 0.08) !important;
}

/* Botones de cantidad +/- en el carrito */
.qty-btn, .btn-qty {
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--bd, #e5e7eb);
  border-radius: 6px;
  background: #fff;
  color: var(--text, #111827);
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.qty-btn:hover, .btn-qty:hover {
  border-color: var(--pri, #0ea7c0);
  color: var(--pri, #0ea7c0);
  background: color-mix(in srgb, var(--pri) 5%, transparent);
}

/* ════════════════════════════════════════════════════════════════
   8. BREADCRUMBS — separadores y hover
   ════════════════════════════════════════════════════════════════ */
.bc a, .breadcrumb a {
  color: var(--muted, #6b7280);
  transition: color 0.15s ease;
}
.bc a:hover, .breadcrumb a:hover {
  color: var(--pri, #0ea7c0);
}

/* ════════════════════════════════════════════════════════════════
   9. SCROLLBAR sutil para áreas con overflow (fuera del header)
   ════════════════════════════════════════════════════════════════ */
.cart-list::-webkit-scrollbar,
.summary-rows::-webkit-scrollbar {
  width: 6px;
}
.cart-list::-webkit-scrollbar-thumb,
.summary-rows::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--pri) 25%, transparent);
  border-radius: 3px;
}
.cart-list::-webkit-scrollbar-thumb:hover,
.summary-rows::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--pri) 50%, transparent);
}

/* ════════════════════════════════════════════════════════════════
   10. SELECCIÓN DE TEXTO — usa el color primario
   ════════════════════════════════════════════════════════════════ */
::selection {
  background: color-mix(in srgb, var(--pri) 25%, transparent);
  color: var(--text, #111827);
}

/* ════════════════════════════════════════════════════════════════
   "Últimas unidades" — badge de escasez en la tarjeta de producto
   (Parte 6 stock/reposición). Aparece cuando 0 < stock ≤ mínimo.
   No expone números: solo el aviso. */
.card .thumb { position: relative; }
.badge-ultimas {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 2;
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 3px 9px;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(194, 65, 12, .12);
  pointer-events: none;
}

/* ============================================================================
   HEADER MÓVIL — hamburguesa compartida (todas las plantillas t1..t6)
   Colapsa el nav horizontal (#hd-nav-slot) en un drawer bajo el header.
   El botón .hd-burger lo inyecta js/vitrina-header-mobile.js.
   ============================================================================ */
.hd-burger{display:none;background:none;border:none;color:#374151;font-size:20px;line-height:1;cursor:pointer;padding:6px 8px;align-items:center;justify-content:center;flex-shrink:0;font-family:inherit}
.t3-header .hd-burger,.t4-header .hd-burger,.t6-header .hd-burger,.t2-topbar .hd-burger{color:#fff}
.t5-header .hd-burger{color:#333}
@media(max-width:820px){
  .hd-burger{display:inline-flex}
  .t1-hd,.t3-hd,.t4-hd,.t5-hd{padding-left:12px;padding-right:12px;gap:10px}
  .t2-topbar{padding-left:12px;padding-right:12px;gap:10px}
  .t1-hd .sb,.t3-hd .sb,.t4-hd .sb,.t6-header .sb{flex:1 1 auto;width:auto;min-width:0;max-width:none}
  .t4-hd .t4-logo-wsp,.t1-hd .logo,.t3-hd .logo,.t5-hd .logo{flex-shrink:0}
  .t1-hd .nr .wh,.t3-hd .wh,.t5-hd .wh,.t2-topbar .wh,.t4-logo-wsp .t4-wsp-small{display:none}
  .t1-hd .nr{gap:10px;margin-left:0}
  #hd-nav-slot{display:none!important;position:absolute;top:100%;left:0;right:0;width:100%;flex-direction:column!important;align-items:stretch!important;flex:none!important;margin:0!important;padding:8px!important;gap:2px!important;background:#fff;box-shadow:0 14px 30px rgba(0,0,0,.18);border-radius:0 0 16px 16px;max-height:72vh;overflow-y:auto;z-index:3000}
  #header-root.mnav-open #hd-nav-slot{display:flex!important}
  #hd-nav-slot .hd-nav-item{position:static!important;display:block!important;width:100%!important}
  #hd-nav-slot .hd-nav-item>a{color:#1f2937!important;width:100%;padding:13px 14px!important;font-size:13px!important;border-radius:8px}
  #hd-nav-slot .hd-nav-item>a:hover{background:#f3f4f6!important}
  #hd-nav-slot .hd-nav-dropdown{display:none!important}
}