@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

/* O atributo hidden tem que ganhar de .grade { display:grid } e de display:flex.
   Sem isto, prévia de bot novo, campos da criação e outros blocos "escondidos" aparecem. */
[hidden] { display: none !important; }

/* ===== Tokens ===== */
html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0a0b0e;
    --p: #14161c;
    --p2: #1b1f27;
    --p3: #22262f;
    --bd: rgba(255, 255, 255, .09);
    --bd2: rgba(255, 255, 255, .16);
    --t: #f3f2f0;
    --m: #8b9099;
    --or: #ff6a1a;
    --or2: #ff9147;
    --orsoft: rgba(255, 106, 26, .14);
    --ok: #2fd08a;
    --oksoft: rgba(47, 208, 138, .14);
    --wa: #ffb02e;
    --wasoft: rgba(255, 176, 46, .14);
    --da: #ff5257;
    --dasoft: rgba(255, 82, 87, .14);
    --shadow: 0 18px 40px -22px rgba(0, 0, 0, .9);
}

html[data-theme="light"] {
    color-scheme: light;
    --bg: #f2f1ee;
    --p: #ffffff;
    --p2: #f8f7f5;
    --p3: #eeece8;
    --bd: rgba(18, 20, 26, .1);
    --bd2: rgba(18, 20, 26, .2);
    --t: #15171c;
    --m: #676c76;
    --or: #e85a06;
    --or2: #ff8434;
    --orsoft: rgba(232, 90, 6, .1);
    --ok: #12a866;
    --oksoft: rgba(18, 168, 102, .12);
    --wa: #b57500;
    --wasoft: rgba(181, 117, 0, .12);
    --da: #d93a3f;
    --dasoft: rgba(217, 58, 63, .1);
    --shadow: 0 16px 32px -24px rgba(0, 0, 0, .35);
}

/* ===== Reset / base ===== */
html[data-theme] * { box-sizing: border-box; }
html[data-theme] body {
    margin: 0;
    background: var(--bg);
    color: var(--t);
    font-family: 'Manrope', sans-serif;
    font-size: 13.5px;
}
html[data-theme] a { color: inherit; text-decoration: none; }
html[data-theme] button, html[data-theme] input, html[data-theme] textarea, html[data-theme] select {
    font-family: 'Manrope', sans-serif;
    color: inherit;
}
html[data-theme] h1, html[data-theme] h2, html[data-theme] h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .01em;
    margin: 0;
}
html[data-theme] .mono { font-family: 'JetBrains Mono', monospace; }

/* Scrollbars */
html[data-theme] * {
    scrollbar-width: thin;
    scrollbar-color: var(--bd2) transparent;
}
html[data-theme] *::-webkit-scrollbar { width: 7px; height: 7px; }
html[data-theme] *::-webkit-scrollbar-track { background: transparent; }
html[data-theme] *::-webkit-scrollbar-thumb { background: var(--bd2); border-radius: 99px; }
html[data-theme] *::-webkit-scrollbar-thumb:hover { background: var(--m); }

@keyframes pulseDot {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}
.ponto-vivo {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ok);
    display: inline-block;
    animation: pulseDot 1.8s infinite;
}

/* ===== Layout raiz ===== */
.layout-painel {
    display: flex;
    min-height: 100vh;
    background: var(--bg);
}
.conteudo-principal {
    flex: 1;
    min-width: 0;
    padding: 0 32px 40px;
}

/* ===== Barra lateral ===== */
/* Recolhida (68px, só ícones) por padrão. .barra-lateral reserva o espaço no layout;
   .barra-lateral-interna é quem abre no hover, por cima do conteúdo (sem empurrar a página).
   html.barra-fixa ("Fixar sidebar") mantém aberta e passa a empurrar o conteúdo. */
html[data-theme] { --largura-barra: 68px; --largura-barra-aberta: 272px; }
html[data-theme].barra-fixa { --largura-barra: 272px; }
.barra-lateral {
    width: var(--largura-barra);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 60;
}
.barra-lateral-interna {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--largura-barra);
    background: var(--p);
    border-right: 1px solid var(--bd);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width .18s ease, box-shadow .18s ease;
}
.barra-lateral-interna:hover,
.barra-lateral-interna:focus-within {
    width: var(--largura-barra-aberta);
    box-shadow: 18px 0 40px -24px rgba(0, 0, 0, .7);
}
.barra-lateral-topo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 14px 12px;
    flex-shrink: 0;
}
.logo-marca { width: 40px; height: 40px; border-radius: 11px; object-fit: cover; flex-shrink: 0; }
.logo-textos { display: flex; flex-direction: column; min-width: 0; white-space: nowrap; }
.logo-titulo { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 20px; text-transform: uppercase; line-height: 1.1; }
.logo-subtitulo { font-size: 11px; color: var(--m); }

/* Cartão do usuário (nome + sair) -- só aparece com a barra aberta. */
.usuario-cartao {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 12px 10px;
    padding: 10px;
    background: var(--p2);
    border: 1px solid var(--bd);
    border-radius: 14px;
    flex-shrink: 0;
}
.usuario-cartao .usuario-info { flex: 1; }

.nav-lateral { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.nav-grupo { display: flex; flex-direction: column; gap: 2px; }
/* Menu em seções: um respiro a mais entre uma seção e a próxima (recolhido, o título vira só um traço separador) */
.nav-lateral .nav-grupo + .nav-grupo { margin-top: 8px; }
.nav-grupo-titulo {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--m);
    padding: 8px 14px 6px;
    white-space: nowrap;
}
.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 14px;
    border-radius: 10px;
    color: var(--m);
    background: transparent;
    font-size: 13.5px;
    font-weight: 700;
}
.nav-item:hover { background: var(--p2); }
.nav-item.ativo { background: var(--orsoft); color: var(--or); }
.nav-item.ativo::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--or);
}
.nav-icone { display: flex; flex-shrink: 0; }
.nav-icone svg { width: 17px; height: 17px; }
.nav-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-sub { display: block; margin-top: 1px; font-size: 10.5px; font-weight: 500; color: var(--m); opacity: .85; overflow: hidden; text-overflow: ellipsis; }
.nav-item.ativo .nav-sub { color: inherit; opacity: .7; }

/* Barra recolhida: esconde o que é texto e deixa só os ícones centralizados. */
@media (min-width: 861px) {
    html[data-theme]:not(.barra-fixa) .barra-lateral-interna:not(:hover):not(:focus-within) .logo-textos,
    html[data-theme]:not(.barra-fixa) .barra-lateral-interna:not(:hover):not(:focus-within) .usuario-cartao .usuario-info,
    html[data-theme]:not(.barra-fixa) .barra-lateral-interna:not(:hover):not(:focus-within) .usuario-cartao .botao-sair,
    html[data-theme]:not(.barra-fixa) .barra-lateral-interna:not(:hover):not(:focus-within) .nav-texto,
    html[data-theme]:not(.barra-fixa) .barra-lateral-interna:not(:hover):not(:focus-within) .nav-badge,
    html[data-theme]:not(.barra-fixa) .barra-lateral-interna:not(:hover):not(:focus-within) .aviso-email {
        display: none;
    }
    /* O avatar continua visível recolhida: o cartão mantém a mesma altura (só perde fundo e
       borda), então abrir a barra não empurra o menu pra baixo. */
    html[data-theme]:not(.barra-fixa) .barra-lateral-interna:not(:hover):not(:focus-within) .usuario-cartao {
        padding: 10px 4px;
        background: transparent;
        border-color: transparent;
    }
    html[data-theme]:not(.barra-fixa) .barra-lateral-interna:not(:hover):not(:focus-within) .nav-grupo-titulo {
        font-size: 0;
        height: 1px;
        padding: 0;
        margin: 6px 10px;
        background: var(--bd);
    }
    html[data-theme]:not(.barra-fixa) .barra-lateral-interna:not(:hover):not(:focus-within) .nav-grupo:first-child .nav-grupo-titulo { display: none; }
}
.nav-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    font-weight: 600;
    background: var(--orsoft);
    color: var(--or);
    padding: 2px 6px;
    border-radius: 6px;
    flex-shrink: 0;
}

