/* Coro beta - paleta petróleo/sálvia; botões grandes para uso no campo */
:root{
  --bg:#EEF3F4; --surface:#FFFFFF; --surface2:#F3F7F8; --ink:#16232A; --muted:#5C6B71; --line:#D2DDE0;
  --sign:#2A4B55; --sign-ink:#FFFFFF; --accent:#376270; --accent-ink:#FFFFFF; --accent-soft:#E0EBEE; --brand-y:#AFCB92; --ring:#E3EDEF;
  --n1:#2A8754; --n1bg:#DCF0E3; --n2:#9A6A00; --n2bg:#FAE9BF; --n3:#BE3328; --n3bg:#F7D8D4;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0D1518; --surface:#152126; --surface2:#1A282E; --ink:#E3ECEE; --muted:#93A6AC; --line:#28383E;
  --sign:#1B343C; --sign-ink:#F1F7F8; --accent:#7FB3C2; --accent-ink:#0A1518; --accent-soft:#1D323A; --brand-y:#A3C487; --ring:#DCE8EA;
  --n1:#62C890; --n1bg:#173A28; --n2:#E8B640; --n2bg:#3B3013; --n3:#F2776C; --n3bg:#45211E;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0D1518; --surface:#152126; --surface2:#1A282E; --ink:#E3ECEE; --muted:#93A6AC; --line:#28383E;
  --sign:#1B343C; --sign-ink:#F1F7F8; --accent:#7FB3C2; --accent-ink:#0A1518; --accent-soft:#1D323A; --brand-y:#A3C487; --ring:#DCE8EA;
  --n1:#62C890; --n1bg:#173A28; --n2:#E8B640; --n2bg:#3B3013; --n3:#F2776C; --n3bg:#45211E;
  color-scheme:dark}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font-family:var(--font);font-size:17px;line-height:1.4;-webkit-tap-highlight-color:transparent;min-height:100vh}
body.com-abas{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
h1,h2,h3{margin:0;line-height:1.2}
.muted{color:var(--muted)}
.ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:middle}
.logo{width:34px;height:34px;flex:none}

/* Topo */
.top{position:sticky;top:0;z-index:20;background:var(--sign);color:var(--sign-ink);border-bottom:2px solid var(--brand-y);
  padding:calc(8px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px))}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:760px;margin:0 auto}
