/* PinkFlow — estilos (antes dentro de index.html) */
/* ============================================================
RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
/* ---------- Barras de scroll ----------
Las nativas de Windows (canal gris de 17px con flechitas arriba y abajo)
rompen cualquier pantalla cuidada. Aquí se unifican en una sola forma para
toda la app: fina, redondeada, sin flechas, sobre fondo transparente y
visible solo cuando hace falta. En móvil el sistema ya las oculta. */
* {
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, currentColor 22%, transparent) transparent;
}
::-webkit-scrollbar { width: 9px; height: 9px; background: transparent; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: color-mix(in srgb, currentColor 20%, transparent);
border-radius: 999px;
border: 2.5px solid transparent;
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, currentColor 34%, transparent); background-clip: padding-box; }
/* Las flechitas de los extremos y el cuadradito de la esquina: fuera. */
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: transparent; }
html, body { margin: 0; padding: 0; touch-action: pan-x pan-y; }
body {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: var(--text-primary);
background: var(--bg-grad);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
transition: background .4s ease, color .4s ease;
padding-bottom: calc(86px + env(safe-area-inset-bottom));
}
h1,h2,h3,p,ul,li { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select { font-family: inherit; color: var(--text-primary); }
a { color: inherit; }
/* Evita el halo violeta/azul por defecto de algunos navegadores móviles al
tocar botones, y usa el color de acento elegido para el foco. */
* { -webkit-tap-highlight-color: transparent; }
button, a, input, select { outline: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, .color-swatch:focus-visible {
outline: 2px solid var(--accent); outline-offset: 2px;
}
/* ============================================================
THEME TOKENS
============================================================ */
/* ============================================================
THEME TOKENS — paleta PinkFlow
Petróleo #123C46 · Porcelana #EFE4DA · Sombra #D8C9BC · Dorado #E0AF7C
Terracota #C9694A · Morado #2C1E3F · Arena #EFE7DE · Verde #3F7D6E
Seis acentos (terracota por defecto, verde, petróleo, rosa, morado,
negro) y cada uno con su versión oscura y clara. Las superficies son
planas: --bg-grad ahora es un color liso derivado de --surface.
============================================================ */
:root[data-theme="dark"] {
color-scheme: dark;
--surface: #221713;
--bg-grad: var(--surface);
--accent: #F2F2F2;
--accent-strong: #FFFFFF;
--on-accent: #111111;
--card-bg: rgba(239,228,218,0.055);
--card-bg-strong: rgba(239,228,218,0.10);
--modal-bg: color-mix(in srgb, var(--surface) 72%, transparent);
--card-border: rgba(239,228,218,0.14);
--text-primary: #EFE4DA;
--text-secondary: rgba(239,228,218,0.62);
--green: #5FA491;
--red: #E5705F;
--amber: #E0AF7C;
--orange: #D98A52;
--track: rgba(239,228,218,0.10);
--shadow: 0 24px 60px -26px rgba(0,0,0,0.62);
--input-bg: rgba(239,228,218,0.07);
--overlay: rgba(8,20,24,0.62);
--bar-bg: color-mix(in srgb, var(--surface) 88%, transparent);
}
:root[data-theme="light"] {
color-scheme: light;
--surface: #EFE7DE;
--bg-grad: var(--surface);
--card-bg: rgba(255,255,255,0.60);
--card-bg-strong: rgba(255,255,255,0.85);
--modal-bg: rgba(255,255,255,0.88);
--card-border: rgba(18,60,70,0.10);
--text-primary: #123C46;
--text-secondary: #6F6259;
--accent: #111111;
--accent-strong: #000000;
--green: #2F6B5C;
--red: #C0442F;
--amber: #9A6A22;
--orange: #C0442F;
--track: rgba(18,60,70,0.10);
--shadow: 0 20px 45px -28px rgba(18,60,70,0.30);
--input-bg: rgba(18,60,70,0.05);
--overlay: rgba(18,60,70,0.32);
--bar-bg: color-mix(in srgb, var(--surface) 86%, transparent);
}
/* ---------- Acentos ---------- */
/* (28 sep, v62) Tres colores de marca: Verde (por defecto), Rosa (el del
cerdito) y Blanco y negro (minimalista, con detalles verdes y rosas). */
:root[data-theme="dark"][data-accent="verde"] {
--surface: #10231F;
--accent: #3F7D6E;
--accent-strong: #7FBCAC;
--green: #7FBCAC;
}
:root[data-theme="dark"][data-accent="rosa"] {
/* (v63) Rosa cerdito: el del logo. Texto de botones en rosa muy oscuro. */
--surface: #1E1518;
--accent: #F2A6B4;
--accent-fill: #F2A6B4;
--on-accent: #5A1630;
--accent-strong: #F2A6B4;
--green: #7FBCAC;
}
:root[data-theme="dark"][data-accent="negro"] {
--surface: #0B0B0B;
--accent: #F2F2F2;
--accent-strong: #FFFFFF;
--on-accent: #111111;
--green: #7FBCAC;
--card-bg: rgba(255,255,255,0.05);
--card-bg-strong: rgba(255,255,255,0.10);
--card-border: rgba(255,255,255,0.12);
--text-primary: #F5F5F5;
--text-secondary: rgba(245,245,245,0.60);
--input-bg: rgba(255,255,255,0.06);
--track: rgba(255,255,255,0.10);
--overlay: rgba(0,0,0,0.66);
--amber: #E6C08F;
}
:root[data-theme="light"][data-accent="verde"] {
--text-primary: #16312B;
--surface: #EAEEE9;
--accent: #2F6B5C;
--accent-strong: #1F4E42;
--green: #2F6B5C;
}
:root[data-theme="light"][data-accent="rosa"] {
/* (v63) Rosa cerdito: rellenos en el rosa del logo con texto rosa muy
oscuro; cifras y enlaces en un rosa fuerte que se lee sobre claro. */
--surface: #FFF4F6;
--accent: #B8395F;
--accent-fill: #F2A6B4;
--on-accent: #8A2346;
--accent-strong: #9E2F52;
--text-primary: #2B1A20;
--text-secondary: #76636A;
--green: #2F6B5C;
--card-border: rgba(138,35,70,0.10);
}
:root[data-theme="light"][data-accent="negro"] {
--surface: #FFFFFF;
--accent: #111111;
--accent-strong: #000000;
--green: #2F6B5C;
--card-bg: #F6F6F5;
--card-bg-strong: #EDEDEC;
--modal-bg: rgba(255,255,255,0.96);
--card-border: rgba(0,0,0,0.08);
--text-primary: #111111;
--text-secondary: #6B6B6B;
--input-bg: rgba(0,0,0,0.04);
--track: rgba(0,0,0,0.08);
--shadow: 0 18px 40px -28px rgba(0,0,0,0.25);
--overlay: rgba(0,0,0,0.30);
--amber: #9A6A22;
}
/* Blanco y negro: los detallitos de marca (nombre y cerdito en rosa). */
:root[data-accent="negro"] .brandbar-id .brand-name { color: #D9728F; }
/* ============================================================
LAYOUT
============================================================ */
.app {
max-width: 760px;
margin: 0 auto;
padding: calc(58px + env(safe-area-inset-top)) 18px 0;
display: flex;
flex-direction: column;
gap: 18px;
}
/* Fuera de Inicio la cabecera se recoge: sin barra de marca ni saludo, para
que la pantalla respire y el contenido empiece arriba. Los botones de
acción (ocultar importes, tema) se quedan alineados a la derecha. */
body.compact-head .topbar { display: none; }
body.compact-head .app { padding-top: calc(76px + env(safe-area-inset-top)); }
/* La barra de marca pasa a ser PERMANENTE: es la que lleva el selector de
mes, y el mes tiene que ser el mismo contexto en las cuatro pestañas.
Antes se ocultaba en Inicio (ahí manda .topbar) y se turnaban — por eso
ningún sitio de la cabecera servía para algo global. */
body:not(.compact-head) .app { padding-top: calc(76px + env(safe-area-inset-top)); }
.card {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 26px;
backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%);
box-shadow: var(--shadow);
padding: 22px;
animation: cardIn .5s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes cardIn {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---------- Topbar ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; padding-top: 4px; flex-wrap: wrap; gap: 10px; }
.topbar-title h1 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.topbar-title h1 span { color: var(--accent-strong); font-weight: 800; }
.topbar-title .subtitle { color: var(--text-secondary); font-size: 13.5px; margin-top: 2px; }
.subtitle-row { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; flex-wrap: wrap; }
.prep-next-month-btn {
flex: 0 0 auto; border: none; border-radius: 18px; padding: 4px 10px;
background: var(--accent-soft, var(--input-bg)); color: var(--accent-strong, var(--text-secondary));
font-size: 11px; font-weight: 650; display: flex; align-items: center; gap: 4px; line-height: 1;
}
.topbar-actions { display: flex; gap: 10px; }
.icon-btn {
width: 42px; height: 42px; border-radius: 12px;
background: var(--card-bg-strong); border: 1px solid var(--card-border);
font-size: 17px; display: flex; align-items: center; justify-content: center;
transition: transform .15s ease, background .2s ease;
}
.icon-btn:hover { transform: translateY(-1px) scale(1.04); }
.icon-btn:active { transform: scale(.94); }
/* Pinky vive junto al ojo y la luna, pero se lee como "alguien": ahora va
dentro de un globo de conversación (burbuja + dos colitas), para que se
distinga de los toggles de al lado y se entienda que se le habla. */
.davide-btn {
padding: 0; overflow: visible; position: relative;
border-radius: 15px 15px 15px 7px;
background: color-mix(in srgb, var(--accent) 16%, var(--card-bg-strong));
border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
box-shadow: 0 4px 12px -6px rgba(0,0,0,.35);
}
.davide-btn::before, .davide-btn::after {
content: ""; position: absolute; border-radius: 50%;
background: color-mix(in srgb, var(--accent) 16%, var(--card-bg-strong));
border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.davide-btn::after { width: 9px; height: 9px; left: 1px; bottom: -4px; }
.davide-btn::before { width: 5px; height: 5px; left: -3px; bottom: -8px; }
.davide-btn:hover { background: color-mix(in srgb, var(--accent) 26%, var(--card-bg-strong)); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.davide-btn img { width: 30px; height: 30px; margin: auto; border-radius: 50%; object-fit: cover; display: block; }
/* Iconos SVG (ojo / ojo tachado) dentro de botones de icono */
.icon-btn svg { width: 22px; height: 22px; display: block; }
/* La ocultación de importes ahora se hace por texto (símbolo + guiones,
ej. "----- €") directamente en el formateador, no con CSS. */
/* ---------- Brand bar (identidad de la app, fija arriba del todo) ---------- */
.brandbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 85;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 9px 16px;
padding-top: calc(9px + env(safe-area-inset-top));
background: var(--bar-bg);
backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
border-bottom: 1px solid var(--card-border);
}
.brandbar-id { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 4px 8px 4px 4px; margin-left: -4px; border-radius: 12px; transition: background .18s ease, transform .15s ease; }
.brandbar-id:hover { background: var(--card-bg-strong); }
.brandbar-id:active { transform: scale(.97); }
.brandbar-id img { width: 34px; height: 34px; display: block; flex: none; }
.brandbar-id .brand-name {
font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: var(--accent-strong);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ---------- Modo invitado (probar sin cuenta) ----------
Solo se ve si NO hay sesión y el usuario eligió "probar sin cuenta".
Un usuario con cuenta nunca entra en este estado, así que no ve nada. */
#guestBar {
position: fixed; top: 0; left: 0; right: 0; z-index: 87; display: none;
align-items: center; justify-content: center; gap: 10px;
height: calc(36px + env(safe-area-inset-top)); padding: 0 12px;
padding-top: env(safe-area-inset-top); box-sizing: border-box;
background: color-mix(in srgb, var(--accent) 22%, var(--card-bg-strong));
border-bottom: 1px solid var(--card-border);
backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
}
#guestBar .gb-text {
font-size: 12.5px; font-weight: 650; color: var(--text-primary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#guestBar .gb-text b { font-weight: 800; }
#guestBar .gb-cta {
flex: 0 0 auto; padding: 5px 12px; font-size: 12.5px; font-weight: 750; border-radius: 999px;
}
body.is-guest #guestBar { display: flex; }
body.is-guest .brandbar { top: calc(36px + env(safe-area-inset-top)); padding-top: 9px; }
body.is-guest .app,
body.is-guest.compact-head .app { padding-top: calc(112px + env(safe-area-inset-top)); }
.auth-alt {
margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--card-border);
display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center;
}
.auth-alt button {
font-size: 13.5px; font-weight: 750; color: var(--accent-strong); padding: 6px 4px;
}
.auth-alt p { font-size: 11px; color: var(--text-secondary); line-height: 1.45; margin: 0; }
.auth-guest-note {
display: none; margin-bottom: 16px; padding: 12px 14px; border-radius: 12px;
background: color-mix(in srgb, var(--accent) 16%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
font-size: 13.5px; line-height: 1.45; color: var(--text-primary);
}
body.is-guest .auth-guest-note { display: block; }
body.is-guest #authBackToGuest { display: inline-flex; }
#authBackToGuest { display: none; }
.dv-signup-card {
margin: 4px 0 2px; padding: 14px; border-radius: 18px;
background: var(--card-bg-strong); border: 1px solid var(--card-border);
display: flex; flex-direction: column; gap: 10px;
}
.dv-signup-card p { font-size: 13.5px; line-height: 1.45; color: var(--text-secondary); margin: 0; }
/* ---------- Tabs (barra de navegación inferior) ---------- */
.tabbar {
position: fixed; left: 50%; transform: translateX(-50%);
bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 90;
display: flex; align-items: center; gap: 2px;
width: calc(100% - 14px); max-width: 680px;
padding: 8px 10px; border-radius: 26px;
background: var(--bar-bg);
backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
border: 1px solid var(--card-border);
box-shadow: 0 10px 30px -12px rgba(0,0,0,.45);
}
/* Desenfoque progresivo debajo de la barra flotante (estilo Instagram): el
contenido sigue viéndose asomar, pero difuminado, así nada compite con la
barra. Tres capas de blur creciente + máscara que se desvanece hacia arriba.
No intercepta toques (pointer-events:none) y no tapa nada: solo difumina. */
.tabbar-blur {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 88;
height: calc(104px + env(safe-area-inset-bottom));
pointer-events: none;
backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
-webkit-mask-image: linear-gradient(to top, #000 0%, #000 55%, transparent 100%);
mask-image: linear-gradient(to top, #000 0%, #000 55%, transparent 100%);
}
.tabbar-blur::before, .tabbar-blur::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; }
.tabbar-blur::before {
height: 72%;
backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
-webkit-mask-image: linear-gradient(to top, #000 0%, #000 45%, transparent 100%);
mask-image: linear-gradient(to top, #000 0%, #000 45%, transparent 100%);
}
.tabbar-blur::after {
height: 44%;
backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
-webkit-mask-image: linear-gradient(to top, #000 0%, #000 40%, transparent 100%);
mask-image: linear-gradient(to top, #000 0%, #000 40%, transparent 100%);
}
/* Con un modal, la pantalla de ahorro o el onboarding encima, la barra no
está: el velo tampoco debe estar. */
body:has(.modal-overlay.active) .tabbar-blur,
body:has(#onboardingOverlay:not([style*="display:none"])) .tabbar-blur { display: none; }
.tab-btn {
flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
padding: 0; border-radius: 999px; font-size: 11px; font-weight: 700; min-width: 0;
color: var(--text-secondary); transition: color .2s ease, background .2s ease; white-space: nowrap;
}
/* La etiqueta solo aparece en la pestaña donde estás: la barra queda
compacta y no se pierde el nombre de la sección. */
.tab-btn { flex: 1 1 0; }
.tab-btn .tab-icon { font-size: 22px; line-height: 1; opacity: .5; transition: opacity .2s ease, transform .2s ease; }
.tab-btn .tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* El resalte de la activa era una tarjeta de borde a borde. Ahora es un
pastillín que abraza solo el icono: el color y el peso de la etiqueta ya
dicen dónde estás, y la barra queda compacta. */
.tab-btn.active { color: var(--accent-strong); background: transparent; }
.tab-btn .tab-icon { width: 100%; max-width: 62px; height: 34px; display: grid; place-items: center; border-radius: 999px; }
.tab-btn.active .tab-icon { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.tab-btn.active .tab-icon { opacity: 1; }
.tab-btn:not(.active):hover { color: var(--text-primary); }
.tab-btn:not(.active):hover .tab-icon { opacity: .8; }
/* El "+" vive en la barra, en el centro: sitio fijo, siempre el mismo, y a
la misma distancia del pulgar que las pestañas. El flotante arrastrable
queda en el DOM (oculto) con su lógica intacta. */
.tab-btn.tab-plus { flex: 0 0 auto; padding: 0 4px; }
.tab-btn.tab-plus .tab-plus-mark {
width: 50px; height: 50px; border-radius: 999px; display: grid; place-items: center;
font-size: 28px; font-weight: 700; line-height: 1;
background: var(--accent-fill, var(--accent)); color: var(--surface);
box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent) 80%, transparent);
transition: transform .15s ease, box-shadow .2s ease;
}
.tab-btn.tab-plus:active .tab-plus-mark { transform: scale(.94); }
.tab-btn.tab-plus:hover .tab-plus-mark { box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent) 90%, transparent); }
.tab-btn.tab-plus.active { background: transparent; }
@media (max-width: 360px) { .tab-btn.tab-plus .tab-plus-mark { width: 42px; height: 42px; font-size: 22px; } }
.tab-panel { display: none; flex-direction: column; gap: 18px; }
.tab-panel.active { display: flex; }
@media (max-width: 480px) {
.tab-btn { font-size: 9.5px; padding: 6px 1px; gap: 2px; }
.tab-btn .tab-icon { font-size: 22px; }
}
@media (max-width: 360px) {
.tab-btn { font-size: 8.5px; }
.tab-btn .tab-icon { font-size: 17px; }
}
/* ---------- Home quick summary ---------- */
.home-hero { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.home-hero .hero-label { font-size: 13.5px; color: var(--text-secondary); font-weight: 600; }
.home-hero .hero-value { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; }
.home-hero .hero-value.positive { color: var(--green); }
.home-hero .hero-value.negative { color: var(--red); }
.home-hero .hero-value.warning { color: var(--amber); }
.home-subrow { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; }
.home-subrow > div { display: flex; flex-direction: column; gap: 2px; }
.home-subrow .label { font-size: 12.5px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.home-subrow .value { font-size: 17px; font-weight: 750; }
/* Portada más limpia: presupuesto/gastado en una línea pequeña y gris, y el
dinero prestado como nota al pie bajo el número grande, sin competir con él. */
/* Veredicto de Analizar: es texto, no un importe — no usa el cuerpo del
número grande de Inicio. */
/* Barra apilada: el mes entero en una sola línea (fijos, día a día, ahorro,
libre). Se lee de un golpe, sin párrafos. */
.an-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--track); margin-top: 16px; }
.an-bar > span { display: block; height: 100%; }
.an-bar-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 12.5px; color: var(--text-secondary); }
.an-leg { display: flex; align-items: center; gap: 6px; }
.an-leg i { width: 9px; height: 9px; border-radius: 999px; display: block; flex: none; }
.an-leg strong { color: var(--text-primary); font-weight: 750; font-variant-numeric: tabular-nums; }
.an-verdict { font-size: 28px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }
.an-verdict.positive { color: var(--green); }
.an-verdict.warning { color: var(--accent-strong); }
.an-verdict.negative { color: var(--red); }
.hero-facts { display: flex; flex-wrap: wrap; gap: 3px 20px; margin-top: 12px; }
.hero-fact { font-size: 13.5px; color: var(--text-secondary); font-weight: 500; }
.hero-fact .value { font-size: 13.5px; color: var(--text-secondary); font-weight: 700; }
.hero-note { font-size: 12.5px; color: var(--text-secondary); font-weight: 500; margin: 7px 0 0; opacity: .95; }
/* Tarjetitas de ayuda contextual (una vez por sección). */
.tip-card {
display: flex; gap: 10px; align-items: flex-start;
background: color-mix(in srgb, var(--accent) 12%, var(--card-bg-strong));
border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--card-border));
border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
animation: itemIn .3s cubic-bezier(.2,.8,.3,1) both;
}
.tip-card.tip-closing { animation: itemOut .24s ease forwards; }
.tip-emoji { font-size: 22px; line-height: 1.25; flex: 0 0 auto; }
.tip-main { flex: 1; min-width: 0; }
.tip-text { font-size: 13.5px; line-height: 1.45; color: var(--text-primary); margin: 0 0 10px; }
.tip-ok {
display: inline-block; width: auto; padding: 7px 16px; border-radius: 12px;
font-size: 12.5px; font-weight: 700; background: var(--accent-fill, var(--accent)); color: var(--on-accent, #fff);
transition: transform .15s ease, filter .15s ease;
}
.tip-ok:hover { filter: brightness(1.08); }
.tip-ok:active { transform: scale(.96); }
/* Pasos de "Cargar gastos solos": se tocan para marcarlos como hechos. */
.atajo-step {
display: grid; grid-template-columns: 26px 1fr 22px; gap: 11px; align-items: start;
width: 100%; text-align: left; padding: 13px 0; border-bottom: 1px solid var(--card-border);
background: transparent;
}
.atajo-step .atajo-num {
width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
font-size: 13.5px; font-weight: 800; color: var(--accent-strong);
background: color-mix(in srgb, var(--accent) 20%, transparent);
}
/* Todo el paso es un solo botón: el circulito y el texto no interceptan el
toque, así tocar cualquier parte lo tacha. */
.atajo-step > * { pointer-events: none; }
.atajo-step .atajo-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.atajo-step .atajo-body b { font-size: 13.5px; font-weight: 750; }
.atajo-step .atajo-body span { font-size: 13.5px; line-height: 1.45; color: var(--text-secondary); }
.atajo-step .atajo-body code { font-size: 12.5px; }
.atajo-step .atajo-check {
width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
border: 1.5px solid var(--card-border); color: transparent; font-size: 12.5px; font-weight: 800;
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.atajo-step.done .atajo-check { background: var(--green, #3F8F6B); border-color: transparent; color: #fff; }
.atajo-step.done .atajo-body b { text-decoration: line-through; opacity: .6; }
.atajo-step.done .atajo-num { opacity: .5; }
/* "Cómo funciona": lista de secciones en Ajustes. */
.help-item { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--card-border); }
.help-item:last-child { border-bottom: none; }
.help-item .help-emoji { font-size: 22px; flex: 0 0 auto; line-height: 1.2; }
.help-item .help-body { min-width: 0; }
.help-item .help-body h4 { font-size: 13.5px; font-weight: 750; margin: 0 0 3px; }
.help-item .help-body p { font-size: 13.5px; line-height: 1.45; color: var(--text-secondary); margin: 0; }
a.settings-nav-row { text-decoration: none; color: inherit; }
.support-mail-btn {
display: inline-flex; align-items: center; gap: 8px; width: auto; margin-top: 4px;
padding: 11px 18px; border-radius: 12px; text-decoration: none;
background: var(--accent-fill, var(--accent)); color: var(--on-accent, #fff); border: 1px solid var(--accent);
font-size: 13.5px; font-weight: 700;
}
.support-mail-btn:hover { filter: brightness(1.06); }
.support-mail-btn:active { transform: scale(.97); }
.daily-allowance-card { display: flex; flex-direction: column; gap: 6px; }
.daily-allowance-row .label { font-size: 12.5px; color: var(--text-secondary); font-weight: 600; display: block; margin-bottom: 2px; }
.daily-allowance-value { font-size: 15px; font-weight: 700; display: block; color: var(--text-secondary); }
.daily-allowance-value.negative { color: var(--red); }
.daily-allowance-value.warning { color: var(--amber); }
.daily-allowance-toggle {
display: flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700;
color: var(--accent-strong); margin-top: 4px; align-self: flex-start;
}
.daily-allowance-chevron { transition: transform .2s ease; }
.daily-allowance-chevron.open { transform: rotate(180deg); }
.current-week-card { display: flex; flex-direction: column; gap: 10px; cursor: pointer; }
.current-week-head { display: flex; align-items: center; justify-content: space-between; }
.current-week-head h3 { font-size: 15px; font-weight: 750; }
.current-week-head span { font-size: 12.5px; color: var(--text-secondary); }
.savings-total { font-size: 28px; font-weight: 800; color: var(--accent-strong); white-space: nowrap; }
.savings-sub { font-size: 12.5px; color: var(--text-secondary); margin: 8px 0 0; }
.savings-chevron { color: var(--text-secondary); font-size: 22px; line-height: 1; }
/* ---------- Banner de ahorro (Inicio) ---------- */
/* El fondo es el acento del tema oscurecido: mismo color, sin mezclar familias,
así funciona igual en los seis temas y en claro/oscuro. */
.savings-banner {
position: relative; overflow: hidden; cursor: pointer;
border-radius: 18px; padding: 12px 16px; min-height: 0;
border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
background: linear-gradient(115deg,
color-mix(in srgb, var(--accent) 34%, #101619) 0%,
color-mix(in srgb, var(--accent) 14%, #0A0F11) 100%);
box-shadow: var(--shadow);
transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease;
animation: cardIn .5s cubic-bezier(.2,.8,.3,1) both;
}
.savings-banner:hover { transform: translateY(-4px) scale(1.008); box-shadow: var(--shadow), 0 18px 40px -20px color-mix(in srgb, var(--accent) 70%, transparent); }
.savings-banner .sb-path path { transition: opacity .25s ease; }
.savings-banner:hover .sb-path path { opacity: .9; animation: sbDash 1.1s linear infinite; }
@keyframes sbDash { to { stroke-dashoffset: -24; } }
.savings-banner .sb-pig { transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.savings-banner:hover .sb-pig-1 { animation: sbHop .7s ease-in-out .00s infinite; }
.savings-banner:hover .sb-pig-2 { animation: sbHop .7s ease-in-out .12s infinite; }
.savings-banner:hover .sb-pig-3 { animation: sbHop .7s ease-in-out .24s infinite; transform: scale(1.08); }
@keyframes sbHop {
0%, 100% { transform: translateY(0) rotate(0deg); }
45% { transform: translateY(-7px) rotate(-5deg); }
}
.savings-banner .sb-dot, .savings-banner .sb-dia { transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .3s ease; }
.savings-banner:hover .sb-dot { transform: scale(1.5); }
.savings-banner:hover .sb-dia { animation: sbSpin 1.6s linear infinite; }
@keyframes sbSpin { from { transform: rotate(45deg); } to { transform: rotate(405deg); } }
.savings-banner .sb-ghost { transition: opacity .3s ease, transform .35s cubic-bezier(.2,.8,.3,1); }
.savings-banner:hover .sb-ghost { opacity: .16; transform: translateY(-4px) scale(1.03); }
.savings-banner .savings-chevron { transition: transform .2s cubic-bezier(.2,.8,.3,1); }
.savings-banner:hover .savings-chevron { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) {
.savings-banner:hover .sb-pig-1, .savings-banner:hover .sb-pig-2, .savings-banner:hover .sb-pig-3,
.savings-banner:hover .sb-dia, .savings-banner:hover .sb-path path { animation: none; }
}
.savings-banner:active { transform: scale(.99); }
.savings-banner .sb-art { position: absolute; inset: 0; color: var(--c-rosa-2); pointer-events: none; }
.savings-banner .sb-path { position: absolute; inset: 0; width: 100%; height: 100%; }
.savings-banner .sb-ghost {
position: absolute; left: 26%; top: -18%; width: 168px; opacity: .10;
}
.savings-banner .sb-pig { position: absolute; opacity: .95; }
.savings-banner .sb-pig-1 { width: 34px; left: 55%; top: 52%; }
.savings-banner .sb-pig-2 { width: 28px; left: 68%; top: 62%; }
.savings-banner .sb-pig-3 { width: 44px; left: 81%; top: 46%; }
.savings-banner .sb-dot, .savings-banner .sb-dia { position: absolute; display: block; }
.savings-banner .sb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-rosa-2); }
.savings-banner .sb-dia { width: 9px; height: 9px; transform: rotate(45deg); background: var(--accent-strong); }
.savings-banner .sb-d1 { left: 52%; top: 44%; }
.savings-banner .sb-d2 { left: 72%; top: 22%; }
.savings-banner .sb-d3 { left: 88%; top: 70%; }
.savings-banner .sb-x1 { left: 58%; top: 16%; }
.savings-banner .sb-x2 { left: 79%; top: 20%; }
.savings-banner .sb-x3 { left: 92%; top: 40%; }
.savings-banner .sb-content { position: relative; z-index: 1; }
.savings-banner .sb-label {
font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
color: rgba(239,228,218,.72);
}
.savings-banner .savings-head { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.savings-banner .savings-total { font-size: 34px; font-weight: 800; color: #EFE4DA; letter-spacing: -0.02em; }
/* El total del ahorro no se muestra desde fuera: en su lugar va una invitación
a entrar, en un cuerpo más chico que el importe (que era enorme). */
.savings-banner .savings-total.is-hidden-amount { font-size: 22px; font-weight: 750; letter-spacing: -0.01em; }
/* Cerditos que se asoman al pasar el cursor (y al tocar, vía :active).
Reutilizan los PNG de la marca — nada dibujado a mano. */
.savings-piggies {
position: absolute; z-index: 1; right: 14px; bottom: 0; height: 100%;
display: flex; align-items: flex-end; gap: 6px; pointer-events: none;
}
.savings-piggies img {
width: 40px; height: 40px; object-fit: contain; display: block;
transform: translateY(115%) rotate(6deg); opacity: 0;
transition: transform .42s cubic-bezier(.34,1.56,.64,1), opacity .28s ease;
}
.savings-banner:hover .savings-piggies img,
.savings-banner:focus-visible .savings-piggies img,
.savings-banner:active .savings-piggies img { opacity: 1; }
.savings-banner:hover .sp1, .savings-banner:focus-visible .sp1, .savings-banner:active .sp1 {
transform: translateY(-6px) rotate(-8deg); transition-delay: .02s;
animation: piggyBob 1.9s ease-in-out .5s infinite;
}
.savings-banner:hover .sp2, .savings-banner:focus-visible .sp2, .savings-banner:active .sp2 {
transform: translateY(-20px) rotate(0deg); transition-delay: .09s;
animation: piggyBob 1.6s ease-in-out .65s infinite;
}
.savings-banner:hover .sp3, .savings-banner:focus-visible .sp3, .savings-banner:active .sp3 {
transform: translateY(-4px) rotate(9deg); transition-delay: .16s;
animation: piggyBob 2.1s ease-in-out .8s infinite;
}
@keyframes piggyBob {
0%, 100% { margin-bottom: 0; }
50% { margin-bottom: 7px; }
}
@media (max-width: 420px) { .savings-piggies img { width: 32px; height: 32px; } }
@media (prefers-reduced-motion: reduce) {
.savings-piggies img { transition: opacity .2s ease; animation: none !important; }
}
.savings-banner .savings-chevron { color: rgba(239,228,218,.7); font-size: 22px; }
.savings-banner .savings-sub { color: rgba(239,228,218,.72); max-width: 52%; }
/* ---------- Pantalla de Ahorro (página, no modal) ---------- */
.savings-screen {
position: fixed; inset: 0; z-index: 86; background: var(--bg-grad);
overflow-y: auto; -webkit-overflow-scrolling: touch;
padding: calc(64px + env(safe-area-inset-top)) 16px calc(96px + env(safe-area-inset-bottom));
animation: overlayIn .2s ease;
}
.savings-screen[hidden] { display: none !important; }
.savings-screen-head { max-width: 640px; margin: 0 auto 18px; }
.savings-screen-body { max-width: 640px; margin: 0 auto; }
.savings-screen .huchas-modal {
max-width: none; width: 100%; max-height: none; overflow: visible;
animation: none; background: var(--card-bg); border: 1px solid var(--card-border);
border-radius: 18px; padding: 20px;
}
.savings-screen .huchas-modal .settings-close-x { display: none; }
.huchas-modal { max-width: 540px; width: 100%; }
.huchas-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.huchas-head h2 { display: flex; align-items: center; gap: 10px; line-height: 1; }
/* El PNG del chanchito tiene aire abajo: se sube un poco para que su centro
óptico coincida con el centro de la palabra. */
.huchas-mark { width: 34px; height: 34px; display: block; flex: none; align-self: center; object-fit: contain; transform: translateY(-4px); }
.huchas-summary { background: var(--card-bg-strong); border-radius: 18px; padding: 14px 16px; margin-bottom: 14px; }
.huchas-total-row { display: flex; align-items: baseline; justify-content: space-between; }
.huchas-total { font-size: 28px; font-weight: 800; color: var(--accent-strong); }
.huchas-sum-grid { display: flex; gap: 10px; margin-top: 10px; }
.huchas-sum-grid > div { flex: 1; background: var(--card-bg); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.hs-k { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .03em; }
.hs-v { font-size: 15px; font-weight: 750; }
.huchas-note { font-size: 11px; color: var(--text-secondary); margin: 10px 0 0; }
/* ---------- Ahorro: pantalla (antes pop-up) ---------- */
.savings-screen .ahorro-panel { background: transparent; border: none; padding: 0; }
.ahorro-panel #huchasList { max-height: none; overflow: visible; gap: 12px; margin-bottom: 0; }
.ahorro-panel .huchas-summary { background: transparent; padding: 0; margin: 0 0 18px; }
.ah-hero {
background: var(--card-bg); border: 1px solid var(--card-border);
border-radius: 18px; padding: 20px; margin-bottom: 14px;
display: flex; flex-direction: column; gap: 4px;
}
.ah-hero-label { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); }
.ah-hero-total { font-size: 40px; font-weight: 850; line-height: 1.05; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.ah-bar { height: 10px; border-radius: 999px; background: var(--input-bg); overflow: hidden; margin-top: 12px; }
.ah-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent-fill, var(--accent)); transition: width .35s ease; }
.ah-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; }
.ah-leg { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-secondary); }
.ah-leg strong { color: var(--text-primary); font-weight: 750; font-variant-numeric: tabular-nums; }
.ah-dot { width: 9px; height: 9px; border-radius: 999px; flex: none; }
.ah-dot-huchas { background: var(--accent-fill, var(--accent)); }
.ah-dot-libre { background: var(--input-bg); border: 1px solid var(--card-border); }
.ah-hero-note { font-size: 11px; color: var(--text-secondary); margin: 12px 0 0; }
/* Mi caja (Dinero): el total y las partes que lo forman son un solo bloque.
Antes el hero se cortaba recto arriba de unas tarjetas sueltas y parecía
roto; ahora las partes van dentro del mismo recuadro, con hairlines. */
#dineroCajaHero, #cajaCajaHero { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; margin-bottom: 0; padding-bottom: 14px; }
.caja-partes {
background: var(--card-bg); border: 1px solid var(--card-border);
border-radius: 18px; overflow: hidden; margin-bottom: 14px;
}
/* Solo en Dinero el bloque va pegado al hero (ahí es su continuación). En la
pantalla propia de Mi caja el hero tiene su propio cierre redondeado. */
#dineroCuentasList .caja-partes { border-top: 0; border-radius: 0 0 22px 22px; margin-bottom: 0; }
/* El panel de Dinero es flex con gap: sin este contenedor el gap se metía
entre el total y sus partes y el hero quedaba cortado en el aire. */
.caja-bloque { display: block; }
.caja-bloque #dineroCuentasList { margin: 0; }
.caja-partes .settings-nav-row {
background: transparent; border: 0; border-radius: 0; box-shadow: none;
padding-left: 20px; padding-right: 16px;
}
.caja-partes .settings-nav-row + .settings-nav-row {
border-top: 1px solid color-mix(in srgb, var(--card-border) 65%, transparent);
}
.caja-partes .settings-nav-row:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.ah-actions { display: flex; flex-direction: column; gap: 8px; }
.ah-action {
display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; column-gap: 12px;
width: 100%; text-align: left; padding: 13px 15px; border-radius: 18px;
background: var(--card-bg); border: 1px solid var(--card-border); color: var(--text-primary);
cursor: pointer; transition: background .18s ease;
}
.ah-action:hover { background: var(--input-bg); }
.ah-action .aa-icon { font-size: 15px; }
.ah-action .aa-title { font-size: 13.5px; font-weight: 700; }
.ah-action .aa-sub { font-size: 11px; color: var(--text-secondary); }
.ah-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 28px 2px 12px; }
/* Dentro de una hucha: primero mover dinero (lo único frecuente), el resto
detrás de "Más opciones". */
.hu-move { padding: 2px 10px 4px; }
.hu-amount {
width: 100%; box-sizing: border-box; padding: 13px 14px; border-radius: 12px;
border: 1px solid var(--card-border); background: var(--input-bg);
color: var(--text-primary); font-size: 17px; font-weight: 700; outline: none;
font-variant-numeric: tabular-nums;
}
.hu-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.hu-chip {
background: var(--card-bg-strong, var(--input-bg)); border: 1px solid var(--card-border);
color: var(--text-primary); border-radius: 999px; padding: 7px 13px;
font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.hu-chip:hover { border-color: var(--accent); color: var(--accent-strong); }
.hu-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hu-btns .btn { flex: 1 1 140px; width: auto; }
.hu-more-toggle {
display: block; width: 100%; text-align: left; background: transparent; border: none;
border-top: 1px solid var(--card-border); margin-top: 14px; padding: 12px 10px 6px;
color: var(--text-secondary); font-size: 12.5px; font-weight: 750; cursor: pointer;
}
.hu-more-toggle:hover { color: var(--accent-strong); }
.hu-more { padding: 2px 10px 6px; }
.ah-sec-title { font-size: 13.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-strong); margin: 0; }
.ah-sec-sub { font-size: 11px; color: var(--text-secondary); margin: 1px 0 0; }
.ah-new-btn {
flex: none; background: var(--accent-fill, var(--accent)); color: var(--on-accent, #fff); border: none; cursor: pointer;
font-size: 12.5px; font-weight: 750; padding: 8px 14px; border-radius: 999px;
}
.ahorro-panel .huchas-new { border-top: none; padding-top: 0; margin-bottom: 12px; }
.hucha-pct-line { font-size: 11px; color: var(--text-secondary); margin: 0 10px 8px; }
.hucha-block-title {
font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
color: var(--text-secondary); margin: 14px 0 6px;
}
.hucha-panel .hucha-block-title:first-child { margin-top: 4px; }
.hucha-hint { font-size: 11px; color: var(--text-secondary); margin: 6px 0 0; }
.huchas-empty { font-size: 13.5px; color: var(--text-secondary); text-align: center; padding: 14px 6px; }
#huchasList { display: flex; flex-direction: column; gap: 10px; max-height: 48vh; overflow-y: auto; overflow-x: hidden; margin-bottom: 14px; }
#huchasList .hucha-item { min-width: 0; }
/* La alcancía cerrada es una tarjeta, no una fila de lista: nombre grande,
saldo grande y el % como pastilla debajo. */
.hucha-item {
border: 1px solid var(--card-border); border-radius: 18px; padding: 4px;
background: var(--card-bg); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.hucha-item:hover { border-color: var(--accent); transform: translateY(-1px); }
.hucha-item.open { box-shadow: 0 10px 26px -18px rgba(0,0,0,.35); }
.hucha-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px; background: transparent; border: none; cursor: pointer; text-align: left; }
.hucha-name { font-weight: 750; font-size: 15px; flex: 1; min-width: 0; word-break: break-word; color: var(--text-primary); letter-spacing: -0.01em; }
.hucha-amount { font-weight: 800; font-size: 17px; color: var(--text-primary); white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.hucha-pct-line {
display: inline-block; margin: 0 14px 12px; padding: 3px 10px; border-radius: 18px;
background: var(--input-bg); border: 1px solid var(--card-border);
font-size: 11px; font-weight: 650; color: var(--text-secondary);
}
.hucha-target { color: var(--text-secondary); font-weight: 600; }
.hucha-chevron { color: var(--text-secondary); font-size: 12.5px; transition: transform .2s ease; flex: 0 0 auto; }
.hucha-item.open .hucha-chevron { transform: rotate(180deg); }
.hucha-item .progress-outer.small { margin: 0 10px; }
.hucha-pct { font-size: 11px; color: var(--text-secondary); margin: 4px 10px 0; }
.hucha-panel { padding: 4px 10px 10px; }
.hucha-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.hucha-row-k { font-size: 12.5px; color: var(--text-secondary); }
.hucha-input, .hucha-name-input, .hucha-target-input, .hucha-dest { padding: 8px 10px; border-radius: 12px; border: 1px solid var(--card-border); background: var(--input-bg); color: var(--text-primary); font-size: 13.5px; outline: none; }
.hucha-input { flex: 1 1 90px; min-width: 70px; }
.hucha-name-input { flex: 1 1 110px; }
.hucha-target-input { flex: 1 1 90px; min-width: 70px; }
.hucha-dest { flex: 1 1 100px; }
.hucha-panel .btn { padding: 8px 10px; font-size: 12.5px; flex: 0 0 auto; }
.btn.hucha-withdraw { color: var(--red); }
.hucha-del { background: transparent; border: none; cursor: pointer; font-size: 15px; padding: 6px; flex: 0 0 auto; }
.hucha-edit-row { border-top: 1px dashed var(--card-border); padding-top: 10px; margin-top: 10px; }
.huchas-new { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-top: 1px solid var(--card-border); padding-top: 14px; }
.huchas-new input { flex: 1 1 130px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--card-border); background: var(--input-bg); color: var(--text-primary); font-size: 13.5px; outline: none; }
.value.positive { color: var(--green); }
.value.negative { color: var(--red); }
.value.warning { color: var(--amber); }
.progress-outer {
width: 100%; height: 12px; border-radius: 18px; background: var(--track); overflow: hidden;
}
.progress-outer.small { height: 8px; }
.progress-inner {
height: 100%; border-radius: 18px; width: 0%;
background: linear-gradient(90deg, var(--accent), var(--accent-strong));
transition: width .6s cubic-bezier(.2,.8,.3,1), background .3s ease;
}
.progress-inner.warning { background: linear-gradient(90deg, var(--amber), color-mix(in srgb, var(--amber) 62%, #8A5A1E)); }
.progress-inner.danger { background: linear-gradient(90deg, var(--red), color-mix(in srgb, var(--red) 62%, #7C2418)); }
/* ---------- Microanimaciones: bounce + confeti ---------- */
@keyframes bumpAnim {
0% { transform: scale(1); }
35% { transform: scale(1.018); }
65% { transform: scale(0.996); }
100% { transform: scale(1); }
}
.bump { animation: bumpAnim .4s cubic-bezier(.34,1.56,.64,1); }
.confetti-layer {
position: fixed; inset: 0; pointer-events: none; z-index: 900; overflow: hidden;
}
.confetti-piece {
position: absolute; top: -12px; width: 8px; height: 13px; border-radius: 2px;
opacity: .95; animation-name: confettiFall; animation-timing-function: cubic-bezier(.15,.6,.4,1);
animation-fill-mode: forwards;
}
@keyframes confettiFall {
0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
100% { transform: translate(var(--drift), 100vh) rotate(var(--rot)); opacity: 0; }
}
/* Las caritas de la app cayendo entre el confeti. */
.confetti-smiley {
position: absolute; top: -46px; width: 34px; height: 34px;
animation-name: smileyFall; animation-timing-function: cubic-bezier(.2,.7,.35,1);
animation-fill-mode: forwards;
filter: drop-shadow(0 8px 16px rgba(0,0,0,.28));
}
@keyframes smileyFall {
0% { transform: translate(0, 0) rotate(0deg) scale(.5); opacity: 0; }
10% { transform: translate(calc(var(--drift) * .1), 8vh) rotate(30deg) scale(1.08); opacity: 1; }
100% { transform: translate(var(--drift), 106vh) rotate(var(--rot)) scale(1); opacity: .92; }
}
/* Carita grande que aparece en el centro al cerrar una semana en positivo. */
.celebrate-hero {
position: fixed; left: 50%; top: 40%; z-index: 901; pointer-events: none;
width: 116px; height: 116px; margin: -58px 0 0 -58px;
animation: heroPop 1.5s cubic-bezier(.2,.8,.3,1) forwards;
filter: drop-shadow(0 18px 40px rgba(0,0,0,.35));
}
@keyframes heroPop {
0% { transform: scale(.2) rotate(-24deg); opacity: 0; }
30% { transform: scale(1.14) rotate(6deg); opacity: 1; }
45% { transform: scale(1) rotate(-3deg); }
60% { transform: scale(1.04) rotate(0deg); }
100% { transform: scale(.86) translateY(-26px); opacity: 0; }
}
.celebrate-ring {
position: fixed; left: 50%; top: 40%; z-index: 900; pointer-events: none;
width: 116px; height: 116px; margin: -58px 0 0 -58px; border-radius: 50%;
border: 3px solid var(--green);
animation: ringOut .9s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes ringOut {
0% { transform: scale(.5); opacity: .85; }
100% { transform: scale(3.2); opacity: 0; }
}
/* ---------- Feedback al tocar ---------- */
button { transition: transform .13s cubic-bezier(.34,1.56,.64,1); }
button:active { transform: scale(.955); }
.tab-btn:active { transform: scale(.93); }
.card { transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease, background .3s ease; }
.expense-item, .fin-item { transition: transform .18s cubic-bezier(.2,.8,.3,1), background .2s ease; }
/* Sin desplazar ni escalar la fila: al moverse bajo el dedo, el toque en
editar/borrar caía fuera del botón. El resalte es solo de color. */
.expense-item:hover, .fin-item:hover {
background: color-mix(in srgb, var(--accent) 18%, var(--card-bg-strong));
box-shadow: -4px 0 0 0 var(--accent);
}
/* ---------- Bloques que reaccionan al mouse y al dedo ---------- */
.card {
position: relative;
transition: transform .28s cubic-bezier(.2,.9,.25,1.1), box-shadow .28s ease,
border-color .28s ease, background .28s ease;
}
/* Resplandor de acento que se enciende al pasar el mouse por la tarjeta. */
.card::before {
content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
background: radial-gradient(120% 140% at 12% -20%, color-mix(in srgb, var(--accent) 34%, transparent) 0%, transparent 58%);
opacity: 0; transition: opacity .28s ease;
}
.card:hover::before { opacity: 1; }
.card:hover {
transform: translateY(-8px) scale(1.014);
border-color: var(--accent);
background: var(--card-bg-strong);
box-shadow: var(--shadow), 0 0 0 1px var(--accent), 0 18px 46px -18px color-mix(in srgb, var(--accent) 60%, transparent);
}
.card:active { transform: translateY(-3px) scale(.99); }
.week-card:hover { transform: translateY(-10px) scale(1.02) rotate(-.35deg); }
.week-header { transition: background .2s ease, transform .18s cubic-bezier(.2,.8,.3,1); }
.week-header:hover { background: color-mix(in srgb, var(--accent) 16%, var(--card-bg-strong)); }
.week-header:active { transform: scale(.97); }
.week-card:hover .week-chevron { transform: translateY(2px); }
.fact-card:active { transform: scale(.97); }
.savings-chevron { transition: transform .2s cubic-bezier(.2,.8,.3,1); }
.goal-item { transition: transform .18s cubic-bezier(.2,.8,.3,1), background .2s ease, border-color .2s ease; }
.goal-item:hover {
transform: translateX(10px) scale(1.02); border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 16%, var(--card-bg-strong));
box-shadow: -4px 0 0 0 var(--accent);
}
.goal-item:active { transform: translateX(6px) scale(.97); }
.category-chip { transition: transform .16s cubic-bezier(.34,1.56,.64,1), background .2s ease, border-color .2s ease; }
.category-chip:hover {
transform: translateY(-5px) scale(1.07); background: var(--card-bg-strong);
border-color: var(--accent);
box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}
.category-chip:active { transform: scale(.9); }
.percent-row-item, .category-detail-row, .hucha-item, .history-item {
transition: transform .18s cubic-bezier(.2,.8,.3,1), background .2s ease;
}
.percent-row-item:hover, .category-detail-row:hover, .hucha-item:hover, .history-item:hover {
transform: translateX(8px) scale(1.012);
background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.week-numbers .value { transition: transform .2s cubic-bezier(.34,1.56,.64,1); }
.week-numbers > div:hover .value { transform: scale(1.16) translateY(-2px); }
.week-numbers > div { transition: transform .2s cubic-bezier(.34,1.56,.64,1); }
.week-numbers > div:hover { transform: translateY(-2px); }
.tab-btn:not(.active):hover { transform: none; }
.tab-btn.active:hover { filter: brightness(1.06); }
/* El aro de foco por teclado va hacia DENTRO para que no asome fuera de la barra. */
.tab-btn:focus-visible { outline-offset: -3px; }
.btn { transition: transform .14s cubic-bezier(.34,1.56,.64,1), background .2s ease, color .2s ease, border-color .2s ease; }
.btn:hover {
transform: translateY(-4px) scale(1.035);
box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--accent) 75%, transparent);
}
.fab { transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease; }
.fab:hover { transform: translateY(-3px) scale(1.05); }
.fab:active { transform: scale(.93); }
/* Onda que sale del punto exacto donde tocaste. */
.ripple {
position: absolute; border-radius: 50%; pointer-events: none;
background: currentColor; opacity: .4; transform: scale(0);
animation: rippleOut .6s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes rippleOut {
to { transform: scale(1); opacity: 0; }
}
/* Brillo que recorre las barras de progreso cuando cambian. */
.progress-inner { position: relative; overflow: hidden; }
.progress-inner::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.42) 50%, transparent 80%);
transform: translateX(-100%);
animation: progressSheen 2.6s ease-in-out .4s infinite;
}
@keyframes progressSheen {
0% { transform: translateX(-100%); }
45%, 100% { transform: translateX(220%); }
}
/* Los números laten un instante cuando cambian de valor. */
@keyframes valuePop {
0% { transform: scale(1); }
40% { transform: scale(1.07); }
100% { transform: scale(1); }
}
.value.flash { animation: valuePop .5s cubic-bezier(.34,1.56,.64,1); }
/* Entrada del panel al cambiar de pestaña, con las tarjetas en cascada. */
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.tab-panel.active.entering { animation: panelIn .32s cubic-bezier(.2,.8,.3,1) both; }
.tab-panel.active.entering > .card:nth-child(1) { animation-delay: .02s; }
.tab-panel.active.entering > .card:nth-child(2) { animation-delay: .07s; }
.tab-panel.active.entering > .card:nth-child(3) { animation-delay: .12s; }
.tab-panel.active.entering > .card:nth-child(4) { animation-delay: .17s; }
.tab-panel.active.entering > .card:nth-child(5) { animation-delay: .22s; }
.tab-panel.active.entering > .card:nth-child(n+6) { animation-delay: .26s; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important; animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
/* ---------- On Pace ---------- */
.onpace-verdict { font-size: 22px; font-weight: 800; margin: 2px 0 4px; }
.onpace-verdict.ok { color: var(--green); }
.onpace-verdict.warn { color: var(--amber); }
.onpace-verdict.orange { color: var(--orange); }
.onpace-verdict.danger { color: var(--red); }
.onpace-divider { height: 1px; background: var(--card-border); margin: 14px 0 2px; }
.onpace-detail-toggle {
width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
margin-top: 12px; padding: 4px; font-size: 12.5px; font-weight: 700; color: var(--accent-strong);
}
.onpace-detail-chevron { font-size: 11px; transition: transform .2s ease; }
.onpace-detail-chevron.open { transform: rotate(180deg); }
.onpace-detail {
margin-top: 10px; padding: 14px; border-radius: 12px; background: var(--input-bg);
}
.onpace-detail-intro { font-size: 13.5px; color: var(--text-primary); line-height: 1.5; margin-bottom: 12px; }
.onpace-projection-label { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); margin-bottom: 6px; }
.onpace-projection-list { display: flex; flex-direction: column; gap: 5px; padding-left: 18px; }
.onpace-projection-list li { font-size: 13.5px; color: var(--text-secondary); line-height: 1.45; }
.savings-sub { font-size: 11px; color: var(--text-secondary); margin-top: 3px; max-width: 340px; }
.value.savings-positive { color: var(--green); }
.value.savings-negative { color: var(--red); }
.chart-card h2, .onpace-card h2 { font-size: 17px; font-weight: 700; margin-bottom: 14px; letter-spacing: -0.01em; }
.goals-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.goal-item {
display: flex; align-items: center; justify-content: space-between;
background: var(--card-bg-strong); border: 1px solid var(--card-border);
border-radius: 18px; padding: 12px 16px; transition: all .3s ease;
}
.goal-item label { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 15px; }
.goal-item input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--green); cursor: pointer; }
.goal-item .goal-amount { font-weight: 700; color: var(--text-secondary); }
.goal-item.done { border-color: color-mix(in srgb, var(--green) 45%, transparent); background: color-mix(in srgb, var(--green) 10%, transparent); }
.goal-item.editing { border-color: var(--accent-strong); }
.goal-item.done label span { text-decoration: line-through; color: var(--text-secondary); }
.goal-item.done .goal-amount { color: var(--green); }
.goal-item .goal-right { display: flex; align-items: center; gap: 10px; }
.goal-delete {
width: 26px; height: 26px; border-radius: 12px; font-size: 12.5px; opacity: .6;
display: flex; align-items: center; justify-content: center;
transition: opacity .15s ease, background .15s ease;
}
.goal-delete:hover { opacity: 1; background: var(--card-border); }
.add-goal-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.add-goal-row input {
background: var(--input-bg); border: 1px solid var(--card-border); border-radius: 12px;
padding: 10px 14px; font-size: 13.5px; outline: none;
}
.add-goal-row input#newGoalLabel { flex: 1 1 180px; }
.add-goal-row input#newGoalAmount { width: 90px; }
.add-goal-row input#newGoalInstallments { width: 90px; }
.empty-goals-msg { font-size: 12.5px; color: var(--text-secondary); padding: 6px 2px; }
.goal-installment-badge {
font-size: 11px; font-weight: 700; color: var(--accent-strong); background: var(--input-bg);
border-radius: 18px; padding: 2px 8px; margin-left: 8px;
}
.category-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.category-chip {
display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 18px;
background: var(--input-bg); border: 2px solid transparent; cursor: pointer;
font-size: 13.5px; font-weight: 600; color: var(--text-primary);
}
.category-chip.selected { border-color: var(--accent); background: var(--card-bg-strong); }
.category-chip-add { border-style: dashed; border-color: var(--card-border); color: var(--text-secondary); }
.category-more-link {
display: block; background: none; border: none; color: var(--accent-strong); font-size: 12.5px;
font-weight: 600; margin-top: 8px; padding: 2px 0; text-decoration: underline; cursor: pointer;
}
.add-category-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.add-category-row input#newCategoryEmoji { width: 56px; flex: 0 0 56px; text-align: center; }
.add-category-row input#newCategoryLabel { flex: 1 1 140px; }
.add-category-row input {
background: var(--input-bg); border: 1px solid var(--card-border); border-radius: 12px;
padding: 10px 12px; font-size: 13.5px; color: var(--text-primary); outline: none;
}
.add-category-row input:focus { border-color: var(--accent); }
/* ---------- Toolbar ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 14px 18px; }
#searchInput, #weekFilter {
background: var(--input-bg); border: 1px solid var(--card-border); border-radius: 12px;
padding: 10px 14px; font-size: 13.5px; outline: none;
}
/* Fallback por si el navegador no respeta "color-scheme" en el popup nativo del