/* ═══════════════════════════════════════════════════════════════
   UPTECH — CSS compartido de la tienda pública
   Usado por: index.html, categoria.html, producto.html
   Reglas que antes estaban copiadas y pegadas en las 3 páginas.
   Si cambia algo aquí, aplica a las 3 páginas a la vez.
   ═══════════════════════════════════════════════════════════════ */

/* ── Bottom nav flotante (solo visible en móvil, ver media query en cada página) ── */
.mobile-bottom-nav{display:none;}

@media(max-width:640px){
  .mobile-bottom-nav{
    display:flex;position:fixed;left:14px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,0.72);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
    border:1px solid rgba(255,255,255,0.5);border-radius:22px;padding:6px;
    box-shadow:0 14px 34px rgba(16,21,28,0.18);z-index:1000;
    justify-content:space-around;align-items:center;
  }
  [data-theme="dark"] .mobile-bottom-nav{background:rgba(18,22,31,0.72);border-color:rgba(255,255,255,0.08);}
  .mbn-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--text-dim);font-size:10px;font-weight:700;letter-spacing:0.2px;padding:9px 4px;border-radius:16px;position:relative;flex:1;transition:color .2s,background .2s;}
  .mbn-item:active{background:var(--surface-alt);}
  [data-theme="dark"] .mbn-item:active{background:rgba(255,255,255,0.08);}
  .mbn-badge{position:absolute;top:2px;right:calc(50% - 22px);background:var(--purple);color:#fff;font-size:9px;font-weight:800;min-width:15px;height:15px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
}

/* ── Tarjeta de producto — piezas idénticas entre inicio y categoría ──
   (tamaños de .pcard/.pimg/.pname/.pspec/.p-now/.pactions quedan en cada
   página porque a propósito son distintos: fila horizontal vs grilla) */
/* z-index:3 es el fix del bug de hover: .pimg img gana `transform:scale()` al pasar el
   mouse, y ese transform crea un nuevo stacking context que — sin este z-index — pintaba
   la imagen POR ENCIMA del badge (position:absolute sin z-index pierde ese empate por
   orden de aparición en el DOM). Con z-index explícito el badge se queda siempre arriba. */