.barra-lateral-rodape { border-top: 1px solid var(--bd); padding: 8px 12px; flex-shrink: 0; }
.botao-fixar-barra {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 14px;
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: var(--m);
    font: 700 13px 'Manrope', sans-serif;
    cursor: pointer;
    text-align: left;
}
.botao-fixar-barra:hover { background: var(--p2); color: var(--t); }
.botao-fixar-barra[aria-pressed="true"] { color: var(--or); }
.usuario-rodape { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.usuario-avatar {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex-shrink: 0;
    background: linear-gradient(140deg, var(--or), #b83d00);
    color: #fff;
    display: grid;
    place-items: center;
    font: 800 13px 'Manrope', sans-serif;
    overflow: hidden;
}
.usuario-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.usuario-info { min-width: 0; display: flex; flex-direction: column; }
.usuario-nome { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-email { font-size: 10.5px; color: var(--m); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.botao-sair {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--bd);
    border-radius: 9px;
    color: var(--m);
}
.botao-sair:hover { color: var(--da); border-color: var(--da); }
.botao-sair svg { width: 15px; height: 15px; }

/* .oculto-desktop só valia pra elemento que já nascia display:none (o card de destaque),
   porque a única regra existente era o display:block dentro do breakpoint mobile. Sem esta
   regra base, qualquer outro elemento com a classe aparecia no desktop também. */
.oculto-desktop { display: none; }

/* Tab bar mobile — escondida no desktop */
.barra-mobile { display: none; }

/* Folha de menu ("Mais" da tab bar) — só existe no mobile, onde a barra lateral some.
   Ver anotacoes/OBSERVACOES.md. */
.folha-menu { display: none; }

/* ===== Cabeçalho de página ===== */
.cabecalho-pagina {
    padding: 22px 0 18px;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
}
.cabecalho-pagina > div:first-child { flex: 1; min-width: 260px; }
.cabecalho-pagina h1 { font-size: 38px; line-height: 1; }
/* Subtítulo com filete lateral: padrão de todas as páginas do cliente (ref. SharkBot). */
.cabecalho-pagina p {
    margin: 10px 0 0;
    padding-left: 12px;
    border-left: 2px solid var(--bd2);
    color: var(--m);
    font-size: 13.5px;
    max-width: 64ch;
}

/* Faixa de filtros logo abaixo do cabeçalho: rótulo à esquerda, opções (Hoje, Ontem...) à direita. */
.faixa-filtros {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
    padding: 10px 14px;
    margin: 0 0 18px;
    background: var(--p);
    border: 1px solid var(--bd);
    border-radius: 16px;
}
.faixa-filtros-rotulo {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--m);
    font: 600 11.5px 'JetBrains Mono', monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.faixa-filtros-rotulo svg { width: 15px; height: 15px; }
.faixa-filtros-controles { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.faixa-filtros .seletor-periodo { background: var(--p2); }
.acoes-cabecalho { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.alternador-tema {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    background: var(--p2);
    border: 1px solid var(--bd);
    border-radius: 10px;
    color: var(--t);
    font: 600 12px 'Manrope', sans-serif;
    cursor: pointer;
}
.alternador-tema:hover { border-color: var(--bd2); }
.alternador-tema svg { width: 14px; height: 14px; }

/* Sino de notificações: mesmo botão do tema, badge de não-lidas, dropdown com
   a mesma lista visual de .item-atividade. JS injeta .sino-notificacoes-wrap
   ao lado de .alternador-tema em toda página com barra lateral. */
.sino-notificacoes-wrap { position: relative; }
/* Fundo desfocado atrás do painel aberto; fica acima da barra inferior mobile (z 200/210)
   e o sino sobe junto (wrap.aberto) pra continuar visível e clicável. */
.sino-fundo {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(10, 11, 14, .35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.sino-fundo[hidden] { display: none; }
/* Rolar a lista com o desfoque ligado deixava o scroll travado (o navegador refaz o desfoque da tela inteira a cada quadro):
   enquanto a lista rola, o desfoque sai e o fundo fica um pouco mais escuro; ao parar de rolar, volta. */
.sino-fundo.rolando {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(10, 11, 14, .6);
}
.sino-notificacoes-wrap.aberto { z-index: 310; }
/* No desktop o sino fica dentro de .topo-painel (z-index 20 = contexto próprio): com ele de pé, o painel aberto ficava ATRÁS do fundo desfocado e a tela toda parecia embaçada. Com o sino aberto o cabeçalho deixa de criar contexto (z-index auto): o resto dele (faturamento, saudação, botões) fica desfocado junto com a página, e só o sino + o painel (wrap.aberto, z 310) ficam nítidos por cima. */
html.sino-aberto .topo-painel { z-index: auto; }
.sino-notificacoes {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    background: var(--p2);
    border: 1px solid var(--bd);
    border-radius: 10px;
    color: var(--t);
    font: 600 12px 'Manrope', sans-serif;
    cursor: pointer;
}
.sino-notificacoes:hover { border-color: var(--bd2); }
.sino-notificacoes svg { width: 14px; height: 14px; flex-shrink: 0; }
.sino-notificacoes.tem-nao-lidas { border-color: var(--or); }
.sino-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 99px;
    background: var(--or);
    color: #fff;
    font: 700 10px 'Manrope', sans-serif;
    line-height: 16px;
    text-align: center;
}
.sino-painel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(380px, calc(100vw - 32px));
    background: var(--p);
    border: 1px solid var(--bd);
    border-radius: 16px;
    box-shadow: var(--shadow);
    z-index: 40;
    overflow: hidden;
}
.sino-painel-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px 10px;
}
.sino-painel-cabecalho h3 {
    margin: 0;
    font: 700 13px 'Manrope', sans-serif;
}
.sino-ao-vivo {
    display: flex;
    align-items: center;
    gap: 7px;
    font: 700 11px 'Manrope', sans-serif;
    color: var(--ok);
    letter-spacing: .04em;
}
.sino-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 12px 12px;
    max-height: 360px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.sino-lista .item-atividade { margin: 0; }
.sino-lista .item-atividade.nao-lida { border-color: var(--or); }
.sino-marcar-todas {
    display: block;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--bd);
    color: var(--or);
    font: 700 12px 'Manrope', sans-serif;
    cursor: pointer;
}
.sino-marcar-todas:hover { background: var(--p2); }

.seletor-periodo {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    background: var(--p);
    border: 1px solid var(--bd);
    border-radius: 11px;
    padding: 4px;
}
.periodo-item {
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--m);
    font: 700 12px 'Manrope', sans-serif;
    cursor: pointer;
}
.periodo-item.ativo { background: var(--or); color: #fff; }
.form-periodo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.grupo-data-personalizada {
    display: none;
    gap: 8px;
    align-items: center;
}
.grupo-data-personalizada.ativo { display: flex; }
.grupo-data-personalizada label { font-size: 12px; color: var(--m); font-weight: 700; }

/* ===== Botões ===== */
.botao {
    border: 1px solid var(--bd);
    background: var(--p2);
    color: var(--t);
    border-radius: 11px;
    padding: 10px 16px;
    font: 700 12.5px 'Manrope', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}
.botao:hover { border-color: var(--or); color: var(--or); }
.botao:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--orsoft); }
.botao-primario {
    background: var(--or);
    border-color: var(--or);
    color: #fff;
    box-shadow: 0 8px 20px -10px var(--or);
}
.botao-primario:hover { background: var(--or2); border-color: var(--or2); color: #fff; }
html[data-theme] a.botao-primario,
html[data-theme] a.botao-primario:hover,
html[data-theme] button.botao-primario,
html[data-theme] button.botao-primario:hover { color: #fff; }
.botao-claro { background: transparent; }
.botao-secundario { background: transparent; }
.botao-perigo:hover { border-color: var(--da); color: var(--da); }
.botao-bloco { width: 100%; }

/* ===== Formulários ===== */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo-com-acao { display: flex; align-items: center; gap: 10px; }
.campo-com-acao input,
.campo-com-acao select { flex: 1; min-width: 0; width: auto; }
.campo-com-acao .botao { flex-shrink: 0; white-space: nowrap; }
/* Linha de botoes no fim de um formulario/modal (Salvar, Adicionar, Criar...). Direita por
   padrao -- 3 dos 9 usos no projeto ja sobrescreviam com justify-content:flex-end na mao
   porque sem isso a regra caia pra flex-start (esquerda), que nunca foi a intencao real. */
.linha-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.campo label {
    font: 700 10.5px 'Manrope', sans-serif;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--m);
}
html[data-theme] input[type="text"],
html[data-theme] input[type="password"],
html[data-theme] input[type="email"],
html[data-theme] input[type="number"],
html[data-theme] input[type="date"],
html[data-theme] input[type="time"],
html[data-theme] input[type="datetime-local"],
html[data-theme] textarea,
html[data-theme] select {
    width: 100%;
    border: 1px solid var(--bd);
    border-radius: 10px;
    background: var(--p2);
    color: var(--t);
    padding: 10px 12px;
    font: 600 12.5px 'Manrope', sans-serif;
}
html[data-theme] input:focus,
html[data-theme] textarea:focus,
html[data-theme] select:focus {
    border-color: var(--or);
    outline: none;
    box-shadow: none;
}
/* A lista aberta do <select> no Windows ignora o fundo escuro do campo e pinta o texto
   com a cor clara do tema em cima de fundo claro — as opções somem e só resta a faixa
   azul do item marcado. Cor explícita na option, sem variável, porque o popup nativo
   não resolve var(). */
html[data-theme="dark"] select option { background-color: #1b1f27; color: #f3f2f0; }
html[data-theme="light"] select option { background-color: #ffffff; color: #15171c; }
html[data-theme] textarea { resize: vertical; min-height: 100px; }
html[data-theme] small { display: block; margin-top: 5px; font-size: 11px; color: var(--m); }

/* Input de arquivo: o botão nativo do navegador destoava do resto (cinza, sem
   cantos arredondados, sem tema). Estiliza o pseudo-elemento do botão pra ficar
   igual a .botao, e deixa o texto "Nenhum arquivo escolhido" discreto ao lado. */
html[data-theme] input[type="file"] {
    width: 100%;
    padding: 4px 0;
    border: none;
    background: transparent;
    color: var(--m);
    font: 600 12px 'Manrope', sans-serif;
    cursor: pointer;
}
html[data-theme] input[type="file"]::file-selector-button,
html[data-theme] input[type="file"]::-webkit-file-upload-button {
    border: 1px solid var(--bd);
    border-radius: 10px;
    background: var(--p2);
    color: var(--t);
    padding: 9px 15px;
    margin-right: 12px;
    font: 700 12.5px 'Manrope', sans-serif;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
html[data-theme] input[type="file"]:hover::file-selector-button,
html[data-theme] input[type="file"]:hover::-webkit-file-upload-button {
    border-color: var(--or);
    color: var(--or);
}

/* Input de cor: o quadrado nativo já é discreto, só ajusta borda/raio pra combinar com
   os outros campos em vez do retângulo cru que o navegador desenha por padrão. */
html[data-theme] input[type="color"] {
    width: 52px;
    height: 40px;
    padding: 3px;
    border: 1px solid var(--bd);
    border-radius: 10px;
    background: var(--p2);
    cursor: pointer;
}
html[data-theme] input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
html[data-theme] input[type="color"]::-webkit-color-swatch { border: none; border-radius: 7px; }
html[data-theme] input[type="color"]::-moz-color-swatch { border: none; border-radius: 7px; }

/* ===== Painel / card genérico ===== */
.painel {
    background: var(--p);
    border: 1px solid var(--bd);
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--shadow);
    margin: 0 0 14px;
}
.painel-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--bd);
}
.painel-cabecalho h1, .painel-cabecalho h2 { font-size: 18px; }

.grade { display: grid; gap: 14px; }
.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-compacta { gap: 10px; }
.completo { grid-column: 1 / -1; }

/* ===== Badges de status (sistema único) ===== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 7px;
    font: 700 11px 'Manrope', sans-serif;
    background: var(--p3);
    color: var(--m);
}
.badge-sucesso { background: var(--oksoft); color: var(--ok); }
.badge-alerta { background: var(--wasoft); color: var(--wa); }
.badge-perigo { background: var(--dasoft); color: var(--da); }
.badge-neutro { background: var(--p3); color: var(--m); }

/* ===== Grid de cards (bots / fluxos) ===== */
.grade-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}
.cartao-bot-item {
    background: var(--p);
    border: 1px solid var(--bd);
    border-radius: 16px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
}
.cartao-bot-item:hover { border-color: var(--bd2); }
.cartao-cabecalho { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
html[data-theme] .cartao-cabecalho h3 { font-family: 'Manrope', sans-serif; font-weight: 800; text-transform: none; letter-spacing: normal; font-size: 15px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-item {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--orsoft);
    color: var(--or);
    display: grid;
    place-items: center;
    font: 800 15px 'Manrope', sans-serif;
    flex-shrink: 0;
}
.cartao-corpo { flex: 1; margin-bottom: 16px; }
/* ===== Card de bot (lista) — estrutura do protótipo: avatar + nome/@user + bolinha de
   status na primeira linha, dois quadros de métrica no meio, "Configurar" largo embaixo. */
.bot-identidade { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bot-identidade h3 { flex: none; }
.bot-username { font-size: 11.5px; color: var(--m); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bot-status { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; align-self: flex-start; margin-top: 4px; }
.bot-status.ativo { background: var(--ok); box-shadow: 0 0 0 3px var(--oksoft); }
.bot-status.pendente { background: var(--wa); box-shadow: 0 0 0 3px var(--wasoft); }

.bot-metricas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.bot-metrica {
    background: var(--p2);
    border: 1px solid var(--bd);
    border-radius: 11px;
    padding: 9px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.bot-metrica-rotulo { font: 800 9.5px 'Manrope', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--m); }
.bot-metrica-valor { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


.cartao-corpo p { margin: 0 0 6px; font-size: 13px; }
.texto-suave { color: var(--m); font-size: 12px; }
.cartao-acoes { display: flex; gap: 8px; border-top: 1px solid var(--bd); padding-top: 14px; margin-top: auto; }

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid var(--bd);
    background: transparent;
    color: var(--m);
    cursor: pointer;
}
.btn-icon svg { width: 16px; height: 16px; }
.btn-icon.editar:hover { border-color: var(--or); color: var(--or); }
.btn-icon.excluir:hover { border-color: var(--da); color: var(--da); }
.btn-icon.ativar:hover { border-color: var(--ok); color: var(--ok); }
.btn-icon.desativar:hover { border-color: var(--wa); color: var(--wa); }
/* Toda ação de lista/cartão (editar, ver, abrir, configurar, remover...) é botão de ícone: com title/aria-label, nunca texto. */
.btn-icon.ver:hover,
.btn-icon.abrir:hover,
.btn-icon.config:hover { border-color: var(--or); color: var(--or); }
a.btn-icon { text-decoration: none; }
.btn-icon:disabled { opacity: .4; cursor: not-allowed; }
.btn-icon:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--orsoft); }
.col-acoes { display: flex; gap: 6px; align-items: center; }
.cartao-acoes { justify-content: flex-end; }
.cartao-bot .cartao-acoes { justify-content: center; }

.estado-vazio {
    grid-column: 1 / -1;
    text-align: center;
    padding: 50px 20px;
    color: var(--m);
    background: var(--p2);
    border-radius: 14px;
    border: 1.5px dashed var(--bd2);
}
.estado-vazio.erro { color: var(--da); }

/* ===== Toast ===== */
#toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    padding: 12px 18px;
    background: var(--p);
    border: 1px solid var(--bd);
    color: var(--t);
    border-radius: 11px;
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(10px);
    transition: .25s ease;
    z-index: 9999;
    font: 700 12.5px 'Manrope', sans-serif;
    /* sem clique nenhum (só timeout de 3s), mas fixed + z-index alto continuava
       capturando toque mesmo com opacity:0 -- no mobile isso caía bem em cima do
       botao "Mais" da barra inferior e bloqueava o toque nele */
    pointer-events: none;
}
#toast.visivel { opacity: 1; transform: translateY(0); }
#toast.sucesso { border-color: var(--ok); color: var(--ok); }
#toast.erro { border-color: var(--da); color: var(--da); }

/* ===== Paginação ===== */
.paginacao-container { display: flex; justify-content: center; margin-top: 18px; padding: 10px 0; width: 100%; overflow-x: auto; }
.paginacao-lista { list-style: none; padding: 0; margin: 0; display: flex; gap: 6px; align-items: center; }
.paginacao-lista li { display: flex; flex-shrink: 0; }
.paginacao-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--bd);
    border-radius: 9px;
    color: var(--t);
    font: 700 12px 'Manrope', sans-serif;
    white-space: nowrap;
}
.paginacao-link:hover:not(.disabled) { border-color: var(--or); color: var(--or); }
.paginacao-link.active { background: var(--or); border-color: var(--or); color: #fff; }
html[data-theme] a.paginacao-link.active { color: #fff; }
.paginacao-link.disabled { color: var(--m); cursor: not-allowed; opacity: .6; }
.paginacao-dots { display: flex; align-items: center; justify-content: center; padding: 0 4px; color: var(--m); height: 32px; }

/* ===== Dashboard: KPIs, gráfico, atividade ===== */
.grade-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; margin-bottom: 14px; }
.cartao-kpi {
    background: var(--p);
    border: 1px solid var(--bd);
    border-radius: 16px;
    padding: 18px;
    box-shadow: var(--shadow);
    /* Item de grid tem "min-width: auto" implícito, que usa o texto sem quebra
       (rótulo/valor com white-space: nowrap) como largura mínima -- sem isso, o
       card da 2ª coluna não encolhe pra caber e passa da borda da tela no mobile. */
    min-width: 0;
}
.cartao-kpi-larga { grid-column: span 2; }

/* Card de destaque -- só aparece no mobile (ver .oculto-desktop no breakpoint),
   resume o indicador principal (faturamento) + variação vs período anterior no
   topo da tela, antes da grade de métricas menores. */
.cartao-destaque {
    display: none;
    background: var(--p);
    border: 1px solid var(--bd);
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--shadow);
    margin-bottom: 14px;
}
.rotulo-destaque {
    font: 700 11.5px 'Manrope', sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--m);
}
.valor-destaque {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 1.1;
    margin-top: 8px;
}
.selo-variacao {
    display: inline-block;
    margin-top: 12px;
    padding: 5px 10px;
    border-radius: 8px;
    font: 700 12.5px 'Manrope', sans-serif;
    background: var(--oksoft);
    color: var(--ok);
}
.selo-variacao-negativo { background: var(--dasoft); color: var(--da); }
.selo-variacao-neutro { background: var(--p3); color: var(--m); }
.selo-variacao .texto-suave { font-weight: 500; color: inherit; opacity: .75; }
.mini-grafico-destaque { position: relative; height: 70px; width: 100%; margin-top: 14px; }
.cartao-kpi-cabecalho { display: flex; align-items: center; gap: 9px; }
.icone-kpi {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: var(--orsoft);
    color: var(--or);
    flex-shrink: 0;
}
.icone-kpi svg { width: 15px; height: 15px; }
.rotulo-kpi {
    font: 700 11.5px 'Manrope', sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--m);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.valor-kpi {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 38px;
    line-height: 1.05;
    margin-top: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rodape-kpi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--m);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* O text-overflow do pai não pega no texto do <span> (que é um item flex) -- sem
   isso a frase é cortada no meio da palavra, sem reticências, em card estreito. */
.rodape-kpi > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.grade-dashboard-baixo { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; }
/* min-width:0 porque item de grid tem min-width:auto por padrão -- sem isso o canvas do
   Chart.js (que ganha largura fixa em px) empurra a coluna e faz a página inteira estourar
   na horizontal no celular (visto em admin/dashboard.php: painel de 484px num viewport de 393). */
.grade-dashboard-baixo > * { min-width: 0; }
/* Modificador pra quando os dois painéis pesam igual (ex.: Atividade + card de campanha no
   dashboard do cliente) -- sem gráfico de um dos lados, 1.55fr/1fr deixava um lado maior
   sem motivo. */
.grade-dashboard-baixo.grade-igual { grid-template-columns: 1fr 1fr; }
.area-grafico canvas { max-width: 100%; }

/* Topo do dashboard do cliente: 4 KPIs em grade 2x2 à esquerda + "Seu desempenho" à
   direita, mais largo por ser o conteúdo principal. Mesmo motivo de min-width:0 do
   .grade-dashboard-baixo acima. */
.grade-dashboard-topo { display: grid; grid-template-columns: 1fr 1.55fr; gap: 14px; }
.grade-dashboard-topo > * { min-width: 0; }
/* A coluna de cards é estreita demais pro auto-fit de .grade-kpi (minmax 215px) caber duas
   por linha -- força 2x2 em vez de empilhar as 4 verticalmente. Quem manda na altura da
   linha é a coluna de cards (altura natural, 2 linhas de card); o painel do gráfico ao
   lado é que se adapta pra bater exatamente essa altura (display:flex column + o
   .area-grafico virando flex:1 em vez de altura fixa) -- responsive:true/
   maintainAspectRatio:false no Chart.js já deixa o canvas seguir o tamanho do container.
   Tentar esticar os CARDS pra bater a altura do gráfico (o caminho inverso) dava errado:
   como .grade-kpi não tem fundo/borda próprios, só os cards individuais são visíveis, e
   qualquer imprecisão no cálculo de altura aparecia como card sobrando ou faltando. */
/* Número ímpar de KPIs numa grade de 2 colunas deixava um buraco ao lado do último: ele ocupa a linha inteira. */
.grade-dashboard-topo .grade-kpi > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.grade-dashboard-topo .grade-kpi { grid-template-columns: repeat(2, 1fr); margin-bottom: 0; align-items: stretch; align-content: start; }
/* .painel tem margin-bottom:14px por padrão (.grade-kpi não) -- como o grid mede a altura
   da linha pela caixa cheia (conteúdo + margem) de cada item, essa margem sobrando fazia
   a caixa branca do gráfico "perder" 14px em relação à última linha de cards, mesmo com
   os dois esticando pra mesma altura de linha. O espaçamento pro que vem depois já é
   coberto pelo margin-top do bloco "Atividade" em index.php, então zerar aqui não tira
   respiro nenhum. */
.grade-dashboard-topo .painel { display: flex; flex-direction: column; margin-bottom: 0; }
.grade-dashboard-topo .area-grafico { flex: 1; }

.area-grafico { position: relative; height: 300px; width: 100%; }

/* max-height, nao height: com a lista vazia a caixa de "nenhum evento" tem 120px e o
   height fixo deixava 180px de buraco embaixo dela. Com teto, a lista encolhe pro tamanho
   do conteudo e continua rolando quando passa de 300px -- o caso cheio nao muda. */
