/* Painel de Operação (P21) — PoC Prefeitura de Araxá (PEC e-SUS APS).
 *
 * Mesma linguagem visual dos painéis do BI (bi/frontend/src/styles):
 * tokens idênticos (Carbon-like, IBM Plex, raio 0, profundidade por camada),
 * extraídos como custom properties. Sem framework, sem build. */

/* ---------- Tokens (espelho de bi/frontend/src/styles/tokens.css) ---------- */

:root {
  /* Color — superfícies e texto */
  --cor-fundo: #ffffff;
  --cor-superficie: #f4f4f4;
  --cor-superficie-hover: #e8e8e8;
  --cor-invertida: #161616;
  --cor-invertida-hover: #262626;
  --cor-texto: #161616;
  --cor-texto-secundario: #525252;
  --cor-texto-terciario: #6f6f6f;
  --cor-texto-invertido: #f4f4f4;
  --cor-texto-invertido-sec: #c6c6c6;
  --cor-borda: #c6c6c6;
  --cor-borda-sutil: #e0e0e0;

  /* Color — interação */
  --cor-interacao: #0f62fe;
  --cor-interacao-hover: #0353e9;
  --cor-interacao-ativo: #002d9c;
  --cor-interacao-tinta: #edf5ff;

  /* Color — status */
  --cor-erro: #da1e28;
  --cor-sucesso: #15803d;
  --cor-atencao: #c2410c;

  /* Typography */
  --fonte-sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --fonte-mono: 'IBM Plex Mono', Menlo, Courier, monospace;

  --tipo-display: 300 2.625rem/1.19 var(--fonte-sans); /* 42px */
  --tipo-h1: 300 1.75rem/1.25 var(--fonte-sans); /* 28px */
  --tipo-h2: 600 1.25rem/1.4 var(--fonte-sans); /* 20px */
  --tipo-h3: 600 1rem/1.5 var(--fonte-sans); /* 16px */
  --tipo-corpo: 400 1rem/1.5 var(--fonte-sans); /* 16px */
  --tipo-denso: 400 0.875rem/1.43 var(--fonte-sans); /* 14px */
  --tipo-denso-forte: 600 0.875rem/1.43 var(--fonte-sans);
  --tipo-caption: 400 0.75rem/1.33 var(--fonte-sans); /* 12px */
  --tipo-mono: 400 0.875rem/1.43 var(--fonte-mono);

  /* Spacing — base 8px */
  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 24px;
  --espaco-6: 32px;
  --espaco-8: 48px;

  /* Layout */
  --largura-maxima: 1440px;

  /* Depth — sombra só para elemento flutuante */
  --sombra-flutuante: 0 2px 6px rgba(0, 0, 0, 0.3);

  /* Motion */
  --transicao-micro: 100ms ease-out;
  --transicao-padrao: 200ms ease-in-out;

  /* Z-index */
  --z-masthead: 10;
  --z-aviso: 30;
}

/* ---------- Reset + base ---------- */

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

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

