/* ────────────────────────────────────────────────────────────────────────── EXIMIR FINANZAS — Estilos Globales ────────────────────────────────────────────────────────────────────────── */ /* ── Variables ───────────────────────────────────────────────────────────── */ :root { --radius-card: 20px; --radius-inner: 14px; --shadow-card: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04); /* Palette */ --bg-primary: linear-gradient(135deg, #EAF2FF 0%, #F7F9FF 40%, #EFF6FF 100%); --brand-sky: #60A5FA; --brand-indigo: #6366F1; --muted-900: #0f172a; --muted-700: #334155; } .dark { --bg-primary: #05070d; --brand-sky: #60A5FA; --brand-indigo: #818cf8; --muted-900: #f8fafc; --muted-700: #cbd5e1; } /* Modo oscuro Eximir: mismo cielo profundo que el launcher. El fondo vive en (no en body) para que las estrellas #bg-stars (z-index:-1) queden ENTRE el fondo y el contenido — un hijo con z negativo pinta sobre el fondo de su ancestro pero bajo el contenido. */ html.dark { background: radial-gradient(52% 44% at 18% 10%, rgba(74,157,255,.14) 0%, transparent 70%), radial-gradient(46% 40% at 85% 16%, rgba(139,108,255,.12) 0%, transparent 70%), radial-gradient(120% 100% at 50% 0%, #0a0f1c 0%, #05070d 68%) #05070d; background-attachment: fixed; } .dark body { background: transparent !important; color: #e2e8f0 !important; } /* Estrellas del modo oscuro (shared/starfield.js pausa su loop en claro) */ #bg-stars { position: fixed; inset: 0; z-index: -1; pointer-events: none; display: none; } html.dark #bg-stars { display: block; } .dark .card { background: #111827; border-color: rgba(148,163,184,0.18); box-shadow: 0 8px 28px rgba(15,23,42,0.18); } .dark .bg-white { background-color: #111827 !important; } .dark .bg-gray-50 { /* transparente: deja ver el cielo con estrellas en las vistas internas */ background-color: transparent !important; } .dark .bg-gray-100 { background-color: rgba(255,255,255,0.08) !important; } .dark .text-gray-600, .dark .text-gray-700 { color: #94a3b8 !important; } /* Formularios nativos (date pickers, selects) en paleta oscura */ .dark input, .dark select, .dark textarea { color-scheme: dark; } .dark .text-black { color: #f8fafc !important; } .dark .text-gray-500, .dark .text-gray-400 { color: #94a3b8 !important; } .dark .border-black\/5 { border-color: rgba(148,163,184,0.18) !important; } .dark .bg-black\/5 { background-color: rgba(255,255,255,0.08) !important; } .dark .card .text-black { color: #f8fafc !important; } .dark .card .text-gray-500, .dark .card .text-gray-400 { color: #94a3b8 !important; } .dark .scroll-hidden::-webkit-scrollbar { display: none; } /* ── Reset base ──────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--bg-primary) no-repeat fixed !important; background-size: cover; color: #111 !important; font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; /* Complemento iOS del user-scalable=no del viewport (Safari lo ignora solo) */ touch-action: pan-x pan-y; -webkit-font-smoothing: antialiased; min-height: 100dvh; } /* ── Grid del dashboard ──────────────────────────────────────────────────── */ .app-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } /* Achievement grid alignment */ .achievement-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .achievement-grid button { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 80px; text-align: center; } @media (min-width: 1024px) { .app-grid { grid-template-columns: repeat(12, 1fr); gap: 24px; padding-top: 32px; padding-bottom: 80px; } .app-grid .lg\:col-span-8 { grid-column: span 8; } .app-grid .lg\:col-span-4 { grid-column: span 4; } .app-grid .col-span-full { grid-column: 1 / -1; } } /* ── Card base ───────────────────────────────────────────────────────────── */ .card { background: #fff; border-radius: var(--radius-card); border: 1px solid rgba(0,0,0,0.05); box-shadow: var(--shadow-card); padding: 20px; } @media (min-width: 640px) { .card { padding: 28px; } } /* ── Clases de radio ─────────────────────────────────────────────────────── */ .rounded-bento { border-radius: var(--radius-card); } .rounded-bento-inner { border-radius: var(--radius-inner); } /* ── Inputs number: ocultar flechas ──────────────────────────────────────── */ .hide-arrows::-webkit-outer-spin-button, .hide-arrows::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .hide-arrows { -moz-appearance: textfield; } /* ── Scrollbars ──────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #d0d0d8; border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: #b0b0bb; } .scroll-hidden::-webkit-scrollbar{ display: none; } /* Hide scrollbars globally but keep scrolling functional */ html, body, * { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { display: none; /* WebKit */ width: 0; height: 0; } /* ── Material Symbols ────────────────────────────────────────────────────── */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; vertical-align: middle; user-select: none; display: inline-flex; align-items: center; justify-content: center; } /* ── Animaciones ─────────────────────────────────────────────────────────── */ .animate-scale-up { animation: scaleUp 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes scaleUp { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } } .animate-fade-in { animation: fadeIn 0.18s ease-out forwards; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Toast */ .animate-slide-up { animation: slideUpToast 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes slideUpToast { from { transform: translate(-50%, 20px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } } /* Modales que suben desde abajo (bottom-sheet en móvil) */ .animate-slide-up-modal { animation: slideUpModal 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .modal-overlay { background: rgba(8, 15, 30, 0.24); backdrop-filter: blur(18px); } .dark .modal-overlay { background: rgba(5, 10, 25, 0.32); } .modal-surface { background: rgba(255, 255, 255, 0.86); border: 1px solid rgba(255, 255, 255, 0.65); box-shadow: 0 28px 90px rgba(15, 23, 42, 0.12); backdrop-filter: blur(20px); } .dark .modal-surface { background: rgba(15, 23, 42, 0.9); border-color: rgba(255, 255, 255, 0.12); } @keyframes slideUpModal { from { transform: translateY(60px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Jiggle (Subtle Edit Mode) */ .animate-jiggle { animation: subtleJiggle 0.5s ease-in-out infinite; transform-origin: center; } @keyframes subtleJiggle { 0% { transform: rotate(-1deg); } 50% { transform: rotate(1.5deg); } 100% { transform: rotate(-1deg); } } /* Racha glow animation when not interacted */ .animate-streak-glow { animation: streakGlow 1.8s infinite ease-in-out; } @keyframes streakGlow { 0%, 100% { box-shadow: 0 0 4px rgba(249, 115, 22, 0.2), inset 0 0 0 1px rgba(249, 115, 22, 0.2); transform: scale(1); } 50% { box-shadow: 0 0 16px rgba(249, 115, 22, 0.55), inset 0 0 0 1.5px rgba(249, 115, 22, 0.4); transform: scale(1.03); } } /* ── Pantalla de carga: ahora es la unificada de Eximir (shared/loader.js, id "initial-loader" para conservar el contrato con app.js, que hace classList.add('fade-out') al montar). El CSS vive en loader.js. ─────── */ /* ── Chrome Eximir: píldora "Volver" + toggle de tema (glass, theme-aware) ── */ #eximir-volver { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 13px; font-weight: 600; text-decoration: none; background: rgba(255,255,255,.72); color: #0f172a; border: 1px solid rgba(15,23,42,.12); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 20px rgba(15,23,42,.10); transition: border-color .2s ease, transform .15s ease, background .2s ease, color .2s ease; } #eximir-volver:hover { border-color: rgba(15,23,42,.3); transform: translateY(-1px); } .dark #eximir-volver { background: rgba(16,22,38,.55); color: #eef2fa; border-color: rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 20px rgba(0,0,0,.25); } .dark #eximir-volver:hover { border-color: rgba(255,255,255,.4); } /* ── Responsive: breakpoints finos ──────────────────────────────────────── */ /* Teléfonos pequeños (< 380px, ej. iPhone SE) */ @media (max-width: 380px) { .card { padding: 16px; border-radius: 16px; } h2.balance-amount { font-size: 1.8rem !important; } } /* Teléfonos medianos (380–640px, ej. iPhone 13) */ @media (max-width: 640px) { .app-grid { gap: 10px; padding-left: 12px; padding-right: 12px; } /* Modales: bottom-sheet sin bordes laterales */ .sm\:rounded-bento { border-radius: var(--radius-card) var(--radius-card) 0 0 !important; } .sm\:max-w-md { max-width: 100% !important; } /* Grilla de categorías: 3 columnas en móvil */ .cat-grid { grid-template-columns: repeat(3, 1fr); } } /* Tablets (640–1024px) */ @media (min-width: 640px) and (max-width: 1023px) { .app-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .app-grid section { grid-column: span 1; } .app-grid section.col-span-full { grid-column: 1 / -1; } } /* ── Safe area (notch iPhone) ────────────────────────────────────────────── */ @supports (padding-top: env(safe-area-inset-top)) { body { padding-top: env(safe-area-inset-top); } .fab-wrap { padding-bottom: calc(env(safe-area-inset-bottom) + 16px); } } /* Background helper to apply global gradient as a full-screen background */ .bg-global { background: var(--bg-primary) no-repeat fixed; background-size: cover; } .dark .bg-global { /* transparente: el cielo profundo + estrellas viven en html.dark/#bg-stars */ background: transparent; } /* When tutorial is active, hide all root children except tutorial modals */ /* Hide everything inside root when tutorial-active, then explicitly show tutorial modals */ .tutorial-active > * { display: none !important; } .tutorial-active > .tutorial-modal { display: flex !important; } /* Ensure tutorial wrapper covers everything and prevents interaction with hidden content */ .tutorial-modal { position: fixed; inset: 0; } /* ── Optimización móvil de inputs y modales (sesión 12-jul-2026) ───────────── */ /* Evita que iOS reajuste el tamaño del texto al rotar */ html { -webkit-text-size-adjust: 100%; } /* Scroll con inercia en modales y contenedores desplazables */ .modal-surface, .overflow-y-auto { -webkit-overflow-scrolling: touch; } /* Respeta el área segura inferior (home indicator) en modales tipo hoja */ @supports (padding: max(0px)) { .modal-surface { padding-bottom: max(1.5rem, calc(1.25rem + env(safe-area-inset-bottom))); } } /* Áreas de toque más cómodas y sin resaltado azul al tocar */ button, [role="button"], input, select, textarea { -webkit-tap-highlight-color: transparent; } /* Los inputs numéricos muestran el teclado decimal y no permiten arrastre de zoom */ input[type="number"] { touch-action: manipulation; } /* Vistas internas (historial, informe, línea de tiempo): cada una trae su propia flecha "atrás" arriba a la izquierda. El chrome fijo de Eximir ocupaba ese mismo punto y sacaba al usuario de Eclipse de un toque accidental, así que se oculta mientras se está dentro. */ body.vista-interna #eximir-chrome { display: none; }