/* Tema do painel: claro, clean, futurista.
 *
 * Regras aplicadas do guia de UI: contraste minimo 4.5:1 no texto, foco visivel
 * de 2px, escala de espacamento de 4 e 8, numeros tabulares nas colunas de dado,
 * animacao entre 150 e 300ms so em transform e opacity, `prefers-reduced-motion`
 * respeitado, tokens semanticos de cor em vez de hex espalhado.
 *
 * Sem fonte externa e sem CDN: a pilha de fontes e a do sistema (AD-003).
 */

:root {
  /* Superficies */
  --fundo: #f5f7fb;
  --superficie: #ffffff;
  --superficie-suave: #fafbfd;
  --linha: #e4e8f0;
  --linha-forte: #d2d8e4;

  /* Texto. Todos os pares abaixo passam de 4.5:1 sobre a superficie branca. */
  --texto: #0f172a;
  --texto-medio: #4a5468;
  --texto-fraco: #6b7488;

  /* Um unico acento, como acordado. O tom forte carrega texto branco a 8:1;
   * o brilhante e decorativo, nunca suporte de texto. */
  --acento: #4338ca;
  --acento-escuro: #362da8;
  --acento-brilho: #6366f1;
  --acento-lavado: #eef0fe;

  /* Estados. Cor nunca e o unico sinal: o rotulo textual sempre acompanha. */
  --ok: #0f766e;
  --ok-lavado: #e6f4f1;
  --alerta: #92400e;
  --alerta-lavado: #fdf3e3;
  --falha: #b42318;
  --falha-lavado: #fdeceb;

  /* Espacamento em passos de 4 e 8 */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e6: 1.5rem;
  --e8: 2rem;
  --e12: 3rem;

  --raio: 14px;
  --raio-pequeno: 9px;

  --sombra:
    0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.12);
  --sombra-alta:
    0 2px 4px rgba(15, 23, 42, 0.05), 0 18px 40px -18px rgba(67, 56, 202, 0.28);

  --transicao: 180ms cubic-bezier(0.2, 0, 0.2, 1);

  --fonte:
    "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Inter",
    "Helvetica Neue", Arial, sans-serif;
  --fonte-numero:
    "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --fonte-mono: "Cascadia Mono", Consolas, "SF Mono", ui-monospace, monospace;
}

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

[hidden] {
  display: none !important;
}

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.5;
  padding: var(--e8) var(--e6) var(--e12);
}

/* O gradiente de fundo e o unico elemento decorativo. Fica atras de tudo e nao
 * compete com os numeros. */
.aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      58rem 30rem at 12% -8%,
      rgba(99, 102, 241, 0.14),
      transparent 60%
    ),
    radial-gradient(
      46rem 26rem at 92% 4%,
      rgba(14, 165, 233, 0.1),
      transparent 62%
    );
}

.cabecalho,
main {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
}

/* ---------------------------------------------------------------- cabecalho */

.cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e4);
  padding-bottom: var(--e6);
}

.marca {
  display: flex;
  align-items: center;
  gap: var(--e3);
}

.marca-selo {
  width: 104px;
  height: 104px;
  flex: none;
  object-fit: contain;
}

.cabecalho h1 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.marca-sub {
  margin: 2px 0 0;
  font-size: 0.8125rem;
  color: var(--texto-fraco);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.fonte {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--texto-fraco);
}

.fonte a {
  color: var(--acento);
  text-decoration: none;
  border-bottom: 1px solid var(--acento-lavado);
}

.fonte a:hover {
  border-bottom-color: currentColor;
}

/* ------------------------------------------------------------------ cartoes */

.painel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--e4);
  margin-bottom: var(--e4);
}

.cartao {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: var(--e4) var(--e6) var(--e6);
}

/* O cartao do cursor e o dado que a pessoa vem conferir. Ganha o acento. */
.cartao.destaque {
  position: relative;
  overflow: hidden;
  border-color: #cdd2f7;
  box-shadow: var(--sombra-alta);
}

.cartao.destaque::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--acento),
    var(--acento-brilho),
    transparent
  );
}

.rotulo {
  margin: 0 0 var(--e2);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.numero {
  margin: 0;
  font-family: var(--fonte-numero);
  font-size: 2.4rem;
  font-weight: 640;
  line-height: 1.1;
  letter-spacing: -0.02em;
  /* Coluna de dado: figuras de largura fixa evitam o numero pular a cada poll. */
  font-variant-numeric: tabular-nums;
}

.numero.pequeno {
  font-size: 1.375rem;
  letter-spacing: -0.01em;
}

.apoio {
  margin: var(--e2) 0 0;
  font-size: 0.8125rem;
  color: var(--texto-medio);
}

/* ----------------------------------------------------------------- controle */

.controle {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--e4);
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: var(--e4) var(--e6);
  margin-bottom: var(--e4);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}

.campo label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--texto-medio);
}

.campo input,
.campo select {
  width: 8.5rem;
  padding: var(--e3) var(--e3);
  font-family: var(--fonte-mono);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
  background: var(--superficie-suave);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-pequeno);
  transition:
    border-color var(--transicao),
    box-shadow var(--transicao);
}

