/* Camada visual do que é NOVO no sistema: entrada e coleta.
   O painel aprovado traz o próprio estilo — aqui só o que ele não tinha,
   usando as mesmas variáveis para não destoar. */

/* ---------------------------------------------------------------
   TELA DE ENTRADA — refeita em 13/09/2026.
   Estava clara (cartao branco) enquanto o sistema inteiro e preto e
   ouro: a primeira tela desmentia a marca antes de o usuario entrar.
   Agora usa as MESMAS variaveis do painel (--fundo, --ouro, --titulo),
   entao qualquer mudanca de paleta arrasta o login junto.
   --------------------------------------------------------------- */

#capa-login {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  padding: 20px;
  background:
    radial-gradient(900px 520px at 50% -12%, rgba(229,177,58,.16), transparent 70%),
    #000;
  overflow: auto;
}

.cartao-login {
  width: 100%; max-width: 372px;
  background: linear-gradient(180deg, #121212 0%, #0A0A0A 100%);
  border: 1px solid rgba(229,177,58,.22);
  border-radius: 4px;
  padding: 34px 28px 24px;
  box-shadow: 0 24px 70px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.6);
  font-family: Inter, Barlow, -apple-system, "Segoe UI", Arial, sans-serif;
  color: #fff;
  text-align: center;
}

/* fio dourado no topo do cartao */
.cartao-login::before {
  content: ""; display: block;
  height: 2px; margin: -34px -28px 26px;
  background: linear-gradient(90deg, transparent, #E5B13A, #F5C94A, #E5B13A, transparent);
}

.marca-login {
  width: 100%; max-width: 212px; height: 60px; margin: 2px auto 18px;
  border-radius: 0; background: none;
  background-image: var(--logo);
  background-size: contain; background-repeat: no-repeat; background-position: center;
}

.cartao-login h1 {
  margin: 0;
  font-family: Oswald, Barlow, "Segoe UI", Arial, sans-serif;
  font-size: 27px; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase;
  color: #F5C94A;
}
.cartao-login .sub {
  margin: 7px 0 28px;
  font-size: 10.5px; letter-spacing: .10em; text-transform: uppercase;
  color: #8A8A8A;
}

.cartao-login form { text-align: left; }

.cartao-login label {
  display: block; margin: 0 0 6px;
  font-size: 10px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: #8A8A8A;
}

.cartao-login input {
  width: 100%; box-sizing: border-box;
  padding: 12px 13px; margin-bottom: 16px;
  font: inherit; font-size: 15px; color: #fff;
  background: #000;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 2px;
  transition: border-color .15s, box-shadow .15s;
}
.cartao-login input::placeholder { color: #5A5A5A; }
.cartao-login input:focus {
  outline: none;
  border-color: #E5B13A;
  box-shadow: 0 0 0 3px rgba(229,177,58,.16);
}
/* o preenchimento automatico do Chrome pintava o campo de branco */
.cartao-login input:-webkit-autofill,
.cartao-login input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #000 inset;
  caret-color: #fff;
}

/* olho de ver a senha: em celular, senha longa errada e o motivo n1 de
   nao conseguir entrar */
.campo-senha { position: relative; display: block; }
.campo-senha input { padding-right: 44px; }
.campo-senha .olho {
  position: absolute; top: 7px; right: 6px;
  width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 2px;
  color: #8A8A8A; cursor: pointer;
}
.campo-senha .olho:hover { color: #E5B13A; background: rgba(229,177,58,.08); }
.campo-senha .olho svg { width: 18px; height: 18px; }

.cartao-login button[type="submit"] {
  width: 100%; padding: 13px;
  font-family: Oswald, Barlow, "Segoe UI", Arial, sans-serif;
  font-size: 14px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: #000;
  background: linear-gradient(180deg, #F5C94A, #C9A24A);
  border: 0; border-radius: 2px; cursor: pointer;
  transition: filter .15s, transform .05s;
}
.cartao-login button[type="submit"]:hover { filter: brightness(1.08); }
.cartao-login button[type="submit"]:active { transform: translateY(1px); }
.cartao-login button[type="submit"]:disabled { opacity: .55; cursor: default; filter: none; }

#login-erro {
  min-height: 15px; margin: -6px 0 12px;
  font-size: 12.5px; color: #E97070;
}

.rodape-login {
  margin: 20px 0 0; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.07);
  font-size: 10.5px; line-height: 1.5; color: #6E6E6E; text-align: center;
}

@media (max-width: 420px) {
  .cartao-login { padding: 28px 20px 20px; }
  .cartao-login::before { margin: -28px -20px 22px; }
  .marca-login { max-width: 186px; height: 52px; }
  .cartao-login h1 { font-size: 23px; }
}

/* ---- Coleta ---- */
/* Os dois botoes (Importar e Consultar) sao irmaos dentro da barra e
   estavam empilhando um sobre o outro: a barra nao tinha eixo e os
   paineis suspensos entravam no fluxo. Agora a barra e uma linha, e os
   paineis sao absolutos — eles flutuam, nao empurram. */
#barra-coleta { position: fixed; right: 18px; bottom: 18px; z-index: 900;
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  font-family: Barlow, -apple-system, "Segoe UI", Arial, sans-serif; }
#btn-coleta {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; font: inherit; font-size: 13px; font-weight: 600;
  color: #fff; background: #17181A; border: 0; border-radius: 999px;
  cursor: pointer; box-shadow: 0 6px 20px rgba(20,20,18,.22);
}
#btn-coleta .pt { width: 8px; height: 8px; border-radius: 50%; background: #C9A24A; }
#btn-coleta.rodando .pt { background: #3F7A34; animation: pulsa 1.2s infinite; }
@keyframes pulsa { 50% { opacity: .25; } }
#painel-coleta {
  position: absolute; right: 0; bottom: 52px; width: 460px; max-width: 88vw;
  background: #fff; border: 1px solid #E3E0D8; border-radius: 10px;
  box-shadow: 0 18px 50px rgba(20,20,18,.20); overflow: hidden;
}
#painel-coleta header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid #EFEDE7; font-size: 13px;
}
#painel-coleta header button { border: 0; background: none; font-size: 20px; cursor: pointer; color: #63615A; }
#painel-coleta .corpo { padding: 14px; }
#painel-coleta .aviso {
  margin: 0 0 14px; padding: 10px 12px; font-size: 12px; line-height: 1.5;
  color: #85500E; background: #FBEEDA; border-radius: 6px;
}
#painel-coleta label { display: block; margin-bottom: 5px; font-size: 10px;
  font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #94918A; }
