﻿@charset "UTF-8";
/* Mi Dinero V9.7 · components shared by every screen: buttons, amount entry, segments, chips, lists, progress,
   tags, short texts, disclosures, empty states, switches and the toast. Colors come from theme.css tokens. */
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 22px;border-radius:999px;font-size:var(--md-fs-l);font-weight:750;letter-spacing:-.01em;text-align:center}
.button.full{width:100%}
.button.primary{background:var(--md-cta);color:#fff;box-shadow:var(--md-shadow-cta)}
.button.outline{background:var(--md-surface);color:var(--md-brand-text);box-shadow:inset 0 0 0 1.5px var(--md-line-strong)}
.button:active:not(:disabled){transform:scale(.98)}
.text-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 6px;color:var(--md-brand-text);font-size:var(--md-fs-m);font-weight:700}
.text-button.full{width:100%}
.text-button.danger,.row.danger{color:var(--md-over)}
.icon-button{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--md-ink)}
.icon-button svg{width:22px;height:22px}

/* The amount is the one big field of a form. */
.amount-field>span:first-child{font-size:var(--md-fs-m);color:var(--md-ink);font-weight:700}
.amount-input{display:flex;align-items:center;gap:6px;padding:2px 0;border-bottom:2px solid var(--md-line-strong)}
.amount-input:focus-within{border-color:var(--md-brand)}
.amount-sign{font-size:32px;font-weight:700;color:var(--md-muted)}
.amount-input input{min-height:60px;padding:0;border:0;border-radius:0;background-color:transparent;font-size:40px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.amount-input input:focus{box-shadow:none}
.amount-input input{-moz-appearance:textfield;appearance:textfield}
.amount-input input::-webkit-inner-spin-button,.amount-input input::-webkit-outer-spin-button{margin:0;-webkit-appearance:none}

.segment{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--md-surface-3)}
.segment button{flex:1;min-height:44px;padding:8px 10px;border-radius:999px;font-size:var(--md-fs-m);font-weight:700;color:var(--md-muted);text-align:center}
.segment button.selected{background:var(--md-surface);color:var(--md-ink);box-shadow:var(--md-shadow-1)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;padding:8px 14px;border-radius:999px;background:var(--md-surface);box-shadow:inset 0 0 0 1px var(--md-line-strong);font-size:var(--md-fs-m);font-weight:600}
.chip.selected{background:var(--md-brand-soft);color:var(--md-brand-text);box-shadow:inset 0 0 0 1.5px var(--md-brand)}

/* Lists: one surface, rows separated by hairlines. A tappable row ends in a chevron. */
.list{display:grid;overflow:hidden;border-radius:var(--md-radius-l);background:var(--md-surface);box-shadow:var(--md-shadow-1)}
.list>*+*{border-top:1px solid var(--md-line)}
.row{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:12px 16px;text-align:left;color:var(--md-ink)}
button.row::after,.file-row::after{content:"";flex-shrink:0;width:16px;height:16px;background:var(--md-chevron) center/16px no-repeat;transform:rotate(-90deg)}
.row-icon{display:grid;place-items:center;flex-shrink:0;width:40px;height:40px;border-radius:var(--md-radius-s);background:var(--md-surface-3);font-size:20px;color:var(--md-ink)}
.row-icon svg{width:22px;height:22px}
.row-lead{display:grid;flex-shrink:0}
.row-body{display:grid;flex:1;gap:2px;min-width:0}
.row-body strong{font-size:var(--md-fs-m);font-weight:650;overflow-wrap:anywhere}
.row-body small{font-size:var(--md-fs-s);color:var(--md-muted);overflow-wrap:anywhere}
.row-body .progress-line{margin-top:6px}
.row-value{flex-shrink:0;font-weight:750;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.row .text-button{flex-shrink:0}
.row.alert .row-body small,.row.alert .row-value{color:var(--md-over)}
.list-title{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px 6px;font-weight:750}
.list-title small{font-weight:500;color:var(--md-muted)}
.list-title .text-button{padding:0}
.list-note{padding:14px 16px;font-size:var(--md-fs-s);color:var(--md-muted)}
.list-date{padding:12px 16px 6px;background:var(--md-surface-2);font-size:var(--md-fs-xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--md-muted)}
.list-more>summary{display:flex;align-items:center;min-height:52px;padding:14px 16px;font-weight:700;color:var(--md-brand-text)}
.list-more>.row{border-top:1px solid var(--md-line)}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:-6px}
.section-title{font-size:var(--md-fs-s);font-weight:750;letter-spacing:.04em;text-transform:uppercase;color:var(--md-muted)}

