/* ===== TEMA MAIS SABOR — troque as cores aqui ===== */
:root {
  --ms-vinho: #7a1230;
  --ms-vinho-escuro: #3a0a18;
  --ms-ouro: #e8b04a;
  --ms-fundo: #f4f1f2;
  --ms-cartao: #ffffff;
  --ms-texto: #1f1a1c;
  --ms-texto-suave: #6d6569;
  --ms-borda: #e3dcdf;
  --ms-verde: #1f8a4c;
  --ms-vermelho: #c0392b;
  --ms-raio: 10px;
  --ms-fonte: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--ms-fonte); color: var(--ms-texto); background: var(--ms-fundo); font-size: 15px; }
a { color: var(--ms-vinho); }

/* layout */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.menu { background: linear-gradient(180deg, var(--ms-vinho), var(--ms-vinho-escuro)); color: #fff; display: flex; flex-direction: column; padding: 20px 14px; position: sticky; top: 0; height: 100vh; }
.marca { display: flex; align-items: center; gap: 10px; padding: 4px 6px 18px; border-bottom: 1px solid rgba(255,255,255,.15); }
.marca img { width: 64px; }
.marca span { font-size: 13px; line-height: 1.25; color: var(--ms-ouro); font-weight: 600; letter-spacing: .3px; }
.menu nav { flex: 1; overflow-y: auto; padding-top: 10px; }
.menu .grupo { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,.55); margin: 16px 8px 6px; }
.menu nav a { display: flex; justify-content: space-between; align-items: center; color: #fff; text-decoration: none; padding: 9px 10px; border-radius: 8px; font-size: 14px; }
.menu nav a:hover { background: rgba(255,255,255,.08); }
.menu nav a.on { background: rgba(232,176,74,.18); box-shadow: inset 3px 0 0 var(--ms-ouro); }
.menu nav a em { font-style: normal; font-size: 10px; color: rgba(255,255,255,.5); }
.rodape-menu { font-size: 11px; color: rgba(255,255,255,.5); padding: 10px 8px 0; border-top: 1px solid rgba(255,255,255,.15); }
main { min-width: 0; }
.topo { display: flex; justify-content: space-between; align-items: center; padding: 16px 28px; background: var(--ms-cartao); border-bottom: 1px solid var(--ms-borda); flex-wrap: wrap; gap: 10px; }
.topo h1 { display: inline; font-size: 20px; margin: 0 10px 0 0; }
.quem { display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--ms-texto-suave); }
.quem form { margin: 0; }
.conteudo { padding: 24px 28px; max-width: 1280px; }