body {
  margin: 0;
  font: var(--tipo-corpo);
  color: var(--cor-texto);
  background: var(--cor-fundo);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
figure {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

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

::placeholder {
  color: var(--cor-texto-terciario);
}

/* ---------- Primitivos de layout ---------- */

.oculto {
  display: none !important;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
}

.stack--apertado {
  gap: var(--espaco-2);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
  align-items: center;
}

.cluster--entre {
  justify-content: space-between;
}

.content-limiter {
  max-inline-size: var(--largura-maxima);
  margin-inline: auto;
  padding-inline: var(--espaco-5);
}

.grid-cards {
  display: grid;
  gap: var(--espaco-4);
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
}

.texto-caption {
  font: var(--tipo-caption);
  letter-spacing: 0.32px;
  color: var(--cor-texto-secundario);
}

.texto-denso {
  font: var(--tipo-denso);
  letter-spacing: 0.16px;
}

.texto-mono {
  font: var(--tipo-mono);
  letter-spacing: 0.16px;
}

.texto-secundario {
  color: var(--cor-texto-secundario);
}

.quebra-segura {
  overflow-wrap: anywhere;
  min-inline-size: 0;
}

/* ---------- Botão ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  height: 40px;
  padding: 0 var(--espaco-4);
  border: 1px solid transparent;
  border-radius: 0;
  font: var(--tipo-denso-forte);
  letter-spacing: 0.16px;
  transition: background-color var(--transicao-micro), color var(--transicao-micro),
    border-color var(--transicao-micro), transform var(--transicao-micro);
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn:disabled {
  background: var(--cor-borda-sutil);
  color: var(--cor-texto-terciario);
  border-color: transparent;
}

.btn--primario {
  background: var(--cor-interacao);
  color: #ffffff;
}

.btn--primario:hover:not(:disabled) {
  background: var(--cor-interacao-hover);
}

.btn--primario:active:not(:disabled) {
  background: var(--cor-interacao-ativo);
}

.btn--fantasma {
  background: transparent;
  color: var(--cor-interacao);
}

.btn--fantasma:hover:not(:disabled) {
  background: var(--cor-superficie-hover);
}

.btn--pequeno {
  height: 32px;
  padding: 0 var(--espaco-3);
}

/* ---------- Campo (login) ---------- */

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  min-width: 0;
}

.campo__rotulo {
  font: var(--tipo-caption);
  letter-spacing: 0.32px;
  color: var(--cor-texto-secundario);
}

.campo__controle {
  height: 40px;
  padding: 0 var(--espaco-4);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font: var(--tipo-denso);
  letter-spacing: 0.16px;
  transition: border-color var(--transicao-micro);
  width: 100%;
}

.campo__controle:hover {
  border-bottom-color: var(--cor-borda);
}

.campo__controle:focus {
  outline: none;
  border-bottom-color: var(--cor-interacao);
}

.campo__controle[aria-invalid='true'] {
  border-bottom-color: var(--cor-erro);
}

/* ---------- Tela de login ---------- */

.tela-login {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--cor-superficie);
}

.tela-login__area {
  display: grid;
  place-items: center;
  padding: var(--espaco-5);
}

.tela-login__card {
  width: min(440px, 100%);
  background: var(--cor-fundo);
  padding: var(--espaco-6);
  display: flex;
  flex-direction: column;
  gap: var(--espaco-5);
}

.tela-login__marca-titulo {
  font: var(--tipo-h2);
  margin: 0;
}

.tela-login__marca-sub {
  font: var(--tipo-denso);
  letter-spacing: 0.16px;
  color: var(--cor-texto-secundario);
  margin: var(--espaco-1) 0 0;
}

.tela-login__form {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
}

.tela-login__erro {
  font: var(--tipo-denso);
  letter-spacing: 0.16px;
  color: var(--cor-erro);
  margin: 0;
  padding: var(--espaco-2) var(--espaco-3);
  border-inline-start: 3px solid var(--cor-erro);
  background: var(--cor-superficie);
}

.tela-login__rodape {
  padding: var(--espaco-4);
  text-align: center;
  font: var(--tipo-caption);
  letter-spacing: 0.32px;
  color: var(--cor-texto-secundario);
}

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

.app__corpo {
  flex: 1 0 auto;
  background: var(--cor-fundo);
}

.app__main {
  padding-block: var(--espaco-5) var(--espaco-6);
}

.masthead {
  position: sticky;
  top: 0;
  background: var(--cor-invertida);
  color: var(--cor-texto-invertido);
  z-index: var(--z-masthead);
}

.masthead__conteudo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-4);
  min-height: 56px;
  padding-block: var(--espaco-2);
}