.progress-line{display:flex;align-items:center;gap:8px}
.progress-line small{font-size:var(--md-fs-xs);font-weight:700;color:var(--md-muted)}
.track{display:block;flex:1;height:8px;overflow:hidden;border-radius:999px;background:var(--md-surface-3)}
.track>span{display:block;width:0;height:100%;border-radius:inherit;background:var(--md-good-bar)}
.status-chip{flex-shrink:0;padding:4px 10px;border-radius:999px;background:var(--md-surface-3);color:var(--md-muted);font-size:var(--md-fs-xs);font-weight:750;white-space:nowrap}
.status-chip.good{background:var(--md-good-soft);color:var(--md-good)}
.status-chip.watch{background:var(--md-watch-soft);color:var(--md-watch)}
.status-chip.over{background:var(--md-over-soft);color:var(--md-over)}
.tag{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--md-surface-3);color:var(--md-muted);font-size:11px;font-weight:750;vertical-align:middle}
.tag.good{background:var(--md-good-soft);color:var(--md-good)}
.tag.info{background:var(--md-info-soft);color:var(--md-info)}
.tag.watch{background:var(--md-watch-soft);color:var(--md-watch)}

.helper{font-size:var(--md-fs-s);line-height:1.45;color:var(--md-muted)}
.fine-print{font-size:var(--md-fs-xs);text-align:center;color:var(--md-muted)}
.notice{padding:12px 14px;border-radius:var(--md-radius-m);background:var(--md-info-soft);color:var(--md-info);font-size:var(--md-fs-s);font-weight:600}
.warn{padding:10px 12px;border-radius:var(--md-radius-s);background:var(--md-over-soft);color:var(--md-over);font-size:var(--md-fs-s);font-weight:650}
.form-error{color:var(--md-over);font-size:var(--md-fs-s);font-weight:650}
.form-error:empty{display:none}

/* Disclosure: information on demand. */
.disclosure{border-radius:var(--md-radius-l);background:var(--md-surface);box-shadow:var(--md-shadow-1)}
.disclosure>summary{display:flex;align-items:center;gap:8px;min-height:52px;padding:14px 16px;font-weight:700}
.disclosure>summary::after{content:"";flex-shrink:0;width:16px;height:16px;margin-left:auto;background:var(--md-chevron) center/16px no-repeat;transition:transform .2s var(--md-ease)}
.disclosure[open]>summary::after{transform:rotate(180deg)}
.disclosure>summary small{font-weight:500;color:var(--md-muted)}
.disclosure>:not(summary){margin:0 16px 16px}
.disclosure p+p{margin-top:8px}

.empty-state{display:grid;justify-items:center;gap:6px;padding:24px 20px;text-align:center}
.empty-state img{width:96px;height:96px;border-radius:var(--md-radius-m);object-fit:contain}
.empty-state strong{font-size:var(--md-fs-l)}
.empty-state p{max-width:30ch;font-size:var(--md-fs-s);color:var(--md-muted)}
.empty-state .button{margin-top:8px}

.stack{display:grid;gap:14px}
.inline-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.figure-list{display:grid}
.figure-list>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--md-line);font-size:var(--md-fs-s)}
.figure-list dt{color:var(--md-muted)}
.figure-list dd{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}

.setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px}
.setting-row>span{flex:1}
.setting-row small{display:block;font-size:var(--md-fs-s);font-weight:400;color:var(--md-muted)}
.switch{position:relative;flex-shrink:0;width:52px;height:32px;margin:0;border-radius:999px;background:var(--md-line-strong);-webkit-appearance:none;appearance:none;cursor:pointer;transition:background .2s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px var(--md-scrim);transition:transform .2s var(--md-ease)}
.switch:checked{background:var(--md-good-bar)}
.switch:checked::after{transform:translateX(20px)}

.toast{position:fixed;left:50%;bottom:calc(150px + var(--safe-bottom));z-index:60;max-width:min(92vw,420px);padding:12px 18px;border-radius:var(--md-radius-m);background:var(--md-toast);color:#fff;font-size:var(--md-fs-s);font-weight:650;box-shadow:var(--md-shadow-2);opacity:0;pointer-events:none;transform:translate(-50%,16px);transition:opacity .2s,transform .2s var(--md-ease)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.error::before{content:"⚠ "}
.toast.pig::before{content:"🐷 "}
