/* Extrato de operações: papel, tinta, fios de 1px e vermelho só para o que pede ação. */

/* Source Sans 3 (SIL Open Font License), servida localmente: algarismos tabulares de verdade. */
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-display: swap; src: url("fonts/source-sans-3-400.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-display: swap; src: url("fonts/source-sans-3-600.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 700; font-display: swap; src: url("fonts/source-sans-3-700.woff2") format("woff2"); }

:root {
  --papel: #fcfcfb;
  --papel-2: #f1f2f0;
  --tinta: #16191d;
  --tinta-2: #444b53;
  --tinta-3: #636b74;
  --fio: #d5d8db;
  --debito: #b3261e;
  --debito-fundo: #fbeceb;
  --selecao: #dfe4e8;

  --texto: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --dados: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  --t-1: 0.8125rem;
  --t-2: 0.875rem;
  --t-3: 1rem;
  --t-4: 1.2rem;
  --t-5: 1.75rem;

  --largura: 58rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel: #121417;
    --papel-2: #1a1d21;
    --tinta: #e9ebed;
    --tinta-2: #b7bdc4;
    --tinta-3: #959ca5;
    --fio: #2d3238;
    --debito: #ff8f86;
    --debito-fundo: #2b1816;
    --selecao: #34404b;
    color-scheme: dark;
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 var(--t-3)/1.5 var(--texto);
  font-variant-numeric: tabular-nums lining-nums;
  caret-color: var(--tinta);
  scrollbar-color: var(--fio) var(--papel);
}

::selection { background: var(--selecao); color: var(--tinta); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--tinta-3); }

:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

code, pre { font-family: var(--dados); font-size: 0.92em; }

h1, h2, h3 { margin: 0; text-wrap: balance; }

.folha { max-width: var(--largura); margin: 0 auto; padding: 0 16px; }

.pular {
  position: absolute; left: 16px; top: -3rem;
  background: var(--tinta); color: var(--papel); padding: 0.5rem 0.75rem;
}
.pular:focus { top: 0.5rem; }

.debito { color: var(--debito); }

/* --- topo -------------------------------------------------------------------------------- */

.topo { border-bottom: 1px solid var(--tinta); background: var(--papel); }

.topo-linha {
  display: flex; align-items: baseline; gap: 2rem;
  padding-top: 0.9rem; padding-bottom: 0.7rem;
}

.marca {
  font-weight: 700; font-size: var(--t-4); letter-spacing: -0.01em; text-decoration: none;
  display: inline-flex; align-items: baseline; gap: 0.5rem; margin: 0;
}
.marca span { font-weight: 400; font-size: var(--t-2); color: var(--tinta-3); letter-spacing: 0; }

.abas { display: flex; gap: 1.25rem; font-size: var(--t-2); }
.abas a { text-decoration: none; color: var(--tinta-2); padding: 0.25rem 0; border-bottom: 2px solid transparent; }
.abas a:hover { color: var(--tinta); }
.abas a[aria-current="page"] { color: var(--tinta); font-weight: 600; border-bottom-color: var(--tinta); }

.sair { margin-left: auto; }

.link {
  font: inherit; font-size: var(--t-2); color: var(--tinta-3); background: none; border: 0; padding: 0.25rem 0;
  cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em;
}
.link:hover { color: var(--tinta); }

/* --- cabeçalho de página e saldo ----------------------------------------------------------------- */

.cabecalho { padding: 2.25rem 0 1.5rem; border-bottom: 1px solid var(--fio); }

.cabecalho h1 { font-size: var(--t-5); line-height: 1.2; font-weight: 650; letter-spacing: -0.02em; max-width: 30ch; }

.saldo, .campos { margin: 1.25rem 0 0; padding: 0; max-width: 34rem; }

.saldo-linha, .campos > div {
  display: flex; align-items: baseline; gap: 0.5rem;
  padding: 0.3rem 0; font-size: var(--t-2);
}
.saldo dt, .campos dt { color: var(--tinta-2); flex: none; }
.saldo dd, .campos dd { margin: 0; font-weight: 600; text-align: right; flex: none; max-width: 65%; overflow-wrap: anywhere; }
.saldo-linha.debito dt, .saldo-linha.debito dd { color: var(--debito); }

