/* BackupHub — sistema visual da Zeuka.
 *
 * Escrito a partir do design em claude.ai/design (projeto "Logo e painel online").
 *
 * Nenhuma requisicao a host externo: fontes hospedadas em app/static/fonts, sem
 * CDN e sem Bootstrap. O Servidor de Backup nao deve depender da internet para o
 * painel abrir, e carregar CSS de terceiro seria um caminho de injecao direto na
 * tela onde a senha do Cliente aparece.
 */

@import url("fontes.css");

/* ---------------------------------------------------------------------------
   Paleta e medidas
   --------------------------------------------------------------------------- */

:root {
  /* Marca */
  --azul: #00adf1;
  --azul-escuro: #0098d4;
  --azul-mais-escuro: #0090cb;
  --grafite: #3a3a3c;
  --cinza: #a9a9aa;
  --azul-claro: #e2f6fd;
  --azul-borda: #c7ebfa;
  --azul-texto: #4e9bbc;
  --azul-texto-escuro: #00758f;
  --azul-texto-suave: #4e7b8e;

  /* Texto */
  --texto: #3a3a3c;
  --texto-medio: #6e7275;
  --texto-fraco: #8e9295;
  --texto-tenue: #a9a9aa;
  --texto-apagado: #c3cacd;

  /* Superficies */
  --fundo: #f6f9fa;
  --branco: #ffffff;
  --superficie-fria: #fbfdfd;
  --cabecalho-tabela: #f1f5f6;
  --linha: #e3e8ea;
  --linha-suave: #eff3f4;
  --borda-campo: #d5dbde;
  --trilho: #eaeeef;

  /* Estados */
  --vermelho: #d93b3b;
  --vermelho-escuro: #b33131;
  --vermelho-medio: #c05252;
  --vermelho-fundo: #fdf0f0;
  --vermelho-borda: #f5cfcf;
  --verde: #1e9e63;
  --verde-fundo: #e6f7ee;
  --ambar: #e0a100;
  --ambar-texto: #8a6100;
  --ambar-fundo: #fff7e6;
  --ambar-borda: #f0d79b;

  /* Painel Local — mesma marca, ambiente visivelmente diferente */
  --local-fundo: #22272b;
  --local-superficie: #2e343a;
  --local-linha: #3c444a;
  --local-texto: #e8ecee;

  --fonte: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */

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

body {
  margin: 0;
  background: var(--fundo);
  font-family: var(--fonte);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--azul);
  text-decoration: none;
}
a:hover {
  color: var(--azul-mais-escuro);
  text-decoration: underline;
}

input,
button,
select,
textarea {
  font-family: var(--fonte);
}

/* Foco sempre visivel: quem opera o painel usa teclado, e um contorno invisivel
   deixa a pessoa sem saber onde esta antes de apertar um botao de exclusao. */
:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
}

.mono {
  font-family: var(--mono);
}
.oculto {
  display: none !important;
}

/* Visivel só para leitor de tela. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

.tela-login {
  width: 100%;
  min-height: 100vh;
  background: var(--branco);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 20px;
}

.caixa-login {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.marca-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.marca-login img {
  width: min(180px, 58%);
  height: auto;
}

.marca-nome {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.marca-nome strong {
  font: 300 20px/1 var(--fonte);
  letter-spacing: 0.02em;
  color: var(--grafite);
}
.marca-nome strong b {
  font-weight: 700;
}
.marca-nome span {
  font: 500 10px/1 var(--fonte);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cinza);
}

.rodape-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}
.rodape-login small {
  font: 400 11px/1.6 var(--fonte);
  color: var(--texto-apagado);
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Estrutura do painel: barra lateral + topo + conteudo
   --------------------------------------------------------------------------- */

.estrutura {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: var(--fundo);
  display: grid;
  grid-template-columns: 232px 1fr;
}

.lateral {
  background: var(--branco);
  border-right: 1px solid var(--linha);
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 0 18px;
}

