/* ====== KBL App — estética "mundo de fieltro" vibrante ====== */ :root { /* Tipografía del sistema: SF Pro en Apple, Segoe UI en Windows */ --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; /* Cielo por fase del día (data-phase en ); default: atardecer */ --sky: linear-gradient(180deg, #8fb4e6 0%, #b7bcee 42%, #e7cfe6 72%, #f8e4d9 100%); --grass: #6fce55; --grass-deep: #4caf3f; --ink: #1b3327; /* El texto secundario vive sobre tarjetas semitransparentes encima de un cielo con gradiente: el fondo real cambia según la hora y la posición. Por eso va más oscuro que un gris "de diseño" — tiene que aguantar el peor fondo posible, no el del mockup. */ /* Medido contra la franja MÁS OSCURA del cielo (#8fb4e6, la de arriba, que es donde caen los subtítulos y los chips): #3d5b4a daba 3,2:1 ahí. */ --ink-soft: #2d4336; --card: rgba(255, 255, 255, 0.72); --accent: #ff8a5c; --accent-deep: #f26d3d; /* SUPERFICIE vs TEXTO — la distinción que faltaba y que hacía que la app se viera despareja. `--accent`/`--accent-deep` son colores de MARCA: se pintan de fondo. Escribir con ellos sobre algo claro da 2,2–2,8:1. `--accent-txt` es el mismo naranja bajado al mínimo que pasa AA sobre tarjeta. Sobre el cielo pelado ni eso alcanza (haría falta #7d2708, que ya no se lee como el naranja de la app): ahí el elemento lleva superficie propia. Mismo criterio para --fin-cuota en texto chico. */ --accent-txt: #c73d0c; --accent-fondo: linear-gradient(160deg, #c2410c, #9a3412); /* Medidos contra el peor extremo del gradiente del tabbar (blanco al 35% sobre el cielo), que es donde menos contraste hay: 5,0:1 y 4,7:1. */ --tab-off: #3a5645; --tab-on: #8a2f07; --tab-on-bg: rgba(242, 109, 61, .16); --radius-xl: 28px; --radius-lg: 20px; --shadow-soft: 0 10px 30px rgba(35, 64, 50, 0.14); --tabbar-h: 74px; } * { margin: 0; padding: 0; box-sizing: border-box; } input, textarea { user-select: text; -webkit-user-select: text; } html, body { height: 100%; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; } body { font-family: var(--font); color: var(--ink); background: var(--sky); min-height: 100dvh; user-select: none; -webkit-user-select: none; } body[data-phase="amanecer"] { --sky: linear-gradient(180deg, #93b2dd 0%, #d9b3c4 48%, #ffd9b8 82%, #ffe9d2 100%); } body[data-phase="dia"] { --sky: linear-gradient(180deg, #7fbdf0 0%, #a8d6f5 55%, #dff0fb 100%); } body[data-phase="noche"] { --sky: linear-gradient(180deg, #1c2547 0%, #2e3a6e 45%, #55497f 78%, #746092 100%); } body[data-phase="noche"] .cloud { opacity: .22; filter: brightness(.75); } body[data-phase="noche"] .panel, body[data-phase="noche"] .tabbar { background: linear-gradient(150deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.45) 60%, rgba(255,255,255,.6) 100%); } #app { max-width: 520px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); } /* ====== Vistas ====== */ .view { display: none; animation: viewIn .35s cubic-bezier(.2,.9,.3,1.2); } .view.active { display: block; flex: 1; } #view-foco.active { display: flex; flex-direction: column; } @keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ====== Escena Foco ====== */ .scene { position: relative; flex: 1 1 auto; min-height: 230px; overflow: hidden; } #tree-svg { position: absolute; inset: 0; width: 100%; height: 100%; } .ambient { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } /* Isla 3D creciendo durante la sesión de foco (reemplaza el árbol 2D) */ .scene-3d { position: absolute; inset: 0; display: none; /* activado por JS mientras hay sesión corriendo */ align-items: flex-end; justify-content: center; padding-bottom: 6%; touch-action: none; cursor: grab; } .scene-3d.grabbing { cursor: grabbing; } .scene-3d canvas { height: 76%; width: auto; transform-origin: bottom center; will-change: transform; } /* Vignette sutil para profundidad */ .scene::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 42%, transparent 55%, rgba(72, 64, 130, .14) 100%); } /* Pétalos flotando */ .petal { position: absolute; top: -24px; width: 9px; height: 9px; border-radius: 65% 4px 65% 4px; opacity: 0; animation: petalFall linear infinite; pointer-events: none; } @keyframes petalFall { 0% { transform: translate(0, -24px) rotate(0deg); opacity: 0; } 8% { opacity: .85; } 100% { transform: translate(-70px, 540px) rotate(560deg); opacity: .15; } } .cloud { position: absolute; width: 120px; height: 44px; background: #fff; border-radius: 44px; opacity: .75; filter: drop-shadow(0 8px 12px rgba(120,170,210,.25)); animation: drift linear infinite; } .cloud::before, .cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50%; } .cloud::before { width: 52px; height: 52px; top: -24px; left: 20px; } .cloud::after { width: 38px; height: 38px; top: -16px; left: 62px; } .c1 { top: 12%; left: -130px; animation-duration: 42s; transform: scale(.9); } .c2 { top: 26%; left: -130px; animation-duration: 58s; animation-delay: -25s; transform: scale(.65); } .c3 { top: 6%; left: -130px; animation-duration: 70s; animation-delay: -48s; transform: scale(1.1); } @keyframes drift { to { left: 110%; } } /* ====== Panel inferior (Liquid Glass) ====== */ .panel { margin: -34px 14px 14px; position: relative; z-index: 2; flex-shrink: 0; background: linear-gradient(150deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.18) 55%, rgba(255,255,255,.35) 100%); backdrop-filter: blur(30px) saturate(1.7); -webkit-backdrop-filter: blur(30px) saturate(1.7); border: 1px solid rgba(255,255,255,.65); border-radius: 34px; box-shadow: 0 24px 50px rgba(35, 64, 50, .20), inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 -14px 28px rgba(255,255,255,.16); padding: 24px 22px; text-align: center; overflow: hidden; } .panel::before { /* destello especular del vidrio */ content: ''; position: absolute; top: -45%; left: -15%; width: 65%; height: 90%; background: radial-gradient(closest-side, rgba(255,255,255,.55), transparent 72%); transform: rotate(-18deg); pointer-events: none; } .panel-title { font-size: 1.35rem; font-weight: 800; margin-bottom: 16px; } /* Control segmentado estilo iOS (duraciones de foco) */ .chips { display: flex; gap: 3px; margin-bottom: 10px; background: rgba(110, 125, 118, .14); border-radius: 14px; padding: 3px; } .chip { flex: 1; font: 700 1rem var(--font); color: var(--ink-soft); background: transparent; border: none; border-radius: 11px; padding: 9px 0; cursor: pointer; transition: transform .15s, background .15s, color .15s, box-shadow .15s; } .chip:active { transform: scale(.95); } .chip.selected { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(35, 64, 50, .18); } /* Chips de categoría (Gastos): pills scrolleables */ .cat-chip { flex: 0 0 auto; padding: 8px 13px; background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.7); font-size: .85rem; border-radius: 14px; } .cat-chip.selected { background: #e9fbe2; border-color: var(--grass); color: #2e7d32; box-shadow: none; } .species-hint { font-size: .9rem; color: var(--ink-soft); margin-bottom: 18px; min-height: 1.2em; } .btn-primary { font: 800 1.15rem var(--font); color: #fff; background: var(--accent-fondo); border: none; border-radius: 20px; padding: 16px 40px; cursor: pointer; box-shadow: 0 8px 20px rgba(242,109,61,.4), inset 0 2px 0 rgba(255,255,255,.35); transition: transform .15s; width: 100%; } .btn-primary:active { transform: scale(.96); } .btn-ghost { font: 800 .95rem var(--font); color: var(--ink-soft); background: rgba(255,255,255,.6); border: none; border-radius: 16px; padding: 12px 24px; cursor: pointer; margin-top: 14px; } /* ====== Timer ====== */ .timer-wrap { position: relative; width: 190px; height: 190px; margin: 0 auto; } .ring { width: 100%; height: 100%; transform: rotate(-90deg); } .ring-bg { fill: none; stroke: rgba(111,206,85,.2); stroke-width: 10; } .ring-fg { fill: none; stroke: var(--grass); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 326.7; /* 2πr, r=52 */ stroke-dashoffset: 326.7; transition: stroke-dashoffset 1s linear; } .timer-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .time-left { font-size: 2.4rem; font-weight: 800; letter-spacing: 1px; } .time-label { font-size: .85rem; color: var(--ink-soft); font-weight: 700; } .done-sub { color: var(--ink-soft); font-weight: 700; margin-bottom: 18px; } /* ====== Bosque ====== */ .view-header { padding: max(24px, env(safe-area-inset-top)) 22px 6px; } .view-header h1 { font-size: 1.7rem; font-weight: 800; } .view-sub { color: var(--ink-soft); font-weight: 700; } .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 14px 16px; } .stat-card { background: linear-gradient(150deg, rgba(255,255,255,.55), rgba(255,255,255,.22)); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border: 1px solid rgba(255,255,255,.65); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.9); text-align: center; padding: 12px 4px; } .stat-val { font-size: 1.15rem; font-weight: 800; } .stat-key { font-size: .72rem; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .5px; } .section-title { font-size: 1.05rem; font-weight: 800; color: var(--ink); padding: 10px 22px 2px; } .species-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(104px, 1fr); gap: 10px; padding: 8px 16px 4px; overflow-x: auto; scrollbar-width: none; } .species-card { background: linear-gradient(150deg, rgba(255,255,255,.55), rgba(255,255,255,.22)); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border: 1px solid rgba(255,255,255,.65); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.9); text-align: center; padding: 10px 6px 8px; } .species-card svg { width: 74%; aspect-ratio: 200/214; } .species-name { font-size: .8rem; font-weight: 800; } .species-min { font-size: .7rem; font-weight: 800; color: var(--ink-soft); } /* ====== Visor 360 ====== */ .viewer360 { position: relative; height: 330px; margin: 6px 16px; display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, rgba(255,255,255,.4), rgba(255,255,255,.15)); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border: 1px solid rgba(255,255,255,.6); border-radius: var(--radius-xl); box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.85); overflow: hidden; touch-action: none; cursor: grab; user-select: none; } .viewer360.grabbing { cursor: grabbing; } .viewer360 canvas { height: 100%; width: auto; pointer-events: none; } .viewer-hint { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-size: .72rem; font-weight: 800; color: var(--ink-soft); opacity: .8; pointer-events: none; } .viewer360.ready .viewer-hint { animation: hintFade 4s forwards; } @keyframes hintFade { 0%, 70% { opacity: .8; } 100% { opacity: 0; } } /* ====== Bosque: carrusel de vuelo entre islas (pseudo-3D) ====== */ .bosque-vuelo { position: relative; height: 300px; margin: 6px 16px; border-radius: 22px; overflow: hidden; background: var(--sky); } .bosque-pista { position: absolute; inset: 0; perspective: 900px; touch-action: pan-y; cursor: grab; } .bosque-pista.arrastrando { cursor: grabbing; } .isla-slot { position: absolute; top: 8%; left: 50%; bottom: 8%; width: 150px; margin-left: -75px; /* `filter` en la transición junto a transform/opacity: el desenfoque de profundidad tiene que acompañar el vuelo, no aparecer de golpe al final. */ transition: transform .12s linear, opacity .12s linear, filter .18s linear; will-change: transform, opacity, filter; } /* En pantallas grandes hay lugar para que el bosque sea el protagonista. */ @media (min-width: 1024px) { .bosque-vuelo { height: 380px; } .isla-slot { width: 190px; margin-left: -95px; } } .isla-slot.oculta { display: none; } .isla-slot-img, .isla-slot canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; } .bosque-vuelo .viewer-hint { z-index: 210; } /* Selector de especie bajo el visor */ .viewer-species { display: flex; gap: 3px; margin: 8px 16px 0; background: rgba(110, 125, 118, .14); border-radius: 14px; padding: 3px; } .seg-btn { flex: 1; border: none; background: transparent; font: 700 .8rem var(--font); color: var(--ink-soft); padding: 8px 2px; border-radius: 11px; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; white-space: nowrap; } .seg-btn.selected { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(35, 64, 50, .18); } /* En oscuro el `background: #fff` de arriba quedaba con `color: var(--ink)`, que en este tema es #e8eef7: blanco sobre blanco. La pestaña seleccionada (Caja / Consumo) era literalmente ilegible. */ body[data-theme="dark"] .viewer-species { background: rgba(255,255,255,.06); } body[data-theme="dark"] .seg-btn { color: var(--ink-soft); } body[data-theme="dark"] .seg-btn.selected { background: rgba(255,255,255,.17); color: #fff; box-shadow: none; } /* ====== Notas ====== */ .notas-header { display: flex; justify-content: space-between; align-items: center; } .btn-circular { width: 42px; height: 42px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #fff; font: 700 1.4rem/1 var(--font); box-shadow: 0 6px 16px rgba(242,109,61,.35), inset 0 1.5px 0 rgba(255,255,255,.35); cursor: pointer; transition: transform .15s; } .btn-circular:active { transform: scale(.92); } .notas-lista { padding: 10px 16px 24px; display: flex; flex-direction: column; gap: 8px; } .nota-card { background: linear-gradient(150deg, rgba(255,255,255,.55), rgba(255,255,255,.25)); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); border: 1px solid rgba(255,255,255,.65); border-radius: 16px; box-shadow: 0 4px 14px rgba(35,64,50,.08), inset 0 1px 0 rgba(255,255,255,.9); padding: 13px 16px; cursor: pointer; transition: transform .12s; } .nota-card:active { transform: scale(.98); } .nota-titulo { font-weight: 700; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nota-preview { font-size: .84rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; } .nota-fecha { color: var(--accent-deep); font-weight: 700; margin-right: 6px; } .nota-editor[hidden] { display: none; } .nota-editor { position: fixed; inset: 0; z-index: 40; background: var(--sky); display: flex; flex-direction: column; max-width: 520px; margin: 0 auto; padding: 0 18px calc(14px + env(safe-area-inset-bottom)); animation: viewIn .25s ease-out; } .editor-top { display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; position: sticky; top: 0; z-index: 1; margin: 0 -18px 6px; padding: max(14px, env(safe-area-inset-top)) 18px 8px; background: var(--sky); } /* Va sobre el cielo pelado, donde ningún naranja legible sigue pareciendo el naranja de la app (haría falta #7d2708). Se resuelve dándole superficie propia en vez de oscurecer el color hasta desnaturalizarlo. */ .editor-volver { border: none; background: var(--fin-surf); font: 700 1.05rem var(--font); color: var(--accent-txt); cursor: pointer; padding: 8px 14px 8px 11px; border-radius: 999px; } .editor-borrar { border: none; background: rgba(255,255,255,.55); border-radius: 12px; padding: 8px 14px; font: 700 .85rem var(--font); color: #c0392b; cursor: pointer; } .editor-titulo { border: none; background: transparent; font: 800 1.55rem var(--font); color: var(--ink); outline: none; padding: 8px 2px 4px; } .editor-titulo::placeholder, .editor-contenido::placeholder { color: rgba(76,107,88,.5); } .editor-contenido { flex: 1; border: none; background: transparent; resize: none; outline: none; font: 400 1.05rem/1.55 var(--font); color: var(--ink); padding: 4px 2px; user-select: text; -webkit-user-select: text; } .editor-titulo { user-select: text; -webkit-user-select: text; } .editor-guardado { text-align: center; font-size: .75rem; font-weight: 700; color: var(--ink-soft); height: 1.1em; } .forest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 10px 16px 24px; } .forest-cell { aspect-ratio: 1; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(233,251,226,.65)); border: 1px solid rgba(255,255,255,.8); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); display: flex; align-items: center; justify-content: center; animation: pop .4s cubic-bezier(.2,.9,.3,1.4) backwards; } .forest-cell svg { width: 82%; height: 82%; } .forest-cell.dead { filter: grayscale(.9) opacity(.55); } @keyframes pop { from { transform: scale(.5); opacity: 0; } } .forest-empty { text-align: center; padding: 48px 32px; color: var(--ink-soft); font-weight: 700; } .empty-emoji { font-size: 3rem; margin-bottom: 10px; } /* ====== Gastos ====== */ .gasto-hero { margin: 10px 16px; padding: 20px 18px 16px; text-align: center; background: linear-gradient(150deg, rgba(255,255,255,.55), rgba(255,255,255,.22)); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); border: 1px solid rgba(255,255,255,.65); border-radius: var(--radius-xl); box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.9); } .gasto-total { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.5px; } .gasto-total-sub { font-size: .8rem; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .5px; } .gasto-cats-resumen { display: flex; gap: 8px; justify-content: center; margin-top: 10px; flex-wrap: wrap; } .cat-mini { font-size: .78rem; font-weight: 800; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.7); border-radius: 12px; padding: 4px 10px; } .gasto-form { margin: 0 16px 8px; padding: 16px; background: linear-gradient(150deg, rgba(255,255,255,.5), rgba(255,255,255,.2)); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); border: 1px solid rgba(255,255,255,.65); border-radius: var(--radius-xl); box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.9); display: flex; flex-direction: column; gap: 10px; } .gasto-form input { font: 800 1.05rem var(--font); color: var(--ink); background: rgba(255,255,255,.6); border: 1.5px solid rgba(255,255,255,.8); border-radius: 14px; padding: 12px 14px; outline: none; } #gasto-monto { font-size: 1.5rem; text-align: center; } .gasto-form input::placeholder { color: #9ab0a2; } .gasto-foto-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .btn-foto { font: 800 .82rem var(--font); color: var(--ink-soft); background: rgba(255,255,255,.6); border: 1.5px solid rgba(255,255,255,.8); border-radius: 12px; padding: 9px 14px; cursor: pointer; } .btn-foto:active { transform: scale(.96); } .btn-foto:disabled { opacity: .6; } .gasto-foto-estado { font-size: .72rem; font-weight: 700; color: var(--ink-soft); } body[data-theme="dark"] .btn-foto { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.1); } /* Moneda: control segmentado al lado del monto, mismo lenguaje visual que el selector de especies del Bosque. Arranca siempre en pesos. */ .monto-row { display: flex; gap: 8px; align-items: stretch; } .monto-row #gasto-monto { flex: 1; min-width: 0; } .seg-moneda { display: flex; gap: 3px; flex-shrink: 0; background: rgba(110, 125, 118, .14); border-radius: 14px; padding: 3px; } .seg-op { border: none; background: transparent; font: 800 .95rem var(--font); color: var(--ink-soft); padding: 0 12px; border-radius: 11px; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; } .seg-op.selected { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(35, 64, 50, .18); } /* Total en dolares: segunda linea del hero, aparece solo si el mes tuvo alguno. No se suma a los pesos: sin cotizacion el numero no significaria nada. */ .gasto-total-usd { font-size: 1.1rem; font-weight: 800; color: var(--ink-soft); margin-top: 2px; } .gasto-monto.es-usd { color: #2f7d5c; } /* Los dolares nunca reemplazan al monto en pesos: lo acompañan, mas chicos */ .monto-usd { font-size: .78em; color: var(--ink-soft); font-weight: 700; } /* Equivalente en pesos al lado de un monto en dolares. Se toca para cambiar de cotizacion (MEP -> Blue -> Cripto). */ .cotiz-eq { font-size: .72em; font-weight: 700; color: var(--ink-soft); opacity: .85; cursor: pointer; white-space: nowrap; margin-left: 4px; } .cotiz-eq:active { opacity: .55; } .cotiz-casa { font-size: .82em; font-weight: 800; letter-spacing: .3px; border: 1px solid currentColor; border-radius: 999px; padding: 0 5px; opacity: .7; } /* Nota de dolares del resumen de tarjeta: cuanto sale cubrirlos comprando contra dejar que el banco los cobre al dolar tarjeta. */ .resumen-usd-nota { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(0,0,0,.12); font-size: .78rem; line-height: 1.45; color: var(--ink-soft); } .resumen-ahorro { color: #2f7d5c; } body[data-theme="dark"] .resumen-usd-nota { border-top-color: rgba(255,255,255,.14); } body[data-theme="dark"] .resumen-ahorro { color: #6ee7b7; } .cat-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .cat-chip { flex-shrink: 0; font-size: .85rem; padding: 8px 12px; } .gastos-lista { padding: 4px 16px 24px; } .gasto-dia { font-size: .75rem; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .8px; margin: 14px 6px 6px; } .gasto-item { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.88); /* .5 dejaba pasar el cielo y el monto en USD caía a 3,5:1 */ border: 1px solid rgba(255,255,255,.65); border-radius: 16px; padding: 10px 12px; margin-bottom: 6px; box-shadow: 0 4px 12px rgba(35,64,50,.06); } .gasto-emoji { font-size: 1.2rem; } .gasto-item-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .gasto-desc { font-weight: 800; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gasto-tarjeta-badge { font-size: .7rem; color: var(--ink-soft); font-weight: 600; } .gasto-tarjeta-row { border-top: 1px solid rgba(0,0,0,.06); padding-top: 8px; margin-top: -2px; } .gasto-monto { font-weight: 800; font-size: .95rem; } .gasto-borrar { border: none; background: rgba(0,0,0,.06); width: 24px; height: 24px; border-radius: 50%; font-size: .7rem; color: var(--ink-soft); cursor: pointer; } /* ====== Próximamente ====== */ .soon { min-height: 70dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 40px; gap: 10px; color: var(--ink-soft); font-weight: 700; } .soon-emoji { font-size: 3.4rem; } .soon h2 { color: var(--ink); font-weight: 800; } /* ====== Tab bar ====== */ .tabbar { position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); max-width: 520px; margin: 0 auto; display: flex; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.35)); backdrop-filter: blur(30px) saturate(1.7); -webkit-backdrop-filter: blur(30px) saturate(1.7); border-top: 1px solid rgba(255,255,255,.75); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); z-index: 10; } .tab { flex: 1; border: none; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: 800 .7rem var(--font); /* Por variable y no por color literal: así el tema oscuro lo redefine por herencia y no dependemos de que gane una cascada de dos selectores. El valor viejo (#9ab0a2) daba 1,4:1 contra el vidrio del tabbar — los nombres de las pestañas eran casi invisibles, sobre todo en la PC. */ color: var(--tab-off); /* `color` fuera de la transición a propósito: Chrome no re-evalúa una propiedad que resuelve var() si además tiene transition declarada, y al cambiar de tema las pestañas se quedaban con el color del tema anterior. El cambio de tema es instantáneo igual — no hay nada que animar ahí. */ transition: transform .15s, background .2s; } .tab:active { transform: scale(.9); } /* El activo lleva pastilla de fondo además del color: el naranja de marca sobre vidrio claro no llega a 4,5:1 por sí solo, y la pastilla marca la pestaña actual aunque no distingas el matiz. */ .tab.active { color: var(--tab-on); background: var(--tab-on-bg); border-radius: 14px; margin: 6px 4px; } .tab-icon { font-size: 1.45rem; } /* ====== Diálogo estilo iOS ====== */ .dialog-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(30, 40, 35, .3); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; animation: dialogIn .18s ease-out; } .dialog-overlay.saliendo { opacity: 0; transition: opacity .15s; } @keyframes dialogIn { from { opacity: 0; } } .dialog-card { width: min(300px, 82vw); background: rgba(252, 253, 252, .92); backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(20, 30, 25, .3); animation: dialogPop .22s cubic-bezier(.2,.9,.3,1.25); text-align: center; } @keyframes dialogPop { from { transform: scale(.9); opacity: 0; } } .dialog-titulo { font-weight: 700; font-size: 1.02rem; padding: 18px 20px 4px; } .dialog-mensaje { font-size: .86rem; color: var(--ink-soft); padding: 0 20px 4px; line-height: 1.4; } .dialog-botones { display: flex; margin-top: 14px; border-top: 0.5px solid rgba(60, 80, 70, .18); } .dialog-btn { flex: 1; border: none; background: none; font: 400 1rem var(--font); color: #2a6fd6; padding: 13px 0; cursor: pointer; } .dialog-btn + .dialog-btn { border-left: 0.5px solid rgba(60, 80, 70, .18); } .dialog-btn.principal { font-weight: 700; } .dialog-btn.destructivo { font-weight: 700; color: #e03e3e; } .dialog-btn:active { background: rgba(0,0,0,.05); } /* ====== Confetti ====== */ #confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; } .confetti { position: absolute; width: 12px; height: 12px; border-radius: 3px; animation: fall linear forwards; } @keyframes fall { to { transform: translateY(110vh) rotate(720deg); opacity: .6; } } /* ====== Desktop: marco tipo teléfono centrado ====== */ @media (min-width: 720px) { body { display: flex; align-items: center; justify-content: center; min-height: 100dvh; } #app { width: 430px; flex: 0 0 430px; min-height: auto; height: 860px; max-height: 92dvh; padding-bottom: 0; border-radius: 40px; overflow: hidden auto; box-shadow: 0 30px 80px rgba(50, 45, 90, .35); background: var(--sky); position: relative; scrollbar-width: none; } .tabbar { position: sticky; bottom: 0; max-width: none; height: var(--tabbar-h); padding-bottom: 0; margin: auto 0 0; /* pegada abajo; sin auto horizontal para que estire */ } } /* ====== Escritorio real: nav lateral + Panel a dos columnas ====== Arriba de 1024px el marco de teléfono centrado (bloque de arriba) ya no alcanza — hay pantalla de sobra al costado sin usar. Acá #app pasa de columna (contenido arriba, tabbar abajo) a fila (nav a la izquierda, contenido a la derecha con su propio scroll), reusando el mismo markup: `order` reubica el tabbar sin tocar el HTML. Foco/Bosque/Gastos/Cuotas/ Notas se mantienen en una sola columna, sólo con más aire; el Panel usa el ancho extra con una grilla de 2 columnas. */ @media (min-width: 1024px) { #app { width: min(94vw, 960px); max-width: none; flex: 0 0 min(94vw, 960px); height: 780px; max-height: 94dvh; flex-direction: row; align-items: stretch; overflow: hidden; } .tabbar { order: -1; position: static; flex-direction: column; justify-content: center; gap: 6px; width: 92px; height: 100%; border-top: none; border-right: 1px solid rgba(255,255,255,.5); box-shadow: inset -1px 0 0 rgba(255,255,255,.6); } .tab { flex: 0 0 auto; padding: 10px 0; } .view { flex: 1; min-width: 0; } .view.active { display: flex; flex-direction: column; overflow-y: auto; height: 100%; } #view-panel.active { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; } #view-panel .view-header, #view-panel .fin-base-wrap, #view-panel #fin-alertas, #view-panel #fin-hero, #view-panel #fin-kpis, #view-panel #fin-flujo, #view-panel #fin-proyeccion, #view-panel .fin-form-wrap, #view-panel .fin-pie { grid-column: 1 / -1; } } /* ====== Cuotas ====== */ .cuotas-proy-wrap { margin: 12px 0 8px; background: rgba(255,255,255,.88); border-radius: 16px; padding: 14px 16px 10px; } .cuotas-proy-title { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin-bottom: 10px; } .proy-row { display: grid; grid-template-columns: 90px 1fr 80px; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(0,0,0,.05); } .proy-row:last-child { border-bottom: none; } .proy-row--next .proy-mes { font-weight: 700; color: var(--ink); } .proy-row--next .proy-monto { font-weight: 700; color: var(--accent-txt); } .proy-mes { font-size: .8rem; color: var(--ink-soft); text-transform: capitalize; } .proy-barra-wrap { height: 5px; background: rgba(0,0,0,.08); border-radius: 3px; overflow: hidden; } .proy-barra { height: 100%; background: var(--grass); border-radius: 3px; transition: width .4s ease; } .proy-monto { font-size: .82rem; text-align: right; color: var(--ink-soft); font-variant-numeric: tabular-nums; } /* Próximo resumen por tarjeta */ .cuotas-resumen-wrap { margin: 0 0 8px; background: rgba(255,255,255,.88); border-radius: 16px; padding: 14px 16px 12px; } .resumen-fila { display: flex; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,.05); gap: 8px; } .resumen-fila:last-child { border-bottom: none; } .resumen-fila-emoji { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; } .resumen-fila-label { flex: 1; font-size: .82rem; color: var(--ink-soft); } .resumen-fila-monto { font-size: .85rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } .resumen-total { display: flex; justify-content: space-between; align-items: center; padding: 10px 0 0; margin-top: 6px; border-top: 1.5px solid rgba(0,0,0,.1); } .resumen-total-label { font-size: .78rem; font-weight: 800; color: var(--ink); text-transform: uppercase; letter-spacing: .06em; } .resumen-total-monto { font-size: 1rem; font-weight: 800; color: var(--accent-deep); font-variant-numeric: tabular-nums; } /* Resúmenes: 3 períodos reales (cuotas + compras) por tarjeta */ .periodo-fila { padding: 9px 0; border-bottom: 1px solid rgba(0,0,0,.05); } .periodo-fila:last-child { border-bottom: none; } .periodo-fila-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .periodo-fila-mes { font-size: .82rem; font-weight: 700; color: var(--ink); text-transform: capitalize; } .periodo-fila-monto { font-size: .88rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; } .periodo-fila-desglose { font-size: .7rem; color: var(--ink-soft); margin-top: 2px; line-height: 1.4; } .periodo-fila-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; } .periodo-fila-estado { font-size: .72rem; color: var(--ink-soft); font-weight: 600; } .periodo-fila-btns { display: flex; gap: 6px; } .periodo-fila-btns .fin-btn { flex: none; min-width: 0; padding: 6px 10px; } .periodo-fila--pagado .periodo-fila-estado { color: var(--fin-ok); font-weight: 700; } .periodo-fila--vencido .periodo-fila-mes, .periodo-fila--vencido .periodo-fila-estado { color: var(--fin-mal); } .periodo-fila--vencido .periodo-fila-estado { font-weight: 700; } /* Form agregar cuota */ .cuota-form-wrap { margin: 10px 0 6px; background: rgba(255,255,255,.88); border-radius: 16px; overflow: hidden; } .cuota-form-toggle { display: flex; align-items: center; gap: 8px; padding: 13px 16px; font-size: .92rem; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; user-select: none; } .cuota-form-toggle::-webkit-details-marker { display: none; } .cuota-form-inner { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 16px; } .cuota-form-inner input[type="text"], .cuota-form-inner input[type="number"], .cuota-fecha-input { width: 100%; padding: 11px 14px; border: 1.5px solid rgba(255,255,255,.8); border-radius: 12px; background: #fff; font: 500 1rem var(--font); color: var(--ink); outline: none; } .cuota-form-inner input:focus { border-color: var(--grass); } .cuota-num-row { display: flex; align-items: center; gap: 8px; } .cuota-num-label { font-size: .82rem; color: var(--ink-soft); font-weight: 600; width: 68px; flex-shrink: 0; } .cuota-num-input { width: 56px !important; text-align: center; flex-shrink: 0; } .cuota-num-sep { font-size: .9rem; color: var(--ink-soft); } .cuota-fecha-input { flex: 1; } /* Cards de cuotas activas */ .cuota-card { background: rgba(255,255,255,.7); border-radius: 14px; padding: 12px 14px 10px; margin-bottom: 8px; box-shadow: 0 1px 4px rgba(30,50,30,.06); } .cuota-card-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; } .cuota-emoji { font-size: 1.3rem; line-height: 1; padding-top: 2px; } .cuota-info { flex: 1; min-width: 0; } .cuota-desc { font-size: .95rem; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cuota-sub { font-size: .78rem; color: var(--ink-soft); margin-top: 2px; } .cuota-actions { display: flex; gap: 6px; flex-shrink: 0; } .cuota-ok, .cuota-del { width: 30px; height: 30px; border: none; border-radius: 8px; font-size: .85rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .12s; } .cuota-ok { background: #e9fbe2; color: #2e7d32; } .cuota-del { background: #fde8e8; color: #b71c1c; } .cuota-ok:active, .cuota-del:active { transform: scale(.9); } .cuota-progress-wrap { height: 4px; background: rgba(0,0,0,.08); border-radius: 2px; overflow: hidden; margin-bottom: 4px; } .cuota-progress-bar { height: 100%; background: var(--grass); border-radius: 2px; transition: width .4s ease; } .cuota-progress-label { font-size: .73rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .cuotas-empty-sub { font-size: .85rem; color: var(--ink-soft); text-align: center; padding: 8px 0; } /* ====== Theme Toggle Button ====== */ /* Abajo a la derecha, por encima de la tabbar: arriba chocaba con el navegador de meses del Panel ("‹ Agosto 2026 ›") y le tapaba la flecha. */ .theme-toggle { position: fixed; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px); right: 16px; z-index: 100; width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(255,255,255,.72); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); font-size: 1.15rem; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.18); transition: background .2s, transform .15s; line-height: 1; } /* En escritorio la tabbar es lateral, así que abajo no hay nada que esquivar. */ @media (min-width: 1024px) { .theme-toggle { bottom: 18px; right: 22px; } } .theme-toggle:active { transform: scale(.9); } /* ====== DARK MODE — Ejecutivo ====== */ body[data-theme="dark"] { --sky: linear-gradient(160deg, #0d1117 0%, #0f1825 55%, #131c30 100%); --ink: #e8eef7; --ink-soft: #9fb0c6; --card: rgba(255,255,255,.06); --grass: #34d399; --grass-deep: #10b981; --accent: #f59e0b; --accent-deep: #60a5fa; /* En oscuro el acento ya es un azul claro que contrasta solo: el token de texto existe igual para que las reglas no tengan que ramificar por tema. */ --accent-txt: #8cc0ff; --accent-fondo: linear-gradient(160deg, #1e40af, #1e3a8a); --tab-off: #8494a8; --tab-on: #8cc0ff; --tab-on-bg: rgba(96, 165, 250, .16); --shadow-soft: 0 8px 28px rgba(0,0,0,.55); } body[data-theme="dark"] .theme-toggle { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); } /* Panel Foco (Liquid Glass → Dark Glass) */ body[data-theme="dark"] .panel { background: linear-gradient(150deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.03) 55%, rgba(255,255,255,.05) 100%); border-color: rgba(255,255,255,.1); box-shadow: 0 24px 50px rgba(0,0,0,.5), inset 0 1.5px 0 rgba(255,255,255,.12); } /* Tabbar */ body[data-theme="dark"] .tabbar { background: rgba(10,14,22,.92) !important; border-top-color: rgba(255,255,255,.08); box-shadow: none; } /* El color de las pestañas ahora sale de --tab-off / --tab-on, que el bloque de variables de arriba ya redefine para el tema oscuro. */ /* Chips */ body[data-theme="dark"] .chip { background: rgba(255,255,255,.08); color: var(--ink-soft); border: 1px solid rgba(255,255,255,.08); } body[data-theme="dark"] .chip.selected { background: rgba(96,165,250,.2); color: #60a5fa; border-color: rgba(96,165,250,.4); } /* Botón primario */ body[data-theme="dark"] .btn-primary { background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%); box-shadow: 0 4px 14px rgba(59,130,246,.35); } /* Gastos — hero */ body[data-theme="dark"] .gasto-hero { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); } /* Gastos — form */ body[data-theme="dark"] .gasto-form { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); } body[data-theme="dark"] .gasto-form input { background: rgba(255,255,255,.07); color: var(--ink); border-color: rgba(255,255,255,.1); } body[data-theme="dark"] .gasto-form input::placeholder { color: #4a5568; } body[data-theme="dark"] .gasto-tarjeta-row { border-top-color: rgba(255,255,255,.07); } /* Gastos — lista */ body[data-theme="dark"] .gasto-dia { color: #4a5568; } body[data-theme="dark"] .gasto-item { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.07); box-shadow: none; } body[data-theme="dark"] .gasto-borrar { background: rgba(255,255,255,.08); color: var(--ink-soft); } /* Cuotas — bloques */ body[data-theme="dark"] .cuotas-proy-wrap, body[data-theme="dark"] .cuotas-resumen-wrap { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); } body[data-theme="dark"] .proy-barra { background: #3b82f6; } body[data-theme="dark"] .proy-barra-wrap { background: rgba(255,255,255,.07); } body[data-theme="dark"] .resumen-total { border-top-color: rgba(255,255,255,.1); } body[data-theme="dark"] .resumen-total-monto { color: #60a5fa; } body[data-theme="dark"] .periodo-fila { border-bottom-color: rgba(255,255,255,.07); } body[data-theme="dark"] .cuota-form-wrap { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); } body[data-theme="dark"] .cuota-form-toggle { color: var(--ink); } body[data-theme="dark"] .cuota-form-inner input { background: rgba(255,255,255,.07); color: var(--ink); border-color: rgba(255,255,255,.1); } body[data-theme="dark"] .cuota-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); box-shadow: none; } body[data-theme="dark"] .cuota-progress-wrap { background: rgba(255,255,255,.08); } body[data-theme="dark"] .cuota-progress-bar { background: #3b82f6; } body[data-theme="dark"] .cuota-ok { background: rgba(52,211,153,.15); color: #34d399; } body[data-theme="dark"] .cuota-del { background: rgba(248,113,113,.15); color: #f87171; } /* ====== Login (candado) ====== */ .auth-overlay { position: fixed; inset: 0; z-index: 100; background: var(--sky); display: flex; align-items: center; justify-content: center; padding: 24px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); } /* Sin esta regla, .auth-overlay { display:flex } le gana al atributo `hidden` y el overlay NO se oculta al entrar (queda el login tapando la app). Misma corrección que .nota-editor[hidden]. */ .auth-overlay[hidden] { display: none; } .auth-card { width: 100%; max-width: 360px; background: var(--card); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: var(--radius-xl); box-shadow: var(--shadow-soft); padding: 34px 26px 24px; text-align: center; animation: viewIn .4s cubic-bezier(.2,.9,.3,1.2); } .auth-logo { font-size: 46px; line-height: 1; } .auth-title { font-size: 30px; font-weight: 800; letter-spacing: .01em; margin-top: 6px; color: var(--ink); } .auth-sub { font-size: 14px; color: var(--ink-soft); margin: 8px 4px 22px; line-height: 1.4; } .auth-form { display: flex; flex-direction: column; gap: 12px; } .auth-form input { width: 100%; font-size: 16px; /* 16px evita el zoom automático de iOS al enfocar */ font-family: var(--font); color: var(--ink); background: rgba(255,255,255,.6); border: 1.5px solid rgba(35,64,50,.12); border-radius: var(--radius-lg); padding: 14px 16px; outline: none; transition: border-color .15s; } .auth-form input:focus { border-color: var(--accent); } .auth-form .btn-primary { margin-top: 4px; } .auth-msg { font-size: 13.5px; margin: 14px 4px 0; line-height: 1.4; color: var(--accent-deep); } .auth-msg.ok { color: var(--grass-deep); } .auth-switch { margin-top: 18px; background: none; border: none; font-family: var(--font); font-size: 14px; color: var(--ink-soft); text-decoration: underline; cursor: pointer; } .auth-overlay.busy .btn-primary { opacity: .6; pointer-events: none; } /* Botón salir en el header del Bosque */ .bosque-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .btn-logout { flex-shrink: 0; margin-top: 4px; background: var(--card); border: 1.5px solid rgba(35,64,50,.12); border-radius: 999px; font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--ink-soft); padding: 8px 16px; cursor: pointer; transition: transform .12s; } .btn-logout:active { transform: scale(.95); } body[data-theme="dark"] .auth-card { background: rgba(30,34,54,.82); } body[data-theme="dark"] .auth-form input { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.1); color: var(--ink); } body[data-theme="dark"] .btn-logout { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); } /* ============================================================ PANEL FINANCIERO Tono distinto al resto de la app a propósito: acá se leen números, no se planta un árbol. Superficie más opaca, reglas finas, versalitas, y SIEMPRE cifras tabulares para que las columnas se puedan comparar de un vistazo. ============================================================ */ :root { --fin-fijo: #3f6fb5; --fin-sub: #7c5cc4; --fin-cuota: #d0802f; --fin-tarjeta:#b04a63; --fin-var: #3f9b6d; --fin-ahorro: #12867c; --fin-ok: #14784f; --fin-mal: #b23c09; /* El dorado de cuotas en texto de 9px daba 2,8:1. Esta es la versión legible; el original se sigue usando para barras y fondos. */ --fin-cuota-txt: #a06224; /* El verde azulado en un badge de 9px sobre su propio tinte daba 3,4:1. */ --fin-ahorro-txt: #0f7068; /* .72 dejaba pasar el cielo y el texto chico perdía contraste según qué franja del gradiente quedara atrás. .88 mantiene el vidrio pero fija un piso de legibilidad que no depende de la hora del día. */ --fin-surf: rgba(255,255,255,.88); --fin-borde: rgba(27,51,39,.14); --fin-rule: rgba(27,51,39,.10); } body[data-theme="dark"] { --fin-fijo: #60a5fa; --fin-sub: #a78bfa; --fin-cuota: #fbbf24; --fin-tarjeta:#f472b6; --fin-var: #34d399; --fin-ahorro: #2dd4bf; --fin-ok: #34d399; --fin-mal: #fb923c; --fin-surf: rgba(255,255,255,.07); --fin-borde: rgba(255,255,255,.12); --fin-rule: rgba(255,255,255,.10); /* En oscuro el problema se da vuelta: el color tiene que ACLARARSE para despegarse del fondo, no oscurecerse. El dorado ya viene claro. */ --fin-cuota-txt: #fbbf24; --fin-ahorro-txt: #2dd4bf; } #view-panel { padding-bottom: 8px; } #view-panel .fin-card, #view-panel .fin-hero, #view-panel .fin-tiles, #view-panel .fin-form-wrap { font-variant-numeric: tabular-nums; } .fin-ok { color: var(--fin-ok); } .fin-mal { color: var(--fin-mal); } .fin-soft { color: var(--ink-soft); } /* ---- Header: navegación de meses ---- */ .panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .fin-mes-nav { display: flex; align-items: center; gap: 2px; flex-shrink: 0; margin-top: 4px; background: var(--fin-surf); border: 1px solid var(--fin-borde); border-radius: 999px; padding: 3px 4px; } .fin-nav-btn { width: 26px; height: 26px; border: none; background: none; cursor: pointer; font: 700 1.1rem var(--font); color: var(--ink-soft); border-radius: 50%; line-height: 1; } .fin-nav-btn:disabled { opacity: .25; cursor: default; } .fin-nav-btn:not(:disabled):active { background: rgba(0,0,0,.06); } .fin-mes-label { font-size: .78rem; font-weight: 800; color: var(--ink); text-transform: capitalize; min-width: 92px; text-align: center; } /* ---- Base de cálculo ---- */ .fin-base-wrap { margin-bottom: 4px; } .fin-base { margin: 6px 16px 0; } /* Sobre superficie de tarjeta y no suelto encima del cielo: ahí el fondo real depende de qué franja del gradiente le toque y bajaba a 3,5:1. */ .fin-base-ayuda { margin: 8px 16px 0; padding: 10px 13px; border-radius: 13px; background: var(--fin-surf); border: 1px solid var(--fin-borde); font-size: .74rem; line-height: 1.5; color: var(--ink-soft); } .fin-base-ayuda b { color: var(--ink); font-weight: 800; } /* ---- Superficie común de las tarjetas ---- */ .fin-hero, .fin-card, .fin-form-wrap { margin: 12px 16px; background: var(--fin-surf); border: 1px solid var(--fin-borde); border-radius: var(--radius-lg); box-shadow: 0 6px 18px rgba(35,64,50,.07); } body[data-theme="dark"] .fin-hero, body[data-theme="dark"] .fin-card, body[data-theme="dark"] .fin-form-wrap { box-shadow: none; } .fin-card { padding: 15px 16px 13px; } .fin-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .fin-card-head h2 { font-size: .82rem; font-weight: 800; color: var(--ink); text-transform: uppercase; letter-spacing: .07em; } .fin-card-sub { font-size: .72rem; color: var(--ink-soft); font-weight: 600; } .fin-link { background: none; border: none; cursor: pointer; padding: 0; font: 700 .74rem var(--font); color: var(--accent-txt); } /* ---- Hero: qué entra, qué sale y qué queda ---- */ .fin-hero { padding: 16px 18px 14px; } .fin-hero-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; } .fin-hero-lado { min-width: 0; } .fin-hero-lado--sale { text-align: right; } .fin-hero-key { display: flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .09em; } .fin-hero-lado--sale .fin-hero-key { justify-content: flex-end; } .fin-hero-val { font-size: 1.62rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin-top: 3px; overflow-wrap: anywhere; } .fin-hero-val--entra { color: var(--fin-ok); } .fin-hero-usd { font-size: .82rem; font-weight: 700; color: var(--ink-soft); margin-top: 1px; } .fin-alloc { display: flex; gap: 2px; height: 9px; margin: 13px 0 10px; border-radius: 5px; overflow: hidden; background: rgba(0,0,0,.05); } body[data-theme="dark"] .fin-alloc { background: rgba(255,255,255,.06); } .fin-alloc-seg { height: 100%; transition: width .45s cubic-bezier(.3,.9,.3,1); } .fin-alloc-libre { background: repeating-linear-gradient(135deg, var(--fin-rule) 0 4px, transparent 4px 8px); } .fin-hero-linea { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .78rem; font-weight: 600; color: var(--ink-soft); padding-bottom: 10px; border-bottom: 1px solid var(--fin-rule); } .fin-hero-linea b { font-weight: 800; } .fin-cta { display: block; text-align: left; margin-top: 4px; background: none; border: none; cursor: pointer; padding: 0; font: 800 .95rem var(--font); color: var(--accent-deep); line-height: 1.25; } .fin-desglose { padding-top: 4px; } .fin-desg { display: grid; grid-template-columns: 9px 1fr auto auto; align-items: center; gap: 8px; padding: 5px 0; } .fin-desg-punto { width: 9px; height: 9px; border-radius: 3px; } .fin-desg-label { font-size: .82rem; color: var(--ink); font-weight: 600; } .fin-desg-pct { font-size: .74rem; color: var(--ink-soft); font-weight: 700; min-width: 34px; text-align: right; } .fin-desg-monto { font-size: .84rem; font-weight: 700; min-width: 92px; text-align: right; } .fin-usd { font-size: .78em; font-weight: 700; color: var(--ink-soft); white-space: nowrap; } /* "$ 9.381 + US$ 22,87" no dice cuánto es en total. Esta línea lo resuelve: la suma a la cotización elegida, que es la pregunta real. */ .fin-total-eq { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 0 2px; border-top: 1px dashed var(--fin-rule); margin-top: 4px; } .fin-total-eq-label { font-size: .72rem; font-weight: 700; color: var(--ink-soft); } .fin-total-eq-monto { font-size: .95rem; font-weight: 800; color: var(--ink); cursor: pointer; white-space: nowrap; border-bottom: 1px dotted var(--ink-soft); } .fin-hero-suma { font-size: .82rem; font-weight: 800; color: var(--ink); margin-top: 3px; } .fin-vacio-inline { font-size: .8rem; color: var(--ink-soft); padding: 6px 0; } /* En base Consumo las cuotas no suman al total, pero tampoco pueden no estar: la pregunta "¿y las cuotas?" es lo primero que se hace cualquiera. Van en su propia línea, fuera del total y visualmente separadas por la línea punteada. */ .fin-hero-aparte { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 8px; margin-top: 7px; padding-top: 8px; border-top: 1px dashed var(--fin-borde); } .fin-hero-aparte-punto { width: 9px; height: 9px; border-radius: 3px; opacity: .55; } .fin-hero-aparte-label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); } .fin-hero-aparte-monto { font-size: .84rem; font-weight: 700; color: var(--ink-soft); min-width: 92px; text-align: right; } /* Por qué los fijos no tienen línea propia en base Caja. Sin esta aclaración, declarar un fijo que paga la tarjeta lo hacía "desaparecer" del hero. */ .fin-hero-aclara { margin-top: 8px; padding-top: 9px; border-top: 1px solid var(--fin-rule); font-size: .74rem; line-height: 1.5; color: var(--ink-soft); } .fin-hero-aclara b { color: var(--ink); font-weight: 800; } /* ---- Tiles ---- */ .fin-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 16px; } .fin-tile { position: relative; overflow: hidden; background: var(--fin-surf); border: 1px solid var(--fin-borde); border-radius: 16px; padding: 11px 12px 0; min-height: 104px; display: flex; flex-direction: column; } .fin-tile-borde { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; opacity: .85; } .fin-tile-label { font-size: .66rem; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; } .fin-tile-val { font-size: 1.32rem; font-weight: 800; letter-spacing: -.01em; margin-top: 2px; } .fin-tile-sub { font-size: .68rem; color: var(--ink-soft); font-weight: 600; margin-top: 1px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .fin-tile-nota { font-weight: 600; } .fin-tile-spark { margin: auto -12px -1px; height: 30px; } .spark { display: block; width: 100%; height: 30px; } .spark-vacio { display: block; height: 30px; } /* ---- Chips de variación ---- */ .fin-delta { display: inline-flex; align-items: center; gap: 2px; font-size: .68rem; font-weight: 800; letter-spacing: .01em; padding: 2px 6px; border-radius: 999px; white-space: nowrap; } .fin-delta--chico { font-size: .62rem; padding: 1px 5px; } .fin-delta--malo { color: var(--fin-mal); background: color-mix(in srgb, var(--fin-mal) 12%, transparent); } .fin-delta--bien { color: var(--fin-ok); background: color-mix(in srgb, var(--fin-ok) 12%, transparent); } .fin-delta--igual { color: var(--ink-soft); background: var(--fin-rule); } .fin-delta--nuevo { color: var(--ink-soft); background: var(--fin-rule); font-weight: 700; } /* ---- Filas de conceptos ---- */ .fin-fila { border-bottom: 1px solid var(--fin-rule); } .fin-fila:last-of-type { border-bottom: none; } .fin-fila-top { width: 100%; display: grid; grid-template-columns: 1fr 42px auto auto; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; padding: 9px 0 2px; text-align: left; font-family: var(--font); color: var(--ink); } .fin-fila-nombre { font-size: .88rem; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 5px; } .fin-fila-spark { height: 22px; opacity: .9; } .fin-fila-spark .spark { height: 22px; } .fin-fila-monto { font-size: .88rem; font-weight: 800; text-align: right; white-space: nowrap; } .fin-fila-delta { min-width: 42px; text-align: right; } .fin-fila-meta { display: flex; gap: 10px; padding: 0 0 9px; font-size: .68rem; color: var(--ink-soft); font-weight: 600; } .fin-fila-meta:empty { padding: 0 0 6px; } .fin-fila--abierta { background: var(--fin-rule); border-radius: 12px; padding: 0 10px; margin: 0 -10px; } .fin-badge { font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 1px 5px; border-radius: 5px; background: var(--fin-rule); color: var(--ink-soft); } .fin-badge--usd { color: var(--fin-ahorro-txt); background: color-mix(in srgb, var(--fin-ahorro) 14%, transparent); } .fin-badge--pausa { color: var(--fin-cuota-txt); background: color-mix(in srgb, var(--fin-cuota) 14%, transparent); } .fin-fila-detalle { padding: 2px 0 12px; } .fin-hist { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: 10px; } .fin-hist-col { text-align: center; padding: 6px 2px; border-radius: 8px; background: rgba(0,0,0,.03); } body[data-theme="dark"] .fin-hist-col { background: rgba(255,255,255,.04); } .fin-hist-col--sel { background: color-mix(in srgb, var(--fin-fijo) 16%, transparent); } .fin-hist-monto { font-size: .68rem; font-weight: 800; color: var(--ink); } .fin-hist-mes { font-size: .64rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; } .fin-hitos { margin-bottom: 10px; } .fin-hitos-label { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); margin-bottom: 5px; } .fin-hito { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: rgba(0,0,0,.03); margin-bottom: 4px; } body[data-theme="dark"] .fin-hito { background: rgba(255,255,255,.04); } .fin-hito-mes { font-size: .68rem; color: var(--ink-soft); font-weight: 600; flex: 1; } .fin-hito-monto { font-size: .74rem; font-weight: 800; color: var(--ink); } .fin-medio-banco { margin-bottom: 10px; } .fin-medio-banco-nombre { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); margin-bottom: 5px; } .fin-medio-fila { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--fin-rule); } .fin-medio-fila:last-child { border-bottom: none; } .fin-medio-emoji { font-size: 1rem; } .fin-medio-nombre { flex: 1; font-size: .82rem; font-weight: 700; color: var(--ink); } .fin-medio-dia { display: flex; align-items: center; gap: 4px; font-size: .64rem; color: var(--ink-soft); font-weight: 600; } .fin-medio-dia input { width: 34px; font: 700 .74rem var(--font); text-align: center; color: var(--ink); border: 1px solid var(--fin-borde); border-radius: 6px; padding: 3px 2px; background: rgba(255,255,255,.6); } body[data-theme="dark"] .fin-medio-dia input { background: rgba(255,255,255,.06); } .fin-medio-del { border: none; background: none; color: var(--fin-mal); font-size: .9rem; cursor: pointer; padding: 2px 4px; opacity: .7; } .fin-medio-del:active { opacity: 1; } .fin-acciones, .fin-edit { display: flex; gap: 6px; flex-wrap: wrap; } .fin-btn { flex: 1; min-width: 92px; font: 700 .74rem var(--font); color: var(--ink-soft); background: rgba(255,255,255,.6); border: 1px solid var(--fin-borde); border-radius: 10px; padding: 8px 6px; cursor: pointer; } body[data-theme="dark"] .fin-btn { background: rgba(255,255,255,.06); } .fin-btn:active { transform: scale(.97); } .fin-btn--del { color: var(--fin-mal); } .fin-btn--ok { color: #fff; background: var(--fin-fijo); border-color: transparent; } .fin-edit-input { flex: 2; min-width: 110px; padding: 8px 12px; border-radius: 10px; border: 1.5px solid var(--fin-fijo); background: #fff; color: #234032; font: 700 .95rem var(--font); outline: none; } body[data-theme="dark"] .fin-edit-input { background: rgba(255,255,255,.1); color: var(--ink); } /* ---- Totales y notas ---- */ .fin-total { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1.5px solid var(--fin-borde); } .fin-total-label { font-size: .72rem; font-weight: 800; color: var(--ink); text-transform: uppercase; letter-spacing: .07em; } .fin-total-monto { font-size: 1.02rem; font-weight: 800; } .fin-nota { margin-top: 9px; font-size: .74rem; line-height: 1.5; color: var(--ink-soft); } .fin-nota b { color: var(--ink); font-weight: 800; } .fin-nota b.fin-ok { color: var(--fin-ok); } .fin-nota b.fin-mal { color: var(--fin-mal); } .fin-vacio { padding: 14px 2px 8px; } .fin-vacio p { font-size: .86rem; font-weight: 700; color: var(--ink); } .fin-vacio-sub { font-size: .76rem !important; font-weight: 500 !important; color: var(--ink-soft) !important; margin-top: 4px; line-height: 1.5; } /* ---- Duo (dos cifras grandes lado a lado) ---- */ .fin-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; } .fin-duo-key { font-size: .66rem; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; } .fin-duo-val { font-size: 1.12rem; font-weight: 800; line-height: 1.25; } .fin-duo-nota { display: block; font-size: .68rem; font-weight: 600; color: var(--ink-soft); } /* ---- Barras apiladas (flujo) ---- */ .fin-barras { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; height: 148px; } .fin-col { display: flex; flex-direction: column; min-width: 0; } .fin-col-plot { position: relative; flex: 1; display: flex; align-items: flex-end; } .fin-col-stack { width: 100%; display: flex; flex-direction: column-reverse; border-radius: 5px 5px 2px 2px; overflow: hidden; min-height: 2px; transition: height .45s cubic-bezier(.3,.9,.3,1); } .fin-seg { width: 100%; } .fin-marca-ing { position: absolute; left: -1px; right: -1px; height: 0; border-top: 2px dashed var(--ink-soft); opacity: .55; } .fin-col-mes { font-size: .62rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; text-align: center; margin-top: 5px; } .fin-col-monto { font-size: .64rem; color: var(--ink-soft); text-align: center; } .fin-col--hoy .fin-col-mes { color: var(--ink); } .fin-leyenda { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; } .fin-leyenda-item { display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 600; color: var(--ink-soft); } .fin-leyenda-item i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; } .fin-leyenda-linea { border-top: 2px dashed var(--ink-soft); height: 0 !important; width: 12px !important; border-radius: 0 !important; opacity: .6; } /* ---- Mini barras (deuda) ---- */ .fin-mini-barras { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; height: 78px; } .fin-mini-col { display: flex; flex-direction: column; min-width: 0; } .fin-mini-plot { flex: 1; display: flex; align-items: flex-end; } .fin-mini-bar { width: 100%; background: var(--fin-cuota); opacity: .55; border-radius: 4px 4px 2px 2px; min-height: 2px; transition: height .45s cubic-bezier(.3,.9,.3,1); } .fin-mini-bar--pico { opacity: 1; } /* Las columnas de deuda ahora son botones: tocás un mes y abajo se abre el detalle de qué compras lo componen. Antes el monto vivía sólo en el `title` del hover, que en el celular no existe. */ .fin-mini-col { border: none; background: none; cursor: pointer; padding: 2px 1px 3px; border-radius: 9px; font: inherit; transition: background .15s; } .fin-mini-col:active { transform: scale(.95); } .fin-mini-col--sel { background: var(--fin-rule); } .fin-mini-col--sel .fin-mini-mes { color: var(--ink); font-weight: 800; } .fin-mini-monto { font-size: .58rem; color: var(--ink-soft); font-weight: 700; margin-top: 1px; } .fin-deuda-mes { margin-top: 10px; padding: 11px 13px; border-radius: 13px; background: var(--fin-rule); } .fin-deuda-mes-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 7px; margin-bottom: 5px; border-bottom: 1px solid var(--fin-borde); font-size: .8rem; color: var(--ink-soft); font-weight: 600; } .fin-deuda-mes-head b { color: var(--ink); font-weight: 800; text-transform: capitalize; } .fin-deuda-mes-total { display: flex; flex-direction: column; align-items: flex-end; font-size: .95rem; font-weight: 800; color: var(--ink); white-space: nowrap; } .fin-deuda-mes-pct { font-size: .66rem; font-weight: 700; color: var(--ink-soft); } .fin-deuda-mes-nota { margin: -2px 0 6px; font-size: .72rem; color: var(--ink-soft); line-height: 1.35; } .fin-deuda-mes-nota b { color: var(--ink); font-weight: 800; } .fin-deuda-item { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 4px 0; } .fin-deuda-item-desc { display: flex; flex-direction: column; min-width: 0; font-size: .8rem; font-weight: 600; color: var(--ink); } .fin-deuda-item-cuota { font-size: .66rem; font-weight: 700; color: var(--ink-soft); } .fin-deuda-item-monto { font-size: .82rem; font-weight: 800; white-space: nowrap; } .fin-mini-mes { font-size: .58rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; text-align: center; margin-top: 4px; } /* ---- Proyección ---- */ .fin-proy-fila { display: grid; grid-template-columns: 78px 1fr 62px 62px; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--fin-rule); } .fin-proy-fila:last-child { border-bottom: none; } .fin-proy-mes { font-size: .74rem; color: var(--ink-soft); text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fin-proy-barra { height: 6px; background: var(--fin-rule); border-radius: 3px; overflow: hidden; } .fin-proy-barra i { display: block; height: 100%; background: var(--fin-fijo); border-radius: 3px; opacity: .75; } .fin-proy-monto { font-size: .76rem; font-weight: 700; text-align: right; } .fin-proy-margen { font-size: .74rem; font-weight: 800; text-align: right; } /* ---- Meta de ahorro ---- */ .fin-meta { margin-bottom: 12px; } .fin-meta-head { display: flex; justify-content: space-between; gap: 8px; font-size: .74rem; color: var(--ink-soft); font-weight: 600; margin-bottom: 6px; } .fin-meta-head b { color: var(--ink); font-weight: 800; } .fin-meta-barra { height: 7px; background: var(--fin-rule); border-radius: 4px; overflow: hidden; } .fin-meta-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--fin-ahorro), var(--fin-var)); transition: width .45s cubic-bezier(.3,.9,.3,1); } /* ---- Te deben (gastos por cuenta de otro) ---- */ .fin-deudores { margin-top: 4px; } .fin-deudor { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 0 3px; } .fin-deudor-quien { display: flex; flex-direction: column; font-size: .86rem; font-weight: 800; color: var(--ink); } .fin-deudor-desde { font-size: .68rem; font-weight: 600; color: var(--ink-soft); } .fin-deudor-monto { font-size: .9rem; font-weight: 800; color: var(--fin-mal); white-space: nowrap; } .fin-deudor-item { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0 3px 10px; font-size: .74rem; color: var(--ink-soft); font-weight: 600; border-left: 2px solid var(--fin-rule); margin-left: 2px; } /* Un gasto ajeno se ve distinto en la lista: el monto tachado deja claro de un vistazo que no cuenta en tu total. */ .gasto-item--ajeno { opacity: 1; } .gasto-monto--ajeno { text-decoration: line-through; color: var(--ink-soft); } .gasto-ajeno-badge { display: inline-block; margin-top: 2px; font-size: .64rem; font-weight: 800; padding: 1px 6px; border-radius: 999px; } .gasto-ajeno-badge--pendiente { background: color-mix(in srgb, var(--fin-mal) 16%, transparent); color: var(--fin-mal); } .gasto-ajeno-badge--cobrado { background: color-mix(in srgb, var(--fin-ok) 16%, transparent); color: var(--fin-ok); } .gasto-ajeno { border: none; background: none; cursor: pointer; font-size: .95rem; padding: 4px 5px; border-radius: 8px; opacity: .45; transition: opacity .15s; } .gasto-ajeno:hover, .gasto-item--ajeno .gasto-ajeno { opacity: 1; } /* Campo de texto de los diálogos (pedirTexto) */ .dialog-input { width: 100%; margin: 12px 0 4px; padding: 11px 13px; font: 600 .95rem var(--font); color: var(--ink); background: var(--fin-rule); border: 1px solid var(--fin-borde); border-radius: 12px; outline: none; } .dialog-input:focus { border-color: var(--accent); } /* ---- Mercado ---- */ .mk-activo { padding: 11px 0; border-bottom: 1px solid var(--fin-rule); } .mk-activo:last-of-type { border-bottom: none; } .mk-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .mk-id { display: flex; flex-direction: column; min-width: 0; } .mk-nombre { font-size: .92rem; font-weight: 800; color: var(--ink); } .mk-ticker { font-size: .68rem; font-weight: 600; color: var(--ink-soft); } .mk-precio { display: flex; flex-direction: column; align-items: flex-end; font-size: 1.02rem; font-weight: 800; color: var(--ink); white-space: nowrap; } .mk-dia { font-size: .72rem; font-weight: 800; } .mk-metricas { display: flex; gap: 6px 18px; flex-wrap: wrap; margin-top: 9px; } .mk-metrica { display: flex; flex-direction: column; } .mk-metrica i { font-style: normal; font-size: .62rem; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; } .mk-metrica b { font-size: .85rem; font-weight: 800; color: var(--ink); } /* Rango histórico: p25 — mediana — p75, con el cero marcado. Se muestra el rango entero y no sólo la mediana a propósito: la dispersión ES el dato. */ .mk-hist { margin-top: 11px; padding: 10px 12px; border-radius: 12px; background: var(--fin-rule); } .mk-hist-titulo { font-size: .64rem; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; } .mk-hist-barra { position: relative; height: 8px; margin: 0 2px 5px; } .mk-hist-rango { position: absolute; top: 2px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--fin-fijo) 45%, transparent); } .mk-hist-cero { position: absolute; top: -2px; width: 1px; height: 12px; background: var(--ink-soft); opacity: .6; } .mk-hist-mediana { position: absolute; top: -3px; width: 3px; height: 14px; border-radius: 2px; background: var(--fin-fijo); transform: translateX(-1px); } .mk-hist-nums { display: flex; justify-content: space-between; align-items: baseline; font-size: .68rem; color: var(--ink-soft); font-weight: 700; } .mk-hist-nums b { font-size: .78rem; color: var(--ink); font-weight: 800; } .mk-hist-nota { font-size: .7rem; line-height: 1.5; color: var(--ink-soft); margin-top: 7px; } .mk-hist-nota b { color: var(--ink); font-weight: 800; } .mk-hist-nota--pocos { margin-top: 10px; font-style: italic; } .mk-tuyo { margin-top: 9px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--fin-ok) 10%, transparent); font-size: .76rem; line-height: 1.45; color: var(--ink-soft); } .mk-tuyo b { color: var(--ink); font-weight: 800; } .mk-aviso { margin-top: 7px; font-size: .68rem; line-height: 1.45; color: var(--ink-soft); padding-left: 8px; border-left: 2px solid var(--fin-cuota); } .mk-pie { margin-top: 12px; } /* ---- Movimientos de ahorro ---- */ .fin-mov { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--fin-rule); } .fin-mov:last-child { border-bottom: none; } .fin-mov-icon { font-size: .9rem; color: var(--ink-soft); text-align: center; } .fin-mov-desc { font-size: .82rem; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fin-mov-fecha { font-size: .68rem; color: var(--ink-soft); font-weight: 600; margin-left: 6px; } .fin-mov-monto { font-size: .84rem; font-weight: 800; } /* ---- Formularios del panel ---- */ .fin-form-wrap { overflow: hidden; padding: 0; } .fin-form-wrap .cuota-form-inner { padding-top: 4px; } .fin-form-wrap .chips { flex-wrap: wrap; } .fin-form-wrap .chip { font-size: .82rem; padding: 8px 4px; } /* Sin opacity: apagar un texto ya secundario lo saca de contraste AA. Si algo tiene que pesar menos, se baja con el color, no con la transparencia. Y va sobre superficie de tarjeta: suelto encima del cielo daba 3,5:1 porque el fondo real depende de qué franja del gradiente le toque. */ .fin-pie { margin: 6px 16px 18px; padding: 11px 14px; border-radius: 14px; background: var(--fin-surf); border: 1px solid var(--fin-borde); font-size: .72rem; line-height: 1.55; color: var(--ink-soft); } /* Aviso de categoría puesta sola al cargar un gasto */ .gasto-cat-hint { font-size: .74rem; font-weight: 600; color: var(--ink-soft); margin: -2px 2px 0; animation: viewIn .25s ease-out; } .gasto-cat-hint b { color: var(--ink); font-weight: 800; } /* ---- Alertas ---- */ .fin-alerta-cuenta { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; margin-left: 4px; background: var(--fin-mal); color: #fff; font-size: .68rem; font-weight: 800; text-align: center; letter-spacing: 0; } .fin-alerta { display: grid; grid-template-columns: 26px 1fr; gap: 9px; padding: 11px 0; border-bottom: 1px solid var(--fin-rule); } .fin-alerta:last-of-type { border-bottom: none; } .fin-alerta-icono { font-size: 1.15rem; line-height: 1.2; text-align: center; } .fin-alerta-cuerpo { min-width: 0; } .fin-alerta-titulo { font-size: .88rem; font-weight: 800; color: var(--ink); } /* El cuerpo de la alerta es EL texto que se lee del panel: sube a .82rem y line-height 1.55, que es donde deja de sentirse letra chica en el celular. */ .fin-alerta-detalle { font-size: .82rem; line-height: 1.55; color: var(--ink-soft); margin-top: 3px; } .fin-alerta-detalle b { color: var(--ink); font-weight: 800; } .fin-alerta-acciones { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; } .fin-alerta-acciones .fin-btn { flex: 0 1 auto; min-width: 0; padding: 7px 12px; } /* Un filito de color a la izquierda marca la urgencia sin gritar */ .fin-alerta--alta { box-shadow: inset 3px 0 0 -1px var(--fin-mal); padding-left: 8px; } .fin-alerta--media { box-shadow: inset 3px 0 0 -1px var(--fin-cuota); padding-left: 8px; } .fin-alerta--info { box-shadow: inset 3px 0 0 -1px var(--fin-fijo); padding-left: 8px; } .fin-alerta-limpio { font-size: .8rem; line-height: 1.5; color: var(--ink-soft); padding: 4px 0 2px; } .fin-ver-mas { width: 100%; margin-top: 10px; padding: 8px; background: none; border: 1px dashed var(--fin-borde); border-radius: 10px; font: 700 .74rem var(--font); color: var(--ink-soft); cursor: pointer; } /* Globo de alertas sobre la pestaña Panel */ .tab { position: relative; } .tab-badge { position: absolute; top: 6px; left: 50%; margin-left: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--fin-mal); color: #fff; font-size: .6rem; font-weight: 800; line-height: 16px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.25); } /* ---- 6 tabs entran justas en pantallas chicas ---- */ .tabbar .tab { font-size: .64rem; gap: 1px; } .tabbar .tab-icon { font-size: 1.3rem; } @media (max-width: 360px) { .tabbar .tab { font-size: .58rem; } .tabbar .tab-icon { font-size: 1.15rem; } } /* ==================================================================== AJUSTES — bottom sheet Sheet y no vista propia: seis pestañas ya son las que entran en la tabbar de un celular, y esto se abre dos veces por mes. ==================================================================== */ .aj-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(12, 18, 26, 0); display: flex; align-items: flex-end; justify-content: center; transition: background .22s ease; backdrop-filter: blur(0px); } .aj-overlay.abierto { background: rgba(12, 18, 26, .5); backdrop-filter: blur(3px); } .aj-sheet { width: 100%; max-width: 520px; max-height: 88dvh; overflow-y: auto; padding: 10px 20px calc(24px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; background: var(--fin-surf); backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6); border-top: 1px solid var(--fin-borde); box-shadow: 0 -14px 44px rgba(0,0,0,.28); transform: translateY(100%); transition: transform .26s cubic-bezier(.2,.9,.3,1.05); } .aj-overlay.abierto .aj-sheet { transform: none; } /* En escritorio se centra como un diálogo: pegado abajo se ve raro con la tabbar lateral y 1500px de ancho. */ @media (min-width: 1024px) { .aj-overlay { align-items: center; } .aj-sheet { border-radius: 24px; max-width: 460px; max-height: 84dvh; } .aj-grip { display: none; } } .aj-grip { width: 38px; height: 4px; border-radius: 2px; background: var(--ink-soft); opacity: .3; margin: 0 auto 10px; } .aj-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .aj-head h2 { font-size: 1.3rem; font-weight: 800; color: var(--ink); } .aj-cerrar { border: none; background: var(--fin-rule); cursor: pointer; width: 32px; height: 32px; border-radius: 50%; font-size: .9rem; color: var(--ink-soft); } .aj-cerrar:active { transform: scale(.9); } .aj-seccion { padding: 14px 0; border-bottom: 1px solid var(--fin-rule); } .aj-seccion:last-of-type { border-bottom: none; } .aj-label { font-size: .68rem; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; } .aj-seg { margin: 0; } .aj-ayuda { font-size: .74rem; line-height: 1.5; color: var(--ink-soft); margin-top: 8px; } .aj-ayuda b { color: var(--ink); font-weight: 800; } .aj-chips { display: flex; gap: 6px; flex-wrap: wrap; } .aj-chips .chip { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; } .aj-chip-valor { font-size: .68rem; font-weight: 700; opacity: .75; } .aj-meta { display: flex; align-items: center; gap: 14px; } .aj-range { flex: 1; accent-color: var(--accent); height: 26px; } .aj-meta-valor { font-size: 1.15rem; font-weight: 800; color: var(--ink); min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; } .aj-datos { display: flex; flex-direction: column; gap: 2px; } .aj-dato { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 5px 0; font-size: .82rem; color: var(--ink-soft); font-weight: 600; } .aj-dato b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; } .aj-btn { width: 100%; padding: 13px; border-radius: 14px; border: 1px solid var(--fin-borde); background: var(--fin-rule); font: 800 .9rem var(--font); color: var(--ink); cursor: pointer; } .aj-btn:active { transform: scale(.98); } /* Color propio y no `--fin-mal`: sobre el tinte del 10% ese naranja daba 4,36:1 y no llega a AA (0.9rem bold todavía cuenta como texto normal). */ .aj-btn--peligro { color: #8f3007; background: color-mix(in srgb, var(--fin-mal) 10%, transparent); border-color: color-mix(in srgb, var(--fin-mal) 30%, transparent); } body[data-theme="dark"] .aj-btn--peligro { color: #ffa76b; } .aj-pie { text-align: center; font-size: .68rem; color: var(--ink-soft); padding-top: 14px; } /* ==================================================================== INDICADORES — el cuadro de ratios ==================================================================== */ .fin-indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; } .fin-ind { position: relative; padding: 10px 12px 10px 14px; border-radius: 13px; background: var(--fin-rule); border: 1px solid transparent; } /* El semáforo va en una barrita lateral y NO sólo en el color del número: con daltonismo rojo-verde el número solo no comunica nada. */ .fin-ind::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ink-soft); } .fin-ind--bien::before { background: var(--fin-ok); } .fin-ind--atencion::before { background: var(--fin-cuota); } .fin-ind--mal::before { background: var(--fin-mal); } .fin-ind--bien { background: color-mix(in srgb, var(--fin-ok) 9%, transparent); } .fin-ind--atencion { background: color-mix(in srgb, var(--fin-cuota) 11%, transparent); } .fin-ind--mal { background: color-mix(in srgb, var(--fin-mal) 11%, transparent); } .fin-ind-label { font-size: .64rem; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .07em; } .fin-ind-valor { font-size: 1.28rem; font-weight: 800; color: var(--ink); letter-spacing: -.01em; margin-top: 1px; line-height: 1.2; } .fin-ind--mal .fin-ind-valor { color: var(--fin-mal); } .fin-ind--bien .fin-ind-valor { color: var(--fin-ok); } .fin-ind-detalle { font-size: .7rem; color: var(--ink-soft); font-weight: 600; line-height: 1.4; margin-top: 2px; } .fin-ind-ayuda { font-size: .68rem; color: var(--ink-soft); line-height: 1.5; margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--fin-rule); } /* ==================================================================== RITMO — cuánto te queda por día ==================================================================== */ .fin-ritmo { margin: 12px 16px; padding: 15px 16px 13px; border-radius: var(--radius-lg); background: var(--fin-surf); border: 1px solid var(--fin-borde); box-shadow: 0 6px 18px rgba(35,64,50,.07); } body[data-theme="dark"] .fin-ritmo { box-shadow: none; } .fin-ritmo--rojo { border-color: color-mix(in srgb, var(--fin-mal) 45%, transparent); } .fin-ritmo-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .fin-ritmo-key { font-size: .66rem; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .09em; } .fin-ritmo-val { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin-top: 2px; } .fin-ritmo--rojo .fin-ritmo-val { color: var(--fin-mal); } .fin-ritmo-meta { text-align: right; font-size: .72rem; font-weight: 700; color: var(--ink-soft); line-height: 1.5; } .fin-ritmo-barras { margin: 12px 0 9px; display: grid; gap: 6px; } .fin-ritmo-fila { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 9px; } .fin-ritmo-etq { font-size: .68rem; font-weight: 800; color: var(--ink-soft); } .fin-ritmo-track { height: 9px; border-radius: 5px; background: var(--fin-rule); overflow: hidden; } .fin-ritmo-bar { display: block; height: 100%; border-radius: 5px; transition: width .45s cubic-bezier(.3,.9,.3,1); } .fin-ritmo-bar--puede { background: var(--fin-ok); } .fin-ritmo-bar--ok { background: var(--fin-var); } .fin-ritmo-bar--alto { background: var(--fin-mal); } .fin-ritmo-num { font-size: .74rem; font-weight: 800; min-width: 54px; text-align: right; } .fin-ritmo-nota { font-size: .74rem; line-height: 1.5; color: var(--ink-soft); } .fin-ritmo-nota b { color: var(--ink); font-weight: 800; } /* ==================================================================== SUBTOTAL "lo paga el resumen" — por qué un fijo no suma en Caja ==================================================================== */ .fin-subtotal { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--fin-cuota) 10%, transparent); font-size: .74rem; color: var(--ink-soft); line-height: 1.45; } .fin-subtotal b { color: var(--ink); font-weight: 800; } .fin-subtotal-nota { font-size: .68rem; font-weight: 600; } .fin-badge--tarjeta { background: color-mix(in srgb, var(--fin-cuota) 18%, transparent); color: var(--fin-cuota-txt); } .fin-badge--clase { background: var(--fin-rule); color: var(--ink-soft); font-size: .6rem; padding: 1px 6px; border-radius: 999px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin-left: 5px; } /* ==================================================================== INVERSIONES ==================================================================== */ .fin-posiciones { margin-top: 4px; } .fin-pos { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--fin-rule); } .fin-pos:last-child { border-bottom: none; } .fin-pos-emoji { font-size: 1.05rem; text-align: center; } .fin-pos-info { min-width: 0; } .fin-pos-nombre { font-size: .86rem; font-weight: 800; color: var(--ink); display: flex; align-items: center; flex-wrap: wrap; gap: 2px; } .fin-pos-sub { font-size: .7rem; color: var(--ink-soft); font-weight: 600; margin-top: 1px; } .fin-pos-montos { text-align: right; } .fin-pos-monto { font-size: .88rem; font-weight: 800; } .fin-pos-peso { font-size: .66rem; color: var(--ink-soft); font-weight: 700; } /* Descomposición en vivo del form: invertido / costos / sale de tu caja */ .inv-resumen { margin-top: 4px; padding: 11px 13px; border-radius: 13px; background: var(--fin-rule); font-size: .8rem; } .inv-resumen-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 3px 0; color: var(--ink-soft); font-weight: 600; } .inv-resumen-fila b { color: var(--ink); font-weight: 800; } .inv-resumen-fila--total { margin-top: 4px; padding-top: 7px; border-top: 1px solid var(--fin-borde); font-size: .86rem; } .inv-resumen-pct { font-size: .7rem; color: var(--ink-soft); font-weight: 700; } /* Punto de equilibrio dentro del form: el número que decide si la operación tenía sentido, mostrado ANTES de guardarla. */ .inv-equilibrio { margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--fin-borde); } .inv-equilibrio-titulo { font-size: .64rem; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 3px; } .inv-equilibrio-nota { font-size: .7rem; line-height: 1.45; color: var(--ink-soft); margin-top: 3px; } /* ---- Tesis ---- */ .inv-tesis-form { margin-top: 4px; padding: 12px 13px; border-radius: 14px; background: color-mix(in srgb, var(--fin-sub) 9%, transparent); border: 1px solid color-mix(in srgb, var(--fin-sub) 24%, transparent); display: flex; flex-direction: column; gap: 8px; } .inv-tesis-form-titulo { font-size: .72rem; font-weight: 800; color: var(--ink); } .inv-tesis-form-titulo span { font-weight: 600; color: var(--ink-soft); } .inv-tesis-form textarea { width: 100%; resize: vertical; min-height: 52px; font: 600 .84rem var(--font); color: var(--ink); background: var(--fin-surf); border: 1px solid var(--fin-borde); border-radius: 11px; padding: 10px 12px; outline: none; } .inv-tesis-form textarea::placeholder, .inv-tesis-form input::placeholder { color: var(--ink-soft); } /* "Vendo a [precio] antes del [fecha]" son cuatro cosas en una línea: en un celular angosto el selector de fecha se salía de la pantalla. */ .inv-tesis-form .cuota-num-row { flex-wrap: wrap; row-gap: 8px; } .inv-tesis-form .cuota-fecha-input { flex: 1 1 140px; min-width: 0; } .inv-tesis-form .cuota-num-input { flex: 1 1 90px; min-width: 0; } .inv-tesis-lista { display: flex; flex-direction: column; gap: 9px; } .inv-tesis { padding: 11px 13px; border-radius: 14px; background: var(--fin-rule); border-left: 3px solid var(--ink-soft); } .inv-tesis--viva { border-left-color: var(--fin-fijo); } .inv-tesis--vencida { border-left-color: var(--fin-cuota); background: color-mix(in srgb, var(--fin-cuota) 10%, transparent); } .inv-tesis--ok { border-left-color: var(--fin-ok); } .inv-tesis--mal { border-left-color: var(--fin-mal); } .inv-tesis-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .inv-tesis-tic { font-size: .92rem; font-weight: 800; color: var(--ink); letter-spacing: .02em; } .inv-tesis-estado { font-size: .7rem; font-weight: 700; color: var(--ink-soft); text-align: right; } .inv-tesis-texto { font-size: .8rem; line-height: 1.5; color: var(--ink-soft); font-style: italic; margin-top: 4px; } .inv-tesis-nums { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; } .inv-tesis-nums span { display: flex; flex-direction: column; font-size: .8rem; font-weight: 800; color: var(--ink); } .inv-tesis-nums i { font-style: normal; font-size: .62rem; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; } .inv-tesis-inval { font-size: .72rem; line-height: 1.45; color: var(--ink-soft); margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--fin-borde); } .inv-tesis-alerta { margin-top: 7px; padding: 7px 9px; border-radius: 9px; background: color-mix(in srgb, var(--fin-mal) 14%, transparent); font-size: .74rem; line-height: 1.45; color: var(--ink); } .inv-tesis-alerta b { font-weight: 800; } /* Scorecard: el número que ningún broker te muestra. */ .inv-score { margin-bottom: 11px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--fin-fijo) 10%, transparent); border: 1px solid color-mix(in srgb, var(--fin-fijo) 26%, transparent); } .inv-score--corto { background: var(--fin-rule); border-color: var(--fin-borde); } .inv-score-cifra { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .inv-score-cifra b { font-size: 1.25rem; font-weight: 800; color: var(--ink); letter-spacing: -.01em; } .inv-score-cifra span { font-size: .74rem; font-weight: 700; color: var(--ink-soft); } .inv-score-nota { font-size: .76rem; line-height: 1.5; color: var(--ink-soft); margin-top: 5px; } .inv-score-nota b { font-weight: 800; } /* ==================================================================== CUOTAS — pagos, vencidas y recordatorios ==================================================================== */ .cuota-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; } .cuota-pagar { flex-shrink: 0; border: none; cursor: pointer; padding: 7px 13px; border-radius: 999px; /* Blanco sobre --accent (#ff8a5c) daba 2,3:1. El gradiente oscuro es el mismo que ya usaba el botón flotante, que sí pasaba: ahora es un token. */ background: var(--accent-fondo); color: #fff; font: 800 .74rem var(--font); box-shadow: 0 2px 8px rgba(242,109,61,.28); } .cuota-pagar:active { transform: scale(.96); } body[data-theme="dark"] .cuota-pagar { background: rgba(96,165,250,.18); color: #7cb6ff; box-shadow: none; } .cuota-undo { border: none; background: none; cursor: pointer; font-size: .95rem; color: var(--ink-soft); padding: 4px 6px; border-radius: 8px; } .cuota-undo:active { background: var(--fin-rule); } .cuota-card--vencida { box-shadow: inset 3px 0 0 var(--fin-mal); } .resumen-accion { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--fin-rule); } .resumen-accion--vencida { border-top-color: var(--fin-mal); } .resumen-accion-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .resumen-accion-info b { font-size: .82rem; color: var(--ink); font-weight: 800; } .resumen-accion-info span { font-size: .7rem; color: var(--ink-soft); font-weight: 600; } .resumen-accion-btns { display: flex; gap: 6px; flex-wrap: wrap; } .cuotas-vencida { display: grid; grid-template-columns: 26px 1fr; gap: 9px; margin: 12px 16px; padding: 12px 14px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--fin-mal) 12%, var(--fin-surf)); border: 1px solid color-mix(in srgb, var(--fin-mal) 40%, transparent); } .cuotas-vencida-icono { font-size: 1.15rem; text-align: center; } .cuotas-vencida-titulo { font-size: .88rem; font-weight: 800; color: var(--ink); } .cuotas-vencida-detalle { font-size: .78rem; line-height: 1.5; color: var(--ink-soft); margin-top: 2px; } .cuotas-vencida-detalle b { color: var(--ink); font-weight: 800; } .cuotas-vencida-btns { margin-top: 9px; } /* ---- Diálogo de recordatorio ---- */ .rec-card { text-align: left; max-width: 340px; } .rec-sub { font-size: .82rem; line-height: 1.5; color: var(--ink-soft); margin: 4px 0 14px; } .rec-sub b { color: var(--ink); font-weight: 800; } .rec-campo { margin-bottom: 13px; } .rec-label { display: block; margin-bottom: 6px; font-size: .68rem; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .07em; } .rec-horas { display: flex; flex-wrap: wrap; gap: 5px; } .rec-horas .chip { flex: 0 0 auto; padding: 6px 11px; font-size: .78rem; } .rec-hora-input { width: 100%; margin-top: 7px; padding: 9px 11px; border: 1px solid var(--fin-borde); border-radius: 11px; background: var(--fin-rule); color: var(--ink); font: 700 .86rem var(--font); } .rec-check { display: flex; align-items: flex-start; gap: 8px; font-size: .76rem; line-height: 1.45; color: var(--ink-soft); margin-bottom: 4px; cursor: pointer; } .rec-check input { margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; } /* ==================================================================== ESCRITORIO ANCHO — dashboard de dos columnas El intento anterior repartía las tarjetas en 3-4 columnas por auto-placement y quedaba peor que en el celular: las alertas, marcadas como fila completa, se comían 570px de alto ANTES del primer número, y los

colapsados (1px de alto, ancho completo) cortaban la grilla en pedazos dejando huecos. Acá hay dos columnas con roles distintos, como un dashboard de verdad: IZQUIERDA = los números (hero, KPIs, ritmo, indicadores, tablas), DERECHA = el feed lateral (alertas, ingresos, ahorro, inversiones). Cada bloque tiene su columna asignada a mano — nada de auto-placement. ==================================================================== */ @media (min-width: 1280px) { #app { width: min(96vw, 1560px); flex: 0 0 min(96vw, 1560px); height: min(92dvh, 1040px); max-height: 92dvh; } .tabbar { width: 104px; } .tab { font-size: .7rem; } .tabbar .tab-icon { font-size: 1.45rem; } #view-panel.active { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(340px, 1fr); /* `dense` es obligatorio acá: sin él, el cursor del grid no retrocede y como las alertas (columna 2) aparecen antes en el DOM, el hero caía a la fila siguiente dejando 645px de columna izquierda en blanco. */ grid-auto-flow: row dense; align-content: start; gap: 14px 18px; padding-right: 4px; } #view-panel .view-header, #view-panel .fin-base-wrap { grid-column: 1 / -1; } /* Columna izquierda: los números, en orden de lectura. */ #view-panel #fin-hero, #view-panel #fin-kpis, #view-panel #fin-ritmo, #view-panel #fin-indicadores, #view-panel #fin-fijos, #view-panel #fin-subs, #view-panel #fin-form-concepto, #view-panel #fin-deuda, #view-panel #fin-flujo, #view-panel #fin-proyeccion, #view-panel .fin-pie { grid-column: 1; } /* Columna derecha: lo que se hojea, no lo que se compara. */ #view-panel #fin-alertas, #view-panel #fin-ingresos, #view-panel #fin-ahorro, #view-panel #fin-form-ahorro, #view-panel #fin-reintegros, #view-panel #fin-inversiones, #view-panel #fin-tesis, #view-panel #fin-mercado, #view-panel #fin-form-inversion, #view-panel #fin-medios, #view-panel #fin-form-medio { grid-column: 2; } /* Sin margen lateral propio: la grilla ya separa las columnas. */ #view-panel .fin-card, #view-panel .fin-hero, #view-panel .fin-ritmo, #view-panel .fin-form-wrap, #view-panel .fin-tiles, #view-panel .fin-indicadores, #view-panel .fin-pie, #view-panel .fin-base-ayuda { margin-left: 0; margin-right: 0; } /* Con el ancho de la columna izquierda entran los 4 tiles y los 6 indicadores en una sola fila: se comparan de un vistazo. */ #view-panel .fin-tiles { grid-template-columns: repeat(4, 1fr); } #view-panel .fin-indicadores { grid-template-columns: repeat(6, 1fr); } #view-panel .fin-tile { min-height: 124px; } /* El hero es la portada: acá tiene lugar para respirar de verdad. */ #view-panel .fin-hero { padding: 22px 26px 18px; } #view-panel .fin-hero-val { font-size: 2.5rem; } #view-panel .fin-hero-usd { font-size: .95rem; } #view-panel .fin-alloc { height: 12px; margin: 18px 0 13px; } #view-panel .fin-hero-linea { font-size: .88rem; } #view-panel .fin-desg { padding: 7px 0; } #view-panel .fin-desg-label { font-size: .88rem; } #view-panel .fin-desg-monto { font-size: .92rem; min-width: 120px; } #view-panel .fin-ritmo-val { font-size: 2.1rem; } /* Las alertas son un feed: ocupan tres filas de la columna derecha (el tramo que a la izquierda cubren hero + KPIs + ritmo) y se alinean arriba. Sin el `span 3`, el alto de la fila lo fijaba la tarjeta más alta de las dos columnas y quedaba un hueco enorme bajo el hero. Alto acotado con scroll propio para que nunca empujen los números abajo del pliegue, por muchas alertas que haya. */ #view-panel #fin-alertas { grid-row: span 3; align-self: start; } #view-panel #fin-alertas .fin-card { max-height: min(56vh, 620px); overflow-y: auto; scrollbar-width: thin; } #view-panel .fin-alerta { grid-template-columns: 24px 1fr; } /* Las tablas de conceptos aprovechan el ancho: el sparkline deja de ser una mancha de 40px y el historial muestra los 6 meses completos. */ #view-panel .fin-fila-spark { min-width: 120px; } #view-panel .fin-hist { gap: 6px; } /* Las demás vistas centran su contenido en vez de estirarse a 1400px de ancho, que en una lista de gastos es ilegible (líneas larguísimas). */ #view-gastos.active > *, #view-cuotas.active > *, #view-notas.active > * { max-width: 680px; width: 100%; margin-inline: auto; } #view-bosque.active > * { max-width: 1000px; width: 100%; margin-inline: auto; } } /* Monitores muy anchos: entra una tercera columna para las tablas. */ @media (min-width: 1800px) { #app { width: min(96vw, 1780px); flex: 0 0 min(96vw, 1780px); } #view-panel.active { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(340px, .9fr); } #view-panel #fin-subs, #view-panel #fin-form-concepto, #view-panel #fin-deuda, #view-panel #fin-proyeccion { grid-column: 2; } #view-panel #fin-hero, #view-panel #fin-kpis, #view-panel #fin-ritmo, #view-panel #fin-indicadores, #view-panel #fin-flujo { grid-column: 1 / 3; } #view-panel #fin-alertas, #view-panel #fin-ingresos, #view-panel #fin-ahorro, #view-panel #fin-form-ahorro, #view-panel #fin-reintegros, #view-panel #fin-inversiones, #view-panel #fin-tesis, #view-panel #fin-mercado, #view-panel #fin-form-inversion, #view-panel #fin-medios, #view-panel #fin-form-medio { grid-column: 3; } #view-panel .fin-pie { grid-column: 1 / 3; } } /* ==================================================================== MÓVIL — respiro y jerarquía ==================================================================== */ @media (max-width: 460px) { /* Los montos grandes se cortaban en dos líneas con sueldos de 7 dígitos. */ .fin-hero-val { font-size: clamp(1.25rem, 6.6vw, 1.62rem); } .fin-ritmo-val { font-size: clamp(1.35rem, 7vw, 1.7rem); } .fin-tile-val { font-size: clamp(1.1rem, 5.4vw, 1.32rem); } .fin-indicadores { grid-template-columns: 1fr 1fr; } .fin-alerta-acciones .fin-btn { flex: 1 1 auto; } } /* ============================================================ NAVEGACIÓN: sub-tabs de Plata, botón flotante y sheet ============================================================ El tabbar bajó de 6 a 4 destinos. Gastos, Cuotas y Panel pasaron a ser secciones de "Plata" y se eligen con este segmentado, que el router mueve dentro de la vista activa. Queda pegajoso arriba porque el que scrollea es #app, no la vista: si no, al bajar en el Panel te quedabas sin forma de cambiar de sección salvo volver arriba del todo. */ .subtabs { position: sticky; top: 0; z-index: 6; display: flex; gap: 3px; margin: 4px 16px 10px; padding: 3px; border-radius: 14px; background: rgba(110, 125, 118, .14); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); } .subtab { flex: 1; border: none; background: transparent; font: 700 .8rem var(--font); color: var(--ink-soft); padding: 9px 2px; border-radius: 11px; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s; } .subtab.active { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(35, 64, 50, .18); } body[data-theme="dark"] .subtabs { background: rgba(255,255,255,.06); } body[data-theme="dark"] .subtab.active { background: rgba(255,255,255,.17); color: #fff; box-shadow: none; } /* ---------- Botón flotante: cargar un gasto desde donde estés ---------- */ /* Es la acción más repetida de la app y estaba a tres toques (abrir → Gastos → escribir). Acá es uno. Se apila arriba del tabbar, del lado del pulgar. */ .fab { position: fixed; z-index: 60; right: 16px; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px); display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 18px 0 14px; border: none; border-radius: 999px; /* Naranja propio y no `--accent`: el acento de la app (#f26d3d) da 2,99:1 contra el blanco de la etiqueta, y 14px en negrita NO califica como texto grande, así que no llega a AA. Este par da 5,1:1 en el extremo claro y queda en la misma familia que `--tab-on` (#8a2f07). */ background: linear-gradient(160deg, #c2410c, #9a3412); color: #fff; font: 800 .88rem var(--font); cursor: pointer; box-shadow: 0 6px 20px rgba(154, 52, 18, .45); transition: transform .15s, box-shadow .2s, opacity .2s; } .fab:active { transform: scale(.94); } .fab-icono { font-size: 1.25rem; line-height: 1; margin-top: -2px; } /* Durante una sesión de foco no aparece: ver `show()` en app.js. */ body[data-foco="corriendo"] .fab { display: none; } /* El botón de tema se corre para arriba y no pelea con el flotante. */ body:has(.fab:not([hidden])) .theme-toggle { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 70px); } /* ---------- Sheet de alta rápida ---------- */ .sheet-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(20, 30, 25, .38); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); animation: scrimIn .2s ease; } @keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } } .sheet { position: fixed; z-index: 71; left: 0; right: 0; bottom: 0; max-width: 520px; margin: 0 auto; max-height: 88dvh; overflow: auto; padding: 6px 0 calc(18px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; background: var(--card); backdrop-filter: blur(30px) saturate(1.7); -webkit-backdrop-filter: blur(30px) saturate(1.7); box-shadow: 0 -12px 40px rgba(20, 30, 25, .28); animation: sheetIn .26s cubic-bezier(.2,.9,.3,1.1); } @keyframes sheetIn { from { transform: translateY(100%); } to { transform: none; } } .sheet-tirador { width: 38px; height: 4px; margin: 6px auto 2px; border-radius: 999px; background: rgba(60, 80, 70, .25); } .sheet-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 18px 0; } .sheet-top h2 { font-size: 1.15rem; font-weight: 800; color: var(--ink); } .sheet-cerrar { width: 34px; height: 34px; border: none; border-radius: 50%; background: rgba(110, 125, 118, .16); color: var(--ink-soft); font-size: .95rem; font-weight: 800; cursor: pointer; line-height: 1; } body[data-theme="dark"] .sheet { background: rgba(28, 34, 44, .92); } body[data-theme="dark"] .sheet-tirador { background: rgba(255,255,255,.22); } body[data-theme="dark"] .sheet-cerrar { background: rgba(255,255,255,.10); color: #fff; } /* En el rail lateral de escritorio el flotante estorba menos abajo a la derecha del contenido, no encima de la nav. */ @media (min-width: 1024px) { .fab { position: absolute; bottom: 20px; right: 20px; } .sheet { position: absolute; border-radius: 26px 26px 0 0; } .sheet-scrim { position: absolute; } } /* ==================================================================== NAV LATERAL DE ESCRITORIO (2026-08-12) ==================================================================== Antes, arriba de 1024px, la nav era el MISMO `.tabbar` puesto en vertical: una tira de 92px con iconos y etiquetas de 0,64rem. Se leía como un rail de iconos, no como un menú — y no había forma de ver las tres secciones de Plata sin entrar primero a Plata. Acá el sidebar es su propio nodo con etiquetas de verdad y el submenú de Plata siempre a la vista. NO duplica estado: sus botones llevan `.tab` + `data-view`, las mismas clases que engancha `app.js`, así que sidebar y tabbar son dos pieles del mismo router. El otro cambio grande es el tamaño: `#app` estaba clavado en 960×780 dentro de una pantalla de 1920, y todo el scroll de más venía de ahí. */ /* En mobile el sidebar no existe y `.vistas` desaparece del layout, así el árbol de cajas queda idéntico al de antes de este bloque. */ .sidebar { display: none; } .vistas { display: contents; } @media (min-width: 1024px) { #app { width: min(96vw, 1500px); flex: 0 0 auto; height: 94dvh; max-height: none; } /* El tabbar de abajo se retira: en escritorio manda el sidebar. */ .tabbar { display: none; } .vistas { display: flex; flex-direction: column; flex: 1; min-width: 0; height: 100%; overflow: hidden; } .sidebar { display: flex; flex-direction: column; /* `flex-basis: auto` a propósito: con `flex: 0 0 ` había DOS propiedades definiendo el ancho y las dos en la transición, y el resultado era que el ancho no cambiaba nunca. Acá manda `width` sola. */ flex: 0 0 auto; width: 232px; /* Los dos son obligatorios y van en la regla BASE, no en `.colapsado`: un flex item trae `min-width: auto`, que le pone como piso su ancho de contenido — sin esto el `flex-basis: 72px` del colapsado se ignora en silencio. Y si cambian junto con el ancho, el navegador mezcla una propiedad discreta con una animada y el ancho queda pegado en el valor viejo. Acá son constantes y lo único que varía es el ancho. */ min-width: 0; overflow: hidden auto; height: 100%; padding: 14px 12px; gap: 10px; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.3)); backdrop-filter: blur(30px) saturate(1.7); -webkit-backdrop-filter: blur(30px) saturate(1.7); border-right: 1px solid rgba(255,255,255,.5); box-shadow: inset -1px 0 0 rgba(255,255,255,.6); } /* Colapsado: sólo iconos, y el cambio de ancho es INSTANTÁNEO a propósito. Con `transition: width` acá el ancho no cambiaba nunca: este elemento tiene `backdrop-filter`, y en Chromium una transición de layout sobre un elemento compuesto en su propia capa se queda congelada en el valor viejo. Medido: con la clase puesta y transición seguía en 232px — hasta un `style.width='72px'` inline se ignoraba —; con `transition:none` da 72px al toque. El colapso sin animar funciona; animado, no funciona. */ #sidebar.colapsado { width: 72px; } .sb-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 10px; border-bottom: 1px solid rgba(110,125,118,.16); } .sb-marca { font: 900 1.05rem var(--font); letter-spacing: .04em; color: var(--tab-on); white-space: nowrap; } .sb-toggle { flex: 0 0 auto; width: 28px; height: 28px; border: none; border-radius: 9px; background: rgba(110,125,118,.14); color: var(--ink-soft); font: 800 1rem var(--font); line-height: 1; cursor: pointer; transition: background .15s, transform .22s; } .sb-toggle:hover { background: rgba(110,125,118,.24); } .sb-lista { list-style: none; display: flex; flex-direction: column; gap: 3px; } /* Sobrescribe el `.tab` de mobile (columna, centrado, 0,7rem): acá es una fila con etiqueta legible. */ .sb-item { width: 100%; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 11px 12px; border-radius: 13px; font: 800 .92rem var(--font); white-space: nowrap; } .sb-item:active { transform: scale(.97); } .sb-ico { font-size: 1.2rem; line-height: 1; flex: 0 0 22px; text-align: center; } .sb-item.active { border-radius: 13px; } /* ---- Submenú de Plata ---- */ /* `#subtabs` es el nodo único que ya movía el router; acá sólo cambia de casa y de orientación. Se oculta con Plata cerrada porque el propio router le pone `hidden`. */ .sb-sub { padding: 3px 0 3px 16px; } .sb-sub .subtabs { position: static; flex-direction: column; gap: 1px; margin: 0; padding: 4px; background: rgba(110,125,118,.10); border-radius: 12px; } .sb-sub .subtab { text-align: left; padding: 8px 10px; font-size: .82rem; border-radius: 9px; } /* Con el menú colapsado la etiqueta desaparece y el icono se centra. `.sb-sub` se va entero: un submenú de texto en 72px no entra. */ #sidebar.colapsado .sb-txt, #sidebar.colapsado .sb-marca, #sidebar.colapsado .sb-sub { display: none; } #sidebar.colapsado .sb-item { justify-content: center; padding: 11px 0; } #sidebar.colapsado .sb-top { justify-content: center; } #sidebar.colapsado .sb-toggle { transform: rotate(180deg); } /* El flotante de gasto se posiciona contra el área de contenido, no contra `#app`: con el sidebar de 232px quedaba corrido. */ .vistas { position: relative; } } /* Pantallas anchas de verdad: el Panel gana una tercera columna en vez de estirar las tarjetas a lo ancho, que es lo que hacía el scroll largo. */ @media (min-width: 1500px) { #app { height: 96dvh; } } /* ---- Tema oscuro ---- */ body[data-theme="dark"] .sidebar { background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); border-right: 1px solid rgba(255,255,255,.09); box-shadow: none; } body[data-theme="dark"] .sb-top { border-bottom-color: rgba(255,255,255,.10); } body[data-theme="dark"] .sb-marca { color: #ffb08a; } body[data-theme="dark"] .sb-toggle { background: rgba(255,255,255,.10); color: #fff; } body[data-theme="dark"] .sb-toggle:hover { background: rgba(255,255,255,.18); } body[data-theme="dark"] .sb-sub .subtabs { background: rgba(255,255,255,.05); } @media (prefers-reduced-motion: reduce) { .sb-toggle { transition: none; } } /* `.subtabs` declara `display:flex`, que le gana al atributo `hidden` — el nodo seguía ocupando lugar aunque el router lo marcara oculto. En mobile pasaba como un hueco; en escritorio, donde `#app` es una fila, se comía 233px del ancho del contenido. */ .subtabs[hidden] { display: none; } /* ====== Panel: secciones plegables ====== */ /* Ver `js/panel-plegable.js`. El

es la única parte visible cuando la sección está cerrada, así que tiene que leerse como una fila de lista, no como un título suelto. */ .fin-pleg { margin: 0 16px 10px; } .fin-pleg-sum { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow-soft); font: 800 .95rem var(--font); color: var(--ink); cursor: pointer; list-style: none; user-select: none; } .fin-pleg-sum::-webkit-details-marker { display: none; } .fin-pleg-sum:active { transform: scale(.99); } .fin-pleg-chevron { font-size: 1.2rem; font-weight: 800; color: var(--ink-soft); transform: rotate(90deg); transition: transform .18s cubic-bezier(.2,.9,.3,1); } .fin-pleg[open] > .fin-pleg-sum { border-radius: 16px 16px 0 0; box-shadow: none; background: color-mix(in srgb, var(--card) 100%, transparent); } .fin-pleg[open] > .fin-pleg-sum .fin-pleg-chevron { transform: rotate(-90deg); } /* El contenido ya trae su propia `.fin-card` con margen: adentro del plegable ese margen lateral sobra y desalinea contra el summary. */ .fin-pleg > div { margin: 0; } .fin-pleg > div > .fin-card { margin: 0; border-radius: 0 0 16px 16px; } /* El título interno duplicaría el del summary. Se oculta sólo el

, no el head entero: ahí viven botones como "Actualizar" de Mercado. / .fin-pleg > div > .fin-card > .fin-card-head > h2 { display: none; } .fin-pleg > div > .fin-card > .fin-card-head:empty { display: none; } body[data-theme="dark"] .fin-pleg-sum { color: #fff; } @media (prefers-reduced-motion: reduce) { .fin-pleg-chevron { transition: none; } } / En escritorio hay ancho de sobra: las plegables van a dos columnas para que abrir tres no empuje todo lo de abajo fuera de pantalla. / @media (min-width: 1024px) { .fin-pleg { margin: 0 0 10px; } } / ============ Módulo Ahorro ============ / / Reusa fin-card / fin-duo / fin-nota del Panel: es la misma familia visual, sólo cambian las piezas que el Panel no tiene (curva, objetivos, rubros). / .ah-graf { width: 100%; height: 120px; display: block; margin: 4px 0 2px; color: var(--ink-soft); } .ah-leyenda { display: flex; gap: 14px; justify-content: center; font-size: .68rem; color: var(--ink-soft); font-weight: 600; margin-bottom: 10px; } .ah-leyenda span { display: inline-flex; align-items: center; gap: 5px; } .ah-chip { width: 10px; height: 10px; border-radius: 2px; display: inline-block; } .ah-chip--barra { background: var(--fin-ok); opacity: .55; } .ah-chip--linea { background: var(--fin-ahorro); height: 3px; border-radius: 2px; } .fin-nota--alerta { background: color-mix(in srgb, var(--fin-mal) 10%, transparent); border-left: 3px solid var(--fin-mal); padding: 8px 10px; border-radius: 0 6px 6px 0; margin-top: 10px; } .fin-nota--ok { background: color-mix(in srgb, var(--fin-ok) 10%, transparent); border-left: 3px solid var(--fin-ok); padding: 8px 10px; border-radius: 0 6px 6px 0; margin-top: 10px; } / ---- Tabla mes a mes ---- / .ah-tabla { margin-top: 12px; } .ah-fila { display: grid; grid-template-columns: 1.1fr 1fr .8fr 1fr 1fr; gap: 6px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--fin-rule); font-size: .74rem; font-weight: 700; } .ah-fila:last-child { border-bottom: none; } .ah-fila span:not(:first-child) { text-align: right; } .ah-fila--head { font-size: .64rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; border-bottom-width: 2px; } .ah-mes { text-transform: capitalize; color: var(--ink-soft); font-weight: 600; } .ah-mes small { opacity: .6; margin-left: 2px; font-size: .85em; } / ---- Objetivos ---- / .ah-obj { padding: 10px 0; border-bottom: 1px solid var(--fin-rule); } .ah-obj:last-child { border-bottom: none; } .ah-obj--listo .fin-meta-fill { background: var(--fin-ok); } .ah-obj-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; } .ah-obj-nombre { font-size: .86rem; font-weight: 800; } / Los puntos de prioridad: 3 = alta, 1 = baja. Se leen de un vistazo sin leyenda. / .ah-obj-prio { color: var(--fin-cuota-txt); font-size: .7em; letter-spacing: -1px; margin-right: 3px; } .ah-obj-monto { font-size: .8rem; font-weight: 800; color: var(--ink); white-space: nowrap; } .ah-obj-monto small { font-weight: 600; color: var(--ink-soft); } .ah-obj-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; font-size: .72rem; font-weight: 600; } .ah-obj-acciones { margin-left: auto; display: flex; gap: 6px; } / ---- Form de alta ---- / .ah-form { display: grid; gap: 8px; padding: 10px 0 12px; border-bottom: 1px solid var(--fin-rule); } .ah-form-fila { display: flex; gap: 8px; align-items: center; } .ah-in { flex: 1; min-width: 0; padding: 9px 10px; font: inherit; font-size: .84rem; border: 1px solid var(--fin-borde); border-radius: 9px; background: var(--fin-surf); color: var(--ink); } .ah-in--monto { flex: 2; } .ah-radio { position: relative; } .ah-radio input { position: absolute; opacity: 0; pointer-events: none; } .ah-radio span { display: block; padding: 9px 13px; font-size: .82rem; font-weight: 800; border: 1px solid var(--fin-borde); border-radius: 9px; cursor: pointer; color: var(--ink-soft); background: var(--fin-surf); } .ah-radio input:checked + span { background: var(--fin-fijo); border-color: transparent; color: #fff; } .ah-form-btns { display: flex; gap: 8px; justify-content: flex-end; } / ---- Suscripciones y rubros ---- / .ah-subs, .ah-cats { margin-top: 12px; } .ah-subs-titulo { font-size: .68rem; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; } .ah-subs-titulo small { text-transform: none; letter-spacing: 0; font-weight: 600; opacity: .75; } .ah-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 0; border-bottom: 1px solid var(--fin-rule); font-size: .74rem; } .ah-sub:last-child { border-bottom: none; } .ah-sub-nombre { font-weight: 800; } .ah-sub-estado { font-weight: 600; flex: 1; min-width: 140px; } .ah-sub-monto { font-weight: 700; color: var(--ink-soft); } .ah-cat { display: grid; grid-template-columns: 1.2fr 1.4fr auto auto; gap: 8px; align-items: center; padding: 6px 0; font-size: .74rem; } .ah-cat-nombre { text-transform: capitalize; font-weight: 700; } .ah-cat-barra { height: 6px; background: var(--fin-rule); border-radius: 3px; overflow: hidden; } .ah-cat-barra i { display: block; height: 100%; background: var(--fin-var); border-radius: 3px; opacity: .8; } .ah-cat-monto { font-weight: 800; text-align: right; } .ah-cat-pct { font-size: .68rem; text-align: right; min-width: 34px; } @media (max-width: 380px) { .ah-fila { grid-template-columns: .9fr 1fr 1fr 1fr; font-size: .7rem; } / En pantallas angostas la columna "Variable" se cae: es la menos accionable. / .ah-fila span:nth-child(3) { display: none; } } / `display: grid` de .ah-form pisa el atributo `hidden` (más especificidad): sin esto el form de alta queda visible siempre. / .ah-form[hidden] { display: none; } / Tarjeta que además es un link a otra pantalla (Panel → Ahorro). / .fin-card--link { display: block; text-decoration: none; color: inherit; transition: transform .12s ease; } .fin-card--link:active { transform: scale(.99); } .fin-card--link .fin-card-sub { color: var(--accent-txt); font-weight: 700; } / ---- Importar resumen ---- / .imp { background: var(--fin-surf); border: 1px solid var(--fin-borde); border-radius: 16px; margin: 0 0 12px; overflow: hidden; } .imp-summary { cursor: pointer; padding: 12px 14px; font-weight: 800; font-size: .86rem; display: flex; align-items: center; gap: 8px; list-style: none; } .imp-summary::-webkit-details-marker { display: none; } .imp-hint { font-weight: 600; font-size: .72rem; color: var(--ink-soft); margin-left: auto; } .imp-cuerpo { padding: 0 14px 14px; } .imp-texto { width: 100%; padding: 10px; font: 500 .78rem ui-monospace, SFMono-Regular, Menlo, monospace; border: 1px solid var(--fin-borde); border-radius: 10px; background: var(--card); color: var(--ink); resize: vertical; } .imp-acciones { display: flex; align-items: center; gap: 10px; margin-top: 8px; } .imp-estado { font-size: .74rem; font-weight: 700; color: var(--ink-soft); flex: 1; } .imp-resumen { font-size: .8rem; font-weight: 700; margin: 12px 0 6px; } .imp-lista { max-height: 260px; overflow-y: auto; margin-bottom: 10px; } .imp-fila { display: grid; grid-template-columns: auto auto 1fr auto; gap: 8px; align-items: center; padding: 7px 2px; border-bottom: 1px solid var(--fin-rule); font-size: .78rem; cursor: pointer; } .imp-fila:last-child { border-bottom: none; } .imp-desc { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .imp-desc small { font-weight: 600; color: var(--ink-soft); margin-left: 6px; } .imp-monto { font-weight: 800; font-variant-numeric: tabular-nums; } .imp-confirmar { width: 100%; } / Aviso de "hace días que no cargás". Informativo, no alarmante: usa el tono de las notas del panel, no el rojo de un error. / .gasto-aviso { background: color-mix(in srgb, var(--fin-cuota) 12%, var(--fin-surf)); border: 1px solid color-mix(in srgb, var(--fin-cuota) 28%, transparent); border-radius: 14px; padding: 11px 13px; margin: 0 0 12px; font-size: .8rem; line-height: 1.5; color: var(--ink-soft); } .gasto-aviso b { color: var(--ink); font-weight: 800; } / Reparto del mes entre resúmenes (la tarjeta cierra el 5). / .gasto-periodos { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 8px 0 2px; } .gasto-per { background: var(--fin-surf); border: 1px solid var(--fin-borde); border-radius: 10px; padding: 5px 10px; font-size: .78rem; font-weight: 800; color: var(--ink); display: flex; flex-direction: column; align-items: center; line-height: 1.25; } .gasto-per small { font-size: .62rem; font-weight: 600; color: var(--ink-soft); text-transform: none; } .gasto-per--pago { opacity: .72; } .gasto-per--pago small { color: var(--fin-ok); font-weight: 700; } / Import: fila que puede ser un duplicado con la descripción editada. / .imp-fila--dudosa { background: color-mix(in srgb, var(--fin-mal) 8%, transparent); border-radius: 8px; } .imp-dudosa { display: block; font-size: .66rem; font-style: normal; color: var(--fin-mal); font-weight: 600; line-height: 1.35; margin-top: 2px; } / Proyección: período ya saldado. Se muestra para poder comparar, pero atenuado y etiquetado, para que no se lea como la próxima deuda. */ .proy-row--pago { opacity: .55; } .proy-row--pago .proy-barra { background: var(--fin-ok); } .proy-tag { font-size: .6rem; font-weight: 800; color: var(--fin-ok); text-transform: uppercase; letter-spacing: .03em; margin-left: 4px; }