:root{
  --paper:#EEF0E6;        /* fondo, blanco cálido con verde muy tenue */
  --card:#FBFBF7;         /* tarjetas */
  --card-2:#F4F5EE;       /* filas suaves */
  --ink:#232B26;          /* texto principal, pino profundo */
  --ink-soft:#5E6A60;     /* texto secundario */
  --ink-faint:#8A948A;    /* metadatos */
  --line:#DEE1D6;         /* hairlines */
  --line-2:#CFD3C6;

  --sage:#5C7C5A;         /* acento: el "light green" de la pintura */
  --sage-deep:#3F5A3E;
  --sage-tint:#E3EADC;

  --ruben:#C1663A;        /* Rubén → arcilla */
  --ruben-tint:#F6E5DB;
  --ruby:#B14A6E;         /* Ruby → rosa granate (juego con su nombre) */
  --ruby-tint:#F7E2EA;
  --both:#6E7A6C;         /* Los dos → salvia-gris */
  --both-tint:#E6E9E0;

  --amber:#C98A2B;
  --amber-tint:#F6E9D2;

  --on-ink:#F3F5EE;       /* texto sobre fondos --ink (tabs activos, pill…) */
  --on-accent:#fff;       /* texto/checks sobre el color de acento */

  --radius:14px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(35,43,38,.04), 0 6px 20px rgba(35,43,38,.06);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Instrument Sans", system-ui, -apple-system, sans-serif;
  font-size:16px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
button{font-family:inherit}

.app{max-width:680px; margin:0 auto; padding:0 16px calc(48px + env(safe-area-inset-bottom));}

/* ---------- HERO ---------- */
.hero{padding:22px 0 18px; position:relative;}
.hero-top{display:flex; align-items:center; justify-content:space-between;}
.hero-label{
  font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sage-deep); font-weight:600;
}
.pin{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; color:var(--ink-soft); text-decoration:none;
  border:1px solid var(--line-2); border-radius:999px; padding:4px 11px;
  background:var(--card);
}
.pin-dot{width:8px;height:8px;border-radius:50%;background:#E0555A;}
.hero-title{
  font-family:"Bricolage Grotesque", sans-serif;
  font-weight:700; letter-spacing:-.02em; line-height:1.02;
  font-size:clamp(30px, 8.5vw, 42px);
  margin:.28em 0 .5em;
}
.hero-title .arrow{color:var(--sage); font-weight:600;}

.hero-stats{display:flex; align-items:center; gap:18px;}
.countdown{display:flex; align-items:baseline; gap:10px;}
.count-num{
  font-family:"Bricolage Grotesque", sans-serif;
  font-weight:700; font-size:clamp(46px, 15vw, 68px); line-height:.85;
  color:var(--sage-deep); letter-spacing:-.03em;
}
.count-cap{font-size:14px; color:var(--ink-soft); max-width:8ch;}

.ring{position:relative; width:64px; height:64px; margin-left:auto;}
.ring svg{width:64px;height:64px; transform:rotate(-90deg);}
.ring-bg{fill:none; stroke:var(--line-2); stroke-width:4;}
.ring-fg{fill:none; stroke:var(--sage); stroke-width:4; stroke-linecap:round;
  stroke-dasharray:119.38; stroke-dashoffset:119.38; transition:stroke-dashoffset .5s ease;}
.ring-label{position:absolute; inset:0; display:grid; place-items:center;
  font-size:14px; font-weight:600; color:var(--sage-deep);}
.hero-progress-cap{margin-top:10px; font-size:13.5px; color:var(--ink-faint);}

/* ---------- TABS ---------- */
.tabs{
  position:sticky; top:0; z-index:20;
  display:flex; gap:4px; padding:8px 0;
  background:linear-gradient(var(--paper) 72%, transparent);
  margin:0 -4px;
}
.tab{
  flex:1; border:none; background:transparent; cursor:pointer;
  padding:9px 6px; border-radius:999px;
  font-size:14px; font-weight:600; color:var(--ink-soft);
  transition:background .15s, color .15s;
}
.tab.is-active{background:var(--ink); color:var(--on-ink);}

/* ---------- VIEW / SECTIONS ---------- */
.view{padding-top:6px;}
.section{margin:14px 0 22px;}
.section-head{
  display:flex; align-items:center; gap:10px; margin:0 2px 10px;
}
.section-title{
  font-family:"Bricolage Grotesque", sans-serif;
  font-weight:600; font-size:19px; letter-spacing:-.01em;
}
.section-meta{font-size:13px; color:var(--ink-faint);}
.section-bar{flex:1; height:5px; border-radius:999px; background:var(--line); overflow:hidden; max-width:120px; margin-left:auto;}
.section-bar > i{display:block; height:100%; background:var(--sage); border-radius:999px; transition:width .4s;}

/* ---------- TASK ROW ---------- */
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;
}
.row{
  display:flex; gap:12px; padding:13px 14px; align-items:flex-start;
  border-top:1px solid var(--line);
}
.row:first-child{border-top:none;}
.row.done .row-title{color:var(--ink-faint); text-decoration:line-through; text-decoration-color:var(--line-2);}

