/* ============================================================ FINANZAS - SISTEMA DE DISEÑO Inspirado en: Lunch Money, Copilot Money, Monarch, Linear ============================================================ */ :root { /* PALETA - MODO OSCURO POR DEFECTO */ --bg: #0a0a0b; --bg-2: #131316; --bg-3: #1c1c20; --bg-hover: #232328; --border: rgba(255, 255, 255, 0.08); --border-2: rgba(255, 255, 255, 0.14); --text: #f5f5f7; --text-2: #a1a1aa; --text-3: #71717a; /* ACENTO - personalizable por usuario */ --accent: #7c5cff; /* violeta eléctrico, premium feel */ --accent-2: #6344ff; --accent-soft: rgba(124, 92, 255, 0.12); --accent-text: #ffffff; /* SEMÁNTICOS */ --green: #22c55e; --green-soft: rgba(34, 197, 94, 0.12); --red: #ef4444; --red-soft: rgba(239, 68, 68, 0.12); --amber: #f59e0b; --amber-soft: rgba(245, 158, 11, 0.12); --blue: #3b82f6; --blue-soft: rgba(59, 130, 246, 0.12); /* TIPOGRAFÍA */ --font: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif; --font-mono: 'SF Mono', Menlo, Monaco, Consolas, monospace; --font-display: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif; /* RADIOS */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-full: 9999px; /* SOMBRAS - sutiles, no exageradas */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5); /* TRANSICIONES */ --t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1); --t-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); --t-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); } [data-theme='light'] { --bg: #fafafa; --bg-2: #ffffff; --bg-3: #f4f4f5; --bg-hover: #e4e4e7; --border: rgba(0, 0, 0, 0.07); --border-2: rgba(0, 0, 0, 0.14); --text: #18181b; --text-2: #52525b; --text-3: #a1a1aa; } /* RESET */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } /* Evita que iOS infle el texto solo tras renderizar (el "se amplía a los 2 seg") */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-size: 15px; line-height: 1.5; overflow-x: hidden; } /* Sin viewport-fit=cover (como TekPair), iOS rellena las zonas seguras (arriba/abajo) con el fondo del . Lo ponemos del color de la barra para que la franja del gesto se vea como la barra (no negro vacío) y la pantalla se aproveche entera. */ html { overflow-x: hidden; background: var(--bg-2); } /* Nada puede desbordar el ancho del móvil (evita el zoom-out / layout ancho) */ img, canvas, svg, video, table, pre { max-width: 100%; } /* Contenedores de gráficas (altura responsive) */ .chart-box { position: relative; width: 100%; height: 240px; } .chart-box-lg { height: 360px; } @media (max-width: 600px) { .chart-box { height: 200px; } .chart-box-lg { height: 260px; } /* tarjetas de cuenta más estrechas: caben ~2 y se ve que es carrusel (la 3ª asoma) */ .account-card { min-width: clamp(150px, 47%, 200px); padding: 13px; gap: 6px; } } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } /* font-size >= 16px evita el zoom automático de iOS al enfocar un campo */ input, select, textarea { font: inherit; color: inherit; font-size: 16px; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* TIPOGRAFÍA DISPLAY */ .display { font-family: var(--font-display); letter-spacing: -0.02em; font-weight: 600; } .h1 { font-size: 32px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; } .h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; } .h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; } .body { font-size: 15px; } .small { font-size: 13px; color: var(--text-2); } .tiny { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; } .mono { font-family: var(--font-mono); } .tabular { font-variant-numeric: tabular-nums; } /* APP SHELL */ .app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; min-height: 100dvh; } @media (max-width: 880px) { /* SHELL ESTILO TEKPAIR: columna a altura completa. El contenido scrollea POR DENTRO (.app) y la barra inferior queda en el FLUJO al fondo → imposible que quede hueco negro debajo (el problema de la barra 'fixed'). */ html { height: 100%; } body { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; } .app { grid-template-columns: minmax(0, 1fr); /* evita desborde horizontal */ flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .bottom-nav { position: static; flex-shrink: 0; } /* en el flujo, no flotante */ } /* SIDEBAR */ .sidebar { background: var(--bg-2); border-right: 1px solid var(--border); padding: 20px 16px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; } @media (max-width: 880px) { .sidebar { display: none; } } .logo { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 20px; font-weight: 600; font-size: 17px; letter-spacing: -0.02em; } .logo-dot { width: 28px; height: 28px; background: var(--accent); border-radius: var(--r-sm); display: grid; place-items: center; color: var(--accent-text); } .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); color: var(--text-2); font-size: 14px; font-weight: 500; transition: all var(--t-fast); cursor: pointer; } .nav-item:hover { background: var(--bg-hover); color: var(--text); } .nav-item.active { background: var(--accent-soft); color: var(--text); } .nav-item.active i { color: var(--accent); } .nav-item i { font-size: 18px; } .sidebar-section { margin-top: 16px; padding: 0 12px 4px; } /* MAIN */ .main { padding: 24px 32px 48px; max-width: 1200px; width: 100%; min-width: 0; /* item de grid: permite encoger por debajo del contenido (evita desborde móvil) */ } @media (max-width: 880px) { .main { padding: 0 16px 32px; } } .header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; gap: 16px; } /* CARDS */ .card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; } .card-flat { background: var(--bg-3); border: none; } .stat { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; transition: all var(--t-fast); } .stat:hover { border-color: var(--border-2); } .stat-label { font-size: 12px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; } .stat-value { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .stat-delta { font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; } .stat-delta.up { color: var(--green); } .stat-delta.down { color: var(--red); } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 24px; } /* BOTONES */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px; border-radius: var(--r-md); font-size: 14px; font-weight: 500; border: 1px solid var(--border); background: var(--bg-2); color: var(--text); transition: all var(--t-fast); } .btn:hover { background: var(--bg-hover); border-color: var(--border-2); } .btn:active { transform: scale(0.98); } .btn-primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); } .btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); } .btn-danger { color: var(--red); } .btn-danger:hover { background: var(--red-soft); } .btn-icon { padding: 9px; aspect-ratio: 1; } .btn-sm { padding: 6px 10px; font-size: 13px; } .btn-lg { padding: 12px 20px; font-size: 15px; } /* INPUTS */ .input, .select, .textarea { width: 100%; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--bg-2); color: var(--text); font-size: 14px; transition: all var(--t-fast); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .input::placeholder { color: var(--text-3); } .field { display: flex; flex-direction: column; gap: 6px; } .field-label { font-size: 12px; font-weight: 500; color: var(--text-2); } /* TOGGLE PILLS */ .pill-group { display: inline-flex; background: var(--bg-3); padding: 4px; border-radius: var(--r-md); gap: 2px; } .pill { padding: 6px 14px; border-radius: calc(var(--r-md) - 4px); font-size: 13px; font-weight: 500; color: var(--text-2); transition: all var(--t-fast); } .pill.active { background: var(--bg-2); color: var(--text); box-shadow: var(--shadow-sm); } /* LISTA MOVIMIENTOS */ .mov-list { display: flex; flex-direction: column; } .mov { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); cursor: pointer; transition: background var(--t-fast); padding-left: 4px; padding-right: 4px; border-radius: var(--r-sm); } .mov:hover { background: var(--bg-hover); } .mov:last-child { border-bottom: none; } .mov-icon { width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; flex-shrink: 0; font-size: 20px; } .mov-info { flex: 1; min-width: 0; } .mov-title { font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mov-sub { font-size: 12px; color: var(--text-2); margin-top: 2px; } .mov-amount { font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; } .mov-amount.in { color: var(--green); } .mov-amount.out { color: var(--text); } /* FAB - FLOATING ACTION BUTTON (móvil) */ .fab { position: fixed; bottom: 88px; right: 20px; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--accent-text); display: grid; place-items: center; box-shadow: var(--shadow-md); font-size: 24px; z-index: 50; border: none; transition: transform var(--t-fast); } .fab:hover { transform: scale(1.05); } .fab:active { transform: scale(0.95); } @media (min-width: 881px) { .fab { display: none; } } /* BOTTOM NAV (móvil) — fondo PLANO sólido (sin translucidez/desenfoque que oscurecía el contenido por debajo y dejaba asomar la gráfica). Rellena hasta el borde inferior. */ .bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg-2); /* mismo color que el fondo de las zonas seguras (html) → continuo */ border-top: 1px solid var(--border); /* Compacta como TekPair: el contenido ya va inset (sin viewport-fit=cover), así que la barra queda justo encima de la zona del gesto, que el pinta del mismo color. */ padding: 6px 8px 10px; z-index: 40; justify-content: space-around; } @media (max-width: 880px) { .bottom-nav { display: flex; } } .bn-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 12px; color: var(--text-3); font-size: 11px; font-weight: 500; border-radius: var(--r-md); min-width: 64px; } .bn-item i { font-size: 22px; } .bn-item.active { color: var(--accent); } /* Sello de versión (para confirmar qué build ve el dispositivo) */ .app-version { text-align: center; color: var(--text-3); font-size: 11px; margin-top: 18px; opacity: .6; } /* FAQ / Ayuda en Ajustes (acordeón nativo con
) */ .faq { border-top: 1px solid var(--border); padding: 11px 0; } .faq:first-of-type { border-top: none; padding-top: 0; } .faq summary { cursor: pointer; font-weight: 500; font-size: 14px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; color: var(--text-3); font-size: 20px; line-height: 1; transition: transform var(--t-fast); } .faq[open] summary::after { content: '\2212'; } .faq p { margin-top: 8px; } /* Menú "Más" (navegación móvil) */ .mas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .mas-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 8px; border: 1px solid var(--border); border-radius: 14px; color: var(--text); background: var(--bg); text-align: center; font-size: 12px; font-weight: 600; transition: transform .1s ease; } .mas-item i { font-size: 24px; color: var(--accent); } .mas-item:active { transform: scale(.96); } /* Toque/sensación nativa en móvil */ * { -webkit-tap-highlight-color: transparent; } html, body { overscroll-behavior-y: contain; } .nav-item, .bn-item, .mas-item, .btn, .pill, .tab, .sheet-handle { -webkit-user-select: none; user-select: none; } .sheet, .main { -webkit-overflow-scrolling: touch; } /* Feedback táctil al pulsar (sensación de app) */ .mov, .card, .mas-item, .pill { transition: transform .09s ease; } .mov:active { transform: scale(.985); } .card:active { transform: scale(.992); } /* Transición tipo app al cambiar de sección */ @keyframes vistaIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: no-preference) { .vista.view:not(.hidden) { animation: vistaIn .22s cubic-bezier(.22,.61,.36,1); } } /* Header que se encoge al hacer scroll (estilo app nativa) — solo móvil */ @media (max-width: 880px) { .header { position: sticky; top: 0; z-index: 30; background: var(--bg); padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: 8px; margin-bottom: 14px; transition: box-shadow .18s ease, padding .18s ease; } .header .h1 { transition: font-size .18s ease; } #subtitulo-vista { overflow: hidden; transition: opacity .15s ease, max-height .18s ease; max-height: 40px; } .header.shrink { box-shadow: 0 4px 16px rgba(0,0,0,.18); padding-bottom: 6px; } .header.shrink .h1 { font-size: 17px; } .header.shrink #subtitulo-vista { opacity: 0; max-height: 0; } } /* SHEETS / MODALES */ .sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 100; opacity: 0; pointer-events: none; transition: opacity var(--t-base); } .sheet-backdrop.open { opacity: 1; pointer-events: auto; } .sheet { position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 100%); width: 100%; max-width: 500px; background: var(--bg-2); border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 20px; z-index: 101; transition: transform var(--t-base), opacity var(--t-base), visibility var(--t-base); max-height: 90vh; overflow-y: auto; border: 1px solid var(--border); border-bottom: none; padding-bottom: calc(20px + env(safe-area-inset-bottom)); /* Oculto de verdad cuando no está abierto (en escritorio el transform no basta) */ opacity: 0; visibility: hidden; pointer-events: none; } .sheet.open { transform: translate(-50%, 0); opacity: 1; visibility: visible; pointer-events: auto; } @media (min-width: 600px) { .sheet { bottom: auto; top: 50%; transform: translate(-50%, -50%) scale(0.96); border-radius: var(--r-xl); border-bottom: 1px solid var(--border); padding-bottom: 20px; } .sheet.open { transform: translate(-50%, -50%) scale(1); } } .sheet-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .sheet-handle { display: block; width: 36px; height: 4px; background: var(--border-2); border-radius: var(--r-full); margin: -8px auto 16px; } @media (min-width: 600px) { .sheet-handle { display: none; } } /* SEGMENT INGRESO/GASTO */ .segment { display: grid; grid-template-columns: 1fr 1fr; background: var(--bg-3); border-radius: var(--r-md); padding: 4px; gap: 4px; margin-bottom: 16px; } .seg { padding: 10px; border-radius: calc(var(--r-md) - 4px); font-weight: 500; font-size: 14px; color: var(--text-2); display: flex; align-items: center; justify-content: center; gap: 6px; transition: all var(--t-fast); } .seg.active.gasto { background: var(--red-soft); color: var(--red); } .seg.active.ingreso { background: var(--green-soft); color: var(--green); } .seg.active.transfer { background: var(--blue-soft); color: var(--blue); } .segment.has-3 { grid-template-columns: 1fr 1fr 1fr; } /* GRID DE CATEGORÍAS (selector) */ .cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; max-height: 240px; overflow-y: auto; padding: 4px; } .cat-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: var(--r-md); background: var(--bg-3); border: 1px solid transparent; transition: all var(--t-fast); cursor: pointer; } .cat-tile:hover { border-color: var(--border-2); } .cat-tile.selected { border-color: var(--accent); background: var(--accent-soft); } .cat-tile-icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; } .cat-tile-name { font-size: 11px; text-align: center; line-height: 1.2; } /* BADGES */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--r-full); font-size: 11px; font-weight: 500; background: var(--bg-3); color: var(--text-2); } .badge.success { background: var(--green-soft); color: var(--green); } .badge.danger { background: var(--red-soft); color: var(--red); } .badge.warning { background: var(--amber-soft); color: var(--amber); } .badge.info { background: var(--blue-soft); color: var(--blue); } /* PROGRESO PRESUPUESTO */ .progress { width: 100%; height: 6px; background: var(--bg-3); border-radius: var(--r-full); overflow: hidden; } .progress-bar { height: 100%; background: var(--accent); border-radius: var(--r-full); transition: width var(--t-slow); } .progress-bar.warning { background: var(--amber); } .progress-bar.danger { background: var(--red); } /* EMPTY STATE */ .empty { text-align: center; padding: 48px 20px; color: var(--text-3); } .empty i { font-size: 40px; display: block; margin-bottom: 12px; opacity: 0.5; } /* SCROLLBAR PERSONALIZADA */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: var(--r-full); border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--text-3); } /* UTILITIES */ .flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .text-secondary { color: var(--text-2); } .text-tertiary { color: var(--text-3); } .hidden { display: none !important; } .grow { flex: 1; } .text-right { text-align: right; } /* LOADING SPINNER */ .spinner { width: 18px; height: 18px; border: 2px solid var(--border-2); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* TRANSICIONES DE VISTA */ .view { animation: fadeUp 240ms cubic-bezier(0.4, 0, 0.2, 1); } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* CHIPS DE FILTRO */ .chips { display: flex; gap: 6px; flex-wrap: wrap; } .chip { padding: 6px 12px; border-radius: var(--r-full); background: var(--bg-3); font-size: 13px; font-weight: 500; border: 1px solid transparent; transition: all var(--t-fast); } .chip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--text); } .chip:hover { border-color: var(--border-2); } /* SCROLL HORIZONTAL CUENTAS */ .accounts-scroll { display: flex; gap: 12px; overflow-x: auto; padding: 4px 0 12px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .accounts-scroll::-webkit-scrollbar { display: none; } .account-card { min-width: 220px; flex-shrink: 0; scroll-snap-align: start; padding: 16px; border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; } .account-card-icon { width: 36px; height: 36px; border-radius: var(--r-md); display: grid; place-items: center; font-size: 18px; } /* ============================================================ PASE DE DISEÑO (jun-2026): accesibilidad, skeletons, install ============================================================ */ /* Accesibilidad: respeta "reducir movimiento" */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Accesibilidad: anillo de foco visible solo para teclado */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); } button:focus:not(:focus-visible), .nav-item:focus:not(:focus-visible), .bn-item:focus:not(:focus-visible) { outline: none; } /* SKELETON / shimmer de carga */ @keyframes shimmer { 100% { transform: translateX(100%); } } .skeleton { position: relative; overflow: hidden; background: var(--bg-3); border-radius: var(--r-sm); color: transparent !important; } .skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent); animation: shimmer 1.4s infinite; } /* En la primera carga, los KPI muestran shimmer en vez de "0,00 €" */ .app.loading .stat-value { position: relative; overflow: hidden; background: var(--bg-3); border-radius: var(--r-sm); color: transparent; min-height: 1.2em; } .app.loading .stat-value::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent); animation: shimmer 1.4s infinite; } /* BANNER DE INSTALACIÓN PWA */ .install-banner { display: flex; align-items: center; gap: 12px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 14px; margin-bottom: 20px; animation: fadeUp 240ms cubic-bezier(0.4, 0, 0.2, 1); } .install-banner-icon { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 20px; flex-shrink: 0; } /* ====== COMPACTACIÓN MÓVIL (≤600px): widgets que caben bien y escalan por dispositivo ====== Se usa clamp(min, fluido-vw, max) para que en móviles estrechos (iPhone SE/mini) encoja y en grandes (Pro Max) no se quede pequeño. */ @media (max-width: 600px) { body { font-size: 14px; } /* Tamaños FIJOS (no vw): responsive por breakpoint, sin reaccionar al reflow de carga (los vw causaban el "se amplía a los 2 seg" al renderizar las gráficas). */ .h1 { font-size: 22px; } .h2 { font-size: 18px; } .h3 { font-size: 15px; } .header { margin-bottom: 14px; } /* la barra ya NO se solapa (está en el flujo); solo dejamos aire para el FAB */ .main { padding: 0 14px 24px; overflow-x: clip; } /* CINTURÓN ANTI-DESBORDE: que ningún hijo fuerce un ancho mayor que la pantalla */ .vista, .card, .mov-list, .stats-grid, .stat, .mov, .mov-info { min-width: 0; max-width: 100%; } /* métricas: 2 por fila. minmax(0,1fr) deja que la columna se encoja por debajo de su contenido (antes un número largo o el "↓94% vs mes ant." empujaba y se salía). */ .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; } .stat { padding: 13px; gap: 3px; min-width: 0; overflow: hidden; } .stat-value { font-size: 18px; overflow-wrap: anywhere; } .stat-label { font-size: 10px; overflow-wrap: anywhere; } .stat-delta { white-space: normal; overflow-wrap: anywhere; } /* tarjetas más ajustadas y menos separación entre secciones */ .card { padding: 14px; border-radius: var(--r-md); } .mb-6 { margin-bottom: 16px; } /* filas de movimientos más densas */ .mov { gap: 11px; padding: 10px 0; } .mov-icon { width: 36px; height: 36px; font-size: 18px; } .mov-title { font-size: 13.5px; } .mov-sub { font-size: 11.5px; } .mov-amount { font-size: 14px; } /* el gráfico de categorías no necesita tanto alto en el móvil → menos vacío */ .chart-box { height: 180px; } /* buscador de Movimientos a todo el ancho (quitamos el tope de 320px que lo dejaba corto) */ #buscar-mov { max-width: none !important; } } /* Móviles muy estrechos (≤360px: iPhone SE/mini): aún más compacto */ @media (max-width: 360px) { .stats-grid { gap: 6px; } .stat { padding: 9px; } .bn-item { min-width: 0; padding: 6px 6px; font-size: 10px; } .bn-item i { font-size: 20px; } }