/* =====================================================================
   Moldura do Painel e do Console: menu lateral no computador,
   barra inferior no celular.
   ===================================================================== */
.moldura { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100dvh; }
.lateral { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: 18px; padding: 20px 14px;
           background: var(--superficie); border-right: 1px solid var(--borda); }
.lateral-marca { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.lateral-marca small { display: block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu { display: flex; flex-direction: column; gap: 2px; }
.menu-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none;
             color: var(--texto-2); font-weight: 600; transition: background .15s, color .15s; }
.menu-item:hover { background: var(--superficie-2); color: var(--texto); }
.menu-item.ativo { background: var(--petroleo-claro); color: var(--petroleo); }
.lateral-pe { margin-top: auto; padding: 12px 6px 0; border-top: 1px solid var(--borda); }
.eu { display: flex; align-items: center; gap: 10px; }
.eu small { display: block; }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none;
          background: var(--petroleo-claro); color: var(--petroleo); font-weight: 800; font-size: .85rem; }

.conteudo { padding: 28px clamp(16px, 4vw, 40px) 48px; max-width: 1080px; width: 100%; outline: none; display: flex; flex-direction: column; gap: 18px;
            animation: entrar .3s ease backwards; }
.cabecalho { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cabecalho h1 { margin: 0; font-size: 1.7rem; }
.faixa-aviso { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 14px; font-weight: 600; font-size: .92rem;
               background: var(--petroleo-claro); color: var(--petroleo); }
.faixa-aviso.risco { background: var(--vermelho-claro); color: var(--vermelho); }

.barra-inferior { display: none; }
@media (max-width: 860px) {
  .moldura { grid-template-columns: 1fr; }
  .lateral { display: none; }
  .conteudo { padding: 20px 16px calc(96px + env(safe-area-inset-bottom)); }
  .cabecalho h1 { font-size: 1.4rem; }
  .barra-inferior { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
                    background: var(--superficie); border-top: 1px solid var(--borda);
                    padding: 6px max(8px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right)); }
  .barra-inferior a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; text-decoration: none;
                      color: var(--texto-2); font-size: .72rem; font-weight: 700; border-radius: 12px; }
  .barra-inferior a.ativo { color: var(--petroleo); background: var(--petroleo-claro); }
}

/* ---------- início ---------- */
.boas-vindas h2 { font-size: 1.25rem; }
.checklist { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 4px; counter-reset: passo; }
.checklist li { display: flex; align-items: center; gap: 14px; padding: 12px 6px; border-top: 1px solid var(--grade); }
.checklist li > div { flex: 1; min-width: 0; }
.checklist li p { margin: 0; }
.check-bola { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--borda); display: grid; place-items: center; flex: none; color: #fff; }
.checklist li.feito .check-bola { background: var(--verde); border-color: var(--verde); }
.checklist li.feito b { color: var(--texto-2); text-decoration: line-through; text-decoration-color: var(--borda); }
.resumo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 640px) {
  .resumo { gap: 8px; }
  .resumo .kpi { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; }
  .resumo .kpi-ico { display: none; }
  .resumo .kpi small { font-size: .72rem; line-height: 1.25; }
  .resumo .kpi b { font-size: 1.25rem; }
}
.kpi { display: flex; align-items: center; gap: 14px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; padding: 16px; }
.kpi small { display: block; }
.kpi b { font-size: 1.6rem; line-height: 1.1; }
.kpi-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--petroleo-claro); color: var(--petroleo); flex: none; }