/* componentes */
.selo { display: inline-block; background: var(--ms-ouro); color: var(--ms-vinho-escuro); font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; letter-spacing: .5px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 18px; }
.card { background: var(--ms-cartao); border: 1px solid var(--ms-borda); border-radius: var(--ms-raio); padding: 16px; border-top: 3px solid var(--ms-vinho); }
.card .rotulo { display: block; font-size: 12px; color: var(--ms-texto-suave); text-transform: uppercase; letter-spacing: .4px; }
.card strong { display: block; font-size: 26px; margin-top: 6px; color: var(--ms-vinho); }
.card strong.vazio { font-size: 14px; color: var(--ms-texto-suave); font-weight: 500; font-style: italic; }
.cartao { background: var(--ms-cartao); border: 1px solid var(--ms-borda); border-radius: var(--ms-raio); padding: 18px 20px; margin-bottom: 18px; }
.cartao h2 { font-size: 16px; margin: 0 0 12px; }
.cartao h2 small { font-weight: 400; color: var(--ms-texto-suave); font-size: 12px; margin-left: 6px; }
.vazio-grande { text-align: center; padding: 48px; color: var(--ms-texto-suave); }
.intro { color: var(--ms-texto-suave); margin-top: 0; }
.etiqueta { display: inline-block; font-size: 12px; padding: 3px 8px; border-radius: 999px; background: #f3e6ea; color: var(--ms-vinho); margin-right: 6px; }
.etiqueta.verde { background: #e3f4ea; color: var(--ms-verde); }
.etiqueta.ouro { background: #fbf0db; color: #8a5a00; }
.etiqueta.cinza { background: #eee; color: #777; }
.alerta { background: #fdecea; color: var(--ms-vermelho); border: 1px solid #f5c6c0; padding: 10px 12px; border-radius: 8px; }
.aviso { background: #fbf0db; color: #7a5200; border: 1px solid #f0d9a8; padding: 10px 12px; border-radius: 8px; }
.sucesso { background: #e3f4ea; color: var(--ms-verde); border: 1px solid #bfe3cc; padding: 10px 12px; border-radius: 8px; }
.destaque { background: #fffaf0; border: 2px solid var(--ms-ouro); border-radius: var(--ms-raio); padding: 14px 18px; margin-bottom: 18px; }
.destaque code { font-size: 20px; background: #fff; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--ms-borda); }
.nota { font-size: 12px; color: var(--ms-texto-suave); }
.pequeno { font-size: 12px; color: var(--ms-texto-suave); max-width: 320px; word-break: break-word; }

/* formularios */
.formulario { max-width: 440px; display: flex; flex-direction: column; gap: 12px; }
.formulario.largo { max-width: none; }
.formulario .linha { display: flex; gap: 14px; flex-wrap: wrap; }
.formulario .linha > * { flex: 1; min-width: 200px; }
label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; }
label.check { flex-direction: row; align-items: center; font-weight: 400; gap: 6px; }
fieldset { border: 1px solid var(--ms-borda); border-radius: 8px; padding: 8px 12px; display: flex; gap: 16px; }
legend { font-size: 13px; font-weight: 600; padding: 0 4px; }
input, select { font: inherit; padding: 9px 10px; border: 1px solid var(--ms-borda); border-radius: 8px; background: #fff; }
input:focus, select:focus { outline: 2px solid var(--ms-ouro); border-color: var(--ms-ouro); }
.botao { display: inline-block; text-align: center; text-decoration: none; background: var(--ms-vinho); color: #fff; border: 0; border-radius: 8px; padding: 10px 18px; font: inherit; font-weight: 600; cursor: pointer; align-self: flex-start; }
.botao:hover { background: var(--ms-vinho-escuro); }
button.link { background: none; border: 0; color: var(--ms-vinho); cursor: pointer; font: inherit; font-size: 13px; padding: 0; text-decoration: underline; }

/* tabelas */
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--ms-texto-suave); border-bottom: 2px solid var(--ms-borda); padding: 8px; }
.tabela td { border-bottom: 1px solid var(--ms-borda); padding: 9px 8px; vertical-align: middle; }
.tabela tr.inativo td { color: #999; }
.acoes { white-space: nowrap; }
.acoes form { display: inline; margin: 0 12px 0 0; }
.paginacao { text-align: center; font-size: 13px; color: var(--ms-texto-suave); }
.paginacao a { margin: 0 10px; }

/* login */
.tela-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(135deg, var(--ms-vinho), var(--ms-vinho-escuro)); padding: 16px; }
.caixa-login { background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.15); border-radius: 16px; padding: 32px 28px; width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 14px; color: #fff; text-align: center; }
.caixa-login img { width: 120px; margin: 0 auto; }
.caixa-login h1 { font-size: 18px; color: var(--ms-ouro); margin: 0; }
.caixa-login label { text-align: left; color: #fff; }
.caixa-login .botao { align-self: stretch; background: var(--ms-ouro); color: var(--ms-vinho-escuro); }
.caixa-login .botao:hover { background: #f2c56d; }
.caixa-login .nota { color: rgba(255,255,255,.7); }
.caixa-login .selo { align-self: center; }

/* celular / tela pequena */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .menu { position: static; height: auto; }
  .menu nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .menu .grupo { width: 100%; }
  .conteudo, .topo { padding: 16px; }
  .tabela { display: block; overflow-x: auto; }
}

/* Etapa 3 */
.filtros { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.filtros label { flex: 1; min-width: 160px; }
.filtros .botao { align-self: flex-end; }
.vermelho { color: var(--ms-vermelho); font-style: italic; font-size: 13px; }
.etiqueta.vermelha { background: #fdecea; color: var(--ms-vermelho); }
.vazio-celula { text-align: center; color: var(--ms-texto-suave); padding: 24px; }
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grade2 > .cartao { margin-bottom: 0; }
.grade2 + .cartao { margin-top: 18px; }
.ficha { display: grid; grid-template-columns: 160px 1fr; gap: 6px 12px; margin: 0 0 16px; font-size: 14px; }
.ficha dt { color: var(--ms-texto-suave); }
.ficha dd { margin: 0; }
.lista-limpa { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.resumo-num { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.resumo-num span { display: block; font-size: 11px; color: var(--ms-texto-suave); text-transform: uppercase; }
.resumo-num strong { font-size: 18px; color: var(--ms-vinho); }
.barras { display: flex; gap: 6px; align-items: flex-end; height: 150px; margin-bottom: 18px; }
.barra { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; font-size: 11px; }
.barra .coluna { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.barra i { display: block; width: 100%; min-height: 2px; background: var(--ms-vinho); border-radius: 4px 4px 0 0; }
.barra small { color: var(--ms-texto-suave); font-size: 10px; }
.tabela.compacta td, .tabela.compacta th { padding: 5px 6px; font-size: 13px; }
.acoes-rapidas { display: flex; gap: 12px; flex-wrap: wrap; }
.botao.secundario { background: #fff; color: var(--ms-vinho); border: 1px solid var(--ms-vinho); }
.link-card { text-decoration: none; color: inherit; }
.link-card.on { outline: 2px solid var(--ms-ouro); }
.voltar { font-size: 13px; text-decoration: none; }
@media (max-width: 860px) { .grade2 { grid-template-columns: 1fr; } .resumo-num { grid-template-columns: 1fr 1fr; } .ficha { grid-template-columns: 1fr; } }

.barra i.h0 { height: 0%; }
.barra i.h5 { height: 5%; }
.barra i.h10 { height: 10%; }
.barra i.h15 { height: 15%; }
.barra i.h20 { height: 20%; }
.barra i.h25 { height: 25%; }
.barra i.h30 { height: 30%; }
.barra i.h35 { height: 35%; }
.barra i.h40 { height: 40%; }
.barra i.h45 { height: 45%; }
.barra i.h50 { height: 50%; }
.barra i.h55 { height: 55%; }
.barra i.h60 { height: 60%; }
.barra i.h65 { height: 65%; }
.barra i.h70 { height: 70%; }
.barra i.h75 { height: 75%; }
.barra i.h80 { height: 80%; }
.barra i.h85 { height: 85%; }
.barra i.h90 { height: 90%; }
.barra i.h95 { height: 95%; }
.barra i.h100 { height: 100%; }

/* telefones */
a.zap { color: #128c4a; font-weight: 600; text-decoration: none; white-space: nowrap; }
a.zap::before { content: "●"; color: #25d366; margin-right: 5px; font-size: 11px; }
a.zap span { font-size: 11px; font-weight: 500; background: #e3f7ea; color: #128c4a; border-radius: 999px; padding: 2px 7px; margin-left: 4px; }
a.zap:hover { text-decoration: underline; }
a.fone { color: var(--ms-texto); text-decoration: none; white-space: nowrap; }
.telefones li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--ms-borda); }
.telefones li.errado { color: #999; }
.botoes-tel { margin-left: auto; display: flex; gap: 10px; }
.botoes-tel form { margin: 0; }
button.link.perigo { color: var(--ms-vermelho); }
.novo-tel { display: flex; gap: 8px; margin-top: 12px; }
.novo-tel input { flex: 1; }

/* fila e atendimento */
.nivel { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.nivel-CRITICA .nivel, .nivel.nivel-CRITICA { background: #c0392b; color: #fff; }
.nivel.nivel-ALTA { background: #f8d7da; color: #8a1c24; }
.nivel.nivel-MEDIA { background: #fff3cd; color: #7a5200; }
.nivel.nivel-NORMAL { background: #e2efda; color: #2e6b1f; }
.card.nivel-CRITICA { border-top-color: #c0392b; }
.card.nivel-ALTA { border-top-color: #e57373; }
.card.nivel-MEDIA { border-top-color: var(--ms-ouro); }
.card.nivel-NORMAL { border-top-color: #7cb342; }
.botao.pequeno { padding: 6px 12px; font-size: 13px; white-space: nowrap; }
.tabela.fila td { vertical-align: top; }
.faixa-prioridade { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: var(--ms-cartao); border: 1px solid var(--ms-borda); border-left: 5px solid var(--ms-borda); border-radius: var(--ms-raio); padding: 12px 16px; margin-bottom: 18px; flex-wrap: wrap; }
.faixa-prioridade.nivel-CRITICA { border-left-color: #c0392b; }
.faixa-prioridade.nivel-ALTA { border-left-color: #e57373; }
.faixa-prioridade.nivel-MEDIA { border-left-color: var(--ms-ouro); }
.faixa-prioridade.nivel-NORMAL { border-left-color: #7cb342; }
.zap-botao { background: #1fa855; }
.zap-botao:hover { background: #128c4a; }
form.inline { display: inline; }
.atendimento-grade { margin-bottom: 18px; }
.motivos { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 8px 0; }
details summary { cursor: pointer; padding: 6px 0; }
textarea { font: inherit; padding: 9px 10px; border: 1px solid var(--ms-borda); border-radius: 8px; resize: vertical; }
fieldset.retorno { flex-wrap: wrap; }
fieldset.retorno input[name=retorno_motivo] { flex: 1; min-width: 180px; }
.acoes-form { display: flex; gap: 10px; flex-wrap: wrap; }
.cartao h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .4px; color: var(--ms-texto-suave); margin: 16px 0 8px; }
.indicadores li { display: flex; gap: 10px; align-items: baseline; }
.indicadores li span:first-child { flex: 1; }
.linha-tempo { list-style: none; padding: 0 0 0 14px; margin: 0; border-left: 2px solid var(--ms-borda); display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.linha-tempo li { position: relative; }
.linha-tempo li::before { content: ""; position: absolute; left: -20px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--ms-vinho); }
.linha-tempo li.ret::before { background: var(--ms-ouro); }
.linha-tempo .obs { background: #faf7f8; border-radius: 6px; padding: 6px 8px; margin-top: 4px; font-size: 13px; }
.acoes-ret { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.mini-form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; min-width: 220px; }
tr.atrasado td:first-child { color: var(--ms-vermelho); }
.previa-msg { background: #e9f8ef; border: 1px solid #bfe3cc; border-radius: 10px; padding: 12px 14px; white-space: pre-wrap; }
li.inativo { color: #aaa; text-decoration: line-through; }
@media (max-width: 860px) { .motivos { grid-template-columns: 1fr; } }

/* ===== Etapa 6: propostas, pedidos, produtos, brindes ===== */
.proposta-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.proposta-layout .lateral { position: sticky; top: 12px; }
.linha-cond { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.linha-cond h2 { margin: 0; }
.cond { display: flex; gap: 16px; }
.check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.grupo-prod { border: 1px solid var(--ms-borda); border-radius: 10px; margin: 10px 0; padding: 0 12px; }
.grupo-prod summary { cursor: pointer; padding: 10px 0; font-weight: 600; }
.tabela.compacta td, .tabela.compacta th { padding: 6px; }
.tab-prod input { width: 90px; padding: 6px 8px; }
.tab-prod tr.ativo td { background: #fff8e8; }
.tab-prod .faixa { color: var(--ms-verde); }
input.abaixo { border-color: var(--ms-vermelho); background: #fdecea; }
.resumo-prop .r-linha, .resumo-prop .r-total { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 0; }
.resumo-prop .r-total strong { font-size: 28px; color: var(--ms-vinho); }
.r-eco { background: #f3f0f1; border-radius: 8px; padding: 8px 10px; font-weight: 600; color: var(--ms-texto-suave); }
.r-eco.tem { background: linear-gradient(135deg, #ffe29a, var(--ms-ouro)); color: var(--ms-vinho-escuro); }
.brindes-escolha { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.brinde-op { border: 2px solid var(--ms-borda); border-radius: 10px; padding: 10px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.brinde-op input { margin: 0; }
.brinde-op span b { font-size: 20px; margin-right: 4px; }
.brinde-op:has(input:checked) { border-color: var(--ms-ouro); background: #fffaf0; }
.botao.grande { width: 100%; padding: 14px; font-size: 16px; margin-top: 10px; }
.botao.verde { background: var(--ms-verde); }
.botao.secundario { background: #fff; color: var(--ms-vinho); border: 1px solid var(--ms-vinho); }
.status-prop { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; font-weight: 600; background: #f3f0f1; }
.status-prop em { font-weight: 400; font-size: 13px; }
.st-RASCUNHO { background: #f3f0f1; color: #555; }
.st-ENVIADA { background: #e7f0fb; color: #1d4f91; }
.st-ACEITA { background: #fff3d6; color: #7a5200; }
.st-RECUSADA, .st-CANCELADA { background: #fdecea; color: var(--ms-vermelho); }
.st-PEDIDO { background: #e3f4ea; color: var(--ms-verde); }
.chip { display: inline-block; font-size: 12px; padding: 3px 8px; border-radius: 999px; font-weight: 600; }
.cab-prop { display: flex; gap: 14px; align-items: center; background: linear-gradient(135deg, var(--ms-vinho), var(--ms-vinho-escuro)); color: #fff; border-radius: 10px; padding: 12px 16px; margin-bottom: 12px; }
.cab-prop img { width: 56px; }
.cab-prop div { display: flex; flex-direction: column; }
.cab-prop span { font-size: 12px; opacity: .85; }
.totais-prop { margin-top: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.totais-prop div { display: flex; gap: 10px; align-items: baseline; }
.totais-prop .t strong { font-size: 26px; color: var(--ms-vinho); }
.totais-prop .eco { background: linear-gradient(135deg, #ffe29a, var(--ms-ouro)); color: var(--ms-vinho-escuro); padding: 6px 12px; border-radius: 999px; font-weight: 700; }
.brinde-faixa { margin-top: 14px; border: 2px dashed var(--ms-ouro); background: #fffaf0; border-radius: 10px; padding: 12px; text-align: center; font-weight: 700; color: var(--ms-vinho); }
.acoes-prop form { margin: 10px 0; }
.acoes-prop input { width: 100%; }
.acoes-prop details { margin-top: 12px; }
.acoes-prop summary { cursor: pointer; color: var(--ms-texto-suave); font-size: 13px; }
.zap-botao.grande { display: block; width: 100%; text-align: center; padding: 16px; font-size: 17px; }
.previa-msg { white-space: pre-wrap; overflow-wrap: anywhere; }
.link.perigo { color: var(--ms-vermelho); }
.brindes-card { display: flex; flex-direction: column; font-size: 15px !important; }
.grupos-preco details { border-bottom: 1px solid var(--ms-borda); padding: 8px 0; }
.grupos-preco summary { cursor: pointer; }
.linha-prod { display: grid; grid-template-columns: 80px minmax(140px, 1fr) 90px 90px 30px 90px auto; gap: 6px; align-items: center; margin: 0; }
.linha-prod input, .linha-prod select { padding: 6px; min-width: 0; }
.linha-prod .base { font-size: 13px; color: var(--ms-texto-suave); }
tr.sem-preco td:first-child { box-shadow: inset 3px 0 0 var(--ms-ouro); }
.brindes-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 18px; }
.brinde-card { background: var(--ms-cartao); border: 1px solid var(--ms-borda); border-top: 3px solid var(--ms-ouro); border-radius: var(--ms-raio); padding: 16px; text-align: center; }
.brinde-card .emoji { font-size: 40px; }
.brinde-card p { font-size: 13px; color: var(--ms-texto-suave); min-height: 36px; }
.brinde-card.inativo { opacity: .5; }
@media (max-width: 900px) { .proposta-layout { grid-template-columns: 1fr; } .proposta-layout .lateral { position: static; } .linha-prod { grid-template-columns: 1fr 1fr; } }
.tabela-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.tabela-linha { margin-bottom: 0; }
.tabela-linha h2 { font-size: 14px; color: var(--ms-vinho); }
.zap-botao.grande small { display: block; font-size: 13px; font-weight: 400; opacity: .9; }
.acoes-prop .zap-botao + .zap-botao { margin-top: 8px; }
.barra-tabela { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; padding: 12px 18px; }
.barra-tabela label { min-width: 220px; }
.pgto { border-bottom: 1px solid var(--ms-borda); padding-bottom: 12px; margin-bottom: 14px; }
.pgto h2 { margin-bottom: 6px; }
.cad-cond { background: #eef6ff; border: 1px solid #cfe2f7; color: #1d4f91; border-radius: 8px; padding: 8px 10px; font-size: 14px; margin: 6px 0 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.chips .rot { width: 52px; font-size: 12px; color: var(--ms-texto-suave); text-transform: uppercase; }
.chip-op input { position: absolute; opacity: 0; pointer-events: none; }
.chip-op span { display: inline-block; padding: 7px 14px; border: 2px solid var(--ms-borda); border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 14px; }
.chip-op input:checked + span { border-color: var(--ms-vinho); background: var(--ms-vinho); color: #fff; }
.chip-op input:disabled + span { opacity: .35; cursor: not-allowed; }
.chip-op input:focus-visible + span { outline: 2px solid var(--ms-ouro); }
.escondido { display: none !important; }
.abas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.abas a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--ms-borda); background: var(--ms-cartao); text-decoration: none; color: var(--ms-texto); font-weight: 600; font-size: 14px; }
.abas a.on { background: var(--ms-vinho); color: #fff; border-color: var(--ms-vinho); }

/* ===== Relatorios ===== */
.filtro-rel { align-items: flex-end; }
.filtro-rel .abas { flex-basis: 100%; margin-bottom: 4px; }
.card .nota { display: block; margin-top: 4px; }
.rel-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.rel-grade > .cartao { margin-bottom: 18px; }
.num { text-align: right; white-space: nowrap; }
.funil-linha { display: grid; grid-template-columns: 150px 1fr 50px; gap: 10px; align-items: center; margin: 8px 0; font-size: 14px; }
.funil-barra { background: #f3eef0; border-radius: 6px; height: 22px; overflow: hidden; }
.funil-barra i, .ranking i { display: block; height: 100%; background: linear-gradient(90deg, var(--ms-vinho), #b0274f); border-radius: 6px; }
.funil-linha b { text-align: right; color: var(--ms-vinho); font-size: 16px; }
.ranking li { display: grid; grid-template-columns: minmax(0, 1fr) 90px 34px; gap: 8px; align-items: center; font-size: 13px; }
.ranking li i { height: 10px; background: linear-gradient(90deg, var(--ms-verde), #39c375); }
.ranking li i.vermelho-bg { background: linear-gradient(90deg, var(--ms-vermelho), #e3735f); }
.ranking li b { text-align: right; }
.rel-barras { height: 170px; }
.rel-barras .barra small:first-child { color: var(--ms-verde); font-weight: 700; min-height: 13px; }
.mini-listas { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.mini-listas h3 { font-size: 12px; text-transform: uppercase; color: var(--ms-texto-suave); margin: 0 0 4px; }
@media (max-width: 900px) { .rel-grade { grid-template-columns: 1fr; } }
.funil-barra i.w0, .ranking i.w0 { width: 0%; }
.funil-barra i.w5, .ranking i.w5 { width: 5%; }
.funil-barra i.w10, .ranking i.w10 { width: 10%; }
.funil-barra i.w15, .ranking i.w15 { width: 15%; }
.funil-barra i.w20, .ranking i.w20 { width: 20%; }
.funil-barra i.w25, .ranking i.w25 { width: 25%; }
.funil-barra i.w30, .ranking i.w30 { width: 30%; }
.funil-barra i.w35, .ranking i.w35 { width: 35%; }
.funil-barra i.w40, .ranking i.w40 { width: 40%; }
.funil-barra i.w45, .ranking i.w45 { width: 45%; }
.funil-barra i.w50, .ranking i.w50 { width: 50%; }
.funil-barra i.w55, .ranking i.w55 { width: 55%; }
.funil-barra i.w60, .ranking i.w60 { width: 60%; }
.funil-barra i.w65, .ranking i.w65 { width: 65%; }
.funil-barra i.w70, .ranking i.w70 { width: 70%; }
.funil-barra i.w75, .ranking i.w75 { width: 75%; }
.funil-barra i.w80, .ranking i.w80 { width: 80%; }
.funil-barra i.w85, .ranking i.w85 { width: 85%; }
.funil-barra i.w90, .ranking i.w90 { width: 90%; }
.funil-barra i.w95, .ranking i.w95 { width: 95%; }
.funil-barra i.w100, .ranking i.w100 { width: 100%; }
.tabela th.num, .tabela td.num { text-align: right; }
.assinatura { text-align: center; font-size: 12px; color: var(--ms-texto-suave); padding: 18px 28px 26px; border-top: 1px solid var(--ms-borda); margin-top: 12px; }
.assinatura b { color: var(--ms-vinho); }
.assinatura-login { position: fixed; bottom: 14px; left: 0; right: 0; text-align: center; font-size: 12px; color: rgba(255,255,255,.7); margin: 0; }