/* O seletor de periodicidade tem rotulos mais longos que o campo numerico. */
.campo select {
  width: auto;
  min-width: 10rem;
  font-family: inherit;
}

.campo input:hover,
.campo select:hover {
  border-color: #b9c1d2;
}

.campo input:focus,
.campo select:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-lavado);
  outline: none;
}

.acoes {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: var(--e2);
}

/* So o bloco de agendamento: os botoes ficam menores que o padrao de 44px,
 * porque aqui sao acoes secundarias apoiando varios campos, nao o unico CTA
 * da secao (ao contrario de Baixar Excel, que fica no tamanho padrao). */
.controle-agendamento .acoes .botao {
  min-height: 34px;
  padding: 0 var(--e4);
  font-size: 0.8125rem;
}

.botao {
  /* 44px de altura minima: alvo de toque e conforto de clique. */
  min-height: 44px;
  padding: 0 var(--e6);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: var(--raio-pequeno);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--transicao),
    border-color var(--transicao),
    color var(--transicao),
    transform var(--transicao),
    box-shadow var(--transicao);
}

.botao:active:not(:disabled) {
  /* Escala sutil no toque, sem mexer no espaco que o botao ocupa. */
  transform: scale(0.985);
}

.botao.primario {
  background: var(--acento);
  color: #ffffff;
  box-shadow: 0 8px 20px -12px rgba(67, 56, 202, 0.85);
}

.botao.primario:hover:not(:disabled) {
  background: var(--acento-escuro);
}

.botao.neutro {
  background: var(--superficie-suave);
  border-color: var(--linha-forte);
  color: var(--texto-medio);
}

.botao.neutro:hover:not(:disabled) {
  background: #f1f3f8;
  color: var(--texto);
}

.botao.contorno {
  background: transparent;
  border-color: var(--linha-forte);
  color: var(--acento);
}

.botao.contorno:hover:not(:disabled) {
  border-color: var(--acento);
  background: var(--acento-lavado);
}

.botao:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* Anel de foco visivel em todo controle, com folga para nao encostar na borda.
 * Cobre tambem o seletor de periodicidade e o botao de desligar agendamento,
 * que reutilizam as classes `.campo select` e `.botao`. */
.botao:focus-visible,
.campo input:focus-visible,
.campo select:focus-visible,
.link-lote:focus-visible,
.fonte a:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

/* ------------------------------------------------------- controle-agendamento */

/* HOR-10: o bloco Agendamento reusa a moldura de `.controle` (mesmos campos,
 * mesmos botoes), mas leva o acento lavado que a faixa do ciclo 2 usava, para
 * se distinguir do bloco Rodar agora sem introduzir uma segunda cor de
 * acento -- o mesmo raciocinio de antes, so que agora no bloco inteiro, com
 * campos editaveis, em vez de numa faixa so de leitura. */
.controle-agendamento {
  background: var(--acento-lavado);
  border-color: #cdd2f7;
}

/* O rodape (texto de estado + botoes) ocupa a largura toda, numa linha
 * propria abaixo dos campos: `flex: 1 0 100%` forca a quebra dentro do
 * `.controle` que já é `display: flex; flex-wrap: wrap`. Dentro dele, texto
 * e botoes dividem a mesma linha -- o texto cresce e empurra os botoes para
 * a direita. */
.agendamento-rodape {
  flex: 1 0 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
}

.controle-agendamento .agendamento-estado {
  flex: 1 1 auto;
  margin: 0;
  color: var(--texto);
  font-size: 0.9375rem;
}

.controle-agendamento .agendamento-estado strong {
  color: var(--acento-escuro);
}

/* ---------------------------------------------- cartao-automatica (ORI-03/04) */

/* O cartao vazio (nenhuma automatica ainda) fica com o mesmo tom apagado do
 * `.vazio` do historico, para nao competir visualmente com os cartoes que tem
 * dado de verdade. Preenchido, a cor do detalhe segue o mesmo tom que a
 * mensagem do lote usaria para o mesmo status -- ok, alerta ou falha --
 * fixado em `data-tom` pelo JS (T24), nunca uma cor nova. */
.cartao-automatica.vazio .numero,
.cartao-automatica.vazio .apoio {
  color: var(--texto-fraco);
}

.cartao-automatica[data-tom="ok"] .apoio {
  color: var(--ok);
}

.cartao-automatica[data-tom="alerta"] .apoio {
  color: var(--alerta);
}

.cartao-automatica[data-tom="falha"] .apoio {
  color: var(--falha);
}

/* ---------------------------------------------------------------- progresso */

.progresso {
  display: grid;
  gap: var(--e3);
  background: var(--superficie);
  border: 1px solid #cdd2f7;
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: var(--e4) var(--e6);
  margin-bottom: var(--e4);
}

.progresso-cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
  font-size: 0.9375rem;
  font-weight: 600;
}

.mono {
  font-family: var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  color: var(--texto-medio);
  font-weight: 500;
}

.barra {
  height: 6px;
  border-radius: 999px;
  background: #e8ebf4;
  overflow: hidden;
}