/* ---------- equipe ---------- */
.filtros { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.filtros input[type=search] { max-width: 320px; }
.alternar { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--texto-2); cursor: pointer; }
.alternar input { width: 18px; height: 18px; min-height: 0; accent-color: var(--petroleo); }
.lista-equipe { display: flex; flex-direction: column; gap: 18px; }
.grupo-titulo { display: flex; align-items: center; gap: 8px; font-size: 1rem; margin-bottom: 8px; color: var(--texto-2); }
.sem-padding { padding: 0; overflow: hidden; }
.pessoa { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--grade); }
.pessoa:first-child { border-top: 0; }
.pessoa.desligada { opacity: .55; }
.pessoa-corpo { display: flex; flex-direction: column; min-width: 0; }
.pessoa-corpo b, .pessoa-corpo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pessoa-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.icone-vazio { width: 40px; }
@media (max-width: 560px) {
  .pessoa { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pessoa-chips { grid-column: 2 / 3; justify-content: flex-start; }
  .pessoa > .icone-btn, .pessoa > .icone-vazio { grid-row: 1; grid-column: 3; }
}
.opcoes { display: flex; flex-direction: column; gap: 6px; }
.opcao { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; text-align: left; padding: 12px; border-radius: 14px;
         border: 1px solid var(--borda); background: var(--superficie); cursor: pointer; }
.opcao:hover { background: var(--superficie-2); }
.opcao small { display: block; }
.opcao-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--petroleo-claro); color: var(--petroleo); }
.opcao.perigo .opcao-ico { background: var(--vermelho-claro); color: var(--vermelho); }
.opcao.perigo b { color: var(--vermelho); }
.codigo-grande { font-size: 2.2rem; font-weight: 800; letter-spacing: .25em; text-align: center; padding: 16px; border-radius: 16px;
                 background: var(--petroleo-claro); color: var(--petroleo); }
.confirmar { display: flex; flex-direction: column; gap: 14px; }

/* ---------- lojas ---------- */
.grade-lojas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.loja { display: flex; flex-direction: column; gap: 4px; }
.loja h2 { margin: 8px 0 0; }
.loja p { margin: 0; }
.loja-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--coral-claro); color: var(--coral-esc); }
.loja-num { margin-top: 10px !important; }
.loja-num b { font-size: 1.4rem; }

/* ---------- conta ---------- */
.conta { display: flex; flex-direction: column; max-width: 520px; padding: 6px 18px; }
.linha-dado { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--grade); }
.linha-dado:first-child { border-top: 0; }

