/* Console de licenças do Meeting Copilot — folha de estilo única.
 *
 * Sem framework e sem fonte externa. A CSP é `default-src 'none'` com
 * `style-src 'self'`: fonte de fora seria bloqueada, e estilo embutido também.
 * Logo, tudo mora aqui e a tipografia é a do próprio sistema — que no Mac já é
 * a San Francisco, exatamente a do app.
 *
 * Organização: tokens → base → casca → componentes → responsivo.
 */

/* ─── Tokens ─────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light dark;

  --fundo: #f4f6f8;
  --superficie: #ffffff;
  --superficie-2: #f0f2f5;
  --texto: #15181d;
  --texto-suave: #586072;
  --borda: #d5dae1;
  --borda-forte: #b6bec9;

  --acento: #1a56c4;
  --acento-forte: #123f92;
  --acento-texto: #ffffff;
  --acento-fraco: #e8eefb;

  --perigo: #a8271d;
  --perigo-fraco: #fdecea;
  --atencao: #8a5800;
  --atencao-fraco: #fff4dd;
  --ok: #15693a;
  --ok-fraco: #e6f5ec;

  --foco: #1a56c4;
  --sombra: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);

  --raio: 10px;
  --raio-p: 6px;
  --gap: 1rem;
  --largura: 68rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #101317;
    --superficie: #191d23;
    --superficie-2: #20252c;
    --texto: #e9ecf1;
    --texto-suave: #a3adbb;
    --borda: #2f3640;
    --borda-forte: #404a57;

    --acento: #8fb4ff;
    --acento-forte: #b3ccff;
    --acento-texto: #0d1117;
    --acento-fraco: #1b2537;

    --perigo: #ff9a90;
    --perigo-fraco: #2b1614;
    --atencao: #f0c164;
    --atencao-fraco: #2a2112;
    --ok: #7fd8a1;
    --ok-fraco: #12251a;

    --foco: #8fb4ff;
    --sombra: none;
  }
}

/* ─── Base ───────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* 100% respeita o tamanho de fonte escolhido pela pessoa no sistema. */
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* 1.0625rem: um pouco acima do padrão, porque este console é lido o dia
     inteiro e muitas vezes no celular. */
  font-size: 1.0625rem;
  line-height: 1.55;
}

h1, h2, h3 {
  line-height: 1.25;
  margin: 0 0 0.5rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }

p { margin: 0 0 0.75rem; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--acento);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover { color: var(--acento-forte); }

code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--superficie-2);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

/* Foco sempre visível, e grosso o bastante para ser visto de relance. */
:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
  border-radius: 3px;
}

.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Link de pular: escondido até receber o foco pelo teclado. */
.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--acento);
  color: var(--acento-texto);
  padding: 0.75rem 1rem;
  z-index: 10;
}

.pular:focus {
  left: 0;
}

.apoio {
  display: block;
  color: var(--texto-suave);
  font-size: 0.9rem;
  margin: 0.15rem 0 0;
}

/* ─── Casca ──────────────────────────────────────────────────────────────── */

.topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding: 0.75rem 1.25rem;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}

.marca {
  color: var(--texto);
  text-decoration: none;
  font-size: 1rem;
  white-space: nowrap;
}

.marca span {
  color: var(--texto-suave);
}

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  flex: 1 1 auto;
}

.menu__item {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.85rem;
  border-radius: var(--raio-p);
  color: var(--texto-suave);
  text-decoration: none;
  font-weight: 550;
}

.menu__item:hover {
  background: var(--superficie-2);
  color: var(--texto);
}

.menu__item--ativo {
  background: var(--acento-fraco);
  color: var(--acento-forte);
}

.conta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.conta__usuario {
  font-size: 0.9rem;
}

.conteudo {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

.rodape {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 1.25rem 2.5rem;
  color: var(--texto-suave);
  font-size: 0.85rem;
}

/* ─── Títulos de página ──────────────────────────────────────────────────── */

.titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap);
  margin-bottom: 1.25rem;
}

.titulo__descricao {
  color: var(--texto-suave);
  margin: 0;
}

.migalhas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.875rem;
  color: var(--texto-suave);
  margin-bottom: 0.75rem;
}

.migalhas span[aria-current] {
  color: var(--texto);
}

/* ─── Cartões ────────────────────────────────────────────────────────────── */

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.cartao--estreito {
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}

.cartao--perigo {
  border-color: var(--perigo);
  border-width: 2px;
}

/* ─── Números do painel ──────────────────────────────────────────────────── */

.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--gap);
  margin-bottom: 1.25rem;
}

.numero {
  display: block;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 1.1rem 1.25rem;
  color: inherit;
  text-decoration: none;
}

a.numero:hover {
  border-color: var(--acento);
}