.status{
  flex:none; width:24px; height:24px; margin-top:1px; border-radius:50%;
  border:2px solid var(--line-2); background:var(--card);
  cursor:pointer; position:relative; transition:.15s;
}
.status.doing{border-color:var(--amber); background:var(--amber-tint);}
.status.doing::after{content:""; position:absolute; inset:4px; border-radius:50%; background:var(--amber);}
.status.done{border-color:var(--sage); background:var(--sage);}
.status.done::after{content:""; position:absolute; left:7px; top:3px; width:5px; height:10px;
  border:solid var(--on-accent); border-width:0 2.5px 2.5px 0; transform:rotate(42deg);}

.row-main{flex:1; min-width:0;}
.row-title{font-size:15.5px; line-height:1.3; word-wrap:break-word;}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:7px;}
.chip{
  font-size:11.5px; font-weight:600; letter-spacing:.01em;
  padding:2.5px 9px; border-radius:999px; white-space:nowrap;
  color:var(--ink-soft); background:var(--card-2); border:1px solid var(--line);
}
.chip.owner-Rubén{color:var(--ruben); background:var(--ruben-tint); border-color:transparent;}
.chip.owner-Ruby{color:var(--ruby); background:var(--ruby-tint); border-color:transparent;}
.chip.owner-Both{color:var(--both); background:var(--both-tint); border-color:transparent;}
.chip.type{color:var(--sage-deep); background:var(--sage-tint); border-color:transparent;}
.chip.due{color:var(--ink-soft);}
.chip .ic{opacity:.7; margin-right:3px;}
.row-notes{margin-top:6px; font-size:13px; color:var(--ink-soft); line-height:1.35;}

.row-open{flex:none; align-self:center; color:var(--ink-faint); padding:4px; margin:-4px -4px -4px 0;
  background:none; border:none; cursor:pointer; font-size:18px; line-height:1;}

/* ---------- EDITOR ---------- */
.editor{border-top:1px solid var(--line); background:var(--card-2); padding:12px 14px 14px;}
.editor label{display:block; font-size:12px; color:var(--ink-faint); font-weight:600; margin:0 0 4px 2px; letter-spacing:.02em;}
.editor .field{margin-bottom:11px;}
.editor input, .editor textarea, .editor select{
  width:100%; font-family:inherit; font-size:15px; color:var(--ink);
  background:var(--card); border:1px solid var(--line-2); border-radius:var(--radius-sm);
  padding:9px 11px; outline:none; -webkit-appearance:none; appearance:none;
}
.editor textarea{resize:vertical; min-height:52px;}
.editor input:focus, .editor textarea:focus, .editor select:focus{border-color:var(--sage);}
.seg{display:flex; gap:6px;}
.seg button{
  flex:1; padding:9px 4px; border-radius:var(--radius-sm); cursor:pointer;
  font-size:13.5px; font-weight:600; color:var(--ink-soft);
  background:var(--card); border:1px solid var(--line-2);
}
.seg button.on{color:var(--on-ink); background:var(--ink); border-color:var(--ink);}
.seg.owner button.on[data-v="Rubén"]{background:var(--ruben); border-color:var(--ruben);}
.seg.owner button.on[data-v="Ruby"]{background:var(--ruby); border-color:var(--ruby);}
.seg.owner button.on[data-v="Both"]{background:var(--both); border-color:var(--both);}
.editor-actions{display:flex; justify-content:space-between; align-items:center; margin-top:4px;}
.btn-del{background:none; border:none; color:var(--ruby); font-weight:600; font-size:14px; cursor:pointer; padding:6px 0;}
.btn-done{background:var(--sage); color:var(--on-accent); border:none; border-radius:999px; font-weight:600; font-size:14px; padding:9px 20px; cursor:pointer;}

