/* Gerenciador Prospectando B2B. Mesmas cores e fontes do software. */
@font-face { font-family: "IBM Plex Sans"; src: url("fontes/IBMPlexSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fontes/IBMPlexSans-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fontes/IBMPlexSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fontes/IBMPlexSans-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fontes/IBMPlexMono-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fontes/IBMPlexMono-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }

:root {
  --azul: #16324F;
  --azul-claro: #24476B;
  --laranja: #B4500E;
  --laranja-escuro: #8F3E0B;
  --fundo: #F4F2EC;
  --borda: #C9C3B6;
  --borda-suave: #E2DDD0;
  --texto: #1E2328;
  --mudo: #5B5F63;
  --verde: #1F6B3A;
  --verde-fundo: #E3F0E6;
  --vermelho: #8A1C1C;
  --vermelho-fundo: #F9E1E1;
  --creme-laranja: #FBF0E7;
  --borda-laranja: #F0D2BC;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 16px/1.5 var(--sans); color: var(--texto); background: var(--fundo); }
h1, h2, h3, p { margin: 0; }
a { color: var(--azul); }
.icone { width: 22px; height: 22px; flex: none; }

/* Entrada (login, codigo, ativacao, instalacao) */
.fundo-auth { background: var(--azul); min-height: 100vh; }
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.cartao-auth { background: #fff; border-radius: 22px; padding: 40px 40px 36px; width: 100%; max-width: 440px; }
.cartao-auth.larga { max-width: 700px; }
.cartao-auth h1 { font-size: 30px; line-height: 1.2; color: var(--azul); margin-top: 28px; }
.cartao-auth .sub { margin-top: 8px; }
.marca { display: flex; align-items: center; gap: 14px; }
.marca-icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--laranja); color: #fff; flex: none; }
.marca strong { display: block; font-size: 18px; line-height: 1.2; color: var(--azul); }
.marca small { display: block; color: var(--mudo); font-size: 15px; }
.nota { color: var(--mudo); font-size: 15px; text-align: center; margin-top: 22px; }
.nota-uri { color: var(--mudo); font-size: 13px; word-break: break-all; margin: 0 0 6px; }
.nota-uri .uri { font-family: var(--mono); }

/* Formularios */
label { display: block; font-weight: 600; margin: 18px 0 6px; }
input[type="text"], input[type="password"], input[type="search"], input[type="number"], select {
  width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--borda); border-radius: 10px;
  background: #fff; font: inherit; color: inherit;
}
input:focus-visible, select:focus-visible, .botao:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid #7FA3C7; outline-offset: 2px; }
.campo-codigo { font-family: var(--mono); font-size: 26px; text-align: center; letter-spacing: 0.35em; min-height: 56px; }
.campo-codigo.estreito { max-width: 280px; }
.marcar { display: flex; align-items: center; gap: 10px; font-weight: 400; margin: 16px 0 0; }
.marcar input { width: 20px; height: 20px; min-height: 0; accent-color: var(--azul); }
.marcar.sem-margem { margin: 0 0 12px; white-space: nowrap; }
.g-recaptcha { margin-top: 18px; }
.links-linha { display: flex; justify-content: space-between; gap: 16px; margin-top: 22px; }
.em-linha { display: inline; margin: 0; }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--azul); text-decoration: underline; cursor: pointer; }

