/* Portal do Cliente Alterego. Cores e fontes do kit da marca (clientes/_alterego/midia-kit). */
@font-face { font-family: "Neue Montreal"; src: url("/marca/NeueMontreal-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Neue Montreal"; src: url("/marca/NeueMontreal-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Nexa"; src: url("/marca/NexaLight.woff2") format("woff2"); font-weight: 300 400; font-display: swap; }
@font-face { font-family: "Nexa"; src: url("/marca/NexaBold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --navy: #1F3B4D; --navy-2: #294F66; --azul: #3A7092; --azul-2: #346583;
  --claro: #D4EBF7; --gelo: #F3F8FB; --gelo-2: #F7FAFC;
  --salvia: #A9C5A0; --verde: #77A267; --verde-2: #4F7A41; --vermelho: #B5473A; --vermelho-claro: #FBECEA; --verde-claro: #EDF5EA;
  --texto: #5F6B78; --tinta: #1F2937; --linha: #E4EAEF; --borda: #D8E6EE; --branco: #fff;
  --titulo: "Neue Montreal", system-ui, -apple-system, "Segoe UI", sans-serif;
  --corpo: "Nexa", system-ui, -apple-system, "Segoe UI", sans-serif;
  --raio: 14px; --sombra: 0 1px 2px rgba(31, 59, 77, .06), 0 4px 16px rgba(31, 59, 77, .05);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--gelo-2); color: var(--tinta); font: 15px/1.5 var(--corpo); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--titulo); color: var(--navy); margin: 0; letter-spacing: -.01em; }
a { color: var(--azul); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.carregando { padding: 80px; text-align: center; color: var(--texto); }
.oculto { display: none !important; }

/* ---------- entrada */
.entrada { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.entrada-lado { background: var(--navy); color: var(--claro); padding: 56px; display: flex; flex-direction: column; justify-content: space-between; }
.entrada-lado img { width: 190px; }
.entrada-lado h2 { color: #fff; font-size: 38px; line-height: 1.1; max-width: 420px; }
.entrada-lado p { max-width: 420px; color: var(--claro); opacity: .85; }
.entrada-form { display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.caixa { width: 100%; max-width: 380px; }
.caixa h1 { font-size: 30px; margin-bottom: 6px; }
.caixa .sub { color: var(--texto); margin: 0 0 26px; }
.campo { display: block; margin-bottom: 16px; }
.campo span { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--texto); margin-bottom: 6px; }
.campo input, .campo select { width: 100%; height: 46px; border: 1px solid var(--borda); border-radius: 10px; padding: 0 14px; background: #fff; }
.campo input:focus, .campo select:focus { outline: 2px solid var(--claro); border-color: var(--azul); }
.codigo-input { letter-spacing: 10px; font-size: 22px !important; text-align: center; font-family: var(--titulo); }
.mostrar { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--texto); margin: -6px 0 18px; }
.btn { height: 46px; border-radius: 10px; border: 0; padding: 0 20px; background: var(--navy); color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn:hover { background: var(--navy-2); }
.btn:disabled { opacity: .6; cursor: wait; }
.btn.largo { width: 100%; }
.btn.claro { background: #fff; color: var(--navy); border: 1px solid var(--borda); }
.btn.claro:hover { background: var(--gelo); }
.btn.pequeno { height: 34px; padding: 0 12px; font-size: 13px; }
.link { background: none; border: 0; color: var(--azul); padding: 0; text-decoration: underline; font-size: 14px; }
.aviso { border-radius: 10px; padding: 12px 14px; font-size: 14px; margin-bottom: 16px; }
.aviso.erro { background: var(--vermelho-claro); color: var(--vermelho); }
.aviso.ok { background: var(--verde-claro); color: var(--verde-2); }
.aviso.info { background: var(--gelo); color: var(--navy-2); }
.rodape-caixa { margin-top: 22px; font-size: 14px; color: var(--texto); text-align: center; }

/* ---------- app */
.app { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }
.lateral { background: #fff; border-right: 1px solid var(--linha); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.lateral .logo { padding: 22px 22px 14px; }
.lateral .logo img { height: 34px; }
.menu { flex: 1; overflow-y: auto; padding: 6px 12px 12px; }
.menu a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); padding: 9px 12px; border-radius: 10px; font-size: 14px; }
.menu a:hover { background: var(--gelo); }
.menu a.ativo { background: var(--claro); color: var(--navy); font-weight: 700; }
.menu .grupo { margin-top: 14px; }
.menu .grupo-titulo { display: flex; align-items: center; gap: 10px; padding: 6px 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--texto); }
.menu .bolinha { width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff; font: 700 12px/24px var(--titulo); text-align: center; flex: 0 0 24px; }
.menu .sub a { padding-left: 46px; font-size: 13.5px; color: var(--texto); }
.menu .sub a.ativo { color: var(--navy); background: var(--gelo); font-weight: 700; }
.lateral .pe { border-top: 1px solid var(--linha); padding: 12px; }
.seletor-cliente { width: 100%; height: 40px; border: 1px solid var(--borda); border-radius: 10px; padding: 0 10px; background: var(--gelo-2); margin-bottom: 8px; }
.quem { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; }
.quem .ini { width: 34px; height: 34px; border-radius: 50%; background: var(--salvia); color: var(--navy); font: 700 14px/34px var(--titulo); text-align: center; flex: 0 0 34px; }
.quem .nm { font-size: 13px; line-height: 1.25; overflow: hidden; }
.quem .nm b { display: block; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quem .nm small { color: var(--texto); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-links { display: flex; gap: 6px; margin-top: 6px; }
.pe-links a, .pe-links button { flex: 1; text-align: center; font-size: 12.5px; padding: 7px; border-radius: 8px; background: var(--gelo); color: var(--navy); text-decoration: none; border: 0; }

.principal { min-width: 0; }
.topo { position: sticky; top: 0; z-index: 5; background: rgba(247, 250, 252, .94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--linha); padding: 12px 28px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.topo .abrir-menu { display: none; }
.abas { display: inline-flex; background: #fff; border: 1px solid var(--borda); border-radius: 10px; padding: 3px; }
.abas button { border: 0; background: none; padding: 6px 14px; border-radius: 8px; font-size: 13.5px; color: var(--texto); }
.abas button.ativo { background: var(--navy); color: #fff; font-weight: 700; }
.botao-data { position: relative; }
.botao-data > button { height: 38px; border: 1px solid var(--borda); background: #fff; border-radius: 10px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; }
.botao-data > button small { color: var(--texto); }
.escolhas { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.escolha { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--borda); border-radius: 10px; padding: 0 4px 0 12px; height: 38px; }
.escolha span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--texto); }
.escolha select { border: 0; background: none; height: 36px; font-size: 13.5px; font-weight: 700; color: var(--navy); max-width: 260px; cursor: pointer; }
.escolha select:focus { outline: none; }
.escolha:focus-within { border-color: var(--azul); }
.unidade { height: 38px; border: 1px solid var(--borda); background: #fff; border-radius: 10px; padding: 0 10px; font-size: 13.5px; max-width: 260px; }
.popover { position: absolute; top: 44px; left: 0; background: #fff; border: 1px solid var(--borda); border-radius: 14px; box-shadow: 0 12px 40px rgba(31, 59, 77, .16); display: flex; z-index: 20; }
.cal { padding: 14px; width: 288px; }
.cal-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-cab b { font-family: var(--titulo); color: var(--navy); text-transform: capitalize; }
.cal-cab button { border: 0; background: var(--gelo); width: 30px; height: 30px; border-radius: 8px; }
.cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal-grade .dsem { font-size: 11px; color: var(--texto); padding: 4px 0; }
.cal-grade button { border: 0; background: none; height: 34px; border-radius: 8px; font-size: 13px; }
.cal-grade button:hover { background: var(--gelo); }
.cal-grade button.fora { color: #B9C3CC; }
.cal-grade button.entre { background: var(--claro); border-radius: 0; }
.cal-grade button.ponta { background: var(--navy); color: #fff; border-radius: 8px; }
.cal-grade button:disabled { color: #D5DCE2; cursor: default; }
.cal .btn { margin-top: 12px; width: 100%; height: 40px; }
.atalhos { border-left: 1px solid var(--linha); padding: 10px; display: flex; flex-direction: column; min-width: 170px; max-height: 420px; overflow-y: auto; }
.atalhos button { border: 0; background: none; text-align: left; padding: 7px 10px; border-radius: 8px; font-size: 13.5px; }
.atalhos button:hover { background: var(--gelo); }

.conteudo { padding: 24px 28px 60px; max-width: 1360px; }
.cabeca { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.cabeca h1 { font-size: 30px; }
.cabeca p { margin: 4px 0 0; color: var(--texto); }
.secao { margin-top: 30px; }
.secao-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.secao-cab h2 { font-size: 19px; }
.secao-cab .marca-plat { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font: 700 11px var(--titulo); color: #fff; flex: 0 0 28px; }
.plat-meta_ads { background: #3B5998; } .plat-google_ads { background: #2F7D4F; } .plat-instagram { background: #B2457B; } .plat-facebook { background: #3B5998; }
.plat-gmn { background: #C77D24; } .plat-atendimento { background: var(--verde); } .plat-farmaispro { background: #003794; } .plat-sellflux { background: #6B4BB0; }
.plat-disparo { background: var(--azul); } .plat-merchant { background: #2F7D4F; } .plat-alterego { background: var(--navy); }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.cartao { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px 16px 10px; box-shadow: var(--sombra); display: flex; flex-direction: column; min-height: 196px; }
a.cartao { text-decoration: none; min-height: 0; }
a.cartao:hover { border-color: var(--azul); }
.cartao .bolinha { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: #fff; font: 700 11px/22px var(--titulo); text-align: center; margin-right: 6px; }
.cartao h3 { font-size: 14px; font-family: var(--corpo); font-weight: 700; color: var(--navy); }
.cartao .explica { font-size: 12.5px; color: var(--texto); margin: 2px 0 10px; line-height: 1.35; min-height: 34px; }
.cartao .valor { font: 700 28px/1.1 var(--titulo); color: var(--tinta); }
.cartao .valor small { font: 400 14px var(--corpo); color: var(--texto); }
.cartao .comp { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12.5px; color: var(--texto); }
.selo { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 99px; font-weight: 700; font-size: 12px; }
.selo.bom { background: var(--verde-claro); color: var(--verde-2); }
.selo.ruim { background: var(--vermelho-claro); color: var(--vermelho); }
.selo.neutro { background: var(--gelo); color: var(--navy-2); }
.spark { margin-top: auto; height: 56px; position: relative; }
.spark svg { width: 100%; height: 56px; display: block; overflow: visible; }
.spark .linha-atual { fill: none; stroke: var(--azul); stroke-width: 2; }
.spark .area-atual { fill: var(--claro); opacity: .6; }
.spark .linha-ant { fill: none; stroke: #B9C8D3; stroke-width: 1.4; stroke-dasharray: 3 3; }
.dica { position: absolute; bottom: 62px; transform: translateX(-50%); background: var(--navy); color: #fff; font-size: 12px; padding: 6px 9px; border-radius: 8px; white-space: nowrap; pointer-events: none; z-index: 3; }
.dica b { color: #fff; }
.vazio { background: #fff; border: 1px dashed var(--borda); border-radius: var(--raio); padding: 22px; color: var(--texto); }
.avisos { margin: -4px 0 10px; font-size: 12.5px; color: var(--texto); }
.avisos p { margin: 0 0 4px; }

.tabela-caixa { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); margin-top: 14px; overflow: hidden; box-shadow: var(--sombra); }
.tabela-caixa h4 { font-size: 14.5px; padding: 14px 16px 0; }
.rolar { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto); font-weight: 700; padding: 12px 16px 8px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
td { padding: 10px 16px; border-bottom: 1px solid var(--gelo); white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }

.rfm { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 14px; }
.rfm div { background: #fff; border: 1px solid var(--linha); border-radius: 12px; padding: 12px; }
.rfm b { display: block; font-family: var(--titulo); font-size: 22px; color: var(--navy); }
.rfm span { font-size: 13px; color: var(--texto); }
.rfm .barra { height: 6px; border-radius: 6px; background: var(--gelo); margin-top: 8px; overflow: hidden; }
.rfm .barra i { display: block; height: 100%; background: var(--azul); }

.analise { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 22px; box-shadow: var(--sombra); }
.analise p { margin: 0 0 12px; line-height: 1.6; }
.analise h4 { margin: 16px 0 8px; font-size: 15px; }
.analise ul { margin: 0; padding-left: 20px; }
.analise li { margin-bottom: 6px; }
.orient { display: grid; gap: 10px; margin-top: 8px; }
.orient div { border-left: 3px solid var(--verde); background: var(--gelo-2); padding: 10px 12px; border-radius: 0 10px 10px 0; }
.orient small { color: var(--texto); display: block; }

.painel { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px; box-shadow: var(--sombra); margin-bottom: 18px; }
.painel h2 { font-size: 18px; margin-bottom: 4px; }
.painel > p { color: var(--texto); margin: 0 0 16px; }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lista-con { display: grid; gap: 8px; }
.lista-con div { display: flex; justify-content: space-between; gap: 10px; border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px; font-size: 14px; align-items: center; flex-wrap: wrap; }
.estado { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 99px; }
.estado.conectado { background: var(--verde-claro); color: var(--verde-2); }
.estado.recusado, .estado.erro { background: var(--vermelho-claro); color: var(--vermelho); }
.estado.pendente, .estado.lendo { background: var(--gelo); color: var(--navy-2); }

.membros-cab { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 8px; }
.membros-cab p { color: var(--texto); margin: 4px 0 0; max-width: 620px; }
.membros-cab .campo { min-width: 260px; margin-bottom: 0; }
.membros { display: grid; gap: 10px; }
.membro { border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px; }
.membro.inativo { background: var(--gelo-2); opacity: .75; }
.membro-topo { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.membro-topo .quem { padding: 0; }
.membro-estado { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.membro-estado small { color: var(--texto); font-size: 12px; }
.membro-acesso { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--gelo); color: var(--navy); border-radius: 99px; padding: 4px 10px; font-size: 13px; }
.chip.forte { background: var(--claro); font-weight: 700; }
.chip small { font-weight: 400; color: var(--texto); }
.chip button { border: 0; background: none; color: var(--vermelho); font-size: 16px; line-height: 1; padding: 0 2px; }
.dar { display: inline-flex; gap: 6px; align-items: center; }
.dar select { height: 34px; border: 1px solid var(--borda); border-radius: 8px; padding: 0 8px; background: #fff; font-size: 13px; max-width: 240px; }
.membro-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.btn.perigo { color: var(--vermelho); border-color: #EBC7C2; }
.btn.perigo:hover { background: var(--vermelho-claro); }
.membro-editar { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 10px; align-items: end; border-top: 1px solid var(--linha); padding-top: 10px; }
.membro-editar .campo { margin-bottom: 0; }

@media (max-width: 980px) {
  .membro-editar { grid-template-columns: 1fr; }
  .membro-estado { align-items: flex-start; }
  .app { grid-template-columns: 1fr; }
  .lateral { position: fixed; inset: 0 auto 0 0; width: 280px; z-index: 30; transform: translateX(-100%); transition: transform .2s; box-shadow: 0 0 40px rgba(0, 0, 0, .2); }
  .lateral.aberta { transform: none; }
  .topo { padding: 10px 16px; }
  .topo .abrir-menu { display: inline-flex; }
  .escolhas { margin-left: 0; width: 100%; }
  .escolha { flex: 1; }
  .escolha select { max-width: none; width: 100%; }
  .conteudo { padding: 18px 16px 50px; }
  .entrada { grid-template-columns: 1fr; }
  .entrada-lado { padding: 28px 16px; gap: 18px; }
  .entrada-lado h2 { font-size: 26px; }
  .duas { grid-template-columns: 1fr; }
  .popover { position: fixed; left: 8px; right: 8px; top: 64px; flex-direction: column; max-height: 80vh; overflow-y: auto; }
  .cal { width: 100%; }
  .atalhos { border-left: 0; border-top: 1px solid var(--linha); flex-direction: row; flex-wrap: wrap; max-height: none; }
}