/* Sistema Comercial Mirante FM — tema de alto contraste (bege + preto) */
@font-face {
  font-family: "Lexend";
  src: url("../fonts/Lexend.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bege: #f4eee1;
  --bege-escuro: #e9dcc3;
  --superficie: #fffbf3;
  --tinta: #111111;
  --tinta-suave: #3d3a33;
  --borda: #c9b998;
  --marinho: #14193f;
  --laranja: #b84a00;      /* texto/botões: contraste AA sobre bege e com branco */
  --laranja-marca: #f07c00; /* decorativo, sempre com texto preto */
  --verde: #1e6b34;
  --vermelho: #a3191b;
  --amarelo: #f5c400;

  --bs-body-font-family: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-bg: var(--bege);
  --bs-body-color: var(--tinta);
  --bs-border-color: var(--borda);
  --bs-link-color: var(--marinho);
  --bs-link-color-rgb: 20, 25, 63;
  --bs-link-hover-color: var(--laranja);
  --bs-secondary-color: var(--tinta-suave);
}

body {
  background: var(--bege);
  color: var(--tinta);
  font-family: var(--bs-body-font-family);
  font-size: 0.95rem;
}

/* ---------- menu lateral ---------- */
:root { --largura-menu: 248px; }
.menu-lateral {
  --bs-offcanvas-width: var(--largura-menu);
  background: var(--bege-escuro);
  border-right: 4px solid var(--laranja-marca);
  display: flex;
  flex-direction: column;
}
.menu-topo { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1rem 0.5rem; }
.menu-topo img { height: 64px; }
.menu-nav { flex: 1; overflow-y: auto; padding: 0.5rem 0.75rem; display: flex; flex-direction: column; gap: 2px; }
.menu-secao {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--tinta-suave); padding: 1rem 0.75rem 0.35rem;
}
.menu-item {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.75rem; border-radius: 10px;
  color: var(--tinta); text-decoration: none; font-weight: 500;
}
.menu-item i { font-size: 1.1rem; width: 1.25rem; text-align: center; }
.menu-item:hover { background: rgba(17, 17, 17, 0.08); color: var(--tinta); }
.menu-item.ativo { background: var(--tinta); color: var(--bege); }
.menu-item.menu-destaque { background: var(--laranja); color: #fff; margin-top: 0.5rem; }
.menu-item.menu-destaque:hover { background: #8f3900; color: #fff; }
.badge-fila {
  margin-left: auto; background: var(--laranja); color: #fff; font-size: 0.72rem; font-weight: 700;
  border-radius: 999px; padding: 0.1rem 0.5rem;
}
.menu-item.ativo .badge-fila { background: var(--laranja-marca); color: var(--tinta); }
.menu-usuario {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1rem;
  border-top: 1px solid var(--borda); font-size: 0.82rem; line-height: 1.2;
}
.menu-usuario small { color: var(--tinta-suave); }
.menu-usuario .avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--tinta); color: var(--bege);
  display: grid; place-items: center; font-weight: 700; flex-shrink: 0;
}
.barra-mobile {
  position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 1rem; background: var(--bege-escuro); border-bottom: 4px solid var(--laranja-marca);
}
.barra-mobile img { height: 40px; }

/* Desktop: menu sempre visível, conteúdo deslocado */
@media (min-width: 992px) {
  .menu-lateral.offcanvas { visibility: visible !important; transform: none !important; transition: none; }
  .com-menu { margin-left: var(--largura-menu); }
}

/* ---------- conteúdo ---------- */
.pagina { max-width: 1320px; }
h1, .h1 { font-weight: 700; font-size: 1.6rem; letter-spacing: -0.01em; }
h2, .h2 { font-weight: 600; font-size: 1.2rem; }
.text-muted, .text-secondary { color: var(--tinta-suave) !important; }

.card, .painel {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 14px;
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--borda);
  font-weight: 600;
}

/* ---------- botões ---------- */
.btn { border-radius: 10px; font-weight: 500; }
.btn-primary {
  --bs-btn-bg: var(--tinta); --bs-btn-border-color: var(--tinta); --bs-btn-color: var(--bege);
  --bs-btn-hover-bg: #000; --bs-btn-hover-border-color: #000; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #000; --bs-btn-disabled-bg: #6b675e; --bs-btn-disabled-border-color: #6b675e;
}
.btn-laranja {
  --bs-btn-bg: var(--laranja); --bs-btn-border-color: var(--laranja); --bs-btn-color: #fff;
  --bs-btn-hover-bg: #8f3900; --bs-btn-hover-border-color: #8f3900; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #8f3900; --bs-btn-active-color: #fff;
}
.btn-outline-dark {
  --bs-btn-color: var(--tinta); --bs-btn-border-color: var(--tinta);
  --bs-btn-hover-bg: var(--tinta); --bs-btn-hover-color: var(--bege);
}
.btn-success { --bs-btn-bg: var(--verde); --bs-btn-border-color: var(--verde); }
.btn-danger { --bs-btn-bg: var(--vermelho); --bs-btn-border-color: var(--vermelho); }
.btn-outline-danger { --bs-btn-color: var(--vermelho); --bs-btn-border-color: var(--vermelho); }