.marca-lateral {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: none;
  padding: 18px 20px;
  border-bottom: 1px solid var(--linha-suave);
  margin-bottom: 14px;
}
.marca-lateral .selo {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--azul);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 16px/1 var(--fonte);
  color: var(--branco);
  flex: none;
  overflow: hidden;
}
.marca-lateral .selo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.marca-lateral .nomes {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.marca-lateral .nomes b {
  font: 600 13.5px/1 var(--fonte);
  color: var(--grafite);
}
.marca-lateral .nomes span {
  font: 500 8.5px/1.2 var(--fonte);
  letter-spacing: 0.15em;
  color: var(--cinza);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  flex: none;
  white-space: nowrap;
  text-align: left;
  border: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  padding: 11px 20px;
  background: none;
  color: var(--texto-medio);
  font: 500 12.5px/1 var(--fonte);
  text-decoration: none;
}
.nav-item:hover {
  background: var(--linha-suave);
  color: var(--texto);
  text-decoration: none;
}
.nav-item .glifo {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--texto-tenue);
}
.nav-item .rotulo {
  flex: 1;
}
.nav-item .conta {
  font: 600 10px/1 var(--mono);
  color: var(--texto-tenue);
}
.nav-item.ativo {
  background: var(--azul-claro);
  border-left-color: var(--azul);
  color: var(--azul-texto-escuro);
  font-weight: 600;
}
.nav-item.ativo .glifo,
.nav-item.ativo .conta {
  color: var(--azul);
}

.espaco {
  flex: 1;
}

.rodape-lateral {
  flex: none;
  padding: 16px 20px 0;
  border-top: 1px solid var(--linha-suave);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rodape-lateral .quem {
  display: flex;
  align-items: center;
  gap: 9px;
}
.rodape-lateral .iniciais {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--azul-claro);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 10px/1 var(--fonte);
  color: var(--azul);
  flex: none;
}
.rodape-lateral .quem div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rodape-lateral .quem b {
  font: 500 11.5px/1.3 var(--fonte);
  color: var(--grafite);
  overflow: hidden;
  text-overflow: ellipsis;
}
.rodape-lateral .quem span {
  font: 400 10px/1.3 var(--fonte);
  color: var(--cinza);
}
.sair {
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  font: 500 11px/1 var(--fonte);
  color: var(--cinza);
  cursor: pointer;
}
.sair:hover {
  color: var(--vermelho);
  text-decoration: none;
}

.coluna-principal {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topo {
  min-height: 58px;
  flex: none;
  background: var(--branco);
  border-bottom: 1px solid var(--linha);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 11px 22px;
}
.trilha {
  display: flex;
  align-items: center;
  gap: 9px;
  font: 400 12px/1 var(--fonte);
  color: var(--cinza);
}
.trilha .sep {
  color: var(--borda-campo);
}
.trilha .folha {
  font-weight: 600;
  color: var(--grafite);
}
.estado-topo {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.pulso {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 500 11.5px/1 var(--fonte);
  color: var(--texto-medio);
}
.pulso .ponto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--verde);
  flex: none;
}
.pulso.parado .ponto {
  background: var(--vermelho);
}
.varredura {
  font: 400 11.5px/1 var(--mono);
  color: var(--cinza);
}

.conteudo {
  flex: 1;
  width: 100%;
  max-width: 1680px;
  padding: 28px 24px 44px;
  min-width: 0;
}

/* ---------------------------------------------------------------------------
   Cabecalho de pagina
   --------------------------------------------------------------------------- */