.masthead__marca {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.masthead__titulo {
  display: block;
  font: 600 1rem/1.2 var(--fonte-sans);
  color: var(--cor-texto-invertido);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.masthead__sub {
  display: block;
  font: var(--tipo-caption);
  letter-spacing: 0.32px;
  color: var(--cor-texto-invertido-sec);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.masthead__acoes {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  flex-shrink: 0;
}

.masthead__nome {
  font: var(--tipo-denso);
  letter-spacing: 0.16px;
  color: var(--cor-texto-invertido);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 22ch;
}

.badge-atualizacao {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--espaco-2);
  background: var(--cor-invertida-hover);
  color: var(--cor-texto-invertido);
  font: 600 0.75rem/1 var(--fonte-sans);
  letter-spacing: 0.32px;
  white-space: nowrap;
}

.masthead .btn--fantasma {
  color: var(--cor-texto-invertido);
}

.masthead .btn--fantasma:hover:not(:disabled) {
  background: var(--cor-invertida-hover);
}

@media (max-width: 900px) {
  .masthead__nome {
    display: none;
  }
}

@media (max-width: 767px) {
  .masthead__conteudo {
    flex-wrap: wrap;
    gap: var(--espaco-2);
  }

  .masthead__titulo {
    white-space: normal;
  }

  .masthead__sub {
    display: none;
  }

  .content-limiter {
    padding-inline: var(--espaco-4);
  }
}

/* ---------- Aviso de falha de comunicação ---------- */

.aviso-erro {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  padding: var(--espaco-3) var(--espaco-4);
  margin-bottom: var(--espaco-5);
  background: var(--cor-superficie);
  border-inline-start: 3px solid var(--cor-erro);
  font: var(--tipo-denso);
  letter-spacing: 0.16px;
  color: var(--cor-erro);
}

/* ---------- Seções ---------- */

.secao {
  margin-top: var(--espaco-6);
}

.secao:first-child {
  margin-top: 0;
}

.secao__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--espaco-4);
  margin-bottom: var(--espaco-4);
}

.secao__titulo {
  font: var(--tipo-h2);
  margin: 0;
}

.secao__descricao {
  font: var(--tipo-denso);
  letter-spacing: 0.16px;
  color: var(--cor-texto-secundario);
  margin: var(--espaco-1) 0 0;
  max-width: 65ch;
}

/* ---------- Card ---------- */

.card {
  background: var(--cor-superficie);
  padding: var(--espaco-4);
  border-radius: 0;
}

/* ---------- Badges de status ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--espaco-2);
  font: 600 0.75rem/1 var(--fonte-sans);
  letter-spacing: 0.32px;
  white-space: nowrap;
}

.badge--ok {
  color: var(--cor-sucesso);
  background: rgba(21, 128, 61, 0.08);
  border: 1px solid var(--cor-sucesso);
}

.badge--erro {
  color: var(--cor-erro);
  background: rgba(218, 30, 40, 0.08);
  border: 1px solid var(--cor-erro);
}

.badge--neutro {
  color: var(--cor-texto-secundario);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
}

/* ---------- Estados vazio / indisponível / erro ---------- */

.estado {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espaco-2);
  padding: var(--espaco-5);
  background: var(--cor-superficie);
}

.estado__titulo {
  font: var(--tipo-h3);
}

.estado__detalhe {
  font: var(--tipo-denso);
  letter-spacing: 0.16px;
  color: var(--cor-texto-secundario);
  max-width: 65ch;
}

.estado--vazio {
  border-inline-start: 3px solid var(--cor-borda);
}

.estado--erro {
  border-inline-start: 3px solid var(--cor-erro);
}

/* ---------- Tabela ---------- */

.tabela-rolagem {
  overflow-x: auto;
  min-block-size: 0;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda-sutil);
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  font: var(--tipo-denso);
  letter-spacing: 0.16px;
}

.tabela th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--cor-fundo);
  text-align: left;
  font: 600 0.75rem/1.33 var(--fonte-sans);
  letter-spacing: 0.32px;
  color: var(--cor-texto-secundario);
  padding: var(--espaco-3) var(--espaco-4);
  border-bottom: 1px solid var(--cor-borda);
  white-space: nowrap;
}

.tabela td {
  padding: var(--espaco-2) var(--espaco-4);
  border-bottom: 1px solid var(--cor-borda-sutil);
  vertical-align: middle;
}