/* ---------- ADD ---------- */
.add{
  display:flex; align-items:center; gap:8px; width:100%;
  margin-top:10px; padding:12px 14px; cursor:pointer;
  background:none; border:1.5px dashed var(--line-2); border-radius:var(--radius);
  color:var(--ink-soft); font-size:14.5px; font-weight:600;
}
.add:hover{border-color:var(--sage); color:var(--sage-deep);}
.add .plus{font-size:18px; line-height:1;}

/* ---------- TIMELINE ---------- */
.timeline{position:relative; margin-left:8px; padding-left:22px;}
.timeline::before{content:""; position:absolute; left:5px; top:8px; bottom:20px; width:2px; background:var(--line-2);}
.tl-item{position:relative; padding:0 0 20px;}
.tl-item::before{content:""; position:absolute; left:-22px; top:5px; width:12px; height:12px; border-radius:50%;
  background:var(--card); border:2.5px solid var(--sage);}
.tl-item.last::before{background:var(--sage);}
.tl-date{font-size:12.5px; font-weight:600; color:var(--sage-deep); letter-spacing:.02em;}
.tl-what{font-size:16px; font-weight:500; margin:2px 0 0; line-height:1.3;}
.tl-notes{font-size:13px; color:var(--ink-soft); margin-top:4px;}
.tl-item .row-open{position:absolute; right:0; top:0;}

/* ---------- MOVE (two lists) ---------- */
.move-grid{display:grid; gap:14px;}
@media(min-width:560px){.move-grid{grid-template-columns:1fr 1fr;}}
.move-col .section-title{display:flex; align-items:center; gap:8px;}
.move-col .dot{width:10px;height:10px;border-radius:50%;}
.dot.ruben{background:var(--ruben);}
.dot.ruby{background:var(--ruby);}
.mv{display:flex; align-items:center; gap:10px; padding:11px 14px; border-top:1px solid var(--line);}
.mv:first-child{border-top:none;}
.mv-check{flex:none; width:20px;height:20px;border-radius:6px;border:2px solid var(--line-2);
  background:var(--card); cursor:pointer; position:relative;}
.mv-check.done{background:var(--sage); border-color:var(--sage);}
.mv-check.done::after{content:""; position:absolute; left:5px; top:1px; width:5px;height:10px;
  border:solid var(--on-accent);border-width:0 2px 2px 0;transform:rotate(42deg);}
.mv.done .mv-title{color:var(--ink-faint); text-decoration:line-through; text-decoration-color:var(--line-2);}
.mv-main{flex:1; min-width:0;}
.mv-title{display:block; font-size:15px;}
.mv-x{flex:none; background:none;border:none;color:var(--ink-faint); font-size:17px; cursor:pointer; padding:2px 4px;}

/* ---------- SYNC PILL ---------- */
.sync{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:var(--on-ink); font-size:13px; font-weight:500;
  padding:8px 16px; border-radius:999px; opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s; z-index:40;
  box-shadow:0 6px 20px rgba(35,43,38,.18);
}
.sync.show{opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto;}
.sync .undo{
  background:none; border:none; color:var(--on-ink); text-decoration:underline;
  font-family:inherit; font-weight:700; font-size:13px; cursor:pointer; margin-left:8px; padding:0;
}

.empty{text-align:center; color:var(--ink-faint); font-size:14px; padding:20px 0;}

/* ---------- SUBTÍTULOS EN INGLÉS ---------- */
.hero-actions{display:flex; align-items:center; gap:8px;}
.lang{
  display:inline-flex; align-items:center;
  font-size:13px; font-weight:600; color:var(--ink-soft); cursor:pointer;
  border:1px solid var(--line-2); border-radius:999px; padding:4px 11px;
  background:var(--card); transition:background .15s, color .15s;
}
.lang.on{background:var(--ink); border-color:var(--ink); color:var(--on-ink);}

.row-sub, .tl-sub, .mv-sub{
  font-size:12.5px; font-style:italic; color:var(--ink-faint);
  line-height:1.3; margin-top:2px; word-wrap:break-word;
}

