:root{
  --paper:#EEE9DD;
  --paper-2:#E4DDC9;
  --line:#D7CEB5;
  --ink:#2A2622;
  --ink-soft:#6B6355;
  --ink-faint:#A79D87;

  --cooked:#6F8B5E;
  --cooked-ink:#EFF3EA;
  --notcooked:#B5563B;
  --notcooked-ink:#F7ECE7;
  --paid:#C99A3E;
  --paid-ink:#2A2216;

  --tidy:#5B7B8C;
  --tidy-ink:#EFF4F6;

  --none:#B9AE93;
  --none-ink:#3A3527;

  --radius:14px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 10% -10%, #F4EFE2 0%, transparent 60%),
    var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Mono', monospace;
  -webkit-font-smoothing:antialiased;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  min-height:100%;
}

.wrap{
  max-width:520px;
  margin:0 auto;
  padding:20px 16px 40px;
}

/* ---------- Header ---------- */
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}

.nav-btn{
  width:42px;
  height:42px;
  min-width:42px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--paper-2);
  color:var(--ink);
  font-size:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease;
}
.nav-btn:active{ transform:scale(.9); background:var(--line); }

.title-block{
  text-align:center;
  flex:1;
  line-height:1.05;
}
.month-name{
  font-family:'Fraunces', serif;
  font-weight:700;
  font-size:clamp(24px, 7vw, 32px);
  font-variant:small-caps;
  letter-spacing:0.5px;
  text-transform:lowercase;
}
.month-name::first-letter{ text-transform:uppercase; }
.year{
  font-size:12px;
  color:var(--ink-faint);
  letter-spacing:3px;
}

.today-btn{
  text-align:center;
  margin:2px 0 18px;
}
.today-btn button{
  border:none;
  background:none;
  color:var(--ink-soft);
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:1.5px;
  text-decoration:underline;
  text-underline-offset:3px;
  padding:6px;
  cursor:pointer;
}

/* ---------- Weekday row ---------- */
.weekdays{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  margin-bottom:6px;
}
.weekdays span{
  text-align:center;
  font-size:11px;
  letter-spacing:1px;
  color:var(--ink-faint);
  font-weight:600;
}

/* ---------- Grid ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px;
  border-top:1px solid var(--line);
  padding-top:8px;
}

.day{
  position:relative;
  aspect-ratio:1/1;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--paper-2);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
  transition:transform .12s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.day.empty{
  border:none;
  background:transparent;
  cursor:default;
}
.day:not(.empty):active{ transform:scale(.9); }

.day .num{
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  line-height:1;
}
.day .mark{
  font-size:13px;
  line-height:1;
  margin-top:3px;
  opacity:.9;
}

.day.is-today{
  box-shadow:0 0 0 2px var(--ink) inset;
}

.day.state-cocino{
  background:var(--cooked);
  border-color:var(--cooked);
}
.day.state-cocino .num,
.day.state-cocino .mark{ color:var(--cooked-ink); }

.day.state-nococino{
  background:var(--notcooked);
  border-color:var(--notcooked);
}
.day.state-nococino .num,
.day.state-nococino .mark{ color:var(--notcooked-ink); }

.day.state-pagado{
  background:var(--paid);
  border-color:var(--paid);
}
.day.state-pagado .num,
.day.state-pagado .mark{ color:var(--paid-ink); }

.day.state-recogio{
  background:var(--tidy);
  border-color:var(--tidy);
}
.day.state-recogio .num,
.day.state-recogio .mark{ color:var(--tidy-ink); }

.day.state-cocinorecogio{
  background:linear-gradient(135deg, var(--cooked) 0%, var(--cooked) 49%, var(--tidy) 51%, var(--tidy) 100%);
  border-color:var(--tidy);
}
.day.state-cocinorecogio .num,
.day.state-cocinorecogio .mark{ color:#FFFFFF; text-shadow:0 1px 2px rgba(0,0,0,.25); }

/* ninguno: se guarda como estado real, pero visualmente se ve igual que un día vacío */

@keyframes stamp{
  0%{ transform:scale(1); }
  35%{ transform:scale(.82) rotate(-2deg); }
  100%{ transform:scale(1); }
}
.day.stamped{ animation:stamp .28s ease; }