.tabela tbody tr {
  transition: background-color var(--transicao-micro);
}

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

.tabela .numero {
  font-family: var(--fonte-mono);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.numero--erro {
  color: var(--cor-erro);
  font-weight: 600;
}

/* ---------- Seção: Serviços ---------- */

.card-servico {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
}

.card-servico__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-2);
}

.card-servico__nome {
  font: var(--tipo-h3);
  margin: 0;
  min-width: 0;
}

.card-servico__medidas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2) var(--espaco-5);
}

.medida {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.medida__rotulo {
  font: var(--tipo-caption);
  letter-spacing: 0.32px;
  color: var(--cor-texto-secundario);
}

.medida__valor {
  font: 600 0.875rem/1.43 var(--fonte-mono);
  font-variant-numeric: tabular-nums;
}

.card-servico__url {
  font: var(--tipo-caption);
  letter-spacing: 0.32px;
  color: var(--cor-texto-terciario);
}

/* ---------- Seção: Recursos do servidor ---------- */

.celula-recurso {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  align-items: flex-end;
  min-width: 120px;
}

.celula-recurso__valor {
  font: 600 0.875rem/1.43 var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.celula-recurso__valor--atencao {
  color: var(--cor-erro);
}

.barra-uso {
  width: 100px;
  max-width: 100%;
  height: 4px;
  background: var(--cor-borda-sutil);
  position: relative;
  overflow: hidden;
}

.barra-uso__preenchimento {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  background: var(--cor-interacao);
}

.barra-uso__preenchimento--atencao {
  background: var(--cor-erro);
}

/* ---------- Seção: Carga do DW ---------- */

.card-carga {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
  height: 100%;
}

.card-carga__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-2);
}

.card-carga__nome {
  font: var(--tipo-h3);
  margin: 0;
}

.card-carga__linhas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--espaco-2) var(--espaco-4);
}

/* ---------- Seção: Chamados ---------- */

.grid-chamados {
  display: grid;
  gap: var(--espaco-4);
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

.cartao-resumo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  background: var(--cor-superficie);
  padding: var(--espaco-4);
}

.cartao-resumo__valor {
  font: 600 1.75rem/1.2 var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.cartao-resumo__valor--ok {
  color: var(--cor-sucesso);
}

.cartao-resumo__valor--erro {
  color: var(--cor-erro);
}

.cartao-resumo--alerta {
  border: 1px solid var(--cor-erro);
  border-inline-start: 4px solid var(--cor-erro);
}

.cartao-resumo__legenda {
  font: var(--tipo-denso);
  letter-spacing: 0.16px;
  color: var(--cor-texto-secundario);
  margin: 0;
}

/* ---------- Seção: Uso da API (P20) ---------- */

.resumo-api {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2) var(--espaco-6);
  padding: var(--espaco-4);
  background: var(--cor-superficie);
  margin-bottom: var(--espaco-4);
}

.resumo-api p {
  font: var(--tipo-denso);
  letter-spacing: 0.16px;
  color: var(--cor-texto-secundario);
  margin: 0;
}

.resumo-api strong {
  color: var(--cor-texto);
  font-family: var(--fonte-mono);
  font-variant-numeric: tabular-nums;
}

/* ---------- Rodapé ---------- */

.app__rodape {
  padding: var(--espaco-4) 0 var(--espaco-5);
  border-top: 1px solid var(--cor-borda-sutil);
}

.app__rodape p {
  font: var(--tipo-caption);
  letter-spacing: 0.32px;
  color: var(--cor-texto-secundario);
}

/* ---------- Skeleton (carregamento) ---------- */

.skeleton {
  background: var(--cor-superficie);
  animation: skeleton-pulso 1.2s ease-in-out infinite;
}

.skeleton--linha-media {
  height: 16px;
  width: 70%;
}

.skeleton--bloco {
  height: 48px;
  width: 100%;
}

@keyframes skeleton-pulso {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

/* ---------- Movimento reduzido ---------- */

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