/* * Woo Delivery — Frontend Styles (Rediseño "Aurora UI" v2) * Reconstrucción completa para un look moderno (Glassmorphism). * * MODIFICADO PARA: * - (Req #1) Mejorar layout de filtros del portal de repartidor en mobile (Grid). * - (Req #2) Ajustar animación del timeline para que solo pulse el último estado. */ :root { --wdm-aurora-primary: var(--e-global-color-primary, #1C34C7); --wdm-aurora-secondary: var(--e-global-color-secondary, #FF8383); --wdm-aurora-text: var(--e-global-color-text, #1E293B); --wdm-aurora-accent: var(--e-global-color-accent, #FBF8FF); --wdm-aurora-surface: var(--e-global-color-095792b, #F1F5F9); --wdm-aurora-ink: var(--e-global-color-b150d3d, #1D1A27); --wdm-aurora-highlight: var(--wdm-aurora-primary); --wdm-aurora-highlight-strong: var(--e-global-color-5bf98bb, #1B33A8); --wdm-aurora-muted: #64748B; --wdm-aurora-subtle: #94A3B8; --wdm-aurora-shadow: rgba(28, 52, 199, 0.12); --wdm-aurora-soft-bg: color-mix(in srgb, var(--wdm-aurora-surface) 75%, #ffffff 25%); --wdm-aurora-danger: var(--wdm-aurora-secondary); /* --- INICIO DE NUEVAS VARIABLES --- */ /* * Variable de fondo de "vidrio". * La clave es una transparencia alta (ej. 0.65) */ --wdm-aurora-glass-bg: color-mix(in srgb, #ffffff 70%, var(--wdm-aurora-accent) 30%); /* Borde de "vidrio" para capturar la luz */ --wdm-aurora-glass-border: color-mix(in srgb, #ffffff 70%, var(--wdm-aurora-accent) 30%); /* Borde de UI estándar (más oscuro, para inputs) */ --wdm-aurora-ui-border: color-mix(in srgb, var(--wdm-aurora-primary) 18%, #ffffff 82%); --wdm-radius-s: 8px; --wdm-radius-m: 12px; --wdm-radius-l: 16px; --wdm-radius-pill: 999px; /* --- FIN DE NUEVAS VARIABLES --- */ } /* * NOTA IMPORTANTE: * Para que el efecto "Glassmorphism" funcione, el * de tu página (o el contenedor principal) DEBE tener un fondo * con color, gradiente o imagen. No funcionará sobre un fondo blanco sólido. * * body { * background: linear-gradient(120deg, #f3e7ff 0%, #e5e0ff 100%); * } */ /* --- 1. ESTILOS GLOBALES DE FORMULARIOS (La gran mejora) --- */ /* Aplicamos estilos a todos los inputs dentro de nuestros contenedores */ .wdm-box input[type="text"], .wdm-box input[type="email"], .wdm-box input[type="number"], .wdm-box input[type="date"], .wdm-box select, .wdm-card input[type="text"], .wdm-card input[type="email"], .wdm-card input[type="number"], .wdm-card input[type="date"], .wdm-card select { width: 100%; padding: 12px 14px; font-size: 1.6rem; color: var(--wdm-aurora-text); background: var(--wdm-aurora-soft-bg); border: 1px solid var(--wdm-aurora-ui-border); border-radius: var(--wdm-radius-s); box-shadow: 0 2px 4px rgba(0,0,0,0.02); transition: border-color 0.2s ease, box-shadow 0.2s ease; -webkit-appearance: none; /* Quita estilos de iOS */ box-sizing: border-box; } .wdm-box input::placeholder, .wdm-card input::placeholder { color: var(--wdm-aurora-subtle); opacity: 1; } .wdm-box input:focus, .wdm-box select:focus, .wdm-card input:focus, .wdm-card select:focus { outline: none; border-color: var(--wdm-aurora-highlight); box-shadow: 0 0 0 3px rgba(123, 77, 255, 0.1); } /* Estilo para los