/* =========================================================================
   MODO LÃ (v1.80) — só no painel do psicólogo, e só quando a pessoa liga
   o botão "Modo lã" perto do Sair. O padrão continua sendo o visual de
   sempre: tudo aqui fica preso em html.zelo-la, então sem a classe nada
   muda. A classe é posta antes de pintar a tela (script no <head> do
   painel) e o modo-la.js cuida do botão, da costura e da sugestão da Maria.

   Nada é foto colada: o fundo é lã (fiapos desenhados em SVG), a agenda é
   papel cartão preto, e dias, horários, abas e botões ganham corpo de lã
   (borda peluda leve via filtro SVG + fiapos) com pesponto desenhado pelo
   JS. A única imagem recortada é a botoeira do caderno, pedido do Matheus.
   ========================================================================= */

/* ---------- botão "Modo lã" (perto do Sair) ---------- */
.zelo-modo-la{ display:inline-flex; align-items:center; gap:.55rem; cursor:pointer; user-select:none; font-size:.8rem; font-weight:500; color:var(--zelo-text-soft); }
.zelo-modo-la input{ position:absolute; opacity:0; width:1px; height:1px; }
.zelo-modo-la-trilho{ width:44px; height:26px; border-radius:999px; background:#D9D3C6; position:relative; transition:background .2s; flex:none; }
.zelo-modo-la-trilho::after{ content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(43,35,32,.25); transition:transform .2s; }
.zelo-modo-la input:checked + .zelo-modo-la-trilho{ background:var(--zelo-primary) url('img/la/fibras-verdes.svg'); background-size:220px; }
.zelo-modo-la input:checked + .zelo-modo-la-trilho::after{ transform:translateX(18px); }
.zelo-modo-la input:focus-visible + .zelo-modo-la-trilho{ outline:3px solid rgba(28,133,88,.35); outline-offset:2px; }

/* Peças que só existem no modo lã (o JS só as cria com o modo ligado). */
zelo-costura, zelo-botoeira{ display:none; }

/* ---------- fundo de todas as telas: lã no lugar dos xizinhos ---------- */
html.zelo-la .zelo-bg-app{ background-color:#EDE6D8; background-image:url('img/la/fibras-escuras.svg'); background-size:220px 220px; }

/* ---------- corpo de lã ----------
   A cor sai do elemento e vai para uma camada de trás (::before) com a
   borda levemente peluda e os fiapos, para o texto ficar nítido por cima. */
html.zelo-la :is(.zelo-tabbar .tab-btn, .zelo-btn-primary, .zelo-btn-secondary, .zelo-cal-dia:not(:disabled), .zelo-cal-chip){ position:relative; }
/* a barra de abas vira barra fixa no celular: não mexer no position dela */
@media (min-width:769px){ html.zelo-la .zelo-tabbar{ position:relative; } }
html.zelo-la :is(.zelo-tabbar, .zelo-tabbar .tab-btn, .zelo-btn-primary, .zelo-btn-secondary, .zelo-cal-dia:not(:disabled), .zelo-cal-chip){
  isolation:isolate; background:transparent !important; box-shadow:none !important; border-color:transparent !important;
  transition:transform .18s cubic-bezier(.3,1.6,.5,1);
}
html.zelo-la :is(.zelo-tabbar, .zelo-tabbar .tab-btn, .zelo-btn-primary, .zelo-btn-secondary, .zelo-cal-dia:not(:disabled), .zelo-cal-chip)::before{
  content:''; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background-color:var(--la-cor, transparent); background-image:var(--la-fiapos, url('img/la/fibras-escuras.svg')); background-size:220px 220px;
  filter:url(#zeloPelo);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 0 rgba(0,0,0,.12), 0 2px 5px -2px rgba(0,0,0,.25);
}
html.zelo-la :is(.zelo-btn-primary, .zelo-btn-secondary, .zelo-cal-dia:not(:disabled), .zelo-cal-chip):hover{ transform:scale(1.04); }
html.zelo-la :is(.zelo-btn-primary, .zelo-btn-secondary, .zelo-cal-dia:not(:disabled), .zelo-cal-chip):active{ transform:scaleX(1.07) scaleY(.88); }
html.zelo-la .zelo-la-fofo{ animation:zeloLaFofo .55s cubic-bezier(.3,1.4,.5,1); }
@keyframes zeloLaFofo{ 0%{ transform:scale(.86,1.08); } 35%{ transform:scale(1.1,.9); } 65%{ transform:scale(.97,1.03); } 100%{ transform:none; } }

/* pesponto desenhado (SVG feito pelo modo-la.js) */
html.zelo-la zelo-costura{ display:block; position:absolute; inset:0; pointer-events:none; z-index:0; --in:4; --sw:1.5; --linha:rgba(247,244,236,.7); }
zelo-costura svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }

/* abas */
html.zelo-la .zelo-tabbar{ --la-cor:#E3D9C5; }
html.zelo-la .zelo-tabbar::before{ box-shadow:inset 0 1px 2px rgba(0,0,0,.08); }
html.zelo-la .zelo-tabbar .tab-btn{ --la-cor:transparent; --la-fiapos:none; }
html.zelo-la .zelo-tabbar .tab-btn::before{ box-shadow:none; }
html.zelo-la .zelo-tabbar .tab-btn.ativo{ --la-cor:#fff; }
html.zelo-la .zelo-tabbar .tab-btn.ativo::before{ box-shadow:0 1px 4px rgba(43,35,32,.14); }
html.zelo-la .zelo-tabbar .tab-btn.ativo zelo-costura{ --in:3.5; --linha:rgba(28,133,88,.55); }
html.zelo-la .zelo-tabbar .tab-btn:not(.ativo) zelo-costura{ display:none; }
@media (max-width:768px){
  html.zelo-la .zelo-tabbar{ --la-cor:#fff; }
  html.zelo-la .zelo-tabbar::before{ box-shadow:0 12px 32px rgba(43,35,32,.16); }
  html.zelo-la .zelo-tabbar .tab-btn.ativo{ --la-cor:var(--zelo-mint); }
}

/* botões */
html.zelo-la .zelo-btn-primary{ --la-cor:var(--zelo-primary); --la-fiapos:url('img/la/fibras-verdes.svg'); }
html.zelo-la .zelo-btn-primary:hover{ --la-cor:var(--zelo-primary-dark); }
html.zelo-la .zelo-btn-secondary{ --la-cor:var(--zelo-surface-2); }
html.zelo-la .zelo-btn-secondary zelo-costura{ --linha:rgba(107,96,88,.5); }

/* ---------- agenda: papel cartão preto ---------- */
html.zelo-la .zelo-cal{ position:relative; isolation:isolate; background:transparent; }
html.zelo-la .zelo-cal::after{
  content:''; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background:#181918 url('img/la/papel-cartao.svg'); background-size:260px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.25), 0 16px 30px -18px rgba(0,0,0,.6);
}
html.zelo-la .zelo-cal > zelo-costura{ --in:9; --raio:20; --sw:1.9; --linha:rgba(233,221,196,.62); }
html.zelo-la .zelo-cal-nav{ position:relative; border-color:transparent; background:rgba(247,244,236,.05); }
html.zelo-la .zelo-cal-nav zelo-costura{ --in:1; --sw:1.6; --linha:rgba(233,221,196,.55); }
html.zelo-la .zelo-cal-horarios{ position:relative; border-top-color:transparent; min-height:4.4rem; }
html.zelo-la .zelo-cal-horarios > zelo-costura{ --sw:1.7; --linha:rgba(233,221,196,.38); }

/* botoeira do caderno: sai de trás da borda direita, embaixo da linha do meio */
html.zelo-la zelo-botoeira{
  display:block; position:absolute; right:-28px; bottom:12px; width:80px; height:73px; z-index:3; pointer-events:none;
  background:url('img/la/botoeira.webp') center/contain no-repeat; filter:drop-shadow(-2px 3px 3px rgba(0,0,0,.35));
}
@media (max-width:640px){ html.zelo-la zelo-botoeira{ right:-16px; width:64px; height:58px; bottom:14px; } }

/* dias */
html.zelo-la .zelo-cal-dia zelo-costura{ --in:3.5; --sw:1.25; --linha:rgba(247,244,236,.62); }
html.zelo-la .zelo-cal-dia-tem-vaga{ --la-cor:rgba(46,158,102,.14); --la-fiapos:none; }
html.zelo-la .zelo-cal-dia-tem-vaga::before{ box-shadow:none; }
html.zelo-la .zelo-cal-dia-tem-vaga zelo-costura{ --in:1; --sw:1.8; --linha:#3DB57A; }
html.zelo-la .zelo-cal-dia-tem-ocupado{ --la-cor:var(--zelo-pill-verde); --la-fiapos:url('img/la/fibras-verdes.svg'); }
html.zelo-la .zelo-cal-dia-tem-ocupado zelo-costura{ --in:3.5; --sw:1.25; --linha:rgba(247,244,236,.62); }
html.zelo-la .zelo-cal-dia-esgotado{ --la-cor:var(--zelo-esgotado); --la-fiapos:url('img/la/fibras-escuras.svg'); }
html.zelo-la .zelo-cal-dia-selecionado{ --la-cor:var(--zelo-sand); --la-fiapos:url('img/la/fibras-escuras.svg'); }
html.zelo-la .zelo-cal-dia-selecionado::before{ box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 3px rgba(233,221,196,.22); }
html.zelo-la :is(.zelo-cal-dia-esgotado, .zelo-cal-dia-selecionado) zelo-costura{ --in:3.5; --sw:1.25; --linha:rgba(60,48,36,.42); }
html.zelo-la .zelo-cal-dia-hoje:not(.zelo-cal-dia-selecionado) .zelo-cal-dia-num{ text-decoration:underline dashed 1.5px; text-underline-offset:3px; }

/* horários (lista do dia, quando aparece) */
html.zelo-la .zelo-cal-chip{ --la-cor:#F7F4EC; }
html.zelo-la .zelo-cal-chip zelo-costura{ --in:3.5; --linha:rgba(28,133,88,.62); }

/* movimento: respeita o "reduzir movimento" do sistema e o do Zelo */
@media (prefers-reduced-motion:reduce){
  html.zelo-la *{ transition:none !important; }
  html.zelo-la .zelo-la-fofo{ animation:none; }
}
html.zelo-la[data-zelo-movimento="reduzido"] .zelo-la-fofo, html.zelo-la[data-zelo-movimento="desligado"] .zelo-la-fofo{ animation:none; }
html.zelo-la[data-zelo-movimento="desligado"] :is(.zelo-btn-primary, .zelo-btn-secondary, .zelo-cal-dia, .zelo-cal-chip){ transition:none; transform:none !important; }

/* ---------- Maria sugerindo o modo lã (uma vez só) ---------- */
.zelo-la-maria{
  position:fixed; right:1.25rem; bottom:6.2rem; z-index:160; width:360px; max-width:calc(100vw - 1.5rem);
  display:flex; align-items:flex-end; gap:.25rem; pointer-events:none;
  opacity:0; transform:translateY(16px); transition:opacity .3s ease, transform .35s cubic-bezier(.2,.8,.3,1);
}
.zelo-la-maria.mostrar{ opacity:1; transform:none; }
.zelo-la-maria img{ width:84px; height:auto; flex:none; filter:drop-shadow(0 6px 10px rgba(43,35,32,.18)); }
.zelo-la-maria-balao{
  pointer-events:auto; position:relative; background:#fff; border-radius:20px 20px 20px 6px; padding:1rem 1rem .9rem; margin-bottom:2.2rem;
  box-shadow:0 12px 32px rgba(43,35,32,.18); font-size:.88rem; line-height:1.45; color:var(--zelo-text);
}
.zelo-la-maria-balao b{ display:block; font-size:.95rem; margin-bottom:.25rem; }
.zelo-la-maria-acoes{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.8rem; }
.zelo-la-maria-acoes button{ font-size:.85rem; padding:.55rem 1rem; }
@media (max-width:768px){ .zelo-la-maria{ right:.75rem; bottom:calc(100px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion:reduce){ .zelo-la-maria{ transition:opacity .2s; transform:none; } }