.pagina {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cabecalho-pagina {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 20px;
}
.cabecalho-pagina .titulos {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.titulo {
  font: 600 21px/1.2 var(--fonte);
  color: var(--grafite);
  margin: 0;
}
.subtitulo {
  font: 400 12.5px/1.4 var(--fonte);
  color: var(--cinza);
}
.acoes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.voltar {
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  font: 500 11.5px/1 var(--fonte);
  color: var(--azul);
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Botoes
   --------------------------------------------------------------------------- */

.botao {
  padding: 11px 18px;
  border: none;
  border-radius: 6px;
  background: var(--azul);
  color: var(--branco);
  font: 600 12.5px/1 var(--fonte);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.botao:hover {
  background: var(--azul-escuro);
  color: var(--branco);
  text-decoration: none;
}
.botao[disabled],
.botao:disabled {
  background: var(--borda-campo);
  color: var(--texto-fraco);
  cursor: not-allowed;
}

.botao-neutro {
  background: var(--branco);
  border: 1px solid var(--borda-campo);
  color: var(--texto-medio);
  font-weight: 500;
}
.botao-neutro:hover {
  background: var(--branco);
  border-color: var(--azul);
  color: var(--azul);
}

.botao-contorno {
  background: var(--branco);
  border: 1px solid var(--azul);
  color: var(--azul);
  font-weight: 600;
}
.botao-contorno:hover {
  background: var(--azul-claro);
  color: var(--azul);
}

.botao-perigo {
  background: var(--vermelho);
  color: var(--branco);
}
.botao-perigo:hover {
  background: var(--vermelho-escuro);
  color: var(--branco);
}
.botao-perigo[disabled] {
  background: var(--vermelho-borda);
  color: var(--vermelho-medio);
  cursor: not-allowed;
}

.botao-pequeno {
  padding: 8px 12px;
  font-size: 11px;
  border-radius: 5px;
}

.botao-largo {
  width: 100%;
  justify-content: center;
  padding: 13px 18px;
  font-size: 13.5px;
  border-radius: 5px;
}

/* ---------------------------------------------------------------------------
   Cartoes e paineis
   --------------------------------------------------------------------------- */

.cartao {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 10px;
}
.cartao-preenchido {
  padding: 26px;
}

.divisor {
  height: 1px;
  background: var(--linha-suave);
  border: 0;
  margin: 0;
}

.destaques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 12px;
}
.destaque {
  background: var(--azul-claro);
  border: 1px solid var(--azul-borda);
  border-radius: 9px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.destaque .etiqueta {
  font: 600 10px/1 var(--fonte);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--azul-texto);
}
.destaque .numero {
  font: 600 24px/1 var(--mono);
  color: var(--grafite);
}
.destaque .nota {
  font: 400 11px/1.4 var(--fonte);
  color: var(--texto-medio);
}
.destaque.alerta {
  background: var(--vermelho-fundo);
  border-color: var(--vermelho-borda);
}
.destaque.alerta .etiqueta {
  color: var(--vermelho-medio);
}
.destaque.alerta .numero {
  color: var(--vermelho);
}
.destaque.alerta .nota {
  color: var(--vermelho-escuro);
}

/* Painel lateral explicativo (azul claro) */
.explicacao {
  background: var(--azul-claro);
  border: 1px solid var(--azul-borda);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.explicacao .cabeca {
  font: 600 12px/1 var(--fonte);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--azul-texto);
}
.explicacao .passo {
  display: flex;
  gap: 11px;
}
.explicacao .passo .n {
  font: 700 11px/1.5 var(--mono);
  color: var(--azul);
  flex: none;
}
.explicacao .passo span {
  font: 400 12.5px/1.6 var(--fonte);
  color: var(--grafite);
}
.explicacao .fim {
  font: 400 11.5px/1.6 var(--fonte);
  color: var(--azul-texto-suave);
}
.explicacao hr {
  height: 1px;
  background: var(--azul-borda);
  border: 0;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   Tabela de clientes
   --------------------------------------------------------------------------- */

.tabela {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 10px;
  overflow: hidden;
}

.grade-clientes {
  display: grid;
  grid-template-columns: 1.55fr 1.15fr 1.35fr 1.25fr 0.78fr 0.72fr 0.82fr;
}
.grade-clientes.cabeca {
  padding: 11px 18px;
  background: var(--cabecalho-tabela);
  border-bottom: 1px solid var(--linha);
}
.grade-clientes.cabeca span {
  font: 600 9.5px/1.3 var(--fonte);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}
.grade-clientes.cabeca .principal {
  font-weight: 700;
  color: var(--azul);
}
.grade-clientes.cabeca .direita,
.grade-clientes .direita {
  text-align: right;
  justify-content: flex-end;
}

.linha-cliente {
  align-items: center;
  padding: 13px 18px;
  border-bottom: 1px solid var(--linha-suave);
  background: var(--branco);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.linha-cliente:hover {
  background: var(--azul-claro);
  text-decoration: none;
}
.linha-cliente.problema {
  background: #fffafa;
}
.linha-cliente.desativado {
  opacity: 0.55;
}
.linha-cliente .nome {
  font: 600 13px/1.3 var(--fonte);
  color: var(--grafite);
}
.linha-cliente .cnpj,
.linha-cliente .cota {
  font: 400 12px/1.3 var(--mono);
  color: var(--texto-medio);
}
.linha-cliente .quando {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.linha-cliente .quando .data {
  font: 400 12px/1.3 var(--mono);
  color: var(--texto-medio);
}
.linha-cliente .quando .rel {
  font: 500 10.5px/1.3 var(--fonte);
  color: var(--cinza);
}
.linha-cliente .espaco-col {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-right: 16px;
}
.linha-cliente .espaco-col .valor {
  font: 600 15px/1 var(--mono);
  color: var(--grafite);
}
.linha-cliente .vencidos {
  font: 500 12px/1.3 var(--mono);
  color: var(--texto-medio);
}

.alerta-texto {
  color: var(--vermelho) !important;
}
.atencao-texto {
  color: var(--ambar-texto) !important;
}

.trilho-barra {
  height: 4px;
  border-radius: 2px;
  background: var(--trilho);
  overflow: hidden;
}
.trilho-barra span {
  display: block;
  height: 4px;
  background: var(--azul);
}
.trilho-barra span.cheio {
  background: var(--vermelho);
}
.trilho-barra span.quase {
  background: var(--ambar);
}

.rodape-tabela {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 13px 18px;
  background: var(--superficie-fria);
  font: 400 11.5px/1.4 var(--fonte);
  color: var(--cinza);
}

/* Versao em cartoes, para telas estreitas */
.cartao-cliente {
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--linha-suave);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.cartao-cliente .topo-cartao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cartao-cliente .nome {
  font: 600 14px/1.3 var(--fonte);
  color: var(--grafite);
}
.cartao-cliente .numeros {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.cartao-cliente .numeros .valor {
  font: 600 19px/1 var(--mono);
}
.cartao-cliente .numeros .cota {
  font: 400 11.5px/1 var(--mono);
  color: var(--texto-medio);
}
.cartao-cliente .miudos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}
.cartao-cliente .miudos div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cartao-cliente .miudos b {
  font: 600 9px/1.3 var(--fonte);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cinza);
}
.cartao-cliente .miudos span {
  font: 400 11.5px/1.3 var(--mono);
  color: var(--texto-medio);
}

/* ---------------------------------------------------------------------------
   Etiquetas de status
   --------------------------------------------------------------------------- */

.etiqueta {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 4px;
  font: 600 10.5px/1.3 var(--fonte);
  white-space: nowrap;
}
.etiqueta-ok {
  background: var(--verde-fundo);
  color: var(--verde);
}
.etiqueta-alerta {
  background: var(--vermelho-fundo);
  color: var(--vermelho);
}
.etiqueta-atencao {
  background: var(--ambar-fundo);
  color: var(--ambar-texto);
}
.etiqueta-neutra {
  background: var(--linha-suave);
  color: var(--texto-fraco);
}
.etiqueta-info {
  background: var(--azul-claro);
  color: var(--azul-texto-escuro);
}

/* ---------------------------------------------------------------------------
   Formularios
   --------------------------------------------------------------------------- */

.campo {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.campo > .rotulo {
  font: 600 10.5px/1 var(--fonte);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cinza);
}
.campo > .ajuda {
  font: 400 11px/1.5 var(--fonte);
  color: var(--cinza);
}
.campo > .erro {
  font: 500 11px/1.5 var(--fonte);
  color: var(--vermelho);
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--borda-campo);
  border-radius: 6px;
  font: 400 13.5px/1.3 var(--fonte);
  color: var(--texto);
  background: var(--branco);
}
input.mono,
textarea.mono {
  font-family: var(--mono);
}
textarea {
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--azul);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 173, 241, 0.14);
}
input[aria-invalid="true"] {
  border-color: var(--vermelho);
}
::placeholder {
  color: var(--texto-apagado);
}

.linha-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 18px;
}
.linha-campos.tres {
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
}

/* Campo de login: rotulo mais discreto que o do formulario de cadastro */
.campo-login > .rotulo {
  font: 500 11.5px/1 var(--fonte);
  letter-spacing: 0;
  text-transform: none;
  color: var(--texto-medio);
}
.campo-login input {
  padding: 12px 13px;
  border-radius: 5px;
}

.rodape-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.rodape-form .nota {
  font: 400 11.5px/1.5 var(--fonte);
  color: var(--cinza);
  flex: 1 1 240px;
}

.marcador {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.marcador input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--azul);
  cursor: pointer;
  flex: none;
}
.marcador span {
  font: 500 12.5px/1.4 var(--fonte);
  color: var(--grafite);
}

