/** * main.css — Sistema de diseño Escultorapp (estilo macOS / MacBook Air) * Tokens, reset, layout, navegación, modales, toasts, animaciones, utilidades. * Estética: vidrio/vibrancy tipo macOS — ventanas y tarjetas translúcidas, * negro mate + grises + blanco puro, detalles rojos PEQUEÑOS, gradientes sutiles. * Dos temas: oscuro (por defecto) y claro. Se conmuta con [data-theme] en . */ /* ================================================================ TOKENS COMPARTIDOS (no dependen del tema) ================================================================ */ :root { /* Acento rojo — mismo tono base en ambos temas, usado con moderación */ --accent: #ff453a; --accent-2: #e0322c; --on-accent: #ffffff; --danger: #ff453a; /* Tipografía */ --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', system-ui, Roboto, Helvetica, Arial, sans-serif; --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.8125rem; /* 13 */ --fs-base: 0.9375rem; /* 15 */ --fs-md: 1.0625rem; /* 17 */ --fs-lg: 1.25rem; /* 20 */ --fs-xl: 1.625rem; /* 26 */ --fs-2xl: 2.125rem; /* 34 — large title */ --font-size-sm: var(--fs-sm); --font-size-base: var(--fs-base); --font-size-lg: var(--fs-lg); --font-size-xl: var(--fs-xl); /* Radios (ventanas macOS — generosos pero menos "burbuja" que iOS) */ --r-sm: 9px; --r-md: 14px; --r-lg: 20px; --r-xl: 26px; --r-full: 9999px; --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-full: var(--r-full); /* Espaciado */ --s-xs: 4px; --s-sm: 8px; --s-md: 16px; --s-lg: 24px; --s-xl: 32px; --spacing-xs: var(--s-xs); --spacing-sm: var(--s-sm); --spacing-md: var(--s-md); --spacing-lg: var(--s-lg); /* Curvas de animación (spring-ish, tipo macOS) */ --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --transition-base: all 0.22s var(--ease-out); --nav-h: 74px; --blur: 30px; /* radio de desenfoque del vidrio (vibrancy) */ } /* ================================================================ TEMA OSCURO — negro mate "Space Gray", vidrio translúcido ================================================================ */ :root, :root[data-theme="dark"] { color-scheme: dark; /* Fondo + "wallpaper" ambiental (da profundidad tipo escritorio macOS) */ --bg: #0a0a0c; --bg-2: #101013; --ambient: radial-gradient(120% 80% at 15% -10%, rgba(255,69,58,0.08), transparent 55%), radial-gradient(110% 90% at 100% 0%, rgba(120,120,140,0.10), transparent 50%), linear-gradient(180deg, #0d0d10 0%, #0a0a0c 40%, #08080a 100%); /* Superficies translúcidas (vibrancy): se construyen con blanco a baja alfa sobre el fondo ambiental → look de "vidrio esmerilado" macOS */ --surface: rgba(255,255,255,0.055); --surface-2: rgba(255,255,255,0.085); --surface-3: rgba(255,255,255,0.13); --surface-solid: #161619; /* opaco, para cuando hace falta tapar */ /* Vidrio de paneles flotantes (nav, modales, hero) */ --glass: rgba(22,22,26,0.62); --glass-strong: rgba(20,20,24,0.82); --glass-hi: rgba(255,255,255,0.10); /* brillo superior interno */ --hairline: rgba(255,255,255,0.10); --hairline-2: rgba(255,255,255,0.18); /* Texto */ --text: #f5f5f7; --text-2: #a1a1a8; --text-3: #6a6a72; /* Acento (rojo pequeño) */ --accent-soft: rgba(255,69,58,0.16); --move: #ff453a; --exercise: #d4d4d8; --stand: #f5f5f7; --amber: #ff9f0a; --blue: #0a84ff; --purple: #bf5af2; /* Sombras (suaves y grandes, tipo ventana macOS) */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.5); --shadow-md: 0 10px 30px rgba(0,0,0,0.5); --shadow-lg: 0 28px 70px rgba(0,0,0,0.65); --window-shadow: 0 18px 50px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.4); } /* ================================================================ TEMA CLARO — escritorio gris claro, ventanas blancas (MacBook Air) ================================================================ */ :root[data-theme="light"] { color-scheme: light; --bg: #dfe0e6; --bg-2: #eceef2; --ambient: radial-gradient(120% 80% at 15% -10%, rgba(255,69,58,0.07), transparent 55%), radial-gradient(110% 90% at 100% 0%, rgba(120,135,185,0.20), transparent 50%), linear-gradient(180deg, #e9ebf1 0%, #dfe0e6 45%, #d6d7df 100%); /* Tarjetas casi blancas → resaltan sobre el gris del fondo (más contraste) */ --surface: rgba(255,255,255,0.90); --surface-2: rgba(255,255,255,0.98); --surface-3: rgba(60,60,75,0.10); --surface-solid: #ffffff; --glass: rgba(245,246,250,0.72); --glass-strong: rgba(252,252,255,0.88); --glass-hi: rgba(255,255,255,0.95); --hairline: rgba(0,0,0,0.13); --hairline-2: rgba(0,0,0,0.20); /* Texto con negro mate más marcado para resaltar */ --text: #16161a; --text-2: #45454e; --text-3: #6a6a74; --accent-soft: rgba(255,69,58,0.13); --move: #e0322c; --exercise: #45454e; --stand: #0a84ff; --amber: #b56b00; --blue: #0a84ff; --purple: #8944c0; --shadow-sm: 0 1px 2px rgba(20,20,40,0.12); --shadow-md: 0 10px 30px rgba(20,20,40,0.14); --shadow-lg: 0 28px 70px rgba(20,20,40,0.20); --window-shadow: 0 14px 40px rgba(25,25,55,0.16), 0 1px 3px rgba(0,0,0,0.10); } /* Compatibilidad con clases antiguas (se resuelven por tema) */ :root { --color-bg: var(--bg); --color-surface: var(--surface); --color-surface-elevated: var(--surface-2); --color-primary: var(--accent); --color-text: var(--text); --color-text-muted: var(--text-2); --color-alert: var(--amber); --color-error: var(--danger); --color-border: var(--hairline); } /* ================================================================ RESET ================================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--fs-base); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; min-height: 100dvh; letter-spacing: -0.01em; transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out); } /* "Wallpaper" ambiental fijo detrás de todo (profundidad tipo escritorio macOS) */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: var(--ambient); background-attachment: fixed; pointer-events: none; } ul, ol { list-style: none; } a { color: var(--accent); text-decoration: none; } img, svg { display: block; max-width: 100%; } button { font-family: inherit; font-size: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; } h1, h2, h3, h4 { line-height: 1.15; color: var(--text); letter-spacing: -0.02em; font-weight: 700; } /* ================================================================ LAYOUT ================================================================ */ #app { height: 100dvh; overflow-y: auto; overflow-x: hidden; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); position: relative; -webkit-overflow-scrolling: touch; } .screen { padding: max(var(--s-md), env(safe-area-inset-top, 0px)) var(--s-md) var(--s-lg); max-width: 680px; margin: 0 auto; animation: screen-in 0.42s var(--ease-out); } /* Transición de pestaña a pestaña: desvanecimiento suave (con un toque de desenfoque que da sensación "pro", tipo macOS). */ @keyframes screen-in { from { opacity: 0; transform: translateY(10px) scale(0.992); filter: blur(3px); } to { opacity: 1; transform: none; filter: blur(0); } } /* Título grande tipo iOS */ .large-title { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.03em; margin: var(--s-sm) 0 var(--s-md); } .page-sub { color: var(--text-2); font-size: var(--fs-base); margin-top: -6px; margin-bottom: var(--s-md); } /* ================================================================ BOTTOM NAV (tab bar tipo iOS, con blur) ================================================================ */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(var(--blur)); backdrop-filter: saturate(180%) blur(var(--blur)); border-top: 1px solid var(--hairline); box-shadow: 0 -0.5px 0 var(--glass-hi) inset; display: flex; align-items: stretch; z-index: 100; } .nav-logo { display: none; } .nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 2px; color: var(--text-3); font-size: 10.5px; font-weight: 500; letter-spacing: 0; -webkit-tap-highlight-color: transparent; transition: color 0.2s var(--ease-out), transform 0.2s var(--ease-spring); } .nav-item svg { width: 24px; height: 24px; flex-shrink: 0; transition: transform 0.25s var(--ease-spring); } .nav-item span { opacity: 0.9; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } /* Con 6 pestañas, compacta un poco para que quepan en móvil */ @media (max-width: 420px) { .nav-item { font-size: 9.5px; gap: 3px; padding: 8px 1px; } .nav-item svg { width: 22px; height: 22px; } } .nav-item.active { color: var(--accent); } .nav-item.active svg { transform: translateY(-1px) scale(1.06); } .nav-item:active svg { transform: scale(0.88); } /* ================================================================ MODAL ================================================================ */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 1000; display: flex; align-items: flex-end; justify-content: center; padding: 0; animation: fade-in 0.2s ease; } @media (min-width: 560px){ .modal-overlay { align-items: center; padding: var(--s-md); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .modal-content { background: var(--glass-strong); -webkit-backdrop-filter: saturate(180%) blur(var(--blur)); backdrop-filter: saturate(180%) blur(var(--blur)); border: 1px solid var(--hairline-2); border-top: 1px solid var(--glass-hi); border-radius: var(--r-xl) var(--r-xl) 0 0; width: 100%; max-width: 520px; padding: var(--s-lg); max-height: 92vh; overflow-y: auto; box-shadow: var(--shadow-lg); animation: sheet-up 0.34s var(--ease-out); } @media (min-width: 560px){ .modal-content { border-radius: var(--r-xl); } } @keyframes sheet-up { from { transform: translateY(40px); opacity: 0.4; } to { transform: translateY(0); opacity: 1; } } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-md); } .modal-title { font-size: var(--fs-lg); font-weight: 700; } .modal-footer { display: flex; gap: var(--s-sm); margin-top: var(--s-lg); } .modal-footer .btn { flex: 1; } /* ================================================================ TOAST ================================================================ */ #toast-root { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 14px); left: 50%; transform: translateX(-50%); z-index: 2000; display: flex; flex-direction: column; align-items: center; gap: var(--s-sm); pointer-events: none; } .toast { background: var(--glass-strong); -webkit-backdrop-filter: saturate(180%) blur(var(--blur)); backdrop-filter: saturate(180%) blur(var(--blur)); border: 1px solid var(--hairline-2); color: var(--text); border-radius: var(--r-full); padding: 11px 20px; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; transform: translateY(-90px) scale(0.9); opacity: 0; transition: transform 0.4s var(--ease-spring), opacity 0.3s ease; pointer-events: auto; max-width: 340px; text-align: center; box-shadow: var(--shadow-md); } .toast.show { transform: translateY(0) scale(1); opacity: 1; } .toast-success { color: var(--accent); } .toast-error { color: var(--danger); } .toast-warning { color: var(--amber); } /* ================================================================ ANIMACIONES GLOBALES ================================================================ */ @keyframes pop-in { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } } @keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } } @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } @keyframes slide-up-fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes ring-fill { from { stroke-dashoffset: var(--dash, 314); } } .stagger > * { animation: slide-up-fade 0.5s var(--ease-out) both; } .stagger > *:nth-child(1){ animation-delay: 0.02s; } .stagger > *:nth-child(2){ animation-delay: 0.06s; } .stagger > *:nth-child(3){ animation-delay: 0.10s; } .stagger > *:nth-child(4){ animation-delay: 0.14s; } .stagger > *:nth-child(5){ animation-delay: 0.18s; } .stagger > *:nth-child(6){ animation-delay: 0.22s; } .stagger > *:nth-child(7){ animation-delay: 0.26s; } .stagger > *:nth-child(8){ animation-delay: 0.30s; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.05ms !important; } } /* ================================================================ SIDEBAR (desktop ≥820px) ================================================================ */ @media (min-width: 820px) { #app { display: flex; padding-bottom: 0; height: 100dvh; } .bottom-nav { position: fixed; top: 0; left: 0; bottom: 0; right: auto; width: 248px; height: auto; padding: var(--s-lg) var(--s-sm); flex-direction: column; align-items: stretch; justify-content: flex-start; border-top: none; border-right: 1px solid var(--hairline); background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(var(--blur)); backdrop-filter: saturate(180%) blur(var(--blur)); } .nav-item { flex: none; flex-direction: row; justify-content: flex-start; gap: var(--s-md); padding: 13px var(--s-md); border-radius: var(--r-md); font-size: var(--fs-base); } .nav-item.active { background: var(--accent-soft); } #app-content { margin-left: 248px; flex: 1; overflow-y: auto; height: 100dvh; } } /* Focus */ *:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Scrollbar */ ::-webkit-scrollbar { width: 7px; height: 7px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: var(--r-full); } /* ================================================================ UTILIDADES ================================================================ */ .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-xs { gap: var(--s-xs); } .gap-sm { gap: var(--s-sm); } .gap-md { gap: var(--s-md); } .text-muted { color: var(--text-2); } .text-faint { color: var(--text-3); } .text-primary { color: var(--accent); } .text-error { color: var(--danger); } .text-alert { color: var(--amber); } .text-xs { font-size: var(--fs-xs); } .text-sm { font-size: var(--fs-sm); } .text-lg { font-size: var(--fs-lg); } .font-bold { font-weight: 700; } .font-semi { font-weight: 600; } .mt-xs{margin-top:var(--s-xs);} .mt-sm{margin-top:var(--s-sm);} .mt-md{margin-top:var(--s-md);} .mt-lg{margin-top:var(--s-lg);} .mb-xs{margin-bottom:var(--s-xs);} .mb-sm{margin-bottom:var(--s-sm);} .mb-md{margin-bottom:var(--s-md);} .mb-lg{margin-bottom:var(--s-lg);} .hidden { display: none !important; } .w-full { width: 100%; } .text-center { text-align: center; } .divider { height: 1px; background: var(--hairline); margin: var(--s-md) 0; border: none; } /* Loading */ .spinner { width: 34px; height: 34px; border: 3px solid var(--surface-3); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; margin: var(--s-md) auto; } @keyframes spin { to { transform: rotate(360deg); } }