/* ==========================================================================
   Finder SWM — sistema de design próprio
   Herda da Caverna SWM apenas a PALETA (ouro sobre caverna). Todo o resto é
   novo: escala tipográfica sans + mono, raio grande, superfícies empilhadas,
   luz de ouro como destaque em vez de traço decorativo.
   ========================================================================== */

:root{
  /* superfícies — caverna, do fundo para a frente */
  --void:#0B0A07;
  --base:#100E0A;
  --sup:#17150F;
  --alto:#1E1B14;
  --topo:#262218;
  --linha:#2B271D;
  --linha2:#3B3628;

  /* texto */
  --tx:#F4F1EA;
  --tx2:#A8A294;
  --tx3:#736E60;

  /* ouro — a luz do sistema */
  --ouro:#E1AD66;
  --ouro2:#B68235;
  --ouro-fraco:rgba(225,173,102,.12);
  --ouro-linha:rgba(225,173,102,.28);

  /* semântica */
  --ok:#6FBF95;
  --alerta:#D9A441;
  --erro:#E5806C;
  --ok-fraco:rgba(111,191,149,.13);
  --erro-fraco:rgba(229,128,108,.13);

  --r:10px; --r-sm:7px; --r-lg:16px; --r-full:999px;
  --sans:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Inter,Roboto,system-ui,sans-serif;
  --mono:'SF Mono',SFMono-Regular,ui-monospace,Menlo,'Cascadia Mono',Consolas,monospace;

  --sombra:0 1px 2px rgba(0,0,0,.4);
  --sombra-alta:0 24px 60px -12px rgba(0,0,0,.7);
  --brilho:0 0 0 1px var(--ouro-linha), 0 12px 40px -8px rgba(225,173,102,.18);
  --mola:cubic-bezier(.2,.75,.3,1);
  --toque:44px;
}

/* Tema claro — mesma paleta, invertida. Usado no painel por quem prefere. */
[data-theme="dia"]{
  --void:#F5F4F1; --base:#FAF9F7; --sup:#FFFFFF; --alto:#F2F0EC; --topo:#E8E5DF;
  --linha:#E2DFD8; --linha2:#CFCBC1;
  --tx:#1A1814; --tx2:#5E5A51; --tx3:#8E897D;
  --ouro:#96681E; --ouro2:#B68235;
  --ouro-fraco:rgba(182,130,53,.10); --ouro-linha:rgba(182,130,53,.30);
  --ok:#2F7A56; --alerta:#8A6228; --erro:#A8342A;
  --ok-fraco:rgba(47,122,86,.10); --erro-fraco:rgba(168,52,42,.10);
  --sombra:0 1px 2px rgba(26,24,20,.06);
  --sombra-alta:0 24px 60px -12px rgba(26,24,20,.16);
  --brilho:0 0 0 1px var(--ouro-linha), 0 12px 40px -8px rgba(182,130,53,.14);
}
/* No claro o rótulo escuro sobre ouro fica em ~3,3:1 — abaixo do mínimo de
   leitura. Texto branco sobre o mesmo ouro sobe para ~5,4:1. */
[data-theme="dia"] .b-1{color:#FFF;text-shadow:0 1px 1px rgba(0,0,0,.16)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  background:var(--void);color:var(--tx);font-family:var(--sans);
  font-size:15px;line-height:1.6;letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale
}
svg{display:block;flex:none}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- tipografia ---------- */
h1,h2,h3,h4{margin:0;font-weight:640;letter-spacing:-.028em;line-height:1.12}
h1{font-size:clamp(34px,5.4vw,58px)}
h2{font-size:clamp(26px,3.6vw,40px)}
h3{font-size:20px;letter-spacing:-.02em}
h4{font-size:16px;letter-spacing:-.014em}
p{margin:0}
.lead{font-size:clamp(16px,1.9vw,19px);color:var(--tx2);line-height:1.65;letter-spacing:-.01em}
.dim{color:var(--tx2)}
.fraco{color:var(--tx3)}
.peq{font-size:13.5px;line-height:1.55}
.micro{font-size:12px;line-height:1.5;color:var(--tx3)}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:0}
.rot{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx3)
}
.ouro{color:var(--ouro)}
.num{font-variant-numeric:tabular-nums}
/* "SWM" no logotipo é o sufixo de família (como em Caverna SWM): fica em ouro
   e um pouco mais espaçado para ler como selo, não como parte da palavra. */
.logo .swm{color:var(--ouro);letter-spacing:.02em}