.chave {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.chave input[type="checkbox"] {
  width: 38px;
  height: 21px;
  accent-color: var(--azul);
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Avisos
   --------------------------------------------------------------------------- */

.aviso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 6px;
  font: 500 12.5px/1.5 var(--fonte);
}
.aviso .sinal {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex: none;
  margin-top: 7px;
}
.aviso-erro {
  background: var(--vermelho-fundo);
  color: var(--vermelho-escuro);
}
.aviso-erro .sinal {
  background: var(--vermelho);
}
.aviso-sucesso {
  background: var(--verde-fundo);
  color: var(--verde);
}
.aviso-sucesso .sinal {
  background: var(--verde);
}
.aviso-atencao {
  background: var(--ambar-fundo);
  border: 1px solid var(--ambar-borda);
  color: var(--ambar-texto);
}
.aviso-atencao .sinal {
  background: var(--ambar);
}
.aviso-info {
  background: var(--azul-claro);
  border: 1px solid var(--azul-borda);
  color: var(--azul-texto-suave);
}
.aviso-info .sinal {
  background: var(--azul);
}

/* Faixa de destaque com circulo — usada na tela da credencial */
.faixa-atencao {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 9px;
  background: var(--ambar-fundo);
  border: 1px solid var(--ambar-borda);
}
.faixa-atencao .marca {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ambar);
  color: var(--branco);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 13px/1 var(--fonte);
  flex: none;
}
.faixa-atencao p {
  margin: 0;
  font: 600 13px/1.45 var(--fonte);
  color: var(--ambar-texto);
}

