/* usetress - identidade dourado + azul.
 *
 * Divisao de papeis, e o motivo dela: o AZUL carrega a leitura (texto, links,
 * superficies) porque tem luminancia baixa e contraste sobrando sobre branco.
 * O DOURADO carrega a identidade (topo, filetes, botao principal, foco) e
 * NUNCA texto pequeno sobre fundo claro - ouro sobre branco fica em torno de
 * 2:1, abaixo do minimo legivel. Onde o dourado precisa falar, ele vira FUNDO
 * e o texto por cima e' azul-escuro.
 */
:root{
  /* azul */
  --azul-900:#0B1A33;   /* topo, texto forte */
  --azul-800:#102A52;
  --azul-700:#16386F;   /* links, botao secundario */
  --azul-600:#1D4B8F;
  --azul-100:#E4EBF6;   /* fundo de realce */

  /* dourado */
  --ouro-700:#7A5E12;   /* texto dourado sobre claro (so' rotulo/negrito) */
  --ouro-600:#A8851C;   /* dourado do FOCO e da borda de campo ativo:
                           3.48:1 sobre branco, 3.24:1 sobre o fundo. O
                           --ouro-400 fica em 2.32:1 - bonito como filete
                           decorativo, mas insuficiente para o indicador que
                           diz onde o teclado esta. */
  --ouro-500:#B4901F;
  --ouro-400:#CBA636;   /* o ouro "cheio": fundo, filete, foco */
  --ouro-200:#EBD9A0;
  --ouro-050:#FBF5E4;

  /* neutros com leve viés azul, para casar com o navy */
  --tinta:#0E1B2E;
  --tinta2:#57677F;
  --linha:#DCE3ED;
  --fundo:#F4F7FB;
  --papel:#FFFFFF;

  /* semanticos - continuam semanticos de proposito: pintar "suspensa" de
     dourado por estetica faria o status perder o significado */
  --ok:#0F6B3C; --ok-bg:#E7F4EC; --ok-linha:#B8DCC6;
  --alerta:#8A5A00; --alerta-bg:#FDF3E0; --alerta-linha:#EBD3A4;
  --erro:#9C1C1C; --erro-bg:#FBEAEA; --erro-linha:#EEC2C2;

  --raio:10px;
  --sombra:0 1px 2px rgba(11,26,51,.06), 0 8px 24px rgba(11,26,51,.05);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fundo);color:var(--tinta);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}
a{color:var(--azul-700);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--ouro-600);outline-offset:2px;border-radius:4px}
/* no topo (navy) o ouro-600 escurece demais; la' o indicador clareia */
.topo :focus-visible{outline-color:var(--ouro-200)}

/* ------------------------------------------------------------------ topo */
.topo{
  display:flex;gap:24px;align-items:center;flex-wrap:wrap;padding:12px 22px;
  background:linear-gradient(180deg,var(--azul-900),var(--azul-800));
  border-bottom:3px solid var(--ouro-400);
  color:#EAF0FA;
}
.marca{
  font-weight:800;letter-spacing:-.02em;font-size:19px;color:#fff;
  padding-bottom:2px;border-bottom:2px solid var(--ouro-400);
}
.marca:hover{text-decoration:none;border-bottom-color:var(--ouro-200)}
.topo nav{display:flex;gap:6px;flex:1;flex-wrap:wrap}
.topo nav a{
  color:#D7E2F3;padding:6px 10px;border-radius:7px;
  border-bottom:2px solid transparent;
}
.topo nav a:hover{
  text-decoration:none;background:rgba(255,255,255,.08);
  border-bottom-color:var(--ouro-400);color:#fff;
}
.usuario{display:flex;flex-direction:column;align-items:flex-end;line-height:1.3}
.usuario span{color:#fff;font-weight:600}
.usuario small{color:var(--ouro-200)}
.usuario .link{color:#D7E2F3}

main{max-width:1080px;margin:26px auto;padding:0 22px}
footer{max-width:1080px;margin:36px auto;padding:0 22px;color:var(--tinta2)}

h1{font-size:23px;margin:0 0 4px;color:var(--azul-900);letter-spacing:-.01em}
h2{
  font-size:15px;margin:26px 0 10px;color:var(--azul-800);
  text-transform:uppercase;letter-spacing:.06em;
}
h2::after{
  content:"";display:block;width:34px;height:3px;margin-top:6px;
  background:var(--ouro-400);border-radius:2px;
}
.sub{color:var(--tinta2);margin:0 0 20px}

/* --------------------------------------------------------------- blocos */
.cartao{
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);
  padding:18px;margin-bottom:16px;box-shadow:var(--sombra);
}
.cartao h2:first-child{margin-top:0}
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.metrica{
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);
  padding:14px;border-top:3px solid var(--ouro-400);box-shadow:var(--sombra);
}
.metrica b{display:block;font-size:25px;line-height:1.15;color:var(--azul-900)}
.metrica span{color:var(--tinta2);font-size:13px}

