:root{color-scheme:light;--paper:#faf8f3;--ink:#253b30;--sub:#57655c;--green:#315e45;--soft:#e9ede4;--line:#d9dfd3;--weekend:#f8e8cb;--weekend-ink:#80520f;--holiday:#f8dddd;--holiday-ink:#a1283f;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#eef0e8;font-size:15px}
*{box-sizing:border-box}body{margin:0;padding:24px 12px}button,input,select{font:inherit}button{cursor:pointer;min-height:44px;border:1px solid var(--line);border-radius:13px;background:white;color:var(--ink);padding:10px 14px}button:disabled{opacity:.6;cursor:wait}button:focus-visible,summary:focus-visible{outline:3px solid #65976c;outline-offset:3px}input:focus,select:focus{outline:2px solid #65976c;outline-offset:1px}button.primary,[aria-pressed=true]{background:var(--green);color:white;border-color:var(--green)}.quiet{border-color:transparent;background:transparent}.app{width:100%;max-width:480px;margin:auto;background:var(--paper);border:1px solid var(--line);border-radius:25px;box-shadow:0 12px 35px #2331280d;overflow:hidden}.header{padding:23px 22px 8px}.brand-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.brand-row h1{font-size:22px;font-weight:500;letter-spacing:-.6px;margin:0}.brand-row button{font-size:12px;padding:8px}.connection{font-size:12px;color:var(--sub);margin:2px 0 18px;overflow-wrap:anywhere}.connection.warning{color:#80520f}.connection.error{color:var(--holiday-ink)}.members{display:flex;flex-wrap:wrap;gap:8px;font-size:12px}.members span{background:var(--soft);border-radius:18px;padding:6px 10px}main,.welcome{padding:8px 22px 16px}h2{font-weight:500;font-size:25px;letter-spacing:-.7px;margin:18px 0 5px}.subtitle{font-size:13px;color:var(--sub);margin:0 0 18px}.switch{display:flex;gap:7px;align-items:center;margin:18px 0 10px}.switch #today{margin-left:auto;font-size:13px}.period-nav{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:12px 0}.period-nav h3{font-size:14px;font-weight:500;text-align:center;margin:0;overflow-wrap:anywhere}.period-nav button{border:0;background:transparent;font-size:24px;padding:2px 12px}.calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.calendar button{position:relative;padding:7px 0 12px;border:1px solid transparent;background:transparent;min-width:0;font-size:12px;color:var(--ink);border-radius:12px}.calendar button .num{display:block;font-size:17px;font-weight:500;margin:4px 0 0}.calendar button.weekend{background:var(--weekend);color:var(--weekend-ink)}.calendar button.holiday{background:var(--holiday);color:var(--holiday-ink)}.calendar button[aria-pressed=true]{border-color:var(--green);box-shadow:inset 0 -3px var(--green)}.calendar button[aria-pressed=true]:not(.weekend):not(.holiday){background:var(--green);color:white}.calendar .column-heading{font-size:12px;color:var(--sub);text-align:center;padding:5px 0}.calendar .has-plan::after{content:"";width:4px;height:4px;border-radius:50%;position:absolute;bottom:5px;left:calc(50% - 2px);background:currentColor}.calendar .is-today .num{text-decoration:underline;text-underline-offset:4px}.legend{display:flex;flex-wrap:wrap;gap:7px 13px;font-size:11px;margin:12px 0 20px}.legend span::before{content:"";width:7px;height:7px;border-radius:3px;display:inline-block;background:currentColor;margin-right:5px}.weekend-key{color:var(--weekend-ink)}.holiday-key{color:var(--holiday-ink)}.plan-key{color:var(--green)}.notice{background:#f8e8cb;font-size:12px;padding:10px;border-radius:10px;color:#70490e}.day-heading{display:flex;justify-content:space-between;align-items:center;gap:7px;margin:13px 0 7px}.day-heading h3{font-size:14px;font-weight:500;margin:0;text-transform:capitalize;max-width:52%}.day-state{color:var(--sub);font-size:12px;text-align:right;max-width:49%;padding:7px 0}.holiday-caption{font-size:12px;color:var(--holiday-ink);margin:0 0 13px}.meal{display:block;text-align:left;width:100%;padding:17px;background:white;border:1px solid var(--line);border-radius:17px;margin-bottom:13px}.meal-head{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--sub);margin-bottom:16px}.meal-food{display:flex;gap:13px;align-items:center}.thumb{width:54px;height:54px;display:grid;place-items:center;border-radius:15px;background:var(--soft);font-size:25px;flex-shrink:0;object-fit:cover}.meal-text{min-width:0}.meal-name{display:block;font-size:17px;font-weight:500;margin-bottom:5px;overflow-wrap:anywhere}.meal-note{display:block;color:var(--sub);font-size:12px;overflow-wrap:anywhere}.hint{font-size:12px;color:var(--sub);text-align:center;margin:16px 0 0}footer{padding:15px 22px 20px;border-top:1px solid var(--line);font-size:12px;color:var(--sub)}footer p{line-height:1.5}a{color:var(--green);overflow-wrap:anywhere}summary{cursor:pointer;min-height:30px}dialog{max-width:440px;width:calc(100% - 24px);max-height:calc(100dvh - 32px);padding:21px;border:1px solid var(--line);border-radius:21px;background:var(--paper);color:var(--ink);overflow:auto}dialog::backdrop{background:#1b2d2480}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.dialog-heading h2{font-size:21px;margin:0 0 13px}.dialog-heading button{align-self:flex-start;margin-top:-6px}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}label{display:block;font-size:13px;margin:15px 0}input,select{display:block;width:100%;margin-top:7px;border:1px solid var(--line);border-radius:11px;background:white;color:var(--ink);padding:12px;font-size:16px;min-height:46px}input[type=file]{font-size:12px;padding:10px}fieldset{border:1px solid var(--line);border-radius:13px;padding:3px 13px;margin:16px 0}legend{font-size:13px;padding:0 6px}.photo-preview{display:flex;gap:10px;align-items:center}.photo-preview img{width:64px;height:64px;object-fit:cover;border-radius:12px}.error{font-size:13px;color:var(--holiday-ink);line-height:1.5}.toast{position:fixed;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);padding:13px 18px;border-radius:13px;color:white;background:#253b30;max-width:calc(100% - 24px);width:max-content;font-size:13px;box-shadow:0 4px 20px #0002;z-index:10}.welcome p,#account-body p{font-size:14px;line-height:1.5}.invite-code{display:block;font:16px ui-monospace,monospace;overflow-wrap:anywhere;background:var(--soft);padding:13px;border-radius:11px;user-select:all}.stack{display:grid;gap:10px;margin-top:17px}[hidden]{display:none!important}
@media(max-width:520px){body{padding:0;background:var(--paper)}.app{border:0;border-radius:0;box-shadow:none;max-width:480px;min-height:100dvh}}@media(max-width:360px){.header,main,.welcome,footer{padding-left:14px;padding-right:14px}.calendar{gap:3px}.meal{padding:14px}.meal-name{font-size:16px}.brand-row h1{font-size:21px}.day-heading h3{font-size:13px}}@media(prefers-reduced-motion:no-preference){button{transition:background .15s,border-color .15s}}
/* Vista mensual compacta: toda la información útil, sin las franjas auxiliares. */
.header{padding-top:10px;padding-bottom:0}
.app>footer{display:none}
.month-view main{padding-top:0;padding-bottom:8px}
.month-view #view-title,.month-view main>.subtitle,.month-view .hint{display:none}
.month-view .switch{margin:5px 0 2px}
.month-view .period-nav{margin:0 0 3px}
.month-view .calendar{gap:3px}
.month-view .calendar button{height:44px;padding:4px 0 8px}
.month-view .calendar button .num{margin:0;font-size:16px}
.month-view .calendar .column-heading{padding:2px 0}
.month-view .legend{margin:7px 0 4px;gap:5px 10px}
.month-view .day-heading{margin:2px 0 5px}
.month-view .holiday-caption{margin:0 0 6px}
.month-view .meal{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:9px;padding:10px 12px;margin-bottom:8px;min-height:68px}
.month-view .meal-head{flex-direction:column;justify-content:center;gap:5px;margin:0;font-size:11px}
.month-view .meal-food{gap:9px}
.month-view .thumb{width:40px;height:40px;border-radius:11px;font-size:22px}
.month-view .meal-name{font-size:15px;margin-bottom:3px}
.month-view .meal-note{font-size:11px}
@media(max-height:740px){.month-view .header{padding-top:4px}.month-view .meal{padding-top:8px;padding-bottom:8px;min-height:62px}.month-view .day-heading{margin-top:0}.month-view .switch{margin-top:0}}
.month-view main{padding-bottom:6px}
.switch{gap:5px}.switch button{padding-left:10px;padding-right:10px;font-size:13px}.switch #today{padding-left:5px;padding-right:5px}
#purchase{white-space:nowrap;font-size:12px;max-width:45%;overflow:hidden;text-overflow:ellipsis}#purchase.purchase-recorded{background:var(--soft);border-color:#91aa8e;color:var(--green)}
.calendar .shopping-mark{position:absolute;right:2px;bottom:2px;font-size:10px;line-height:12px}
.checkbox-label{display:flex;align-items:center;gap:10px;min-height:44px}.checkbox-label input{display:inline-block;width:21px;height:21px;min-height:0;margin:0;accent-color:var(--green);flex-shrink:0}
.switch{flex-wrap:wrap}
.list-view .calendar,.list-view .legend,.list-view .day-heading,.list-view #holiday-name,.list-view #meals,.list-view .hint,.list-view #previous,.list-view #next,.list-view #purchase,.list-view #today{display:none}
.list-view .period-nav{justify-content:flex-start;margin-bottom:18px}
.list-view .list-day{margin:0 0 25px}
.list-date{font-size:14px;font-weight:500;text-transform:capitalize;padding:10px 12px;background:var(--soft);border-radius:11px;margin:0 0 10px}
.list-date.list-weekend{background:var(--weekend);color:var(--weekend-ink)}.list-date.list-holiday{background:var(--holiday);color:var(--holiday-ink)}
.list-holiday-name{font-size:12px;color:var(--holiday-ink);margin:0 0 10px}
.list-day .meal{padding:13px;margin-bottom:8px}.list-day .meal-head{margin-bottom:10px}
.spending-total{background:var(--soft);border-radius:13px;padding:16px;display:flex;flex-direction:column;gap:6px}.spending-total strong{font-size:27px;font-weight:500}.spending-list{list-style:none;padding:0}.spending-list li{display:flex;justify-content:space-between;gap:15px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px}.spending-list strong{font-weight:500;white-space:nowrap}
.switch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.switch #today{margin-left:0}#purchase{max-width:100%}
.brand-row h1.brand-logo{position:relative;flex:1;width:calc(100% - 76px);max-width:270px;height:44px;overflow:hidden;margin:0}.brand-logo img{position:absolute;top:50%;left:0;transform:translateY(-50%);width:100%;height:auto;display:block}