/* ---------- BARRA DE FILTROS + BÚSQUEDA ---------- */
.filterbar{display:flex; flex-direction:column; gap:8px; margin:2px 0 16px;}
.fchips{display:flex; flex-wrap:wrap; gap:6px;}
.fchip{
  border:1px solid var(--line-2); background:var(--card); color:var(--ink-soft);
  font-size:13px; font-weight:600; border-radius:999px; padding:6px 12px; cursor:pointer;
  transition:background .15s, color .15s;
}
.fchip.on{background:var(--ink); border-color:var(--ink); color:var(--on-ink);}
.fchip.f-ruben.on{background:var(--ruben); border-color:var(--ruben);}
.fchip.f-ruby.on{background:var(--ruby); border-color:var(--ruby);}
.fchip.f-both.on{background:var(--both); border-color:var(--both);}
.fcount{opacity:.7; font-size:12px; margin-left:5px; font-variant-numeric:tabular-nums;}
.filter-q{
  width:100%; font-family:inherit; font-size:15px; color:var(--ink);
  background:var(--card); border:1px solid var(--line-2); border-radius:999px;
  padding:8px 15px; outline:none; -webkit-appearance:none; appearance:none;
}
.filter-q:focus{border-color:var(--sage);}
.filter-q::-webkit-search-cancel-button{-webkit-appearance:none;}

/* ---------- PRECIO ---------- */
.chip.price{color:var(--amber); background:var(--amber-tint); border-color:transparent; font-variant-numeric:tabular-nums;}

/* ---------- CONFETI ---------- */
.confetti{position:fixed; inset:0; pointer-events:none; z-index:60; overflow:hidden;}
.confetti i{
  position:absolute; top:-14px; width:8px; height:13px; border-radius:2px;
  animation:confetti-fall linear forwards;
}
@keyframes confetti-fall{
  to{transform:translateY(108vh) rotate(560deg); opacity:.9;}
}

/* ---------- TEMAS ---------- */
/* cartón kraft: cajas de mudanza, cinta de embalar; "en curso" verde como guiño al salvia */
html[data-theme="kraft"]{
  --paper:#F0E7D8; --card:#FBF7EE; --card-2:#F4EDDE;
  --ink:#362B1E; --ink-soft:#71634F; --ink-faint:#9C8D75;
  --line:#E4D9C3; --line-2:#D3C5A9;
  --sage:#B26E1F; --sage-deep:#7E4A0E; --sage-tint:#F2E2C8;
  --ruben:#A6532B; --ruben-tint:#F4E0D2;
  --ruby:#AF4A6B; --ruby-tint:#F5DFE7;
  --both:#7C6F55; --both-tint:#EAE3D1;
  --amber:#5E8C5A; --amber-tint:#E4EBDD;
}
/* noche: pino oscuro; los "deep" se aclaran y el texto sobre ink/acento se oscurece */
html[data-theme="noche"]{
  --paper:#171B17; --card:#212721; --card-2:#2A302A;
  --ink:#E7ECE3; --ink-soft:#A9B3A5; --ink-faint:#7B857A;
  --line:#333B33; --line-2:#434D43;
  --sage:#93B58E; --sage-deep:#B7D2B2; --sage-tint:#2C3A2B;
  --ruben:#D68B5C; --ruben-tint:#3B2C22;
  --ruby:#CE6E93; --ruby-tint:#3A2530;
  --both:#A0AC9A; --both-tint:#313830;
  --amber:#D3A04C; --amber-tint:#3A3120;
  --on-ink:#1C201C; --on-accent:#1C201C;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 6px 20px rgba(0,0,0,.4);
}
/* atardecer: terracota, teja y ámbares tostados */
html[data-theme="atardecer"]{
  --paper:#F8EEE4; --card:#FDF8F2; --card-2:#F6ECE0;
  --ink:#3B2B26; --ink-soft:#7A6258; --ink-faint:#A18A7E;
  --line:#ECDDCE; --line-2:#DCC7B2;
  --sage:#C15540; --sage-deep:#8F3B22; --sage-tint:#F6DFD6;
  --ruben:#B0542D; --ruben-tint:#F5E0D2;
  --ruby:#B34A70; --ruby-tint:#F6DFE8;
  --both:#8A7365; --both-tint:#EDE1D6;
  --amber:#CB8F35; --amber-tint:#F6E8CF;
}
/* mediterráneo: azulejo y mar; la arcilla y el granate resaltan sobre el frío */
html[data-theme="mediterraneo"]{
  --paper:#E9EFEE; --card:#FAFCFA; --card-2:#EFF4F2;
  --ink:#1F3038; --ink-soft:#56707A; --ink-faint:#86989F;
  --line:#D8E2DF; --line-2:#C3D1CD;
  --sage:#3E7D8C; --sage-deep:#285A66; --sage-tint:#DCEAEC;
  --ruben:#C1663A; --ruben-tint:#F6E5DB;
  --ruby:#B14A6E; --ruby-tint:#F7E2EA;
  --both:#6E7F82; --both-tint:#E2E9E8;
  --amber:#C98A2B; --amber-tint:#F6E9D2;
}

