/* ============================================================
   PROTOCOLO JEJUM INVERTIDO — App da Aluna (21 dias)
   Mesma identidade do quiz e dos mockups: creme quente,
   verde da marca, cards brancos arredondados. Mobile-first.
   ============================================================ */
:root{
  --bg:#FBF7F1;
  --bg-soft:#F4EDE2;
  --card:#FFFFFF;
  --ink:#2B2420;
  --ink-soft:#6F655C;
  --green:#1DBE5C;
  --green-dark:#149A49;
  --green-soft:#E4F8EC;
  --coral:#FF5F52;
  --coral-soft:#FFECEA;
  --amber-soft:#FFF6E3;
  --amber-ink:#8A6A1F;
  --beige:#ECE4D7;
  --radius:18px;
  --shadow:0 10px 30px -12px rgba(43,36,32,.18);
  --shadow-press:0 4px 14px -6px rgba(29,190,92,.45);
  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"Nunito",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
img{max-width:100%;height:auto}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  min-height:100svh;
  background-image:
    radial-gradient(900px 420px at 85% -10%, rgba(29,190,92,.07), transparent 60%),
    radial-gradient(700px 380px at -10% 100%, rgba(255,95,82,.05), transparent 60%);
}
#app{max-width:480px;margin:0 auto;padding:0 18px 110px;position:relative}
.hidden{display:none!important}
button{font-family:inherit;cursor:pointer}

/* ---------- Botões ---------- */
.btn{
  width:100%;border:0;border-radius:16px;padding:17px 20px;
  font-family:var(--font-body);font-weight:900;font-size:16px;letter-spacing:.02em;
  background:linear-gradient(180deg,#23CD68,var(--green));color:#fff;
  box-shadow:var(--shadow-press);transition:transform .12s ease,filter .15s ease,opacity .2s;
}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.45;box-shadow:none;cursor:default}
.btn.ghost{background:transparent;color:var(--ink-soft);box-shadow:none;font-weight:800;font-size:14px;padding:12px}
.skip{display:block;width:100%;background:none;border:0;color:var(--ink-soft);font-weight:700;font-size:14px;padding:12px;text-decoration:underline}