/* ---------- Legend ---------- */
.legend{
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  margin:24px 0 4px;
  padding:14px 10px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.legend-item{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:10.5px;
  color:var(--ink-soft);
  white-space:nowrap;
}
.swatch{
  width:11px;
  height:11px;
  border-radius:3px;
  flex:none;
}
.swatch.cocino{ background:var(--cooked); }
.swatch.nococino{ background:var(--notcooked); }
.swatch.pagado{ background:var(--paid); }
.swatch.recogio{ background:var(--tidy); }
.swatch.cocinorecogio{ background:linear-gradient(135deg, var(--cooked) 0%, var(--cooked) 49%, var(--tidy) 51%, var(--tidy) 100%); }
.swatch.ninguno{ background:var(--none); }

.hint{
  text-align:center;
  font-size:11px;
  color:var(--ink-faint);
  margin-top:10px;
  letter-spacing:.3px;
}

/* ---------- Summary ---------- */
.summary{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:4px;
  margin-top:22px;
}
.stat{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:9px;
  padding:7px 1px;
  text-align:center;
}
.stat .n{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:13px;
  display:block;
}
.stat .l{
  font-size:6px;
  letter-spacing:.1px;
  color:var(--ink-soft);
  text-transform:uppercase;
  display:block;
  margin-top:2px;
  line-height:1.15;
}
.stat.cocino .n{ color:var(--cooked); }
.stat.nococino .n{ color:var(--notcooked); }
.stat.pagado .n{ color:var(--paid); }
.stat.recogio .n{ color:var(--tidy); }
.stat.cocinorecogio .n{ color:var(--cooked); }
.stat.ninguno .n{ color:var(--none-ink); }

footer{
  text-align:center;
  font-size:10px;
  color:var(--ink-faint);
  margin-top:26px;
  letter-spacing:.5px;
}

/* ---------- Notes section ---------- */
.notes-section{
  margin-top:28px;
  border-top:1px solid var(--line);
  padding-top:16px;
}
.notes-header{
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:12px;
}
.notes-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:10px;
}
.note-row{
  display:grid;
  grid-template-columns:26px 1fr auto;
  align-items:start;
  gap:8px;
}
.note-day-num{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:14px;
  color:var(--ink-soft);
  padding-top:8px;
  text-align:right;
  line-height:1;
  flex-shrink:0;
}
.note-textarea{
  width:100%;
  box-sizing:border-box;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:10px;
  padding:7px 10px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--ink);
  resize:none;
  overflow:hidden;
  min-height:34px;
  line-height:1.55;
  field-sizing:content;
  transition:border-color .15s ease, background .15s ease;
}
.note-textarea:focus{
  outline:none;
  border-color:var(--ink-soft);
  background:var(--paper);
}
.note-textarea::placeholder{ color:var(--ink-faint); }
.note-delete-btn{
  background:none;
  border:none;
  color:var(--ink-faint);
  font-size:15px;
  line-height:1;
  padding:6px 2px;
  margin-top:4px;
  cursor:pointer;
  transition:color .15s ease;
  flex-shrink:0;
}
.note-delete-btn:hover{ color:var(--notcooked); }
/* add-note row */
.notes-add-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:4px;
}
.notes-add-select{
  flex:1;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:10px;
  padding:7px 10px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--ink-soft);
  cursor:pointer;
  appearance:none;
}
.notes-add-select:focus{ outline:none; border-color:var(--ink-soft); }
.notes-add-btn{
  border:1px solid var(--line);
  background:var(--paper-2);
  border-radius:10px;
  padding:7px 14px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--ink-soft);
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s ease;
}
.notes-add-btn:active{ background:var(--line); }

/* ---------- Key page ---------- */
.key-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.key-card{
  width:100%;
  max-width:340px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:18px;
  padding:28px 22px;
}
.key-hint{
  text-align:center;
  font-size:12px;
  color:var(--ink-soft);
  margin:8px 0 22px;
  line-height:1.5;
}
.key-input{
  width:100%;
  box-sizing:border-box;
  padding:14px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Mono', monospace;
  font-size:14px;
  margin-bottom:12px;
}
.key-input:focus{
  outline:none;
  border-color:var(--ink-soft);
}
.key-submit{
  width:100%;
  padding:14px;
  border:none;
  border-radius:10px;
  background:var(--ink);
  color:var(--paper);
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:1px;
  cursor:pointer;
}
.key-submit:active{ transform:scale(.98); }
.key-error{
  text-align:center;
  font-size:11px;
  color:var(--notcooked);
  min-height:14px;
  margin:12px 0 0;
}