/*
 * Katu Fiscal: painel.
 *
 * Tema escuro como padrão, claro disponível. Celular primeiro.
 *
 * As cores de situação não são decoração, são leitura: num painel fiscal a pessoa precisa
 * distinguir autorizado de rejeitado de incerto no canto do olho, e "incerto" precisa parecer
 * diferente de "deu errado", porque as duas coisas pedem ações opostas.
 *
 * O ambiente (homologação ou produção) aparece sempre, em todo lugar. É a informação que mais
 * muda a consequência de um clique.
 */

:root {
  --fundo: #0e1319;
  --superficie: #161d26;
  --superficie-2: #1d2631;
  --superficie-3: #26313e;
  --borda: #2b3745;
  --borda-forte: #3a4857;

  --texto: #e4ebf2;
  --texto-medio: #a3b1c2;
  --texto-suave: #6e7f92;

  --acento: #4a8fe7;
  --acento-fundo: rgba(74, 143, 231, 0.12);
  --acento-borda: rgba(74, 143, 231, 0.35);

  --ok: #2fb67c;
  --ok-fundo: rgba(47, 182, 124, 0.12);
  --alerta: #d99a3a;
  --alerta-fundo: rgba(217, 154, 58, 0.13);
  --erro: #e05c5c;
  --erro-fundo: rgba(224, 92, 92, 0.12);
  --neutro: #7b8796;
  --neutro-fundo: rgba(123, 135, 150, 0.12);

  --raio: 10px;
  --raio-p: 6px;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.18);

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Consolas, monospace;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --lateral: 230px;
}

:root[data-tema="claro"] {
  --fundo: #f4f6f9;
  --superficie: #ffffff;
  --superficie-2: #f7f9fb;
  --superficie-3: #eef1f5;
  --borda: #dde3ea;
  --borda-forte: #c6d0da;

  --texto: #16202c;
  --texto-medio: #4a5867;
  --texto-suave: #73818f;

  --acento: #2570cf;
  --acento-fundo: rgba(37, 112, 207, 0.08);
  --acento-borda: rgba(37, 112, 207, 0.28);

  --ok: #1a8f5f;
  --ok-fundo: rgba(26, 143, 95, 0.09);
  --alerta: #b1761c;
  --alerta-fundo: rgba(177, 118, 28, 0.1);
  --erro: #c73d3d;
  --erro-fundo: rgba(199, 61, 61, 0.09);
  --neutro: #66737f;
  --neutro-fundo: rgba(102, 115, 127, 0.1);

  --sombra: 0 1px 2px rgba(16, 32, 48, 0.06), 0 4px 12px rgba(16, 32, 48, 0.05);
}

* { box-sizing: border-box; }

/*
 * Tamanho padrão para todo ícone.
 *
 * SVG sem largura definida ocupa o espaço que houver, e num cartão largo isso vira um ícone de
 * 400px. A regra geral abaixo evita que cada contexto novo precise lembrar de limitar.
 */
svg { width: 16px; height: 16px; flex: none; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ==================== estrutura ==================== */

.app { display: flex; min-height: 100vh; }

.lateral {
  width: var(--lateral);
  flex: 0 0 var(--lateral);
  background: var(--superficie);
  border-right: 1px solid var(--borda);
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  transition: transform 0.2s ease;
}

.marca {
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--borda);
}
.marca .nome {
  font-size: 15px; font-weight: 650; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 9px;
}
.marca .selo {
  width: 26px; height: 26px; border-radius: 7px;
  background: linear-gradient(140deg, var(--acento), #2f5fa8);
  display: grid; place-items: center;
  color: #fff; font-size: 12px; font-weight: 700; flex: none;
}
.marca .sub { font-size: 11.5px; color: var(--texto-suave); margin-top: 3px; padding-left: 35px; }

.menu { padding: 10px 10px; flex: 1; overflow-y: auto; }
.menu .grupo {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--texto-suave); padding: 12px 10px 5px; font-weight: 600;
}
.menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--raio-p);
  color: var(--texto-medio); font-size: 14px; text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.menu a:hover { background: var(--superficie-2); color: var(--texto); text-decoration: none; }
.menu a.ativo { background: var(--acento-fundo); color: var(--acento); font-weight: 550; }
.menu a svg { width: 16px; height: 16px; flex: none; opacity: 0.85; }
.menu a .conta {
  margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums;
  background: var(--superficie-3); color: var(--texto-medio);
  padding: 1px 6px; border-radius: 20px;
}

