/* ============================================================
   Calendário — clone fiel do design
   base tipográfica: 16px @ 1165px de largura
   ============================================================ */

:root{
  --bg:#F9F3ED;
  --surface:#FEFAF6;
  --line:#EDE3D8;
  --line-soft:#F1E9E0;
  --ink:#39322D;
  --ink-2:#5A534D;
  --muted:#998E83;
  --dim:#C9BFB4;

  --clay:#BD7452;
  --clay-deep:#9D5A3F;
  --clay-line:#DEAA89;
  --clay-tint:#EFD8C6;
  --clay-cell:#FDF5EF;

  --seg:#EBE2D9;

  --verde-chip:#E4EAD9;
  --verde-soft:#E4EAD9;
  --verde-ink:#808E72;

  --azul-chip:#DEE5ED;
  --azul-soft:#DFE6EE;
  --azul-ink:#60748E;

  --barro-chip:#EAD1BF;
  --barro-soft:#EFD8C6;
  --barro-ink:#9D5A3F;

  --areia-chip:#F0E4D7;
  --areia-soft:#F3E7DA;
  --areia-ink:#B5754F;

  --r-cell:.625rem;
  --r-btn:.75rem;
  --r-panel:1rem;

  --ease:cubic-bezier(.22,1,.36,1);
}

html{ font-size:clamp(13px, 1.3734vw, 18px); }

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:.875rem;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
  overflow-x:hidden;
}