/* --------------------------------------------------------------- tabela */
.rolagem{
  overflow-x:auto;border:1px solid var(--linha);border-radius:var(--raio);
  background:var(--papel);box-shadow:var(--sombra);
}
table{width:100%;border-collapse:collapse;background:var(--papel)}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--linha);vertical-align:top}
th{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;
  color:#E9EFF9;background:var(--azul-800);font-weight:700;
  border-bottom:2px solid var(--ouro-400);
}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--ouro-050)}

/* ------------------------------------------------------------ formulario */
label{display:block;margin:12px 0 4px;font-weight:600;color:var(--azul-800)}
input,select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--linha);border-radius:8px;
  font:inherit;background:var(--papel);color:var(--tinta);
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--ouro-600);
  box-shadow:0 0 0 3px rgba(168,133,28,.30);
}
input[type=checkbox]{width:auto}

button{
  font:inherit;font-weight:600;padding:9px 16px;border-radius:8px;cursor:pointer;
  background:var(--ouro-400);color:var(--azul-900);border:1px solid var(--ouro-500);
}
button:hover{background:var(--ouro-200)}
button.secundario{
  background:var(--papel);color:var(--azul-700);border-color:var(--linha);
}
button.secundario:hover{background:var(--azul-100)}
button.perigo{background:var(--papel);color:var(--erro);border-color:var(--erro-linha)}
button.perigo:hover{background:var(--erro-bg)}
button.link{
  background:none;border:none;color:var(--azul-700);padding:0;font-weight:600;
}
.usuario button.link{color:#D7E2F3}
.linha-botoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;align-items:center}

/* ---------------------------------------------------------------- avisos */
.aviso{padding:12px 15px;border-radius:9px;margin-bottom:16px;border:1px solid;border-left-width:4px}
.aviso.ok{background:var(--ok-bg);border-color:var(--ok-linha);color:var(--ok)}
.aviso.erro{background:var(--erro-bg);border-color:var(--erro-linha);color:var(--erro)}
.aviso.bloqueio{background:var(--alerta-bg);border-color:var(--alerta-linha);color:var(--alerta)}

.selo{
  display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;
  font-weight:600;border:1px solid var(--linha);background:var(--fundo);color:var(--tinta2);
}
.selo.ativa,.selo.active{background:var(--ok-bg);border-color:var(--ok-linha);color:var(--ok)}
.selo.trialing{background:var(--ouro-050);border-color:var(--ouro-200);color:var(--ouro-700)}
.selo.past_due,.selo.grace_period,.selo.configuracao_inicial{
  background:var(--alerta-bg);border-color:var(--alerta-linha);color:var(--alerta)}
.selo.suspended,.selo.suspensa,.selo.canceled,.selo.cancelada{
  background:var(--erro-bg);border-color:var(--erro-linha);color:var(--erro)}

/* ---------------------------------------------------------------- login */
.entrada{max-width:410px;margin:9vh auto}
.entrada h1{text-align:center;font-size:27px}
.entrada .sub{text-align:center}
.entrada .cartao{padding:26px;border-top:4px solid var(--ouro-400)}

.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;word-break:break-all}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:16px}
hr{border:none;border-top:1px solid var(--linha);margin:18px 0}

@media(max-width:640px){
  .dupla{grid-template-columns:1fr}
  .topo{gap:12px;padding:10px 16px}
  .usuario{align-items:flex-start}
  main,footer{padding:0 16px}
}

/* ------------------------------------------------------------ marca */
.marca{display:inline-flex;align-items:center;border-bottom:none}
.marca:hover{text-decoration:none;opacity:.88}
.marca img{display:block}
.marca-central{text-align:center;margin:0 0 6px}

/* pagina de identidade visual */
.amostras{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.amostra{border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;background:var(--papel)}
.amostra .chapa{height:64px}
.amostra .dados{padding:8px 10px;font-size:12px;line-height:1.45}
.amostra .dados code{font-family:ui-monospace,Menlo,monospace}
.amostra .dados b{display:block;color:var(--azul-900)}
.aprovado{color:var(--ok);font-weight:700}
.reprovado{color:var(--erro);font-weight:700}
.vitrine{
  display:flex;gap:22px;align-items:center;flex-wrap:wrap;
  padding:22px;border:1px solid var(--linha);border-radius:var(--raio);background:var(--papel);
}
.vitrine.escura{background:var(--azul-900);border-color:var(--azul-800)}
.regras{margin:0;padding-left:18px}
.regras li{margin:6px 0}