/*
  Interface do Gazafi Crypto Guard.

  Documento 10: resumo imediato, detalhes sob demanda, densidade controlada.
  Nada anima por conta própria e nada pisca — um painel financeiro que chama
  atenção sozinho treina o operador a ignorá-lo.

  Layout em grade com `min()` e `clamp()`: funciona de 360 px a ultrawide sem
  breakpoint por dispositivo.
*/

/* ------------------------------------------------------------ estrutura */

.pular {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--superficie);
  color: var(--texto);
  padding: var(--e-3) var(--e-4);
  z-index: 100;
  border-radius: 0 0 var(--raio) 0;
}
.pular:focus {
  left: 0;
}

.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}

.topo-interno {
  max-width: var(--largura-maxima);
  margin: 0 auto;
  padding: var(--e-3) var(--e-4);
  display: flex;
  align-items: center;
  gap: var(--e-4);
  flex-wrap: wrap;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  color: var(--texto);
  text-decoration: none;
}
.marca img {
  flex: none;
}
.marca-texto {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.marca-texto strong {
  font-size: var(--t-sm);
  letter-spacing: 0.16em;
  font-weight: 600;
}
.marca-texto span {
  font-size: var(--t-xs);
  color: var(--texto-suave);
  letter-spacing: 0.08em;
}

/*
  Selo de modo. PAPER usa o azul informativo; LIVE usa o dourado do acento —
  chamativo o bastante para ser notado, sóbrio o bastante para não parecer
  celebração. O texto sempre acompanha, nunca só a cor.
*/
.selo {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: var(--e-1) var(--e-3);
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}
.selo-paper {
  color: var(--info);
  background: var(--info-suave);
  border-color: color-mix(in srgb, var(--info) 35%, transparent);
}
.selo-live {
  color: var(--acento);
  background: var(--acento-suave);
  border-color: var(--acento-borda);
}

.navegacao {
  display: flex;
  gap: var(--e-1);
  margin-left: auto;
  flex-wrap: wrap;
}
.navegacao a {
  color: var(--texto-suave);
  text-decoration: none;
  padding: var(--e-2) var(--e-3);
  border-radius: var(--raio-sm);
  font-size: var(--t-sm);
}
.navegacao a:hover {
  background: var(--superficie-2);
  color: var(--texto);
}
.navegacao a[aria-current="page"] {
  color: var(--texto);
  background: var(--superficie-2);
  box-shadow: inset 0 -2px 0 var(--acento);
}

.topo-acoes {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}

.conta {
  position: relative;
}
.conta summary {
  cursor: pointer;
  font-size: var(--t-sm);
  color: var(--texto-suave);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--raio-sm);
  list-style: none;
}
.conta summary::-webkit-details-marker {
  display: none;
}
.conta summary:hover {
  background: var(--superficie-2);
}
.conta-menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--e-2));
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-2);
  padding: var(--e-3);
  min-width: 220px;
}
.conta-email {
  margin: 0 0 var(--e-1);
  font-size: var(--t-sm);
}
.conta-papel {
  margin: 0 0 var(--e-3);
  font-size: var(--t-xs);
  color: var(--texto-suave);
  letter-spacing: 0.06em;
}

.conteudo {
  max-width: var(--largura-maxima);
  margin: 0 auto;
  padding: var(--e-5) var(--e-4) var(--e-7);
}

.rodape {
  max-width: var(--largura-maxima);
  margin: 0 auto;
  padding: var(--e-4);
  border-top: 1px solid var(--borda);
  color: var(--texto-fraco);
  font-size: var(--t-xs);
}
.rodape p {
  margin: 0;
  max-width: 90ch;
}

/* ------------------------------------------------------------ tipografia */

h1 {
  font-size: var(--t-2xl);
  font-weight: 600;
  margin: 0 0 var(--e-1);
  letter-spacing: -0.01em;
}
h2 {
  font-size: var(--t-lg);
  font-weight: 600;
  margin: 0 0 var(--e-3);
}
h3 {
  font-size: var(--t-md);
  font-weight: 600;
  margin: 0 0 var(--e-2);
}
.subtitulo {
  color: var(--texto-suave);
  margin: 0 0 var(--e-5);
  max-width: 80ch;
}
.cabecalho-secao {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-4);
  flex-wrap: wrap;
  margin-bottom: var(--e-4);
}

