/* App do cliente Lilidi. Cores da marca: turquesa, rosa e amarelo. Pensado primeiro para celular. */
:root{--turq:#19C2D1;--turq-d:#0E97A5;--pink:#E8457E;--pink-d:#C9306A;--yellow:#FFD23F;--page:#F1FAFB;--card:#fff;--ink:#22324A;--soft:#5A6B80;--line:#D4EDF0;--muted:#EAF4F6;--ok:#1E8A55;--ok-bg:#DDF6EA;--warn:#7A5600;--warn-bg:#FFF4CC;--bad:#B4283C;--bad-bg:#FBE4E7;--sel:#E3F7F9;
 --display:"Fredoka","Nunito",system-ui,sans-serif;--body:"Nunito",-apple-system,"Segoe UI",Roboto,sans-serif}
@media (prefers-color-scheme:dark){:root{--page:#0F2530;--card:#16313D;--ink:#EAF6F8;--soft:#A7C2CB;--line:#24485A;--muted:#1C3A47;--sel:#1A4452;--ok-bg:#173627;--ok:#7DDBA3;--warn-bg:#3A3317;--warn:#F2D98A;--bad-bg:#3A1F26;--bad:#FF8A98;--turq-d:#3CC9D6;--pink-d:#F07AA4}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{margin:0;background:var(--page);color:var(--ink);font:400 15px/1.5 var(--body);padding:env(safe-area-inset-top) 0 0}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--pink-d)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
#app{max-width:480px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;background:var(--page)}
.top{background:var(--turq);color:#fff;padding:16px 18px 18px;background-image:radial-gradient(circle at 90% 20%,rgba(255,255,255,.22) 0 40px,transparent 41px),radial-gradient(circle at 8% 90%,rgba(255,255,255,.16) 0 50px,transparent 51px)}
.top h1{margin:0;font:700 22px/1.15 var(--display)}
.top p{margin:2px 0 0;font-size:13px;opacity:.95}
.stripe{height:5px;background:linear-gradient(90deg,var(--pink) 0 50%,var(--yellow) 50%)}
.body{flex:1;padding:16px 16px 96px;display:flex;flex-direction:column;gap:14px}
.nav{position:fixed;left:0;right:0;bottom:0;max-width:480px;margin:0 auto;display:flex;background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.nav button{flex:1;border:0;background:none;padding:9px 4px 10px;font-size:11px;font-weight:700;color:var(--soft);display:flex;flex-direction:column;align-items:center;gap:1px}
.nav button span{font-size:20px;line-height:1.2}
.nav button[aria-current="page"]{color:var(--pink-d)}
.card{background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:14px;min-width:0}
.card h2{margin:0 0 8px;font:600 17px var(--display)}
.pets{display:flex;gap:8px;flex-wrap:wrap}
.pet{flex:1 1 30%;border:2px solid var(--line);background:var(--card);border-radius:14px;padding:8px 10px;text-align:left;display:flex;gap:8px;align-items:center;min-width:0}
.pet[aria-pressed="true"]{border-color:var(--turq-d);background:var(--sel)}
.pet b{display:block;font-family:var(--display);font-weight:600}.pet small{color:var(--soft)}
.pet .ft{font-size:24px}
.bolhas{display:flex;gap:8px;margin:8px 0 4px;flex-wrap:wrap}
.bolhas i{width:26px;height:26px;border-radius:50%;border:3px solid var(--turq-d)}.bolhas i.on{background:var(--turq-d)}
.big{font:700 20px/1.2 var(--display);margin:0}
.muted{color:var(--soft);font-size:13px}
.tag{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap}
.t-ok{background:var(--ok-bg);color:var(--ok)}.t-warn{background:var(--warn-bg);color:var(--warn)}.t-bad{background:var(--bad-bg);color:var(--bad)}.t-info{background:var(--muted);color:var(--soft)}
.btn{border:0;background:var(--pink-d);color:#fff;font-weight:800;border-radius:999px;padding:12px 18px;width:100%;text-decoration:none;display:inline-block;text-align:center}
.btn.sec{background:var(--muted);color:var(--ink)}
.btn.mini{width:auto;padding:8px 14px;font-size:13px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.perigo{background:var(--bad)}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.item{padding:12px 0;border-top:1px solid var(--line)}.item:first-child{border-top:0;padding-top:0}
input.f{width:100%;border:2px solid var(--line);border-radius:12px;padding:12px;font:inherit;background:var(--card);color:var(--ink)}
label{font-weight:800;font-size:13px;display:block;margin:10px 0 4px}
.note{background:var(--warn-bg);color:var(--warn);border-radius:12px;padding:9px 12px;font-size:13px}
.erro{background:var(--bad-bg);color:var(--bad);border-radius:12px;padding:9px 12px;font-size:14px;font-weight:700}
.ok{background:var(--ok-bg);color:var(--ok);border-radius:12px;padding:9px 12px;font-size:14px;font-weight:700}
.login{flex:1;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:26px 24px}
.logo{width:76px;height:76px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 5px var(--yellow);font:700 22px var(--display);color:var(--pink);margin:0 auto 6px;flex:none}
.login h1{font:700 24px var(--display);margin:0;text-align:center}.login p{text-align:center;margin:0;color:var(--soft)}
.link{border:0;background:none;color:var(--pink-d);font-weight:800;text-decoration:underline;padding:0}
.termos{border:2px solid var(--line);border-radius:14px;background:var(--card);padding:12px 14px;height:260px;overflow-y:auto;text-align:left;font-size:13px}
.termos h2{font:600 14px var(--display);margin:10px 0 2px}.termos p{text-align:left;color:var(--ink);margin:0 0 6px}
.aceite{display:flex;gap:10px;align-items:flex-start;font-weight:700;font-size:14px;margin:6px 0}
.aceite input{width:22px;height:22px;flex:none;accent-color:var(--pink-d)}
.cal,.calh{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.calh{margin-bottom:4px;text-align:center;font-weight:800;font-size:12px;color:var(--soft)}
.dia{aspect-ratio:1;border:2px solid transparent;background:var(--muted);border-radius:12px;font:700 14px var(--body);color:var(--ink);padding:0}
.dia.real{background:var(--ok-bg);color:var(--ok);border-color:var(--ok)}
.dia.agen{background:var(--turq-d);color:#fff}
.dia.hoje{box-shadow:0 0 0 2px var(--yellow)}
.dia.sel{outline:3px solid var(--pink-d);outline-offset:1px}
.leg{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--soft)}
.lg{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:4px;vertical-align:-1px;background:var(--turq-d)}.lg.real{background:var(--ok-bg);border:2px solid var(--ok)}
.box{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:14px}
.box .bi{font-size:24px;flex:none}.box .bt{flex:1;min-width:0;display:flex;flex-direction:column}.box .bt b{font:600 17px var(--display)}.box .bt span{color:var(--soft);font-size:13px}.box .bc{color:var(--soft);font-size:22px;flex:none}
.box.emerg{border-color:var(--bad)}.box.emerg .bt b{color:var(--bad)}
.kvs{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin-top:8px}
.kv{display:flex;flex-direction:column;font-size:13px;color:var(--soft)}.kv b{color:var(--ink);font-size:15px}
details summary{cursor:pointer;font-weight:700;color:var(--pink-d);font-size:13px}
.instalar{background:var(--sel);border:2px dashed var(--turq-d);border-radius:18px;padding:14px}
.toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);background:var(--ink);color:var(--card);padding:10px 16px;border-radius:12px;font-weight:700;font-size:14px;max-width:88%;text-align:center;z-index:9}
.carregando{flex:1;display:flex;align-items:center;justify-content:center;color:var(--soft);font-weight:700}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.chip{border:2px solid var(--line);background:var(--card);border-radius:12px;padding:6px 12px;font-weight:700;font-size:14px}
.chip[aria-pressed="true"]{border-color:var(--turq-d);background:var(--sel)}
.sheet{position:fixed;inset:0;background:rgba(10,25,35,.55);display:flex;align-items:flex-end;justify-content:center;z-index:20}
.sheet>div{background:var(--card);width:100%;max-width:480px;border-radius:22px 22px 0 0;padding:18px 16px calc(22px + env(safe-area-inset-bottom));max-height:90%;overflow:auto}
.sheet h3{margin:0 0 4px;font:600 19px var(--display)}
.total{display:flex;justify-content:space-between;align-items:baseline;font:700 20px var(--display);border-top:2px solid var(--ink);padding-top:10px;margin-top:6px}