.rodape-lateral { padding: 12px; border-top: 1px solid var(--borda); }
.usuario { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.usuario .inicial {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--superficie-3); color: var(--texto-medio);
  display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none;
}
.usuario .dados { min-width: 0; flex: 1; }
.usuario .dados strong { display: block; font-weight: 550; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario .dados span { color: var(--texto-suave); font-size: 11.5px; }

.conteudo {
  flex: 1; min-width: 0;
  margin-left: var(--lateral);
  display: flex; flex-direction: column;
}

.topo {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--fundo) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borda);
  padding: 13px 22px;
  display: flex; align-items: center; gap: 14px;
}
.topo h1 { margin: 0; font-size: 17px; font-weight: 620; letter-spacing: -0.015em; }
.topo .caminho { color: var(--texto-suave); font-size: 13px; }
.topo .direita { margin-left: auto; display: flex; align-items: center; gap: 9px; }

main { padding: 22px; flex: 1; max-width: 1400px; width: 100%; }

.abridor { display: none; }

/* ==================== ambiente ==================== */

/*
 * Homologação e produção têm consequências completamente diferentes. O selo fica sempre visível
 * e produção usa a cor de alerta de propósito: é para dar um segundo de pausa antes do clique.
 */
.ambiente {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
  padding: 4px 10px; border-radius: 20px; text-transform: uppercase;
}
.ambiente::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ambiente.homologacao { background: var(--acento-fundo); color: var(--acento); }
.ambiente.producao { background: var(--alerta-fundo); color: var(--alerta); }

/* ==================== cartões ==================== */

.grade { display: grid; gap: 14px; }
.grade.c2 { grid-template-columns: repeat(2, 1fr); }
.grade.c3 { grid-template-columns: repeat(3, 1fr); }
.grade.c4 { grid-template-columns: repeat(4, 1fr); }
.grade.principal { grid-template-columns: 2fr 1fr; align-items: start; }

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
}
.cartao > header {
  padding: 13px 16px; border-bottom: 1px solid var(--borda);
  display: flex; align-items: center; gap: 10px;
}
.cartao > header > svg { width: 17px; height: 17px; color: var(--texto-suave); }
.cartao > header h2 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -0.005em; }
.cartao > header .acao { margin-left: auto; font-size: 13px; }
.cartao .corpo { padding: 16px; }
.cartao .corpo.sem-pad { padding: 0; }

/* indicador numérico */
.indicador { padding: 15px 16px; }
.indicador .rotulo {
  font-size: 12px; color: var(--texto-suave); font-weight: 550;
  display: flex; align-items: center; gap: 6px;
}
.indicador .valor {
  font-size: 27px; font-weight: 640; letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums; margin-top: 5px; line-height: 1.1;
}
.indicador .nota { font-size: 12px; color: var(--texto-suave); margin-top: 3px; }
.indicador.ok .valor { color: var(--ok); }
.indicador.erro .valor { color: var(--erro); }
.indicador.alerta .valor { color: var(--alerta); }

/* ==================== situação ==================== */

.situacao {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 570; padding: 3px 9px; border-radius: 20px;
  white-space: nowrap;
}
.situacao::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.situacao.autorizado { background: var(--ok-fundo); color: var(--ok); }
.situacao.cancelado { background: var(--neutro-fundo); color: var(--neutro); }
.situacao.rejeitado, .situacao.denegado, .situacao.erro { background: var(--erro-fundo); color: var(--erro); }
.situacao.desconhecido, .situacao.processando, .situacao.transmitindo,
.situacao.cancelamento_pendente, .situacao.contingencia {
  background: var(--alerta-fundo); color: var(--alerta);
}
.situacao.rascunho, .situacao.numero_reservado, .situacao.xml_gerado,
.situacao.xml_validado, .situacao.assinado, .situacao.inutilizado {
  background: var(--neutro-fundo); color: var(--neutro);
}

/* ==================== tabela ==================== */

.tabela-envolve { overflow-x: auto; }
table.dados { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.dados th {
  text-align: left; font-weight: 570; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--texto-suave);
  padding: 9px 14px; border-bottom: 1px solid var(--borda); white-space: nowrap;
  background: var(--superficie-2);
}
table.dados td {
  padding: 11px 14px; border-bottom: 1px solid var(--borda); vertical-align: middle;
}
table.dados tbody tr:last-child td { border-bottom: 0; }
table.dados tbody tr { transition: background 0.1s; }
table.dados tbody tr:hover { background: var(--superficie-2); }
table.dados td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.dados td.mono, .mono { font-family: var(--mono); font-size: 12.5px; }

.chave {
  font-family: var(--mono); font-size: 12px; letter-spacing: -0.01em;
  color: var(--texto-medio); word-break: break-all;
}

