/* Costa, papel y píxeles: identidad original de Llegar a Fin de Mes. */
:root{
 --bg:#e8dfc9;--surface:#fff9e9;--paper:#f8efd7;--ink:#25393c;--muted:#526060;--line:#adab95;
 --accent:#296766;--accent-ink:#fff9e9;--accent-soft:#d8e7d7;--money:#805217;
 --ok:#326348;--ok-soft:#dfebd5;--warn:#865019;--warn-soft:#f6e6bd;--bad:#a33630;--bad-soft:#f8ded4;
 --shadow:4px 4px 0 #25393c26;--f-display:'Pixelify Sans','Courier New',monospace;
 --sea:#87b6b4;--sea-line:#477c83;--sand:#e4cb9c;--hill:#b9845e;--city:#c6cbb0;--city-line:#abae92;
 --p-hogar:#9b5339;--p-super:#296766;--p-feria:#496a43;--p-banco:#596377;--p-instituto:#596377;
 --p-emprende:#865019;--p-vivienda:#9b5339;--p-cesfam:#296766;--p-costanera:#296766;--p-sernac:#7c4f7a;
}
@media(prefers-color-scheme:dark){:root:not([data-theme='light']){
 --bg:#192a2d;--surface:#24383b;--paper:#2b3d3e;--ink:#f4ecd6;--muted:#bac9bc;--line:#71877e;
 --accent:#acd6bd;--accent-ink:#192a2d;--accent-soft:#314d46;--money:#f2c782;
 --ok:#b3d69f;--ok-soft:#2a453b;--warn:#f2c782;--warn-soft:#50432d;--bad:#ffb2a3;--bad-soft:#563a36;
 --sea:#315a60;--sea-line:#709d9d;--sand:#6a624b;--hill:#8e6850;--city-line:#93927c;
 --p-hogar:#e3b291;--p-super:#acd6bd;--p-feria:#c6d4a2;--p-banco:#b4c6d3;--p-instituto:#b4c6d3;
 --p-emprende:#f2c782;--p-vivienda:#e3b291;--p-cesfam:#acd6bd;--p-costanera:#acd6bd;--p-sernac:#d6b4e0;
}}
:root[data-theme='dark']{
 --bg:#192a2d;--surface:#24383b;--paper:#2b3d3e;--ink:#f4ecd6;--muted:#bac9bc;--line:#71877e;
 --accent:#acd6bd;--accent-ink:#192a2d;--accent-soft:#314d46;--money:#f2c782;
 --ok:#b3d69f;--ok-soft:#2a453b;--warn:#f2c782;--warn-soft:#50432d;--bad:#ffb2a3;--bad-soft:#563a36;
 --sea:#315a60;--sea-line:#709d9d;--sand:#6a624b;--hill:#8e6850;--city-line:#93927c;
 --p-hogar:#e3b291;--p-super:#acd6bd;--p-feria:#c6d4a2;--p-banco:#b4c6d3;--p-instituto:#b4c6d3;
 --p-emprende:#f2c782;--p-vivienda:#e3b291;--p-cesfam:#acd6bd;--p-costanera:#acd6bd;--p-sernac:#d6b4e0;
}
body{font-size:17px;background-image:radial-gradient(var(--line) .6px,transparent .6px);background-size:8px 8px}
#app{max-width:960px}
h1{font-size:clamp(30px,5vw,46px);font-weight:700;letter-spacing:0}
h2{font-size:27px;font-weight:700}h3{font-size:22px;font-weight:700}
.card,.notice,.receipt,.seg,.tile,.aisle,.aisle-head,.mapwrap,.citymini,.logro,.res .r{border-radius:2px}
.card{border:2px solid var(--line);box-shadow:var(--shadow)}
button,.btn{border-radius:2px;min-height:48px;border-width:2px;box-shadow:2px 2px 0 var(--line);line-height:1.3}
button:hover{border-color:var(--accent);background-color:var(--accent-soft)}
button.primary:hover{background:var(--ink);color:var(--surface)}
button:active{box-shadow:none;transform:translate(1px,1px)}
button.ghost{box-shadow:none}button:disabled{cursor:not-allowed;transform:none}
input,select,textarea{border-radius:2px;min-height:48px;border-width:2px}
.auth-card{border-top:8px solid var(--accent)}
.auth-brand h1{max-width:12ch}.auth-brand .eyebrow{color:var(--accent)}
.nav .brand,.hud .brand{font-size:24px;font-weight:700}
.nav,.hud{border-bottom:3px solid var(--ink)}
.placehead{flex-wrap:wrap}
.hud{background:var(--bg);position:relative;padding-bottom:14px}
.tabs button{border-radius:2px;min-height:46px;font-size:16px}
.tabs{padding-bottom:4px}.res .k{font-size:12px;letter-spacing:.03em}.res .v{font-size:18px}
.pips i,.monthbar span{border-radius:0}.monthbar{gap:4px;margin-block:10px}.monthbar span{height:8px}
.receipt{background:var(--paper);border:1px dashed var(--line);padding:14px;font-size:14px}
.receipt .ln{align-items:flex-start;gap:16px}.receipt .ln>span:last-child{white-space:nowrap;flex-shrink:0}
.annual-goal{border:2px solid var(--accent);background:var(--accent-soft);padding:12px;margin-top:10px;font-family:var(--f-body);line-height:1.5}
.annual-goal strong{display:block;font-size:18px}.annual-goal .money{white-space:nowrap}
.mapwrap.retro-map{border:3px solid var(--ink);box-shadow:5px 5px 0 var(--line)}
.retro-map .map{max-height:760px;aspect-ratio:450/509}
.map-caption{display:flex;justify-content:space-between;gap:12px;padding:9px 14px;background:var(--ink);color:var(--surface);font-family:var(--f-mono);font-size:12px}
.retro-place .ph{stroke-width:2;fill:var(--surface)}.retro-place:hover .ph,.retro-place:focus-visible .ph{fill:var(--accent-soft);stroke:var(--ink);stroke-width:4}
.retro-place .pl{font-size:15px;font-family:var(--f-body)}.retro-map .bt{fill:var(--accent-ink);font-size:10px;text-anchor:middle;font-weight:700}
.retro-map .badge.alert,.retro-map .badge.todo{fill:var(--accent)}
.family-hud{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin-top:10px;background:var(--surface);padding:6px 12px;border-color:var(--accent)}
.family-hud>.pixel-face{width:35px;height:40px}.family-hud>span:first-of-type{flex:1}.family-hud strong{font-size:15px}
.well-toolbar{display:flex;gap:10px;align-items:stretch;margin-top:10px}.well-toolbar .family-hud{margin-top:0;flex:1;min-width:0}.sound-toggle{font-size:13px;box-shadow:none;flex-shrink:0;padding:6px}
.well-meter{display:block;height:8px;background:var(--bg);border:1px solid var(--line);margin-top:5px}.well-meter i{display:block;height:100%;background:var(--accent)}
.family-strip,.family-panel{background:var(--paper);padding:20px;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--line)}
.family-mini{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}.family-mini button{display:flex;align-items:center;flex-direction:column;gap:8px;min-width:88px;flex:1;font-size:14px}
.pixel-face{display:block;width:80px;height:90px;image-rendering:pixelated;flex-shrink:0}
.portrait{display:inline-block;position:relative;flex-shrink:0}.family-mini .pixel-face{width:48px;height:54px}
.need-mark{position:absolute;right:-9px;top:-5px;width:28px;height:30px;display:grid;place-items:center;background:#a33630;color:#fff9e9;border:2px solid #fff9e9;box-shadow:2px 2px 0 #25393c;font-family:var(--f-display);font-size:26px;line-height:1}
@media(prefers-reduced-motion:no-preference){.need-mark{animation:need-hop 1.8s ease-in-out infinite}@keyframes need-hop{0%,35%,100%{transform:translateY(0)}15%{transform:translateY(-6px)}25%{transform:translateY(0)}}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.family-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.member-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 10px;text-align:center;font-weight:400;min-width:0}
.member-card.selected{outline:3px solid var(--accent);outline-offset:2px;background:var(--accent-soft)}
.member-card strong{font-size:18px}.member-card .portrait{margin-bottom:5px}.emotion-label{font-size:14px;font-weight:700}
.well-total{display:flex;align-items:center;gap:12px}.well-total .pixel-face{width:48px;height:54px}.well-total strong{font:700 32px var(--f-display)}
.conversation{padding:20px;background:var(--surface);border:2px solid var(--accent);scroll-margin-top:20px;position:relative}
.conversation:before{content:'';position:absolute;width:16px;height:16px;background:var(--surface);border-left:2px solid var(--accent);border-top:2px solid var(--accent);top:-10px;left:28px;transform:rotate(45deg)}
.small-portrait .pixel-face{width:44px;height:50px}.family-event{background:var(--paper);border:1px solid var(--line);padding:16px}
.need-row{padding:12px 0;border-bottom:1px dashed var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px}.need-row>div{min-width:0}.need-row button{flex-shrink:0;max-width:45%}
.decision{text-align:left;display:flex;flex-direction:column;gap:6px;background:var(--surface);font-weight:400;padding:14px;white-space:normal}
.decision strong{font-size:17px}.decision>span{font-size:15px}
.family-details>summary{font-weight:700;padding:8px 0;font-size:18px}.family-details>div{margin-top:12px}
@media(max-width:520px){
 .family-panel,.family-strip{padding:14px}.conversation{padding:14px}.family-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pixel-face{width:64px;height:72px}.need-row{flex-direction:column;align-items:stretch}.need-row button{max-width:none}
 .map-caption{font-size:10px;padding:8px}.nav .brand,.hud .brand{font-size:21px}.family-mini{gap:8px}
 .receipt{padding:10px;font-size:13px}.receipt .ln{gap:10px}.family-panel h1{font-size:32px}
 .well-toolbar{flex-wrap:wrap}.well-toolbar .family-hud{flex-basis:100%}.sound-toggle{margin-left:auto;min-height:44px}.family-hud strong{font-size:14px}.family-hud{gap:8px}
}