/* * theme.css — WRITTEN BY THE PLATFORM. Do not edit. * * Palette: Your colours (custom) * Source colours: #160b07 #3d2f28 #faf3ec #a04f31 #a7593a #ffffff * * Every value below is either one of those five or derived from them, and each * one is contrast-corrected against this palette's own background. Consume * them with var(--token); never write a colour value in app code. */ :root { --canvas: #faf3ec; --surface: #fdfaf6; --surface-2: #efe7e1; --border: #dad3cc; --border-strong: #b6ada7; --ink: #3d2f28; --muted: #746a64; --accent: #a04f31; --accent-hover: #88432a; --accent-ink: #ffffff; --accent-text: #a7593a; --accent-strong: #93492d; --accent-soft: #eddcd2; --accent-border: #d2a998; --success: #15803d; --success-ink: #ffffff; --success-soft: #dfe5d7; --success-strong: #116d34; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #f2e0d1; --warning-strong: #994607; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #f2d9d3; --danger-strong: #b91c1c;} /* The same palette on a dark page — written here, never by the app. It applies while carries data-theme="dark", which the platform's own toggle sets and remembers; an app that never renders that toggle is exactly as it was. Do not repoint any of these from app code: a token that references another token here is a cycle, and CSS makes every property in a cycle invalid. */ html[data-theme="dark"] { --canvas: #160b07; --surface: #2d2320; --surface-2: #221713; --border: #372d2a; --border-strong: #5c5451; --ink: #faf3ec; --muted: #9f9690; --accent: #a04f31; --accent-hover: #ae6950; --accent-ink: #ffffff; --accent-text: #af6a50; --accent-strong: #bb816b; --accent-soft: #341a10; --accent-border: #542a1a; --success: #15803d; --success-ink: #ffffff; --success-soft: #162513; --success-strong: #499c68; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #391b07; --warning-strong: #c57a40; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #3a0f0c; --danger-strong: #d16969; } /* ==================================================================== * app.css — Billullos * * Character: cálido y cercano, préstamo de barrio, con el pulido de una * app de billetera digital — tarjeta de saldo con degradado, accesos * rápidos circulares, listas de contacto con avatar, botones tipo píldora * en las acciones principales, y una navegación inferior fija que hace * que la app se sienta nativa en el celular. * ==================================================================== */ :root { /* Soft, hand-made feel: rounder corners than the system default, a gentler ramp on the headings, and a touch more breathing room between blocks. */ --radius-sm: 10px; --radius: 16px; --radius-lg: 22px; --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 8px 20px color-mix(in srgb, var(--ink) 5%, transparent); --shadow-raised: 0 12px 28px color-mix(in srgb, var(--ink) 12%, transparent); --dur-1: 120ms; --dur-2: 200ms; } /* ---- App shell (custom: a topbar + a fixed bottom tab bar, no sidebar) --- */ .app-shell { display: flex; flex-direction: column; min-height: 100dvh; } .app-topbar .brand-mark { background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 45%, transparent); } .app-shell.has-bottom-nav .content { padding-bottom: calc(var(--s-11) + 76px + env(safe-area-inset-bottom, 0px)); } /* ---- Buttons: filled actions read as a pill, the rest stay as-is ------ */ .btn-primary, .btn-danger, .btn-soft { border-radius: var(--radius-pill); } /* ---- Bottom navigation ---------------------------------------------- */ .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; justify-content: space-around; gap: var(--s-1); padding: var(--s-2) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(1.6) blur(14px); border-top: 1px solid var(--border); box-shadow: 0 -8px 24px color-mix(in srgb, var(--ink) 6%, transparent); } .bottom-nav-item { display: flex; flex-direction: column; align-items: center; flex: 1 1 0; min-width: 0; padding: var(--s-2) 0; border-radius: var(--radius); color: var(--muted); font-size: var(--t-xs); font-weight: var(--fw-medium); text-decoration: none; transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } .bottom-nav-item .icon { width: 22px; height: 22px; } .bottom-nav-item span { margin-top: 2px; } .bottom-nav-item:hover { color: var(--ink); background: var(--surface-2); } .bottom-nav-item.is-active { color: var(--accent-strong); background: var(--accent-soft); } .bottom-nav-item:active { transform: scale(0.94); } /* On a wide screen a bottom tab bar reads as a mistake, not a phone habit — so past tablet width it becomes a slim, centred bar under the topbar instead of floating over the content. */ @media (min-width: 720px) { .bottom-nav { position: sticky; top: 60px; flex: 0 0 auto; justify-content: center; gap: var(--s-2); border-top: none; border-bottom: 1px solid var(--border); box-shadow: none; order: 1; } .bottom-nav-item { flex: 0 0 auto; flex-direction: row; padding: var(--s-2) var(--s-4); } .bottom-nav-item span { margin-top: 0; margin-left: var(--s-2); } .app-shell.has-bottom-nav .content { padding-bottom: var(--s-11); order: 2; } } /* ---- Hero band (used once, on Inicio) -------------------------------- A wallet-style balance card: a soft decorative wash behind the numbers, the figure itself set large, and a row of circular quick actions below — the one deliberate borrow from the reference wallet apps. */ .hero-band { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: var(--s-7) var(--s-6); box-shadow: var(--shadow-raised); } .hero-band::before, .hero-band::after { content: ""; position: absolute; border-radius: 50%; background: color-mix(in srgb, currentColor 14%, transparent); pointer-events: none; } .hero-band::before { width: 220px; height: 220px; top: -110px; right: -60px; } .hero-band::after { width: 140px; height: 140px; bottom: -80px; right: 70px; background: color-mix(in srgb, currentColor 10%, transparent); } .hero-band > * { position: relative; } .hero-eyebrow { opacity: 0.85; } .hero-label { margin-top: var(--s-1); font-size: var(--t-xs); font-weight: var(--fw-semi); text-transform: uppercase; letter-spacing: var(--track-caps); opacity: 0.75; } .hero-amount { margin-top: var(--s-1); font-size: var(--t-4xl); font-weight: var(--fw-semi); letter-spacing: var(--track-tight); line-height: 1.1; font-variant-numeric: tabular-nums; word-break: break-word; } @media (min-width: 480px) { .hero-amount { font-size: var(--t-5xl); } } .hero-date { display: inline-flex; align-items: center; gap: var(--s-1); height: 30px; padding: 0 var(--s-3); border-radius: var(--radius-pill); background: color-mix(in srgb, currentColor 16%, transparent); font-size: var(--t-xs); font-weight: var(--fw-medium); white-space: nowrap; } .hero-date .icon { width: 14px; height: 14px; } .hero-sub { margin-top: var(--s-2); opacity: 0.9; font-size: var(--t-sm); } .hero-title { font-size: var(--t-3xl); font-weight: var(--fw-semi); letter-spacing: var(--track-tight); margin-top: var(--s-1); } /* ---- Quick actions (inside the hero) ---------------------------------- */ .quick-actions { display: flex; gap: var(--s-2); } .quick-action { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); flex: 1 1 0; min-width: 0; padding: var(--s-2) 0; border: 0; background: none; color: inherit; text-decoration: none; font-size: var(--t-xs); font-weight: var(--fw-medium); cursor: pointer; transition: transform var(--dur-1) var(--ease); } .quick-action:hover { transform: translateY(-2px); } .quick-action:active { transform: translateY(0) scale(0.96); } .quick-action-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: color-mix(in srgb, currentColor 16%, transparent); transition: background var(--dur-1) var(--ease); } .quick-action:hover .quick-action-icon { background: color-mix(in srgb, currentColor 24%, transparent); } .quick-action span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- Dashboard stat cards --------------------------------------------- */ .stat-card { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); } .stat-icon { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius); } .alert-row { display: block; text-decoration: none; color: inherit; transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); } .alert-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-raised); } /* ---- List rows (Clientes, Usuarios): avatar + text + trailing content -- */ .list-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-6); border-bottom: 1px solid var(--border); transition: background var(--dur-1) var(--ease); } .list-row:last-child { border-bottom: 0; } .list-row:hover { background: var(--surface-2); } .list-row-body { min-width: 0; flex: 1 1 auto; } .list-row-title { font-weight: var(--fw-medium); display: flex; align-items: center; gap: var(--s-2); } .list-row-sub { margin-top: 2px; font-size: var(--t-xs); color: var(--muted); display: flex; align-items: center; gap: var(--s-1); min-width: 0; } .list-row-sub .truncate { min-width: 0; } .list-row-sub .sep { opacity: 0.5; } .list-row-end { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s-2); } /* ---- Loan detail grid (inside the accordion) --------------------------- */ .loan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-5); margin-top: var(--s-2); } @media (min-width: 560px) { .loan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .loan-head-main { min-width: 0; flex: 1 1 auto; display: flex; align-items: center; gap: var(--s-3); } .loan-head-text { min-width: 0; flex: 1 1 auto; } .loan-head-side { flex: 0 0 auto; text-align: right; } .divider { height: 1px; background: var(--border); margin: var(--s-5) 0; } /* ---- Payments list ------------------------------------------------------ */ .payment-list { display: flex; flex-direction: column; margin-top: var(--s-2); } .payment-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-1); border-bottom: 1px solid var(--border); } .payment-row + .payment-row { margin-top: var(--s-1); } .payment-row:last-child { border-bottom: 0; } .payment-form { border-top: 1px dashed var(--border); padding-top: var(--s-4); margin-top: var(--s-4); } /* ---- Auth screen --------------------------------------------------------- */ .auth-wrap { position: relative; min-height: calc(100dvh - 60px); display: flex; align-items: center; justify-content: center; padding: var(--s-6) var(--s-4); overflow: hidden; } .auth-wrap::before, .auth-wrap::after { content: ""; position: absolute; border-radius: 50%; z-index: 0; background: var(--accent-soft); } .auth-wrap::before { width: 320px; height: 320px; top: -140px; left: -120px; } .auth-wrap::after { width: 260px; height: 260px; bottom: -140px; right: -100px; background: color-mix(in srgb, var(--accent) 10%, transparent); } .auth-card { position: relative; z-index: 1; width: min(420px, 100%); padding: var(--s-8) var(--s-6); } .auth-mark { width: 64px; height: 64px; margin: 0 auto var(--s-4); display: grid; place-items: center; border-radius: var(--radius-lg); background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 40%, transparent); }