/* ===================================================== DROGUERÍAS MAS SALUD - Estilos complementarios a Tailwind (animaciones y estados controlados por JavaScript) ===================================================== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @keyframes pulso { 0%,100% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); } 50% { box-shadow: 0 0 0 14px rgba(37,211,102,0); } } @keyframes flotar { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes latido { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } } @keyframes brillo { from { background-position: -200% center; } to { background-position: 200% center; } } @keyframes girar { to { transform: rotate(360deg); } } /* IMPORTANTE: las animaciones de entrada NUNCA deben dejar el contenido oculto. Por eso el estado base es visible (opacity:1) y la animación solo lo "anima" desde abajo. Si la animación no dispara (CDN lento, reduce-motion), igual se ve. */ .anim-entrada { animation: fadeInUp .7s ease; } .anim-entrada-1 { animation: fadeInUp .7s .1s ease; } .anim-entrada-2 { animation: fadeInUp .7s .22s ease; } .anim-entrada-3 { animation: fadeInUp .7s .34s ease; } .anim-flotar { animation: flotar 5s ease-in-out infinite; } /* Revelado al hacer scroll (main.js observa .reveal y añade .visible). REGLA DE ORO: el contenido NUNCA debe quedar invisible si el JS no corre. Por eso .reveal parte visible y solo se "esconde para animar" cuando el JS marca con la clase .js-reveal (lo hace main.js al iniciar el observador). En el panel admin (que no usa ese observador) .reveal se ve siempre. */ .reveal { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; } .js-reveal .reveal { opacity: 0; transform: translateY(26px); } .js-reveal .reveal.visible { opacity: 1; transform: none; } /* Si el usuario prefiere menos movimiento, todo aparece sin animación. */ @media (prefers-reduced-motion: reduce) { .reveal, .js-reveal .reveal, .anim-entrada, .anim-entrada-1, .anim-entrada-2, .anim-entrada-3 { opacity: 1 !important; transform: none !important; animation: none !important; } } /* Slider del hero (main.js mueve .hero-slides con transform) */ .hero-slides { display: flex; transition: transform .7s cubic-bezier(.6,.05,.25,1); } .hero-slides > * { min-width: 100%; } .hero-punto { transition: all .3s ease; } .hero-punto.activo { background: #fff !important; transform: scale(1.3); } /* Franja con brillo animado */ .efecto-brillo { position: relative; overflow: hidden; } .efecto-brillo::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.16) 50%, transparent 70%); background-size: 200% 100%; animation: brillo 3.5s linear infinite; } /* Menú móvil de la tienda (main.js alterna .abierto en #menu-principal) */ #menu-principal.abierto { display: flex; animation: fadeInUp .3s ease both; } /* Sidebar del admin en móvil (admin.js alterna .abierto en #admin-sidebar) */ #admin-sidebar.abierto { transform: none !important; box-shadow: 24px 0 60px rgba(0,0,0,.35); } /* Insignia del carrito (main.js añade .animar) */ #carrito-badge.animar { animation: latido .4s ease; } /* Botón flotante de WhatsApp */ .whatsapp-flotante { animation: pulso 2.2s infinite; transition: transform .3s ease; } .whatsapp-flotante:hover { transform: scale(1.1) rotate(6deg); } /* Notificación toast (main.js alterna .visible + .exito/.error) */ .toast { position: fixed; bottom: 95px; right: 22px; z-index: 995; background: #0f172a; color: #fff; padding: .85rem 1.4rem; border-radius: 14px; font-size: .875rem; font-weight: 500; box-shadow: 0 12px 34px rgba(0,0,0,.32); transform: translateY(20px); opacity: 0; pointer-events: none; transition: all .35s ease; display: flex; align-items: center; gap: .6rem; max-width: 330px; } .toast.visible { transform: none; opacity: 1; } .toast.exito { background: linear-gradient(135deg, #059648, #04773b); } .toast.error { background: linear-gradient(135deg, #dc2626, #991b1b); } /* Texto de descripción de producto conservando saltos de línea */ .texto-preformateado { white-space: pre-line; } /* Flecha animada de los
(FAQ) */ details summary { cursor: pointer; list-style: none; } details summary::-webkit-details-marker { display: none; } details .flecha-detalle { transition: transform .3s ease; } details[open] .flecha-detalle { transform: rotate(180deg); } /* Barra de desplazamiento sutil */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: #64748b; } html { scroll-behavior: smooth; } /* ---------- Componentes reutilizables (complemento de Tailwind) ---------- */ /* Alertas / mensajes flash */ .alerta { padding: .85rem 1.25rem; border-radius: 14px; font-size: .875rem; font-weight: 500; margin-bottom: 1.2rem; animation: fadeInUp .4s ease both; border: 1px solid transparent; } .alerta-exito { background: #f0faf0; color: #04773b; border-color: #bde8c8; } .alerta-error { background: #fef2f2; color: #b91c1c; border-color: #fecaca; } .alerta-info { background: #eef5ff; color: #1c3aae; border-color: #bcd7ff; } /* Estados de pedido */ .estado { display: inline-flex; align-items: center; padding: .22rem .8rem; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; } .estado-pendiente { background: #fef3c7; color: #92400e; } .estado-confirmado { background: #dbeafe; color: #1e40af; } .estado-enviado { background: #ede9fe; color: #6d28d9; } .estado-entregado { background: #dcfce7; color: #15803d; } .estado-cancelado { background: #fee2e2; color: #b91c1c; } /* Insignias del panel admin */ .insignia { display: inline-flex; align-items: center; padding: .2rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; } .insignia-verde { background: #dcfce7; color: #15803d; } .insignia-azul { background: #dbeafe; color: #1e40af; } .insignia-gris { background: #f1f5f9; color: #475569; } .insignia-roja { background: #fee2e2; color: #b91c1c; } .insignia-amarilla { background: #fef3c7; color: #92400e; } .insignia-morada { background: #ede9fe; color: #6d28d9; }