.pontilhado {
  flex: 1 1 auto; min-width: 1.5rem;
  border-bottom: 1px dotted var(--tinta-3); transform: translateY(-0.3em);
}

.nota { color: var(--tinta-2); font-size: var(--t-2); margin: 0.75rem 0 0; max-width: 65ch; }

.trilha { font-size: var(--t-1); color: var(--tinta-3); margin: 1.25rem 0 -1.25rem; }
.trilha a { color: var(--tinta-2); }

/* --- blocos ---------------------------------------------------------------------------------- */

.bloco { padding: 2rem 0 0.5rem; }

.bloco > h2, .secao-comp > h2 {
  font-size: var(--t-1); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--tinta); margin-bottom: 0.25rem;
  display: flex; align-items: baseline; gap: 0.75rem;
}
.h-nota { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--tinta-3); }

.bloco-acao > h2 { color: var(--debito); border-bottom-color: var(--debito); }
.bloco-acao > p { margin: 0.75rem 0 0; max-width: 65ch; }

.vazio { color: var(--tinta-2); font-size: var(--t-2); padding: 1rem 0; margin: 0; max-width: 65ch; }
.vazio p { margin: 0 0 0.5rem; }

.mais { font-size: var(--t-2); margin: 0.75rem 0 0; }

/* --- pede ação ------------------------------------------------------------------------------- */

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

.pendencia {
  display: flex; gap: 1.5rem; align-items: center; justify-content: space-between;
  padding: 1rem 0.75rem; border-bottom: 1px solid var(--fio);
  background: var(--debito-fundo);
}
.pendencia + .pendencia { border-top: 0; }
.pendencia-corpo { min-width: 0; }
.pendencia p { margin: 0; }
.pendencia-titulo { font-weight: 600; }
.pendencia-titulo a { text-decoration: none; }
.pendencia-titulo a:hover { text-decoration: underline; }
.pendencia-meta { font-size: var(--t-1); color: var(--tinta-2); margin-top: 0.15rem !important; }
.pendencia-erro {
  font-family: var(--dados); font-size: var(--t-1); color: var(--debito); margin-top: 0.4rem !important;
  overflow-wrap: anywhere;
}

/* A ação fica isolada à direita, com espaço livre em volta. */
.acao-isolada { flex: none; margin: 0; padding-left: 1rem; }

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