/* ---------- Telas de entrada (login / onboarding) ---------- */
.gate{min-height:88svh;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:24px 0}
.gate .logo{height:52px;width:auto;align-self:center;margin-bottom:8px}
.gate h1{font-family:var(--font-display);font-size:26px;line-height:1.2;text-align:center;letter-spacing:-.01em}
.gate p.sub{text-align:center;color:var(--ink-soft);font-size:15px;line-height:1.55}
.gate .field{
  width:100%;border:2px solid var(--beige);border-radius:16px;padding:16px;
  font-family:inherit;font-size:17px;font-weight:700;color:var(--ink);background:var(--card);
  text-align:center;outline:none;transition:border-color .15s;
}
.gate .field:focus{border-color:var(--green)}
.gate .field.code{letter-spacing:.4em;font-size:24px;font-weight:900}
.gate .err{background:var(--coral-soft);color:#A33028;border-radius:12px;padding:12px 14px;font-size:14px;font-weight:700;text-align:center}
.gate .ok{background:var(--green-soft);color:var(--green-dark);border-radius:12px;padding:12px 14px;font-size:14px;font-weight:700;text-align:center}
.gate .legal{text-align:center;color:var(--ink-soft);font-size:12.5px;line-height:1.5;margin-top:6px}
.gate .legal a{color:var(--green-dark)}

/* onboarding: opções de hora */
.hourgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hourgrid button{
  border:2px solid var(--beige);background:var(--card);border-radius:14px;padding:14px 6px;
  font-weight:800;font-size:16px;color:var(--ink);transition:all .12s;
}
.hourgrid button.sel{border-color:var(--green);background:var(--green-soft);color:var(--green-dark)}

/* ---------- Topo do app ---------- */
.apptop{display:flex;align-items:center;gap:12px;padding:22px 0 14px}
.apptop img{height:30px;width:auto}
.apptop .hi{flex:1}
.apptop .hi b{font-family:var(--font-display);font-size:19px;display:block;letter-spacing:-.01em}
.apptop .hi span{color:var(--ink-soft);font-size:13.5px;font-weight:700}
.apptop .fase{
  background:var(--green-soft);color:var(--green-dark);font-size:11px;font-weight:900;
  letter-spacing:.05em;text-transform:uppercase;padding:7px 11px;border-radius:99px;
}

/* ---------- Tela HOJE ---------- */
.wincard{
  background:var(--green-soft);border-radius:20px;padding:20px;margin-bottom:18px;
  display:flex;align-items:center;gap:16px;box-shadow:var(--shadow);
}
.wincard .txt{flex:1}
.wincard .lbl{font-size:11.5px;font-weight:900;letter-spacing:.06em;color:var(--green-dark);text-transform:uppercase}
.wincard .hours{font-family:var(--font-display);font-size:27px;font-weight:800;color:var(--green-dark);margin-top:4px;letter-spacing:-.01em;line-height:1.1}
.wincard .note{font-size:12.5px;color:#3E7A55;font-weight:700;margin-top:5px;line-height:1.4}
.wincard svg{flex:none}

.h2{font-family:var(--font-display);font-size:19px;margin:20px 0 12px;letter-spacing:-.01em}

/* tarefas */
.task{
  display:flex;align-items:center;gap:14px;background:var(--card);border-radius:16px;
  padding:15px 16px;margin-bottom:10px;box-shadow:var(--shadow);border:2px solid transparent;
  cursor:pointer;user-select:none;transition:border-color .15s;
}
.task.done{border-color:var(--green-soft)}
.task .chk{
  flex:none;width:28px;height:28px;border-radius:50%;border:2.5px solid #D8CFC0;
  display:grid;place-items:center;color:#fff;font-size:15px;font-weight:900;transition:all .15s;
}
.task.done .chk{background:var(--green);border-color:var(--green)}
.task .tt b{display:block;font-size:15px;font-weight:800;line-height:1.3}
.task.done .tt b{color:var(--ink-soft);text-decoration:line-through;text-decoration-color:rgba(111,101,92,.5)}
.task .tt span{display:block;font-size:13px;color:var(--ink-soft);font-weight:600;margin-top:2px;line-height:1.35}

/* aprendizado do dia */
.learn{background:var(--card);border-radius:20px;padding:20px;box-shadow:var(--shadow);margin:18px 0}
.learn .tag{font-size:11.5px;font-weight:900;letter-spacing:.06em;color:var(--green-dark);text-transform:uppercase}
.learn h3{font-family:var(--font-display);font-size:20px;margin:6px 0 10px;letter-spacing:-.01em;line-height:1.25}
.learn p{font-size:15px;line-height:1.65;color:var(--ink-soft);margin-bottom:12px}
.learn p:last-child{margin-bottom:0}
.learn .tip{
  background:var(--amber-soft);border-radius:14px;padding:13px 15px;font-size:14px;
  line-height:1.55;color:var(--amber-ink);font-weight:700;margin-top:14px;
}

/* concluir o dia */
.donebar{margin:18px 0 8px}
.donebar .hint{text-align:center;font-size:13px;color:var(--ink-soft);font-weight:700;margin-bottom:10px}
.daydone{
  background:var(--green-soft);border-radius:20px;padding:22px;text-align:center;margin:18px 0 8px;
}
.daydone b{font-family:var(--font-display);font-size:20px;color:var(--green-dark);display:block;margin-bottom:6px}
.daydone p{font-size:14px;color:#3E7A55;font-weight:700;line-height:1.5}

/* progresso geral */
.gprog{margin:20px 0 6px}
.gprog .bar{height:8px;border-radius:99px;background:var(--beige);overflow:hidden}
.gprog .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),#3BD97B);border-radius:99px;transition:width .5s cubic-bezier(.22,1,.36,1)}
.gprog .lbl{text-align:center;font-size:13px;color:var(--ink-soft);font-weight:700;margin-top:8px}

/* ---------- Tela PLANO ---------- */
.center-h1{font-family:var(--font-display);font-size:23px;text-align:center;margin:26px 0 6px;letter-spacing:-.01em}
.center-sub{text-align:center;color:var(--ink-soft);font-size:14px;font-weight:600;line-height:1.5;margin-bottom:18px}

.sumcard{
  display:flex;align-items:center;gap:16px;background:var(--card);border-radius:20px;
  padding:18px;box-shadow:var(--shadow);margin-bottom:20px;
}
.sumcard .ring{flex:none;position:relative;width:74px;height:74px}
.sumcard .ring svg{display:block}
.sumcard .ring b{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-display);font-size:17px;color:var(--ink);
}
.sumcard .st b{font-family:var(--font-display);font-size:17px;display:block;line-height:1.3}
.sumcard .st span{font-size:13.5px;color:var(--ink-soft);font-weight:700;display:block;margin-top:3px;line-height:1.4}

.grid21{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.grid21 .day{
  aspect-ratio:1;border-radius:14px;display:grid;place-items:center;position:relative;
  font-weight:900;font-size:17px;border:0;font-family:var(--font-body);
}
.grid21 .day.done{background:var(--green);color:#fff;box-shadow:0 4px 12px -4px rgba(29,190,92,.5)}
.grid21 .day.now{
  background:var(--card);color:var(--green-dark);box-shadow:inset 0 0 0 3px var(--green),0 0 0 5px rgba(29,190,92,.12);
}
.grid21 .day.lock{background:var(--beige);color:#B5A992;font-size:14px;cursor:default}
.grid21 .day.lock small{position:absolute;bottom:5px;right:7px;font-size:9.5px;font-weight:800;color:#B5A992}
.legend{text-align:center;font-size:12.5px;color:var(--ink-soft);font-weight:700;margin-bottom:18px}

.nextcard{
  display:flex;align-items:center;gap:12px;background:var(--green-soft);border-radius:18px;
  padding:17px;border:0;width:100%;text-align:left;font-family:inherit;
}
.nextcard .nt{flex:1}
.nextcard .nt small{display:block;font-size:11px;font-weight:900;letter-spacing:.06em;color:var(--green-dark);text-transform:uppercase;margin-bottom:3px}
.nextcard .nt span{font-size:14.5px;font-weight:800;color:var(--ink);line-height:1.4}
.nextcard .arr{flex:none;font-size:22px;color:var(--green-dark);font-weight:900}

/* ---------- Tela RECEITAS ---------- */
.acc{background:var(--card);border-radius:18px;box-shadow:var(--shadow);margin-bottom:12px;overflow:hidden}
.acc>button{
  width:100%;display:flex;align-items:center;gap:12px;background:none;border:0;
  padding:17px 18px;font-family:inherit;text-align:left;
}
.acc>button .ic{flex:none;font-size:20px}
.acc>button .at{flex:1;font-size:15px;font-weight:800;color:var(--ink);line-height:1.35}
.acc>button .car{flex:none;color:var(--ink-soft);transition:transform .2s;font-size:13px}
.acc.open>button .car{transform:rotate(180deg)}
.acc .body{display:none;padding:0 18px 16px}
.acc.open .body{display:block}
.acc .body ul{list-style:none}
.acc .body li{
  font-size:14.5px;line-height:1.5;color:var(--ink-soft);font-weight:600;
  padding:9px 0;border-bottom:1px solid #F2ECE1;
}
.acc .body li:last-child{border-bottom:0}
.acc .meta{font-size:12.5px;font-weight:800;color:var(--green-dark);margin-bottom:8px}
.acc .body h4{font-size:13px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin:12px 0 4px}
.acc .body p{font-size:14.5px;line-height:1.6;color:var(--ink-soft);font-weight:600}

/* ---------- Tela EU ---------- */
.profcard{background:var(--card);border-radius:20px;box-shadow:var(--shadow);padding:20px;margin-bottom:14px}
.profcard .row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid #F2ECE1}
.profcard .row:last-child{border-bottom:0}
.profcard .row span{font-size:14px;color:var(--ink-soft);font-weight:700}
.profcard .row b{font-size:15px;font-weight:800}
.profcard .row button{background:none;border:0;color:var(--green-dark);font-weight:800;font-size:14px;text-decoration:underline}

.guidecard{background:var(--card);border-radius:20px;box-shadow:var(--shadow);padding:20px;margin-bottom:14px}
.guidecard.locked{opacity:.75}
.guidecard .gt{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.guidecard .gt b{font-family:var(--font-display);font-size:17px;line-height:1.3}
.guidecard>p{font-size:14px;color:var(--ink-soft);font-weight:600;line-height:1.55}
.guidecard .rule{margin-top:14px}
.guidecard .rule b{display:block;font-size:15px;margin-bottom:4px}
.guidecard .rule p{font-size:14.5px;line-height:1.6;color:var(--ink-soft);font-weight:600}

/* ---------- Bottom nav (igual ao mockup) ---------- */
#bottomnav{
  position:fixed;bottom:0;left:0;right:0;z-index:50;
  background:var(--card);border-top:1px solid #F0E9DD;
  box-shadow:0 -8px 24px -16px rgba(43,36,32,.25);
}
#bottomnav .inner{
  max-width:480px;margin:0 auto;display:flex;
  padding:8px 10px calc(10px + env(safe-area-inset-bottom));
}
#bottomnav button{
  flex:1;background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 0;color:#B5A992;font-family:inherit;font-size:11px;font-weight:800;
}
#bottomnav button svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#bottomnav button.on{color:var(--green)}

/* ---------- Modal (revisão de dia concluído) ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(43,36,32,.45);z-index:100;display:grid;place-items:end center;animation:fadein .2s}
.modal{
  background:var(--bg);border-radius:24px 24px 0 0;width:100%;max-width:480px;
  max-height:86svh;overflow-y:auto;padding:22px 20px calc(24px + env(safe-area-inset-bottom));
  animation:slideup .25s cubic-bezier(.22,1,.36,1);
}
.modal .grab{width:44px;height:5px;border-radius:99px;background:var(--beige);margin:0 auto 16px}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes slideup{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ---------- Confete ---------- */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:200;overflow:hidden}
.confetti i{
  position:absolute;top:-14px;width:9px;height:14px;border-radius:2px;
  animation:cfall 1.6s ease-in forwards;
}
@keyframes cfall{
  0%{transform:translateY(0) rotate(0)}
  100%{transform:translateY(105vh) rotate(540deg);opacity:.4}
}

/* ---------- Loading ---------- */
.loading{min-height:70svh;display:grid;place-items:center}
.spinner{width:38px;height:38px;border-radius:50%;border:4px solid var(--beige);border-top-color:var(--green);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.fade{animation:stepin .3s ease}
@keyframes stepin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}