/* Ludus Funis - casca do painel: menu lateral, cards de funil, telas de cliente/acesso.
   Fica por cima do painel.css (que traz botoes, inputs, tabelas). */

:root {
  --fundo-app: #f4f5f7;
  --menu-l: 248px;
  --borda: #e4e7ec;
  --tinta: #101828;
  --tinta-fraca: #667085;
  --creme: #f9fafb;
  --raio: 14px;
  --sombra: 0 1px 2px rgba(16,24,40,.05);
  --sombra-alta: 0 12px 32px rgba(16,24,40,.12);
}

body.app {
  background: var(--fundo-app);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14.5px;
}
body.app h1, body.app h2, body.app h3 { font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: -.02em; }
body.app .page-head h1 { font-size: 26px; }
body.app .stat b, body.app .contador b, body.app .kpi b { font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: -.02em; }

/* ------------------------------------------------------------------ menu -- */
.menu {
  position: fixed; inset: 0 auto 0 0; width: var(--menu-l); z-index: 60;
  background: #fff; border-right: 1px solid var(--borda);
  display: flex; flex-direction: column; padding: 18px 14px;
}
.marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; color: var(--tinta); font-size: 17px; }
.marca:hover { text-decoration: none; }
.marca b { font-weight: 800; }
.marca-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--verde); display: grid; place-items: center; }
.marca-ic svg { width: 18px; height: 18px; fill: #fff; }

.espaco { background: var(--creme); border: 1px solid var(--borda); border-radius: 11px; padding: 9px 10px 10px; margin-bottom: 16px; }
.espaco label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-fraca); margin-bottom: 4px; }
.espaco select { padding: 7px 9px; font-size: 13.5px; font-weight: 600; background: #fff; }
.espaco.fixo b { font-size: 14px; }

.menu nav { display: grid; gap: 2px; }
.menu nav a {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px;
  color: #344054; font-weight: 500; font-size: 14px;
}
.menu nav a svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: #98a2b3; }
.menu nav a:hover { background: #f2f4f7; text-decoration: none; }
.menu nav a.on { background: #eef3ee; color: var(--verde); font-weight: 600; }
.menu nav a.on svg { color: var(--verde); }

.menu-pe { margin-top: auto; border-top: 1px solid var(--borda); padding: 14px 8px 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.quem { display: grid; min-width: 0; }
.quem b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quem span { font-size: 12px; color: var(--tinta-fraca); }
.menu-pe .sair { font-size: 13px; color: var(--tinta-fraca); }

.conteudo { margin-left: var(--menu-l); min-height: 100vh; }
.sem-menu .conteudo { margin-left: 0; }
.wrap { max-width: 1120px; padding: 32px 32px 70px; }
.wrap.larga { max-width: 1320px; }

.menu-abrir { display: none; }
@media (max-width: 900px) {
  .menu { transform: translateX(-100%); transition: transform .2s; box-shadow: var(--sombra-alta); }
  .menu-aberto .menu { transform: none; }
  .conteudo { margin-left: 0; }
  .menu-abrir {
    display: grid; place-items: center; position: fixed; top: 12px; left: 12px; z-index: 70;
    width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--borda); background: #fff; cursor: pointer;
  }
  .menu-abrir svg { width: 20px; height: 20px; stroke: var(--tinta); stroke-width: 2; fill: none; stroke-linecap: round; }
  .wrap { padding: 66px 16px 60px; }
}

/* --------------------------------------------------------- grade de funis -- */
.filtro-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.filtro-bar input[type=search] { max-width: 300px; padding: 9px 12px; border: 1px solid var(--borda); border-radius: 10px; font: inherit; background: #fff; }
.filtro-bar .seg { display: flex; background: #fff; border: 1px solid var(--borda); border-radius: 10px; padding: 3px; }
.filtro-bar .seg button { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--tinta-fraca); padding: 6px 12px; border-radius: 7px; cursor: pointer; }
.filtro-bar .seg button.on { background: #f2f4f7; color: var(--tinta); }

.grade-funis { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.fcard {
  background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden;
  box-shadow: var(--sombra); display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s;
}
.fcard:hover { box-shadow: var(--sombra-alta); transform: translateY(-2px); }
.fcard-capa {
  position: relative; height: 168px; display: grid; place-items: center; overflow: hidden;
  background: var(--fc-fundo, #fff); border-bottom: 1px solid var(--borda); color: inherit;
}
.fcard-capa:hover { text-decoration: none; }
.fcard-tela {
  width: 142px; height: 196px; margin-top: 46px; border-radius: 16px 16px 0 0; border: 6px solid #101828; border-bottom: 0;
  background: var(--fc-fundo, #fff); padding: 14px 11px; display: flex; flex-direction: column; gap: 7px; align-items: stretch;
  box-shadow: 0 10px 30px rgba(16,24,40,.18);
}
.fcard-tela i { display: block; height: 3px; border-radius: 3px; background: #e4e7ec; }
.fcard-tela i b { display: block; height: 100%; width: 30%; border-radius: 3px; background: var(--fc-cor); }
.fcard-tela strong { font-size: 10px; line-height: 1.25; color: var(--fc-tinta, #101828); text-align: center; font-weight: 800; max-height: 3.8em; overflow: hidden; }
.fcard-tela span { display: block; height: 15px; border-radius: 6px; border: 1px solid #e4e7ec; background: #fff; }
.fcard-tela span:first-of-type { background: var(--fc-cor); border-color: var(--fc-cor); }
.fcard-capa .pill { position: absolute; top: 12px; left: 12px; }
.fcard-capa .pill.ab { left: auto; right: 12px; background: #fff3db; color: #8a5a00; }
.fcard-corpo { padding: 14px 16px 12px; display: grid; gap: 4px; }
.fcard-corpo h3 { font-size: 15.5px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcard-corpo h3 a { color: var(--tinta); }
.fcard-meta { font-size: 12.5px; color: var(--tinta-fraca); }
.fcard-nums { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--borda); }
.fcard-nums div { padding: 10px 12px; display: grid; }
.fcard-nums div + div { border-left: 1px solid var(--borda); }
.fcard-nums b { font-size: 17px; font-weight: 800; }
.fcard-nums span { font-size: 11px; color: var(--tinta-fraca); }
.fcard-acoes { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--borda); align-items: center; }
.fcard-acoes .btn { flex: 0 0 auto; }
.fcard-acoes .mais { margin-left: auto; position: relative; }
.fcard-cliente { font-size: 11.5px; font-weight: 600; color: var(--verde); text-transform: uppercase; letter-spacing: .05em; }

.menu-mais {
  position: absolute; right: 0; bottom: calc(100% + 6px); min-width: 190px; z-index: 20;
  background: #fff; border: 1px solid var(--borda); border-radius: 11px; box-shadow: var(--sombra-alta); padding: 5px;
}
.menu-mais button, .menu-mais a {
  display: block; width: 100%; text-align: left; border: 0; background: none; font: inherit; font-size: 13.5px;
  padding: 8px 10px; border-radius: 7px; color: var(--tinta); cursor: pointer;
}
.menu-mais button:hover, .menu-mais a:hover { background: #f2f4f7; text-decoration: none; }
.menu-mais .vermelho { color: var(--vermelho); }
.menu-mais form { margin: 0; }

.ic-btn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--borda); background: #fff; display: grid; place-items: center; cursor: pointer; }
.ic-btn svg { width: 16px; height: 16px; fill: currentColor; color: var(--tinta-fraca); }

/* ------------------------------------------------------- modelos (novo) -- */
.modelos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }

/* --------------------------------------------------- clientes e acessos -- */
.linha-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.linha-form .campo + .campo { margin-top: 0; }
@media (max-width: 700px) { .linha-form { grid-template-columns: 1fr; } }
.etiqueta { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #f2f4f7; color: #344054; }
.etiqueta.equipe { background: #eef3ee; color: var(--verde); }
.prefixo-url { display: flex; align-items: stretch; border: 1px solid var(--borda); border-radius: 9px; overflow: hidden; background: #fff; }
.prefixo-url span { background: var(--creme); color: var(--tinta-fraca); padding: 10px 10px; font-size: 13px; border-right: 1px solid var(--borda); white-space: nowrap; }
.prefixo-url input { border: 0 !important; border-radius: 0 !important; }

/* --------------------------------------------------------- teste A/B ---- */
.ab-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 800px) { .ab-grade { grid-template-columns: 1fr; } }
.ab-lado { position: relative; }
.ab-lado.vence { border-color: #7fb78a; box-shadow: 0 0 0 3px #e3f1e5; }
.ab-letra { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; background: #f2f4f7; }
.ab-lado.vence .ab-letra { background: var(--verde); color: #fff; }
.ab-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ab-topo h2 { margin: 0 !important; font-size: 16px; }
.ab-nums { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px; }
.ab-nums div span { display: block; font-size: 12px; color: var(--tinta-fraca); }
.ab-nums div b { font-size: 24px; font-weight: 800; }
.ab-veredito { padding: 14px 18px; border-radius: 12px; background: #fff; border: 1px solid var(--borda); margin-bottom: 18px; font-size: 14.5px; }
.ab-veredito.ok { background: #eef7ef; border-color: #c9e2ce; }
.faixa-pct { display: flex; align-items: center; gap: 12px; }
.faixa-pct input[type=range] { flex: 1; accent-color: var(--verde); }
.aviso-ab { background: #fff8eb; border: 1px solid #f5dfb3; color: #7a5200; border-radius: 10px; padding: 9px 14px; font-size: 13.5px; margin-bottom: 14px; }

/* ----------------------------------------------------------------- toast -- */
.toast-app { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); background: #101828; color: #fff; padding: 10px 18px; border-radius: 10px; font-size: 14px; z-index: 300; box-shadow: var(--sombra-alta); }

/* --------------------------------------------------------------- login -- */
.login-tela { background: linear-gradient(160deg, #22301f 0%, #344938 55%, #4c6a51 100%); }
.login-cx h1 { font-family: 'Inter', sans-serif; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.btn.perigo-ghost { background: #fff; color: var(--vermelho); border-color: #f0d3d0; }
.btn.perigo-ghost:hover { background: #fbeceb; color: var(--vermelho); }
.pill.ab { background: #fff3db; color: #8a5a00; }
.construtor .cbar .pill.ab { flex: 0 0 auto; }
body.construtor .conteudo { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.ab-grade .card + .card, .grade-funis .card + .card { margin-top: 0; }