/* Space Grotesk (licença SIL Open Font License), servida pelo próprio sistema */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fontes/space-grotesk-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fontes/space-grotesk-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fontes/space-grotesk-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fontes/space-grotesk-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fontes/space-grotesk-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fontes/space-grotesk-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fontes/space-grotesk-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fontes/space-grotesk-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Identidade visual B2DCOM
   Azul da marca #0447FD, azul-marinho #141E48, grafite #1E1E1E, fonte Space Grotesk */
:root {
  color-scheme: light;
  --marca: #0447FD;
  --marca-escura: #0336C7;
  --marinho: #141E48;
  --fundo: #F4F4F4;
  --superficie: #FFFFFF;
  --lateral: #1E1E1E;
  --lateral-cartao: #272727;
  --lateral-borda: #343434;
  --lateral-texto: #B9B9BE;
  --lateral-ativo: #FFFFFF;
  --texto: #141E48;
  --suave: #5C6380;
  --linha: #DCDEE6;
  --acento: #0447FD;
  --acento-texto: #FFFFFF;
  --pago: #157347;
  --pago-fundo: #E2F4EA;
  --gerado: #0447FD;
  --gerado-fundo: #E6ECFF;
  --alerta: #8A5200;
  --alerta-fundo: #FBEFD9;
  --erro: #C0281D;
  --erro-fundo: #FCE7E5;
  --neutro-fundo: #ECEDF2;
  --raio: 8px;
  --raio-grande: 14px;
  --fonte: "Space Grotesk", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --fundo: #1E1E1E;
    --superficie: #272727;
    --lateral: #161616;
    --lateral-cartao: #232323;
    --lateral-borda: #303030;
    --texto: #F4F4F4;
    --suave: #A5A8B4;
    --linha: #383838;
    --acento: #6B90FF;
    --acento-texto: #FFFFFF;
    --pago: #5FCB8F;
    --pago-fundo: #1B3527;
    --gerado: #8CA9FF;
    --gerado-fundo: #1C2547;
    --alerta: #E8B15E;
    --alerta-fundo: #3A2C14;
    --erro: #F2948B;
    --erro-fundo: #3D1B19;
    --neutro-fundo: #303030;
  }
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fundo);
  font-variant-numeric: tabular-nums;
}

a { color: var(--acento); }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }

/* ---------- estrutura ---------- */
.estrutura { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }

.lateral {
  background: var(--lateral);
  color: var(--lateral-texto);
  padding: 24px 0;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.marca { padding: 0 20px 22px; }
.marca img { display: block; width: 150px; height: auto; }

.lateral nav a {
  display: block;
  padding: 10px 24px;
  color: var(--lateral-texto);
  text-decoration: none;
  border-left: 3px solid transparent;
}
.lateral nav a:hover { color: var(--lateral-ativo); background: rgba(255,255,255,.04); }
.lateral nav a[aria-current="page"] { color: var(--lateral-ativo); border-left-color: var(--marca); font-weight: 600; background: rgba(4,71,253,.14); }

.empresa-atual { margin: 0 16px 16px; padding: 12px 14px; border-radius: var(--raio-grande); background: var(--lateral-cartao); border: 1px solid var(--lateral-borda); display: flex; flex-direction: column; gap: 2px; }
.empresa-atual strong { color: var(--lateral-ativo); font-size: 1rem; }
.empresa-atual a { color: var(--lateral-ativo); font-size: .85rem; margin-top: 6px; }
.nav-admin { margin-top: 20px; }
.nav-admin > span { display: block; padding: 0 24px 4px; opacity: .7; }
.usuario-atual { margin-top: auto; padding: 16px 24px 0; display: flex; flex-direction: column; gap: 4px; font-size: .9rem; }
.usuario-atual span { color: var(--lateral-ativo); }
.usuario-atual a, .usuario-atual button { color: var(--lateral-texto); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; text-align: left; }

main { padding: 32px 40px 64px; max-width: 1120px; width: 100%; }

.aviso-ambiente {
  margin: -32px -40px 24px;
  padding: 10px 40px;
  font-size: .9rem;
  background: var(--alerta-fundo);
  color: var(--alerta);
  border-bottom: 1px solid var(--linha);
}

/* ---------- tipografia ---------- */
h1 { font-size: 1.85rem; line-height: 1.15; margin: 0 0 4px; letter-spacing: -.02em; font-weight: 600; }
h2 { font-size: 1.2rem; margin: 40px 0 12px; font-weight: 600; letter-spacing: -.01em; }
h3 { font-size: 1rem; margin: 0 0 8px; }
.sub { color: var(--suave); margin: 0 0 24px; }
.suave { color: var(--suave); }
.pequeno { font-size: .875rem; }

.cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.cabecalho .sub { margin-bottom: 0; }

/* ---------- painel do mês (o destaque da página inicial) ---------- */
.mes {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  padding: 28px 32px;
}
.mes h1 { font-size: 2.6rem; font-weight: 500; letter-spacing: -.03em; }
.mes .resumo { font-size: 1.15rem; margin: 8px 0 24px; max-width: 60ch; }
.mes .resumo strong { font-size: 1.4rem; }

.barra { display: flex; height: 18px; border-radius: 9px; overflow: hidden; background: var(--neutro-fundo); }
.barra span { display: block; height: 100%; }
.barra .paga { background: var(--pago); }
.barra .emitida { background: var(--marca); }
.barra .vencida { background: var(--alerta); }
.barra .erro { background: var(--erro); }
.barra .aguardando { background: var(--suave); opacity: .35; }

.legenda { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 14px 0 0; padding: 0; list-style: none; font-size: .95rem; }
.legenda li { display: flex; align-items: center; gap: 8px; }
.legenda i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.legenda .paga i { background: var(--pago); }
.legenda .emitida i { background: var(--marca); }
.legenda .vencida i { background: var(--alerta); }
.legenda .erro i { background: var(--erro); }
.legenda .aguardando i { background: var(--suave); opacity: .5; }

.numeros { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linha); }
.numeros div { min-width: 140px; }
.numeros dt { color: var(--suave); font-size: .875rem; }
.numeros dd { margin: 2px 0 0; font-size: 1.2rem; font-weight: 700; }

/* ---------- tabelas ---------- */
.tabela-rolagem { overflow-x: auto; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-grande); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--linha); vertical-align: top; }
th { font-size: .85rem; color: var(--suave); font-weight: 700; background: var(--superficie); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--neutro-fundo); }
td.num, th.num { text-align: right; white-space: nowrap; }
td a.linha-link { color: var(--texto); font-weight: 700; text-decoration: none; }
td a.linha-link:hover { text-decoration: underline; }

.vazio { background: var(--superficie); border: 1px dashed var(--linha); border-radius: var(--raio); padding: 28px; }
.vazio p { margin: 0 0 12px; }

