/*
  Campodata Clube: CSS compartilhado por todos os apps (index, formulador e os próximos).
  Aqui ficam só o que é comum: tokens de cor, base, barra do topo, botões e cartões.
  O que é específico de um app fica em css/<app>.css.

  Uso em qualquer página (o caminho muda conforme a pasta):
    <link rel="stylesheet" href="/css/core.css">
    <link rel="stylesheet" href="/css/<app>.css">
*/

:root{
  --brand:#065230; --brand-h:#0a6a3f; --on-brand:#fff;
  --accent:#2e8b4f; --tint:#edf3ee; --tint-tx:#065230;
  --bg:#f5f6f4; --card:#fff; --tx:#16211a; --mut:#5d6c62; --bd:#e0e6e1; --bd-strong:#c9d3cb;
  --warn:#8a4b10; --warnbg:#fdf4e7; --warnbd:#e2a64a;
  --err:#9b2c1d; --errbg:#fdeeec;
  --r:12px; --shadow:0 1px 2px rgba(16,33,24,.05); --top-h:52px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --brand:#2e8b4f; --brand-h:#37a05b; --accent:#6fcf97; --tint:#1a2a21; --tint-tx:#8fdcab;
    --bg:#0d1511; --card:#151f19; --tx:#e8efe9; --mut:#94a69a; --bd:#25342b; --bd-strong:#34493c;
    --warn:#f0b36a; --warnbg:#2c2112; --warnbd:#8a6a2c;
    --err:#f2a094; --errbg:#331a16; --shadow:none;
  }
}

/* base */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{line-height:1.2;margin:0 0 .4rem;font-weight:650;letter-spacing:-.01em}
h1{font-size:1.5rem}
h2{font-size:1.2rem}
h3{font-size:1rem}
p{margin:.35rem 0}
a{color:var(--brand)}
@media (prefers-color-scheme: dark){ a{color:var(--accent)} }
button{font:inherit;cursor:pointer}
.i{flex:none;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input,select,button{-webkit-tap-highlight-color:transparent}
input[type=number]{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto !important;transition:none !important}}

/* barra do topo (altura fixa: apps usam var(--top-h) para barras fixas logo abaixo) */
.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:.65rem;height:calc(var(--top-h) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 1rem 0;background:var(--card);border-bottom:1px solid var(--bd)}
.top img{width:30px;height:30px}
.top .brand{flex:1;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.92rem;line-height:1.1;color:var(--brand)}
@media (prefers-color-scheme: dark){ .top .brand{color:var(--tx)} }
.top .brand small{display:block;font-weight:500;letter-spacing:.06em;color:var(--mut);font-size:.66rem;margin-top:.15rem}
.badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.74rem;font-weight:600;color:var(--mut);padding:.25rem .6rem;border:1px solid var(--bd);border-radius:99px}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.badge.off{color:var(--warn);background:var(--warnbg);border-color:var(--warnbd)}
.badge.off::before{background:var(--warnbd)}

/* cabeçalho de ferramenta */
.back{display:inline-flex;align-items:center;gap:.4rem;margin-bottom:.9rem;text-decoration:none;font-weight:600;font-size:.88rem;color:var(--mut)}
.back:hover{color:var(--brand)}
.tool-head{display:flex;align-items:center;gap:.8rem;margin-bottom:.2rem}
.tool-head .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;background:var(--tint);color:var(--tint-tx);flex:none}
.tool-head h1{margin:0}
.hint{color:var(--mut);font-size:.84rem}

/* cartão */
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:1rem;margin:.75rem 0;box-shadow:var(--shadow)}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:9px;min-height:46px;padding:.65rem 1.1rem;background:var(--brand);color:var(--on-brand);font-weight:650;text-decoration:none;text-align:center;transition:background .12s}
.btn:hover:not(:disabled){background:var(--brand-h)}
.btn.full{width:100%}
.btn.sec{background:var(--tint);color:var(--tint-tx);border-color:transparent}
.btn.sec:hover:not(:disabled){background:var(--bd)}
.btn.ghost{background:transparent;border-color:var(--bd-strong);color:var(--tx)}
.btn.ghost:hover:not(:disabled){background:var(--tint)}
.btn.sm{min-height:36px;padding:.35rem .8rem;font-size:.84rem}
.btn:disabled{opacity:.55;cursor:not-allowed}
.x{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--mut)}
.x:hover{background:var(--errbg);color:var(--err)}