button,input,select{ font:inherit; color:inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; }
svg.ico{ width:1.25rem; height:1.25rem; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* ─────────────── shell ─────────────── */
.app{
  display:flex;
  height:100dvh;
  min-height:100dvh;
  background:var(--surface);
  overflow:hidden;
}

/* ─────────────── barra lateral ─────────────── */
.rail{
  width:4.8125rem;
  flex:0 0 4.8125rem;
  background:var(--surface);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:1.1875rem 0 1.25rem;
  padding-bottom:calc(1.25rem + env(safe-area-inset-bottom));
}

.logo{
  width:2.5rem; height:2.5rem;
  border-radius:.75rem;
  background:linear-gradient(160deg,#BC7150 0%,#A55F3F 100%);
  color:#F3DFD2;
  display:grid; place-items:center;
  box-shadow:0 .5rem 1.125rem -.35rem rgba(146,79,49,.45);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.logo:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 .75rem 1.5rem -.4rem rgba(146,79,49,.5); }
.logo:active{ transform:scale(.96); }
.logo-grid{ width:1.375rem; height:1.375rem; }

.rail-nav{
  margin-top:1.65625rem;
  display:flex; flex-direction:column; align-items:center;
  gap:.875rem;
}

.rail-btn{
  width:2.875rem; height:2.875rem;
  border-radius:.875rem;
  display:grid; place-items:center;
  color:var(--muted);
  position:relative;
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.rail-btn:hover{ background:#F5EDE4; color:var(--ink-2); transform:translateY(-1px); }
.rail-btn.is-active{ background:var(--clay-tint); color:var(--clay-deep); }
.rail-btn.is-active:hover{ background:var(--clay-tint); color:var(--clay-deep); }

.avatar{
  margin-top:auto;
  width:2.75rem; height:2.75rem;
  border-radius:50%;
  padding:.125rem;
  background:var(--surface);
  box-shadow:0 0 0 1px var(--line);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.avatar img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.avatar:hover{ transform:scale(1.06); box-shadow:0 0 0 1px var(--clay-line); }

/* ─────────────── área principal ─────────────── */
.main{
  flex:1; min-width:0;
  background:var(--bg);
  padding:1.5625rem 1.625rem 1.5rem 2rem;
  padding-bottom:calc(1.5rem + env(safe-area-inset-bottom));
  display:flex; flex-direction:column;
  overflow:hidden;
}

/* cabeçalho */
.head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1.5rem; margin-bottom:.9375rem;
}
.head h1{
  margin:0;
  font-size:2.125rem; font-weight:700; letter-spacing:-.021em;
  line-height:1.15; color:var(--ink);
  text-transform:none;
}
.head .sub{ margin:.25rem 0 0; font-size:.875rem; color:var(--muted); line-height:1.25; }

.head-tools{ display:flex; align-items:center; gap:.5rem; flex:0 0 auto; margin-bottom:.125rem; }

.seg{
  display:flex; align-items:center;
  background:var(--seg);
  border-radius:999px;
  padding:.21875rem;
  height:2.3125rem;
  position:relative;
}
.seg button{
  position:relative; z-index:1;
  height:1.875rem; padding:0 1rem;
  border-radius:.625rem;
  font-size:.875rem; font-weight:500; color:var(--muted);
  white-space:nowrap;
  transition:color .3s var(--ease);
}
.seg button.is-on{ color:var(--ink); font-weight:600; }
.seg .thumb{
  position:absolute; top:.21875rem; left:0; height:1.875rem;
  background:var(--surface); border-radius:.625rem;
  box-shadow:0 .0625rem .1875rem rgba(88,66,50,.09);
  transition:transform .45s var(--ease), width .45s var(--ease);
  z-index:0;
}

.nav-btn{
  width:2.375rem; height:2.3125rem;
  border-radius:.75rem;
  background:var(--surface);
  border:1px solid var(--line);
  display:grid; place-items:center;
  color:var(--ink);
  transition:background .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.nav-btn:hover{ background:#fff; border-color:var(--clay-line); transform:translateY(-1px); }
.nav-btn:active{ transform:scale(.94); }
.nav-btn svg{ width:1rem; height:1rem; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.btn-new{
  margin-left:.1875rem;
  height:2.3125rem; padding:0 1.0625rem 0 .875rem;
  border-radius:.875rem;
  background:var(--clay); color:#FFF6F0;
  display:inline-flex; align-items:center; gap:.4375rem;
  font-size:.875rem; font-weight:600;
  box-shadow:0 .375rem .875rem -.35rem rgba(146,79,49,.5);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.btn-new svg{ width:.9375rem; height:.9375rem; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
.btn-new:hover{ background:#C57C59; transform:translateY(-1px); box-shadow:0 .625rem 1.125rem -.4rem rgba(146,79,49,.55); }
.btn-new:active{ transform:scale(.97); }

/* ─────────────── tabuleiro ─────────────── */
.board{ flex:1; display:flex; gap:1.375rem; min-height:0; }
.cal{ flex:1; min-width:0; display:flex; flex-direction:column; }

.dow{
  display:grid; grid-template-columns:repeat(7,1fr); gap:.5625rem;
  margin-bottom:.25rem;
}
.dow span{
  font-size:.75rem; font-weight:600; letter-spacing:.095em;
  text-transform:uppercase; color:var(--muted);
  padding-left:.25rem;
  line-height:1.25rem;
}

.grid{
  flex:1; min-height:0;
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:.5625rem;
}

.cell{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-cell);
  padding:.5rem .625rem .625rem;
  min-height:0;
  display:flex; flex-direction:column;
  text-align:left;
  overflow:hidden;
  cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  animation:pop .5s var(--ease) both;
}
.cell:hover{ transform:translateY(-2px); box-shadow:0 .5rem 1rem -.5rem rgba(120,92,70,.28); border-color:var(--clay-line); }
.cell:active{ transform:translateY(0) scale(.99); }

.cell.is-out{
  background:transparent; border-color:transparent; cursor:default;
  animation:none;
}
.cell.is-out:hover{ transform:none; box-shadow:none; border-color:transparent; }
.cell.is-out .num{ color:var(--dim); font-weight:500; }

.cell.is-today{ background:var(--clay-cell); border-color:var(--clay-line); padding-top:.5rem; }

.num{
  font-size:.875rem; font-weight:600; color:var(--ink);
  line-height:1.125rem; letter-spacing:-.01em;
}
.num-badge{
  width:1.625rem; height:1.625rem; border-radius:50%;
  background:var(--clay); color:#FFF7F2;
  display:grid; place-items:center;
  font-size:.8125rem; font-weight:600; letter-spacing:-.01em;
  box-shadow:0 .25rem .5rem -.25rem rgba(146,79,49,.5);
}

.chips{ margin-top:.125rem; display:flex; flex-direction:column; gap:.3125rem; min-height:0; }
.cell.is-today .chips{ margin-top:.1875rem; }

.chip{
  height:1.125rem; border-radius:.375rem;
  padding:0 .3125rem;
  display:flex; align-items:center;
  font-size:.6875rem; font-weight:600; letter-spacing:-.018em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  flex:0 0 auto;
  transition:transform .25s var(--ease), filter .25s var(--ease);
}
.chip:hover{ transform:translateX(1px); filter:brightness(.97); }
.chip span{ overflow:hidden; text-overflow:ellipsis; }

.more{
  margin-top:.375rem; padding-left:.25rem;
  font-size:.6875rem; font-weight:600; color:var(--muted);
}

/* cores */
.c-verde{ background:var(--verde-chip); color:var(--verde-ink); }
.c-azul { background:var(--azul-chip);  color:var(--azul-ink); }
.c-barro{ background:var(--barro-chip); color:var(--barro-ink); }
.c-areia{ background:var(--areia-chip); color:var(--areia-ink); }

/* ─────────────── painel da agenda ─────────────── */
.agenda{
  width:17.5rem; flex:0 0 17.5rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-panel);
  padding:1.375rem;
  display:flex; flex-direction:column;
  overflow:hidden;
}
.agenda h2{ margin:0; font-size:1.0625rem; font-weight:700; letter-spacing:-.015em; }
.agenda .day{ margin:.1875rem 0 0; font-size:.84375rem; color:var(--muted); }

.agenda-list{
  margin-top:.5rem;
  display:flex; flex-direction:column; gap:.9375rem;
  overflow-y:auto; overflow-x:hidden;
  padding-right:.125rem;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.agenda-list::-webkit-scrollbar{ width:.25rem; }
.agenda-list::-webkit-scrollbar-thumb{ background:var(--line); border-radius:999px; }

.slot{ display:flex; gap:.75rem; align-items:flex-start; animation:rise .5s var(--ease) both; }
.slot .time{ flex:0 0 3rem; font-size:.75rem; font-weight:500; color:var(--muted); padding-top:.3125rem; }
.slot .card{
  flex:1; min-width:0;
  border-radius:.5rem;
  padding:.5rem .75rem;
  text-align:left;
  cursor:pointer;
  transition:transform .3s var(--ease), filter .3s var(--ease);
}
.slot .card:hover{ transform:translateX(2px); filter:brightness(.98); }
.slot .card:active{ transform:scale(.99); }
.slot .card b{ display:block; font-size:.9375rem; font-weight:600; letter-spacing:-.012em; line-height:1.28; }
.slot .card i{ display:block; font-style:normal; margin-top:.0625rem; font-size:.8125rem; line-height:1.25; opacity:.78; }

.a-verde b,.a-verde i{ color:var(--verde-ink); } .a-verde{ background:var(--verde-soft); }
.a-azul  b,.a-azul  i{ color:var(--azul-ink); }  .a-azul { background:var(--azul-soft); }
.a-barro b,.a-barro i{ color:var(--barro-ink); } .a-barro{ background:var(--barro-soft); }
.a-areia b,.a-areia i{ color:var(--areia-ink); } .a-areia{ background:var(--areia-soft); }

.empty{ margin-top:1.5rem; font-size:.84375rem; color:var(--dim); }

/* ─────────────── vistas semana / dia ─────────────── */
.hours{ flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.hours-head{ display:grid; gap:.5625rem; margin-bottom:.375rem; }
.hours-head .hcol{ text-align:left; padding-left:.375rem; }
.hours-head .hcol .dw{ font-size:.75rem; font-weight:600; letter-spacing:.095em; text-transform:uppercase; color:var(--muted); }
.hours-head .hcol .dn{ font-size:1.0625rem; font-weight:600; margin-top:.125rem; letter-spacing:-.015em; }
.hours-head .hcol.on .dn{ color:var(--clay-deep); }
.hours-body{
  flex:1; min-height:0; overflow-y:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-cell);
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.hours-body::-webkit-scrollbar{ width:.3125rem; }
.hours-body::-webkit-scrollbar-thumb{ background:var(--line); border-radius:999px; }
.hrow{ display:grid; border-bottom:1px solid var(--line-soft); min-height:3.25rem; }
.hrow:last-child{ border-bottom:0; }
.hrow .hlabel{ font-size:.6875rem; color:var(--muted); padding:.4375rem .5rem 0 .625rem; text-align:right; }
.hslot{ border-left:1px solid var(--line-soft); padding:.25rem; display:flex; flex-direction:column; gap:.25rem; cursor:pointer; transition:background .25s var(--ease); }
.hslot:hover{ background:#FDF7F1; }
.hev{
  border-radius:.4375rem; padding:.3125rem .5rem; text-align:left;
  font-size:.75rem; font-weight:600; letter-spacing:-.01em;
  animation:rise .45s var(--ease) both;
  transition:transform .25s var(--ease);
  min-width:0; overflow:hidden;
}
.hev:hover{ transform:translateX(2px); }
.hev > span{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hev small{ display:block; font-weight:500; opacity:.75; font-size:.6875rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ─────────────── vista ano ─────────────── */
.year{
  flex:1; min-height:0; overflow-y:auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:.875rem;
  padding-right:.25rem;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.year::-webkit-scrollbar{ width:.3125rem; }
.year::-webkit-scrollbar-thumb{ background:var(--line); border-radius:999px; }
.ycard{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-cell);
  padding:.75rem .8125rem .875rem; cursor:pointer;
  animation:pop .5s var(--ease) both;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.ycard:hover{ transform:translateY(-2px); border-color:var(--clay-line); box-shadow:0 .5rem 1rem -.5rem rgba(120,92,70,.25); }
.ycard h3{ margin:0 0 .5rem; font-size:.875rem; font-weight:600; letter-spacing:-.01em; }
.ymini{ display:grid; grid-template-columns:repeat(7,1fr); gap:.0625rem; }
.ymini i{ font-style:normal; font-size:.5625rem; color:var(--muted); text-align:center; line-height:1.15rem; border-radius:50%; }
.ymini i.dw{ color:var(--dim); font-weight:600; }
.ymini i.has{ background:var(--verde-chip); color:var(--verde-ink); font-weight:600; }
.ymini i.today{ background:var(--clay); color:#fff; font-weight:600; }

/* ─────────────── páginas ─────────────── */
.panel{
  flex:1; min-height:0; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
  padding-right:.25rem;
}
.panel::-webkit-scrollbar{ width:.3125rem; }
.panel::-webkit-scrollbar-thumb{ background:var(--line); border-radius:999px; }

.list-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-panel);
  padding:1.125rem 1.25rem; margin-bottom:.875rem;
  animation:rise .5s var(--ease) both;
}
.list-card h3{ margin:0 0 .75rem; font-size:1rem; font-weight:700; letter-spacing:-.015em; }

.task{ display:flex; align-items:center; gap:.75rem; padding:.5rem 0; border-bottom:1px solid var(--line-soft); }
.task:last-child{ border-bottom:0; }
.task .box{
  width:1.125rem; height:1.125rem; flex:0 0 auto;
  border-radius:.3125rem; border:1.5px solid var(--dim);
  display:grid; place-items:center; color:transparent;
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.task .box:hover{ transform:scale(1.1); border-color:var(--clay-line); }
.task.done .box{ background:var(--clay); border-color:var(--clay); color:#fff; }
.task .box svg{ width:.75rem; height:.75rem; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.task .txt{ font-size:.875rem; flex:1; min-width:0; }
.task.done .txt{ color:var(--dim); text-decoration:line-through; }
.task .tag{ font-size:.6875rem; font-weight:600; padding:.125rem .4375rem; border-radius:.375rem; }

.people{ display:grid; grid-template-columns:repeat(auto-fill,minmax(13rem,1fr)); gap:.875rem; }
.person{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-panel);
  padding:1rem; display:flex; align-items:center; gap:.75rem;
  animation:pop .5s var(--ease) both;
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.person:hover{ transform:translateY(-2px); border-color:var(--clay-line); box-shadow:0 .5rem 1rem -.5rem rgba(120,92,70,.25); }
.person .pv{
  width:2.5rem; height:2.5rem; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; font-size:.875rem; font-weight:700;
}
.person b{ display:block; font-size:.875rem; font-weight:600; letter-spacing:-.01em; }
.person span{ display:block; font-size:.75rem; color:var(--muted); margin-top:.0625rem; }

/* ─────────────── modal ─────────────── */
.scrim{
  position:fixed; inset:0; background:rgba(75,55,42,.28);
  backdrop-filter:blur(2px); z-index:40;
  animation:fade .3s var(--ease) both;
}
.sheet{
  position:fixed; z-index:41;
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(25rem,calc(100vw - 2rem));
  background:var(--surface); border:1px solid var(--line);
  border-radius:1.125rem; padding:1.25rem;
  box-shadow:0 1.5rem 3rem -1rem rgba(90,64,45,.35);
  animation:sheetIn .42s var(--ease) both;
  max-height:calc(100dvh - 2rem); overflow-y:auto;
}
.sheet-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.sheet-head h2{ margin:0; font-size:1.125rem; font-weight:700; letter-spacing:-.015em; }
.icon-btn{ width:2rem; height:2rem; border-radius:.625rem; display:grid; place-items:center; color:var(--muted); transition:background .25s var(--ease), color .25s var(--ease); }
.icon-btn:hover{ background:var(--seg); color:var(--ink); }
.icon-btn svg{ width:1rem; height:1rem; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }

.field{ display:block; margin-bottom:.75rem; }
.field > span{ display:block; font-size:.75rem; font-weight:600; color:var(--muted); margin-bottom:.3125rem; letter-spacing:.01em; }
.field input{
  width:100%; height:2.375rem; padding:0 .75rem;
  background:var(--bg); border:1px solid var(--line); border-radius:.625rem;
  font-size:.875rem; outline:none;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.field input:focus{ border-color:var(--clay-line); background:var(--surface); }
.field-row{ display:flex; gap:.75rem; }
.field-row .field{ flex:1; }

.swatches{ display:flex; gap:.5rem; }
.sw{ width:2rem; height:2rem; border-radius:.625rem; border:2px solid transparent; transition:transform .25s var(--ease), border-color .25s var(--ease); }
.sw:hover{ transform:scale(1.08); }
.sw.on{ border-color:var(--clay-deep); transform:scale(1.06); }

.sheet-foot{ display:flex; align-items:center; gap:.5rem; margin-top:1.125rem; }
.grow{ flex:1; }
.btn-ghost{
  height:2.25rem; padding:0 .875rem; border-radius:.625rem;
  font-size:.8125rem; font-weight:600; color:var(--muted);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.btn-ghost:hover{ background:var(--seg); color:var(--ink); }
#f-delete:hover{ color:#A5433A; background:#F6E2DD; }
.btn-primary{
  height:2.25rem; padding:0 1.125rem; border-radius:.625rem;
  background:var(--clay); color:#FFF6F0; font-size:.8125rem; font-weight:600;
  box-shadow:0 .375rem .75rem -.35rem rgba(146,79,49,.5);
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.btn-primary:hover{ background:#C57C59; transform:translateY(-1px); }
.btn-primary:active{ transform:scale(.97); }

.toast{
  position:fixed; left:50%; bottom:1.75rem; transform:translateX(-50%);
  z-index:60;
  background:var(--ink); color:#FBF5EE;
  padding:.625rem 1rem; border-radius:.75rem;
  font-size:.8125rem; font-weight:500;
  box-shadow:0 .75rem 1.5rem -.5rem rgba(50,36,26,.45);
  animation:toastIn .4s var(--ease) both;
}

/* ─────────────── animações ─────────────── */
@keyframes pop{ from{ opacity:0; transform:translateY(.5rem) scale(.985);} to{ opacity:1; transform:none; } }
@keyframes rise{ from{ opacity:0; transform:translateY(.625rem);} to{ opacity:1; transform:none; } }
@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes sheetIn{ from{ opacity:0; transform:translate(-50%,-46%) scale(.96);} to{ opacity:1; transform:translate(-50%,-50%) scale(1);} }
@keyframes toastIn{ from{ opacity:0; transform:translate(-50%,.75rem);} to{ opacity:1; transform:translate(-50%,0);} }

.view-in{ animation:viewIn .45s var(--ease) both; }
@keyframes viewIn{ from{ opacity:0; transform:translateY(.5rem);} to{ opacity:1; transform:none; } }

/* ─────────────── celular ─────────────── */
@media (max-width:820px){
  html{ font-size:15px; }
  body{ overflow:auto; }
  .app{ height:auto; min-height:100dvh; overflow:visible; }
  .rail{
    position:fixed; bottom:0; left:0; right:0; top:auto;
    width:100%; flex:none; height:4rem;
    flex-direction:row; justify-content:space-around; align-items:center;
    border-right:0; border-top:1px solid var(--line);
    padding:0 .75rem;
    padding-bottom:env(safe-area-inset-bottom);
    z-index:30;
  }
  .rail .logo,.rail .avatar{ display:none; }
  .rail-nav{ margin:0; flex-direction:row; gap:.5rem; flex:1; justify-content:space-around; }
  .main{
    padding:1.25rem 1rem calc(5.5rem + env(safe-area-inset-bottom));
    overflow:visible; min-height:100dvh;
  }
  .head{ flex-direction:column; align-items:stretch; gap:.875rem; }
  .head-tools{ flex-wrap:wrap; gap:.5rem; justify-content:flex-end; margin-bottom:0; }
  .seg{ flex:1 1 100%; }
  .seg button{ flex:1; padding:0 .5rem; }
  .btn-new{ margin-left:0; }
  /* no celular o mês vira bolinhas — cabe sem cortar texto */
  .chips{ flex-direction:row; flex-wrap:wrap; gap:.1875rem; margin-top:.3125rem; }
  .chip{ width:.4375rem; height:.4375rem; border-radius:50%; padding:0; flex:0 0 auto; }
  .chip span{ display:none; }
  .more{ display:none; }
  .cell.is-today .chips{ margin-top:.25rem; }
  .num-badge{ width:1.5rem; height:1.5rem; font-size:.75rem; }
  .board{ flex-direction:column; gap:1rem; }
  .agenda{ width:auto; flex:none; }
  .grid{ grid-auto-rows:minmax(4rem,auto); }
  .year{ grid-template-columns:repeat(2,1fr); }
  .dow span{ font-size:.625rem; letter-spacing:.04em; padding-left:.125rem; }
  .cell{ padding:.4375rem; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}