.botao {
  font: 600 var(--t-2)/1 var(--texto);
  color: var(--tinta); background: transparent;
  border: 1px solid var(--tinta); border-radius: 2px;
  padding: 0.6rem 0.9rem; min-height: 2.5rem; cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.botao:hover { background: var(--papel-2); }
.botao:active { transform: translateY(1px); }
.botao:disabled { opacity: 0.45; cursor: not-allowed; }
.botao-forte { background: var(--tinta); color: var(--papel); }
.botao-forte:hover { background: var(--tinta-2); border-color: var(--tinta-2); }

.filtros { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: end; margin-top: 1.25rem; }
.filtros label { display: grid; gap: 0.25rem; font-size: var(--t-1); color: var(--tinta-2); }
.limpar { font-size: var(--t-2); color: var(--tinta-2); align-self: center; }

select, input {
  font: inherit; font-size: var(--t-2); color: var(--tinta); background: var(--papel);
  border: 1px solid var(--fio); border-bottom-color: var(--tinta-3); border-radius: 2px;
  padding: 0.5rem 0.6rem; min-height: 2.5rem; min-width: 10rem;
}
select:hover, input:hover { border-color: var(--tinta-3); }
input[aria-invalid="true"] { border-color: var(--debito); }

/* --- lançamentos --------------------------------------------------------------------------- */

.dia {
  font-size: var(--t-2); font-weight: 600; color: var(--tinta-2);
  padding: 1rem 0 0.35rem; border-bottom: 1px solid var(--fio);
}

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

.linha a {
  display: grid; align-items: baseline; gap: 0 0.75rem;
  grid-template-columns: 3.25rem minmax(0, auto) minmax(1.5rem, 1fr) auto;
  grid-template-areas: "hora titulo leader valor" ". evento evento evento";
  padding: 0.55rem 0; text-decoration: none;
  border-bottom: 1px solid var(--fio);
  transition: background-color 150ms ease-out;
}
.linha a:hover { background: var(--papel-2); }

.linha-hora { grid-area: hora; color: var(--tinta-3); font-size: var(--t-2); }
.linha-titulo { grid-area: titulo; display: flex; flex-wrap: wrap; gap: 0 0.5rem; font-size: var(--t-2); min-width: 0; }
.linha-cliente { font-weight: 600; }
.linha .pontilhado { grid-area: leader; min-width: 0; }
.linha-valor { grid-area: valor; font-size: var(--t-2); font-weight: 600; text-align: right; white-space: nowrap; }
.linha-evento { grid-area: evento; font-size: var(--t-1); color: var(--tinta-3); overflow-wrap: anywhere; }

.linha-falha .linha-valor, .linha-falha .linha-cliente { color: var(--debito); }
.linha-andamento .linha-valor { color: var(--tinta-2); font-weight: 400; font-style: italic; }
.linha-futuro .linha-valor { color: var(--tinta-3); font-weight: 400; }

.paginas {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  font-size: var(--t-2); padding: 1.25rem 0;
}
.paginas a:last-child { justify-self: end; }
.pagina-atual { color: var(--tinta-3); }

/* --- grade de clientes ------------------------------------------------------------------------ */

.grade {
  list-style: none; margin: 0.75rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 1px; padding: 1px;
}

/* Fio de 1px em volta de cada célula; células vazias no fim da grade ficam em branco. */
.celula { background: var(--papel); outline: 1px solid var(--fio); }
.celula a {
  display: grid; gap: 0.15rem; padding: 0.85rem 0.9rem 0.9rem; height: 100%;
  text-decoration: none; transition: background-color 150ms ease-out;
}
.celula a:hover { background: var(--papel-2); }
.celula-nome { font-weight: 600; }
.celula-slug { font-size: var(--t-1); color: var(--tinta-3); }
.celula-numeros { display: flex; flex-wrap: wrap; gap: 0 0.75rem; font-size: var(--t-2); margin-top: 0.4rem; }
.celula-meta { font-size: var(--t-1); color: var(--tinta-3); }
.celula-falha { background: var(--debito-fundo); }
.celula-falha .celula-nome { color: var(--debito); }

/* --- comprovante ------------------------------------------------------------------------------ */

.comprovante { max-width: 40rem; padding: 2.25rem 0 1rem; }

.comprovante-topo {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-bottom: 0.75rem; border-bottom: 1px solid var(--tinta);
}
.comprovante-topo h1 { font-size: var(--t-4); font-weight: 650; }
.comprovante-num { margin: 0; font-size: var(--t-4); font-weight: 600; color: var(--tinta-2); }

.campos { max-width: none; }
.valor-falha { color: var(--debito); }
.valor-andamento { font-style: italic; }

.secao-comp { margin-top: 1.75rem; }

.codigo {
  margin: 0.5rem 0 0; padding: 0.9rem 1rem; background: var(--papel-2);
  border: 1px solid var(--fio); overflow-x: auto; font-size: var(--t-1); line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.codigo-erro { color: var(--debito); background: var(--debito-fundo); border-color: transparent; }

.comprovante-acoes {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  margin-top: 2rem; padding-top: 1.25rem; border-top: 1px dashed var(--tinta-3);
}
.comprovante-acoes .nota { margin: 0; }

.aviso {
  margin: 1rem 0 0; padding: 0.75rem 1rem; background: var(--papel-2);
  border: 1px solid var(--fio); font-size: var(--t-2);
}

/* --- cliente ---------------------------------------------------------------------------------- */

.contratos { list-style: none; margin: 0; padding: 0; }
.contrato { border-bottom: 1px solid var(--fio); padding: 0.65rem 0; }
.contrato-linha { display: flex; align-items: baseline; gap: 0.5rem; font-size: var(--t-2); }
.contrato-nome { font-weight: 600; }
.contrato-off { color: var(--tinta-3); }
.contrato details { margin-top: 0.25rem; font-size: var(--t-1); color: var(--tinta-2); }
.contrato summary { cursor: pointer; width: fit-content; list-style: none; }
.contrato summary::-webkit-details-marker { display: none; }
.contrato summary::before {
  content: ""; display: inline-block; width: 0.4em; height: 0.4em; margin: 0 0.6em 0.15em 0.1em;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(-45deg);
  transition: transform 150ms ease-out;
}
.contrato details[open] summary::before { transform: rotate(45deg); }
.contrato summary:hover { color: var(--tinta); }

.etiquetas { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.etiquetas li { border: 1px solid var(--fio); padding: 0.2rem 0.5rem; font-size: var(--t-1); }

/* --- conversa --------------------------------------------------------------------------------- */

.transcricao { list-style: none; margin: 0.5rem 0 0; padding: 0; max-width: 44rem; }

.fala { padding: 0.75rem 0; border-bottom: 1px solid var(--fio); display: grid; grid-template-columns: 7.5rem 1fr; gap: 0 1rem; }
.fala p { margin: 0; white-space: pre-wrap; max-width: 65ch; }
.fala-quem { font-size: var(--t-1); font-weight: 600; color: var(--tinta-3); padding-top: 0.15rem; }
.fala-ia .fala-quem { color: var(--tinta-2); }
.fala-cliente p { font-weight: 500; }
.fala-evento { grid-template-columns: 1fr; }
.fala-evento p {
  max-width: none; font-size: var(--t-2); color: var(--debito); font-weight: 600;
  border-top: 1px solid var(--debito); border-bottom: 1px solid var(--debito); padding: 0.35rem 0;
}

/* --- rodapé e sinal do worker ----------------------------------------------------------------- */

.rodape {
  margin: 3rem 0 0; padding: 1rem 0 2rem; border-top: 1px solid var(--fio);
  font-size: var(--t-1); color: var(--tinta-3);
  display: flex; align-items: center; gap: 0.5rem;
}

.sinal { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none; position: relative; }
.sinal-vivo { background: var(--tinta); }
.sinal-parado { background: var(--debito); }

/* O único movimento do painel: o sinal do worker pulsa enquanto ele está vivo. */
@media (prefers-reduced-motion: no-preference) {
  .sinal-vivo::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    border: 1px solid var(--tinta);
    animation: pulso 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  }
}
@keyframes pulso {
  from { transform: scale(1); opacity: 0.7; }
  to { transform: scale(3); opacity: 0; }
}

/* --- entrar ------------------------------------------------------------------------------------ */

.tela-entrar { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.entrar { width: 100%; max-width: 22rem; border-top: 1px solid var(--tinta); padding-top: 1rem; }
.entrar h1 { font-size: var(--t-5); font-weight: 650; letter-spacing: -0.02em; margin: 1.5rem 0 1rem; }
.formulario { display: grid; gap: 0.5rem; }
.formulario label { font-size: var(--t-2); color: var(--tinta-2); }
.formulario input { width: 100%; }
.formulario .botao { margin-top: 0.75rem; }
.erro-campo { color: var(--debito); font-size: var(--t-2); margin: 0; }

/* --- celular ---------------------------------------------------------------------------------- */

@media (max-width: 40rem) {
  .topo-linha { flex-wrap: wrap; gap: 0.5rem 1.25rem; }
  .marca span { display: none; }
  .abas { order: 3; width: 100%; gap: 1.5rem; }
  .abas a { padding: 0.5rem 0; }

  .cabecalho { padding-top: 1.5rem; }
  .cabecalho h1 { font-size: 1.5rem; }

  .linha a {
    grid-template-columns: 3rem minmax(1.5rem, 1fr) auto;
    grid-template-areas: "hora titulo titulo" ". leader valor" ". evento evento";
  }

  .contrato-linha { flex-wrap: wrap; }
  .contrato-nome { flex-basis: 100%; }
  .contrato-linha > span:last-child { white-space: nowrap; }

  .pendencia { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .acao-isolada { padding-left: 0; }
  .acao-isolada .botao { width: 100%; }

  .comprovante-acoes { flex-direction: column; align-items: stretch; }
  .comprovante-acoes .botao { width: 100%; }

  .fala { grid-template-columns: 1fr; gap: 0.15rem; }

  select, input { min-width: 0; width: 100%; }
  .filtros label { flex: 1 1 9rem; }
}