/* =========================================================================
   ContentGSEO — identidade visual compartilhada
   Direção: "sala de controle editorial" — tipografia com caráter
   (Bricolage Grotesque + Hanken Grotesk + Space Mono), tinta azul-violeta
   profunda, acento índigo e detalhes de instrumento (números em mono).
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600..700&family=Hanken+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* superfícies */
  --fundo:#0A0D15; --painel:#11151F; --painel2:#0C0F18;
  --linha:#1E2330; --linha-2:#2A3040;
  /* texto */
  --texto:#ECEEF3; --apagado:#7E869C;
  /* acento (índigo) + par para o monograma/estados */
  --azul:#6E86FF; --azul-escuro:#4E68E6; --azul-2:#49C7F5;
  --azul-fraco:rgba(110,134,255,.14);
  /* funcionais */
  --verde:#35D7A0; --amarelo:#F4B64E; --vermelho:#FB7185; --roxo:#9B8CFF;
  /* tipos */
  --display:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --mono:"Space Mono",ui-monospace,"Consolas",monospace;
  /* raios e sombra */
  --r:14px; --r-sm:10px;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fundo); color:var(--texto);
  font-family:var(--body); font-size:14.5px; line-height:1.5;
  letter-spacing:-0.006em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{background:var(--azul-fraco); color:#fff}

/* rolagem discreta */
*{scrollbar-width:thin; scrollbar-color:var(--linha-2) transparent}
*::-webkit-scrollbar{width:10px; height:10px}
*::-webkit-scrollbar-thumb{background:var(--linha-2); border-radius:20px; border:3px solid var(--fundo)}

/* cabeçalho de módulo */
.page-head{margin-bottom:22px}
.page-head h1{font-family:var(--display); font-size:27px; font-weight:700; letter-spacing:-0.025em; margin:0; line-height:1.1}
.page-head .sub{color:var(--apagado); font-size:13.5px; margin-top:5px}

/* rótulos = etiqueta de instrumento (mono, versalete) */
.rotulo{font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
        color:var(--apagado); margin-bottom:7px; display:block}

/* campos */
input[type=text], input[type=number], input[type=url], input[type=password],
input[type=time], select, textarea{
  width:100%; background:var(--painel2); color:var(--texto);
  border:1px solid var(--linha); border-radius:var(--r-sm); padding:11px 13px;
  font-size:14px; font-family:inherit; outline:none; transition:border-color .15s, box-shadow .15s}
input::placeholder, textarea::placeholder{color:#5a6176}
input:hover, select:hover, textarea:hover{border-color:var(--linha-2)}
input:focus, select:focus, textarea:focus{border-color:var(--azul); box-shadow:0 0 0 3px var(--azul-fraco)}
textarea{min-height:80px; resize:vertical; line-height:1.55}
select{appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237E869C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:36px}

/* botões */
.btn{background:var(--painel2); color:var(--texto); border:1px solid var(--linha);
     border-radius:var(--r-sm); padding:9px 15px; font-size:13px; font-weight:500;
     cursor:pointer; font-family:inherit; transition:border-color .15s, background .15s, transform .05s}
.btn:hover{border-color:var(--linha-2); background:#10131d}
.btn:active{transform:translateY(1px)}
.btn-azul{background:linear-gradient(180deg,var(--azul),var(--azul-escuro)); color:#fff; border:none;
          box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 6px 16px -8px var(--azul)}
.btn-azul:hover{filter:brightness(1.06)}
.btn-azul:disabled{opacity:.5; cursor:not-allowed; filter:none}
.btn-perigo{color:var(--vermelho)}
.btn-perigo:hover{border-color:#5a2730; background:#1c1016}

/* cartões */
.cartao{background:var(--painel); border:1px solid var(--linha); border-radius:var(--r);
        padding:17px 19px; margin-bottom:14px; box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}

/* grades */
.dupla{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.tripla{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px}
@media(max-width:620px){.dupla,.tripla{grid-template-columns:1fr}}
.campo{margin-bottom:15px}
.campo:last-child{margin-bottom:0}
.dica{font-size:12.5px; color:var(--apagado); margin-top:5px; line-height:1.5}

/* números de instrumento (mono) — alcança os cartões de estatística das telas */
.stat .n, .nums .n, .banner .n, .resumo .n, .estimativa .custo, .mestre .t ~ *{font-variant-numeric:tabular-nums}
.stat .n, .nums .n, .banner .n, .resumo .n{font-family:var(--mono); letter-spacing:-0.02em}

/* etiquetas */
.badge{font-family:var(--mono); font-size:9.5px; padding:3px 8px; border-radius:6px; border:1px solid var(--linha);
       text-transform:uppercase; letter-spacing:.08em}
.badge.contexto{color:var(--azul); border-color:#243458; background:rgba(110,134,255,.08)}
.badge.links{color:var(--verde); border-color:#1b3f34; background:rgba(53,215,160,.07)}
.badge.imagem{color:var(--roxo); border-color:#312a52; background:rgba(155,140,255,.08)}
.tag{font-family:var(--mono); font-size:10.5px; padding:3px 10px; border-radius:20px; border:1px solid var(--linha); letter-spacing:.02em}
.tag.ativo{color:var(--verde); border-color:#1b3f34; background:rgba(53,215,160,.06)}
.tag.pausado{color:var(--amarelo); border-color:#45370f; background:rgba(244,182,78,.06)}

/* chave liga/desliga */
.chave{position:relative; display:inline-block; width:42px; height:24px; flex-shrink:0}
.chave input{opacity:0; width:0; height:0}
.desl{position:absolute; inset:0; background:var(--painel2); border:1px solid var(--linha-2);
      border-radius:20px; transition:.2s}
.desl:before{content:""; position:absolute; height:18px; width:18px; left:2px; top:2px;
             background:var(--apagado); border-radius:50%; transition:.2s}
.chave input:checked + .desl{background:linear-gradient(180deg,var(--azul),var(--azul-escuro)); border-color:transparent}
.chave input:checked + .desl:before{transform:translateX(18px); background:#fff}

/* avisos */
.erro{background:#1d1016; border:1px solid #4a2630; color:#ff9aaa;
      padding:11px 15px; border-radius:var(--r-sm); font-size:13px; margin-bottom:14px}
.vazio{text-align:center; color:var(--apagado); padding:36px 0; font-size:14px}
.oculto{display:none}

/* placeholder de módulo em construção */
.em-breve{text-align:center; padding:58px 20px; color:var(--apagado)}
.em-breve .ic{font-size:30px; margin-bottom:14px; opacity:.85}
.em-breve h2{font-family:var(--display); color:var(--texto); font-size:19px; font-weight:600; margin:0 0 8px}
.em-breve p{font-size:14px; max-width:430px; margin:0 auto; line-height:1.6}

/* foco acessível visível */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline:2px solid var(--azul); outline-offset:1px}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms !important; transition-duration:.001ms !important}}