.lista-atividade { display: flex; flex-direction: column; gap: 10px; max-height: 300px; overflow-y: auto; }
.item-atividade {
    background: var(--p2);
    border: 1px solid var(--bd);
    border-radius: 12px;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.icone-atividade {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: var(--p3);
    color: var(--m);
}
.icone-atividade svg { width: 16px; height: 16px; }
.icone-atividade.venda { background: var(--oksoft); color: var(--ok); }
.icone-atividade.pix_gerado { background: var(--wasoft); color: var(--wa); }
.icone-atividade.lead { background: var(--orsoft); color: var(--or); }
.atividade-conteudo { flex: 1; min-width: 0; }
.atividade-titulo { font: 700 12.5px 'Manrope', sans-serif; margin: 0 0 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atividade-descricao { font-size: 11.5px; color: var(--m); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atividade-tempo { font: 600 11px 'JetBrains Mono', monospace; color: var(--m); text-align: right; flex-shrink: 0; }

/* ===== Barra de filtros / busca (ref. SharkBot) =====
   Controles soltos numa linha, acima do card da tabela: busca larga + filtros em pílulas.
   Sem moldura própria -- antes era um retângulo dentro do card, com o campo de busca
   (outro retângulo) e o <input> (mais um) empilhados. */
.barra-filtros {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}
.barra-filtros form { margin: 0; }
.campo-busca {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 240px;
    height: 46px;
    padding: 0 16px;
    border: 1px solid var(--bd);
    border-radius: 14px;
    background: var(--p);
}
.campo-busca:focus-within { border-color: var(--or); }
.campo-busca svg { width: 16px; height: 16px; color: var(--m); flex-shrink: 0; }
/* Precisa da mesma especificidade da regra global de input[type=text] pra tirar o
   fundo/borda dela: o campo é a própria .campo-busca, o <input> fica "invisível" dentro. */
html[data-theme] .campo-busca input[type="text"] {
    flex: 1;
    min-width: 0;
    width: auto;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font: 500 13.5px 'Manrope', sans-serif;
}
.campo-busca button { display: flex; border: 0; background: transparent; padding: 0; margin: 0; cursor: pointer; flex-shrink: 0; }
.campo-busca button svg { color: var(--m); }
.campo-busca button:hover svg { color: var(--t); }
html[data-theme] .barra-filtros select {
    width: auto;
    min-width: 150px;
    height: 46px;
    padding: 0 14px;
    border-radius: 14px;
    background-color: var(--p);
    font: 700 12.5px 'Manrope', sans-serif;
}

/* Abas de status ("Todos / Já pagou / Não pagou"): mesmo visual do seletor de período. */
.abas-status {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    padding: 4px;
    background: var(--p);
    border: 1px solid var(--bd);
    border-radius: 14px;
}
.aba-status {
    padding: 10px 14px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--m);
    font: 700 12px 'Manrope', sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.aba-status:hover { color: var(--t); background: var(--p2); }
.aba-status:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.aba-status.ativa, .aba-status.ativa:hover { background: var(--or); color: #fff; }

/* ===== Tabela de dados ===== */
.tabela-dados { overflow-x: auto; margin: 0 -20px -20px; }
.tabela-dados table { width: 100%; border-collapse: collapse; min-width: 760px; }
.tabela-dados th {
    text-align: left;
    padding: 12px 18px;
    font: 700 10.5px 'Manrope', sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--m);
    background: var(--p2);
    white-space: nowrap;
}
.tabela-dados td { padding: 13px 18px; border-top: 1px solid var(--bd); font-size: 13px; }
.tabela-dados tr:hover td { background: var(--p2); }
.tabela-dados .col-numerica { text-align: right; }
.tabela-dados .col-link { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--m); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabela-dados .col-acoes { display: flex; gap: 6px; align-items: center; }
.tabela-dados .celula-principal { display: flex; align-items: center; gap: 11px; }
.tabela-dados .celula-sub { font-size: 11px; color: var(--m); margin-top: 2px; }

/* ===== Grid de fluxos ===== */
.miniatura-fluxo {
    height: 96px;
    border-radius: 12px 12px 0 0;
    background: var(--p2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.status-fluxo {
    position: absolute;
    top: 10px;
    right: 10px;
}
.cartao-fluxo { padding: 0; overflow: hidden; }
.cartao-fluxo .cartao-cabecalho,
.cartao-fluxo .cartao-corpo,
.cartao-fluxo .cartao-acoes { padding-left: 16px; padding-right: 16px; }
.cartao-fluxo .cartao-cabecalho { padding-top: 14px; margin-bottom: 8px; }
.cartao-fluxo .cartao-acoes { padding-bottom: 16px; }

/* ===== Configuração do bot ===== */
.grade-config-bot { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; align-items: start; }
.cartao-preview-bot { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.avatar-preview-bot {
    width: 74px;
    height: 74px;
    border-radius: 22px;
    object-fit: cover;
    background: var(--p3);
}
.avatar-preview-bot-placeholder {
    width: 74px;
    height: 74px;
    border-radius: 22px;
    background: var(--p3);
    color: var(--m);
    display: grid;
    place-items: center;
    font: 800 28px 'Manrope', sans-serif;
}
.status-bot {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 99px;
    font: 700 12px 'Manrope', sans-serif;
    background: var(--p3);
    color: var(--m);
}
.status-bot.ligado { background: var(--oksoft); color: var(--ok); }
.status-bot.desligado { background: var(--dasoft); color: var(--da); }
.ponto-status { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-bot.ligado .ponto-status { animation: pulseDot 1.8s infinite; }
.lista-ferramentas { display: flex; flex-direction: column; gap: 8px; }

.barra-preview-bot {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin-bottom: 14px;
    border-radius: 16px;
    background: var(--p);
    border: 1px solid var(--bd);
}
.barra-preview-bot #status-avatar-container .avatar-preview-bot,
.barra-preview-bot #status-avatar-container .avatar-preview-bot-placeholder { width: 52px; height: 52px; border-radius: 15px; font-size: 20px; }
.preview-bot-identidade { flex: 1; min-width: 0; }
.linha-preview-bot-nome { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.linha-preview-bot-nome h2 { margin: 0; font-size: 18px; text-transform: none; font-family: 'Manrope', sans-serif; font-weight: 800; }

.cartao-criar-automatico { margin-bottom: 14px; }
.linha-criar-automatico { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.icone-criar-automatico {
    width: 40px; height: 40px; flex: none; border-radius: 12px;
    background: var(--orsoft); color: var(--or);
    display: grid; place-items: center;
}
.texto-criar-automatico { flex: 1; min-width: 220px; }
.titulo-criar-automatico { display: flex; align-items: center; gap: 8px; font: 800 15px 'Manrope', sans-serif; margin-bottom: 4px; }
.texto-criar-automatico p { margin: 0; }

.lista-passos-tutorial { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.lista-passos-tutorial li { display: flex; gap: 12px; }
.lista-passos-tutorial strong { display: block; font-size: 13px; margin-bottom: 3px; }
.lista-passos-tutorial p { margin: 0; line-height: 1.5; }
.numero-passo {
    flex: none; width: 24px; height: 24px; border-radius: 50%;
    background: var(--orsoft); color: var(--or);
    display: grid; place-items: center;
    font: 800 12px 'Manrope', sans-serif;
}
.chip-codigo {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 8px; padding: 6px 6px 6px 12px;
    border-radius: 9px; background: var(--p2); border: 1px solid var(--bd);
}
.chip-codigo code { font: 700 12px 'JetBrains Mono', monospace; color: var(--t); }
.btn-copiar-chip {
    display: grid; place-items: center; width: 24px; height: 24px;
    border: none; border-radius: 6px; background: var(--p3); color: var(--m); cursor: pointer;
}
.btn-copiar-chip:hover { color: var(--or); }

.linha-foto-perfil-bot { display: flex; align-items: center; gap: 14px; }
.linha-foto-perfil-bot .avatar-preview-bot,
.linha-foto-perfil-bot .avatar-preview-bot-placeholder { width: 56px; height: 56px; border-radius: 16px; font-size: 22px; }
.lista-ferramentas .botao { justify-content: flex-start; text-align: left; }

/* ===== Minha conta / alertas ===== */
.aviso {
    padding: 12px 16px;
    border-radius: 11px;
    margin-bottom: 16px;
    font: 600 13px 'Manrope', sans-serif;
    border: 1px solid transparent;
}
.aviso-sucesso { background: var(--oksoft); color: var(--ok); border-color: var(--ok); }
.aviso-erro { background: var(--dasoft); color: var(--da); border-color: var(--da); }
.aviso-alerta { background: var(--wasoft); color: var(--wa); border-color: var(--wa); }
.divisor-secao { border-top: 1px solid var(--bd); margin-top: 26px; padding-top: 20px; }

/* ===== Gateways ===== */
.grade-gateways-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 24px; }
.cartao-gateway-admin { background: var(--p); border: 1.5px solid var(--bd); border-radius: 16px; overflow: hidden; }
.cartao-gateway-admin.ativo { border-color: var(--ok); }
.cartao-gateway-admin-topo { background: var(--p2); padding: 14px 16px; border-bottom: 1px solid var(--bd); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.identidade-gateway-admin { display: flex; align-items: center; gap: 11px; min-width: 0; }
.subtitulo-gateway-admin { font-size: 11px; color: var(--m); margin-top: 1px; }
.corpo-cartao-gateway-admin { padding: 12px 16px; }
.rodape-cartao-gateway-admin { display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--bd); }

.icone-gateway {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    display: grid; place-items: center;
    font: 800 1rem 'Manrope', sans-serif; color: #fff;
}
.icone-gateway-omegapayments { background: linear-gradient(135deg, #a855f7, #6d28d9); }
.icone-gateway-padrao { background: linear-gradient(135deg, var(--m), var(--p3)); }
.nome-gateway { font: 700 14px 'Manrope', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.chave-gateway { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; }
.chave-gateway input { opacity: 0; width: 0; height: 0; }
.chave-gateway-trilho { position: absolute; cursor: pointer; inset: 0; background: var(--p3); border-radius: 22px; transition: .2s; }
.chave-gateway-trilho::before { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; left: 3px; bottom: 3px; transition: .2s; }
.chave-gateway input:checked + .chave-gateway-trilho { background: var(--ok); }
.chave-gateway input:checked + .chave-gateway-trilho::before { transform: translateX(16px); }
.chave-gateway.laranja input:checked + .chave-gateway-trilho { background: var(--or); }
/* Chave do cartão de gateway ativo (desligar = desativar): maior, com botão em relevo. */
.chave-cartao { width: 46px; height: 26px; }
.chave-cartao .chave-gateway-trilho { border: 1px solid var(--bd2); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25); }
.chave-cartao .chave-gateway-trilho::before { width: 20px; height: 20px; left: 2px; bottom: 2px; background: radial-gradient(circle at 35% 30%, #fff, #d9dce2); box-shadow: 0 1px 4px rgba(0, 0, 0, .45); }
.chave-cartao input:checked + .chave-gateway-trilho { border-color: var(--ok); }
.chave-cartao input:checked + .chave-gateway-trilho::before { transform: translateX(20px); }
.chave-cartao input:focus-visible + .chave-gateway-trilho { outline: 2px solid var(--or); outline-offset: 2px; }
.chave-cartao input:disabled + .chave-gateway-trilho { opacity: .6; cursor: default; }

.secao-gateway { margin-bottom: 32px; }
.titulo-secao-gateway { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; margin: 0 0 6px; }
.texto-secao-gateway { margin: 0 0 14px; font-size: 12px; color: var(--m); }

.grade-gateways-ativos, .grade-gateways-disponiveis { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.cartao-gateway-ativo, .cartao-gateway-disponivel {
    background: var(--p); border: 1.5px solid var(--bd); border-radius: 14px;
    overflow: hidden; position: relative;
}
.cartao-gateway-ativo.principal { border-color: var(--or); }
.cartao-gateway-ativo[draggable] { cursor: grab; }
.cartao-gateway-ativo[draggable]:active { cursor: grabbing; }
.cartao-gateway-ativo.sobre-alvo { opacity: .4; border-style: dashed; }
.cartao-gateway-ativo.arrastando { opacity: .25; }

.cartao-gateway-topo { padding: 14px 16px 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.selo-prioridade { display: inline-flex; align-items: center; gap: 5px; background: var(--p3); color: var(--m); font: 700 10.5px 'Manrope', sans-serif; padding: 3px 9px; border-radius: 99px; }
.selo-prioridade.principal { background: var(--or); color: #fff; }
.selo-metodo { display: inline-flex; align-items: center; gap: 4px; background: var(--oksoft); color: var(--ok); font: 700 10px 'Manrope', sans-serif; padding: 2px 8px; border-radius: 12px; }

.corpo-cartao-gateway { padding: 0 16px 14px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.corpo-cartao-gateway .icone-gateway { margin: 0 auto 10px; }
.status-gateway { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--m); }
.status-gateway.conectado { color: var(--ok); }
.status-gateway.pendente { color: var(--wa); }
.acoes-cartao-gateway { padding: 12px 16px; border-top: 1px solid var(--bd); display: flex; gap: 8px; flex-wrap: wrap; }
.acoes-cartao-gateway { justify-content: flex-end; }

.cartao-gateway-disponivel { border-style: dashed; padding: 20px 14px 14px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.cartao-gateway-disponivel:hover { border-color: var(--or); }
.mais-gateway {
    position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--orsoft); color: var(--or); display: grid; place-items: center; font-weight: 700;
}
.acoes-gateway-disponivel { display: flex; gap: 6px; margin-top: 10px; justify-content: center; flex-wrap: wrap; }

.sobreposicao-modal {
    display: none; position: fixed; inset: 0; background: rgba(10, 11, 14, .6); z-index: 999;
    align-items: center; justify-content: center;
}
.sobreposicao-modal.aberto { display: flex; }
.modal-gateway { background: var(--p); border: 1px solid var(--bd); border-radius: 16px; width: 100%; max-width: 500px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow); margin: 16px; }
.cabecalho-modal { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid var(--bd); }
.titulo-modal { font: 700 15px 'Manrope', sans-serif; display: flex; align-items: center; gap: 10px; }
.fechar-modal { background: var(--p2); border: 1px solid var(--bd); width: 30px; height: 30px; border-radius: 9px; cursor: pointer; color: var(--m); display: grid; place-items: center; }
.fechar-modal:hover { color: var(--t); }
.corpo-modal { padding: 18px 20px 20px; }
.modal-gateway.modal-largo { max-width: 820px; }

.grade-escolha-modo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .grade-escolha-modo { grid-template-columns: 1fr; } }
.cartao-escolha-modo {
    display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--bd);
    border-radius: 12px; background: var(--p2); text-align: left; color: inherit; text-decoration: none;
    transition: border-color .15s;
}
.cartao-escolha-modo:hover { border-color: var(--or); }
.icone-escolha-modo { width: 34px; height: 34px; color: var(--or); }
.icone-escolha-modo svg { width: 100%; height: 100%; }
.badge-modo-fluxo {
    font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
    background: var(--p2); color: var(--m); border: 1px solid var(--bd); margin-left: 8px;
}
/* Guiado = azul, Editor Visual = roxo (cores só deste selo; o tema não tem token azul/roxo) */
.badge-modo-fluxo.basico { background: rgba(77, 141, 255, .14); color: #5b9bff; border-color: transparent; }
.badge-modo-fluxo.visual { background: rgba(155, 109, 255, .14); color: #a881ff; border-color: transparent; }
html[data-theme="light"] .badge-modo-fluxo.basico { background: rgba(37, 99, 235, .1); color: #1d4ed8; }
html[data-theme="light"] .badge-modo-fluxo.visual { background: rgba(124, 58, 237, .1); color: #6d28d9; }
.area-previa-basico {
    border: 1px dashed var(--bd); border-radius: 10px; padding: 10px; text-align: center;
    font-size: 12px; color: var(--m); cursor: pointer; background: var(--p2);
}
.area-previa-basico:hover { border-color: var(--or); }

.icone-vazio { width: 60px; height: 60px; background: var(--p2); border-radius: 50%; display: grid; place-items: center; margin: 0 auto 14px; color: var(--m); }
.opcao-ativar-gateway { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; cursor: pointer; }
.opcao-ativar-gateway input { width: 17px; height: 17px; accent-color: var(--or); cursor: pointer; }

/* ===== Stories (navbar tipo Instagram/WhatsApp Status) =====
   Isolado do resto do dashboard -- ver funcoes/stories.php e assets/stories.js.
   Item pesado (vídeo/foto em si) nunca é carregado aqui: essa barra só busca metadados;
   a mídia só é baixada quando o visualizador em tela cheia é aberto. */
.barra-stories-painel { margin: 0 0 14px; }
.barra-stories {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 4px 2px 10px;
    scrollbar-width: none;
}
.barra-stories::-webkit-scrollbar { display: none; }

.story-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    width: 68px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.story-anel {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    padding: 2.5px;
    background: var(--p2);
    border: 2px solid var(--bd);
}
.story-anel-nao-vista {
    border: none;
    background: linear-gradient(135deg, var(--or), var(--or2), #ff3c9c);
}
.story-anel-vista { border: 2px solid var(--bd); background: var(--p2); }
.story-anel-criar { border: 2px dashed var(--bd2); background: var(--p2); }
.story-item:hover .story-anel-criar { border-color: var(--or); }

.story-avatar-iniciais {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--p3);
    color: var(--t);
    display: grid;
    place-items: center;
    font: 700 15px 'Manrope', sans-serif;
    border: 2px solid var(--p);
}
.story-avatar-foto {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid var(--p);
}
.story-icone-mais { font-size: 22px; font-weight: 700; color: var(--m); line-height: 1; }

.story-nome {
    font-size: 11.5px;
    color: var(--m);
    max-width: 68px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.story-dropzone {
    border: 1.5px dashed var(--bd2);
    border-radius: 14px;
    padding: 40px 16px;
    text-align: center;
    cursor: pointer;
    color: var(--m);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.story-dropzone:hover { border-color: var(--or); color: var(--or); }
.story-dropzone span { font: 700 13px 'Manrope', sans-serif; color: var(--t); }
.story-dropzone:hover span { color: var(--or); }

.story-preview { display: flex; justify-content: center; }
.story-preview img, .story-preview video {
    max-width: 100%;
    max-height: 320px;
    border-radius: 12px;
    background: var(--p2);
}
.story-erro { color: var(--da); font-size: 12.5px; margin: 10px 0 0; }

/* ===== Visualizador de story em tela cheia (phone mockup) ===== */
.visualizador-story {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(6, 6, 8, .94);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.visualizador-story.aberto { display: flex; }
.visualizador-story-conteudo {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: 100%;
    max-height: 860px;
    background: #000;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.visualizador-story-progresso {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    gap: 4px;
    z-index: 3;
}
.visualizador-story-segmento {
    flex: 1;
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .3);
    overflow: hidden;
}
.visualizador-story-segmento-preenchido { display: block; height: 100%; width: 0%; background: #fff; }
.visualizador-story-cabecalho {
    position: absolute;
    top: 22px;
    left: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 3;
}
.visualizador-story-info { display: flex; align-items: center; gap: 8px; min-width: 0; }
.visualizador-story-nome { color: #fff; font: 700 13.5px 'Manrope', sans-serif; text-shadow: 0 1px 4px rgba(0,0,0,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.visualizador-story-tempo { color: rgba(255,255,255,.75); font: 600 12px 'Manrope', sans-serif; text-shadow: 0 1px 4px rgba(0,0,0,.5); flex-shrink: 0; }
.visualizador-story-acoes { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.visualizador-story-excluir {
    background: rgba(0, 0, 0, .35);
    border: none;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .15s ease, color .15s ease;
}
.visualizador-story-excluir:hover:not(:disabled) { background: rgba(239, 68, 68, .9); }
.visualizador-story-excluir:disabled { opacity: .5; cursor: default; }
.visualizador-story-excluir[hidden] { display: none; }
.visualizador-story-fechar {
    background: rgba(0, 0, 0, .35);
    border: none;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.visualizador-story-midia {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}
.visualizador-story-midia img, .visualizador-story-midia video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.visualizador-story-nav {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 25%;
    background: none;
    border: none;
    color: rgba(255, 255, 255, .0);
    font-size: 30px;
    cursor: pointer;
    z-index: 2;
}
.visualizador-story-nav:hover { color: rgba(255, 255, 255, .6); }
.visualizador-story-anterior { left: 0; text-align: left; padding-left: 8px; }
.visualizador-story-proximo { right: 0; text-align: right; padding-right: 8px; }

@media (max-width: 640px) {
    .visualizador-story-conteudo { max-width: 100%; max-height: 100%; border-radius: 0; }
}

/* ===== Login ===== */
.tela-login { min-height: 100vh; display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.login-marca, .login-formulario { padding: 60px 8vw; display: flex; flex-direction: column; justify-content: center; }
.login-marca { background: var(--p); }
.login-logo { width: 88px; height: 88px; border-radius: 24px; object-fit: cover; border: 1px solid var(--bd); }
.login-titulo { margin: 26px 0 0; font-size: 42px; line-height: 1; max-width: 16ch; }
.login-descricao { margin: 16px 0 0; font-size: 14px; color: var(--m); line-height: 1.6; max-width: 44ch; }
.login-metricas { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--bd); }
.login-metrica-valor { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 30px; color: var(--or); }
.login-metrica-rotulo { font: 700 10.5px 'Manrope', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--m); margin-top: 2px; }
.login-formulario-conteudo { width: 100%; max-width: 380px; margin: 0 auto; }
.login-opcoes { display: flex; align-items: center; margin: 16px 0 0; }

/* Cabeçalho compacto e abas Entrar/Criar conta: só existem no mobile (ver o @media abaixo).
   No desktop quem faz esse papel é a coluna de marca à esquerda e o link no rodapé. */
.login-cabecalho-mobile { display: none; }
.login-cabecalho-logo { width: 54px; height: 54px; border-radius: 16px; object-fit: cover; }
html[data-theme] .login-cabecalho-logo { border: 1px solid var(--bd); }

/* ===== Minha Conta: cartões "Dados pessoais" / "Segurança" + lista de links ===== */
.conta-avatar { width: 76px; height: 76px; border-radius: 22px; display: flex; align-items: center; justify-content: center; font: 700 26px 'Manrope', sans-serif; color: #fff; background: var(--or); margin-bottom: 16px; overflow: hidden; flex-shrink: 0; }
.conta-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.conta-foto { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.conta-foto .conta-avatar { margin-bottom: 0; cursor: pointer; }
.conta-foto-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.conta-lista { display: flex; flex-direction: column; gap: 10px; }
.conta-item {
    display: flex; align-items: center; gap: 13px;
    padding: 17px 16px; border-radius: 14px; cursor: pointer;
    font: 600 14px 'Manrope', sans-serif; list-style: none;
}
html[data-theme] .conta-item { background: var(--p); border: 1px solid var(--bd); color: var(--t); }
.conta-item svg { width: 19px; height: 19px; flex-shrink: 0; stroke: var(--or); }
.conta-item-seta { margin-left: auto; }
.conta-item .conta-item-seta svg { stroke: var(--m); width: 16px; height: 16px; }

/* Paginas de texto corrido e publicas (termos de uso). Mesmo tom das telas de login. */
.pagina-texto { max-width: 720px; margin: 0 auto; padding: 22px 20px 56px; }
.pagina-texto-cabecalho { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.pagina-texto h1 { font-size: 34px; margin: 0 0 6px; }
.pagina-texto h2 { font-size: 19px; margin: 30px 0 8px; }
.pagina-texto p { margin: 0 0 12px; line-height: 1.65; }
html[data-theme] .pagina-texto p { color: var(--m); }
html[data-theme] .pagina-texto h1, html[data-theme] .pagina-texto h2 { color: var(--t); }

.login-abas { display: none; gap: 4px; padding: 5px; margin: 20px 0 24px; border-radius: 15px; }
html[data-theme] .login-abas { background: var(--p2); border: 1px solid var(--bd); }
.login-aba { flex: 1; text-align: center; padding: 13px 8px; border-radius: 11px; font: 700 13.5px 'Manrope', sans-serif; }
html[data-theme] .login-aba { color: var(--m); }
html[data-theme] .login-aba.ativa { background: var(--or); color: #fff; }
/* Botão "Continuar com Google": branco fixo nos dois temas (é a identidade visual oficial
   do botão do Google, não segue o tema do app) e escopado com html[data-theme] .botao-google
   de propósito -- html[data-theme] a { color: inherit } (mais acima neste arquivo) tem mais
   especificidade que uma classe sozinha e comeria a cor escura do texto. */
.botao-google { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; border-radius: 11px; font: 700 13px 'Manrope', sans-serif; cursor: pointer; }
html[data-theme] .botao-google { background: #fff; border: 1px solid #dadce0; color: #3c4043; }
html[data-theme] .botao-google:hover { background: #f8f9fa; border-color: #dadce0; color: #3c4043; }
.login-divisor { display: flex; align-items: center; gap: 12px; margin: 16px 0; font-size: 11.5px; }
html[data-theme] .login-divisor { color: var(--m); }
.login-divisor::before, .login-divisor::after { content: ''; flex: 1; height: 1px; }
html[data-theme] .login-divisor::before, html[data-theme] .login-divisor::after { background: var(--bd); }

.login-link-esqueci { font: 700 12.5px 'Manrope', sans-serif; color: var(--or); cursor: pointer; text-decoration: none; }
/* Em <a>, o seletor html[data-theme] a { color: inherit } tem mais especificidade que a
   classe e comia o laranja -- "Cadastre-se" e "termos de uso" saiam brancos. */
html[data-theme] a.login-link-esqueci { color: var(--or); }

/* ===== Ranking ===== */
.abas-ranking { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--bd); border-radius: 12px; background: var(--p2); }
.aba-ranking { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 9px; font: 700 12.5px 'Manrope', sans-serif; color: var(--m); text-decoration: none; }
html[data-theme] a.aba-ranking { color: var(--m); }
.aba-ranking:hover { color: var(--t); }
html[data-theme] a.aba-ranking:hover { color: var(--t); }
.aba-ranking.ativa, html[data-theme] a.aba-ranking.ativa { background: var(--orsoft); color: var(--or); box-shadow: inset 0 0 0 1px var(--or); }

.grade-ranking { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.coluna-lateral-ranking { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hero-ranking {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 400px); align-items: center; gap: 36px;
    background:
        radial-gradient(900px 340px at 100% 0%, rgba(255, 136, 0, .20), transparent 60%),
        radial-gradient(520px 260px at 0% 100%, rgba(255, 136, 0, .07), transparent 70%),
        var(--p);
    border: 1px solid var(--bd); border-radius: 22px; padding: 34px 38px; box-shadow: var(--shadow);
    margin-bottom: 16px;
}
/* Textura sutil (linhas diagonais) pra o fundo não ficar chapado quando não há imagem. */
.hero-ranking::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 14px); }
.hero-ranking-conteudo { position: relative; z-index: 1; max-width: 36rem; min-width: 0; }
.hero-ranking-selos { display: flex; gap: 8px; flex-wrap: wrap; }
.hero-ranking-eyebrow { font: 800 11px 'Manrope', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--or); margin-top: 22px; }
.hero-ranking-titulo { margin: 8px 0 0; font-size: clamp(40px, 5.4vw, 68px); line-height: .94; overflow-wrap: anywhere; }
.hero-ranking-desc { margin: 14px 0 0; font-size: 14.5px; color: var(--m); line-height: 1.6; max-width: 46ch; }
.hero-ranking-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.hero-ranking-meta span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--bd2); border-radius: 999px; background: var(--p2); font: 700 12px 'Manrope', sans-serif; color: var(--t); }
.hero-ranking-meta svg { color: var(--or); flex: none; }

/* Imagem da campanha: nítida numa moldura (nunca esticada em tela cheia) + a mesma imagem desfocada ao fundo, que
   dá clima sem depender do formato do arquivo enviado. Sem imagem, entra o emblema com a logo do painel. */
.hero-ranking-fundo { display: none; }
.hero-ranking-moldura { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: 56%; height: 100%; object-fit: cover; object-position: right center; pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 55%); mask-image: linear-gradient(to right, transparent 0%, #000 55%); }
.hero-ranking.tem-capa { grid-template-columns: minmax(0, 1fr); min-height: 250px; }
html[data-theme="light"] .hero-ranking-moldura { opacity: .5; }
.hero-ranking-arte { position: relative; z-index: 1; width: 100%; max-width: 270px; aspect-ratio: 1 / 1; justify-self: end; display: grid; place-items: center; pointer-events: none; }
.arte-anel { position: absolute; border-radius: 50%; border: 1px solid var(--or); }
.arte-anel-1 { inset: 0; opacity: .35; }
.arte-anel-2 { inset: 30px; opacity: .6; box-shadow: 0 0 60px rgba(255, 136, 0, .28); }
.hero-ranking-logo { position: relative; width: 56%; height: 56%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--p), 0 0 0 5px var(--or); }

.pill-campanha { display: inline-flex; align-items: center; gap: 6px; font: 800 10px 'Manrope', sans-serif; letter-spacing: .1em; text-transform: uppercase; padding: 7px 11px; border-radius: 999px; }
.pill-oficial { background: var(--orsoft); color: var(--or); box-shadow: inset 0 0 0 1px var(--or); }

.painel-placar { padding: 26px 28px; }
.placar-cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.titulo-placar { margin: 6px 0 0; font-size: 32px; }
.placar-atualizacao { display: inline-flex; align-items: center; gap: 7px; font: 600 11.5px 'Manrope', sans-serif; color: var(--m); }

/* Pódio: o 1º no centro, mais alto e com coroa; as bases têm uma faixa listrada embaixo (ar de arquibancada). */
.podio-ranking { display: grid; grid-template-columns: 1fr 1.18fr 1fr; gap: 14px; align-items: end; margin-top: 26px; }
.podio-n1 { grid-template-columns: minmax(0, 240px); justify-content: center; }
.podio-n2 { grid-template-columns: repeat(2, minmax(0, 220px)); justify-content: center; gap: 22px; }
.podio-item { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.podio-coroa { color: var(--or); margin-bottom: -2px; filter: drop-shadow(0 0 8px rgba(255, 136, 0, .6)); }
.podio-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--p3); border: 2px solid var(--m); display: grid; place-items: center; font: 800 16px 'Manrope', sans-serif; color: var(--t); }
.podio-1 .podio-avatar { width: 76px; height: 76px; font-size: 20px; border-color: var(--or); color: var(--or); box-shadow: 0 0 0 5px var(--orsoft), 0 0 30px rgba(255, 136, 0, .35); }
.podio-nome { max-width: 100%; text-align: center; font: 800 13px 'Manrope', sans-serif; margin-top: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podio-valor { text-align: center; font: 700 12px 'JetBrains Mono', monospace; color: var(--m); margin-top: 3px; }
.podio-base { width: 100%; border-radius: 14px 14px 0 0; border: 1px solid var(--bd); border-bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; margin-top: 12px; height: 74px; background: linear-gradient(180deg, var(--p3), var(--p2)); position: relative; overflow: hidden; }
.podio-base::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 6px, transparent 6px 12px); }
.podio-1 .podio-base { height: 108px; background: linear-gradient(180deg, var(--orsoft), var(--p2)); border-color: var(--or); }
.podio-3 .podio-base { height: 58px; }
.podio-posicao { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 34px; line-height: 1; color: var(--m); }
.podio-1 .podio-posicao { color: var(--or); font-size: 44px; }
.podio-tag { font: 800 9.5px 'Manrope', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--m); }
.tag-voce { display: inline-block; font: 800 9px 'Manrope', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--or); background: var(--orsoft); padding: 2px 6px; border-radius: 6px; vertical-align: middle; }

.cabecalho-ranking-lista { display: flex; gap: 12px; padding: 16px 4px 10px; margin-top: 22px; border-top: 1px solid var(--bd); font: 800 10px 'Manrope', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--m); }
.cabecalho-ranking-lista span:last-child { margin-left: auto; text-align: right; }
.linha-ranking { display: flex; align-items: center; gap: 12px; padding: 13px 8px; border-top: 1px solid var(--bd); border-radius: 10px; }
.linha-ranking:hover { background: var(--p2); }
.linha-ranking.e-voce { background: var(--orsoft); }
.linha-ranking-pos { width: 46px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 26px; color: var(--m); }
.linha-ranking-avatar { width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--p3); border: 1px solid var(--bd2); display: grid; place-items: center; font: 800 11.5px 'Manrope', sans-serif; color: var(--m); }
.linha-ranking-nome { font: 700 13.5px 'Manrope', sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-ranking-zona { font-size: 11.5px; margin-top: 2px; }
.linha-ranking-valor { font: 700 13.5px 'JetBrains Mono', monospace; text-align: right; }
.linha-ranking-gap { font-size: 11px; color: var(--m); margin-top: 2px; text-align: right; }

.rotulo-sua-posicao { font: 800 10px 'Manrope', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--m); margin: 26px 4px 10px; padding-top: 18px; border-top: 1px dashed var(--bd2); }
.faixa-sua-posicao { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px solid var(--or); border-radius: 14px; background: var(--orsoft); }
.faixa-sua-posicao .linha-ranking-pos { color: var(--or); width: 66px; font-size: 30px; }
.faixa-sua-posicao .linha-ranking-avatar { background: var(--or); color: #fff; border-color: var(--or); }

/* ===== Mini-ranking (widget da dashboard) =====
   Resumo do /ranking em formato de cartão por linha, mesma paleta do pódio (1º em --or,
   os demais em --m/--p2 -- o app não tem tokens de prata/bronze, então segue a mesma
   convenção de estiloPodio() em vez de inventar uma cor nova). */
.abas-mini-ranking { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--bd); border-radius: 10px; background: var(--p2); }
.abas-mini-ranking button { border: 0; background: transparent; color: var(--m); font: 700 11.5px 'Manrope', sans-serif; padding: 6px 11px; border-radius: 7px; cursor: pointer; }
.abas-mini-ranking button.ativa { background: var(--orsoft); color: var(--or); box-shadow: inset 0 0 0 1px var(--or); }
.mini-ranking-painel[hidden] { display: none; }
.mini-ranking-lista { display: flex; flex-direction: column; gap: 8px; }
.mini-ranking-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--bd); background: var(--p2); }
.mini-ranking-item.lider { border-color: var(--or); background: var(--orsoft); }
.mini-ranking-item.voce { border-color: var(--or); border-style: dashed; }
.mini-ranking-avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 800 11px 'Manrope', sans-serif; border: 2px solid var(--m); color: var(--m); background: var(--p3); }
.mini-ranking-item.lider .mini-ranking-avatar { border-color: var(--or); color: var(--or); }
.mini-ranking-corpo { min-width: 0; overflow: hidden; }
/* min-width:0 é o que deixa o filho .mini-ranking-nome-texto encolher dentro do flex --
   sem isso um nome comprido (o fallback "Usuário #3" já é longo por si só) empurra o sufixo
   "(você)" pra fora da linha e ele some cortado em vez de aparecer inteiro. */
.mini-ranking-nome { display: flex; align-items: center; gap: 6px; font: 700 12.5px 'Manrope', sans-serif; min-width: 0; overflow: hidden; }
.mini-ranking-nome-texto { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mini-ranking-voce-tag { flex: none; color: var(--or); font-weight: 800; }
.mini-ranking-pos { flex: none; font: 800 10.5px 'Manrope', sans-serif; padding: 1px 6px; border-radius: 99px; background: var(--p3); color: var(--m); }
.mini-ranking-item.lider .mini-ranking-pos { background: var(--or); color: #fff; }
.mini-ranking-valor { font: 700 12.5px 'JetBrains Mono', monospace; padding: 5px 10px; border-radius: 99px; background: var(--p3); color: var(--t); white-space: nowrap; }
.mini-ranking-item.lider .mini-ranking-valor { background: rgba(255, 106, 26, .16); color: var(--or); }
.mini-ranking-rodape { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--bd); text-align: center; }
.mini-ranking-rodape a { font: 700 12px 'Manrope', sans-serif; color: var(--or); }
.mini-ranking-vazio { padding: 26px 10px; text-align: center; color: var(--m); font-size: 12.5px; }
@media (max-width: 860px) {
    .mini-ranking-item { grid-template-columns: auto minmax(0, 1fr); }
    .mini-ranking-avatar { grid-row: 1 / span 2; align-self: center; }
    .mini-ranking-valor { grid-column: 2; justify-self: start; }
}

.barra-progresso { height: 8px; border-radius: 99px; background: var(--p3); overflow: hidden; margin-top: 6px; }
.barra-progresso-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--or), var(--or2)); }

/* "Passe do competidor": ingresso de papel (creme) que se destaca do painel escuro, nos dois temas.
   As duas metades têm um entalhe redondo de verdade nas laterais (máscara radial, sem borda pra não "quebrar"),
   e uma perfuração tracejada une as duas. O contorno é só uma sombra suave. */
.passe-ingresso {
    --pp-papel1: #f6e6bf; --pp-papel2: #e6c78c; --pp-tinta: #2b1c08; --pp-suave: #7d6438; --pp-linha: rgba(43, 28, 8, .2); --pp-corte: 13px;
    display: flex; flex-direction: column; color: var(--pp-tinta);
    filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .35));
}
.passe-parte-cima, .passe-parte-baixo { background: linear-gradient(165deg, var(--pp-papel1), var(--pp-papel2)); position: relative; }
.passe-parte-cima {
    padding: 22px 24px 22px; border-radius: 20px 20px 0 0;
    -webkit-mask: radial-gradient(circle var(--pp-corte) at 0 100%, #0000 calc(100% - .5px), #000), radial-gradient(circle var(--pp-corte) at 100% 100%, #0000 calc(100% - .5px), #000);
    -webkit-mask-composite: source-in;
    mask: radial-gradient(circle var(--pp-corte) at 0 100%, #0000 calc(100% - .5px), #000), radial-gradient(circle var(--pp-corte) at 100% 100%, #0000 calc(100% - .5px), #000);
    mask-composite: intersect;
}
.passe-parte-baixo {
    padding: 20px 24px 22px; border-radius: 0 0 20px 20px;
    background: linear-gradient(165deg, var(--pp-papel2), #dcb673);
    -webkit-mask: radial-gradient(circle var(--pp-corte) at 0 0, #0000 calc(100% - .5px), #000), radial-gradient(circle var(--pp-corte) at 100% 0, #0000 calc(100% - .5px), #000);
    -webkit-mask-composite: source-in;
    mask: radial-gradient(circle var(--pp-corte) at 0 0, #0000 calc(100% - .5px), #000), radial-gradient(circle var(--pp-corte) at 100% 0, #0000 calc(100% - .5px), #000);
    mask-composite: intersect;
}
.passe-parte-baixo::before { content: ''; position: absolute; top: -1px; left: 20px; right: 20px; border-top: 2px dashed var(--pp-linha); }
.passe-perfuracao { display: none; }
.cartao-passe-titulo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.passe-rotulo { display: inline-flex; align-items: center; gap: 6px; font: 800 10px 'Manrope', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--pp-suave); }
.passe-selo { font: 800 10px 'JetBrains Mono', monospace; letter-spacing: .08em; padding: 5px 9px; border-radius: 7px; border: 1.5px solid var(--pp-tinta); color: var(--pp-tinta); text-align: center; line-height: 1.3; }
.passe-nome { font: 800 19px 'Manrope', sans-serif; margin-top: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pp-tinta); }
.passe-corpo { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-top: 14px; }
.passe-posicao { display: flex; align-items: flex-start; gap: 4px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 92px; line-height: .84; color: var(--pp-tinta); margin-top: 6px; letter-spacing: -.01em; }
.passe-posicao small { font: 800 20px 'Manrope', sans-serif; letter-spacing: 0; margin: 10px -2px 0 0; color: var(--pp-tinta); opacity: .75; }
.passe-faturamento { text-align: right; padding-bottom: 6px; }
.passe-valor { font: 800 17px 'JetBrains Mono', monospace; margin-top: 4px; color: var(--pp-tinta); }
.passe-progresso-linha { display: flex; justify-content: space-between; font: 600 11.5px 'Manrope', sans-serif; color: var(--pp-suave); margin: 18px 0 2px; }
.passe-ingresso .barra-progresso { background: rgba(43, 28, 8, .14); height: 9px; }
.passe-ingresso .barra-progresso-fill { background: linear-gradient(90deg, #c2570a, #f08a1c); }
.passe-top5 { margin-top: 16px; padding: 10px 12px; border: 1.5px solid rgba(21, 107, 67, .55); border-radius: 12px; background: rgba(21, 107, 67, .12); color: #135c39; font: 800 13px 'Manrope', sans-serif; }
.passe-vazio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 20px 8px 4px; }
.passe-vazio-icone { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: var(--pp-tinta); background: rgba(43, 28, 8, .08); box-shadow: inset 0 0 0 1.5px var(--pp-tinta); margin-bottom: 6px; }
.passe-vazio strong { font: 800 16px 'Manrope', sans-serif; color: var(--pp-tinta); }
.passe-vazio p { margin: 0; max-width: 30ch; font-size: 12.5px; line-height: 1.55; color: var(--pp-suave); }
.passe-ingresso .passe-rotulo + .grade-contagem, .passe-parte-baixo .passe-rotulo { margin-bottom: 8px; }
.grade-contagem { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.passe-ingresso .caixa-contagem { background: rgba(43, 28, 8, .06); border: 1.5px solid var(--pp-linha); }
.passe-ingresso .caixa-contagem-valor { color: var(--pp-tinta); }
.passe-ingresso .caixa-contagem-label { color: var(--pp-suave); }
.caixa-contagem { padding: 11px 4px; border: 1px solid var(--bd); border-radius: 12px; background: var(--p2); text-align: center; }
.caixa-contagem-valor { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.caixa-contagem-label { font: 800 9px 'Manrope', sans-serif; letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; color: var(--m); }
.passe-codigo { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
.passe-barras { display: block; height: 32px; opacity: .8; background: repeating-linear-gradient(90deg, var(--pp-tinta) 0 2px, transparent 2px 4px, var(--pp-tinta) 4px 5px, transparent 5px 9px, var(--pp-tinta) 9px 12px, transparent 12px 14px, var(--pp-tinta) 14px 15px, transparent 15px 20px); }
.passe-codigo-texto { font: 700 9.5px 'JetBrains Mono', monospace; letter-spacing: .18em; color: var(--pp-suave); text-transform: uppercase; }

.painel-premios { padding: 22px; }
.premios-eyebrow { display: flex; align-items: center; gap: 8px; color: var(--or); }
.titulo-premios { margin: 8px 0 14px; font-size: 24px; }
.lista-premios { display: flex; flex-direction: column; }
.item-premio { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--bd); }
.item-premio-tag { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; font: 800 11px 'Manrope', sans-serif; background: var(--p3); color: var(--m); border: 1px solid var(--bd2); }
.item-premio-tag.primeiro { background: var(--orsoft); color: var(--or); border-color: var(--or); }
.item-premio-label { font: 700 13px 'Manrope', sans-serif; }
.item-premio-desc { font-size: 11.5px; color: var(--m); margin-top: 2px; }
.item-premio-ganhador { margin-top: 4px; font: 800 12.5px 'Manrope', sans-serif; color: var(--or); }
.dica-sem-grupo { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.45; color: var(--wa); }
.dica-sem-grupo[hidden] { display: none; }

@media (max-width: 1100px) {
    .grade-ranking { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .hero-ranking { grid-template-columns: 1fr; gap: 20px; padding: 26px 24px; }
    .hero-ranking-arte { order: -1; justify-self: stretch; max-width: none; aspect-ratio: auto; height: 130px; }
    .hero-ranking.tem-capa { min-height: 0; padding-top: 0; }
    .hero-ranking-moldura { position: relative; order: -1; width: calc(100% + 48px); margin: 0 -24px; height: 170px; max-height: none;
        -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%); mask-image: linear-gradient(to bottom, #000 45%, transparent 100%); }
    .hero-ranking-arte { height: 130px; }
    .hero-ranking-logo { width: 100px; height: 100px; }
    .arte-anel-1 { inset: 0 20%; border-radius: 999px; }
    .arte-anel-2 { inset: 14px 28%; border-radius: 999px; }
}
@media (max-width: 640px) {
    .hero-ranking { padding: 22px 18px; }
    .hero-ranking-meta span { font-size: 11.5px; padding: 7px 10px; }
    .painel-placar { padding: 20px 16px; }
    .podio-ranking { gap: 8px; }
    .podio-avatar { width: 44px; height: 44px; font-size: 13px; }
    .podio-1 .podio-avatar { width: 58px; height: 58px; }
    .podio-nome { font-size: 11.5px; }
    .passe-posicao { font-size: 68px; }
    .abas-ranking { width: 100%; }
    .aba-ranking { flex: 1; justify-content: center; }
}

/* ===== Saida de rotina (debug/manutencao) ===== */
.saida-debug {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--t);
    white-space: pre-wrap;
    word-break: break-word;
}
.saida-debug h1, .saida-debug h2 { font-family: 'JetBrains Mono', monospace; text-transform: none; letter-spacing: normal; font-size: 15px; margin: 0 0 10px; }

/* ===== Estado "melhor no desktop" ===== */
.somente-desktop-aviso {
    display: none;
    text-align: center;
    padding: 60px 24px;
    border: 1.5px dashed var(--bd2);
    border-radius: 16px;
    color: var(--m);
    margin: 0 32px;
}
.somente-desktop-aviso h2 { font-size: 22px; color: var(--t); margin-bottom: 8px; }

/* ===== Responsivo ===== */
@media (min-width: 861px) {
    /* .conta-lista (Gateways de pagamento / Sair da conta) vira UM cartão único no desktop,
       igual ao padrão do resto do painel (.painel) -- ver leads.php, admin/configuracoes.php
       etc. -- e os itens internos perdem o fundo/borda próprios, ficando separados por uma
       linha fina em vez de cada um flutuar como uma caixa separada. */
    html[data-theme] .conta-lista {
        background: var(--p);
        border: 1px solid var(--bd);
        border-radius: 16px;
        padding: 22px;
        gap: 0;
    }
    html[data-theme] .conta-item {
        background: transparent;
        border: none;
        border-radius: 0;
        padding-left: 0;
        padding-right: 0;
    }
    html[data-theme] .conta-lista > *:not(:first-child) {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid var(--bd);
    }
}

@media (max-width: 900px) {
    .grade-kpi { grid-template-columns: repeat(2, 1fr); }
    .grade-kpi > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .cartao-kpi-larga { grid-column: span 2; }
    .grade-dashboard-baixo,
    .grade-dashboard-baixo.grade-igual { grid-template-columns: 1fr; }
    .grade-dashboard-topo { grid-template-columns: 1fr; }
    .grade-config-bot { grid-template-columns: 1fr; }
    .grade-ranking { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    /* Login e cadastro no mobile seguem o protótipo: o bloco de marketing (logo gigante,
       manchete e métricas) sai, porque empurrava o formulário pra fora da primeira tela --
       era preciso rolar pra ver o campo de e-mail. No lugar entra um cabeçalho compacto
       (logo à esquerda, tema à direita) e a troca entre entrar/criar conta vira pills.
       No desktop nada disso muda: a coluna de marca continua como era. */
    .tela-login { display: block; }
    .login-marca { display: none; }
    .alternador-tema-flutuante { display: none; }  /* o absoluto do canto; no mobile o tema fica no cabeçalho */
    .login-formulario { padding: 20px 20px 36px; justify-content: flex-start; min-height: 100vh; }
    .login-formulario-conteudo { max-width: none; }
    .login-cabecalho-mobile { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
    .login-formulario-conteudo h2 { font-size: 34px; line-height: 1.02; }
    .login-abas { display: flex; }
    .login-rodape-alternar { display: none; }  /* as pills já fazem isso */

    /* O olho de mostrar senha vira ícone dentro do campo: no protótipo a senha ocupa a
       largura toda, igual aos outros campos. Escopado no .login-formulario pra não mexer
       no .campo-com-acao das telas de admin. */
    .login-formulario .campo-com-acao { position: relative; display: block; }
    .login-formulario .campo-com-acao input { width: 100%; padding-right: 46px; }
    .login-formulario .campo-com-acao .botao {
        position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
        background: transparent; border: 0; padding: 8px 10px; min-width: 0;
    }

    .barra-lateral { display: none; }
    .layout-painel { flex-direction: column; padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
    .conteudo-principal { padding: 0 16px 32px; }
    .cabecalho-pagina h1 { font-size: 22px; }
    .grade-kpi { grid-template-columns: repeat(2, 1fr); }
    .grade-kpi > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .cartao-kpi-larga { grid-column: span 2; }
    .grade-2, .grade-3 { grid-template-columns: 1fr; }
    .grade-cards { grid-template-columns: 1fr; }

    /* Cabeçalho da página no mobile, no mesmo padrão do protótipo: logo à esquerda,
       título + subtítulo no meio, botão de tema (só ícone) à direita -- e tudo que
       for ação da página (filtro de período, "+ Novo Bot", etc.) numa linha própria
       abaixo. Sem padding lateral: alinha com os cards, que já ficam dentro dos 16px
       de .conteudo-principal (antes o cabeçalho tinha 16px a mais e o filtro ficava
       visivelmente mais estreito que os cards). */
    .cabecalho-pagina {
        padding: 16px 0 12px;
        align-items: center;
        gap: 12px;
    }
    /* Logo: caminho relativo a este arquivo (assets/css/) -- funciona igual em
       qualquer página, inclusive nas de admin/, sem depender de $caminho_base. */
    .cabecalho-pagina::before {
        content: '';
        order: 0;
        width: 42px;
        height: 42px;
        border-radius: 12px;
        flex-shrink: 0;
        background: var(--logo-url) center / cover no-repeat;
    }
    .cabecalho-pagina > div:first-child { order: 1; min-width: 0; }
    /* Quebra de linha forçada logo depois do botão de tema -- só quando a página tem
       alguma ação além dele (filtro de período, "+ Novo Bot"...), pra não sobrar uma
       linha vazia nas telas que só têm o botão de tema. */
    .cabecalho-pagina:has(.acoes-cabecalho > *:not(.alternador-tema):not(.sino-notificacoes-wrap))::after {
        content: '';
        order: 2;
        flex-basis: 100%;
        height: 0;
    }
    /* Os filhos de .acoes-cabecalho viram itens diretos do cabeçalho, pra poder
       separar o botão de tema (linha do título) do resto (linha de baixo). */
    .acoes-cabecalho { display: contents; }
    .acoes-cabecalho > *:not(.alternador-tema):not(.sino-notificacoes-wrap) { order: 3; }
    .alternador-tema,
    .sino-notificacoes-wrap {
        order: 2;
        flex-shrink: 0;
    }
    .alternador-tema,
    .sino-notificacoes {
        width: 40px;
        height: 40px;
        padding: 0;
        gap: 0;
        border-radius: 50%;
        justify-content: center;
        font-size: 0;
    }
    .alternador-tema svg,
    .sino-notificacoes svg { width: 17px; height: 17px; }
    .sino-painel { right: 0; left: auto; }

    /* Filtro de período ocupa a largura toda (igual aos cards), em linha única com
       scroll horizontal em vez de quebrar "Personalizado" pra uma segunda linha. */
    .seletor-periodo {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .seletor-periodo::-webkit-scrollbar { display: none; }
    /* flex: 1 0 auto -> as pílulas crescem pra dividir a linha inteira (sem sobrar
       espaço morto depois de "Total"), mas nunca encolhem abaixo do texto: se voltar
       a ter pílula demais pra caber (ex. reativando "Personalizado"), em vez de
       espremer elas voltam a transbordar e a linha rola na horizontal. */
    .periodo-item { white-space: nowrap; flex: 1 0 auto; text-align: center; }
    /* Barra de filtros (Remarketing, Leads...): cada seletor ocupa a linha toda em vez de estourar a borda do card. */
    .barra-filtros > div, .barra-filtros form { width: 100%; }
    .barra-filtros select { width: 100%; max-width: 100%; }

    /* Com "Personalizado" fora da barra, o form de datas não tem mais função no
       mobile -- e, mesmo invisível, os inputs de data seguiam ocupando uma linha
       inteira (~60px de faixa vazia entre o filtro e o primeiro card). Some de vez;
       só sobra quando a conta tem mais de um bot (aí o seletor de bot é útil).
       O form continua no DOM (display:none não impede submit()), que é como o JS
       troca de período -- ver script no fim da página. */
    .grupo-data-personalizada:not(.ativo) { display: none; }
    .form-periodo:not(:has(select)):not(:has(.grupo-data-personalizada.ativo)) { display: none; }
    .form-periodo { width: 100%; }
    .form-periodo > select { flex: 1; min-width: 0; }

    .barra-mobile {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        /* acima do controle de zoom do editor de fluxo, que é z-index 100 */
        z-index: 200;
        display: flex;
        background: var(--p);
        border-top: 1px solid var(--bd);
    }
    .mobile-item {
        /* o item "Mais" é <button>: sem isto herda fundo e borda padrão do navegador
           (aparecia como um retângulo branco no canto da barra). */
        background: none;
        border: 0;
        font: inherit;
        cursor: pointer;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 8px 4px;
        min-height: 44px;
        color: var(--m);
    }
    .mobile-item.ativo { color: var(--or); }
    .mobile-icone svg { width: 20px; height: 20px; }
    .mobile-texto { font: 700 9.5px 'Manrope', sans-serif; }

    .folha-menu {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 210;
    }
    .folha-menu[hidden] { display: none; }
    .folha-menu-fundo {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .55);
        opacity: 0;
        transition: opacity .2s ease;
    }
    .folha-menu.aberta .folha-menu-fundo { opacity: 1; }
    .folha-menu-caixa {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 82vh;
        display: flex;
        flex-direction: column;
        background: var(--p);
        border-top: 1px solid var(--bd);
        border-radius: 18px 18px 0 0;
        transform: translateY(100%);
        transition: transform .2s ease;
    }
    .folha-menu.aberta .folha-menu-caixa { transform: translateY(0); }
    .folha-menu-topo {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 16px;
        border-bottom: 1px solid var(--bd);
    }
    .folha-menu-topo .usuario-info { flex: 1; min-width: 0; }
    .folha-menu-nav {
        overflow-y: auto;
        padding: 12px 10px calc(12px + env(safe-area-inset-bottom));
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    /* Editor de fluxo no celular: paleta vira fileira rolável e o canvas ganha altura
       fixa (senão colapsa, já que o conteúdo é posicionado em absoluto). */
    .paleta-blocos {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        scrollbar-width: none;
    }
    .paleta-blocos::-webkit-scrollbar { display: none; }
    .paleta-blocos .botao { flex: 0 0 auto; }
    .paleta-blocos-titulo { display: none; }
    /* O touch-action fica no fluxograma_tema.css (none): os gestos sao tratados no JS. */
    .conteiner-fluxo { height: 60vh; }
    /* Redundante hoje (o container já é touch-action:none), mas mantido de propósito: a alça
       precisa tirar o gesto do navegador por conta própria. Quando ela herdava pan-*, o Chrome
       assumia que era rolagem, mandava touchcancel e o arraste do bloco morria no meio. */
    .flowchart-operator-title, .flowchart-operator-body { touch-action: none; }

    .oculto-mobile { display: none; }
    /* No celular o 1º card (Vendas aprovadas) some, sobrando 3 numa grade de 2 colunas: o último ocupa a linha toda em vez de deixar um buraco. */
    .grade-dashboard-topo .grade-kpi > :last-child { grid-column: 1 / -1; }
    .oculto-desktop { display: block; }
    .somente-desktop-aviso.ativo-mobile { display: block; }
}

/* ===== Comunidade (linktree institucional) ===== */
.comunidade-coluna { max-width: 520px; margin: 0 auto; }
.painel .comunidade-card { background: var(--p2); }
.comunidade-hero { text-align: center; margin-bottom: 18px; }
.comunidade-hero img {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    object-fit: cover;
    border: 1px solid var(--bd);
}
.comunidade-hero p { margin: 12px 0 0; color: var(--m); font-size: 13.5px; }
.comunidade-lista { display: flex; flex-direction: column; gap: 10px; }
.comunidade-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--p);
    border: 1px solid var(--bd);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: var(--shadow);
    min-height: 68px;
}
a.comunidade-card:hover { border-color: var(--or); }
a.comunidade-card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--orsoft); }
.comunidade-card.lotado { cursor: default; }
.comunidade-icone {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--orsoft);
    color: var(--or);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.comunidade-icone.icone-whatsapp { background: var(--oksoft); color: var(--ok); }
.comunidade-icone.icone-denuncia { background: var(--dasoft); color: var(--da); }
.comunidade-textos { flex: 1; min-width: 0; }
.comunidade-textos strong {
    display: block;
    font: 800 14px 'Manrope', sans-serif;
    line-height: 1.3;
}
.comunidade-textos span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--m);
    line-height: 1.35;
}
.comunidade-vagas {
    font: 700 12px 'JetBrains Mono', monospace;
    color: var(--m);
    flex-shrink: 0;
}
.comunidade-card.lotado .comunidade-vagas { color: var(--da); }
.comunidade-seta { color: var(--m); flex-shrink: 0; display: grid; place-items: center; }
.comunidade-card .badge { flex-shrink: 0; }
.comunidade-icones {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
.comunidade-icone-opcao {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 8px 12px;
    border: 1px solid var(--bd);
    border-radius: 12px;
    background: var(--p2);
    cursor: pointer;
    font: 700 12px 'Manrope', sans-serif;
    white-space: nowrap;
}
.comunidade-icone-opcao input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.comunidade-icone-opcao:has(input:checked) {
    border-color: var(--or);
    box-shadow: inset 0 0 0 1px var(--or);
}
@media (max-width: 720px) {
    .comunidade-icones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.comunidade-icone-opcao:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--orsoft); }
.comunidade-icone-opcao .comunidade-icone { width: 28px; height: 28px; border-radius: 8px; }

.exemplos-webhook { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.exemplos-webhook summary { cursor: pointer; font: 700 13px 'Manrope', sans-serif; padding: 8px 0; }
.exemplo-payload {
    margin: 0;
    padding: 12px;
    overflow: auto;
    background: var(--p2);
    border: 1px solid var(--bd);
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.45;
}
.tabela-dados .comunidade-icone { width: 36px; height: 36px; border-radius: 10px; }

/* ===== Fluxo Guiado: editor em tela cheia (sem barra lateral do painel) ===== */
.editor-fluxo { display: flex; flex-direction: column; height: 100vh; background: var(--bg); }
.editor-fluxo-topo {
    flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 10px 20px; border-bottom: 1px solid var(--bd); background: var(--bg);
}
.editor-fluxo-topo-esq, .editor-fluxo-topo-dir { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.editor-fluxo-voltar {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--bd);
    border-radius: 12px; background: var(--p); font: 700 13px 'Manrope', sans-serif; color: var(--t);
}
.editor-fluxo-voltar:hover { border-color: var(--bd2); }
.editor-fluxo-titulo-linha { display: flex; align-items: center; gap: 8px; }
.editor-fluxo-titulo h1 { font-size: 22px; text-transform: none; line-height: 1.1; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-fluxo-sub { font: 700 10px 'Manrope', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--m); }
.editor-fluxo-nome-input { width: 220px; padding: 6px 10px; }
.editor-fluxo-icone-btn {
    display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; cursor: pointer;
    background: transparent; border: 0; border-radius: 8px; color: var(--m);
}
.editor-fluxo-icone-btn:hover { color: var(--t); background: var(--p2); }
.editor-fluxo-icone-btn.quadrado { width: 42px; height: 42px; border: 1px solid var(--bd); background: var(--p2); flex: none; }
.editor-fluxo-corpo {
    flex: 1; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) 300px; gap: 20px;
    padding: 16px 20px; align-items: start;
}
.basico-conteudo, .editor-fluxo-lateral { min-width: 0; max-height: 100%; overflow-y: auto; padding-right: 4px; }
.editor-fluxo-lateral { display: flex; flex-direction: column; gap: 14px; }
.editor-fluxo-lateral .painel { margin-bottom: 0; }
.editor-fluxo-link { color: var(--or); font-weight: 700; }
.editor-fluxo-como {
    margin-top: 12px; padding: 12px; border-radius: 12px; font-size: 12px; line-height: 1.6;
    background: var(--oksoft); border: 1px solid var(--ok);
}
.editor-fluxo-como strong { color: var(--ok); }
.editor-fluxo-como ol { margin: 6px 0 0; padding-left: 18px; }

.basico-nav {
    width: 232px; max-height: 100%; overflow-y: auto; background: var(--p); border: 1px solid var(--bd);
    border-radius: 16px; padding: 12px 10px; transition: width .15s;
}
.basico-nav-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 6px 10px; border-bottom: 1px solid var(--bd); margin-bottom: 4px; }
.basico-nav-titulo { display: block; font: 700 10px 'Manrope', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--m); }
.basico-nav-contagem { display: block; font: 600 12px 'Manrope', sans-serif; color: var(--t); margin-top: 2px; }
.basico-nav-grupo { font: 700 10px 'Manrope', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--m); padding: 12px 10px 4px; }
.basico-nav-item {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer;
    padding: 9px 10px; border-radius: 10px; color: var(--m); font: 600 14px 'Manrope', sans-serif;
}
.basico-nav-item:hover { background: var(--p2); color: var(--t); }
.basico-nav-item.ativo { background: var(--p2); color: var(--t); box-shadow: inset 2px 0 0 var(--or); }
.basico-nav-item.bloqueado { cursor: not-allowed; opacity: .75; }
.basico-nav-item.bloqueado:hover { background: transparent; color: var(--m); }
.basico-nav-rotulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.basico-nav-item .editor-fluxo-cadeado { flex: none; color: var(--wa); display: none; }
.basico-nav-item.bloqueado .editor-fluxo-cadeado { display: block; }
.basico-nav-aviso {
    margin: 12px 4px 2px; padding: 10px 12px; border-radius: 10px; font-size: 12px; line-height: 1.45;
    background: var(--wasoft); border: 1px solid var(--wa); color: var(--wa);
}
.basico-nav.recolhida { width: 64px; }
.basico-nav.recolhida .basico-nav-rotulo, .basico-nav.recolhida .basico-nav-grupo, .basico-nav.recolhida .basico-nav-aviso,
.basico-nav.recolhida .basico-nav-topo > div, .basico-nav.recolhida .editor-fluxo-cadeado { display: none; }
.basico-nav.recolhida .basico-nav-topo { justify-content: center; }
.basico-nav.recolhida .basico-nav-item { justify-content: center; }
.basico-secao { display: none; }
.basico-secao.ativa { display: block; }
.basico-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font: 700 12px 'Manrope', sans-serif; background: var(--oksoft); color: var(--ok); }
.basico-status.sujo { background: var(--wasoft); color: var(--wa); }
.basico-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.basico-interruptor {
    display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none;
    padding: 6px 12px; border: 1px solid var(--bd); border-radius: 999px; background: var(--p);
    font: 700 13px 'Manrope', sans-serif; color: var(--t);
}
.basico-interruptor input {
    appearance: none; -webkit-appearance: none; margin: 0; flex: none; cursor: pointer;
    width: 34px; height: 20px; border-radius: 999px; background: var(--p3); border: 1px solid var(--bd2);
    position: relative; transition: background .15s, border-color .15s;
}
.basico-interruptor input::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
    background: var(--m); transition: transform .15s, background .15s;
}
.basico-interruptor input:checked { background: var(--oksoft); border-color: var(--ok); }
.basico-interruptor input:checked::after { transform: translateX(14px); background: var(--ok); }
.basico-interruptor:has(input:checked) { color: var(--ok); }
.basico-resumo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.basico-resumo-item { background: var(--p2); border: 1px solid var(--bd); border-radius: 12px; padding: 12px; }
.basico-resumo-item span { display: block; color: var(--m); font: 600 12px 'Manrope', sans-serif; }
.basico-resumo-item strong { font: 800 20px 'Manrope', sans-serif; }
.basico-bot { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--bd); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.basico-vincular { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.basico-vincular select { flex: 1; min-width: 180px; }
@media (max-width: 1100px) {
    .editor-fluxo { height: auto; min-height: 100vh; }
    .editor-fluxo-corpo { grid-template-columns: 1fr; }
    .basico-nav { width: auto; display: flex; flex-wrap: wrap; gap: 4px; max-height: none; }
    .basico-nav-topo, .basico-nav-grupo, .basico-nav-aviso { display: none; }
    .basico-nav-item { width: auto; }
    .basico-conteudo, .editor-fluxo-lateral { max-height: none; overflow: visible; }
    .basico-resumo { grid-template-columns: 1fr; }
}

/* ===== Redirecionamento ===== */
.rd-editor [hidden], #rd-aba-links[hidden], #rd-aba-campanha[hidden] { display: none !important; }
body.rd-sem-rolagem { overflow: hidden; }
.rd-vazio { text-align: center; padding: 48px 16px; }
.rd-vazio-icone { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 16px; display: grid; place-items: center; background: var(--orsoft); color: var(--or); }
.rd-vazio-icone svg { width: 26px; height: 26px; }
html[data-theme] .rd-vazio h3 { margin: 0 0 6px; font-size: 22px; }
.rd-vazio p { margin: 0 auto 18px; max-width: 420px; }
.rd-celula-titulo { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; min-width: 180px; }
.rd-celula-url { font: 500 12px ui-monospace, Consolas, monospace; color: var(--m); max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-sub { font-size: 11.5px; }
.rd-mini { padding: 4px 6px; }
.rd-prep { display: flex; flex-direction: column; gap: 4px; }
.rd-prep-linha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }

.rd-editor {
    display: none; position: fixed; inset: 0; z-index: 1500; background: var(--bg); flex-direction: column;
}
.rd-editor.aberto { display: flex; }
.rd-editor-topo {
    display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-bottom: 1px solid var(--bd); background: var(--p); flex: none;
}
.rd-editor-titulo { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.rd-editor-sobre { font: 700 11px 'Manrope', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--or); }
.rd-editor-titulo strong { font: 800 18px 'Manrope', sans-serif; }
.rd-editor-acoes { display: flex; gap: 10px; }
.rd-ver-jornada { display: none; }
.rd-editor-corpo {
    flex: 1; overflow-y: auto; display: grid; grid-template-columns: 190px minmax(0, 1fr) 340px; gap: 24px;
    padding: 24px; align-items: start; max-width: 1400px; width: 100%; margin: 0 auto; box-sizing: border-box;
}
.rd-nav, .rd-previa { position: sticky; top: 0; }
.rd-nav { display: flex; flex-direction: column; gap: 2px; }
.rd-nav a { padding: 9px 12px; border-radius: 10px; color: var(--m); font: 600 14px 'Manrope', sans-serif; text-decoration: none; }
.rd-nav a:hover { background: var(--p2); color: var(--t); }
.rd-nav a.ativo { background: var(--orsoft); color: var(--or); }
.rd-form { display: flex; flex-direction: column; min-width: 0; }
.rd-sec { scroll-margin-top: 8px; }
html[data-theme] .rd-sec h3 { margin: 0 0 14px; font-size: 19px; }
.rd-dica { font-size: 12.5px; margin: 10px 0 0; }
.rd-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.rd-cartoes-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rd-cartoes-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rd-cartao {
    display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer;
    padding: 12px 14px; border-radius: 12px; border: 1px solid var(--bd); background: var(--p2); color: var(--t);
    font: 600 13px 'Manrope', sans-serif; min-width: 0;
}
.rd-cartao strong { font: 700 13.5px 'Manrope', sans-serif; overflow-wrap: anywhere; }
.rd-cartao span { color: var(--m); font-size: 12px; font-weight: 500; }
.rd-cartao:hover { border-color: var(--bd2); }
.rd-cartao.ativo { border-color: var(--or); background: var(--orsoft); }
.rd-cartao.ativo strong { color: var(--or); }
.rd-slug-linha { display: flex; align-items: stretch; border: 1px solid var(--bd); border-radius: 10px; overflow: hidden; background: var(--p2); }
.rd-slug-linha input { flex: 1; min-width: 0; border: 0 !important; border-radius: 0 !important; background: transparent !important; }
.rd-slug-prefixo { display: flex; align-items: center; padding: 0 12px; color: var(--m); font: 500 13px ui-monospace, Consolas, monospace; background: var(--p3); white-space: nowrap; max-width: 55%; overflow: hidden; text-overflow: ellipsis; }
.rd-lista-bots { display: flex; flex-direction: column; gap: 8px; }
.rd-bot {
    display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--bd); border-radius: 12px;
    background: var(--p2); cursor: pointer;
}
.rd-bot.ativo { border-color: var(--or); background: var(--orsoft); }
.rd-bot input { flex: none; width: 16px; height: 16px; accent-color: var(--or); }
.rd-bot-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rd-bot-info strong { font: 700 13.5px 'Manrope', sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-bot-info span { color: var(--m); font-size: 12px; }
.rd-origem-urls { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.rd-copia { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border: 1px solid var(--bd); border-radius: 10px; background: var(--p2); min-width: 0; }
.rd-copia-rotulo { flex: none; width: 120px; font: 700 11.5px 'Manrope', sans-serif; text-transform: uppercase; letter-spacing: .04em; color: var(--m); }
.rd-copia code { flex: 1; min-width: 0; font: 500 12px ui-monospace, Consolas, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-previa-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.rd-previa-slug { font: 800 22px 'Manrope', sans-serif; overflow-wrap: anywhere; }
.rd-previa-url { display: flex; align-items: center; gap: 8px; margin: 8px 0 18px; }
.rd-previa-url code { flex: 1; min-width: 0; font: 500 12px ui-monospace, Consolas, monospace; color: var(--m); overflow-wrap: anywhere; }
.rd-jornada { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; position: relative; }
.rd-jornada li { display: flex; gap: 12px; padding-bottom: 16px; position: relative; }
.rd-jornada li:not(:last-child)::before { content: ''; position: absolute; left: 15px; top: 32px; bottom: 2px; width: 1px; background: var(--bd); }
.rd-jornada b { flex: none; width: 31px; height: 31px; border-radius: 10px; display: grid; place-items: center; background: var(--p3); color: var(--m); font: 800 11px 'Manrope', sans-serif; }
.rd-jornada li.final b { background: var(--orsoft); color: var(--or); }
.rd-jornada li div { display: flex; flex-direction: column; min-width: 0; }
.rd-jornada strong { font: 700 13px 'Manrope', sans-serif; }
.rd-jornada span { color: var(--m); font-size: 12.5px; overflow-wrap: anywhere; }
.rd-jornada li:last-child { padding-bottom: 0; }

@media (max-width: 1100px) {
    .rd-editor-corpo { grid-template-columns: minmax(0, 1fr) 320px; }
    .rd-nav { display: none; }
}
@media (max-width: 860px) {
    .rd-editor-topo { padding: 10px 12px; gap: 8px; flex-wrap: wrap; }
    .rd-editor-titulo { order: 1; flex: 1 1 60%; }
    .rd-editor-titulo strong { font-size: 16px; }
    .rd-editor-acoes { order: 2; width: 100%; }
    .rd-editor-acoes .botao { flex: 1; }
    .rd-ver-jornada { display: inline-flex; justify-content: center; }
    .rd-editor-corpo { grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 14px; }
    .rd-previa { display: none; position: static; }
    .rd-editor.ver-jornada .rd-form { display: none; }
    .rd-editor.ver-jornada .rd-previa { display: block; }
    .rd-cartoes-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rd-prep-linha { grid-template-columns: 1fr; }
    .rd-copia { flex-wrap: wrap; }
    .rd-copia-rotulo { width: 100%; }
    .rd-copia code { flex-basis: calc(100% - 44px); }
}

.basico-bots-vazio {
    display: grid; justify-items: center; gap: 4px; padding: 28px 16px; text-align: center; margin-bottom: 8px;
    border: 1px dashed var(--bd2); border-radius: 12px; color: var(--m); font-size: 12px;
}
.basico-bots-vazio strong { color: var(--t); font-size: 14px; }

/* Interruptor "Ativar" das ofertas: sem a caixa arredondada em volta, só o botão deslizante + texto */
.basico-interruptor.sem-caixa { padding: 0; border: 0; border-radius: 0; background: transparent; margin-bottom: 14px; }
.basico-interruptor.sem-caixa:has(input:checked) { color: var(--t); }

/* ===== Fluxo Guiado: Conversões ===== */
.conv-filtros { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.conv-filtro { cursor: pointer; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--bd); background: var(--p); color: var(--m); font: 700 12px 'Manrope', sans-serif; }
.conv-filtro.ativo { background: var(--orsoft); color: var(--or); border-color: var(--or); }
.conv-vazio { display: grid; justify-items: center; gap: 6px; padding: 48px 16px; text-align: center; color: var(--m); }
.conv-vazio strong { color: var(--t); }
.conv-cartoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.conv-funil-linha { display: grid; grid-template-columns: 110px 1fr 70px; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 13px; }
.conv-funil-linha strong { text-align: right; }
.conv-barra { height: 12px; border-radius: 99px; background: var(--p3); overflow: hidden; }
.conv-barra i { display: block; height: 100%; border-radius: 99px; background: var(--or); }
.conv-dia { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--bd); font-size: 13px; }
.conv-dia:last-child { border-bottom: 0; }
@media (max-width: 700px) { .conv-cartoes { grid-template-columns: 1fr 1fr; } }

/* ===== Fluxo Guiado: Assinatura ===== */
.as-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.as-chip { cursor: pointer; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--bd); background: var(--p2); color: var(--m); font: 600 12px 'Manrope', sans-serif; }
.as-chip:hover { border-color: var(--bd2); color: var(--t); }
.as-chip.ativo { background: var(--wasoft); border-color: var(--wa); color: var(--wa); }
.as-var { font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.as-horas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.as-hora { cursor: pointer; padding: 9px 0; border-radius: 8px; border: 1px solid var(--bd); background: var(--p2); color: var(--m); font: 600 12px 'JetBrains Mono', monospace; }
.as-hora.ativo { background: var(--wasoft); border-color: var(--wa); color: var(--wa); }
@media (max-width: 700px) { .as-horas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ===== Fluxo Guiado: navegação mobile (só abaixo de 860px) ===== */
.secao-atual-mobile, .barra-secoes, .folha-secoes { display: none; }
@media (max-width: 860px) {
    .basico-nav { display: none !important; }
    .editor-fluxo-topo { padding: 10px 14px; gap: 10px; }
    .editor-fluxo-corpo { padding: 12px 14px 84px; }
    .secao-atual-mobile {
        display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
        padding: 12px 14px; border: 1px solid var(--bd); border-radius: 14px; background: var(--p); color: var(--t);
    }
    .secao-atual-icone { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--orsoft); color: var(--or); flex: none; }
    .secao-atual-texto { display: grid; flex: 1; min-width: 0; }
    .secao-atual-texto small { font: 700 10px 'Manrope', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--m); }
    .secao-atual-texto strong { font: 700 15px 'Manrope', sans-serif; }
    .secao-atual-posicao { font: 600 12px 'Manrope', sans-serif; color: var(--m); }

    .barra-secoes {
        display: flex; align-items: center; justify-content: space-between; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--p); border-top: 1px solid var(--bd);
    }
    .barra-secoes button { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; color: var(--t); font: 600 13px 'Manrope', sans-serif; cursor: pointer; padding: 8px 4px; max-width: 34%; }
    .barra-secoes button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .barra-secoes button:disabled { color: var(--m); opacity: .45; cursor: default; }
    .barra-secoes-meio { display: grid; text-align: center; min-width: 0; }
    .barra-secoes-meio small { font: 600 11px 'Manrope', sans-serif; color: var(--m); }
    .barra-secoes-meio strong { font: 700 13px 'Manrope', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .folha-secoes { display: block; position: fixed; inset: 0; z-index: 60; }
    .folha-secoes-fundo { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .2s; }
    .folha-secoes-painel {
        position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh; display: flex; flex-direction: column;
        background: var(--p); border: 1px solid var(--bd); border-radius: 20px 20px 0 0; padding: 8px 18px calc(16px + env(safe-area-inset-bottom));
        transform: translateY(100%); transition: transform .22s ease-out;
    }
    .folha-secoes.aberta .folha-secoes-fundo { opacity: 1; }
    .folha-secoes.aberta .folha-secoes-painel { transform: translateY(0); }
    .folha-secoes-alca { align-self: center; width: 38px; height: 4px; border-radius: 99px; background: var(--bd2); margin-bottom: 10px; }
    .folha-secoes-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
    .folha-secoes-topo strong { display: block; font: 700 16px 'Manrope', sans-serif; }
    .folha-secoes-topo small { color: var(--m); font-size: 12px; }
    .folha-secoes-lista { overflow-y: auto; }
    .folha-secoes-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 10px; border: 0; border-radius: 12px; background: transparent; color: var(--m); font: 600 14px 'Manrope', sans-serif; text-align: left; cursor: pointer; }
    .folha-secoes-item.ativo { background: var(--p2); color: var(--t); box-shadow: inset 2px 0 0 var(--or); }
    .folha-secoes-item.bloqueado { opacity: .7; }
    .folha-secoes-item .folha-secoes-nome { flex: 1; }
    .folha-secoes-item > svg { color: var(--wa); }
    .folha-secoes-icone { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--p2); border: 1px solid var(--bd); flex: none; }
    .folha-secoes-numero { font: 600 12px 'Manrope', sans-serif; color: var(--m); min-width: 16px; text-align: right; }
    body.folha-aberta { overflow: hidden; }
}

/* ===== Aviso de e-mail não confirmado (menu lateral) ===== */
.aviso-email { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 12px 10px; padding: 8px 10px; border-radius: 10px; background: var(--wasoft); color: var(--wa); font: 600 12px 'Manrope', sans-serif; }
.aviso-email button { cursor: pointer; border: 1px solid currentColor; background: transparent; color: inherit; border-radius: 8px; padding: 3px 9px; font: 700 11px 'Manrope', sans-serif; }
.aviso-email button:disabled { opacity: .7; cursor: default; }
.folha-menu-caixa .aviso-email { margin: 0 0 10px; }

/* ===== Cabeçalho superior do cliente (faturamento, saudação, ações) -- ref. SharkBot ===== */
.topo-painel { display: none; }
@media (min-width: 861px) {
    .layout-painel { position: relative; }
    .layout-painel:has(.topo-painel) .conteudo-principal { padding-top: 92px; }
    .topo-painel {
        position: absolute;
        top: 0;
        left: var(--largura-barra);
        right: 0;
        height: 84px;
        padding: 0 32px;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 16px;
        z-index: 20;
    }
    /* O Tema agora vive no cabeçalho superior; o botão de cada página some no desktop. */
    .layout-painel:has(.topo-painel) .cabecalho-pagina .alternador-tema { display: none; }

    .topo-faturamento {
        justify-self: start;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 18px 10px 10px;
        background: var(--p);
        border: 1px solid var(--bd);
        border-radius: 999px;
        min-width: 230px;
    }
    .topo-faturamento-icone {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: var(--oksoft);
        color: var(--ok);
        border: 1px solid var(--ok);
        flex-shrink: 0;
    }
    .topo-faturamento-icone svg { width: 18px; height: 18px; }
    .topo-faturamento-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
    .topo-faturamento-linha {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 10px;
        font: 500 9.5px 'JetBrains Mono', monospace;
        letter-spacing: .14em;
        color: var(--m);
    }
    .topo-faturamento-linha strong { font: 800 14px 'Manrope', sans-serif; letter-spacing: 0; color: var(--t); }
    .topo-faturamento-barra { height: 4px; border-radius: 99px; background: var(--p3); overflow: hidden; }
    .topo-faturamento-barra i { display: block; height: 100%; border-radius: 99px; background: var(--ok); min-width: 3px; }

    .topo-saudacao { text-align: center; display: flex; flex-direction: column; gap: 5px; }
    .topo-saudacao strong { font: 700 20px 'Manrope', sans-serif; }
    .topo-saudacao em { font-style: normal; color: var(--or); }
    .topo-saudacao span { font: 500 10.5px 'JetBrains Mono', monospace; letter-spacing: .22em; color: var(--m); }

    .topo-acoes {
        justify-self: end;
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 8px 10px;
        background: var(--p);
        border: 1px solid var(--bd);
        border-radius: 999px;
    }
    .topo-botao,
    .topo-acoes .sino-notificacoes {
        width: 40px;
        height: 40px;
        padding: 0;
        gap: 0;
        display: grid;
        place-items: center;
        background: transparent;
        border: 0;
        border-radius: 50%;
        color: var(--t);
        cursor: pointer;
    }
    .topo-botao:hover,
    .topo-acoes .sino-notificacoes:hover { background: var(--p2); }
    .topo-botao svg,
    .topo-acoes .sino-notificacoes svg { width: 18px; height: 18px; }
    .topo-botao span { display: none; }
    .topo-acoes .sino-painel { right: 0; left: auto; }
}

/* ===== Comunidade (página própria, sem sidebar nem cabeçalho) ===== */
.pagina-comunidade { min-height: 100vh; padding: 56px 20px 64px; display: flex; justify-content: center; }
.pagina-comunidade .comunidade-coluna { width: 100%; max-width: 480px; margin: 0; position: relative; }
.pagina-comunidade .comunidade-hero { margin-bottom: 28px; }
.pagina-comunidade .comunidade-hero img {
    width: 88px;
    height: 88px;
    border-radius: 24px;
    box-shadow: 0 0 40px -8px var(--orsoft);
}
.pagina-comunidade .comunidade-hero h1 { margin-top: 18px; font-size: 34px; text-transform: none; }
.pagina-comunidade .comunidade-hero p { margin-top: 6px; }
.pagina-comunidade .alternador-tema { position: fixed; top: 16px; right: 16px; }

/* ===== Dashboard: gráficos dentro dos cards de KPI (ref. SharkBot) ===== */
.kpi-grafico { position: relative; margin-top: 12px; }
.kpi-barra { height: 6px; border-radius: 99px; background: var(--p3); overflow: hidden; margin-top: 12px; }
.kpi-barra i { display: block; height: 100%; border-radius: 99px; background: var(--or); min-width: 0; transition: width .4s ease; }
.kpi-barra-legenda { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font: 500 10.5px 'JetBrains Mono', monospace; color: var(--m); }
.kpi-medidor { position: relative; height: 96px; margin-top: 8px; }
.kpi-medidor canvas { max-width: 100%; }
.kpi-medidor-valor {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    text-align: center;
    font: 700 28px 'Barlow Condensed', sans-serif;
}
.kpi-mini-barras { height: 84px; }
.kpi-mini-barras canvas { max-width: 100%; }

@media (max-width: 860px) {
    /* Faixa de filtros no mobile: sem moldura nem rótulo, só as opções em largura total. */
    .faixa-filtros { padding: 0; border: 0; background: none; border-radius: 0; margin-bottom: 14px; }
    .faixa-filtros-rotulo { display: none; }
    .faixa-filtros-controles { width: 100%; }
    .faixa-filtros .seletor-periodo { background: var(--p); }
    .cabecalho-pagina p { padding-left: 0; border-left: 0; }
    .pagina-comunidade { padding-top: 72px; }
}

/* ===== Card de bot (lista) -- ref. SharkBot: avatar central, selos de status no canto,
   @username em pílula, leads/vendas lado a lado, fluxo conectado e ações embaixo ===== */
.cartao-bot { position: relative; align-items: center; text-align: center; padding: 22px 0 0; overflow: hidden; }
.cartao-bot .bot-selos { position: absolute; top: 14px; right: 14px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.bot-selo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    font: 800 9.5px 'Manrope', sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    border: 1px solid;
}
.bot-selo i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.bot-selo svg { width: 12px; height: 12px; }
.bot-selo.ok { color: var(--ok); background: var(--oksoft); border-color: var(--ok); }
.bot-selo.alerta { color: var(--wa); background: var(--wasoft); border-color: var(--wa); }
.bot-avatar { width: 80px; height: 80px; border-radius: 18px; background: var(--p2); border: 1px solid var(--bd); display: grid; place-items: center; overflow: hidden; margin-bottom: 14px; }
.bot-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bot-avatar-icone { display: grid; place-items: center; color: var(--or); }
.bot-avatar-icone svg { width: 34px; height: 34px; }
html[data-theme] .cartao-bot .bot-nome { font: 800 17px 'Manrope', sans-serif; text-transform: none; letter-spacing: normal; max-width: 100%; padding: 0 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao-bot .bot-username { margin-top: 8px; padding: 4px 12px; border-radius: 999px; background: var(--p2); border: 1px solid var(--bd); max-width: calc(100% - 32px); }
.bot-numeros { width: 100%; display: grid; grid-template-columns: 1fr 1fr; margin-top: 18px; border-top: 1px solid var(--bd); }
.bot-numeros > div { padding: 12px 8px; display: flex; flex-direction: column; gap: 4px; }
.bot-numeros > div + div { border-left: 1px solid var(--bd); }
.bot-numeros-rotulo { font: 800 9.5px 'Manrope', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--m); }
.bot-numeros strong { font: 800 15px 'Manrope', sans-serif; }
.bot-fluxo-linha {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    border-top: 1px solid var(--bd);
    font: 700 12.5px 'Manrope', sans-serif;
}
.bot-fluxo-linha svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--m); }
.bot-fluxo-linha span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bot-fluxo-linha.vazio { color: var(--m); font-weight: 600; }
.cartao-bot .cartao-acoes { width: 100%; padding: 12px 16px 16px; margin-top: 0; }

.cartao-bot-novo {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border: 1px dashed var(--bd2);
    border-radius: 16px;
    color: var(--m);
}
.cartao-bot-novo:hover { border-color: var(--or); color: var(--t); }
.cartao-bot-novo-icone { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--p2); border: 1px solid var(--bd); }
.cartao-bot-novo-icone svg { width: 26px; height: 26px; }
.cartao-bot-novo strong { font: 700 13.5px 'Manrope', sans-serif; }
.botao.desativado { opacity: .5; cursor: not-allowed; }
.painel > .tabela-dados:first-child { margin-top: -20px; }

/* Texto de ajuda (<small>) do editor Guiado: bloco com respiro em cima e embaixo (antes ficava colado no campo e no rótulo seguinte). */
html[data-theme] small.texto-ajuda { display: block; margin: 6px 0 14px; line-height: 1.5; }
html[data-theme] small.texto-ajuda:empty { display: none; }
html[data-theme] .painel-cabecalho small.texto-ajuda { display: inline; margin: 0; }

/* Notas do padrão do sistema na aba Assinatura: mais respiro entre as linhas */
#as-antes-padrao, #as-exp-padrao { margin-top: 18px; line-height: 1.9; }
#as-antes-padrao strong, #as-exp-padrao strong { display: inline-block; margin-bottom: 6px; }

/* Página Vendas: filtros em duas linhas fixas (abas / formulário em grade), que quebram em ordem em tela estreita. */
.filtros-vendas { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.filtros-vendas-abas { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filtros-vendas-abas .abas-status { max-width: 100%; overflow-x: auto; }
.filtros-vendas-form {
    display: grid;
    grid-template-columns: minmax(150px, 210px) 150px 150px minmax(220px, 1fr) auto;
    gap: 10px;
    align-items: end;
}
.filtros-vendas .filtro-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; margin: 0; }
.filtros-vendas .filtro-campo > span { font: 700 10px 'Manrope', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--m); }
.filtros-vendas .filtro-campo select,
.filtros-vendas .filtro-campo input { width: 100%; min-width: 0; box-sizing: border-box; }
.filtros-vendas .filtro-acoes { display: flex; gap: 8px; align-items: center; }
@media (max-width: 1180px) {
    .filtros-vendas-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .filtros-vendas .filtro-busca { grid-column: 1 / -1; order: 5; }
    .filtros-vendas .filtro-acoes { grid-column: 1 / -1; order: 6; }
}
@media (max-width: 640px) {
    .filtros-vendas-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filtros-vendas .filtro-bot { grid-column: 1 / -1; }
    .filtros-vendas .filtro-acoes .botao { flex: 1; justify-content: center; }
}
/* Tabela de vendas: colunas não quebram linha; em tela estreita a tabela rola na horizontal em vez de espremer o texto. */
#tabela-vendas { min-width: 780px; }
#tabela-vendas th, #tabela-vendas td { white-space: nowrap; }
/* Modal de detalhes da venda: seções com título, campos com rótulo em cima e bastante respiro */
.venda-resumo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.venda-resumo-valor { font: 700 32px 'Barlow Condensed', 'Manrope', sans-serif; letter-spacing: .01em; }
.venda-detalhes { display: flex; flex-direction: column; }
.venda-secao { padding: 18px 0 4px; border-top: 1px solid var(--bd); margin-top: 16px; }
.venda-secao-titulo { margin: 0 0 14px; font: 700 11px 'Manrope', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--or); }
.venda-secao-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; padding-bottom: 14px; }
.venda-campo { min-width: 0; }
.venda-campo-rotulo { display: block; margin-bottom: 5px; font-size: 12px; color: var(--m); }
.venda-campo-valor { font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.venda-sub { margin-top: 6px; font-size: 12px; color: var(--m); }
.venda-modo { margin-left: 0; }
.venda-codigo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.venda-secao:has(.venda-codigo) .venda-secao-grade { grid-template-columns: 1fr; }
@media (max-width: 520px) { .venda-secao-grade { grid-template-columns: 1fr; gap: 14px; } }

/* Admin → Campanhas de Ranking → classificação: linhas com prêmio ganham uma marca à esquerda */
.tabela-classificacao tr.premiada td:first-child { border-left: 3px solid var(--or); }
/* No celular os cards ficam um por linha quando o valor é grande (faturamento da classificação, números dos testes de desempenho) */
@media (max-width: 640px) {
    .grade-kpi-empilha { grid-template-columns: 1fr; }
}

/* Admin → E-mails: a resposta do servidor SMTP fica em uma linha só (o texto inteiro está no title); falhas em vermelho */
.tabela-dados .col-resposta { font-size: 12px; color: var(--m); max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabela-dados .col-resposta.erro { color: var(--da); }

/* Login → "Recuperar senha": formulário em passos (e-mail → código + nova senha), avisos dentro do modal, sem alert() */
.rec-form { display: flex; flex-direction: column; gap: 14px; }
.rec-form [hidden] { display: none !important; }
.rec-form .rec-intro { margin: 0; font-size: 13px; line-height: 1.5; }
.rec-form small { font-size: 12px; }
.rec-form .aviso { margin: 0; }
.rec-form .campo-com-acao .botao { min-width: 128px; }
.rec-codigo { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 20px; font-weight: 700; letter-spacing: 8px; text-align: center; }
/* Botão desabilitado (enviando, esperando para reenviar): parece desabilitado em todo o painel */
.botao:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }

/* ===== Admin → Configurações: abas + duas colunas (formulário à esquerda, apoio à direita) =====
   Antes era uma coluna de 700 px com o resto da tela vazio. Sem JavaScript as seções aparecem todas, empilhadas. */
.config-abas { margin: 0 0 16px; align-self: flex-start; }
.config-abas .aba-contagem { margin-left: 6px; padding: 1px 7px; border-radius: 99px; background: var(--p3); color: var(--m); font-size: 11px; }
.config-abas .aba-status.ativa .aba-contagem { background: rgba(255,255,255,.25); color: #fff; }
.ponto-estado { display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%; background: var(--m); opacity: .45; vertical-align: middle; }
.ponto-estado.ok { background: var(--ok); opacity: 1; }
.aba-status.ativa .ponto-estado.ok { background: #fff; }
#config-abas.com-js .aba-painel { display: none; }
#config-abas.com-js .aba-painel.ativa { display: block; }
.aba-painel + .aba-painel { margin-top: 24px; }
#config-abas.com-js .aba-painel + .aba-painel { margin-top: 0; }

.grade-config { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 14px; align-items: start; }
.grade-config .painel { margin-bottom: 0; }
.coluna-lateral { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 1000px) { .grade-config { grid-template-columns: 1fr; } }

.bloco-form { display: flex; flex-direction: column; gap: 18px; }
.bloco-titulo { margin: 6px 0 -8px; font: 800 11px 'Manrope', sans-serif; letter-spacing: .9px; text-transform: uppercase; color: var(--m); }
.grade-smtp { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr); }
@media (max-width: 760px) { .grade-smtp { grid-template-columns: 1fr 1fr; } .grade-smtp .campo-largo { grid-column: 1 / -1; } }
.grade-config .campo small { color: var(--m); font-size: 12px; line-height: 1.5; }

/* arquivos (logo/favicon): miniatura + botão + nome, sem o <input type=file> cru */
.arquivo-oculto { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.arquivo-linha { display: flex; align-items: center; gap: 14px; position: relative; }
.arquivo-miniatura { width: 64px; height: 64px; flex-shrink: 0; border-radius: 16px; object-fit: cover; border: 1px solid var(--bd); background: var(--p2); }
.arquivo-miniatura-pequena { width: 36px; height: 36px; border-radius: 9px; }
.arquivo-acoes { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.campo .arquivo-acoes label.botao { cursor: pointer; text-transform: none; letter-spacing: 0; font: 700 12.5px 'Manrope', sans-serif; color: var(--t); }
.arquivo-nome { font-size: 12px; overflow-wrap: anywhere; }

/* cor de destaque: seletor + código + sugestões */
.cor-linha { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cor-hex { font-size: 13px; color: var(--m); }
.amostra-cor { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid var(--bd); cursor: pointer; }
.amostra-cor:hover { transform: scale(1.12); border-color: var(--t); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 8px 16px; border: 1px solid var(--bd); border-radius: 99px; background: var(--p2); color: var(--t); font: 700 12.5px 'Manrope', sans-serif; cursor: pointer; }
.chip:hover { border-color: var(--or); }
.chip.ativo { border-color: var(--or); color: var(--or); background: var(--p); }
.presets-smtp { margin-bottom: 18px; }

/* pré-visualização da identidade */
.previa { --previa-cor: var(--or); }
.previa-dica { margin: 0 0 14px; font-size: 12.5px; line-height: 1.5; }
.previa-rotulo { margin: 14px 0 8px; font: 800 10.5px 'Manrope', sans-serif; letter-spacing: .9px; text-transform: uppercase; color: var(--m); }
.previa-lateral { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px; border: 1px solid var(--bd); border-radius: 14px; background: var(--p2); }
.previa-lateral img { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; }
.previa-lateral strong { font: 800 15px 'Manrope', sans-serif; min-width: 0; overflow-wrap: anywhere; }
.previa-item-ativo { margin-left: auto; padding: 6px 12px; border-radius: 10px; background: var(--previa-cor); color: #fff; font: 700 12px 'Manrope', sans-serif; }
.previa-aba { display: flex; align-items: center; gap: 8px; max-width: 260px; padding: 9px 14px; border: 1px solid var(--bd); border-radius: 10px 10px 0 0; background: var(--p3); font-size: 12.5px; }
.previa-aba img { width: 16px; height: 16px; border-radius: 3px; object-fit: cover; flex-shrink: 0; }
.previa-aba span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.previa-botoes { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.previa-botao { padding: 9px 20px; border-radius: 10px; background: var(--previa-cor); color: #fff; font: 700 12.5px 'Manrope', sans-serif; }
.previa-link { color: var(--previa-cor); font: 700 13px 'Manrope', sans-serif; text-decoration: underline; }
.previa-selo { padding: 4px 11px; border-radius: 99px; border: 1px solid var(--previa-cor); color: var(--previa-cor); font: 700 11.5px 'Manrope', sans-serif; }

/* passo a passo, caixa de cópia, lista simples, estado da fila */
.passos { margin: 0; padding: 0; list-style: none; counter-reset: passo; display: flex; flex-direction: column; gap: 12px; }
.passos li { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; line-height: 1.55; }
.passos li::before { counter-increment: passo; content: counter(passo); flex-shrink: 0; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--p3); color: var(--t); font: 800 11px 'Manrope', sans-serif; }
.passos a { color: var(--or); }
.passos-continua { margin-top: 16px; counter-reset: passo 2; }
.caixa-copiar { display: flex; align-items: center; gap: 10px; margin: 12px 0 8px; padding: 10px 12px; border: 1px solid var(--bd); border-radius: 12px; background: var(--p2); }
.caixa-copiar .mono { flex: 1; min-width: 0; font-size: 12.5px; overflow-wrap: anywhere; }
.caixa-copiar .botao { flex-shrink: 0; }
.dica-copiar { display: block; margin-top: 8px; font-size: 12px; line-height: 1.5; }
.lista-simples { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; overflow-wrap: anywhere; }
.form-teste input[type="email"] { min-width: 0; }
.link-historico { margin-left: auto; font: 700 12px 'Manrope', sans-serif; text-decoration: none; }
.link-historico:hover { color: var(--or); }
.estados-fila { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.estados-fila > div { padding: 12px; border: 1px solid var(--bd); border-radius: 12px; background: var(--p2); text-align: center; }
.estados-fila strong { display: block; font: 800 20px 'Manrope', sans-serif; }
.estados-fila span { font-size: 11.5px; color: var(--m); }
.estados-fila .com-falha { border-color: var(--da); }
.estados-fila .com-falha strong { color: var(--da); }
.dica-fila { margin: 0 0 12px; font-size: 12.5px; line-height: 1.55; }