/* ---------- console ---------- */
.bloco { display: block; }
.mini-chip { margin-left: 6px; padding: 1px 7px; font-size: .68rem; }
.linha-link { cursor: pointer; transition: background .15s; }
.linha-link:hover, .linha-link:focus-visible { background: var(--superficie-2); }
.cidade-uf { display: grid; grid-template-columns: 1fr 64px; gap: 8px; }
.pe-cartao { padding: 12px 0 8px; border-top: 1px solid var(--grade); }
.opcao.radio { grid-template-columns: auto 1fr; }
.opcao.radio input { width: 18px; height: 18px; min-height: 0; accent-color: var(--petroleo); }
.opcao.radio:has(input:checked) { border-color: var(--petroleo); background: var(--petroleo-claro); }
.folha form h3 { margin: 6px 0 -4px; color: var(--petroleo); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
/* Console: menu lateral escuro nos dois temas, para nunca confundir com o Painel do cliente */
.moldura.console .lateral { background: #0E1F25; color: #E6F0F2; border-right: 0; }
.moldura.console .lateral .suave { color: rgba(230,240,242,.62); }
.moldura.console .menu-item { color: rgba(230,240,242,.72); }
.moldura.console .menu-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.moldura.console .menu-item.ativo { background: rgba(63,184,196,.18); color: #7FD3DB; }
.moldura.console .lateral-pe { border-top-color: rgba(255,255,255,.12); }
.moldura.console .avatar { background: rgba(63,184,196,.18); color: #7FD3DB; }

/* ---------- cabeçalho com loja e mês ---------- */
.cabecalho-acoes:empty { display: none; }
.seletor-loja { width: auto; min-height: 38px; padding: 6px 12px; font-weight: 700; }
.lateral-empresa { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; background: var(--superficie-2); }
.lateral-empresa:empty { display: none; }
.lateral-empresa small { font-size: .78rem; }
.acoes-linha.entre { justify-content: space-between; }
.resumo.quatro { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.kpi { min-width: 0; }
.kpi > div { min-width: 0; }
.kpi b { font-size: 1.35rem; }

/* ---------- início ---------- */
.progresso-loja { display: flex; flex-direction: column; gap: 10px; position: relative; }
.progresso-cab { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.progresso-loja .barra { height: 14px; }
.marco-meta { position: relative; height: 0; }
.marco-meta span { position: absolute; left: var(--pos); top: -30px; transform: translateX(-50%); font-size: .7rem; font-weight: 700; color: var(--texto-2);
                   border-left: 2px solid var(--texto-2); padding-left: 4px; height: 20px; line-height: 20px; }
.progresso-loja p { margin: 0; }

/* ---------- metas ---------- */
.cartao h2 .ico { color: var(--petroleo); }
.tres-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 560px) { .tres-col { grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .tres-col .rotulo { font-size: .72rem; } }
.campo.curto input { max-width: 120px; }
.regras { gap: 16px; }
.metas-vendedores { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
@media (max-width: 420px) { .metas-vendedores { grid-template-columns: 1fr; } }
.meta-vendedor { display: flex; flex-direction: column; gap: 12px; }
.meta-vend-cab { display: flex; gap: 12px; align-items: center; }
.meta-vend-cab small { display: block; }
.taxas-vendedor summary { cursor: pointer; font-weight: 700; font-size: .88rem; color: var(--petroleo); padding: 4px 0; }
.taxas-vendedor[open] summary { margin-bottom: 8px; }
.marcas-meta { display: flex; flex-direction: column; gap: 8px; }
.marca-linha { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .9fr) auto; gap: 6px; align-items: center; }
.marca-linha input { min-height: 42px; }
.soma-metas { margin: 0; font-weight: 600; }
.soma-metas.alerta-soma { color: var(--ambar); }
.barra-salvar { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; padding: 12px 0;
                background: linear-gradient(transparent, var(--fundo) 35%); }
@media (max-width: 860px) { .barra-salvar { bottom: calc(64px + env(safe-area-inset-bottom)); } .barra-salvar .btn { width: 100%; } }

/* ---------- vendas ---------- */
.abas-tela { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--superficie-2); border: 1px solid var(--borda); align-self: flex-start; }
.abas-tela button { border: 0; background: none; padding: 8px 14px; border-radius: 10px; font-weight: 700; color: var(--texto-2); cursor: pointer;
                    display: inline-flex; gap: 8px; align-items: center; }
.abas-tela button.ativa { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); }
.contador { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--coral); color: #fff; font-size: .75rem; display: inline-grid; place-items: center; }
.lista-validacao { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.lista-validacao:empty { display: none; }
.validar { display: flex; flex-direction: column; gap: 10px; }
.validar p { margin: 0; }
.validar-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.validar-cab b { font-size: 1.25rem; }
tr.cancelada td { color: var(--texto-2); text-decoration: line-through; }
tr.cancelada td:nth-last-child(-n+2) { text-decoration: none; }
th.dir, td.dir { text-align: right; }
tfoot td { border-top: 2px solid var(--borda); background: var(--superficie-2); }
table.comissoes td { white-space: nowrap; }

/* ---------- identidade ---------- */
.identidade-grade { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; margin: 12px 0; }
@media (max-width: 600px) { .identidade-grade { grid-template-columns: 1fr; } }
.previa-logo { min-height: 110px; border: 1px dashed var(--borda); border-radius: 14px; display: grid; place-items: center; padding: 12px; background: #fff; }
.previa-logo img { max-height: 90px; max-width: 100%; object-fit: contain; }
.campos-identidade { display: flex; flex-direction: column; gap: 10px; }
.campos-identidade input[type=file] { min-height: 0; padding: 8px; }