/* Utilidades propias de la tienda.
   Todo lo demás sale de Tailwind con los tokens de High-Tech Logistics
   (assets/theme.js). Acá solo va lo que Tailwind no cubre. */

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Acento "tech" del sistema de diseño: corte a 45° en una esquina. */
.shaved-corner {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%);
}

.tech-path-line {
  background-image: linear-gradient(45deg, transparent 48%, #4f54b4 49%, #4f54b4 51%, transparent 52%);
  background-size: 10px 10px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.animate-fadeIn { animation: fadeIn .2s ease-out; }

/* Paso actual de la línea de tiempo del pedido. */
@keyframes pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79, 84, 180, .5); }
  50%      { box-shadow: 0 0 0 8px rgba(79, 84, 180, 0); }
}
.pulso { animation: pulso 2s infinite; }

/* Cambio de escala: el precio parpadea para que el cliente VEA el ahorro. */
@keyframes flash {
  0%   { background: #e1e0ff; }
  100% { background: transparent; }
}
.precio-flash { animation: flash .4s ease-out; }

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* La tarjeta de método de pago se expande in situ: el cliente nunca pierde
   de vista su total. */
.metodo input:checked + div {
  border-color: #4f54b4;
  box-shadow: 0 0 0 1px #4f54b4, 0 4px 16px -6px rgba(79, 84, 180, .5);
}
.metodo input:checked + div .panel { display: block; }
.panel { display: none; }

.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #4f54b4; border-radius: 10px; }

/* Foco visible en todo lo interactivo (requisito de accesibilidad del DESIGN.md). */
:focus-visible {
  outline: 2px solid #4f54b4;
  outline-offset: 2px;
}