/* ---------- situação ---------- */
.situacao { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.situacao::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.s-paga, .s-ativa { color: var(--pago); background: var(--pago-fundo); }
.s-emitida { color: var(--gerado); background: var(--gerado-fundo); }
.s-vencida, .s-pausada { color: var(--alerta); background: var(--alerta-fundo); }
.s-erro { color: var(--erro); background: var(--erro-fundo); }
.s-aguardando, .s-cancelada { color: var(--suave); background: var(--neutro-fundo); }

/* ---------- formulários ---------- */
form.ficha { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-grande); padding: 24px; max-width: 760px; }
fieldset { border: 0; padding: 0; margin: 0 0 24px; }
legend { font-weight: 700; font-size: 1.05rem; margin-bottom: 12px; padding: 0; }
.grade { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.c2 { grid-column: span 2; } .c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c6 { grid-column: span 6; } .c1 { grid-column: span 1; }
label { display: block; font-weight: 700; font-size: .92rem; margin-bottom: 4px; }
.dica { display: block; font-weight: 400; color: var(--suave); font-size: .85rem; margin-top: 4px; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=tel], select, textarea {
  width: 100%;
  font: inherit;
  color: var(--texto);
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 9px 11px;
}
input:focus, select:focus, textarea:focus { border-color: var(--acento); outline: 2px solid var(--acento); outline-offset: 0; }
.campo-erro input, .campo-erro select { border-color: var(--erro); }
.msg-erro { color: var(--erro); font-size: .85rem; margin-top: 4px; display: block; }
.acoes { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.botao {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--raio);
  border: 1px solid var(--marca);
  background: var(--marca);
  color: #FFFFFF;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.3;
}
.botao:hover { background: var(--marca-escura); border-color: var(--marca-escura); }
.botao.secundario:hover, .botao.perigo:hover { background: var(--neutro-fundo); }
.botao.secundario { background: transparent; color: var(--acento); }
.botao.perigo { background: transparent; color: var(--erro); border-color: var(--erro); }
.botao.pequeno { padding: 5px 12px; font-size: .875rem; }
form.inline { display: inline; }

/* ---------- mensagens ---------- */
.mensagens { list-style: none; padding: 0; margin: 0 0 24px; }
.mensagens li { padding: 12px 16px; border-radius: var(--raio); margin-bottom: 8px; border: 1px solid; }
.mensagens .sucesso { background: var(--pago-fundo); color: var(--pago); border-color: var(--pago); }
.mensagens .erro { background: var(--erro-fundo); color: var(--erro); border-color: var(--erro); }
.mensagens .info { background: var(--gerado-fundo); color: var(--gerado); border-color: var(--gerado); }

/* ---------- detalhes ---------- */
.colunas { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; }
.bloco { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-grande); padding: 20px 24px; }
.bloco + .bloco { margin-top: 16px; }
dl.dados { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; }
dl.dados dt { color: var(--suave); }
dl.dados dd { margin: 0; overflow-wrap: anywhere; }
.codigo { font-family: var(--fonte); letter-spacing: .02em; background: var(--fundo); border: 1px solid var(--linha); border-radius: var(--raio); padding: 8px 10px; display: block; overflow-wrap: anywhere; font-size: .9rem; }
.copiar { margin-top: 6px; }
.erro-destaque { background: var(--erro-fundo); color: var(--erro); border-radius: var(--raio); padding: 12px 14px; margin-bottom: 16px; }

.linha-tempo { list-style: none; padding: 0; margin: 0; }
.linha-tempo li { padding: 10px 0 10px 18px; border-left: 2px solid var(--linha); position: relative; font-size: .92rem; }
.linha-tempo li::before { content: ""; position: absolute; left: -6px; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--suave); }
.linha-tempo li.sucesso::before { background: var(--pago); }
.linha-tempo li.erro::before { background: var(--erro); }
.linha-tempo time { display: block; color: var(--suave); font-size: .8rem; }

.filtros { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; margin-bottom: 16px; }
.filtros label { margin: 0; }
.filtros select, .filtros input { width: auto; min-width: 180px; }
.abas { display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; }
.abas a { padding: 6px 14px; border-radius: 999px; text-decoration: none; color: var(--suave); border: 1px solid var(--linha); }
.abas a[aria-current="page"] { background: var(--texto); color: var(--fundo); border-color: var(--texto); }