.marca{display:flex;align-items:center;gap:10px;background:none;border:0;padding:4px 0;text-align:left;min-width:0}
.marca b{font-size:21px;font-weight:600;display:block}
.marca small{display:block;font-size:13px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:56vw}
.sync{font-size:12px;letter-spacing:.05em;text-transform:uppercase;border:1px solid currentColor;border-radius:6px;padding:6px 8px;background:none;white-space:nowrap;min-height:36px}
.sync.off{background:var(--n2bg);color:var(--n2);border-color:var(--n2bg)}
.sync.err{background:var(--n3bg);color:var(--n3);border-color:var(--n3bg)}
.faixa button{width:100%;border:0;background:var(--brand-y);color:#1d2b20;font-weight:600;padding:12px 16px}

/* Conteúdo */
main#app{max-width:760px;margin:0 auto;padding:14px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px}
.card h2{font-size:19px;display:flex;align-items:center;gap:8px}
.card h3{font-size:18px;display:flex;align-items:center;gap:8px}
.card.vazio{color:var(--muted);text-align:center;padding:28px 16px}
.cab-dia{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:2px 2px 0}
.cab-dia h1{font-size:28px}
.cab-dia span{color:var(--muted)}
.eq-nome{margin:0;font-weight:600;display:flex;align-items:center;gap:8px}
.bola{width:12px;height:12px;border-radius:50%;display:inline-block;flex:none}
.lbl{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.itens{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.itens li{background:var(--surface2);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.itens li span{color:var(--muted);font-size:15px}
.pergunta{font-weight:600;margin:4px 0 0}
.resumo{margin:0;color:var(--muted);font-size:15px}
.nota-versao{font-size:13px;color:var(--muted);text-align:center;margin:4px 0}
.status{margin:0;padding:8px 12px;border-radius:10px;background:var(--surface2)}
.st-ok{background:var(--n1bg);color:var(--n1)}
.st-parcial{background:var(--n2bg);color:var(--n2)}
.st-nao,.st-sem{background:var(--n3bg);color:var(--n3)}
.st-vazio{color:var(--muted)}
.faltas{margin:0;font-size:15px;color:var(--n3)}
.aprovada{margin:0;color:var(--n1);font-weight:600;display:flex;align-items:center;gap:6px}
.trava{display:flex;gap:10px;align-items:center;background:var(--n1bg);color:var(--n1);padding:10px 12px;border-radius:10px}
.trava span{display:block;font-size:15px}

/* Botões */
.btn{border:1px solid var(--line);background:var(--surface2);border-radius:12px;padding:10px 14px;min-height:46px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.perigo{color:var(--n3);border-color:var(--n3)}
.btn.grande{min-height:56px;font-size:18px;width:100%}
.btn.redondo{width:48px;padding:0;border-radius:50%}
.btn[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn:disabled,.btn-dia:disabled{opacity:.45;cursor:default}
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.btn-dia{border:2px solid transparent;border-radius:14px;min-height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-weight:700;font-size:16px}
.btn-dia .ico{width:32px;height:32px;stroke-width:2.4}
.btn-dia.ok{background:var(--n1bg);color:var(--n1);border-color:var(--n1)}
.btn-dia.parcial{background:var(--n2bg);color:var(--n2);border-color:var(--n2)}
.btn-dia.nao{background:var(--n3bg);color:var(--n3);border-color:var(--n3)}

/* Presença */
.lista-pessoas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pessoa{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-top:1px solid var(--line)}
.pessoa:first-child{border-top:0}
.pessoa span{display:block;color:var(--muted);font-size:14px}
.pres{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pres button{min-height:48px;border-radius:10px;border:1px solid var(--line);background:var(--surface2);font-weight:600}
.pres .p-P[aria-pressed="true"]{background:var(--n1bg);color:var(--n1);border-color:var(--n1)}
.pres .p-F[aria-pressed="true"]{background:var(--n3bg);color:var(--n3);border-color:var(--n3)}
.pres .p-A[aria-pressed="true"]{background:var(--n2bg);color:var(--n2);border-color:var(--n2)}

/* Dia (supervisor) */
.nav-dia{display:flex;align-items:center;justify-content:space-between;gap:10px}
.nav-dia div{text-align:center;text-transform:capitalize}
.nav-dia div span{display:block;font-size:13px;color:var(--muted);text-transform:none}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.seg button{border:0;background:none;min-height:44px;font-weight:600}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.card.equipe .btn{align-self:flex-start}

/* Abas */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:8;background:var(--surface);border-top:1px solid var(--line);display:grid;padding-bottom:env(safe-area-inset-bottom,0px)}
.tabs button{border:0;background:none;min-height:70px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:14px;font-weight:600;color:var(--muted)}
.tabs button .ico{width:28px;height:28px}
.tabs button[aria-current="page"]{color:var(--accent)}

/* Janela de baixo */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:26}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:27;background:var(--surface);border-radius:18px 18px 0 0;max-height:88vh;overflow:auto;
  padding:12px max(16px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:12px;max-width:760px;margin:0 auto}
.sheet>*{flex-shrink:0}
.sheet-top{display:flex;justify-content:space-between;align-items:center}
.sheet h2{font-size:21px}
.note{border-radius:10px;padding:10px 12px;background:var(--accent-soft)}
.note.off{background:var(--n2bg);color:var(--n2)}
.note.err{background:var(--n3bg);color:var(--n3)}
.note.ok{background:var(--n1bg);color:var(--n1)}
.fila{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:15px}
.fila .erro{display:block;color:var(--n3);font-size:14px}
.marcar{display:flex;flex-direction:column;gap:8px}
.marca-item{display:flex;align-items:center;gap:12px;text-align:left;border:2px solid var(--line);background:var(--surface2);border-radius:12px;padding:12px;min-height:60px}
.marca-item span{display:flex;flex-direction:column;color:var(--muted);font-size:15px}
.marca-item b{color:var(--ink);font-size:17px}
.marca-item .ico{width:28px;height:28px;opacity:.25}
.marca-item[aria-pressed="true"]{border-color:var(--n1);background:var(--n1bg)}
.marca-item[aria-pressed="true"] .ico{opacity:1;color:var(--n1)}
.motivos{display:flex;flex-wrap:wrap;gap:8px}
.motivos.grandes{flex-direction:column}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:30;background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:12px;max-width:min(92vw,520px);font-size:15px;text-align:center}

/* Login */
.login{min-height:100vh;display:flex;flex-direction:column;justify-content:center;gap:18px;max-width:420px;margin:0 auto;padding:24px 16px}
.login-marca{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.login-marca .logo{width:84px;height:84px;background:var(--sign);border-radius:22px;padding:6px}
.login-marca h1{font-size:34px}
.login-marca p{margin:0;color:var(--muted)}
.login input{border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-height:52px;background:var(--surface2);font-size:18px;width:100%}
.login .msg{min-height:22px;color:var(--n3);font-size:15px}
.rodape{text-align:center;color:var(--muted);font-size:13px;margin:0}

/* Usuários e formulários */
.row{display:flex;flex-wrap:wrap;gap:8px}
.btn.sm{min-height:40px;padding:6px 12px;font-size:15px;text-decoration:none;color:inherit}
.lista-usuarios{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.usuario{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-top:1px solid var(--line)}
.usuario:first-child{border-top:0}
.usuario span{display:block;color:var(--muted);font-size:14px}
.usuario.bloqueado{opacity:.6}
.sheet select,.sheet .campo{border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-height:50px;background:var(--surface2);font-size:17px;width:100%}
.sheet .msg{min-height:20px;color:var(--n3);font-size:15px}
a.btn{text-decoration:none;color:inherit}
a.btn.pri{color:var(--accent-ink)}