/* ---------------------------------------------------------------------------
   Estado vazio
   --------------------------------------------------------------------------- */

.vazio {
  background: var(--branco);
  border: 1px dashed #c7d2d6;
  border-radius: 10px;
  padding: 80px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.vazio .icone {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--azul-claro);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 22px/1 var(--mono);
  color: var(--azul);
}
.vazio h2 {
  margin: 0;
  font: 600 17px/1.3 var(--fonte);
  color: var(--grafite);
}
.vazio p {
  margin: 0;
  max-width: 440px;
  font: 400 13px/1.7 var(--fonte);
  color: var(--cinza);
  text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
   Tela da credencial — a mais critica do painel
   --------------------------------------------------------------------------- */

.credencial {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding-top: 6px;
}
.credencial > * {
  width: 100%;
  max-width: 820px;
}

.cabeca-credencial {
  padding: 22px;
  border-bottom: 1px solid var(--linha-suave);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 20px;
}
.cabeca-credencial h2 {
  margin: 0;
  font: 600 19px/1.25 var(--fonte);
  color: var(--grafite);
}
.cabeca-credencial .sub {
  font: 400 12.5px/1.5 var(--fonte);
  color: var(--cinza);
}

.bloco-senha {
  padding: 20px 26px;
  background: var(--azul-claro);
  border-bottom: 1px solid var(--azul-borda);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bloco-senha .cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
}
.bloco-senha .cabeca b {
  font: 700 10.5px/1.4 var(--fonte);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--azul-texto-escuro);
}
.bloco-senha .cabeca span {
  font: 500 10.5px/1.4 var(--fonte);
  color: var(--azul-texto-suave);
}
.bloco-senha .valor-linha {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.bloco-senha .valor {
  flex: 1 1 240px;
  padding: 15px 16px;
  background: var(--branco);
  border: 2px solid var(--azul);
  border-radius: 7px;
  font: 700 21px/1.2 var(--mono);
  letter-spacing: 0.06em;
  color: var(--grafite);
  word-break: break-all;
}
.bloco-senha .botao {
  padding: 15px 20px;
  border-radius: 7px;
}

.linha-credencial {
  display: grid;
  grid-template-columns: 1.1fr 1.5fr auto;
  align-items: center;
  gap: 12px 14px;
  padding: 13px 22px;
  border-bottom: 1px solid var(--linha-suave);
}
.linha-credencial:nth-child(even) {
  background: var(--superficie-fria);
}
.linha-credencial .rotulos {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.linha-credencial .rotulos b {
  font: 600 11.5px/1.2 var(--fonte);
  color: var(--grafite);
}
.linha-credencial .rotulos span {
  font: 400 10.5px/1.3 var(--fonte);
  color: var(--cinza);
}
.linha-credencial .valor {
  font: 500 13.5px/1.3 var(--mono);
  color: var(--grafite);
  word-break: break-all;
}

.rodape-credencial {
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 20px;
  background: var(--superficie-fria);
}

.nota-central {
  font: 400 11.5px/1.7 var(--fonte);
  color: var(--cinza);
  text-align: center;
  text-wrap: pretty;
}
.nota-central b {
  color: var(--texto-medio);
}

/* ---------------------------------------------------------------------------
   Listas genericas (auditoria, erros, arquivos, administradores)
   --------------------------------------------------------------------------- */

.lista {
  width: 100%;
  border-collapse: collapse;
}
.lista thead th {
  padding: 11px 18px;
  background: var(--cabecalho-tabela);
  border-bottom: 1px solid var(--linha);
  text-align: left;
  font: 600 9.5px/1.3 var(--fonte);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  white-space: nowrap;
}
.lista tbody td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--linha-suave);
  font: 400 12.5px/1.4 var(--fonte);
  color: var(--texto);
  vertical-align: middle;
}
.lista tbody tr:hover {
  background: var(--superficie-fria);
}
.lista td.mono,
.lista th.mono {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--texto-medio);
}
.lista td.direita,
.lista th.direita {
  text-align: right;
}
.lista tr.falha td {
  background: var(--vermelho-fundo);
}
.lista tr.falha td:first-child {
  box-shadow: inset 3px 0 0 var(--vermelho);
}