#painel-coleta select { width: 100%; padding: 9px 10px; font: inherit; font-size: 13px;
  border: 1px solid #E3E0D8; border-radius: 6px; background: #FAF9F6; }
#painel-coleta .acoes { display: flex; gap: 8px; margin: 12px 0; }
#painel-coleta .acoes button { flex: 1; padding: 9px; font: inherit; font-size: 13px;
  font-weight: 600; border-radius: 6px; cursor: pointer; border: 0; color: #fff; background: #17181A; }
#parar-coleta { background: #B3372F !important; }
#log-coleta {
  margin: 0; padding: 10px; height: 190px; overflow: auto;
  font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; line-height: 1.55;
  color: #E3E0D8; background: #17181A; border-radius: 6px; white-space: pre-wrap;
}

/* ---- Detalhamento dos débitos na ficha ---- */
.detalhe-fiscal { margin-top: 16px; }
.detalhe-titulo {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 8px; font-size: 10px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: #94918A;
}
.detalhe-titulo span {
  padding: 1px 7px; border-radius: 999px;
  background: #EFEDE7; color: #63615A; font-size: 10px; letter-spacing: 0;
}
.tabela-debitos { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tabela-debitos th {
  padding: 6px 8px; text-align: left; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #94918A;
  border-bottom: 1px solid #EFEDE7;
}
.tabela-debitos td { padding: 7px 8px; border-bottom: 1px solid #F3F1EB; vertical-align: middle; }
.tabela-debitos tr:last-child td { border-bottom: 0; }
.tabela-debitos .num { text-align: right; font-family: ui-monospace, Consolas, monospace; }
.tabela-debitos .forte { font-weight: 600; color: #1B1C1A; }
.tabela-debitos .codigo { font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: #94918A; }

/* ---------- Importação manual de relatório ---------- */

#btn-importar {
  display: inline-flex; align-items: center; margin: 0; white-space: nowrap;
  border: 1px solid #D9D4C7; background: #FFFDF8; color: #34322C;
  border-radius: 999px; padding: 9px 16px; font: inherit; font-size: 12px;
  font-weight: 600; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.10);
}
#btn-importar:hover { border-color: #C9A24A; }

#painel-importar {
  position: absolute; right: 0; bottom: 52px;
  width: 360px; max-width: 88vw; background: #FFFDF8;
  border: 1px solid #D9D4C7; border-radius: 12px; overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.16);
}
#painel-importar header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; border-bottom: 1px solid #E8E3D6; background: #F6F2E7;
}
#painel-importar header button { border: 0; background: none; font-size: 20px; cursor: pointer; color: #63615A; }
#painel-importar .corpo { padding: 14px; }
#painel-importar .aviso {
  margin: 0 0 12px; font-size: 11.5px; line-height: 1.55; color: #63615A;
}