.barra-preenchida {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--acento), var(--acento-brilho));
  /* Largura anima por transform-origin em scaleX seria melhor, mas a barra e
   * um retangulo solido sem conteudo: animar width aqui nao reflui nada em
   * volta e mantem o codigo simples. */
  transition: width 220ms cubic-bezier(0.2, 0, 0.2, 1);
}

.parciais {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e6);
  margin: 0;
}

.parciais div {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
}

.parciais dt {
  font-size: 0.8125rem;
  color: var(--texto-fraco);
}

.parciais dd {
  margin: 0;
  font-family: var(--fonte-mono);
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------- mensagem */

.mensagem {
  margin: 0 0 var(--e4);
  padding: var(--e3) var(--e4);
  border-radius: var(--raio-pequeno);
  border: 1px solid var(--linha);
  background: var(--superficie);
  font-size: 0.9375rem;
  color: var(--texto);
}

.mensagem.ok {
  border-color: #b9ded7;
  background: var(--ok-lavado);
  color: var(--ok);
}

.mensagem.alerta {
  border-color: #ecd5ae;
  background: var(--alerta-lavado);
  color: var(--alerta);
}

.mensagem.falha {
  border-color: #f2c4c0;
  background: var(--falha-lavado);
  color: var(--falha);
}

/* HOS-04: mesmo tom de alerta da mensagem, porque base vazia por disco
 * perdido merece a mesma atencao que um portal fora do ar. */
.aviso-base-vazia {
  margin: 0 0 var(--e4);
  padding: var(--e3) var(--e4);
  border-radius: var(--raio-pequeno);
  border: 1px solid #ecd5ae;
  background: var(--alerta-lavado);
  color: var(--alerta);
  font-size: 0.9375rem;
}

.aviso-base-vazia span {
  font-family: var(--fonte-mono);
  font-weight: 600;
}

/* ---------------------------------------------------------------- historico */

.historico {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.historico-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e2);
  padding: var(--e4) var(--e6);
  border-bottom: 1px solid var(--linha);
}

.historico-cabeca h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
}

.historico-cabeca .apoio {
  margin: 0;
  font-size: 0.8125rem;
}

/* Tabela larga rola dentro do proprio quadro: a pagina nunca rola na horizontal. */
.tabela-rolagem {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

thead th {
  position: sticky;
  top: 0;
  background: var(--superficie-suave);
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
}

tbody td {
  padding: var(--e3) var(--e4);
  /* Linha de grade discreta, para nao competir com o dado. */
  border-bottom: 1px solid #eef1f6;
  vertical-align: middle;
  white-space: nowrap;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover {
  background: #fafbfe;
}

/* CUR-05: a linha de mudanca de cursor convive com a de lote no mesmo
 * historico, mas nao pode se confundir com ela. A distincao nao depende so
 * de cor: o italico e a borda a esquerda sao pistas de forma, que sobrevivem
 * a daltonismo e a impressao em preto e branco. */
tbody tr.linha-cursor td {
  font-style: italic;
  background: var(--superficie-suave);
}

tbody tr.linha-cursor td:first-child {
  border-left: 3px solid var(--acento);
}

td.tipo {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

tbody tr.linha-cursor td.tipo {
  color: var(--acento-escuro);
}

th.num,
td.num {
  text-align: right;
  font-family: var(--fonte-mono);
  font-variant-numeric: tabular-nums;
}

td.faixa {
  font-family: var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  color: var(--texto-medio);
}

td.zero {
  color: var(--texto-fraco);
}

/* Selo de status: a cor reforca, o texto e que informa. */
.selo {
  display: inline-block;
  padding: 2px var(--e3);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid;
}

.selo.concluido {
  color: var(--ok);
  background: var(--ok-lavado);
  border-color: #b9ded7;
}

.selo.fim_da_faixa,
.selo.interrompido {
  color: var(--alerta);
  background: var(--alerta-lavado);
  border-color: #ecd5ae;
}

.selo.abortado {
  color: var(--falha);
  background: var(--falha-lavado);
  border-color: #f2c4c0;
}

.selo.em_execucao {
  color: var(--acento);
  background: var(--acento-lavado);
  border-color: #cdd2f7;
}

.link-lote {
  background: none;
  border: none;
  padding: var(--e1) var(--e2);
  font: inherit;
  font-size: 0.8125rem;
  color: var(--acento);
  cursor: pointer;
  border-radius: 6px;
}

.link-lote:hover {
  background: var(--acento-lavado);
  text-decoration: underline;
}

.vazio {
  margin: 0;
  padding: var(--e8) var(--e6);
  text-align: center;
  color: var(--texto-medio);
  font-size: 0.9375rem;
}

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

/* --------------------------------------------------------------- responsivo */

@media (max-width: 720px) {
  body {
    padding: var(--e6) var(--e4) var(--e8);
  }

  .acoes {
    margin-left: 0;
    width: 100%;
  }

  .acoes .botao {
    flex: 1 1 auto;
  }

  .numero {
    font-size: 2rem;
  }
}

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