/* ==================== formulários e botões ==================== */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--raio-p);
  border: 1px solid var(--borda-forte); background: var(--superficie-2);
  color: var(--texto); font-size: 13.5px; font-weight: 550; font-family: inherit;
  cursor: pointer; text-decoration: none; transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.botao:hover { background: var(--superficie-3); text-decoration: none; }
.botao.primario { background: var(--acento); border-color: var(--acento); color: #fff; }
.botao.primario:hover { filter: brightness(1.08); }
.botao.perigo { color: var(--erro); border-color: var(--erro); background: transparent; }
.botao.perigo:hover { background: var(--erro-fundo); }
.botao.p { padding: 5px 10px; font-size: 12.5px; }
.botao[disabled] { opacity: 0.45; cursor: not-allowed; }
.botao svg { width: 15px; height: 15px; }

.campo { margin-bottom: 14px; }
.campo label {
  display: block; font-size: 12.5px; font-weight: 550;
  color: var(--texto-medio); margin-bottom: 5px;
}
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 9px 11px;
  background: var(--superficie-2); border: 1px solid var(--borda-forte);
  border-radius: var(--raio-p); color: var(--texto);
  font-family: inherit; font-size: 14px;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-fundo);
}
.campo .dica { font-size: 12px; color: var(--texto-suave); margin-top: 5px; }
.campo textarea { resize: vertical; min-height: 80px; }

.filtros {
  display: flex; gap: 9px; flex-wrap: wrap; align-items: flex-end;
  padding: 13px 16px; border-bottom: 1px solid var(--borda); background: var(--superficie-2);
}
.filtros .campo { margin: 0; min-width: 140px; }
.filtros .campo.busca { flex: 1; min-width: 190px; }

/* ==================== avisos ==================== */

.aviso {
  display: flex; gap: 11px; padding: 12px 14px;
  border-radius: var(--raio); border: 1px solid var(--borda);
  background: var(--superficie-2); font-size: 13.5px; margin-bottom: 14px;
  align-items: flex-start;
}
.aviso svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.aviso strong { display: block; margin-bottom: 2px; }
.aviso p { margin: 0; color: var(--texto-medio); }
.aviso.ok { border-color: var(--ok); background: var(--ok-fundo); }
.aviso.ok svg { color: var(--ok); }
.aviso.alerta { border-color: var(--alerta); background: var(--alerta-fundo); }
.aviso.alerta svg { color: var(--alerta); }
.aviso.erro { border-color: var(--erro); background: var(--erro-fundo); }
.aviso.erro svg { color: var(--erro); }

/* ==================== checklist ==================== */

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--borda); font-size: 13.5px;
}
.checklist li:last-child { border-bottom: 0; }
.checklist .marca-item {
  width: 18px; height: 18px; border-radius: 50%; flex: none; margin-top: 1px;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
}
.checklist .marca-item.sim { background: var(--ok-fundo); color: var(--ok); }
.checklist .marca-item.nao { background: var(--erro-fundo); color: var(--erro); }
.checklist .texto { flex: 1; min-width: 0; }
.checklist .texto strong { font-weight: 550; display: block; }
.checklist .texto span { color: var(--texto-suave); font-size: 12.5px; }

/* ==================== linha do tempo ==================== */

.tempo { list-style: none; margin: 0; padding: 4px 0; }
.tempo li {
  position: relative; padding: 0 16px 16px 40px; font-size: 13.5px;
}
.tempo li::before {
  content: ""; position: absolute; left: 20px; top: 5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--superficie-3); border: 2px solid var(--borda-forte);
}
.tempo li::after {
  content: ""; position: absolute; left: 24px; top: 16px; bottom: 0;
  width: 1px; background: var(--borda);
}
.tempo li:last-child { padding-bottom: 4px; }
.tempo li:last-child::after { display: none; }
.tempo li.ok::before { background: var(--ok); border-color: var(--ok); }
.tempo li.erro::before { background: var(--erro); border-color: var(--erro); }
.tempo li.alerta::before { background: var(--alerta); border-color: var(--alerta); }
.tempo .quando { color: var(--texto-suave); font-size: 12px; font-variant-numeric: tabular-nums; }
.tempo .texto { font-weight: 500; }
.tempo .detalhe { color: var(--texto-medio); font-size: 12.5px; margin-top: 2px; }

/* ==================== pares rótulo e valor ==================== */

.pares { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 15px; }
.par .rotulo { font-size: 11.5px; color: var(--texto-suave); font-weight: 550;
  text-transform: uppercase; letter-spacing: 0.04em; }