#solta-pdf {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 22px 14px; text-align: center; cursor: pointer;
  border: 1.5px dashed #C9C3B2; border-radius: 10px; background: #FBF8F0;
  font-size: 12px; color: #34322C;
}
#solta-pdf small { font-size: 10.5px; color: #8A8577; }
#solta-pdf:hover, #solta-pdf:focus-visible, #solta-pdf.sobre {
  border-color: #C9A24A; background: #FDF6E6; outline: none;
}

#lista-importar { list-style: none; margin: 12px 0 0; padding: 0; max-height: 190px; overflow-y: auto; }
#lista-importar li {
  padding: 7px 9px; margin-bottom: 5px; border-radius: 7px;
  font-size: 11.5px; line-height: 1.45; border-left: 3px solid #D9D4C7; background: #F6F2E7;
}
/* Cor nunca sozinha: o texto de cada linha já diz o que aconteceu. */
#lista-importar li.ok    { border-left-color: #3F7A34; }
#lista-importar li.igual { border-left-color: #8A8577; }
#lista-importar li.ruim  { border-left-color: #A33A2A; background: #FBEDEA; }
#lista-importar li.indo  { border-left-color: #C9A24A; opacity: .75; }

/* ---------- Documentos guardados (versão servidor) ---------- */

.doc-linha { padding: 9px 0; border-bottom: 1px solid #EFEBDF; }
.doc-linha:last-child { border-bottom: 0; }
.doc-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.doc-topo b { font-size: 12.5px; }
.doc-acoes { display: flex; align-items: center; gap: 10px; margin-top: 5px; flex-wrap: wrap; }
.doc-antigos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 5px; padding-left: 2px; }
.doc-antigos .elo-doc { font-size: 10.5px; opacity: .75; }

#painel-coleta .acoes { flex-wrap: wrap; gap: 8px; }
#painel-coleta .acoes #iniciar-cnd {
  background: #FFFDF8; color: #34322C; border: 1px solid #D9D4C7;
}
#painel-coleta .acoes #iniciar-cnd:hover { border-color: #C9A24A; background: #FDF6E6; }
#painel-coleta .aviso-cnd { margin: 10px 0 0; }

/* ---------- Baixar certidão direto da matriz ---------- */