/* ---------------------------------------------------------------- cartões */

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--e-3);
  margin-bottom: var(--e-5);
}

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--e-4);
}

.cartao-destaque {
  border-color: var(--acento-borda);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--acento-suave) 55%, var(--superficie)),
    var(--superficie)
  );
}

.rotulo {
  font-size: var(--t-xs);
  color: var(--texto-suave);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin: 0 0 var(--e-2);
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.valor-principal {
  font-size: var(--t-numero);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  line-height: 1.15;
  /* Altura reservada: atualizar o número não pode empurrar o que está abaixo
     nem mover um botão sob o cursor (documento 10). */
  min-height: 2.1em;
  display: flex;
  align-items: center;
}

.valor-unidade {
  font-size: var(--t-sm);
  color: var(--texto-suave);
  font-weight: 500;
  margin-left: var(--e-2);
}

.nota {
  font-size: var(--t-sm);
  color: var(--texto-suave);
  margin: var(--e-2) 0 0;
}
.nota-idade {
  font-size: var(--t-xs);
  color: var(--texto-fraco);
}

.positivo {
  color: var(--positivo);
}
.negativo {
  color: var(--negativo);
}
.neutro {
  color: var(--texto);
}

/* ----------------------------------------------------------- decomposição */

.decomposicao {
  list-style: none;
  margin: var(--e-3) 0 0;
  padding: 0;
  border-top: 1px solid var(--borda);
}
.decomposicao li {
  display: flex;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-2) 0;
  border-bottom: 1px solid var(--borda);
  font-size: var(--t-sm);
}
.decomposicao li:last-child {
  border-bottom: none;
}
.decomposicao dt,
.decomposicao .chave {
  color: var(--texto-suave);
}
.decomposicao .valor {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.decomposicao .total {
  font-weight: 600;
  border-top: 1px solid var(--borda-forte);
  color: var(--texto);
}

/* --------------------------------------------------------------- tabelas */

.tabela-envolvente {
  overflow-x: auto;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
thead th {
  text-align: left;
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
  font-weight: 600;
  padding: var(--e-3) var(--e-3);
  border-bottom: 1px solid var(--borda);
  background: var(--superficie-2);
  white-space: nowrap;
}
tbody td {
  padding: var(--e-3);
  border-bottom: 1px solid var(--borda);
  vertical-align: top;
}
tbody tr:last-child td {
  border-bottom: none;
}
td.numero,
th.numero {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mono {
  font-family: var(--fonte-mono);
  font-size: var(--t-xs);
}

/* ---------------------------------------------------------------- estados */

.marcador {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  font-size: var(--t-xs);
  font-weight: 600;
  padding: 2px var(--e-2);
  border-radius: var(--raio-sm);
  border: 1px solid;
  white-space: nowrap;
}
.marcador::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.marcador-ok {
  color: var(--positivo);
  background: var(--positivo-suave);
  border-color: color-mix(in srgb, var(--positivo) 30%, transparent);
}
.marcador-alerta {
  color: var(--atencao);
  background: var(--atencao-suave);
  border-color: color-mix(in srgb, var(--atencao) 30%, transparent);
}
.marcador-erro {
  color: var(--negativo);
  background: var(--negativo-suave);
  border-color: color-mix(in srgb, var(--negativo) 30%, transparent);
}
.marcador-neutro {
  color: var(--neutro);
  background: var(--neutro-suave);
  border-color: color-mix(in srgb, var(--neutro) 30%, transparent);
}
.marcador-info {
  color: var(--info);
  background: var(--info-suave);
  border-color: color-mix(in srgb, var(--info) 30%, transparent);
}

/* --------------------------------------------------------------- avisos */

.aviso {
  border: 1px solid;
  border-left-width: 3px;
  border-radius: var(--raio);
  padding: var(--e-3) var(--e-4);
  margin-bottom: var(--e-4);
}
.aviso p {
  margin: 0;
}
.aviso p + p {
  margin-top: var(--e-2);
}
.aviso-titulo {
  font-weight: 600;
  margin-bottom: var(--e-1) !important;
}
.aviso-info {
  border-color: color-mix(in srgb, var(--info) 40%, transparent);
  background: var(--info-suave);
}
.aviso-alerta {
  border-color: color-mix(in srgb, var(--atencao) 45%, transparent);
  background: var(--atencao-suave);
}
.aviso-erro {
  border-color: color-mix(in srgb, var(--negativo) 45%, transparent);
  background: var(--negativo-suave);
}

/* --------------------------------------------------------------- botões */

.btn {
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 500;
  padding: var(--e-2) var(--e-4);
  border-radius: var(--raio-sm);
  border: 1px solid var(--borda-forte);
  background: var(--superficie-2);
  color: var(--texto);
  cursor: pointer;
  /* Área de toque confortável no celular (documento 10). */
  min-height: 38px;
}
.btn:hover {
  background: var(--superficie-3);
}
.btn-primario {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--texto-invertido);
  font-weight: 600;
}
.btn-primario:hover {
  background: var(--acento-forte);
  border-color: var(--acento-forte);
}
.btn-alerta {
  background: var(--negativo-suave);
  border-color: color-mix(in srgb, var(--negativo) 45%, transparent);
  color: var(--negativo);
  font-weight: 600;
}
.btn-alerta:hover {
  background: color-mix(in srgb, var(--negativo) 18%, var(--superficie));
}
.btn-discreto {
  background: transparent;
  border-color: var(--borda);
  color: var(--texto-suave);
}

/* -------------------------------------------------------------- formulários */

.formulario {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}
.campo {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}
.campo label {
  font-size: var(--t-sm);
  font-weight: 500;
}
.campo input,
.campo select,
.campo textarea {
  font: inherit;
  padding: var(--e-3);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  background: var(--fundo);
  color: var(--texto);
  min-height: 40px;
}
.campo .ajuda {
  font-size: var(--t-xs);
  color: var(--texto-suave);
}
.campo-codigo input {
  font-family: var(--fonte-mono);
  font-size: var(--t-xl);
  letter-spacing: 0.4em;
  text-align: center;
}

/* ---------------------------------------------------------- tela de acesso */

.acesso {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--e-4);
}
.acesso-cartao {
  width: min(420px, 100%);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  padding: var(--e-6);
  box-shadow: var(--sombra-2);
}
.acesso-marca {
  display: flex;
  justify-content: center;
  margin-bottom: var(--e-5);
}
.acesso-marca img {
  width: 210px;
  height: auto;
}
.acesso h1 {
  font-size: var(--t-lg);
  text-align: center;
  margin-bottom: var(--e-2);
}
.acesso .subtitulo {
  text-align: center;
  font-size: var(--t-sm);
  margin-bottom: var(--e-5);
}
.acesso-rodape {
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  border-top: 1px solid var(--borda);
  font-size: var(--t-xs);
  color: var(--texto-fraco);
  text-align: center;
}

.segredo-mfa {
  font-family: var(--fonte-mono);
  font-size: var(--t-md);
  letter-spacing: 0.1em;
  word-break: break-all;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: var(--e-3);
  margin: var(--e-3) 0;
}

/* ------------------------------------------------------------- utilitários */

.vazio {
  padding: var(--e-6);
  text-align: center;
  color: var(--texto-suave);
}
.vazio p {
  margin: 0 auto;
  max-width: 60ch;
}
.linha-acoes {
  display: flex;
  gap: var(--e-3);
  flex-wrap: wrap;
  align-items: center;
}
.duas-colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: var(--e-4);
  align-items: start;
}

/* ------------------------------------------------------- espaçamento

   Classes utilitárias em lugar de `style="..."` nos templates. Não é
   preferência estética: com `style-src 'self'` sem `unsafe-inline`, um atributo
   `style` é bloqueado pelo navegador e o layout quebra. Manter o CSS fora do
   HTML é o que permite a política restritiva funcionar.
*/

.sem-margem { margin: 0 !important; }
.sem-margem-topo { margin-top: 0 !important; }
.sem-margem-base { margin-bottom: 0 !important; }
.espaco-acima { margin-top: var(--e-4); }
.espaco-acima-largo { margin-top: var(--e-5); }
.espaco-abaixo-largo { margin-bottom: var(--e-5); }
.bloco-encaixado { margin-top: var(--e-4); margin-bottom: 0; }
.campo-flexivel { flex: 1; min-width: 220px; }