/* Botoes */
.botao { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 12px; border: 1px solid transparent; font: 600 16px var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; }
.botao.primario { background: var(--laranja); color: #fff; }
.botao.primario:hover { background: #9C440B; }
.botao.primario-escuro { background: var(--azul); color: #fff; }
.botao.primario-escuro:hover { background: var(--azul-claro); }
.botao.secundario { background: #fff; border-color: var(--borda); color: var(--azul); }
.botao.contorno { background: #fff; border-color: var(--azul); color: var(--azul); }
.botao.contorno.laranja { border-color: var(--laranja); color: var(--laranja-escuro); }
.botao.cheio { width: 100%; min-height: 54px; margin-top: 22px; font-size: 18px; }
.botao.desligado { opacity: 0.45; pointer-events: none; }

/* Mensagens */
.mensagem { padding: 12px 16px; border-radius: 10px; margin: 18px 0 0; font-weight: 500; }
.mensagem.erro { background: var(--vermelho-fundo); color: var(--vermelho); }
.mensagem.aviso { background: #FFF3C4; color: #5C4500; }
.mensagem.sucesso { background: var(--verde-fundo); color: var(--verde); }
.conteudo > .mensagem { margin: 0 0 20px; }

/* Ativacao da verificacao */
.ativar-passos { display: flex; gap: 24px; align-items: flex-start; margin: 22px 0 14px; }
.ativar-passos .qr { width: 200px; height: 200px; flex: none; border: 1px solid var(--borda-suave); border-radius: 12px; padding: 8px; background: #fff; }
.ativar-passos ol { margin: 0; padding-left: 22px; }
.ativar-passos li { margin-bottom: 10px; }
.chave { font-family: var(--mono); font-weight: 600; word-break: break-all; }
.caixa-recuperacao { background: var(--creme-laranja); border: 1px solid var(--borda-laranja); border-radius: 14px; padding: 18px 20px; margin-top: 22px; }
.caixa-recuperacao h2 { color: var(--laranja-escuro); font-size: 17px; }
.caixa-recuperacao p { color: var(--laranja-escuro); margin: 6px 0 14px; }
.grade-codigos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.grade-codigos code { background: #fff; border-radius: 8px; padding: 8px 6px; text-align: center; font-family: var(--mono); font-size: 14px; }

/* Painel */
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.lateral { background: var(--azul); color: #fff; padding: 26px 16px 20px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; height: 100vh; }
.marca-lateral { padding: 0 8px 24px; }
.marca-lateral strong { color: #fff; }
.marca-lateral small { color: #C8D3DF; }
.lateral nav { display: flex; flex-direction: column; gap: 6px; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; color: #fff; text-decoration: none; font: 600 16px var(--sans); background: none; border: 0; width: 100%; text-align: left; cursor: pointer; }
.nav-item:hover { background: rgba(255, 255, 255, 0.08); }
.nav-item.ativo { background: var(--azul-claro); }
.nav-item .selo { margin-left: auto; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 13px; background: var(--laranja); color: #fff; font-size: 14px; font-weight: 700; display: grid; place-items: center; }
.lateral-sair { margin-top: auto; }
.conteudo { padding: 32px 40px 24px; min-width: 0; }
.faixa-aviso { margin: -32px -40px 24px; padding: 10px 40px; background: #FFF3C4; color: #5C4500; font-weight: 700; text-align: center; }
.cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.cabecalho h1, .conteudo h1 { font-size: 32px; line-height: 1.15; color: var(--azul); }
.sub { color: var(--mudo); margin-top: 6px; }
.voltar { margin-bottom: 14px; font-weight: 600; }
h2 { font-size: 20px; color: var(--azul); }
.periodo { display: flex; align-items: center; gap: 12px; }
.periodo label { margin: 0; color: var(--mudo); }
.periodo select { width: auto; min-width: 180px; }

.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 24px; }
.card { background: #fff; border: 1px solid var(--borda-suave); border-radius: 16px; padding: 20px 24px; display: flex; flex-direction: column; gap: 2px; }
.card-titulo { font-weight: 600; color: #3D4348; }
.card-valor { font-size: 40px; line-height: 1.15; color: var(--azul); font-weight: 700; }
.card-valor.laranja { color: var(--laranja); }
.card-nota { color: var(--mudo); font-size: 15px; }

.meio { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 20px; margin-bottom: 24px; }
.meio-cliente { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.painel-cartao { background: #fff; border: 1px solid var(--borda-suave); border-radius: 16px; padding: 22px 24px; margin-bottom: 20px; }
.meio .painel-cartao { margin-bottom: 0; }
.painel-cartao.sem-padding { padding: 0; overflow: hidden; }
.com-padding { padding: 20px 24px 14px; }
.titulo-linha { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.titulo-linha a { font-weight: 600; }
.titulo-linha.com-padding { margin-bottom: 0; }
.grafico { width: 100%; height: auto; max-height: 340px; display: block; margin-top: 8px; }
.grafico .eixo { stroke: var(--borda-suave); stroke-width: 1.5; }
.grafico .barra-g { fill: var(--azul); }
.grafico text { fill: var(--mudo); font: 400 13px var(--sans); }
.alerta-mini { display: block; background: var(--creme-laranja); border: 1px solid var(--borda-laranja); border-radius: 12px; padding: 12px 16px; margin-bottom: 12px; text-decoration: none; color: inherit; }
.alerta-mini strong { display: block; color: var(--azul); }
.alerta-mini span { color: var(--laranja-escuro); }
.vazio { color: var(--mudo); padding: 16px; text-align: center; }

.faixa-alerta { display: flex; align-items: center; gap: 16px; background: #FBE9DC; border: 1px solid #F0C9AE; border-radius: 14px; padding: 16px 20px; margin-bottom: 24px; color: var(--laranja-escuro); }
.faixa-alerta .icone { width: 28px; height: 28px; }
.faixa-alerta strong { display: block; font-size: 18px; }
.faixa-alerta form { margin-left: auto; }

/* Tabelas: ocupam toda a largura; telas largas mostram colunas a mais (.so-largo) */
.tabela-rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mudo); background: var(--fundo); padding: 14px 16px; border-top: 1px solid var(--borda-suave); border-bottom: 1px solid var(--borda-suave); white-space: nowrap; font-weight: 600; }
td { padding: 14px 16px; border-bottom: 1px solid var(--borda-suave); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
th:first-child, td:first-child { padding-left: 24px; }
th:last-child, td:last-child { padding-right: 24px; }
.mono { font-family: var(--mono); font-size: 14.5px; white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.destaque { color: var(--laranja); font-weight: 700; }
.email { color: var(--mudo); font-size: 15px; }
.link-forte { font-weight: 600; }
.so-largo { display: none; }
@media (min-width: 1800px) { th.so-largo, td.so-largo { display: table-cell; } }

.pilula { display: inline-block; padding: 2px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.pilula.ok { background: var(--verde-fundo); color: var(--verde); }
.pilula.neutro { background: #ECE8DC; color: #5B5448; }
.pilula.erro { background: var(--vermelho-fundo); color: var(--vermelho); }
.pilula.alerta { background: #FBE3D2; color: var(--laranja-escuro); }

.filtros { display: grid; grid-template-columns: minmax(0, 1fr) 200px 190px auto auto; gap: 16px; align-items: end; }
.filtros label { margin: 0 0 6px; }
.filtros .marcar { margin: 0; min-height: 48px; }
.paginacao { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 24px; border-top: 1px solid var(--borda-suave); color: var(--mudo); }
.paginacao-botoes { display: flex; gap: 12px; }

.lista-maquinas, .lista-locais { list-style: none; margin: 0; padding: 0; }
.lista-maquinas li { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr) 48px; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--borda-suave); }
.lista-maquinas li:last-child { border-bottom: 0; }
.maq-nome strong { display: block; }
.maq-nome span, .maq-data { color: var(--mudo); font-size: 15px; }
.maq-n { text-align: right; font-size: 18px; }
.lista-locais li { padding: 8px 0 12px; }
.loc-linha { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.loc-linha span { color: var(--mudo); }
.barra-prop { width: 100%; height: 8px; display: block; }
.barra-prop .fundo { fill: #ECE8DC; }
.barra-prop .valor { fill: var(--azul); }

.abas { display: inline-flex; gap: 6px; background: #EBE7DB; border-radius: 12px; padding: 5px; margin: 4px 0 20px; }
.abas a { padding: 10px 18px; border-radius: 9px; text-decoration: none; font-weight: 600; color: var(--mudo); }
.abas a.ativa { background: #fff; color: var(--azul); }
.regras p { color: var(--mudo); margin-top: 4px; }
.form-regras .grade-regras { display: grid; grid-template-columns: repeat(3, minmax(0, 240px)); gap: 16px; margin: 6px 0 16px; }
.form-regras .acoes { display: flex; gap: 12px; }
.alerta-cartao { background: #fff; border: 1px solid var(--borda-suave); border-radius: 16px; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 16px; }
.alerta-texto h3 { font-size: 20px; color: var(--azul); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.alerta-texto .detalhe { margin-top: 6px; font-size: 17px; }
.alerta-texto .data { color: var(--mudo); font-size: 15px; margin-top: 2px; }
.alerta-acoes { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.alerta-acoes form { margin: 0; }
.rodape { margin-top: 36px; font-size: 13px; color: var(--mudo); }

/* Notebooks de 1366 px: cartoes e margens mais compactos para os titulos caberem em uma linha */
@media (max-width: 1500px) {
  .conteudo { padding: 28px 28px 20px; }
  .faixa-aviso { margin: -28px -28px 20px; padding: 10px 28px; }
  .cards { gap: 16px; }
  .card { padding: 18px 18px; }
  .card-titulo { font-size: 15px; }
  .card-valor { font-size: 36px; }
  .card-nota { font-size: 14px; }
}

/* Telas largas: mais espaco, as tabelas continuam ocupando tudo */
@media (min-width: 2200px) {
  .conteudo { padding: 40px 56px 28px; }
  .faixa-aviso { margin: -40px -56px 28px; padding: 10px 56px; }
  .app { grid-template-columns: 272px minmax(0, 1fr); }
  .meio { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); }
  td, th { padding-top: 16px; padding-bottom: 16px; }
}

/* Telas medias e pequenas */
@media (max-width: 1180px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meio, .meio-cliente { grid-template-columns: minmax(0, 1fr); }
  .filtros { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .conteudo { padding: 28px 24px 20px; }
  .faixa-aviso { margin: -28px -24px 20px; padding: 10px 24px; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 14px 16px; }
  .marca-lateral { padding: 0 12px 0 0; }
  .lateral nav { flex-direction: row; flex-wrap: wrap; }
  .lateral-sair { margin: 0 0 0 auto; }
  .alerta-cartao { flex-direction: column; align-items: flex-start; }
  .alerta-acoes { justify-content: flex-start; }
  .faixa-alerta { flex-wrap: wrap; }
  .faixa-alerta form { margin-left: 0; }
  .ativar-passos { flex-direction: column; }
  .grade-codigos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-regras .grade-regras { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .cards, .filtros { grid-template-columns: minmax(0, 1fr); }
  .cartao-auth { padding: 28px 22px; }
  .conteudo { padding: 20px 16px; }
}