/* ========================================================================== Nexo Finanzas — sistema visual Tokens conmutables por atributos en : data-theme, data-accent, data-density. El usuario los cambia desde Ajustes y se guardan por usuario. ========================================================================== */ :root { --accent-h: 285; --accent-c: 0.17; --r-sm: 9px; --r-md: 13px; --r-lg: 18px; --r-xl: 22px; --pad: 16px; --row: 46px; --gap: 14px; --fs: 14px; --fs-sm: 12.5px; --fs-xs: 11px; --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; } [data-density="compacta"] { --pad: 11px; --row: 37px; --gap: 10px; --fs: 13px; --fs-sm: 11.5px; --r-lg: 14px; --r-xl: 16px; } [data-accent="menta"] { --accent-h: 162; --accent-c: 0.15; } [data-accent="ambar"] { --accent-h: 80; --accent-c: 0.15; } [data-accent="coral"] { --accent-h: 28; --accent-c: 0.16; } [data-accent="acero"] { --accent-h: 250; --accent-c: 0.12; } /* Oscuro es el tema base */ :root, [data-theme="dark"] { --bg: oklch(0.16 0.018 278); --bg-2: oklch(0.185 0.019 278); --surface: oklch(0.205 0.02 278); --surface-2: oklch(0.245 0.022 278); --surface-3: oklch(0.29 0.022 278); --line: oklch(0.30 0.018 278); --line-soft: oklch(0.24 0.018 278); --ink: oklch(0.97 0.005 278); --ink-2: oklch(0.82 0.014 278); --muted: oklch(0.68 0.02 278); --accent: oklch(0.70 var(--accent-c) var(--accent-h)); --accent-ink: oklch(0.16 0.018 278); --accent-soft: oklch(0.29 calc(var(--accent-c) * 0.35) var(--accent-h)); --accent-line: oklch(0.45 calc(var(--accent-c) * 0.6) var(--accent-h)); --pos: oklch(0.80 0.15 155); --pos-soft: oklch(0.26 0.05 155); --neg: oklch(0.79 0.14 25); --neg-soft: oklch(0.26 0.05 25); --info: oklch(0.78 0.12 250); --info-soft: oklch(0.26 0.04 250); --warn: oklch(0.84 0.13 85); --shadow: 0 20px 45px oklch(0.09 0.02 278 / 0.5); color-scheme: dark; } [data-theme="light"] { --bg: oklch(0.975 0.004 278); --bg-2: oklch(0.955 0.005 278); --surface: oklch(1 0 0); --surface-2: oklch(0.968 0.005 278); --surface-3: oklch(0.94 0.007 278); --line: oklch(0.90 0.008 278); --line-soft: oklch(0.94 0.006 278); --ink: oklch(0.24 0.02 278); --ink-2: oklch(0.38 0.02 278); --muted: oklch(0.55 0.02 278); --accent: oklch(0.55 var(--accent-c) var(--accent-h)); --accent-ink: oklch(0.99 0 0); --accent-soft: oklch(0.95 calc(var(--accent-c) * 0.25) var(--accent-h)); --accent-line: oklch(0.82 calc(var(--accent-c) * 0.4) var(--accent-h)); --pos: oklch(0.52 0.15 155); --pos-soft: oklch(0.94 0.05 155); --neg: oklch(0.55 0.18 25); --neg-soft: oklch(0.95 0.04 25); --info: oklch(0.52 0.14 250); --info-soft: oklch(0.95 0.04 250); --warn: oklch(0.60 0.14 75); --shadow: 0 18px 40px oklch(0.55 0.03 278 / 0.16); color-scheme: light; } * { box-sizing: border-box; } html { font-family: var(--sans); background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; background: var(--bg); font-size: var(--fs); -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, p { margin: 0; } h1 { font-size: 19px; letter-spacing: -0.025em; } h2 { font-size: 15px; letter-spacing: -0.015em; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; border: 0; background: none; } ::placeholder { color: var(--muted); opacity: 0.75; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .eyebrow { font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); } .muted { color: var(--muted); } .pos { color: var(--pos); } .neg { color: var(--neg); } .info { color: var(--info); } .right { text-align: right; } .grow { flex-grow: 1; min-width: 0; } .hide { display: none !important; } /* Modo privado: difumina cantidades, deja el contexto legible */ body.is-private .money { filter: blur(7px); user-select: none; cursor: help; } /* --------------------------------------------------------------- Estructura */ .shell { display: flex; min-height: 100vh; } .side { width: 232px; flex-shrink: 0; background: var(--bg-2); border-right: 1px solid var(--line-soft); padding: 16px 12px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 0; height: 100vh; } .brand { display: flex; align-items: center; gap: 10px; padding: 2px 6px; } .brand-mark { width: 30px; height: 30px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; flex-shrink: 0; } .brand strong { font-size: 15px; letter-spacing: -0.02em; } .brand .tag { margin-left: auto; font-size: 10px; font-weight: 600; color: var(--muted); padding: 3px 6px; border-radius: 6px; background: var(--surface-2); } .nav { display: flex; flex-direction: column; gap: 2px; } .nav-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 10px 8px 4px; } .nav-item { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-radius: var(--r-md); color: var(--ink-2); font-size: var(--fs); font-weight: 500; width: 100%; text-align: left; } .nav-item:hover { background: var(--surface); text-decoration: none; color: var(--ink); } .nav-item.is-active { background: var(--accent-soft); color: var(--ink); font-weight: 600; } .nav-item .count { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); } .nav-item svg { flex-shrink: 0; } .side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; } .privacy-card { padding: 12px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; } .privacy-card .head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .privacy-card small { font-size: var(--fs-xs); line-height: 1.4; color: var(--muted); } .switch { width: 40px; height: 23px; border-radius: 12px; padding: 2px; background: var(--surface-3); display: flex; justify-content: flex-start; transition: background 0.15s ease; } .switch i { width: 19px; height: 19px; border-radius: 10px; background: var(--ink); display: block; transition: transform 0.15s ease; } .switch.is-on { background: var(--accent); justify-content: flex-end; } .switch.is-on i { background: var(--accent-ink); } .main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; } .top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-soft); min-height: 62px; } .top-title { display: flex; flex-direction: column; gap: 1px; } .top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; } .page { padding: 18px 20px 90px; display: flex; flex-direction: column; gap: var(--gap); } /* ---------------------------------------------------------------- Controles */ .btn { height: 38px; padding: 0 14px; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); } .btn:hover { background: var(--surface-3); text-decoration: none; } .btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; } .btn-primary:hover { background: var(--accent); filter: brightness(1.08); } .btn-ghost { background: transparent; border-color: transparent; color: var(--muted); } .btn-ghost:hover { background: var(--surface-2); color: var(--ink); } .btn-danger { background: var(--neg-soft); color: var(--neg); border-color: transparent; } .btn-block { width: 100%; } .btn-lg { height: 52px; border-radius: var(--r-lg); font-size: 15px; } .btn-sm { height: 32px; padding: 0 10px; font-size: var(--fs-xs); } .btn-icon { width: 38px; padding: 0; } .kbd { font-family: var(--mono); font-size: 10.5px; padding: 3px 6px; border-radius: 6px; background: var(--surface-3); color: var(--ink-2); } .seg { display: flex; gap: 3px; padding: 3px; border-radius: var(--r-md); background: var(--surface-2); } .seg a, .seg button { height: 30px; padding: 0 12px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; } .seg a:hover, .seg button:hover { color: var(--ink); text-decoration: none; } .seg .is-on { background: var(--surface-3); color: var(--ink); } .chip { height: 34px; padding: 0 12px; border-radius: var(--r-md); display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); font-weight: 500; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); } .chip:hover { border-color: var(--accent-line); text-decoration: none; color: var(--ink); } .chip.is-on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--ink); font-weight: 600; } .chip .dot { width: 7px; height: 7px; border-radius: 4px; flex-shrink: 0; } .chip .num { color: var(--muted); } .badge { font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 7px; background: var(--surface-2); color: var(--muted); } .badge.pos { background: var(--pos-soft); color: var(--pos); } .badge.neg { background: var(--neg-soft); color: var(--neg); } .badge.info { background: var(--info-soft); color: var(--info); } .dot-mark { width: 30px; height: 30px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #10131f; background-size: cover; background-position: center; } .dot-mark.has-image { color: transparent; } .dot-mark img { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; } /* ------------------------------------------------------------------ Tarjetas */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--pad); display: flex; flex-direction: column; gap: 12px; } .card.flush { padding: 0; overflow: hidden; } .card-head { display: flex; align-items: center; gap: 10px; } .card.flush .card-head { padding: var(--pad) var(--pad) 0; } .card-head .grow { display: flex; flex-direction: column; gap: 1px; } .cols { display: grid; gap: var(--gap); } .cols-2 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stack { display: flex; flex-direction: column; gap: var(--gap); } .kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); } .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 13px 14px; display: flex; flex-direction: column; gap: 6px; } .kpi .value { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; } .kpi .foot { font-size: var(--fs-xs); color: var(--muted); } .wealth { border-radius: var(--r-xl); padding: var(--pad); background: linear-gradient(150deg, var(--accent-soft), var(--surface)); border: 1px solid var(--accent-line); display: flex; flex-direction: column; gap: 8px; } .wealth .value { font-size: 32px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; } .wealth svg { width: 100%; height: 54px; margin-top: 2px; } /* --------------------------------------------------------------- Movimientos */ .daygroup-head { display: flex; align-items: center; gap: 10px; padding: 8px var(--pad); background: var(--bg-2); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); font-size: var(--fs-sm); font-weight: 600; position: sticky; top: 62px; z-index: 5; } .daygroup-head .rule { flex-grow: 1; height: 1px; background: var(--line-soft); } .row { display: flex; align-items: center; gap: 12px; padding: 9px var(--pad); min-height: var(--row); border-bottom: 1px solid var(--line-soft); width: 100%; text-align: left; } .row:last-child { border-bottom: 0; } .row:hover { background: var(--surface-2); } .row.is-new { animation: rowIn 1.6s ease; } @keyframes rowIn { 0% { background: var(--accent-soft); } 100% { background: transparent; } } .row-icon { width: 30px; height: 30px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; } .row-icon.expense { background: var(--neg-soft); color: var(--neg); } .row-icon.income, .row-icon.interest, .row-icon.refund { background: var(--pos-soft); color: var(--pos); } .row-icon.transfer { background: var(--info-soft); color: var(--info); } .row-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex-grow: 1; } .row-main strong { font-size: var(--fs); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row-main small { font-size: var(--fs-xs); color: var(--muted); } .row-side { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; } .row-amount { font-size: var(--fs); font-weight: 600; white-space: nowrap; } .filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .filters .sep { width: 1px; height: 22px; background: var(--line); } .search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); color: var(--muted); min-width: 200px; } .search input { border: 0; background: none; outline: none; flex-grow: 1; min-width: 0; color: var(--ink); font-size: var(--fs-sm); } .table-scroll { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } th { text-align: left; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 10px var(--pad); border-bottom: 1px solid var(--line); white-space: nowrap; } td { padding: 10px var(--pad); border-bottom: 1px solid var(--line-soft); vertical-align: middle; } tr:last-child td { border-bottom: 0; } tbody tr:hover { background: var(--surface-2); } /* ------------------------------------------------------------------ Cuentas */ .acct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--gap); align-items: start; } .acct-card { display: flex; flex-direction: column; gap: 11px; } .acct-card.is-card { background: var(--neg-soft); border-color: color-mix(in oklab, var(--neg) 35%, transparent); } .acct-card .balance { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; } .acct-card .actions { display: flex; gap: 8px; } .acct-card .actions .btn { flex-grow: 1; } .bar { height: 6px; border-radius: 4px; background: var(--surface-3); overflow: hidden; } .bar i { display: block; height: 100%; border-radius: 4px; background: var(--accent); } .bar-legend { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--muted); } .inline-panel { padding: 13px; border-radius: var(--r-lg); background: var(--accent-soft); border: 1px solid var(--accent-line); display: flex; flex-direction: column; gap: 10px; } /* ------------------------------------------------------------------ Formularios */ .form { display: flex; flex-direction: column; gap: 12px; } .form label, .field { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="url"], input[type="file"], select, textarea { height: 44px; padding: 0 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); font-size: var(--fs); font-weight: 400; width: 100%; } textarea { height: auto; padding: 10px 12px; resize: vertical; } input[type="file"] { padding: 9px 12px; height: auto; font-size: var(--fs-sm); color: var(--muted); } select { appearance: none; background-image: none; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-line); } .optional { font-weight: 400; color: var(--muted); font-size: var(--fs-xs); } .input-prefix { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); } .input-prefix span { color: var(--muted); } .input-prefix input { border: 0; background: none; height: auto; padding: 0; } .check { flex-direction: row !important; align-items: center; gap: 9px; } .check input { width: 18px; height: 18px; accent-color: var(--accent); } /* ------------------------------------------- Captura rápida (hoja + teclado) */ .quickbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .quickbar .input-prefix { flex-grow: 0; width: 150px; } .quickbar input[type="text"] { flex-grow: 1; width: auto; min-width: 160px; } .overlay { position: fixed; inset: 0; z-index: 60; background: oklch(0.12 0.02 278 / 0.62); backdrop-filter: blur(3px); display: none; align-items: flex-end; justify-content: center; } .overlay.is-open { display: flex; } @media (min-width: 720px) { .overlay { align-items: center; } } .sheet { width: 100%; max-width: 460px; max-height: 94vh; overflow: auto; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--shadow); display: flex; flex-direction: column; animation: sheetIn 0.18s ease; } @media (min-width: 720px) { .sheet { border-radius: var(--r-xl); } } @keyframes sheetIn { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } } .sheet.wide { max-width: 620px; } .sheet-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; } .sheet-body { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 12px; } .sheet-foot { padding: 12px 16px 16px; border-top: 1px solid var(--line-soft); background: var(--surface); display: flex; flex-direction: column; gap: 10px; } /* Selección sin JavaScript: radio oculto + estado en el elemento hermano */ .pick label { position: relative; display: inline-flex; cursor: pointer; } .pick input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .pick input:checked + .chip { background: var(--accent-soft); border-color: var(--accent-line); color: var(--ink); font-weight: 600; } .pick input:focus-visible + .chip, .pick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; } .type-seg { display: flex; gap: 6px; } .type-seg label { flex-grow: 1; } .type-seg span { width: 100%; height: 42px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); background: var(--surface); border: 1px solid var(--line); } .type-seg input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .amount-display { display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 4px 0 2px; } .amount-display .sign { font-size: 26px; font-weight: 500; opacity: 0.5; } .amount-display .value { font-size: 46px; font-weight: 600; letter-spacing: -0.035em; line-height: 1; } .amount-display .cur { font-size: 11px; font-weight: 600; color: var(--muted); padding: 4px 7px; border-radius: 7px; background: var(--surface-2); } .amount-display.income .value, .amount-display.income .sign { color: var(--pos); } .bumps { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .bumps button { height: 32px; padding: 0 12px; border-radius: var(--r-sm); font-size: var(--fs-sm); background: var(--surface-2); color: var(--muted); } .bumps button:hover { color: var(--ink); } .chips-row { display: flex; flex-wrap: wrap; gap: 8px; } .chips-scroll { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .chips-scroll::-webkit-scrollbar { display: none; } .chips-scroll .chip { flex-shrink: 0; } .keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .keypad button { height: 52px; border-radius: var(--r-md); background: var(--surface-2); font-family: var(--mono); font-size: 21px; font-weight: 500; display: grid; place-items: center; } .keypad button:active { background: var(--surface-3); } .more-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 44px; padding: 0 14px; border-radius: var(--r-md); background: var(--surface); border: 1px dashed var(--line); font-size: var(--fs-sm); color: var(--muted); } /* ------------------------------------------------------ Barra de comandos ⌘K */ .palette-wrap { align-items: flex-start; padding-top: 12vh; } .palette { width: 100%; max-width: 620px; margin: 0 16px; background: var(--surface); border: 1px solid var(--accent-line); border-radius: var(--r-xl); box-shadow: var(--shadow); overflow: hidden; } .palette-input { display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-bottom: 1px solid var(--line); } .palette-input input { flex-grow: 1; border: 0; background: none; outline: none; font-size: 18px; font-weight: 500; height: auto; padding: 0; } .palette-parse { padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .parse-chip { height: 32px; padding: 0 11px; border-radius: var(--r-sm); display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); } .parse-chip.is-set { background: var(--accent-soft); border-color: var(--accent-line); color: var(--ink); } .parse-chip small { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; opacity: 0.8; } .palette-actions { border-top: 1px solid var(--line); display: flex; flex-direction: column; } .palette-action { display: flex; align-items: center; gap: 12px; padding: 11px 16px; text-align: left; width: 100%; } .palette-action:hover, .palette-action.is-active { background: var(--surface-2); } .palette-action .glyph { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-3); flex-shrink: 0; } .palette-action.primary .glyph { background: var(--accent); color: var(--accent-ink); } .palette-hints { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px 14px; } .palette-hints button { font-family: var(--mono); font-size: var(--fs-xs); padding: 6px 10px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2); } /* ------------------------------------------------------------------ Avisos */ .alert { padding: 11px 14px; border-radius: var(--r-md); font-size: var(--fs-sm); border: 1px solid var(--line); background: var(--surface); display: flex; align-items: center; gap: 10px; } .alert.success { background: var(--pos-soft); border-color: transparent; color: var(--pos); } .alert.error { background: var(--neg-soft); border-color: transparent; color: var(--neg); } .notice { display: flex; gap: 11px; padding: 13px 14px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); } .notice.danger { background: var(--neg-soft); border-color: color-mix(in oklab, var(--neg) 30%, transparent); } .notice.warning { background: var(--surface-2); border-color: var(--line); } .notice strong { font-size: var(--fs-sm); } .notice p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; margin-top: 2px; } .toasts { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: flex; flex-direction: column; gap: 8px; } .toast { padding: 11px 14px; border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); animation: sheetIn 0.16s ease; } .toast.ok { background: var(--pos-soft); color: var(--pos); border-color: transparent; } .toast.err { background: var(--neg-soft); color: var(--neg); border-color: transparent; } .empty { padding: 26px 18px; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: var(--fs-sm); } .offline-flag { position: fixed; left: 50%; transform: translateX(-50%); bottom: 78px; z-index: 80; padding: 8px 14px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; background: var(--warn); color: #1b1400; box-shadow: var(--shadow); } /* --------------------------------------------------------------- Ajustes */ .swatches { display: flex; flex-wrap: wrap; gap: 10px; } .swatch { width: 62px; height: 62px; border-radius: var(--r-lg); border: 2px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 10px; color: var(--muted); } .swatch i { width: 22px; height: 22px; border-radius: 8px; display: block; } .swatch.is-on { border-color: var(--accent); color: var(--ink); } .option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .option { padding: 13px; border-radius: var(--r-lg); border: 2px solid var(--line); background: var(--surface-2); text-align: left; display: flex; flex-direction: column; gap: 4px; } .option strong { font-size: var(--fs-sm); } .option small { font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; } .option.is-on { border-color: var(--accent); background: var(--accent-soft); } /* ------------------------------------------------------- Barra inferior móvil */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; align-items: center; justify-content: space-around; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in oklab, var(--bg-2) 94%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--line-soft); } .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; color: var(--muted); padding: 6px 10px; min-width: 56px; border-radius: var(--r-md); } .tabbar .is-active { color: var(--accent); } .tabbar .fab { width: 54px; height: 54px; border-radius: 18px; margin-top: -20px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; box-shadow: var(--shadow); } /* ------------------------------------------------------------------- Acceso */ .auth { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; background: var(--bg); } .auth-visual { position: relative; overflow: hidden; padding: 48px; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; background: linear-gradient(160deg, var(--accent-soft), var(--bg-2) 70%); border-right: 1px solid var(--line); } .auth-visual h1 { font-size: 34px; line-height: 1.1; letter-spacing: -0.035em; } .auth-visual p { color: var(--muted); max-width: 40ch; line-height: 1.5; } .auth-card { padding: 48px; display: flex; flex-direction: column; justify-content: center; gap: 16px; max-width: 460px; width: 100%; margin: 0 auto; } .auth-preview { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); max-width: 320px; } /* --------------------------------------------------------------- Responsive */ @media (max-width: 1180px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cols-2 { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 900px) { .side { display: none; } .tabbar { display: flex; } .top { padding: 10px 14px; min-height: 56px; } .page { padding: 14px 14px 96px; } .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cols-3 { grid-template-columns: minmax(0, 1fr); } .auth { grid-template-columns: minmax(0, 1fr); } .auth-visual { display: none; } .auth-card { padding: 28px 20px; } .daygroup-head { top: 56px; } .desktop-only { display: none !important; } .row-side { display: none; } } @media (min-width: 901px) { .mobile-only { display: none !important; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }