/* SR & SRA BURGER — Global UI Theme (UI-only) - Paleta: verdes, blancos, grises oscuros premium - No toca IDs ni lógica: solo estética */ :root{ --sr-green: #16A34A; --sr-green-dark: #15803D; --sr-green-darker: #14532D; --sr-red: #DC2626; --sr-bg: #F8F9FA; --sr-surface: #FFFFFF; --sr-surface-2: #F1F5F9; --sr-text: #0F172A; --sr-muted: #64748B; --sr-border: #E2E8F0; --sr-shadow: 0 10px 30px rgba(15, 23, 42, 0.08); --sr-shadow-hover: 0 18px 45px rgba(15, 23, 42, 0.14); --sr-radius: 24px; --sr-radius-lg: 28px; --sr-transition: 220ms cubic-bezier(0.2, 0.8, 0.2, 1); /* Spacing tokens */ --sr-space-1: 0.25rem; --sr-space-2: 0.5rem; --sr-space-3: 0.75rem; --sr-space-4: 1rem; --sr-space-5: 1.25rem; --sr-space-6: 1.5rem; } /* === Dark Theme (activar con ) === */ html.sr-dark{ color-scheme: dark; --sr-bg: #121212; --sr-surface: #1B1B1B; --sr-surface-2: #222222; --sr-text: #E0E0E0; --sr-muted: rgba(224,224,224,0.72); --sr-border: rgba(148,163,184,0.18); --sr-shadow: 0 12px 35px rgba(0,0,0,0.45); --sr-shadow-hover: 0 18px 60px rgba(0,0,0,0.55); } html, body { font-family: Inter, Poppins, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif; } body{ background: linear-gradient(180deg, var(--sr-bg) 0%, #FFFFFF 70%, var(--sr-bg) 100%); color: var(--sr-text); } html.sr-dark body{ background: radial-gradient(1200px 600px at 20% -10%, rgba(22,163,74,0.18), rgba(0,0,0,0) 55%), radial-gradient(900px 500px at 80% 0%, rgba(59,130,246,0.10), rgba(0,0,0,0) 55%), linear-gradient(180deg, var(--sr-bg) 0%, #060B14 70%, var(--sr-bg) 100%); background-color: var(--sr-bg) !important; color: var(--sr-text) !important; } /* Boostrap / UI libs: asegurar contraste en dark */ html.sr-dark body{ --bs-body-bg: var(--sr-bg); --bs-body-color: var(--sr-text); --bs-border-color: var(--sr-border); --bs-secondary-color: var(--sr-muted); } html.sr-dark header{ background-color: rgba(15, 23, 42, 0.70) !important; border-bottom: 1px solid var(--sr-border); } /* === App Shell (Topbar unificada) === */ body.sr-app{ min-height: 100vh; } .sr-topbar{ position: sticky; top: 0; z-index: 60; backdrop-filter: blur(14px); background: rgba(18,18,18,0.72); border-bottom: 1px solid var(--sr-border); } .sr-topbar__inner{ max-width: 1120px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 12px; } .sr-brand{ display: inline-flex; align-items: baseline; gap: 6px; font-weight: 900; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; } .sr-brand span{ color: #fbbf24; } .sr-topbar__meta{ flex: 1; min-width: 0; color: var(--sr-muted); font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sr-topbar__nav{ display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; } .sr-nav-link{ display: inline-flex; align-items: center; justify-content: center; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(148,163,184,0.18); background: rgba(255,255,255,0.03); color: var(--sr-text); text-decoration: none; font-size: 12px; font-weight: 800; transition: transform var(--sr-transition), background-color var(--sr-transition), border-color var(--sr-transition), box-shadow var(--sr-transition); } .sr-nav-link:hover{ background: rgba(255,255,255,0.06); border-color: rgba(148,163,184,0.30); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,0.35); } .sr-nav-link.is-active{ border-color: rgba(22,163,74,0.42); background: rgba(22,163,74,0.12); } /* Ocultar headers legacy para una experiencia consistente */ html.sr-dark header:not(.sr-topbar){ display: none !important; } /* Hover/focus visibles en dark mode (para botones/links legacy) */ html.sr-dark a, html.sr-dark button, html.sr-dark [role="button"], html.sr-dark input, html.sr-dark select, html.sr-dark textarea{ transition: filter var(--sr-transition), background-color var(--sr-transition), border-color var(--sr-transition), box-shadow var(--sr-transition), transform var(--sr-transition); } html.sr-dark a:hover{ filter: brightness(1.05); } html.sr-dark button:hover, html.sr-dark .btn:hover{ filter: brightness(1.06); } html.sr-dark button:focus-visible, html.sr-dark a:focus-visible, html.sr-dark input:focus-visible, html.sr-dark select:focus-visible, html.sr-dark textarea:focus-visible{ outline: 2px solid rgba(59,130,246,0.65); outline-offset: 2px; } /* Remapeo masivo de Tailwind utility colors (para no reescribir todo el HTML) */ html.sr-dark [class*="bg-white"]{ background-color: var(--sr-surface) !important; } html.sr-dark [class*="bg-gray-50"]{ background-color: rgba(15,23,42,0.55) !important; } html.sr-dark [class*="bg-gray-100"]{ background-color: rgba(15,23,42,0.75) !important; } /* Imágenes: mejor escalado en pantallas de alta densidad */ img{ image-rendering: auto; image-rendering: smooth; } /* Skeleton shimmer (placeholder visual mientras carga la imagen) */ @keyframes sr-skeleton-loading{ 0%{ background-position: -200px 0; } 100%{ background-position: calc(200px + 100%) 0; } } .sr-skeleton{ background: linear-gradient( 90deg, rgba(148,163,184,0.16) 25%, rgba(148,163,184,0.26) 50%, rgba(148,163,184,0.16) 75% ); background-size: 200px 100%; animation: sr-skeleton-loading 1.5s infinite; } html.dark .sr-skeleton, html.sr-dark .sr-skeleton{ background: linear-gradient( 90deg, rgba(148,163,184,0.10) 25%, rgba(148,163,184,0.18) 50%, rgba(148,163,184,0.10) 75% ); background-size: 200px 100%; } /* Fade-in suave cuando la imagen ya cargó */ .sr-img-init{ opacity: 0; } .sr-img-loaded{ opacity: 1; transition: opacity 220ms cubic-bezier(0.2, 0.8, 0.2, 1); } html.sr-dark [class*="border-gray-100"], html.sr-dark [class*="border-gray-200"], html.sr-dark [class*="border-slate-200"], html.sr-dark [class*="border-slate-300"]{ border-color: var(--sr-border) !important; } html.sr-dark [class*="text-gray-900"], html.sr-dark [class*="text-slate-900"], html.sr-dark [class*="text-gray-800"]{ color: var(--sr-text) !important; } html.sr-dark [class*="text-gray-600"], html.sr-dark [class*="text-gray-500"], html.sr-dark [class*="text-slate-600"], html.sr-dark [class*="text-slate-500"]{ color: var(--sr-muted) !important; } html.sr-dark [class*="shadow" ]{ box-shadow: var(--sr-shadow) !important; } /* Inputs (dark) */ html.sr-dark input, html.sr-dark select, html.sr-dark textarea{ background-color: rgba(2, 6, 23, 0.35); color: var(--sr-text); border-color: var(--sr-border); } html.sr-dark input::placeholder, html.sr-dark textarea::placeholder{ color: rgba(148,163,184,0.85); } /* Links */ html.sr-dark a{ color: inherit; } /* Consistencia header/footer */ header{ backdrop-filter: blur(10px); } /* Cards premium */ .sr-card{ background: var(--sr-surface); border: 1px solid var(--sr-border); border-radius: var(--sr-radius); box-shadow: var(--sr-shadow); } .sr-card-soft{ background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(241,245,249,0.75)); border: 1px solid rgba(226,232,240,0.9); border-radius: var(--sr-radius); box-shadow: var(--sr-shadow); } /* sr-dark: sr-card-soft debe ser oscuro para buen contraste */ html.sr-dark .sr-card-soft{ background: linear-gradient(135deg, rgba(15,23,42,0.92), rgba(17,24,39,0.80)); border-color: var(--sr-border); } /* Botones premium (micro-interacciones) */ .sr-btn{ min-height: 44px; padding: 0.625rem 1rem; border-radius: 16px; font-weight: 800; letter-spacing: -0.01em; transition: transform var(--sr-transition), box-shadow var(--sr-transition), filter var(--sr-transition), background-color var(--sr-transition), border-color var(--sr-transition); will-change: transform; touch-action: manipulation; } .sr-btn:hover{ transform: translateY(-2px); box-shadow: var(--sr-shadow-hover); filter: saturate(1.05); } .sr-btn:active{ transform: translateY(-1px); } .sr-btn-primary{ background: linear-gradient(135deg, var(--sr-green) 0%, var(--sr-green-dark) 55%, var(--sr-green-darker) 100%); color: #fff; } .sr-btn-secondary{ background: rgba(22,163,74,0.10); border: 1px solid rgba(22,163,74,0.30); color: var(--sr-text); } .sr-btn-ghost{ background: rgba(15,23,42,0.04); border: 1px solid rgba(15,23,42,0.10); color: var(--sr-text); } .sr-btn-danger{ background: rgba(220,38,38,0.08); border: 1px solid rgba(220,38,38,0.22); color: var(--sr-red); } .sr-btn:disabled, .sr-btn[aria-disabled="true"]{ opacity: 0.55; cursor: not-allowed; transform: none !important; } /* Badges / chips */ .sr-badge{ display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.55rem; border-radius: 9999px; font-size: 11px; font-weight: 800; border: 1px solid rgba(148,163,184,0.35); background: rgba(241,245,249,0.8); color: var(--sr-text); } .sr-badge--success{ border-color: rgba(22,163,74,0.25); background: rgba(22,163,74,0.10); color: var(--sr-green-dark); } .sr-badge--info{ border-color: rgba(59,130,246,0.22); background: rgba(59,130,246,0.10); color: #1D4ED8; } .sr-badge--danger{ border-color: rgba(220,38,38,0.22); background: rgba(220,38,38,0.10); color: var(--sr-red); } /* Touch targets helper */ .sr-touch{ min-height: 44px; } /* Media square for product thumbs */ .sr-media-square{ aspect-ratio: 1 / 1; width: 100%; overflow: hidden; border-radius: 16px; background: rgba(148,163,184,0.16); } .sr-media-square > img{ width: 100%; height: 100%; object-fit: cover; } /* Skeleton blocks for lists */ .sr-skeleton-block{ border-radius: 16px; border: 1px solid rgba(148,163,184,0.20); background: rgba(148,163,184,0.10); } .sr-btn-ghost{ background: rgba(15,23,42,0.04); border: 1px solid rgba(15,23,42,0.10); color: var(--sr-text); } /* Títulos hero */ .sr-title{ letter-spacing: -0.02em; } /* === Remapeo de acentos amarillos -> verde (sin reescribir todo el HTML) === */ .text-yellow-600, .text-yellow-500{ color: var(--sr-green-dark) !important; } .bg-yellow-600, .bg-yellow-500{ background-color: var(--sr-green) !important; } .border-yellow-400, .border-yellow-500{ border-color: rgba(22,163,74,0.55) !important; } .ring-yellow-300, .ring-yellow-400, .focus\:ring-yellow-300:focus, .focus\:ring-yellow-400:focus, .focus\:ring-yellow-500:focus{ --tw-ring-color: rgba(34,197,94,0.55) !important; } .focus\:border-yellow-400:focus, .focus\:border-yellow-500:focus{ border-color: rgba(34,197,94,0.70) !important; } .from-yellow-400{ --tw-gradient-from: var(--sr-green) !important; --tw-gradient-to: rgba(22,163,74,0) !important; } .to-yellow-600{ --tw-gradient-to: var(--sr-green-dark) !important; } .via-yellow-400{ --tw-gradient-stops: var(--sr-green), var(--sr-green), var(--sr-green-dark) !important; } /* Inputs más premium sin tocar estructura */ input, select, textarea{ border-radius: 14px; } /* Reducir bordes “toscos” en tablas, manteniendo legibilidad */ table{ border-collapse: separate; border-spacing: 0; } /* Dark-ish pages: mantener estética premium sin romper contraste */ .bg-slate-950{ background-color: #060B14 !important; } .bg-slate-900{ background-color: #0B1220 !important; } .border-slate-800{ border-color: rgba(148,163,184,0.16) !important; } .text-slate-50{ color: #F8FAFC !important; } /* Sutil upgrade a sombras Tailwind comunes */ .shadow-lg{ box-shadow: var(--sr-shadow) !important; } .shadow-xl{ box-shadow: var(--sr-shadow-hover) !important; } /* Imagen específica: Combo Dúo (ID 15) -> mostrar completa (sin recorte) */ img[data-item-id="15"]{ object-fit: contain !important; object-position: center !important; } /* Sticky cart (móvil): evita que tape contenido */ body.sr-sticky-cart-visible{ padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); } /* Accesibilidad: focus visible consistente */ button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline: 2px solid rgba(22,163,74,0.65); outline-offset: 2px; } /* Respeta Reduced Motion */ @media (prefers-reduced-motion: reduce){ html:focus-within{ scroll-behavior: auto !important; } *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .animate-pulse, .animate-bounce, .animate-spin, .sr-skeleton{ animation: none !important; } .menu-card, .sr-btn{ transform: none !important; } } /* ===================================================== MÓDULO: MICRO-INTERACCIONES & UX APP-LIKE v2 Mejoras de diseño, whitespace, interacciones modernas ===================================================== */ /* ── Press / tap feedback (escala táctil tipo iOS) ── */ .sr-pressable { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: transform 110ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 110ms ease, opacity 110ms ease; will-change: transform; touch-action: manipulation; } .sr-pressable:active { transform: scale(0.96); } .sr-pressable:hover:not(:active) { transform: scale(1.02); box-shadow: var(--sr-shadow-hover); } /* Aplica press a botones existentes */ .sr-btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .sr-btn:active { transform: scale(0.96) translateY(0px) !important; box-shadow: none !important; filter: brightness(0.97) !important; } /* ── Ripple (ola al tocar) ── */ .sr-ripple { position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; } .sr-ripple::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--rx, 50%) var(--ry, 50%), rgba(255,255,255,0.30) 0%, transparent 70%); opacity: 0; transition: opacity 500ms ease; pointer-events: none; border-radius: inherit; } .sr-ripple:active::after { opacity: 1; transition: opacity 0ms; } /* ── Cards premium con whitespace generoso ── */ .sr-card-app { background: var(--sr-surface); border: 1px solid var(--sr-border); border-radius: 24px; box-shadow: 0 2px 8px rgba(15,23,42,0.05), 0 0 1px rgba(15,23,42,0.04); padding: 20px; transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 260ms ease; will-change: transform; } .sr-card-app:hover { transform: translateY(-4px); box-shadow: 0 16px 42px rgba(15,23,42,0.12), 0 4px 12px rgba(15,23,42,0.06); } .sr-card-app:active { transform: translateY(-1px) scale(0.99); } html.sr-dark .sr-card-app, html.dark .sr-card-app { box-shadow: 0 2px 8px rgba(0,0,0,0.30), 0 0 1px rgba(0,0,0,0.25); } html.sr-dark .sr-card-app:hover, html.dark .sr-card-app:hover { box-shadow: 0 16px 42px rgba(0,0,0,0.50), 0 4px 12px rgba(0,0,0,0.30); } /* ── Floating Card (eleva más) ── */ .sr-card-float { border-radius: 28px; padding: 24px; background: var(--sr-surface); box-shadow: 0 1px 1px rgba(15,23,42,0.04), 0 4px 12px rgba(15,23,42,0.06), 0 12px 32px rgba(15,23,42,0.08); transition: box-shadow 300ms ease, transform 300ms cubic-bezier(0.34,1.56,0.64,1); } .sr-card-float:hover { box-shadow: 0 2px 4px rgba(15,23,42,0.06), 0 8px 20px rgba(15,23,42,0.10), 0 24px 56px rgba(15,23,42,0.14); transform: translateY(-6px); } html.sr-dark .sr-card-float, html.dark .sr-card-float { box-shadow: 0 1px 1px rgba(0,0,0,0.22), 0 4px 12px rgba(0,0,0,0.38), 0 12px 32px rgba(0,0,0,0.45); } /* ── Animaciones de entrada (keyframes) ── */ @keyframes sr-enter-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes sr-enter-down { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } @keyframes sr-enter-scale { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } @keyframes sr-enter-right { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } } @keyframes sr-sheet-up { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } } @keyframes sr-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } @keyframes sr-pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 70% { transform: scale(0.96); } 100% { transform: scale(1); } } @keyframes sr-bounce-in { 0% { opacity: 0; transform: scale(0.7); } 60% { opacity: 1; transform: scale(1.05); } 80% { transform: scale(0.97); } 100% { transform: scale(1); } } @keyframes sr-fade-blur { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: blur(0); } } @keyframes sr-toast-in { from { opacity: 0; transform: translateY(20px) scale(0.94); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes sr-toast-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(12px) scale(0.94); } } /* ── Clases de animación de entrada ── */ @media (prefers-reduced-motion: no-preference) { .sr-anim-up { animation: sr-enter-up 280ms cubic-bezier(0.0, 0.0, 0.2, 1) both; } .sr-anim-down { animation: sr-enter-down 240ms cubic-bezier(0.0, 0.0, 0.2, 1) both; } .sr-anim-scale { animation: sr-enter-scale 260ms cubic-bezier(0.34, 1.56, 0.64, 1) both; } .sr-anim-right { animation: sr-enter-right 280ms cubic-bezier(0.0, 0.0, 0.2, 1) both; } .sr-anim-sheet { animation: sr-sheet-up 340ms cubic-bezier(0.0, 0.0, 0.2, 1) both; } .sr-anim-pop { animation: sr-pop 380ms cubic-bezier(0.34, 1.56, 0.64, 1) both; } .sr-anim-bounce{ animation: sr-bounce-in 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both; } .sr-anim-blur { animation: sr-fade-blur 300ms ease both; } /* Stagger para listas */ .sr-stagger > *:nth-child(1) { animation-delay: 0ms; } .sr-stagger > *:nth-child(2) { animation-delay: 45ms; } .sr-stagger > *:nth-child(3) { animation-delay: 90ms; } .sr-stagger > *:nth-child(4) { animation-delay: 135ms; } .sr-stagger > *:nth-child(5) { animation-delay: 180ms; } .sr-stagger > *:nth-child(6) { animation-delay: 225ms; } .sr-stagger > *:nth-child(7) { animation-delay: 270ms; } .sr-stagger > *:nth-child(8) { animation-delay: 315ms; } .sr-stagger > *:nth-child(n+9) { animation-delay: 360ms; } } /* ── Bottom Sheet (panel deslizable desde abajo) ── */ .sr-sheet { position: fixed; bottom: 0; left: 0; right: 0; z-index: 55; background: var(--sr-surface); border-radius: 28px 28px 0 0; padding: 12px 20px calc(20px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 40px rgba(15,23,42,0.18); border-top: 1px solid var(--sr-border); transition: transform 340ms cubic-bezier(0.0, 0.0, 0.2, 1), opacity 280ms ease; } .sr-sheet.is-hidden { transform: translateY(100%); opacity: 0; pointer-events: none; } .sr-sheet__handle { display: block; width: 40px; height: 4px; background: rgba(148,163,184,0.45); border-radius: 9999px; margin: 0 auto 16px; flex-shrink: 0; } html.sr-dark .sr-sheet, html.dark .sr-sheet { box-shadow: 0 -8px 40px rgba(0,0,0,0.55); } /* ── Toast / Snackbar ── */ .sr-toast { position: fixed; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); z-index: 90; min-width: 220px; max-width: calc(100vw - 40px); padding: 12px 20px; border-radius: 18px; font-size: 14px; font-weight: 700; color: #fff; background: rgba(15,23,42,0.92); backdrop-filter: blur(16px); box-shadow: 0 12px 36px rgba(0,0,0,0.30), 0 4px 10px rgba(0,0,0,0.20); border: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 10px; white-space: nowrap; pointer-events: none; } .sr-toast.is-visible { animation: sr-toast-in 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both; } .sr-toast.is-hiding { animation: sr-toast-out 200ms ease both; } .sr-toast--success { background: linear-gradient(135deg, #16A34A, #15803D); } .sr-toast--danger { background: linear-gradient(135deg, #DC2626, #B91C1C); } .sr-toast--info { background: linear-gradient(135deg, #2563EB, #1D4ED8); } .sr-toast--warning { background: linear-gradient(135deg, #D97706, #B45309); } /* ── Floating Action Button (FAB) ── */ .sr-fab { position: fixed; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); right: 20px; z-index: 50; width: 58px; height: 58px; border-radius: 9999px; background: linear-gradient(135deg, var(--sr-green) 0%, var(--sr-green-dark) 100%); color: #fff; font-size: 22px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 28px rgba(22,163,74,0.40); border: none; cursor: pointer; transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 260ms ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; will-change: transform; } .sr-fab:hover { transform: scale(1.08) translateY(-2px); box-shadow: 0 14px 38px rgba(22,163,74,0.50); } .sr-fab:active { transform: scale(0.94); box-shadow: 0 4px 14px rgba(22,163,74,0.30); } .sr-fab--sm { width: 46px; height: 46px; font-size: 18px; } .sr-fab--lg { width: 68px; height: 68px; font-size: 26px; } /* ── Inputs app-like (foco con glow verde) ── */ .sr-input { display: block; width: 100%; min-height: 48px; padding: 12px 16px; font-size: 15px; font-weight: 500; border-radius: 16px; border: 1.5px solid var(--sr-border); background: var(--sr-surface); color: var(--sr-text); outline: none; transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease; } .sr-input::placeholder { color: rgba(100,116,139,0.65); font-weight: 400; } .sr-input:focus { border-color: var(--sr-green); box-shadow: 0 0 0 3px rgba(22,163,74,0.15), 0 2px 8px rgba(22,163,74,0.08); } .sr-input:hover:not(:focus) { border-color: rgba(100,116,139,0.50); } html.sr-dark .sr-input, html.dark .sr-input { background: rgba(2,6,23,0.50); border-color: rgba(148,163,184,0.18); color: #E5E7EB; } html.sr-dark .sr-input:focus, html.dark .sr-input:focus { border-color: var(--sr-green); box-shadow: 0 0 0 3px rgba(22,163,74,0.20), 0 2px 8px rgba(22,163,74,0.12); background: rgba(2,6,23,0.70); } /* ── Skeleton shimmer mejorado ── */ .sr-skeleton-v2 { background: linear-gradient( 90deg, rgba(148,163,184,0.10) 0%, rgba(148,163,184,0.22) 40%, rgba(148,163,184,0.10) 100% ); background-size: 400px 100%; animation: sr-shimmer 1.4s ease-in-out infinite; border-radius: 12px; } html.sr-dark .sr-skeleton-v2, html.dark .sr-skeleton-v2 { background: linear-gradient( 90deg, rgba(30,41,59,0.6) 0%, rgba(51,65,85,0.9) 40%, rgba(30,41,59,0.6) 100% ); background-size: 400px 100%; } /* ── Chips / Tags interactivos ── */ .sr-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 9999px; font-size: 13px; font-weight: 700; border: 1.5px solid var(--sr-border); background: transparent; color: var(--sr-muted); cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 160ms ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; white-space: nowrap; user-select: none; } .sr-chip:hover { border-color: rgba(22,163,74,0.45); color: var(--sr-green); background: rgba(22,163,74,0.06); transform: translateY(-1px); } .sr-chip:active { transform: scale(0.96); } .sr-chip.is-active, .sr-chip[aria-pressed="true"] { background: rgba(22,163,74,0.14); border-color: rgba(22,163,74,0.45); color: var(--sr-green-dark); box-shadow: 0 0 0 2px rgba(22,163,74,0.18); } /* ── Avatar / Icon container ── */ .sr-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; overflow: hidden; background: rgba(22,163,74,0.12); color: var(--sr-green); font-weight: 800; flex-shrink: 0; } .sr-avatar--sm { width: 32px; height: 32px; font-size: 13px; } .sr-avatar--md { width: 44px; height: 44px; font-size: 17px; } .sr-avatar--lg { width: 56px; height: 56px; font-size: 22px; } .sr-avatar--xl { width: 72px; height: 72px; font-size: 28px; } /* ── Divider sutil ── */ .sr-divider { border: none; border-top: 1px solid var(--sr-border); margin: 0; } .sr-divider--label { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; color: var(--sr-muted); text-transform: uppercase; letter-spacing: 0.06em; } .sr-divider--label::before, .sr-divider--label::after { content: ''; flex: 1; border-top: 1px solid var(--sr-border); } /* ── Sección con whitespace generoso ── */ .sr-section { padding: 48px 20px; } .sr-section--sm { padding: 28px 20px; } .sr-section--lg { padding: 72px 20px; } @media (min-width: 768px) { .sr-section { padding: 64px 32px; } .sr-section--sm{ padding: 40px 32px; } .sr-section--lg{ padding: 96px 32px; } } /* ── Header de sección (título + descripción) ── */ .sr-section-header { max-width: 560px; margin: 0 auto 40px; text-align: center; } .sr-section-header h2, .sr-section-header .sr-heading { font-family: 'Poppins', sans-serif; font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: var(--sr-text); margin-bottom: 12px; } .sr-section-header p, .sr-section-header .sr-subheading { font-size: 1rem; line-height: 1.65; color: var(--sr-muted); max-width: 460px; margin: 0 auto; } /* ── Stat card (métricas/números) ── */ .sr-stat { background: var(--sr-surface); border: 1px solid var(--sr-border); border-radius: 22px; padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; transition: transform 260ms cubic-bezier(0.34,1.56,0.64,1), box-shadow 260ms ease; } .sr-stat:hover { transform: translateY(-3px); box-shadow: var(--sr-shadow-hover); } .sr-stat__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sr-muted); } .sr-stat__value { font-family: 'Poppins', sans-serif; font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 900; letter-spacing: -0.03em; color: var(--sr-text); line-height: 1.1; } .sr-stat__delta { font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; } .sr-stat__delta--up { color: var(--sr-green-dark); } .sr-stat__delta--down { color: var(--sr-red); } /* ── Barra de progreso animada ── */ .sr-progress { width: 100%; height: 8px; background: rgba(148,163,184,0.18); border-radius: 9999px; overflow: hidden; } .sr-progress__bar { height: 100%; background: linear-gradient(90deg, var(--sr-green), var(--sr-green-dark)); border-radius: 9999px; transition: width 600ms cubic-bezier(0.0, 0.0, 0.2, 1); transform-origin: left; } .sr-progress--sm { height: 4px; } .sr-progress--lg { height: 12px; } .sr-progress--striped .sr-progress__bar { background-image: repeating-linear-gradient( 45deg, rgba(255,255,255,0.15) 0px, rgba(255,255,255,0.15) 6px, transparent 6px, transparent 12px ); background-color: var(--sr-green); } /* ── Liste de ítems con separadores sutiles ── */ .sr-list { display: flex; flex-direction: column; gap: 0; } .sr-list-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; transition: background-color 140ms ease, transform 180ms cubic-bezier(0.34,1.56,0.64,1); cursor: pointer; position: relative; } .sr-list-item:hover { background: rgba(148,163,184,0.08); } .sr-list-item:active { background: rgba(148,163,184,0.14); transform: scale(0.99); } .sr-list-item + .sr-list-item::before { content: ''; position: absolute; top: 0; left: 16px; right: 16px; height: 1px; background: var(--sr-border); } /* ── Overlay / backdrop ── */ .sr-backdrop { position: fixed; inset: 0; z-index: 45; background: rgba(0,0,0,0.55); backdrop-filter: blur(3px); transition: opacity 220ms ease; } .sr-backdrop.is-hidden { opacity: 0; pointer-events: none; } /* ── Empty state (sin datos) ── */ .sr-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 56px 24px; text-align: center; } .sr-empty__icon { font-size: 48px; opacity: 0.35; filter: grayscale(0.3); } .sr-empty__title { font-size: 17px; font-weight: 700; color: var(--sr-text); } .sr-empty__desc { font-size: 14px; color: var(--sr-muted); line-height: 1.6; max-width: 280px; } /* ── Tooltip ── */ .sr-tooltip { position: relative; cursor: default; } .sr-tooltip::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); white-space: nowrap; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 8px; background: rgba(15,23,42,0.92); color: #fff; pointer-events: none; opacity: 0; transition: opacity 160ms ease, transform 160ms ease; z-index: 70; } .sr-tooltip:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } /* ── Scroll horizontal suave (chips/tabs) ── */ .sr-scroll-x { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; } .sr-scroll-x::-webkit-scrollbar { display: none; } .sr-scroll-x > * { scroll-snap-align: start; flex-shrink: 0; } /* ── Grid de productos responsivo ── */ .sr-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; } @media (min-width: 640px) { .sr-product-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; } } @media (min-width: 1024px) { .sr-product-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; } } /* ── Número badge (carrito, notificaciones) ── */ .sr-count-badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 9999px; background: linear-gradient(135deg, #EF4444, #DC2626); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(220,38,38,0.40); transition: transform 220ms cubic-bezier(0.34,1.56,0.64,1); pointer-events: none; line-height: 1; } .sr-count-badge.is-updated { animation: sr-pop 350ms cubic-bezier(0.34,1.56,0.64,1) both; } /* ── Línea luminosa (accent strip) en cards ── */ .sr-accent-strip { height: 3px; border-radius: 9999px; background: linear-gradient(90deg, var(--sr-green), var(--sr-green-dark)); margin-bottom: 18px; } .sr-accent-strip--sm { height: 2px; margin-bottom: 14px; } /* ── Highlight / glow en tarjetas seleccionadas ── */ .sr-card-selected { border-color: rgba(22,163,74,0.50) !important; box-shadow: 0 0 0 3px rgba(22,163,74,0.14), 0 8px 24px rgba(22,163,74,0.12) !important; } /* ── Blur de fondo para modales premium ── */ .sr-modal-backdrop { position: fixed; inset: 0; z-index: 48; background: rgba(0,0,0,0.60); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity 220ms ease; } /* ── Indicador de carga inline (spinner) ── */ @keyframes sr-spin { to { transform: rotate(360deg); } } .sr-spinner { display: inline-block; width: 20px; height: 20px; border: 2.5px solid rgba(22,163,74,0.25); border-top-color: var(--sr-green); border-radius: 9999px; animation: sr-spin 700ms linear infinite; flex-shrink: 0; } .sr-spinner--sm { width: 14px; height: 14px; border-width: 2px; } .sr-spinner--lg { width: 28px; height: 28px; border-width: 3.5px; } .sr-spinner--white { border-color: rgba(255,255,255,0.25); border-top-color: #fff; } /* ── Texto con clamp() fluido ── */ .sr-text-fluid-sm { font-size: clamp(0.8rem, 2vw, 0.95rem); } .sr-text-fluid-base { font-size: clamp(0.9rem, 2.5vw, 1.05rem); } .sr-text-fluid-lg { font-size: clamp(1rem, 3vw, 1.25rem); } .sr-text-fluid-xl { font-size: clamp(1.2rem, 4vw, 1.75rem); } .sr-text-fluid-2xl { font-size: clamp(1.4rem, 5vw, 2.25rem); } .sr-text-fluid-hero { font-size: clamp(1.75rem, 6vw, 3.5rem); } /* ── Área de imagen con fade-in suave ── */ .sr-img-wrap { overflow: hidden; border-radius: inherit; background: rgba(148,163,184,0.10); } .sr-img-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms cubic-bezier(0.0, 0.0, 0.2, 1), opacity 280ms ease; opacity: 0; } .sr-img-wrap img.is-loaded, .sr-img-wrap img[data-loaded] { opacity: 1; } .sr-img-wrap:hover img { transform: scale(1.04); } /* ── Glassmorphism mejorado ── */ .sr-glass { background: rgba(255,255,255,0.72); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(255,255,255,0.45); } .sr-glass--dark, html.sr-dark .sr-glass, html.dark .sr-glass { background: rgba(2,6,23,0.72); border: 1px solid rgba(255,255,255,0.08); } /* ── Gradiente de degradado para listas largas ── */ .sr-fade-bottom { -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%); mask-image: linear-gradient(to bottom, black 60%, transparent 100%); } .sr-fade-right { -webkit-mask-image: linear-gradient(to right, black 70%, transparent 100%); mask-image: linear-gradient(to right, black 70%, transparent 100%); } /* ── Hover "glow" para botones de acción ── */ .sr-glow-green:hover { box-shadow: 0 0 0 4px rgba(22,163,74,0.20), var(--sr-shadow-hover) !important; } .sr-glow-red:hover { box-shadow: 0 0 0 4px rgba(220,38,38,0.18), var(--sr-shadow-hover) !important; } /* ── Switch toggle ── */ .sr-switch { position: relative; display: inline-block; width: 48px; height: 28px; flex-shrink: 0; } .sr-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .sr-switch__track { position: absolute; inset: 0; background: rgba(148,163,184,0.35); border-radius: 9999px; cursor: pointer; transition: background 200ms ease; } .sr-switch input:checked + .sr-switch__track { background: var(--sr-green); } .sr-switch__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 9999px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.22); transition: transform 220ms cubic-bezier(0.34,1.56,0.64,1); } .sr-switch input:checked + .sr-switch__track::after { transform: translateX(20px); } .sr-switch input:focus-visible + .sr-switch__track { outline: 2px solid rgba(22,163,74,0.65); outline-offset: 2px; }