/* === Layout variables === */ :root { --sidebar-width: 220px; --bottomnav-height: 60px; --topbar-height: 56px; } /* === Accent system — aplicado via data-accent en === */ /* default / teal */ :root, [data-accent="teal"] { --accent: #1D9E75; --accent-hover: #178a63; --accent-dim: rgba(29, 158, 117, 0.12); } [data-accent="sky"] { --accent: #38bdf8; --accent-hover: #0ea5e9; --accent-dim: rgba(56, 189, 248, 0.12); } [data-accent="violet"] { --accent: #a78bfa; --accent-hover: #8b5cf6; --accent-dim: rgba(167, 139, 250, 0.12); } [data-accent="amber"] { --accent: #f59e0b; --accent-hover: #d97706; --accent-dim: rgba(245, 158, 11, 0.12); } [data-accent="emerald"] { --accent: #0D9488; --accent-hover: #0f766e; --accent-dim: rgba(13, 148, 136, 0.12); } [data-accent="blue"] { --accent: #2563EB; --accent-hover: #1d4ed8; --accent-dim: rgba(37, 99, 235, 0.12); } /* === Base body: row layout on desktop === */ body { display: flex; flex-direction: row; min-height: 100vh; margin: 0; box-sizing: border-box; } /* === Sidebar (desktop only) === */ .app-sidebar { width: var(--sidebar-width); flex-shrink: 0; position: fixed; top: 0; left: 0; height: 100vh; display: flex; flex-direction: column; background-color: var(--bs-body-bg); border-right: 1px solid var(--bs-border-color); z-index: 100; } .sidebar-logo { padding: 20px 16px 16px; border-bottom: 1px solid var(--bs-border-color); } .sidebar-logo a { display: block; } #brand { width: 130px; height: auto; display: block; } .sidebar-nav { flex: 1; padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; } .sidebar-footer { padding: 8px; border-top: 1px solid var(--bs-border-color); display: flex; flex-direction: column; gap: 2px; } .sidebar-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; text-decoration: none; font-size: 14px; color: var(--bs-secondary-color); transition: background 0.15s, color 0.15s; border: none; background: none; cursor: pointer; width: 100%; text-align: left; } .sidebar-item:hover { background: var(--accent-dim); color: var(--accent); } .sidebar-item.active { background: var(--accent-dim); color: var(--accent); font-weight: 500; } .sidebar-item i { width: 18px; text-align: center; font-size: 15px; flex-shrink: 0; } .sidebar-theme-toggle { display: flex; gap: 4px; margin-top: 4px; } .sidebar-theme-toggle .sidebar-item { flex: 1; flex-direction: column; justify-content: center; padding: 8px 4px; font-size: 11px; gap: 3px; text-align: center; } .sidebar-theme-toggle .sidebar-item i { width: auto; } /* === App shell (wraps topbar + main + bottom nav) === */ .app-shell { flex: 1; display: flex; flex-direction: column; min-height: 100vh; margin-left: var(--sidebar-width); } .app-shell-guest { margin-left: 0; } /* === Mobile topbar (hidden on desktop) === */ .mobile-topbar { display: none; align-items: center; justify-content: space-between; padding: 0 16px; height: var(--topbar-height); background-color: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color); position: sticky; top: 0; z-index: 100; flex-shrink: 0; } .topbar-logo { height: 32px; width: auto; display: block; } .topbar-settings-btn { background: none; border: none; cursor: pointer; color: var(--bs-secondary-color); font-size: 18px; padding: 6px; border-radius: 8px; transition: color 0.15s; line-height: 1; } .topbar-settings-btn:hover { color: var(--accent); } /* === Campana de notificaciones (sidebar + topbar) === */ .topbar-acciones { display: flex; align-items: center; gap: 4px; } /* El badge se ancla al ícono, así que el contenedor tiene que ser el posicionado; en el sidebar eso es el , no el ítem entero. */ .notif-campana { position: relative; display: inline-flex; } .notif-badge { position: absolute; top: -5px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #d9534f; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; /* Nunca se come el click del botón/enlace que lo contiene. */ pointer-events: none; } /* === Main content area === */ .app-main { flex-grow: 1; padding: 20px; box-sizing: border-box; } /* === Footer === */ .app-footer { padding: 8px 16px 12px; text-align: center; font-size: 12px; color: var(--bs-secondary-color); } .app-footer p { margin: 0; } .footer-page-content { margin-bottom: 8px; } /* === Bottom nav (hidden on desktop) === */ .bottom-nav { display: none; position: fixed; bottom: 0; left: 0; width: 100%; height: var(--bottomnav-height); background-color: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color); align-items: center; z-index: 200; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .bottom-nav::-webkit-scrollbar { display: none; } .bn-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 0 0 auto; min-width: 62px; padding: 8px 6px; text-decoration: none; color: var(--bs-secondary-color); transition: color 0.15s; min-height: 44px; } .bn-item.active { color: var(--accent); } .bn-item i { font-size: 18px; } .bn-item span { font-size: 10px; letter-spacing: 0.2px; white-space: nowrap; } /* === Messages === */ #mensajes-container { width: 100%; } .alert-message-vencimiento { display: flex; justify-content: space-between; align-items: center; background-color: rgba(255, 205, 86, 0.8); padding: 8px 15px; border-radius: 5px; font-size: 14px; color: #007bff; } .mensaje-contenedor { flex: 1; } .close-alert { width: 30px; text-align: center; font-size: 14px; font-weight: normal; cursor: pointer; border: none; background: none; color: #333; } /* === Responsive breakpoint === */ @media (max-width: 767px) { body { flex-direction: column; } .app-sidebar { display: none; } .app-shell { margin-left: 0; padding-bottom: var(--bottomnav-height); } .mobile-topbar { display: flex; } .bottom-nav { display: flex; } .footer-page-content { display: none; } } /* === Botonera (menu de secciones) === */ .botonera-container { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 50vh; padding: 20px; } .botonera { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px; border-radius: 10px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); } .botonera button { width: 200px; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background 0.3s; text-align: center; } /* === Utility button bar === */ .botones { display: flex; justify-content: center; gap: 10px; padding: 10px; } .boton-icono { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bs-body-bg); color: var(--accent); box-shadow: 3px 3px 6px var(--relieve-dark), -3px -3px 6px var(--relieve-light); cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease; border: none; } .boton-icono:hover { transform: translateY(-1px); } .boton-icono i { font-size: 15px; color: var(--accent); } /* Los headers traen también la clase de módulo (fondo de acento): la anulamos para que adopten el estilo unificado. */ .movimientos.boton-icono, .tarjetas.boton-icono, .cuentas.boton-icono, .presupuestos.boton-icono, .inversiones.boton-icono, .prestamos.boton-icono, .perfil.boton-icono { background: var(--bs-body-bg); color: var(--accent); } .movimientos.boton-icono:hover, .tarjetas.boton-icono:hover, .cuentas.boton-icono:hover, .presupuestos.boton-icono:hover, .inversiones.boton-icono:hover, .prestamos.boton-icono:hover, .perfil.boton-icono:hover { background: var(--bs-body-bg); color: var(--accent); } /* === Module colors — todos usan el acento del tema === */ .movimientos, .presupuestos, .tarjetas, .cuentas, .inversiones, .perfil, .prestamos { background-color: var(--accent); color: #fff; } .movimientos:hover, .presupuestos:hover, .tarjetas:hover, .cuentas:hover, .inversiones:hover, .perfil:hover, .prestamos:hover { background-color: var(--accent-hover); } /* === Utility === */ .sin-estilo { color: inherit; text-decoration: none; } #bloque-botones { transition: margin-top 0.3s ease; } /* === FAB (botón flotante) === */ .fab-nuevo-movimiento { position: fixed; bottom: calc(var(--bottomnav-height) + 16px); right: 20px; width: 52px; height: 52px; border-radius: 50%; background-color: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; text-decoration: none; box-shadow: 0 4px 12px rgba(29, 158, 117, 0.35); z-index: 150; transition: transform 0.2s, box-shadow 0.2s; } .fab-nuevo-movimiento:hover { transform: scale(1.07); box-shadow: 0 6px 18px rgba(29, 158, 117, 0.5); color: #fff; } @media (min-width: 768px) { .fab-nuevo-movimiento { bottom: 24px; } } /* === Settings offcanvas === */ .settings-offcanvas { max-width: 300px; } .settings-section { margin-bottom: 24px; } .settings-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--bs-secondary-color); margin-bottom: 10px; } .settings-theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .settings-theme-btn { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-secondary-color); cursor: pointer; font-size: 12px; text-align: left; transition: border-color 0.15s, background 0.15s; } .settings-theme-btn:hover { border-color: var(--accent); color: var(--bs-body-color); } .settings-theme-btn.active { border-color: var(--accent); background: var(--accent-dim); color: var(--bs-body-color); } .theme-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } .settings-coming-soon { font-size: 12px; color: var(--bs-secondary-color); text-align: center; padding: 20px; border: 1px dashed var(--bs-border-color); border-radius: 8px; } /* === Sidebar: ajustes button === */ .sidebar-settings-btn { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; border: none; background: none; cursor: pointer; width: 100%; font-size: 14px; color: var(--bs-secondary-color); transition: background 0.15s, color 0.15s; } .sidebar-settings-btn:hover { background: var(--accent-dim); color: var(--accent); } .sidebar-settings-btn i { width: 18px; text-align: center; font-size: 15px; } /* === Dashboard (inicio) === */ .dashboard-balance-card { background-color: var(--bs-secondary-bg); border-radius: 12px; padding: 20px; margin-bottom: 16px; border: 1px solid var(--bs-border-color); } .balance-label { font-size: 11px; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; display: flex; justify-content: space-between; align-items: center; } .balance-amount { font-size: 2rem; font-weight: 500; color: var(--bs-body-color); margin: 2px 0 8px; } .balance-stats { display: flex; gap: 20px; flex-wrap: wrap; } .balance-stat { font-size: 13px; } .stat-income { color: var(--income); } .stat-expense { color: var(--expense); } /* Selector de período del balance */ .balance-periodo-tabs { display: inline-flex; gap: 2px; background: var(--bs-tertiary-bg, var(--bs-border-color)); border-radius: 8px; padding: 2px; margin: 10px 0 8px; } .balance-periodo-tab { background: none; border: none; font-size: 12px; color: var(--bs-secondary-color); padding: 4px 12px; border-radius: 6px; cursor: pointer; transition: background 0.15s, color 0.15s; } .balance-periodo-tab.active { background: var(--bs-secondary-bg); color: var(--bs-body-color); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .balance-periodo-desc { font-size: 11px; color: var(--bs-secondary-color); margin-bottom: 6px; } .dashboard-section-title { font-size: 11px; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: 0.5px; margin: 16px 0 4px; display: flex; justify-content: space-between; align-items: center; } .dashboard-mov-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--bs-border-color); } .dashboard-mov-item:last-child { border-bottom: none; } .mov-item-left { display: flex; align-items: center; gap: 10px; } .mov-icon-circle { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; background-color: var(--bs-secondary-bg); } .mov-desc { font-size: 14px; color: var(--bs-body-color); } .mov-meta { font-size: 11px; color: var(--bs-secondary-color); margin-top: 1px; } .mov-amount { font-size: 14px; font-weight: 500; white-space: nowrap; } .mov-amount.positive { color: var(--income); } .mov-amount.negative { color: var(--expense); } /* === Tarjetas por mes carousel (home) === */ .dashboard-tarjetas-card { background-color: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color); border-radius: 16px; padding: 16px 16px 12px; margin-bottom: 12px; } .tarj-carousel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .tarj-carousel-label { font-size: 12px; font-weight: 600; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: 0.05em; } .tarj-carousel-link { font-size: 12px; color: var(--accent); text-decoration: none; } .tarj-carousel-body { display: flex; align-items: center; gap: 4px; } .tarj-carousel-arrow { background: none; border: none; color: var(--accent); font-size: 16px; padding: 4px 6px; cursor: pointer; flex-shrink: 0; opacity: 0.75; transition: opacity 0.15s; } .tarj-carousel-arrow:hover { opacity: 1; } .tarj-carousel-content { flex: 1; min-width: 0; text-align: center; } .tarj-mes { font-size: 13px; color: var(--bs-secondary-color); margin-bottom: 2px; } .tarj-monto { font-size: 22px; font-weight: 600; color: var(--bs-body-color); line-height: 1.2; } .tarj-sub { font-size: 12px; color: var(--bs-secondary-color); margin-top: 2px; } .tarj-carousel-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; } .tarj-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bs-border-color); display: inline-block; } .tarj-dot.active { background: var(--accent); } /* === Presupuestos vigentes carousel === */ .dashboard-presupuestos-card { background-color: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color); border-radius: 16px; padding: 16px 16px 12px; margin-bottom: 12px; } /* === Card: Gastos por etiqueta === */ .dashboard-tags-card { background-color: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color); border-radius: 16px; padding: 14px 16px; margin-bottom: 12px; } .tags-card-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; } .tags-card-label { font-size: 12px; font-weight: 600; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: 0.05em; } .tags-card-total { font-size: 14px; font-weight: 700; color: var(--bs-body-color); } .tags-card-body { display: flex; align-items: center; gap: 16px; } .tags-chart-wrap { position: relative; width: 96px; height: 96px; flex-shrink: 0; } .tags-legend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .tags-legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; } .tags-legend-dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; } .tags-legend-name { color: var(--bs-secondary-color); text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.03em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tags-legend-pct { margin-left: auto; font-weight: 700; font-size: 13px; color: var(--bs-body-color); } .tags-legend-amt { color: var(--bs-secondary-color); font-size: 11px; white-space: nowrap; min-width: 62px; text-align: right; } .tags-legend-empty { font-size: 13px; color: var(--bs-secondary-color); } @media (max-width: 420px) { .tags-card-body { gap: 12px; } .tags-chart-wrap { width: 84px; height: 84px; } } /* Desktop: el card no se estira a todo el ancho; queda compacto como en mobile. */ @media (min-width: 768px) { .dashboard-tags-card { max-width: 460px; } } .pres-carousel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .pres-carousel-label { font-size: 12px; font-weight: 600; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: 0.05em; } .pres-carousel-link { font-size: 12px; color: var(--accent); text-decoration: none; } .pres-carousel-body { display: flex; align-items: center; gap: 4px; } .pres-carousel-arrow { background: none; border: none; color: var(--accent); font-size: 16px; padding: 4px 6px; cursor: pointer; flex-shrink: 0; opacity: 0.75; transition: opacity 0.15s; } .pres-carousel-arrow:hover { opacity: 1; } .pres-carousel-content { flex: 1; min-width: 0; } .pres-nombre { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; } .pres-fechas { font-size: 11px; color: var(--bs-secondary-color); margin-bottom: 10px; } .pres-progress-wrap { background: var(--bs-border-color); border-radius: 8px; height: 8px; overflow: hidden; margin-bottom: 8px; } .pres-progress-bar { height: 100%; background: rgba(0, 0, 0, 0.35); border-radius: 8px; transition: width 0.35s ease; } .pres-progress-bar.over-budget { background: #dc3545; } .pres-stats { display: flex; justify-content: space-between; font-size: 12px; color: var(--bs-secondary-color); } .pres-carousel-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; } .pres-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bs-border-color); display: inline-block; } .pres-dot.active { background: var(--accent); } /* === Préstamos vigentes carousel (home) === */ .dashboard-prestamos-card { background-color: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color); border-radius: 16px; padding: 16px 16px 12px; margin-bottom: 12px; } .prest-carousel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .prest-carousel-label { font-size: 12px; font-weight: 600; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: 0.05em; } .prest-carousel-link { font-size: 12px; color: var(--accent); text-decoration: none; } .prest-carousel-body { display: flex; align-items: center; gap: 4px; } .prest-carousel-arrow { background: none; border: none; color: var(--accent); font-size: 18px; padding: 4px 6px; cursor: pointer; opacity: 0.75; transition: opacity 0.15s; } .prest-carousel-arrow:hover { opacity: 1; } .prest-carousel-content { flex: 1; min-width: 0; } .prest-nombre { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; } .prest-tipo-badge { display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 20px; color: #fff; margin-bottom: 8px; } .prest-tipo-badge.prestado { background-color: #0d6efd; } .prest-tipo-badge.recibido { background-color: #6f42c1; } .prest-progress-wrap { background: var(--bs-border-color); border-radius: 8px; height: 8px; overflow: hidden; margin-bottom: 8px; } .prest-progress-bar { height: 100%; background: var(--accent); border-radius: 8px; transition: width 0.35s ease; } .prest-stats { display: flex; justify-content: space-between; font-size: 12px; color: var(--bs-secondary-color); } .prest-carousel-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; } .prest-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bs-border-color); display: inline-block; } .prest-dot.active { background: var(--accent); } /* === Privacy toggle === */ .btn-privacy { background: none; border: none; cursor: pointer; color: var(--bs-secondary-color); font-size: 14px; padding: 4px 6px; border-radius: 6px; transition: color 0.15s; line-height: 1; flex-shrink: 0; text-transform: none; letter-spacing: 0; } .btn-privacy:hover { color: var(--bs-body-color); } .privacy-val { font-variant-numeric: tabular-nums; } /* === Page transition loader === */ #page-loader { position: fixed; inset: 0; z-index: 9999; background-color: var(--bs-body-bg); display: flex; align-items: center; justify-content: center; transition: opacity 0.22s ease; pointer-events: all; } #page-loader.loader-out { opacity: 0; pointer-events: none; } .loader-coin { height: 56px; width: auto; animation: coinFlipIn 0.48s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .loader-coin.flip-out { animation: coinFlipOut 0.22s ease-in forwards; } @keyframes coinFlipIn { 0% { transform: perspective(600px) rotateY(-90deg) scale(0.85); opacity: 0; } 65% { transform: perspective(600px) rotateY(8deg) scale(1.04); opacity: 1; } 100% { transform: perspective(600px) rotateY(0deg) scale(1); opacity: 1; } } @keyframes coinFlipOut { 0% { transform: perspective(600px) rotateY(0deg) scale(1); opacity: 1; } 100% { transform: perspective(600px) rotateY(90deg) scale(0.85); opacity: 0; } } /* ============================================================ === "Relieve" — profundidad sobre el minimalismo === Vidrio sobrio en el héroe · relieve neo-soft en superficies · firma de marca (moneda) · todo vía tokens por tema. ============================================================ */ :root { /* Relieve neumórfico — sombras derivadas del fondo del tema */ --neu-dark: color-mix(in srgb, var(--bs-body-bg) 58%, #000); --neu-light: color-mix(in srgb, var(--bs-body-bg) 82%, #fff); --card-shadow: 7px 7px 16px var(--neu-dark), -7px -7px 16px var(--neu-light); --card-shadow-hover: 10px 10px 22px var(--neu-dark), -10px -10px 22px var(--neu-light); /* Vidrio del héroe */ --hero-bg-a: color-mix(in srgb, var(--bs-secondary-bg) 86%, var(--accent) 14%); --hero-bg-b: var(--bs-secondary-bg); --hero-border: color-mix(in srgb, var(--accent) 34%, var(--bs-border-color)); --hero-shadow: 0 16px 38px -18px rgba(0, 0, 0, 0.6); /* Chips de ícono repujados */ --relieve-dark: var(--neu-dark); --relieve-light: var(--neu-light); --brand-watermark-opacity: 0.5; /* Colores semánticos ingreso / gasto — independientes del acento */ --income: #2FBE86; --expense: #E8736E; } [data-bs-theme="light"] { --neu-dark: color-mix(in srgb, var(--bs-body-bg) 90%, #000); --neu-light: #ffffff; --hero-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.22); --brand-watermark-opacity: 0.12; --income: #1E9E72; --expense: #D65650; } /* Superficie común de los cards del dashboard */ .dashboard-balance-card, .dashboard-tarjetas-card, .dashboard-presupuestos-card, .dashboard-prestamos-card, .dashboard-tags-card { position: relative; overflow: hidden; background: var(--bs-body-bg); border: none; border-radius: 18px; box-shadow: var(--card-shadow); transition: transform 0.18s ease, box-shadow 0.18s ease; } /* Hover-lift solo con puntero real (desktop) */ @media (hover: hover) and (min-width: 768px) { .dashboard-balance-card:hover, .dashboard-tarjetas-card:hover, .dashboard-presupuestos-card:hover, .dashboard-prestamos-card:hover, .dashboard-tags-card:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); } } /* Héroe: card de balance total, con borde teñido + firma de marca */ .dashboard-hero { position: relative; overflow: hidden; background: linear-gradient(158deg, var(--hero-bg-a), var(--hero-bg-b)); border: 1px solid var(--hero-border); border-radius: 20px; box-shadow: var(--hero-shadow); } .dashboard-hero > * { position: relative; z-index: 1; } .dashboard-hero::before { content: ""; position: absolute; top: -20px; right: -24px; width: 156px; height: 156px; background-color: var(--accent); -webkit-mask: url(/static/core/img/coin-mark.svg) center / contain no-repeat; mask: url(/static/core/img/coin-mark.svg) center / contain no-repeat; opacity: var(--brand-watermark-opacity); pointer-events: none; z-index: 0; } /* Relieve neo-soft en los circulitos de ícono de movimientos */ .mov-icon-circle { background-color: var(--bs-body-bg); box-shadow: 4px 4px 8px var(--relieve-dark), -4px -4px 8px var(--relieve-light); } /* Íconos grandes dibujados en los cards (firma gráfica del acento) */ .card-bg-icon { position: absolute; right: 18px; bottom: 14px; font-size: 58px; line-height: 1; color: var(--accent); opacity: 0.28; pointer-events: none; z-index: 0; } /* El contenido real por encima del ícono de fondo */ .dashboard-balance-card > *:not(.card-bg-icon), .dashboard-tarjetas-card > *:not(.card-bg-icon), .dashboard-presupuestos-card > *:not(.card-bg-icon), .dashboard-prestamos-card > *:not(.card-bg-icon), .dashboard-tags-card > *:not(.card-bg-icon) { position: relative; z-index: 1; } /* En modales de confirmación, la acción segura (Cancelar) toma el acento para contrastar con la acción peligrosa (Eliminar, en rojo). */ .modal-footer .btn-secondary { background-color: var(--accent); border-color: var(--accent); color: #fff; } .modal-footer .btn-secondary:hover, .modal-footer .btn-secondary:focus { background-color: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }