/* =====================================================================
   base.css — cores, tipografia e componentes comuns (catálogo + painel)
   ===================================================================== */
:root{
  color-scheme:light dark;
  --ground:#F1F4F3; --surface:#FFFFFF; --surface-2:#E7ECEA; --surface-3:#DCE3E0;
  --ink:#0F1C1A; --muted:#5A6B68; --faint:#8A9996; --line:#D6DEDB;
  --accent:#0C5C52; --accent-ink:#FFFFFF; --accent-soft:#D9EAE6;
  --copper:#B0602A; --copper-soft:#F5E4D6;
  --wa:#128C4A; --wa-ink:#FFFFFF;
  --ok:#1D7A46; --ok-soft:#DCF0E3;
  --warn:#9A6200; --warn-soft:#FBEBC8;
  --danger:#B3261E; --danger-soft:#F9DEDC;
  --shadow:0 1px 2px rgba(15,28,26,.06), 0 8px 24px -16px rgba(15,28,26,.30);
  --shadow-lg:0 24px 70px -24px rgba(0,0,0,.45);
  --r:14px;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0C1413; --surface:#14201E; --surface-2:#1B2A27; --surface-3:#22332F;
    --ink:#E9EFED; --muted:#97A8A4; --faint:#6F807C; --line:#253733;
    --accent:#57C3B0; --accent-ink:#06201C; --accent-soft:#16332E;
    --copper:#E09257; --copper-soft:#3A2414;
    --wa:#2BA85F; --wa-ink:#06140C;
    --ok:#5FCB8B; --ok-soft:#15301F;
    --warn:#E8B04A; --warn-soft:#3A2C0E;
    --danger:#F2867E; --danger-soft:#3D1715;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --ground:#0C1413; --surface:#14201E; --surface-2:#1B2A27; --surface-3:#22332F;
  --ink:#E9EFED; --muted:#97A8A4; --faint:#6F807C; --line:#253733;
  --accent:#57C3B0; --accent-ink:#06201C; --accent-soft:#16332E;
  --copper:#E09257; --copper-soft:#3A2414;
  --wa:#2BA85F; --wa-ink:#06140C;
  --ok:#5FCB8B; --ok-soft:#15301F;
  --warn:#E8B04A; --warn-soft:#3A2C0E;
  --danger:#F2867E; --danger-soft:#3D1715;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html,body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
body{
  background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
h1,h2,h3,h4{font-family:var(--display); margin:0; text-wrap:balance; letter-spacing:-.02em}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}
.wrap{max-width:1120px; margin:0 auto; padding-inline:18px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--mono)}
:focus-visible{outline:2px solid var(--copper); outline-offset:2px}

/* botões */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; border-radius:999px; padding:9px 16px;
  font-size:14px; font-weight:600; cursor:pointer; text-decoration:none; white-space:nowrap;
  background:var(--surface); color:var(--ink); border-color:var(--line);
  transition:filter .12s ease, background .12s ease;
}
.btn:hover{filter:brightness(.97)}
.btn:disabled{opacity:.55; cursor:not-allowed}
.btn svg{width:17px;height:17px;fill:currentColor;flex:none}
.btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-wa{background:var(--wa); color:var(--wa-ink); border-color:var(--wa)}
.btn-wa:hover{filter:brightness(1.07)}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--muted)}
.btn-danger{background:transparent; color:var(--danger); border-color:color-mix(in srgb, var(--danger) 40%, var(--line))}
.btn-danger.armado{background:var(--danger); color:#fff; border-color:var(--danger)}
.btn-sm{padding:6px 11px; font-size:12.5px; border-radius:8px}
.btn-icon{padding:7px; border-radius:9px; width:34px; height:34px}

/* formulários */
.campo{display:flex; flex-direction:column; gap:5px; min-width:0}
.campo > span{font-size:12.5px; font-weight:600; color:var(--muted); letter-spacing:.01em}
.campo small{font-size:12px; color:var(--faint)}
.inp, .campo input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]), .campo select, .campo textarea{
  width:100%; min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; font-size:15px; line-height:1.3; outline:none;
}
.campo textarea{resize:vertical; min-height:84px; line-height:1.45}
.campo input:focus, .campo select:focus, .campo textarea:focus, .inp:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.campo .erro{color:var(--danger); font-size:12.5px}
.campo.invalido input, .campo.invalido select{border-color:var(--danger)}

/* chips */
.chips{display:flex; gap:7px; flex-wrap:wrap}
.chip{
  border:1px solid var(--line); background:var(--surface); color:var(--muted);
  border-radius:999px; padding:6px 13px; font-size:13.5px; cursor:pointer; font-weight:500;
}
.chip[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}

/* pílulas de estado */
.pill{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:999px; white-space:nowrap}
.pill-ok{background:var(--ok-soft); color:var(--ok)}
.pill-warn{background:var(--warn-soft); color:var(--warn)}
.pill-muted{background:var(--surface-2); color:var(--muted)}
.pill-danger{background:var(--danger-soft); color:var(--danger)}
.pill-copper{background:var(--copper-soft); color:var(--copper)}

/* aviso (modo demo, erros) */
.faixa{font-size:13px; padding:9px 18px; text-align:center; background:var(--warn-soft); color:var(--warn); border-bottom:1px solid var(--line)}
.faixa a, .faixa button{color:inherit; font-weight:600; background:none; border:0; text-decoration:underline; cursor:pointer; padding:0}

/* toast */
.toast{
  position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%);
  background:var(--ink); color:var(--ground); padding:11px 18px; border-radius:12px; font-size:14px; font-weight:500;
  box-shadow:var(--shadow-lg); z-index:200; max-width:calc(100% - 32px); text-align:center;
  animation:toastIn .18s ease-out;
}
.toast.erro{background:var(--danger); color:#fff}
@keyframes toastIn{from{opacity:0; transform:translate(-50%,8px)} to{opacity:1; transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.toast{animation:none}}

/* esqueleto de carregamento */
.skel{background:linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size:200% 100%; animation:skel 1.2s linear infinite; border-radius:8px}
@keyframes skel{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}