.pbadge{position:absolute;top:12px;left:12px;font-size:10px;font-weight:800;padding:5px 11px;border-radius:7px;text-transform:uppercase;letter-spacing:0.4px;z-index:3;}
.pbadge.sale{background:#E8231E;color:#fff;border:none;}
.pbadge.new{background:#00E676;color:#000;border:none;}
.pbody{padding:16px 18px 12px;display:flex;flex-direction:column;gap:7px;flex:1;}
.pcat{font-size:12px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;color:var(--blue-deep);}
[data-theme="dark"] .pcat{color:var(--blue-light);}
/* Alto fijo del bloque de specs (≈2 filas de pills) con recorte: todas las tarjetas
   quedan del mismo alto aunque un producto tenga más specs que otro — se acabó el
   "espacio grande" en las tarjetas con pocas specs. */
.pspecs{display:flex;flex-wrap:wrap;gap:5px;height:80px;overflow:hidden;align-content:flex-start;}
.pstock{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.3px;color:#047857;background:rgba(0,230,118,0.16);padding:4px 10px;border-radius:20px;line-height:1;}
.pstock::before{content:"";width:6px;height:6px;border-radius:50%;background:#00C853;}
.pstock.low{color:#3d1c00;background:#FFB000;}
.pstock.low::before{background:#7a3d00;}
[data-theme="dark"] .pstock{color:#34D399;}
[data-theme="dark"] .pstock.low{color:#3d1c00;}
.pprices{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:4px;flex-wrap:wrap;}
.p-was{font-size:14px;color:var(--text-dim);text-decoration:line-through;}
@keyframes saveBoom{
  0%{transform:scale(0) rotate(-8deg);opacity:0;}
  60%{transform:scale(1.18) rotate(2deg);opacity:1;}
  100%{transform:scale(1) rotate(0deg);opacity:1;}
}
.p-save{
  position:absolute;top:42px;left:12px;z-index:3;
  display:inline-flex;align-items:center;gap:3px;
  background:#FFD700;
  color:#000;font-size:10px;font-weight:800;line-height:1;padding:5px 9px;border-radius:20px;
  box-shadow:0 3px 10px rgba(184,134,11,0.45);
  border:none;
  white-space:nowrap;
  animation:saveBoom .55s cubic-bezier(.34,1.56,.4,1) .15s backwards;
}
.btn-wa{background:#25D366;color:#fff;border:1px solid #1FB855;}
.btn-wa:hover{background:#1FB855;box-shadow:0 8px 22px rgba(37,211,102,0.4);transform:translateY(-2px);}

/* ── Botón de carrito en el header ── */
.cart-btn{display:flex;align-items:center;gap:8px;border:1.5px solid var(--purple);color:var(--purple-deep);padding:9px 16px;border-radius:9px;font-weight:700;font-size:12.5px;letter-spacing:0.3px;position:relative;transition:all .3s cubic-bezier(.2,.8,.2,1);background:var(--surface);}
[data-theme="dark"] .cart-btn{color:#C4B5FD;}
.cart-btn:hover{background:var(--purple);color:#fff;transform:translateY(-3px);box-shadow:0 10px 24px rgba(139,92,246,0.4);}
.cart-num{position:absolute;top:-7px;right:-7px;background:var(--blue);color:#fff;font-size:10px;font-weight:800;min-width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;}

/* ── Drawer del carrito (panel deslizante) ── */
.cart-overlay{position:fixed;inset:0;background:rgba(10,12,18,0.55);z-index:90;opacity:0;visibility:hidden;transition:opacity .3s;}
.cart-overlay.open{opacity:1;visibility:visible;}
.cart-panel{position:fixed;top:0;right:-460px;width:440px;max-width:94vw;height:100%;background:var(--surface);border-left:1px solid var(--border);z-index:91;transition:right .4s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;}
.cart-panel.open{right:0;}
.cart-head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--border);}
.cart-head h3{font-size:19px;font-weight:800;}
.cart-head-right{display:flex;align-items:center;gap:12px;}
.cart-count-badge{font-size:11px;color:var(--blue-deep);background:rgba(14,165,233,0.1);border:1px solid rgba(14,165,233,0.3);padding:3px 10px;border-radius:7px;}
[data-theme="dark"] .cart-count-badge{color:var(--blue-light);}
.cart-close-btn{font-size:18px;color:var(--text-dim);}
.cart-items{flex:1;overflow-y:auto;padding:20px 24px;}
.cart-empty{color:var(--text-dim);text-align:center;padding:50px 0;font-size:13.5px;}
.cart-item{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--border);}
.cart-item-img{width:66px;height:66px;background:var(--surface-alt);border-radius:9px;overflow:hidden;flex-shrink:0;}
.cart-item-img img{width:100%;height:100%;object-fit:contain;padding:6px;}
.cart-item-info{flex:1;}
.cart-item-cat{font-size:9.5px;letter-spacing:0.6px;text-transform:uppercase;color:var(--text-dim);margin-bottom:3px;}
.cart-item-info h5{font-size:13.5px;font-weight:700;margin-bottom:6px;line-height:1.3;}
.cart-item-bottom{display:flex;align-items:center;justify-content:space-between;}
.cart-item-price{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--blue-deep);}
[data-theme="dark"] .cart-item-price{color:var(--blue-light);}
.cart-item-qty{display:flex;align-items:center;gap:9px;}
.qty-btn{width:26px;height:26px;border:1px solid var(--border);border-radius:7px;background:var(--surface-alt);color:var(--ink);font-size:15px;display:flex;align-items:center;justify-content:center;transition:all .2s;}
.qty-btn:hover{border-color:var(--blue);color:var(--blue-deep);}
.qty-num{font-size:13px;font-weight:700;min-width:20px;text-align:center;}
.cart-item-remove{color:var(--text-dim);font-size:10px;cursor:pointer;text-transform:uppercase;transition:color .2s;margin-top:4px;display:block;}
.cart-item-remove:hover{color:#EF4444;}
.cart-summary{padding:18px 24px;border-top:1px solid var(--border);}
.cart-summary-row{display:flex;justify-content:space-between;font-size:12.5px;color:var(--text-dim);margin-bottom:9px;}
.cart-summary-row.highlight{color:var(--ink);font-weight:700;}
.cart-summary-divider{height:1px;background:var(--border);margin:12px 0;}
.cart-total-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:20px;}
.cart-total-label{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-dim);}
.cart-total-price{font-size:24px;font-weight:700;letter-spacing:-0.3px;background:linear-gradient(90deg,var(--blue),var(--blue-light));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.cart-actions{display:flex;gap:10px;}
.cart-btn-wa{flex:1.2;background:#25D366;color:#06301a;padding:14px;font-weight:700;font-size:12px;letter-spacing:0.3px;text-transform:uppercase;border-radius:10px;transition:all .25s;display:flex;align-items:center;justify-content:center;gap:7px;}
.cart-btn-wa:hover{box-shadow:0 8px 22px rgba(37,211,102,0.35);transform:translateY(-2px);}
.cart-btn-pdf{flex:1;background:var(--surface-alt);border:1px solid var(--blue);color:var(--blue-deep);padding:14px;font-weight:700;font-size:12px;letter-spacing:0.3px;text-transform:uppercase;border-radius:10px;transition:all .25s;display:flex;align-items:center;justify-content:center;gap:7px;}
[data-theme="dark"] .cart-btn-pdf{color:var(--blue-light);}
.cart-btn-pdf:hover{background:rgba(14,165,233,0.1);transform:translateY(-2px);}

/* ── Modal genérico (usado por el modal de cotización) ── */
.modal-overlay{position:fixed;inset:0;background:rgba(10,12,18,0.6);z-index:95;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s;padding:20px;}
.modal-overlay.open{opacity:1;visibility:visible;}
.modal-box{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:34px;max-width:480px;width:100%;position:relative;max-height:90vh;overflow-y:auto;}
.modal-close{position:absolute;top:18px;right:18px;color:var(--text-dim);font-size:18px;}
.modal-box h3{font-size:21px;font-weight:800;margin-bottom:6px;}
.modal-sub{color:var(--text-dim);font-size:13px;margin-bottom:22px;}
.cart-preview-in-modal{background:var(--surface-alt);border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:20px;max-height:150px;overflow-y:auto;}
.cart-preview-item{display:flex;justify-content:space-between;font-size:11.5px;padding:6px 0;border-bottom:1px solid var(--border);color:var(--text-dim);}
.cart-preview-item:last-child{border-bottom:none;}
.cart-preview-price{color:var(--blue-deep);white-space:nowrap;}

/* ── Paginador (números de página) — usado en categoria.html ── */
.pager{display:flex;align-items:center;justify-content:center;gap:6px;padding:24px 0 8px;flex-wrap:wrap;}
.pg-btn{min-width:38px;height:38px;padding:0 10px;border-radius:9px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink);font-size:13px;font-weight:700;font-family:var(--font-body);cursor:pointer;transition:all .2s;}
.pg-btn:hover{border-color:var(--blue);color:var(--blue-deep);}
.pg-btn.active{background:var(--blue);border-color:var(--blue);color:#fff;}
.pg-btn:disabled{opacity:.35;cursor:default;}
.pg-btn:disabled:hover{border-color:var(--border);color:var(--ink);}
.pg-dots{color:var(--text-dim);font-size:13px;padding:0 2px;}

/* ── Con el carrito abierto: ocultar el WhatsApp flotante (tapaba el botón Cotizar)
   y mover el toast al lado izquierdo para que no quede encima del panel ── */
body.cart-open .float-wa{ display:none !important; }
body.cart-open .toast{ right:auto; left:26px; transform:translateX(-140%); }
body.cart-open .toast.show{ transform:translateX(0); }

/* ═══════════════════════════════════════════════════════════════
   ARREGLOS MÓVILES (transversales a las 3 páginas)
   ═══════════════════════════════════════════════════════════════ */

/* El bottom nav flotante NO debe tapar el carrito ni los modales */
body.cart-open .mobile-bottom-nav,
body.modal-open .mobile-bottom-nav{ display:none !important; }

@media(max-width:640px){
  /* Evita el zoom automático de iOS al enfocar un campo: los inputs deben ser >=16px */
  input, textarea, select{ font-size:16px !important; }

  /* Modal (cotización) usable con el teclado abierto: se ancla arriba y hace scroll,
     el botón "Generar" ya no queda tapado por el teclado ni por el bottom nav */
  .modal-overlay{ align-items:flex-start; padding:12px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .modal-box{ padding:22px 20px; max-height:none; margin:8px auto 24px; }

  /* El drawer del carrito por encima del bottom nav, con espacio para sus botones */
  .cart-panel{ z-index:1200; }
  .cart-overlay{ z-index:1150; }
  .cart-summary{ padding-bottom:24px; }
}

/* ═══════════════════════════════════════════════════════════════
   ARREGLOS MÓVILES (el 97% de clientes entra desde el celular)
   ═══════════════════════════════════════════════════════════════ */

/* El bottom nav NO debe tapar el carrito, los modales ni sus botones */
body.cart-open .mobile-bottom-nav,
body.modal-open .mobile-bottom-nav{ display:none !important; }

@media(max-width:640px){
  /* Evita el zoom automático de iOS al enfocar un input (pasa si font-size < 16px) */
  input, textarea, select{ font-size:16px !important; }

  /* Modales: anclados arriba y con scroll, para que con el teclado abierto
     el botón de enviar no quede tapado ni el modal se "trabe" */
  .modal-overlay{ align-items:flex-start; padding:14px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .modal-box{ padding:22px 20px; max-height:none; margin:8px auto 90px; }
  .modal-box h3{ font-size:18px; }

  /* El drawer del carrito por encima del bottom nav y con espacio abajo */
  .cart-panel{ z-index:1200; }
  .cart-overlay{ z-index:1150; }
  .cart-summary{ padding-bottom:24px !important; }
}

/* La barra de categorías bajo el buscador se oculta en móvil (se veía recortada) */
@media(max-width:640px){ .header-nav-wrap{ display:none !important; } }

/* ══ Bordes glow con degradado animado en las tarjetas de producto ══
   (referencia del dueño: tarjetas oscuras con borde degradado brillante que "se mueve").
   Mantiene la tarjeta actual: solo se reemplaza el borde plano por un degradado cónico
   que rota lento + un halo suave del mismo color. Tres paletas alternadas por posición. */
@property --pcang { syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes pcardGiro { to { --pcang:360deg; } }

.pcard{
  /* --card-a / --card-b los define el Editor Web (tienda-common.js) desde la config;
     si no hay config, caen a cian → violeta. Un solo degradado para todas las tarjetas. */
  --pc-a:var(--card-a,#22D3EE); --pc-b:var(--card-b,#8B5CF6);
  border:1.5px solid transparent !important;
  background:
    linear-gradient(var(--surface),var(--surface)) padding-box,
    conic-gradient(from var(--pcang), var(--pc-a), var(--pc-b), var(--pc-a)) border-box;
  animation: pcardGiro 9s linear infinite;
  box-shadow: 0 0 14px -6px var(--pc-a);
}
.pcard:hover{
  box-shadow: 0 0 26px -4px var(--pc-a), 0 14px 34px rgba(2,8,20,.14);
  animation-duration: 3.5s;                   /* al pasar el mouse, el borde gira más rápido */
}
/* En modo oscuro el glow se siente como la referencia (fondo negro + borde neón) */
[data-theme="dark"] .pcard{ box-shadow: 0 0 20px -5px var(--pc-a); }
[data-theme="dark"] .pcard:hover{ box-shadow: 0 0 34px -2px var(--pc-a), 0 16px 40px rgba(0,0,0,.5); }
/* Navegadores sin @property: borde degradado estático (sin rotación) */
@supports not (background: conic-gradient(from var(--pcang), red, blue)) {
  .pcard{ animation:none; background:
    linear-gradient(var(--surface),var(--surface)) padding-box,
    linear-gradient(135deg, var(--pc-a), var(--pc-b)) border-box; }
}
/* Accesibilidad: sin movimiento si el usuario lo pide */
@media (prefers-reduced-motion: reduce){ .pcard{ animation:none; } }

/* ══ Micro-animaciones (diseño 06 aprobado) — sobre el diseño existente ══ */
/* Contador del carrito: rebote al agregar */
@keyframes cartPop { 0%{transform:scale(1)} 40%{transform:scale(1.55)} 70%{transform:scale(.9)} 100%{transform:scale(1)} }
.cart-pop{ animation: cartPop .5s cubic-bezier(.34,1.56,.4,1); }

/* Brillo que recorre los botones de acción (se SUMA al hover actual, no lo reemplaza) */
.btn-add, .btn-wa { position:relative; overflow:hidden; }
.btn-add::after, .btn-wa::after {
  content:''; position:absolute; top:0; left:-60%; width:45%; height:100%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-20deg); pointer-events:none; transition:none;
}
.btn-add:hover::after, .btn-wa:hover::after { left:130%; transition:left .55s ease; }

/* Skeleton loaders: silueta brillante mientras cargan los productos */
@keyframes skShimmer { 0%{background-position:-460px 0} 100%{background-position:460px 0} }
.skeleton-card{
  border-radius:16px; border:1px solid var(--border); overflow:hidden; background:var(--surface);
}
.skeleton-card .sk-img{ height:180px; }
.skeleton-card .sk-line{ height:13px; border-radius:7px; margin:12px 16px; }
.skeleton-card .sk-line.corta{ width:55%; }
.skeleton-card .sk-img, .skeleton-card .sk-line{
  background:linear-gradient(90deg, var(--surface-alt) 25%, var(--border) 50%, var(--surface-alt) 75%);
  background-size:460px 100%; animation:skShimmer 1.15s linear infinite;
}

/* Aparición en cascada de las tarjetas al entrar al viewport */
.pcard.reveal-pending{ opacity:0; transform:translateY(22px); }
.pcard.reveal-in{ opacity:1; transform:translateY(0); transition:opacity .5s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion: reduce){
  .pcard.reveal-pending{ opacity:1; transform:none; }
  .btn-add::after, .btn-wa::after{ display:none; }
}