/* ---------- PUERTA (contraseña) ---------- */
.gate{position:fixed; inset:0; z-index:100; background:var(--paper); display:grid; place-items:center; padding:24px;}
.gate[hidden]{display:none;}
.gate-card{
  width:100%; max-width:340px; text-align:center;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:30px 24px 22px;
}
.gate-emoji{font-size:36px;}
.gate-title{font-family:"Bricolage Grotesque", sans-serif; font-weight:700; font-size:25px; margin-top:6px; letter-spacing:-.02em;}
.gate-sub{font-size:14px; color:var(--ink-soft); margin:4px 0 18px;}
.gate form{display:flex; flex-direction:column; gap:10px;}
.gate input{
  width:100%; font-family:inherit; font-size:16px; color:var(--ink); text-align:center;
  background:var(--card-2); border:1px solid var(--line-2); border-radius:var(--radius-sm);
  padding:11px 12px; outline:none; -webkit-appearance:none; appearance:none;
}
.gate input:focus{border-color:var(--sage);}
.gate .btn-done{width:100%; padding:11px;}
.gate-err{min-height:19px; font-size:13px; font-weight:600; color:var(--ruby); margin-top:10px;}

/* ---------- SELECTOR DE TEMA ---------- */
.hero-actions{position:relative;}
.theme-btn{
  width:30px; height:30px; border-radius:50%; padding:0;
  border:1px solid var(--line-2); background:var(--card);
  display:grid; place-items:center; cursor:pointer;
}
.theme-dot{width:15px; height:15px; border-radius:50%;
  background:linear-gradient(135deg, var(--sage) 50%, var(--ruben) 50%);}
.theme-pop{
  position:absolute; top:38px; left:0; z-index:50; min-width:190px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow); padding:6px; display:flex; flex-direction:column; gap:2px;
}
.theme-pop[hidden]{display:none;}
.theme-opt{
  display:flex; align-items:center; gap:9px; padding:8px 10px;
  border:none; background:none; border-radius:8px; cursor:pointer;
  font-size:14px; font-weight:600; color:var(--ink); text-align:left;
}
.theme-opt:hover{background:var(--card-2);}
.theme-opt.on{background:var(--sage-tint); color:var(--sage-deep);}
.theme-swatches{display:inline-flex; gap:3px;}
.theme-swatches i{width:11px; height:11px; border-radius:50%; border:1px solid rgba(0,0,0,.14);}

