/* ============================================================
   CFC ACADEMY · RADAR DE EDITAIS
   Design System — camada 2: reset, tipografia e primitivos
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  font-family:var(--body);
  background:var(--preto);
  color:var(--branco);
  font-size:var(--t-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}

a{text-decoration:none;color:inherit}
img,svg{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.02em;
}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);font-weight:700}

/* Numerais tabulares — essenciais num painel de dados:
   salários e datas precisam alinhar em coluna. */
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

::selection{background:var(--lima);color:var(--preto)}

/* Foco visível e consistente — acessibilidade não-negociável
   num produto que as pessoas vão navegar por teclado. */
:focus-visible{
  outline:2px solid var(--lima);
  outline-offset:3px;
  border-radius:var(--r-xs);
}

/* ---------- layout ---------- */
.container{width:min(100% - 40px,var(--max));margin-inline:auto}
.container-txt{width:min(100% - 40px,var(--max-txt));margin-inline:auto}

/* ============================================================
   EYEBROW — assinatura CFC: ponto pulsante + caixa alta espaçada
   ============================================================ */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:var(--t-micro);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--lima);
}
.eyebrow::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:var(--lima);box-shadow:0 0 12px var(--lima-glow);
  animation:blink 1.6s infinite;
}
.eyebrow.neutro{color:var(--cinza)}
.eyebrow.neutro::before{background:var(--cinza-esc);box-shadow:none;animation:none}

@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}

/* ============================================================
   BOTÕES
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--display);font-weight:800;font-size:1rem;
  letter-spacing:.01em;text-transform:uppercase;text-align:center;
  padding:16px 30px;border-radius:12px;
  border:2px solid transparent;cursor:pointer;line-height:1.2;
  transition:transform var(--dur-2) var(--ease),
             box-shadow var(--dur-2),background var(--dur-2),
             border-color var(--dur-2),color var(--dur-2);
}
.btn-lima{background:var(--lima);color:var(--preto);box-shadow:var(--sombra-lima)}
.btn-lima:hover{transform:translateY(-3px);box-shadow:0 0 40px var(--lima-glow),0 18px 44px rgba(159,227,26,.4)}
.btn-ghost{background:transparent;color:var(--branco);border-color:var(--linha)}
.btn-ghost:hover{border-color:var(--lima);color:var(--lima);transform:translateY(-3px)}
.btn-sm{padding:10px 18px;font-size:var(--t-xs);border-radius:var(--r-sm)}
.btn-block{display:flex;width:100%}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none !important}

/* ============================================================
   CARD — painel base
   ============================================================ */
.card{
  background:linear-gradient(165deg,var(--carvao),var(--preto-2));
  border:1px solid var(--linha);
  border-radius:var(--r-lg);
  box-shadow:var(--sombra-2);
}

/* ============================================================
   BADGES DE STATUS
   Regra do sistema: lima SÓ para "aberto". Estados concorrentes
   usam âmbar/vermelho/azul para não diluir o acento da marca.
   ============================================================ */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--display);font-weight:700;
  font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;
  padding:5px 11px;border-radius:var(--r-pill);
  border:1px solid transparent;white-space:nowrap;
}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-ok{color:var(--ok);background:var(--ok-wash);border-color:rgba(159,227,26,.3)}
.badge-ok::before{box-shadow:0 0 8px var(--lima-glow);animation:blink 1.8s infinite}
.badge-warn{color:var(--warn);background:var(--warn-wash);border-color:rgba(227,179,65,.3)}
.badge-crit{color:var(--crit);background:var(--crit-wash);border-color:rgba(239,106,106,.3)}
.badge-info{color:var(--info);background:var(--info-wash);border-color:rgba(91,200,227,.3)}
.badge-neutro{color:var(--cinza);background:rgba(243,247,240,.05);border-color:var(--linha-neutra)}

/* ============================================================
   CAMPOS
   ============================================================ */
.campo{
  width:100%;padding:13px 16px;
  background:var(--carvao-3);
  border:1px solid var(--linha-neutra);
  border-radius:var(--r-sm);
  color:var(--branco);font-size:var(--t-sm);
  transition:border-color var(--dur-1),box-shadow var(--dur-1);
}
.campo::placeholder{color:var(--cinza-esc)}
.campo:focus{outline:none;border-color:var(--lima);box-shadow:0 0 0 3px var(--lima-wash-2)}
select.campo{cursor:pointer;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--cinza) 50%),
                   linear-gradient(135deg,var(--cinza) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:38px;
}

/* ============================================================
   CHIP — filtro ativo removível
   ============================================================ */
.chip{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--t-xs);font-weight:600;
  padding:6px 8px 6px 13px;border-radius:var(--r-pill);
  background:var(--lima-wash);color:var(--lima);
  border:1px solid rgba(159,227,26,.28);
}
.chip button{
  display:grid;place-items:center;
  width:17px;height:17px;border-radius:50%;
  background:rgba(159,227,26,.2);color:var(--lima);
  font-size:.7rem;line-height:1;
  transition:background var(--dur-1);
}
.chip button:hover{background:var(--lima);color:var(--preto)}

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.up{
  opacity:0;transform:translateY(30px);
  transition:opacity var(--dur-3) ease,transform var(--dur-3) var(--ease);
}
.up.in{opacity:1;transform:none}

/* ============================================================
   UTILITÁRIOS
   ============================================================ */
.mesh{
  background-image:var(--mesh);
  background-size:var(--mesh-size);
}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;top:-60px;left:16px;z-index:200;
  background:var(--lima);color:var(--preto);
  padding:12px 20px;border-radius:var(--r-sm);
  font-family:var(--display);font-weight:800;font-size:var(--t-xs);
  text-transform:uppercase;transition:top var(--dur-2) var(--ease);
}
.skip-link:focus{top:12px}