.rolagem {
  overflow-x: auto;
}

.filtros {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border-bottom: 1px solid var(--linha-suave);
  background: var(--superficie-fria);
}
.filtros .campo {
  min-width: 150px;
}

/* ---------------------------------------------------------------------------
   Detalhe do cliente
   --------------------------------------------------------------------------- */

.duas-colunas {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 20px;
  align-items: start;
}

.dados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px 20px;
  padding: 22px 26px;
}
.dados .item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.dados .item b {
  font: 600 9.5px/1.3 var(--fonte);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cinza);
}
.dados .item span {
  font: 500 13px/1.4 var(--fonte);
  color: var(--grafite);
  word-break: break-word;
}
.dados .item span.mono {
  font-family: var(--mono);
  font-weight: 400;
}

.caixa-acoes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
}
.caixa-acoes .titulo-caixa {
  font: 600 11px/1 var(--fonte);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cinza);
  margin-bottom: 4px;
}
.caixa-acoes form {
  margin: 0;
}
.caixa-acoes .botao {
  width: 100%;
  justify-content: center;
}

/* ---------------------------------------------------------------------------
   Painel Local — mesma marca, ambiente inequivocamente diferente
   --------------------------------------------------------------------------- */

body.local {
  background: var(--local-fundo);
  color: var(--local-texto);
}

.faixa-local {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--azul);
  color: #06222e;
  font: 600 11px/1 var(--fonte);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  padding: 8px 12px;
}