/* ---------- DINERO ---------- */
.money-card{padding:16px 16px 14px;}
.money-stats{display:flex; gap:8px; margin-bottom:14px;}
.money-stat{flex:1; min-width:0;}
.ms-num{
  font-family:"Bricolage Grotesque", sans-serif; font-weight:700;
  font-size:clamp(17px, 4.8vw, 24px); letter-spacing:-.02em; white-space:nowrap;
  color:var(--sage-deep);
}
.money-stat:nth-child(2) .ms-num{color:var(--amber);}
.money-stat:nth-child(3) .ms-num{color:var(--ink);}
.ms-cap{font-size:12px; color:var(--ink-faint); margin-top:1px;}
.money-bar{display:flex; height:10px; border-radius:999px; background:var(--line); overflow:hidden;}
.money-bar i{display:block; height:100%; transition:width .4s;}
.mb-spent{background:var(--sage-deep);}
.mb-pending{background:var(--sage); opacity:.45;}
.money-legend{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-faint); margin-top:8px;}
.lg{width:9px; height:9px; border-radius:3px; display:inline-block; flex:none;}
.lg-spent{background:var(--sage-deep);}
.lg-pending{background:var(--sage); opacity:.45;}
.lg-rest{background:var(--line);}
.money-budget{display:flex; align-items:center; gap:10px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line);}
.money-budget label{font-size:12px; font-weight:600; color:var(--ink-faint); letter-spacing:.02em;}
.budget-input{
  width:92px; font-family:inherit; font-size:15px; color:var(--ink);
  background:var(--card-2); border:1px solid var(--line-2); border-radius:var(--radius-sm);
  padding:7px 10px; outline:none; -webkit-appearance:none; appearance:none;
}
.budget-input:focus{border-color:var(--sage);}
.money-remaining{font-size:13px; font-weight:600; color:var(--sage-deep); margin-left:auto; text-align:right;}
.money-remaining.over{color:var(--ruby);}
.money-empty{text-align:center; color:var(--ink-soft); font-size:14.5px; line-height:1.55; padding:28px 22px;}
.me-ico{font-size:28px; margin-bottom:8px;}
.money-people{display:grid; grid-template-columns:repeat(auto-fit, minmax(105px, 1fr)); gap:8px; margin:0 0 6px;}
.money-person{border-radius:var(--radius-sm); padding:10px 12px; background:var(--card-2); border:1px solid var(--line);}
.mp-ruben{background:var(--ruben-tint); border-color:transparent;}
.mp-ruben .mp-name{color:var(--ruben);}
.mp-ruby{background:var(--ruby-tint); border-color:transparent;}
.mp-ruby .mp-name{color:var(--ruby);}
.mp-both{background:var(--both-tint); border-color:transparent;}
.mp-both .mp-name{color:var(--both);}
.mp-name{font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--ink-soft);}
.mp-total{font-family:"Bricolage Grotesque", sans-serif; font-weight:700; font-size:19px; margin-top:2px; color:var(--ink);}
.mp-sub{font-size:11.5px; color:var(--ink-faint); margin-top:1px;}
.money-row{display:flex; align-items:stretch; border-top:1px solid var(--line);}
.money-row:first-child{border-top:none;}
.m-dot-btn{
  flex:none; display:grid; place-items:center; padding:0 8px 0 14px;
  background:none; border:none; cursor:pointer;
}
.m-dot{width:14px; height:14px; border-radius:50%; border:2px solid var(--line-2); background:transparent; transition:.15s;}
.m-dot.paid{border-color:var(--sage); background:var(--sage);}
.m-main{
  flex:1; min-width:0; display:flex; align-items:center; gap:10px; padding:11px 14px 11px 4px;
  background:none; border:none; cursor:pointer;
  font-family:inherit; font-size:14.5px; color:var(--ink); text-align:left;
}
.m-title{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.m-title i{color:var(--ink-faint);}
.m-price{font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink);}
.m-price.spent{color:var(--ink-faint); font-weight:500;}
.money-hint{text-align:center; font-size:12.5px; color:var(--ink-faint); margin:4px 0 10px;}
.money-groups .section{margin-top:8px;}

/* ---------- PANTALLAS ANCHAS (tablet / ordenador) ---------- */
@media (min-width: 720px){
  .filterbar{flex-direction:row; align-items:center;}
  .fchips{flex:1;}
  .filter-q{width:230px;}

  .tabs{justify-content:center; gap:8px;}
  .tab{flex:0 1 auto; padding:9px 24px;}

  .editor{display:grid; grid-template-columns:1fr 1fr; column-gap:14px; align-items:start;}
  .editor .f-title, .editor .f-notes, .editor .editor-actions{grid-column:1 / -1;}
}

@media (min-width: 900px){
  .app{max-width:860px; padding:0 24px calc(56px + env(safe-area-inset-bottom));}
  .hero{padding:34px 0 22px;}
  .hero-progress-cap{margin-top:12px;}
}

/* columnas en escritorio (checklist, compra, dinero) */
@media (min-width: 1000px){
  .cols{display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:0 22px; align-items:start;}
}
@media (min-width: 1100px){
  .app{max-width:1060px;}
  .timeline{max-width:720px;}
}

/* móviles estrechos: que quepan las 5 pestañas */
@media (max-width: 420px){
  .tab{font-size:13px; padding:9px 2px;}
}

/* solo con ratón: pistas de que las filas se pueden abrir */
@media (hover: hover){
  .row-main{cursor:pointer;}
  .row:hover{background:var(--card-2);}
  .money-row:hover{background:var(--card-2);}
  .tl-item .row-open:hover, .row-open:hover{color:var(--sage-deep);}
  .fchip:hover, .lang:hover, .pin:hover, .filter-q:hover, .theme-btn:hover{border-color:var(--sage);}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important;}
  .confetti{display:none;}
}