/* ---------- telas de entrada (login, escolha da empresa) ---------- */
.entrada {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(ellipse 60% 38% at 50% 0%, rgba(4,71,253,.45), rgba(4,71,253,0) 70%),
    #1E1E1E;
}
.cartao-entrada {
  color-scheme: dark;
  --superficie: #272727; --texto: #F4F4F4; --suave: #A5A8B4; --linha: #383838; --fundo: #1E1E1E;
  --acento: #6B90FF; --neutro-fundo: #303030; --erro: #F2948B; --erro-fundo: #3D1B19;
  --pago: #5FCB8F; --pago-fundo: #1B3527; --alerta: #E8B15E; --alerta-fundo: #3A2C14;
  background: var(--superficie); color: var(--texto); border: 1px solid #343434;
  padding: 32px; border-radius: 18px; width: 100%; max-width: 420px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.cartao-entrada.largo { max-width: 720px; }
.marca-entrada { margin-bottom: 28px; }
.marca-entrada img { display: block; width: 170px; height: auto; }
.cartao-entrada h1 { font-size: 1.7rem; font-weight: 500; letter-spacing: -.02em; }
.botao.largo { width: 100%; padding: 12px; }
.lista-empresas { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 12px; }
.lista-empresas li { display: flex; justify-content: space-between; align-items: center; gap: 16px; border: 1px solid var(--linha); border-radius: var(--raio-grande); padding: 18px 20px; background: #1E1E1E; }
.lista-empresas li:hover { border-color: var(--marca); }
.lista-empresas li div { display: flex; flex-direction: column; gap: 2px; }
.lista-empresas strong { font-size: 1.2rem; font-weight: 600; }
.lista-empresas span { color: var(--suave); font-size: .92rem; }
.lista-empresas .selo { align-self: flex-start; margin-top: 6px; }
.rodape-entrada { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 16px; border-top: 1px solid var(--linha); font-size: .92rem; }
button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--acento); text-decoration: underline; cursor: pointer; }

.selo { display: inline-block; font-size: .8rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.selo-simulacao { color: var(--suave); background: var(--neutro-fundo); }
.selo-sandbox { color: var(--alerta); background: var(--alerta-fundo); }
.selo-producao { color: var(--pago); background: var(--pago-fundo); }

/* ---------- celular ---------- */
@media (max-width: 860px) {
  .estrutura { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; padding: 12px 0; }
  .marca { padding: 0 16px 8px; }
  .lateral nav { display: flex; overflow-x: auto; }
  .lateral nav a { border-left: 0; border-bottom: 3px solid transparent; padding: 8px 14px; white-space: nowrap; }
  .lateral nav a[aria-current="page"] { border-bottom-color: var(--acento); }
  .empresa-atual { margin: 0 16px 8px; }
  .nav-admin { margin-top: 4px; }
  .nav-admin > span { display: none; }
  .usuario-atual { padding: 8px 16px 0; flex-direction: row; flex-wrap: wrap; gap: 4px 16px; }
  .lista-empresas li { flex-direction: column; align-items: stretch; }
  main { padding: 24px 16px 48px; }
  .aviso-ambiente { margin: -24px -16px 20px; padding: 10px 16px; }
  .mes { padding: 20px; }
  .mes h1 { font-size: 1.9rem; }
  .colunas { grid-template-columns: 1fr; }
  .grade { grid-template-columns: 1fr 1fr; }
  .c1, .c2, .c3, .c4, .c6 { grid-column: span 2; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Botão principal com a seta em quadro, como no site da B2DCOM */
.botao.seta { display: inline-flex; align-items: center; gap: 12px; padding-right: 8px; }
.botao.seta::after {
  content: ""; width: 24px; height: 24px; border-radius: 5px; background: #FFFFFF;
  -webkit-mask: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230447FD' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12h12M13 7l5 5-5 5'/%3E%3C/svg%3E");
  background-size: 18px; background-repeat: no-repeat; background-position: center;
}
.marca span { display: block; margin-top: 8px; color: var(--lateral-texto); font-size: .82rem; letter-spacing: .02em; }

/* ---------- fechamento do mês ---------- */
.aviso-fechamento { background: var(--gerado-fundo); color: var(--gerado); border-radius: var(--raio); padding: 12px 16px; margin-bottom: 16px; }
.aviso-fechamento a { color: inherit; font-weight: 600; }
td.campo-erro input { border-color: var(--erro); }
tfoot td { border-top: 2px solid var(--linha); border-bottom: 0; background: var(--superficie); }
td input[name^="obs_"] { min-width: 170px; }
.tabela-fechamento td:first-child { min-width: 170px; }
.tabela-fechamento th, .tabela-fechamento td { padding: 12px 10px; }
td input[name^="ajuste_"] { min-width: 110px; text-align: right; }
form.inline-nf { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
form.inline-nf input[type=file] { max-width: 210px; font-size: .85rem; }