.par .valor { font-size: 14px; margin-top: 3px; word-break: break-word; }
.par .valor.mono { font-size: 13px; }

/* ==================== estado vazio ==================== */

.vazio { padding: 44px 20px; text-align: center; color: var(--texto-suave); }
.vazio svg { width: 34px !important; height: 34px !important; opacity: 0.35; margin-bottom: 11px; }
.vazio p { margin: 0; font-size: 14px; }
.vazio .sub { font-size: 13px; margin-top: 5px; color: var(--texto-suave); opacity: 0.8; }

/* ==================== carregando ==================== */

.esqueleto {
  background: linear-gradient(90deg, var(--superficie-2) 25%, var(--superficie-3) 50%, var(--superficie-2) 75%);
  background-size: 200% 100%;
  animation: brilho 1.4s ease-in-out infinite;
  border-radius: var(--raio-p);
  height: 14px;
}
@keyframes brilho { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.girando { animation: girar 0.9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ==================== paginação ==================== */

.paginacao {
  display: flex; align-items: center; gap: 9px; justify-content: space-between;
  padding: 12px 16px; border-top: 1px solid var(--borda); font-size: 13px;
  color: var(--texto-suave); flex-wrap: wrap;
}
.paginacao .botoes { display: flex; gap: 7px; }

/* ==================== entrada ==================== */

.entrada {
  min-height: 100vh; display: grid; place-items: center; padding: 22px;
  background:
    radial-gradient(1000px 500px at 50% -10%, var(--acento-fundo), transparent 65%),
    var(--fundo);
}
.entrada .caixa { width: 100%; max-width: 372px; }
.entrada .marca-grande { text-align: center; margin-bottom: 24px; }
.entrada .marca-grande .selo {
  width: 46px; height: 46px; border-radius: 13px; margin: 0 auto 13px;
  background: linear-gradient(140deg, var(--acento), #2f5fa8);
  display: grid; place-items: center; color: #fff; font-size: 19px; font-weight: 700;
  box-shadow: var(--sombra);
}
.entrada .marca-grande h1 { margin: 0; font-size: 21px; font-weight: 650; letter-spacing: -0.02em; }
.entrada .marca-grande p { margin: 5px 0 0; color: var(--texto-suave); font-size: 13.5px; }
.entrada .cartao { box-shadow: var(--sombra); }
.entrada .rodape { text-align: center; margin-top: 18px; font-size: 12.5px; color: var(--texto-suave); }

/* ==================== celular ==================== */

@media (max-width: 1100px) {
  .grade.c4 { grid-template-columns: repeat(2, 1fr); }
  .grade.principal { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .lateral { transform: translateX(-100%); box-shadow: var(--sombra); }
  .lateral.aberta { transform: translateX(0); }
  .conteudo { margin-left: 0; }
  .abridor { display: inline-grid; place-items: center; width: 34px; height: 34px;
    border-radius: var(--raio-p); border: 1px solid var(--borda-forte);
    background: var(--superficie); color: var(--texto); cursor: pointer; }
  .abridor svg { width: 17px; height: 17px; }
  .cortina { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 35; }
  main { padding: 15px; }
  .topo { padding: 11px 15px; }
  .topo h1 { font-size: 15.5px; }
  .grade.c3, .grade.c4 { grid-template-columns: repeat(2, 1fr); }
  .indicador .valor { font-size: 22px; }
}

@media (max-width: 520px) {
  .grade.c2, .grade.c3, .grade.c4 { grid-template-columns: 1fr; }
  .topo .caminho { display: none; }
  .filtros .campo { min-width: 100%; }
}

/* Em telas estreitas a tabela vira lista, para não exigir rolagem lateral no caixa. */
@media (max-width: 680px) {
  table.dados.responsiva thead { display: none; }
  table.dados.responsiva, table.dados.responsiva tbody,
  table.dados.responsiva tr, table.dados.responsiva td { display: block; width: 100%; }
  table.dados.responsiva tr {
    border-bottom: 1px solid var(--borda); padding: 11px 14px;
  }
  table.dados.responsiva td { border: 0; padding: 2px 0; }
  table.dados.responsiva td::before {
    content: attr(data-rotulo); display: inline-block; min-width: 92px;
    font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--texto-suave); font-weight: 550;
  }
  table.dados.responsiva td.num { text-align: left; }
}

@media print {
  .lateral, .topo, .abridor, .filtros, .paginacao { display: none !important; }
  .conteudo { margin-left: 0; }
  .cartao { break-inside: avoid; border-color: #ccc; }
}