/* ---------- formulários ---------- */
.form-control, .form-select {
  background-color: #fff;
  border: 1.5px solid #8c7f66;
  color: var(--tinta);
  border-radius: 10px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--tinta);
  box-shadow: 0 0 0 0.2rem rgba(240, 124, 0, 0.35);
}
.form-label { font-weight: 600; font-size: 0.85rem; margin-bottom: 0.25rem; }
.form-text { color: var(--tinta-suave); }
.errorlist { color: var(--vermelho); list-style: none; padding: 0; margin: 0.25rem 0 0; font-size: 0.85rem; }

/* ---------- tabelas ---------- */
.table { --bs-table-bg: transparent; --bs-table-color: var(--tinta); margin-bottom: 0; }
.table > thead th {
  background: var(--tinta); color: var(--bege); font-weight: 600; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.03em; border: 0;
}
.table > thead th:first-child { border-top-left-radius: 10px; }
.table > thead th:last-child { border-top-right-radius: 10px; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #f1e6cf; }
.table td { border-color: #e2d6bd; vertical-align: middle; }
.linha-link { cursor: pointer; }

/* ---------- status ---------- */
.status {
  display: inline-block; font-size: 0.75rem; font-weight: 600; border-radius: 999px;
  padding: 0.2rem 0.65rem; border: 1.5px solid currentColor; white-space: nowrap;
}
.status-ABERTA, .status-EM_ELABORACAO { color: var(--marinho); background: #e3e6f7; }
.status-FECHADA, .status-ENVIADO_OPERACOES, .status-ATIVO, .status-APROVADA { color: var(--verde); background: #e1f1e3; }
.status-PERDIDA, .status-REJEITADO, .status-REJEITADA { color: var(--vermelho); background: #f8e1df; }
.status-AGUARDANDO_ASSINATURAS, .status-PENDENTE_APROVACAO, .status-PENDENTE, .status-PENDENTE_VALIDACAO {
  color: #6a4300; background: #fbecc4;
}
.status-EM_VALIDACAO { color: #5b1f7a; background: #efe1f7; }

/* ---------- KPIs ---------- */
.kpi {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 1rem 1.1rem;
  border-left: 6px solid var(--laranja-marca); height: 100%;
}
.kpi .valor { font-size: 1.9rem; font-weight: 700; line-height: 1; }
.kpi .rotulo { font-size: 0.8rem; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: 0.04em; }
a.kpi { text-decoration: none; color: inherit; display: block; }
a.kpi:hover { border-color: var(--tinta); }

/* ---------- avisos ---------- */
.alert { border-radius: 12px; border-width: 1.5px; }
.alert-warning { background: #fdf0c8; border-color: #b98a00; color: #3c2b00; }
.alert-success { background: #e1f1e3; border-color: var(--verde); color: #0f3a1b; }
.alert-danger { background: #f8e1df; border-color: var(--vermelho); color: #4d0b0c; }
.alert-info { background: #e3e6f7; border-color: var(--marinho); color: var(--marinho); }

/* ---------- abas ---------- */
.nav-tabs { border-bottom: 2px solid var(--tinta); }
.nav-tabs .nav-link { color: var(--tinta); font-weight: 500; border: 0; border-radius: 10px 10px 0 0; }
.nav-tabs .nav-link.active { background: var(--tinta); color: var(--bege); }

/* ---------- etapas do pedido ---------- */
.etapas { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.etapa {
  flex: 1 1 140px; padding: 0.55rem 0.75rem; border-radius: 10px; background: var(--superficie);
  border: 1.5px solid var(--borda); font-size: 0.8rem; font-weight: 500; color: var(--tinta-suave);
}
.etapa .num { font-weight: 700; margin-right: 0.3rem; }
.etapa.feita { border-color: var(--verde); color: var(--verde); background: #eef7ef; }
.etapa.atual { border-color: var(--tinta); background: var(--tinta); color: var(--bege); }

/* ---------- grade da PI ---------- */
.grade-wrap { overflow-x: auto; border: 1px solid var(--borda); border-radius: 12px; background: #fff; }
.grade { border-collapse: separate; border-spacing: 0; font-size: 0.78rem; min-width: 100%; }
.grade th, .grade td { border-right: 1px solid #e6dcc6; border-bottom: 1px solid #e6dcc6; text-align: center; }
.grade thead th { background: var(--tinta); color: var(--bege); padding: 0.3rem 0.15rem; font-weight: 600; position: sticky; top: 0; }
.grade thead th.fds { background: #3a3a3a; }
.grade .col-desc {
  position: sticky; left: 0; background: var(--superficie); text-align: left; min-width: 260px; max-width: 320px;
  padding: 0.35rem 0.6rem; z-index: 1;
}
.grade thead .col-desc { background: var(--tinta); z-index: 2; }
.grade input {
  width: 2.3rem; border: 0; text-align: center; padding: 0.35rem 0; background: transparent;
  font-weight: 600; color: var(--tinta);
}
.grade input:focus { outline: 2px solid var(--laranja-marca); background: #fff7e8; }
.grade td.bloq { background: repeating-linear-gradient(45deg, #efe8da, #efe8da 4px, #e4dccb 4px, #e4dccb 8px); }
.grade td.tem { background: #fff1db; }
.grade .tot { font-weight: 700; min-width: 4.5rem; padding: 0 0.4rem; }
.grade .tot.ok { color: var(--verde); }
.grade .tot.erro { color: var(--vermelho); }
.grade tfoot td { font-weight: 700; background: var(--bege-escuro); padding: 0.3rem 0; }

/* ---------- itens da proposta ---------- */
.item-card { border: 1.5px solid var(--borda); border-radius: 12px; background: #fff; padding: 0.75rem 1rem; }
.item-card .preco { font-weight: 700; }
.pill { display: inline-block; background: var(--bege-escuro); border-radius: 999px; padding: 0.1rem 0.6rem; font-size: 0.75rem; }

.totais dt { font-weight: 500; }
.totais dd { font-weight: 700; text-align: right; }
.total-liquido { font-size: 1.6rem; font-weight: 800; color: var(--laranja); }

/* ---------- login / público ---------- */
.tela-publica { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.tela-publica .caixa { width: 100%; max-width: 440px; }
.tela-publica .caixa.larga { max-width: 860px; }
.faixa-marca { height: 8px; background: linear-gradient(90deg, var(--laranja-marca), var(--amarelo)); border-radius: 8px 8px 0 0; }

/* ---------- utilitários ---------- */
.dinheiro { font-variant-numeric: tabular-nums; white-space: nowrap; }
.vazio { padding: 2rem; text-align: center; color: var(--tinta-suave); }
.historico li { border-left: 3px solid var(--borda); padding: 0 0 0.9rem 0.9rem; position: relative; list-style: none; }
.historico li::before {
  content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--laranja-marca);
  border: 2px solid var(--tinta); position: absolute; left: -7px; top: 4px;
}
.historico { padding-left: 0.4rem; }

@media (max-width: 767px) {
  h1, .h1 { font-size: 1.3rem; }
}

/* ---------- catálogo ---------- */
.filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.5rem; }
.filtros .input-group { grid-column: span 2; }
@media (max-width: 575px) { .filtros .input-group { grid-column: auto; } }
.progresso { height: 12px; background: var(--bege-escuro); border-radius: 999px; overflow: hidden; border: 1px solid var(--borda); }
.progresso > div { height: 100%; background: var(--verde); }
.grupo-cabecalho {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap;
  background: var(--superficie); border: 1px solid var(--borda); border-left: 6px solid var(--laranja-marca);
  border-radius: 12px; padding: 0.75rem 1rem; margin-bottom: 0.9rem;
}
.cards-catalogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1rem; }
.card-produto {
  background: var(--marinho); color: #fff; border-radius: 18px; border-bottom: 5px solid #f5a300;
  padding: 0.75rem; display: flex; flex-direction: column; scroll-margin-top: 1rem;
}
.card-produto:target { outline: 4px solid var(--laranja-marca); outline-offset: 3px; }
.card-produto.inativo { opacity: 0.6; }
.card-produto .selos { display: flex; gap: 0.35rem; min-height: 1.4rem; margin-bottom: 0.4rem; flex-wrap: wrap; }
.selo { font-size: 0.7rem; font-weight: 700; border-radius: 999px; padding: 0.1rem 0.55rem; }
.selo.ok { background: #d9f2de; color: #0f3a1b; }
.selo.pendente { background: #fde9a8; color: #3c2b00; }
.selo.inativo { background: #e7e7e7; color: #222; }
.card-produto .nome {
  background: #fff; color: var(--marinho); border-radius: 12px; padding: 0.5rem 0.7rem; text-align: center;
  font-weight: 800; line-height: 1.2;
}
.card-produto .nome small { display: block; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; color: #4a4f6e; letter-spacing: 0.04em; }
.card-produto .quando { color: #ffd28a; font-size: 0.78rem; text-align: center; margin-top: 0.4rem; font-weight: 600; }
.card-produto ul { padding-left: 1.1rem; margin: 0.7rem 0 0.5rem; font-size: 0.82rem; line-height: 1.35; }
.card-produto li { margin-bottom: 0.3rem; }
.card-produto li.fora { color: #c9cde6; }
.card-produto .dias { color: #ffd28a; font-size: 0.75rem; }
.card-produto .pe { margin-top: auto; }
.card-produto .total { color: #f7a43a; font-weight: 700; font-size: 0.8rem; text-align: center; }
.card-produto .preco {
  background: var(--laranja-marca); color: var(--marinho); font-weight: 800; text-align: center;
  border-radius: 999px; padding: 0.35rem; margin-top: 0.35rem;
}
.card-produto .preco small { font-weight: 600; font-size: 0.75rem; }
.card-produto .cond { font-size: 0.72rem; text-align: center; margin-top: 0.35rem; color: #e1e4f5; }
.card-produto .obs { font-size: 0.72rem; color: #c9cde6; margin-top: 0.35rem; }
.card-produto .nota { font-size: 0.75rem; background: #fde9a8; color: #3c2b00; border-radius: 8px; padding: 0.35rem 0.5rem; margin-top: 0.5rem; }
.card-produto .acoes { display: flex; gap: 0.35rem; margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px solid #343b6b; }
.card-produto .acoes > a { flex: 1; }
.card-produto .acoes .btn { font-size: 0.78rem; }

.componente { border: 1.5px solid var(--borda); border-radius: 12px; padding: 0.75rem; background: #fff; }
.componente.removido { display: none; }
.dias-chips { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.dia-chip { position: relative; cursor: pointer; margin: 0; }
.dia-chip input { position: absolute; opacity: 0; pointer-events: none; }
.dia-chip span {
  display: inline-block; min-width: 2.6rem; text-align: center; padding: 0.3rem 0.4rem; border-radius: 8px;
  border: 1.5px solid #8c7f66; font-size: 0.8rem; font-weight: 600; background: #fff; color: var(--tinta);
}
.dia-chip input:checked + span { background: var(--tinta); border-color: var(--tinta); color: var(--bege); }
.dia-chip input:focus-visible + span { outline: 3px solid var(--laranja-marca); }
.resumo-produto { background: var(--bege); border-radius: 10px; padding: 0.6rem 0.8rem; }

/* ---------- faixa de ambiente (testes/homologação) ---------- */
.faixa-ambiente {
  background: repeating-linear-gradient(135deg, #f5c400 0 14px, #111 14px 28px);
  text-align: center; padding: 0.3rem;
}
.faixa-ambiente span {
  display: inline-block; background: #f5c400; color: #111; font-weight: 700; font-size: 0.8rem;
  border-radius: 6px; padding: 0.1rem 0.8rem;
}
.grade tr.linha-titulo .col-desc { font-weight: 800; border-left: 4px solid var(--laranja-marca); }

/* ---------- seletor de produtos (proposta) ---------- */
.produto-escolhido {
  width: 100%; display: flex; align-items: center; gap: 0.75rem; text-align: left;
  border: 2px dashed #8c7f66; border-radius: 12px; background: #fff; padding: 0.7rem 0.9rem;
  color: var(--tinta); font: inherit; min-height: 3.6rem;
}
.produto-escolhido:hover, .produto-escolhido:focus-visible { border-color: var(--tinta); outline: none; background: #fffaf0; }
.produto-escolhido .vazio-escolha { font-weight: 600; color: var(--laranja); }
.produto-escolhido.preenchido { border-style: solid; border-color: var(--tinta); }
.produto-escolhido .escolha { display: flex; flex-direction: column; line-height: 1.25; flex: 1; }
.produto-escolhido .escolha small { color: var(--tinta-suave); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; }
.produto-escolhido .escolha span { font-weight: 600; color: var(--laranja); }
.produto-escolhido .trocar { margin-left: auto; font-size: 0.8rem; font-weight: 600; border: 1.5px solid var(--tinta); border-radius: 8px; padding: 0.2rem 0.6rem; }

.seletor { background: var(--bege); }
.seletor .modal-header { background: var(--bege-escuro); border-bottom: 3px solid var(--laranja-marca); }
.abas-seletor { display: flex; gap: 0.35rem; overflow-x: auto; padding-bottom: 0.15rem; }
.abas-seletor .aba {
  flex-shrink: 0; border: 1.5px solid var(--tinta); background: #fff; color: var(--tinta); border-radius: 999px;
  padding: 0.3rem 0.8rem; font-weight: 600; font-size: 0.85rem;
}
.abas-seletor .aba span { opacity: 0.65; font-weight: 500; margin-left: 0.15rem; }
.abas-seletor .aba.ativa { background: var(--tinta); color: var(--bege); }
.secao-seletor { margin-bottom: 1.1rem; }
.secao-seletor .secao-titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin-bottom: 0.45rem; }
.secao-seletor .secao-titulo strong { font-size: 1rem; }
.secao-seletor .secao-titulo span { font-size: 0.8rem; color: var(--tinta-suave); }
.secao-seletor .opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.5rem; }
.opcao-produto {
  display: flex; flex-direction: column; gap: 0.15rem; text-align: left; font: inherit; color: var(--tinta);
  background: #fff; border: 1.5px solid var(--borda); border-left: 5px solid var(--laranja-marca);
  border-radius: 10px; padding: 0.55rem 0.7rem; cursor: pointer;
}
.opcao-produto:hover, .opcao-produto:focus-visible { border-color: var(--tinta); border-left-color: var(--laranja-marca); outline: none; box-shadow: 0 2px 0 var(--tinta); }
.opcao-produto.selecionado { background: var(--marinho); color: #fff; border-color: var(--marinho); }
.opcao-produto.selecionado .opcao-preco, .opcao-produto.selecionado .opcao-meta { color: #ffd28a; }
.opcao-nome { font-weight: 700; line-height: 1.2; }
.opcao-preco { font-weight: 700; color: var(--laranja); }
.opcao-preco small { font-weight: 500; color: var(--tinta-suave); }
.opcao-produto.selecionado .opcao-preco small { color: #e1e4f5; }
.opcao-meta { font-size: 0.78rem; color: var(--tinta-suave); line-height: 1.25; }
.opcao-tag { align-self: flex-start; font-size: 0.68rem; font-weight: 700; background: var(--bege-escuro); color: var(--tinta); border-radius: 999px; padding: 0.05rem 0.5rem; margin-top: 0.15rem; }

/* ---------- paginação ---------- */
.paginacao { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; margin-top: 1rem; }
.paginacao-total { font-size: 0.85rem; color: var(--tinta-suave); }
.paginacao ul { display: flex; gap: 0.3rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.paginacao a, .paginacao span.atual, .paginacao span.desativado, .paginacao .reticencias {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; height: 2.4rem;
  padding: 0 0.6rem; border-radius: 10px; font-weight: 600; text-decoration: none;
}
.paginacao a { border: 1.5px solid var(--tinta); color: var(--tinta); background: #fff; }
.paginacao a:hover { background: var(--tinta); color: var(--bege); }
.paginacao span.atual { background: var(--tinta); color: var(--bege); border: 1.5px solid var(--tinta); }
.paginacao span.desativado { border: 1.5px solid var(--borda); color: #a69a82; }
.paginacao .reticencias { min-width: 1.5rem; color: var(--tinta-suave); }

/* Tela de entrada: os três portais */
.tela-entrada { min-height: calc(100vh - 4rem); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; }
.entrada-logo { max-width: 200px; }
.entrada-portais { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 1.25rem; }
.entrada-portal { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; aspect-ratio: 1; padding: 1.25rem; text-align: center; border: 2px solid #111; border-radius: 16px; background: #fffaf0; color: #111; text-decoration: none; }
.entrada-portal i { font-size: 2.4rem; color: #b84a00; }
.entrada-portal strong { font-size: 1.25rem; }
.entrada-portal span { font-size: .9rem; color: #3d3a33; }
a.entrada-portal:hover, a.entrada-portal:focus-visible { background: #14193f; color: #fff; outline: none; }
a.entrada-portal:hover i, a.entrada-portal:hover span, a.entrada-portal:focus-visible i, a.entrada-portal:focus-visible span { color: #fff; }
.entrada-portal.desativado { border-style: dashed; border-color: #9a9284; background: transparent; color: #6b6458; cursor: not-allowed; }
.entrada-portal.desativado i { color: #9a9284; }
.entrada-usuario { display: flex; gap: 1rem; align-items: baseline; font-size: .9rem; flex-wrap: wrap; justify-content: center; }
@media (max-width: 640px) { .entrada-portais { grid-template-columns: 1fr; width: 100%; max-width: 320px; } .entrada-portal { aspect-ratio: auto; min-height: 120px; } }

/* Seletor de portal no menu */
.menu-portais { display: flex; gap: .25rem; padding: 0 1rem .75rem; flex-wrap: wrap; }
.menu-portal { font-size: .8rem; padding: .2rem .55rem; border: 1px solid #111; border-radius: 999px; color: #111; text-decoration: none; }
.menu-portal:hover { background: #14193f; color: #fff; }
.menu-portal.ativo { background: #111; color: #f4eee1; }

/* Páginas de portal */
.menu-portal-titulo { padding: .25rem 1.75rem .25rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--laranja); }
.barra-acoes { position: sticky; bottom: 0; z-index: 1020; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1.5rem -.75rem -1.5rem; padding: .75rem; background: var(--bege-escuro); border-top: 2px solid var(--tinta); }

/* Visualizador de documentos: um por vez, na tela inteira */
.visualizador { margin: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: #3a3a3a; overflow: hidden; }
.visualizador-barra { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .5rem .75rem; background: var(--tinta); color: var(--bege); }
.visualizador-titulo { flex: 1; min-width: 10rem; }
.visualizador-passos { display: flex; align-items: center; gap: .4rem; }
.visualizador-area { flex: 1; min-height: 0; }
.visualizador-area iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.visualizador-imagem { height: 100%; overflow: auto; display: grid; place-items: start center; padding: 1rem; }
.visualizador-imagem img { max-width: 100%; height: auto; background: #fff; }
.visualizador-vazio { height: 100%; display: grid; place-items: center; color: #fff; font-size: 1.1rem; padding: 1rem; text-align: center; }

/* Carteira: situação do cliente */
.filtros-situacao { display: flex; flex-wrap: wrap; gap: .4rem; }
.status.situacao-ATIVO { background: #dcefe0; color: #14532d; border-color: #1e6b34; }
.status.situacao-A_RENOVAR { background: #fff1c2; color: #5c4300; border-color: #a37a00; }
.status.situacao-PARADO { background: #f3dcdc; color: #6b1012; border-color: #a3191b; }
.status.situacao-SEM_COMPRA { background: #ece6d8; color: #3d3a33; border-color: #9a9284; }

/* Indicadores: faturamento por mês em barras simples (os valores também ficam em tabela) */
.grafico-barras { display: flex; align-items: flex-end; gap: .35rem; height: 220px; overflow-x: auto; padding-top: 1.2rem; }
.grafico-barras .barra { flex: 1 0 2.4rem; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.grafico-barras .barra-coluna { width: 70%; min-height: 2px; background: var(--marinho); border-radius: 4px 4px 0 0; }
.grafico-barras .barra.futura .barra-coluna { background: repeating-linear-gradient(45deg, #8a8fb8, #8a8fb8 4px, #b9bcd6 4px, #b9bcd6 8px); }
.grafico-barras .barra.atual .barra-coluna { background: var(--laranja); }
.grafico-barras .barra-valor { font-size: .68rem; color: var(--tinta-suave); white-space: nowrap; }
.grafico-barras .barra-mes { font-size: .72rem; margin-top: .25rem; white-space: nowrap; }
/* Valores em reais nos cartões: diminuem com a tela para não cortar no celular */
.kpi .valor.dinheiro { font-size: clamp(1.15rem, 5.2vw, 1.9rem); white-space: nowrap; }

/* Prospecção: etapas do lead, campanha encerrada e o quadro (G3) */
.status-NOVO { color: var(--tinta-suave); background: #ece6d8; }
.status-CONTATO { color: var(--marinho); background: #e3e6f7; }
.status-INTERESSADO { color: #6a4300; background: #fbecc4; }
.status-PROPOSTA { color: #5b1f7a; background: #efe1f7; }
.status-GANHO { color: var(--verde); background: #e1f1e3; }
.status-PERDIDO { color: var(--vermelho); background: #f8e1df; }
.status-ENCERRADA { color: var(--tinta-suave); background: #ece6d8; }
.etapas-resumo { display: flex; flex-wrap: wrap; gap: .25rem .9rem; }
.abas-etapas { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .25rem; }
.abas-etapas .btn { white-space: nowrap; }
.quadro { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; align-items: start; }
/* No computador, as seis colunas lado a lado; sem espaço para todas, o quadro rola para o lado. */
@media (min-width: 992px) { .quadro { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(14.5rem, 1fr); overflow-x: auto; padding-bottom: .5rem; } }
.coluna-etapa { display: flex; flex-direction: column; min-width: 0; background: var(--bege-escuro); border-radius: 12px; padding: .5rem; min-height: 6rem; border: 2px solid transparent; }
.coluna-etapa > header { display: flex; justify-content: space-between; align-items: center; font-weight: 700; padding: .15rem .25rem .5rem; }
.coluna-etapa.sem-cartoes-manuais { background: repeating-linear-gradient(45deg, var(--bege-escuro), var(--bege-escuro) 8px, #efe5d1 8px, #efe5d1 16px); }
.coluna-etapa.solta-aqui { border-color: var(--laranja); background: #f6e3cf; }
.coluna-etapa .paginacao { flex-wrap: wrap; font-size: .8rem; margin-top: .5rem; }
.cartoes { display: flex; flex-direction: column; gap: .5rem; }
.cartao-lead { background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; padding: .55rem .65rem; min-width: 0; }
.cartao-lead[draggable="true"] { cursor: grab; }
.cartao-lead.arrastando { opacity: .45; }
.cartao-lead.perdido { opacity: .8; }
.cartao-lead .marcas { display: flex; flex-wrap: wrap; gap: .25rem; margin: .3rem 0; }
.cartao-lead .marcas:empty { display: none; }
.cartao-lead .status { font-size: .68rem; padding: .1rem .45rem; white-space: normal; }
.cartao-lead .acoes { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.historico-lead li { border-left: 3px solid var(--laranja-marca); padding: .2rem 0 .6rem .75rem; }
.historico-lead li.mudanca { border-left-color: var(--borda); }
.historico-lead li.mudanca > div:not(.small) { color: var(--tinta-suave); }


/* Prospecção: seletor de atividades, segmentos e escolha de municípios (S1, S7, S10) */
.codigo-cnae { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; font-weight: 700;
  background: var(--bege-escuro); border-radius: 6px; padding: .05rem .4rem; white-space: nowrap; color: var(--tinta); }
.caminho-cnae { font-size: .74rem; color: var(--tinta-suave); line-height: 1.3; }
.caminho-cnae i { font-size: .6rem; margin: 0 .2rem; }
.porque { font-size: .8rem; color: var(--tinta-suave); }
.porque mark { background: #ffe1a8; padding: 0 .1rem; border-radius: 3px; color: var(--tinta); }
.escolha-atividades { width: 100%; text-align: left; border: 2px dashed #8c7f66; border-radius: 12px; background: #fff;
  padding: .65rem .8rem; font: inherit; color: var(--tinta); display: flex; gap: .6rem; align-items: center; }
.escolha-atividades.preenchida { border-style: solid; border-color: var(--tinta); }
.escolha-atividades:hover { background: #fffaf0; border-color: var(--tinta); }
.escolha-atividades .trocar { margin-left: auto; font-size: .8rem; font-weight: 600; border: 1.5px solid var(--tinta); border-radius: 8px; padding: .15rem .55rem; white-space: nowrap; }
.chips-atividades { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.chip-atividade { display: inline-flex; align-items: center; gap: .3rem; background: #fff; border: 1.5px solid var(--borda);
  border-radius: 999px; padding: .1rem .2rem .1rem .55rem; font-size: .76rem; max-width: 100%; }
.chip-atividade span.nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem; }
.chip-atividade button { border: 0; background: transparent; padding: 0 .25rem; line-height: 1; color: var(--tinta-suave); }
.chip-atividade button:hover { color: var(--vermelho); }
.resultado-cnae { display: flex; gap: .7rem; align-items: flex-start; background: #fff; border: 1.5px solid var(--borda);
  border-left: 5px solid var(--borda); border-radius: 10px; padding: .55rem .7rem; }
.resultado-cnae + .resultado-cnae { margin-top: .4rem; }
.resultado-cnae.escolhida { border-color: var(--tinta); border-left-color: var(--laranja-marca); background: #fffaf0; }
.resultado-cnae.sem-empresas { opacity: .65; }
.resultado-cnae .form-check-input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; flex-shrink: 0; cursor: pointer; }
.resultado-cnae .corpo { flex: 1; min-width: 0; }
.resultado-cnae .titulo { font-weight: 600; line-height: 1.25; }
.resultado-cnae .qtd { text-align: right; white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
.resultado-cnae .qtd small { display: block; font-weight: 500; color: var(--tinta-suave); font-size: .7rem; }
.detalhe-cnae { font-size: .8rem; background: var(--bege); border-radius: 8px; padding: .5rem .7rem; margin-top: .4rem; }
.detalhe-cnae ul { margin: .15rem 0 .4rem; padding-left: 1.1rem; }
.detalhe-cnae .nao li::marker { content: "✕  "; color: var(--vermelho); }
.link-mini { border: 0; background: none; padding: 0; color: var(--marinho); font-size: .78rem; font-weight: 600; text-decoration: underline; }
.caixa-segmentos-sugeridos { border: 1.5px dashed var(--laranja); border-radius: 10px; background: #fff7ec; padding: .55rem .75rem; margin-bottom: .6rem; }
.painel-selecao { background: var(--superficie); border: 1.5px solid var(--tinta); border-radius: 12px; padding: .75rem; position: sticky; top: 0; }
.painel-selecao .total { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.painel-selecao .grupo-origem { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-suave); margin: .7rem 0 .25rem; }
.item-selecao { display: flex; gap: .4rem; align-items: flex-start; font-size: .8rem; padding: .25rem 0; border-bottom: 1px dashed #e2d6bd; }
.item-selecao .d { flex: 1; min-width: 0; line-height: 1.25; }
.item-selecao .n { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.item-selecao button { border: 0; background: none; padding: 0 .15rem; color: var(--tinta-suave); }
.item-selecao button:hover { color: var(--vermelho); }
.lista-selecao { max-height: 42vh; overflow-y: auto; }
.sugestao { display: flex; gap: .4rem; align-items: center; font-size: .78rem; padding: .2rem 0; }
.sugestao button { flex-shrink: 0; }
.arvore-cnae details { border-left: 2px solid var(--borda); margin-left: .35rem; padding-left: .6rem; }
.arvore-cnae > details { border-left: 0; margin-left: 0; padding-left: 0; border-bottom: 1px solid var(--borda); padding: .2rem 0; }
.arvore-cnae summary { list-style: none; display: flex; gap: .5rem; align-items: center; padding: .3rem .2rem; cursor: pointer; border-radius: 8px; }
.arvore-cnae summary::-webkit-details-marker { display: none; }
.arvore-cnae summary:hover { background: #f1e6cf; }
.arvore-cnae summary .seta { transition: transform .15s; font-size: .75rem; width: .9rem; }
.arvore-cnae details[open] > summary .seta { transform: rotate(90deg); }
.arvore-cnae summary .rotulo { flex: 1; min-width: 0; }
.arvore-cnae summary .n, .arvore-cnae .folha .n { font-size: .78rem; color: var(--tinta-suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.arvore-cnae .letra { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 6px; background: var(--tinta); color: var(--bege); font-weight: 700; font-size: .8rem; flex-shrink: 0; }
.arvore-cnae .folha { display: flex; gap: .5rem; align-items: center; padding: .25rem .2rem .25rem 1.2rem; font-size: .85rem; border-radius: 8px; }
.arvore-cnae .folha:hover { background: #f6eedd; }
.arvore-cnae .folha.sem-empresas { opacity: .6; }
.arvore-cnae input[type=checkbox] { flex-shrink: 0; }
.barrinha { height: 6px; background: var(--bege-escuro); border-radius: 999px; overflow: hidden; min-width: 60px; }
.barrinha > div { height: 100%; background: var(--marinho); }
.origem { font-size: .7rem; font-weight: 600; border-radius: 999px; padding: .05rem .5rem; background: var(--bege-escuro); white-space: nowrap; }
.origem.avulsa { background: #e3e6f7; color: var(--marinho); }
.cartao-segmento { text-align: left; font: inherit; color: var(--tinta); background: #fff; border: 1.5px solid var(--borda);
  border-left: 5px solid var(--laranja-marca); border-radius: 10px; padding: .55rem .7rem; width: 100%; }
.cartao-segmento:hover, .cartao-segmento.aberto { border-color: var(--tinta); }
.grade-segmentos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .5rem; }
.selecao-movel { display: none; }
@media (max-width: 991.98px) {
  .painel-selecao { position: static; display: none; }
  .painel-selecao.aberto { display: block; }
  .selecao-movel { display: flex; }
  .lista-selecao { max-height: none; }
}
.alerta-item { font-size: .8rem; display: flex; gap: .4rem; padding: .3rem 0; border-bottom: 1px dashed #e2d6bd; }
.lista-sugestoes { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 2px); background: #fff; border: 1.5px solid var(--tinta);
  border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.12); max-height: 320px; overflow-y: auto; }
.sugestao-cidade { display: flex; gap: .5rem; align-items: center; width: 100%; text-align: left; border: 0; background: none; font: inherit; color: var(--tinta);
  padding: .45rem .7rem; border-bottom: 1px solid #efe5d1; }
.sugestao-cidade:last-child { border-bottom: 0; }
.sugestao-cidade.ativa, .sugestao-cidade:hover { background: #fff1db; }
.sugestao-cidade small { color: var(--tinta-suave); }
.sugestao-cidade .n { margin-left: auto; font-size: .78rem; color: var(--tinta-suave); white-space: nowrap; }
.sugestao-cidade mark { background: #ffe1a8; padding: 0; color: inherit; }
.painel-regioes { background: #fff; border: 1.5px solid var(--borda); border-radius: 10px; padding: .5rem .6rem; max-height: 380px; overflow-y: auto; }
.painel-regioes .intermediaria { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-suave); margin: .5rem 0 .2rem; }
.painel-regioes .intermediaria:first-child { margin-top: 0; }
.regiao { border-bottom: 1px dashed #e2d6bd; }
.regiao > .linha { display: flex; gap: .45rem; align-items: center; padding: .3rem 0; font-size: .85rem; }
.regiao > .linha button { border: 0; background: none; padding: 0 .2rem; color: var(--tinta); }
.regiao .cidades { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .1rem .6rem; padding: 0 0 .4rem 1.6rem; font-size: .8rem; }
.chip-cidade { background: var(--tinta); border-color: var(--tinta); color: var(--bege); }
.chip-cidade button { color: var(--bege); }
.chip-cidade.regiao-inteira { background: var(--marinho); border-color: var(--marinho); }