body.local .estrutura {
  background: var(--local-fundo);
  min-height: calc(100vh - 27px);
}
body.local .lateral {
  background: var(--local-superficie);
  border-right-color: var(--local-linha);
}
body.local .marca-lateral {
  border-bottom-color: var(--local-linha);
}
body.local .marca-lateral .nomes b {
  color: var(--local-texto);
}
body.local .nav-item {
  color: #b9c1c7;
}
body.local .nav-item:hover {
  background: #363d44;
  color: var(--local-texto);
}
body.local .nav-item.ativo {
  background: #1b3540;
  color: #7fd4f5;
  border-left-color: var(--azul);
}
body.local .nav-item.ativo .glifo,
body.local .nav-item.ativo .conta {
  color: #7fd4f5;
}
body.local .rodape-lateral {
  border-top-color: var(--local-linha);
}
body.local .rodape-lateral .quem b {
  color: var(--local-texto);
}
body.local .topo {
  background: var(--local-superficie);
  border-bottom-color: var(--local-linha);
}
body.local .trilha .folha {
  color: var(--local-texto);
}
body.local .titulo,
body.local .cabeca-credencial h2 {
  color: var(--local-texto);
}
body.local .cartao,
body.local .tabela {
  background: var(--local-superficie);
  border-color: var(--local-linha);
}
body.local .lista thead th {
  background: #363d44;
  border-bottom-color: var(--local-linha);
  color: #9aa2a8;
}
body.local .lista tbody td {
  border-bottom-color: var(--local-linha);
  color: var(--local-texto);
}
body.local .lista tbody tr:hover {
  background: #363d44;
}
body.local .divisor {
  background: var(--local-linha);
}
body.local input,
body.local select,
body.local textarea {
  background: #1c2126;
  border-color: #48515a;
  color: var(--local-texto);
}
body.local ::placeholder {
  color: #6d767d;
}
body.local .campo > .rotulo {
  color: #9aa2a8;
}
body.local .campo > .ajuda {
  color: #9aa2a8;
}
body.local .botao-neutro {
  background: #363d44;
  border-color: #48515a;
  color: #c9d0d5;
}
body.local .botao-neutro:hover {
  border-color: var(--azul);
  color: #7fd4f5;
}
body.local .dados .item span,
body.local .marcador span,
body.local .rodape-lateral .quem span {
  color: var(--local-texto);
}
body.local .tela-login {
  background: var(--local-fundo);
}
body.local .caixa-login .marca-nome strong {
  color: var(--local-texto);
}
body.local .rodape-tabela {
  background: #2a3036;
  color: #9aa2a8;
}

/* Cartao de servico na tela de estado */
.servicos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  padding: 20px;
}
.servico {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 7px;
  background: var(--superficie-fria);
  border: 1px solid var(--linha-suave);
}
body.local .servico {
  background: #262c31;
  border-color: var(--local-linha);
}
.servico .nome {
  font: 500 12px/1.3 var(--mono);
  color: var(--texto-medio);
  word-break: break-all;
}
body.local .servico .nome {
  color: #c9d0d5;
}

.medidor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
}
.medidor .trilho-barra {
  height: 8px;
  border-radius: 4px;
}
.medidor .trilho-barra span {
  height: 8px;
}
body.local .medidor .trilho-barra {
  background: #1c2126;
}

pre.saida {
  margin: 0;
  padding: 14px 16px;
  background: var(--superficie-fria);
  border: 1px solid var(--linha-suave);
  border-radius: 7px;
  font: 400 11.5px/1.7 var(--mono);
  color: var(--texto-medio);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}
body.local pre.saida {
  background: #1c2126;
  border-color: var(--local-linha);
  color: #c9d0d5;
}

/* ---------------------------------------------------------------------------
   Telas estreitas
   --------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .duas-colunas {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .estrutura {
    grid-template-columns: 1fr;
  }
  .lateral {
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 0 12px;
    border-right: none;
    border-bottom: 1px solid var(--linha);
    overflow-x: auto;
  }
  .marca-lateral {
    padding: 12px 12px 12px 0;
    border-bottom: none;
    margin-bottom: 0;
    margin-right: 8px;
  }
  .nav-item {
    width: auto;
    border-left: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    padding: 14px 12px;
  }
  .nav-item.ativo {
    border-left-color: transparent;
    border-bottom-color: var(--azul);
  }
  .nav-item .conta {
    display: none;
  }
  .espaco {
    flex: none;
  }
  .rodape-lateral {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 0 0 0 12px;
    border-top: none;
    border-left: 1px solid var(--linha-suave);
  }
  .rodape-lateral .quem span {
    display: none;
  }
  .conteudo {
    padding: 20px 14px 36px;
  }

  /* A tabela em grade vira cartao: sete colunas num celular ficariam ilegiveis,
     e o que importa (espaco ocupado e status) precisa continuar batendo o olho. */
  .grade-clientes.cabeca,
  .linha-cliente {
    display: none;
  }
  .cartao-cliente {
    display: flex;
  }
}