.cel-doc { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.cel-doc .nulo { font-size: 10.5px; }
.baixar-cnd {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600; text-decoration: none;
  color: #34322C; background: #FFFDF8; border: 1px solid #D9D4C7;
  border-radius: 999px; padding: 2px 8px 2px 6px; cursor: pointer;
}
.baixar-cnd svg { width: 12px; height: 12px; }
.baixar-cnd:hover { border-color: #C9A24A; background: #FDF6E6; }



/* Tema aprovado: preto e dourado para coleta, importação e documentos. */
#btn-coleta { background: linear-gradient(135deg,#E4B448,#8D6118); box-shadow:0 8px 26px rgba(0,0,0,.38),0 0 18px rgba(216,169,46,.16); }
#btn-coleta .pt { background:#F7D274; box-shadow:0 0 10px currentColor; }
/* O Importar ficava claro num painel preto: sumia contra a barra e dava a
   impressao de estar por baixo do Consultar. Vazado, ele fica visivel e
   continua sendo o botao secundario dos dois. */
#btn-importar { color:#E9C97A; background:rgba(255,255,255,.04); border-color:rgba(216,169,46,.34);
  box-shadow:0 8px 22px rgba(0,0,0,.34); }
/* OS DOIS BOTOES NA MESMA LINHA — 13/09/2026.
   Eles nasceram em arquivos diferentes e cada um com seu tamanho: 12px contra
   13px de fonte, alturas diferentes, e o Importar subia alguns pixels em
   relacao ao Consultar — com zoom de tela virava sobreposicao. Aqui os dois
   passam a ter a MESMA altura e o mesmo alinhamento, e a barra deixa de
   depender do acaso. */
#barra-coleta{ align-items: stretch; }
#btn-importar, #btn-coleta{
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 18px;
  font-size: 12.5px;
  line-height: 1;
  align-items: center;
}
#painel-importar, #painel-coleta{ align-self: flex-end; }
#btn-importar:hover { background:rgba(216,169,46,.13); border-color:#E4B448; }
#painel-coleta,#painel-importar { color:#F5F1E8; background:linear-gradient(145deg,#1C1C1C,#0D0D0D); border-color:rgba(216,169,46,.28); box-shadow:0 20px 60px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.035); }
#painel-coleta header,#painel-importar header { background:linear-gradient(90deg,rgba(216,169,46,.13),transparent); border-bottom-color:rgba(255,255,255,.09); }
#painel-coleta header button,#painel-importar header button { color:#C7C2B7; }
#painel-coleta .aviso { color:#F4D58A; background:rgba(216,169,46,.11); border:1px solid rgba(216,169,46,.2); }
#painel-coleta label { color:#8E8A80; }
#painel-coleta select { color:#F5F1E8; background:#101010; border-color:rgba(255,255,255,.14); }
#painel-coleta .acoes button { border-radius:7px; background:linear-gradient(135deg,#DDAF43,#91631B); }
#painel-coleta .acoes #iniciar-cnd { color:#F5F1E8; background:rgba(255,255,255,.04); border-color:rgba(216,169,46,.34); }
#painel-coleta .acoes #iniciar-cnd:hover { background:rgba(216,169,46,.13); }
#log-coleta { background:#050505; border:1px solid rgba(255,255,255,.08); }
#painel-importar .aviso { color:#BEB9AE; }
#solta-pdf { color:#F5F1E8; background:rgba(255,255,255,.035); border-color:rgba(216,169,46,.38); }
#solta-pdf small { color:#88847B; }
#solta-pdf:hover,#solta-pdf:focus-visible,#solta-pdf.sobre { background:rgba(216,169,46,.1); border-color:#E4B448; }
#lista-importar li { color:#D8D1C3; background:rgba(255,255,255,.045); border-left-color:#8E6418; }
#lista-importar li.ok { border-left-color:#36C875; background:rgba(54,200,117,.08); }
#lista-importar li.ruim { border-left-color:#F06A61; background:rgba(240,106,97,.09); }
.doc-linha { border-bottom-color:rgba(255,255,255,.08); }
.baixar-cnd { color:#F5D16F; background:rgba(216,169,46,.08); border-color:rgba(216,169,46,.34); }
.baixar-cnd:hover { background:rgba(216,169,46,.16); border-color:#E4B448; }
.cel-doc .nulo { color:#88847B; }

/* Tela do robo embutida no painel: o portal da Receita aparece aqui dentro,
   em vez de exigir outra aba. O robo roda no servidor; esta e a janela dele. */
#painel-coleta:has(#tela-robo:not([hidden])) { width: min(96vw, 1180px); }
#tela-robo { margin-top: 10px; border: 1px solid rgba(197,150,42,.45); border-radius: 6px; overflow: hidden; background: #000; }
#tela-robo .tela-robo-cabeca { padding: 6px 10px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: #E5B13A; background: rgba(229,177,58,.10); border-bottom: 1px solid rgba(197,150,42,.30); }
#frame-robo { display: block; width: 100%; height: 62vh; min-height: 420px; border: 0; background: #000; }

/* FECHAR-TELA-ROBO */
#painel-coleta:has(#tela-robo:not([hidden])) > header {
  display: flex !important; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: rgba(229,177,58,.12);
  border-bottom: 1px solid rgba(197,150,42,.4); flex: none;
}
#painel-coleta:has(#tela-robo:not([hidden])) #fechar-coleta {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 38px; height: 38px; font-size: 26px; line-height: 1;
  border-radius: 6px; cursor: pointer;
  background: #A32F2F; color: #fff; border: 0;
}
#painel-coleta:has(#tela-robo:not([hidden])) #fechar-coleta:hover { background: #c23b3b; }

/* JANELA-FLUTUANTE-ROBO */
/* A janela da Receita nao pode sequestrar o sistema: fica flutuante, menor que
   a tela, arrastavel pelo cabecalho e com botao de encolher. Assim da para
   consultar uma empresa e continuar usando a ficha de outra. */
#painel-coleta:has(#tela-robo:not([hidden])) {
  position: fixed; top: 60px; right: 24px; left: auto; bottom: auto;
  width: min(92vw, 900px); height: min(72vh, 620px);
  max-width: none; max-height: none;
  display: flex; flex-direction: column;
  z-index: 9000; border-radius: 8px;
  box-shadow: 0 18px 60px rgba(0,0,0,.6);
  resize: both; overflow: auto;
}
#painel-coleta:has(#tela-robo:not([hidden])) > header {
  display: flex !important; align-items: center; gap: 8px;
  padding: 8px 12px; background: rgba(229,177,58,.12);
  border-bottom: 1px solid rgba(197,150,42,.4); flex: none; cursor: move;
}
#painel-coleta:has(#tela-robo:not([hidden])) > header strong { flex: 1; }
#painel-coleta:has(#tela-robo:not([hidden])) .corpo {
  display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 6px;
}
#painel-coleta:has(#tela-robo:not([hidden])) #log-coleta,
#painel-coleta:has(#tela-robo:not([hidden])) .aviso,
#painel-coleta:has(#tela-robo:not([hidden])) label[for="alvo-coleta"],
#painel-coleta:has(#tela-robo:not([hidden])) #alvo-coleta,
#painel-coleta:has(#tela-robo:not([hidden])) .acoes { display: none !important; }
#painel-coleta:has(#tela-robo:not([hidden])) #tela-robo {
  margin: 0; flex: 1; display: flex; flex-direction: column; min-height: 0; border: 0;
}
#painel-coleta:has(#tela-robo:not([hidden])) #frame-robo { flex: 1; height: auto; min-height: 0; }

/* encolhida: vira so a barra de titulo, e o sistema fica livre */
#painel-coleta.encolhida:has(#tela-robo:not([hidden])) { height: auto !important; resize: none; }
#painel-coleta.encolhida .corpo { display: none !important; }

#btn-encolher-tela, #fechar-coleta {
  width: 34px; height: 30px; border: 0; border-radius: 6px; cursor: pointer;
  font-size: 18px; line-height: 1; color: #fff;
}
#btn-encolher-tela { background: #4B4840; }
#painel-coleta:has(#tela-robo:not([hidden])) #fechar-coleta { background: #A32F2F; font-size: 22px; }