.numero--atencao {
  border-left: 5px solid var(--atencao);
}

.numero__valor {
  display: block;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.numero__rotulo {
  display: block;
  font-weight: 550;
}

/* ─── Tabelas ────────────────────────────────────────────────────────────── */

.tabela {
  width: 100%;
  border-collapse: collapse;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  margin-bottom: 1rem;
}

.tabela caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 0.5rem;
}

.tabela th,
.tabela td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--borda);
  vertical-align: top;
}

.tabela thead th {
  background: var(--superficie-2);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-suave);
  white-space: nowrap;
}

.tabela tbody tr:last-child td {
  border-bottom: 0;
}

.tabela tbody tr:hover {
  background: var(--superficie-2);
}

.linha--apagada td {
  opacity: 0.62;
}

.tabela--auditoria {
  font-size: 0.95rem;
}

/* ─── Selos de situação ──────────────────────────────────────────────────── */
/* Símbolo + palavra, sempre. Cor é reforço, nunca a informação principal. */

.selo {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--borda-forte);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

.selo__simbolo { font-size: 0.8em; }

.selo--ativa { color: var(--ok); background: var(--ok-fraco); border-color: var(--ok); }
.selo--vencendo,
.selo--vencida { color: var(--atencao); background: var(--atencao-fraco); border-color: var(--atencao); }
.selo--suspensa { color: var(--texto-suave); background: var(--superficie-2); }
.selo--revogada { color: var(--perigo); background: var(--perigo-fraco); border-color: var(--perigo); }

/* ─── Botões ─────────────────────────────────────────────────────────────── */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 2.75rem ≈ 44px: alvo confortável no dedo e no trackpad. */
  min-height: 2.75rem;
  padding: 0.5rem 1.1rem;
  border-radius: var(--raio-p);
  border: 1px solid var(--borda-forte);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.botao:hover {
  background: var(--superficie-2);
  color: var(--texto);
}

.botao--principal {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-texto);
}

.botao--principal:hover {
  background: var(--acento-forte);
  border-color: var(--acento-forte);
  color: var(--acento-texto);
}

.botao--perigo {
  background: var(--perigo-fraco);
  border-color: var(--perigo);
  color: var(--perigo);
}

.botao--perigo:hover {
  background: var(--perigo);
  color: var(--superficie);
}

.botao--discreto {
  background: transparent;
  border-color: transparent;
  color: var(--texto-suave);
}

.botao--discreto:hover {
  background: var(--superficie-2);
  color: var(--texto);
}

.botao--largo { width: 100%; }

.botao[disabled],
.botao--inerte {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-top: 1rem;
}

.acoes-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

.acoes-lista li {
  display: grid;
  gap: 0.2rem;
  justify-items: start;
}

/* ─── Formulários ────────────────────────────────────────────────────────── */

.formulario {
  max-width: 36rem;
}

.campo {
  margin-bottom: 1.1rem;
}

.campo__rotulo {
  display: block;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.campo__obrigatorio {
  font-weight: 400;
  color: var(--texto-suave);
  font-size: 0.85rem;
}

.campo__dica {
  color: var(--texto-suave);
  font-size: 0.875rem;
  margin: 0 0 0.35rem;
}

/* O erro fica ANTES do campo, colado nele: quem usa leitor de tela ouve o
   problema antes de voltar a digitar, e quem enxerga lê na ordem natural. */
.campo__erro {
  color: var(--perigo);
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 0.35rem;
}

.campo__entrada {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.7rem;
  font: inherit;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-p);
}

textarea.campo__entrada {
  resize: vertical;
  line-height: 1.5;
}

.campo--erro .campo__entrada {
  border-color: var(--perigo);
  border-width: 2px;
}

.busca__linha {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.busca__linha .campo__entrada {
  flex: 1 1 16rem;
  width: auto;
}

.busca__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0 var(--gap);
  align-items: end;
}

.busca .campo {
  margin-bottom: 0.6rem;
}

/* ─── Recados ────────────────────────────────────────────────────────────── */

.recado {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  border-radius: var(--raio);
  border: 1px solid var(--borda);
  margin-bottom: 1.25rem;
  font-weight: 500;
}

.recado__simbolo {
  font-weight: 700;
  line-height: 1.5;
}

.recado--ok { background: var(--ok-fraco); border-color: var(--ok); color: var(--ok); }
.recado--erro { background: var(--perigo-fraco); border-color: var(--perigo); color: var(--perigo); }
.recado--atencao { background: var(--atencao-fraco); border-color: var(--atencao); color: var(--atencao); }

/* ─── Estado vazio ───────────────────────────────────────────────────────── */

.vazio {
  background: var(--superficie);
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio);
  padding: 2.5rem 1.5rem;
  text-align: center;
}