/* ---------- botões ---------- */
.b{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-size:14.5px;font-weight:560;letter-spacing:-.01em;
  min-height:var(--toque);padding:0 18px;border-radius:var(--r-sm);cursor:pointer;
  border:1px solid var(--linha2);background:var(--alto);color:var(--tx);
  transition:.16s var(--mola);white-space:nowrap
}
.b:hover{background:var(--topo);border-color:var(--tx3)}
.b:active{transform:translateY(.5px)}
.b-1{
  background:linear-gradient(180deg,var(--ouro) 0%,var(--ouro2) 100%);
  border-color:var(--ouro2);color:#17150F;font-weight:600;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 6px 18px -6px rgba(225,173,102,.45)
}
.b-1:hover{filter:brightness(1.07);border-color:var(--ouro);background:linear-gradient(180deg,var(--ouro) 0%,var(--ouro2) 100%)}
.b-vazio{background:transparent}
.b-vazio:hover{background:var(--alto)}
.b-nu{background:transparent;border-color:transparent;color:var(--tx2);padding:0 10px}
.b-nu:hover{background:var(--alto);border-color:transparent;color:var(--tx)}
.b-p{min-height:34px;font-size:13px;padding:0 12px;border-radius:var(--r-sm)}
.b-full{width:100%}
.b:disabled{opacity:.45;cursor:not-allowed}
.b:disabled:hover{background:var(--alto);border-color:var(--linha2)}

/* ---------- superfícies ---------- */
.cx{
  background:var(--sup);border:1px solid var(--linha);border-radius:var(--r);
  box-shadow:var(--sombra)
}
.cx-p{padding:22px}
.cx-topo{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 18px;border-bottom:1px solid var(--linha)
}

/* ---------- chips e selos ---------- */
.chip{
  display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:520;
  padding:5px 11px;border-radius:var(--r-full);border:1px solid var(--linha2);
  background:var(--alto);color:var(--tx2);white-space:nowrap
}
.chip svg{color:var(--tx3)}
.chip-ouro{border-color:var(--ouro-linha);background:var(--ouro-fraco);color:var(--ouro)}
.chip-ouro svg{color:var(--ouro)}
.chip-ok{border-color:rgba(111,191,149,.32);background:var(--ok-fraco);color:var(--ok)}
.chip-erro{border-color:rgba(229,128,108,.32);background:var(--erro-fraco);color:var(--erro)}

/* ---------- campos ---------- */
.campo{display:block;margin-bottom:16px}
.campo > .rot{display:block;margin-bottom:7px}
.in,select.in,textarea.in{
  width:100%;font-family:var(--sans);font-size:14.5px;color:var(--tx);
  background:var(--base);border:1px solid var(--linha2);border-radius:var(--r-sm);
  padding:11px 13px;outline:none;transition:.15s var(--mola);min-height:var(--toque);appearance:none
}
textarea.in{min-height:auto;resize:vertical;line-height:1.55}
.in::placeholder{color:var(--tx3)}
.in:hover{border-color:var(--tx3)}
.in:focus{border-color:var(--ouro);box-shadow:0 0 0 3px var(--ouro-fraco)}
.in-mono{font-family:var(--mono);font-size:13px}
select.in{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23736E60' stroke-width='1.7'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;cursor:pointer
}

/* ---------- tabela ---------- */
.tbl-rolo{overflow-x:auto;border:1px solid var(--linha);border-radius:var(--r)}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
table.tbl th{
  text-align:left;padding:11px 14px;background:var(--alto);color:var(--tx3);
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  font-weight:500;white-space:nowrap;position:sticky;top:0;border-bottom:1px solid var(--linha)
}
table.tbl td{padding:10px 14px;border-top:1px solid var(--linha);vertical-align:top}
table.tbl tbody tr:hover td{background:var(--alto)}

/* ---------- avisos ---------- */
.nota{
  border:1px solid var(--linha);border-radius:var(--r);padding:14px 16px;
  background:var(--sup);display:flex;align-items:flex-start;gap:11px
}
.nota-ouro{border-color:var(--ouro-linha);background:var(--ouro-fraco)}
.nota-erro{border-color:rgba(229,128,108,.3);background:var(--erro-fraco);color:var(--erro)}
.roda{
  width:15px;height:15px;border:1.6px solid var(--linha2);border-top-color:var(--ouro);
  border-radius:50%;animation:roda .7s linear infinite;flex:none;margin-top:3px
}
@keyframes roda{to{transform:rotate(360deg)}}

/* ---------- utilidades ---------- */
.fl{display:flex;align-items:center;gap:10px}
.fl-w{flex-wrap:wrap}
.entre{justify-content:space-between}
.col{display:flex;flex-direction:column}
.g{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--ouro);outline-offset:2px}
::selection{background:var(--ouro);color:#17150F}

/* barra de rolagem discreta */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--linha2);border-radius:99px;border:3px solid var(--void)}
*::-webkit-scrollbar-thumb:hover{background:var(--tx3)}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media (max-width:900px){
  .g2,.g3,.g4{grid-template-columns:1fr}
}