@media (max-width: 620px) {
  .cabecalho-pagina {
    align-items: stretch;
  }
  .acoes .botao {
    flex: 1 1 auto;
    justify-content: center;
  }
  .bloco-senha .valor {
    font-size: 17px;
  }
  .linha-credencial {
    grid-template-columns: 1fr;
  }
  .linha-credencial .botao {
    justify-self: start;
  }
}

@media print {
  .lateral,
  .topo,
  .acoes,
  .rodape-credencial {
    display: none;
  }
  .estrutura {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   Painel Local — formulário de configuração
   --------------------------------------------------------------------------- */

.campo-config {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 18px 22px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--linha-suave);
  align-items: start;
}
body.local .campo-config {
  border-bottom-color: var(--local-linha);
}

.explicacao-campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.explicacao-campo b {
  font: 600 12.5px/1.3 var(--fonte);
  color: var(--grafite);
}
body.local .explicacao-campo b {
  color: var(--local-texto);
}
.explicacao-campo .ajuda {
  font: 400 11.5px/1.6 var(--fonte);
  color: var(--texto-fraco);
  text-wrap: pretty;
}
body.local .explicacao-campo .ajuda {
  color: #9aa2a8;
}

/* A linha de risco é a que faz este painel valer a pena para quem não é
   técnico: ela responde "o que acontece se eu errar aqui". Em âmbar por padrão,
   e em vermelho nos três campos que derrubam o produto inteiro. */
.explicacao-campo .risco {
  font: 500 11px/1.5 var(--fonte);
  color: #b07d1a;
  text-wrap: pretty;
}
body.local .explicacao-campo .risco {
  color: #e8b04b;
}
.explicacao-campo .risco.grave {
  color: var(--vermelho-medio);
}
body.local .explicacao-campo .risco.grave {
  color: #f08a8a;
}

.controle-campo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.controle-campo .exemplo {
  font: 400 10.5px/1.4 var(--mono);
  color: var(--texto-apagado);
}
body.local .controle-campo .exemplo {
  color: #7e868b;
}

.rodape-config {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 18px;
  padding: 18px 22px;
  background: var(--superficie-fria);
}
body.local .rodape-config {
  background: #262c31;
}
.rodape-config .aviso-salvar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.rodape-config .aviso-salvar b {
  font: 600 12px/1.3 var(--fonte);
  color: var(--grafite);
}
body.local .rodape-config .aviso-salvar b {
  color: var(--local-texto);
}
.rodape-config .aviso-salvar span {
  font: 400 11.5px/1.5 var(--fonte);
  color: var(--texto-fraco);
}
body.local .rodape-config .aviso-salvar span {
  color: #9aa2a8;
}

@media (max-width: 760px) {
  .campo-config {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}

/* Contraste no Painel Local. O peso 300 do "Backup" some contra o fundo escuro
   quando herda a cor pensada para fundo claro. */
body.local .marca-nome strong,
body.local .caixa-login .marca-nome strong {
  color: #f2f5f6;
}
body.local .marca-nome span {
  color: #8b9399;
}
body.local .rodape-lateral .iniciais {
  background: #1b3540;
  color: #7fd4f5;
}
body.local .nota-central,
body.local .rodape-login small {
  color: #7e868b;
}
body.local .subtitulo {
  color: #9aa2a8;
}
body.local .vazio {
  background: var(--local-superficie);
  border-color: #4a545c;
}
body.local .vazio h2 {
  color: var(--local-texto);
}
body.local .etiqueta-neutra {
  background: #363d44;
  color: #9aa2a8;
}