.vazio__titulo {
  font-size: 1.15rem;
  font-weight: 650;
  margin-bottom: 0.35rem;
}

.vazio__texto {
  color: var(--texto-suave);
  max-width: 34rem;
  margin: 0 auto 1rem;
}

/* ─── Ficha da licença ───────────────────────────────────────────────────── */

.ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
  margin: 0 0 1rem;
}

.ficha dt {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-suave);
  margin-bottom: 0.15rem;
}

.ficha dd {
  margin: 0;
  font-weight: 550;
}

.observacoes {
  border-top: 1px solid var(--borda);
  padding-top: 0.9rem;
  margin-top: 0.9rem;
  white-space: pre-wrap;
}

/* ─── A chave, mostrada uma única vez ────────────────────────────────────── */

.chave {
  background: var(--acento-fraco);
  border: 2px solid var(--acento);
  border-radius: var(--raio);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.chave h2 {
  margin-top: 0;
}

.chave__valor {
  margin: 1rem 0;
  text-align: center;
}

.chave__valor code {
  display: inline-block;
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  padding: 0.9rem 1.2rem;
  font-size: clamp(1.1rem, 4.5vw, 1.9rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  /* Selecionável de uma vez: sem JavaScript, copiar é selecionar. */
  user-select: all;
  word-break: break-all;
}

.chave__instrucao {
  font-weight: 550;
}

/* ─── Confirmações ───────────────────────────────────────────────────────── */

.consequencias {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
}

.consequencias li {
  margin-bottom: 0.4rem;
}

.irreversivel {
  font-weight: 700;
  color: var(--perigo);
  background: var(--perigo-fraco);
  border-radius: var(--raio-p);
  padding: 0.6rem 0.8rem;
}

.reversivel {
  font-weight: 600;
  color: var(--texto-suave);
  background: var(--superficie-2);
  border-radius: var(--raio-p);
  padding: 0.6rem 0.8rem;
}

/* ─── Listas ─────────────────────────────────────────────────────────────── */

.lista-simples {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.lista-simples li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--borda);
}

.lista-simples li:last-child {
  border-bottom: 0;
}

.historico {
  list-style: none;
  margin: 0;
  padding: 0;
}

.historico li {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 0 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--borda);
}

.historico li:last-child {
  border-bottom: 0;
}

.historico__quando {
  color: var(--texto-suave);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.historico__acao {
  font-weight: 550;
}

.historico .apoio {
  grid-column: 2;
}

/* ─── Paginação ──────────────────────────────────────────────────────────── */

.paginacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.paginacao__posicao {
  color: var(--texto-suave);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

/* ─── Configuração do 2FA ────────────────────────────────────────────────── */

.passos {
  padding-left: 1.3rem;
  margin: 1rem 0;
}

.passos > li {
  margin-bottom: 1.5rem;
}

.qr {
  display: block;
  width: 260px;
  max-width: 100%;
  height: auto;
  /* Fundo branco fixo: no tema escuro um QR invertido não é lido pela câmera. */
  background: #ffffff;
  padding: 8px;
  border-radius: var(--raio-p);
  border: 1px solid var(--borda);
}

.segredo code {
  display: inline-block;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  user-select: all;
  padding: 0.5rem 0.7rem;
  word-break: break-all;
}

/* ─── Responsivo ─────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .conteudo {
    padding: 1rem 0.9rem 2.5rem;
  }

  .topo {
    padding: 0.6rem 0.9rem;
  }

  .conta {
    order: 3;
    width: 100%;
    justify-content: space-between;
  }

  .menu {
    order: 4;
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  /* Tabela vira lista de fichas: cada célula ganha o próprio rótulo, tirado
     do atributo data-rotulo. Sem isso, rolagem horizontal no celular. */
  .tabela,
  .tabela tbody,
  .tabela tr,
  .tabela td {
    display: block;
    width: 100%;
  }

  .tabela {
    border: 0;
    background: transparent;
  }

  .tabela thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .tabela tbody tr {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.9rem;
  }

  .tabela td {
    border-bottom: 0;
    padding: 0.35rem 0;
  }

  .tabela td::before {
    content: attr(data-rotulo);
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--texto-suave);
  }

  .historico li {
    grid-template-columns: 1fr;
  }

  .historico .apoio {
    grid-column: 1;
  }

  .titulo {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Quem pediu menos movimento no sistema não recebe transição nenhuma. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}


/* Página de "vamos recomeçar" (token de formulário vencido): vive fora do
   layout normal, porque pode aparecer antes de existir qualquer sessão. */
.aviso-simples {
  max-width: 34rem;
  margin: 12vh auto;
  padding: 0 1.25rem;
}
.aviso-simples h1 { font-size: 1.5rem; margin-bottom: 0.75rem; }
.aviso-simples p { margin-bottom: 0.75rem; line-height: 1.6; }