:root {
    --cor-primaria: #0f766e;
    --cor-primaria-escura: #0b5b54;
    --cor-whatsapp: #22c55e;
    --cor-whatsapp-escura: #16a34a;
    --cor-texto: #1f2937;
    --cor-texto-muted: #6b7280;
    --cor-fundo: #f8fafc;
    --cor-card: #ffffff;
    --cor-borda: #e5e7eb;
    --cor-erro: #dc2626;
    --cor-sucesso: #16a34a;
    --raio: 12px;
    --sombra: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06);

    /* Identidade Vitrimode (mesma paleta do site institucional) - usada só
       nos botões de ação, no menu lateral e no nome da marca. O resto do
       painel continua no verde-azulado de sempre, que aqui já carrega
       outro significado (sucesso/positivo: acesso criado, dia aberto,
       tema em uso) e trocar geraria uma mistura de cor sem sentido. */
    --vm-roxo: #9b3df0;
    --vm-azul: #3d5cff;
    --vm-ciano: #22d3ee;
    --vm-gradiente: linear-gradient(90deg, var(--vm-roxo) 0%, var(--vm-azul) 55%, var(--vm-ciano) 100%);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--cor-fundo);
    color: var(--cor-texto);
    line-height: 1.5;
}

img { max-width: 100%; display: block; }
a { color: var(--cor-primaria); text-decoration: none; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; }
.muted { color: var(--cor-texto-muted); }

/* ---------- Botões e formulários (compartilhado) ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .65rem 1.25rem; border-radius: var(--raio); border: none;
    font-size: .95rem; font-weight: 600; cursor: pointer; text-decoration: none;
}
.btn-primary { background: var(--vm-gradiente); color: #fff; }
.btn-primary:hover { filter: brightness(0.92); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.btn-ghost { background: transparent; border: 1px solid var(--cor-borda); color: var(--cor-texto); }
.btn-danger { color: var(--cor-erro); border-color: #fecaca; }
.btn-block { width: 100%; }

.form-card, .item-card, .stat-box, .table-wrap {
    background: var(--cor-card); border: 1px solid var(--cor-borda);
    border-radius: var(--raio); box-shadow: var(--sombra);
}
.form-card { padding: 1.25rem; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) {
    .form-grid { grid-template-columns: 1fr 1fr; }
    .form-grid .span-2 { grid-column: span 2; }
}
label { display: flex; flex-direction: column; gap: .35rem; font-size: .9rem; font-weight: 600; }
input, select, textarea {
    padding: .6rem .75rem; border: 1px solid var(--cor-borda); border-radius: 8px;
    font-size: 1rem; font-family: inherit; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--cor-primaria); outline-offset: 1px; }

.flash-wrap { padding: .75rem 1rem 0; }
.flash { padding: .75rem 1rem; border-radius: 8px; margin-bottom: .5rem; font-size: .9rem; }
.flash-success { background: #dcfce7; color: #166534; }
.flash-error { background: #fee2e2; color: #991b1b; }
.flash-info { background: #dbeafe; color: #1e40af; }

/* ---------- Tela de login ---------- */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; }
.login-box {
    background: var(--cor-card); border: 1px solid var(--cor-borda); border-radius: var(--raio);
    box-shadow: var(--sombra); padding: 2rem; max-width: 360px; width: 100%; text-align: center;
}
.login-box form { display: flex; flex-direction: column; gap: 1rem; text-align: left; margin-top: 1.5rem; }
.login-box h1 { font-size: 1.6rem; }
.login-box h1 .vm-mode {
    background: var(--vm-gradiente); -webkit-background-clip: text; background-clip: text;
    color: transparent;
}

/* ---------- Shell do app (painel) ---------- */
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar {
    width: 220px; background: linear-gradient(180deg, #170a29 0%, #0b1120 55%);
    color: #cbd5e1; display: flex; flex-direction: column;
    padding: 1.25rem 1rem; flex-shrink: 0;
}
.app-brand { color: #fff; font-weight: 700; font-size: 1.1rem; margin-bottom: 1.5rem; }
.app-brand .vm-mode {
    background: var(--vm-gradiente); -webkit-background-clip: text; background-clip: text;
    color: transparent;
}
.app-sidebar nav { display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.app-sidebar a { color: #cbd5e1; padding: .6rem .75rem; border-radius: 8px; font-size: .9rem; }
.app-sidebar a:hover { background: #1e293b; }
.app-sidebar a.active { background: var(--vm-gradiente); color: #fff; }
.app-logout { color: #f87171 !important; margin-top: 1rem; }
.app-main { flex: 1; min-width: 0; }
.app-topbar { padding: 1.5rem 1.5rem 0; }
.app-content { padding: 1.5rem; }

@media (max-width: 720px) {
    .app-shell { flex-direction: column; }
    .app-sidebar {
        width: 100%; flex-direction: row; align-items: center;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        padding: .6rem .75rem; gap: .25rem;
    }
    .app-sidebar nav { flex-direction: row; flex-wrap: nowrap; gap: .25rem; }
    /* no celular o menu vira uma tira rolável: cada item numa linha só */
    .app-sidebar a { white-space: nowrap; padding: .5rem .7rem; font-size: .85rem; }
    .app-brand { margin: 0 .75rem 0 0; font-size: .95rem; white-space: nowrap; }
    .app-logout { margin: 0 0 0 .5rem; }
    /* separadores de grupo só fazem sentido no menu vertical.
       Precisa do .app-sidebar na frente: a regra que define .menu-titulo vem
       DEPOIS desta no arquivo e, com a mesma especificidade, vencia por ordem —
       era por isso que "MEU SITE" continuava ocupando espaço na tira do celular. */
    .app-sidebar .menu-titulo { display: none; }
    /* o item aberto precisa se distinguir na tira, senão o cliente não sabe
       onde está */
    .app-sidebar a.active { position: relative; }
}

/* ---------- Cards de item (produtos) ---------- */
.cards-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1rem; }
@media (min-width: 560px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .cards-grid { grid-template-columns: repeat(3, 1fr); } }
.item-card { overflow: hidden; }
.item-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.item-card-body { padding: 1rem; }
.item-card-actions { display: flex; gap: .5rem; margin-top: .75rem; }
.tag {
    display: inline-block; background: #ecfdf5; color: var(--cor-primaria-escura);
    font-size: .75rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px; margin-bottom: .35rem;
}
/* Mesma etiqueta, cor de pendência. Âmbar é a cor que o painel já usa para
   "ainda pode virar" (atrasado, sem contrato), e não vermelho: nada está
   quebrado, tem coisa esperando ser feita. */
.tag.tag-atencao { background: #fef3c7; color: #92400e; }
.preco { font-weight: 700; color: var(--cor-primaria-escura); margin: .25rem 0 0; }
.plano-card.plano-atual { border-color: var(--cor-primaria); border-width: 2px; }

.galeria-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 640px) { .galeria-grid { grid-template-columns: repeat(4, 1fr); } }
.galeria-item img { aspect-ratio: 1/1; object-fit: cover; border-radius: 8px; }
.galeria-item { display: flex; flex-direction: column; gap: .4rem; }

/* ---------- Tabelas (painel plataforma) ---------- */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.data-table th, .data-table td { text-align: left; padding: .75rem 1rem; border-bottom: 1px solid var(--cor-borda); }
.status-badge { padding: .2rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.status-demo { background: #fef3c7; color: #92400e; }
.status-ativo { background: #dcfce7; color: #166534; }
.status-suspenso { background: #fee2e2; color: #991b1b; }
/* Situação de pagamento (pagamentos/acesso.py) e situação de cobrança.
   Verde = dinheiro entrou, amarelo = ainda pode virar, vermelho = fora do ar. */
.status-em_dia, .status-recebida, .status-confirmada { background: #dcfce7; color: #166534; }
.status-atrasado, .status-pendente, .status-liberado_manual, .status-sem_contrato { background: #fef3c7; color: #92400e; }
.status-inadimplente, .status-vencida, .status-estornada { background: #fee2e2; color: #991b1b; }
.status-cancelada { background: #e5e7eb; color: #4b5563; }
.status-teste { background: #dbeafe; color: #1e40af; }
.status-teste_encerrado { background: #fee2e2; color: #991b1b; }
/* a frase de "o que fazer agora" na tela do cliente: precisa saltar do resto,
   porque o resto é o que PODE ser feito e ela é o que PRECISA */
.proximo-passo { background: #ecfdf5; border-left: 4px solid #0f766e; padding: .75rem 1rem;
                 border-radius: 6px; margin: 0 0 1rem; font-weight: 600; }
.linha-atencao td { background: #fff7ed; }

/* ---------- Estatísticas (meus resultados) ---------- */
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1rem; }
@media (min-width: 720px) { .stats-grid { grid-template-columns: repeat(5, 1fr); } }
.stat-box { padding: 1.25rem; display: flex; flex-direction: column; gap: .25rem; }
.stat-box.highlight { background: var(--cor-primaria); color: #fff; }
.stat-number { font-size: 1.6rem; font-weight: 800; }
.stat-label { font-size: .8rem; color: var(--cor-texto-muted); }
.stat-box.highlight .stat-label { color: #d1fae5; }

/* ---------- Editor de blocos e seções (painel do cliente) ---------- */
.bloco { margin-bottom: 1.5rem; }
.bloco > h3 { margin-bottom: .25rem; }

.linha-bloco {
    display: grid; grid-template-columns: 1fr 1fr auto; gap: .75rem; align-items: end;
    padding: 1rem 0; border-bottom: 1px solid var(--cor-borda);
}
.linha-bloco.vertical { grid-template-columns: 1fr; align-items: stretch; }
.linha-bloco.nova { background: #fbfcfd; border-bottom: 0; }
/* o título numerado separa um item do outro numa pilha de campos iguais */
.linha-bloco-titulo {
    margin: 0 0 .6rem; font-weight: 700; font-size: .82rem;
    letter-spacing: .06em; text-transform: uppercase; color: #6b7280;
}
.linha-bloco-titulo.nova { color: #0f766e; }
.linha-bloco .dupla { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.linha-bloco .tripla { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 640px) { .linha-bloco .tripla { grid-template-columns: 1.2fr 1fr .5fr; } }
.linha-bloco .remover {
    flex-direction: row; align-items: center; gap: .4rem; font-weight: 500;
    font-size: .82rem; color: var(--cor-texto-muted); white-space: nowrap;
}
.linha-bloco .remover input { width: auto; }
.bloco form > .btn { margin-top: 1rem; }

.secoes-lista { display: grid; grid-template-columns: 1fr; gap: .5rem; margin-top: 1rem; }
@media (min-width: 720px) { .secoes-lista { grid-template-columns: 1fr 1fr; } }
.secao-item {
    display: flex; flex-direction: row; align-items: flex-start; gap: .65rem;
    padding: .75rem .9rem; border: 1px solid var(--cor-borda); border-radius: 8px; font-weight: 500;
}
.secao-item input { width: auto; margin-top: .2rem; flex: none; }
.secao-item span { display: flex; flex-direction: column; gap: .1rem; }
.secao-item small { font-weight: 400; font-size: .8rem; }
.secao-item:has(input:checked) { border-color: var(--cor-primaria); background: #f0fdfa; }

.ranking-list { list-style: none; padding: 0; margin: .75rem 0 0; }
.ranking-list li {
    display: flex; justify-content: space-between; padding: .6rem 0; border-bottom: 1px solid var(--cor-borda);
}

/* ==========================================================================
   Página pública (vitrine) — a superfície de venda do produto.
   Usa --marca / --marca-escura, definidas inline por empresa (cor_primaria/
   cor_secundaria), então o mesmo CSS se adapta à identidade de cada cliente
   sem precisar de um template novo por negócio.
   ========================================================================== */
.vitrine {
    --marca: var(--cor-primaria);
    --marca-escura: var(--cor-primaria-escura);
    background: #fff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    position: relative; overflow-x: hidden;
}
.vitrine h1, .vitrine h2, .vitrine h3 { font-family: 'Fraunces', Georgia, serif; }
.preview-aviso { background: #111827; color: #fff; text-align: center; padding: .5rem; font-size: .8rem; }

.v-eyebrow {
    text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; font-weight: 700;
    color: var(--marca); margin: 0 0 .5rem;
}
.v-eyebrow-centro { text-align: center; }

/* ---------- Navegação fixa ---------- */
.v-nav {
    position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: .9rem 1.5rem; background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--cor-borda);
}
.v-nav-marca { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-nav-links { display: none; gap: 1.5rem; font-size: .88rem; font-weight: 600; }
.v-nav-links a:hover { color: var(--marca); }
.v-nav-cta {
    background: var(--marca); color: #fff; padding: .5rem 1.1rem; border-radius: 999px;
    font-weight: 700; font-size: .85rem; white-space: nowrap;
}
@media (min-width: 860px) { .v-nav-links { display: flex; } }

/* ---------- Hero em tela cheia ---------- */
.v-hero {
    position: relative; min-height: 62vh; display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 3rem 1.5rem; color: #fff; overflow: hidden;
    background-color: var(--marca); background-size: cover; background-position: center;
}
.v-hero-overlay {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 15% 10%, rgba(255,255,255,.12), transparent 45%),
        linear-gradient(160deg, color-mix(in srgb, var(--marca) 92%, black 8%), color-mix(in srgb, var(--marca-escura) 94%, black 20%));
}
.v-hero[style*="background-image"] .v-hero-overlay {
    background: linear-gradient(180deg, rgba(10,10,10,.35), rgba(10,10,10,.72));
}
.v-hero-conteudo { position: relative; max-width: 40rem; }
.vitrine-logo {
    width: 84px; height: 84px; object-fit: cover; border-radius: 50%; margin: 0 auto 1.25rem;
    border: 3px solid rgba(255,255,255,.85); box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.v-hero h1 { font-size: 2.1rem; font-weight: 600; margin: 0 0 1.25rem; letter-spacing: -.01em; line-height: 1.2; }
.v-hero-botoes { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

.btn-outline {
    display: inline-flex; align-items: center; padding: .85rem 1.6rem; border-radius: 999px;
    border: 1.5px solid rgba(255,255,255,.7); color: #fff; font-weight: 600; font-size: .95rem;
    transition: background .15s ease;
}
.btn-outline:hover { background: rgba(255,255,255,.12); }

.btn-whatsapp {
    display: inline-flex; align-items: center; gap: .6rem; background: var(--cor-whatsapp); color: #fff;
    padding: .9rem 1.75rem; border-radius: 999px; font-weight: 700; font-size: 1rem;
    box-shadow: 0 10px 24px rgba(0,0,0,.18); transition: transform .15s ease, box-shadow .15s ease;
}
.btn-whatsapp:hover { background: var(--cor-whatsapp-escura); transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,0,0,.22); }

.btn-whatsapp-flutuante {
    position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 40; width: 58px; height: 58px; border-radius: 50%;
    background: var(--cor-whatsapp); color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; box-shadow: 0 10px 24px rgba(0,0,0,.25); animation: aparecer .3s ease both;
}
.btn-whatsapp-flutuante:hover { background: var(--cor-whatsapp-escura); }
@keyframes aparecer { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }

/* Conteúdo de cada seção fica centralizado num miolo confortável de leitura;
   nav e hero (acima) continuam ocupando a largura toda da tela. */
.vitrine-info, .vitrine-produtos, .v-equipe, .v-sobre, .v-diferenciais,
.v-depoimentos, .v-como-funciona, .vitrine-galeria, .v-localizacao,
.vitrine-cta, .vitrine-footer, .v-footer-grid {
    max-width: 1100px; margin-inline: auto;
}

.vitrine-info { padding: 1.5rem 1.5rem 1.75rem; }
.vitrine-info p { margin: .4rem 0; color: var(--cor-texto-muted); font-size: .95rem; }
.vitrine-info-links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.vitrine-info-links a {
    display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .88rem;
    background: #f8fafc; border: 1px solid var(--cor-borda); border-radius: 999px; padding: .5rem 1rem;
    color: var(--cor-texto); transition: border-color .15s ease, background .15s ease;
}
.vitrine-info-links a:hover { border-color: var(--marca); background: #fff; }

.vitrine-produtos, .vitrine-galeria { padding: 2.5rem 1.5rem; }
.vitrine-produtos h2, .vitrine-galeria h2 {
    text-align: center; font-size: 1.4rem; margin-bottom: 1.75rem; position: relative;
}
.vitrine-produtos h2::after, .vitrine-galeria h2::after {
    content: ""; display: block; width: 48px; height: 3px; background: var(--marca);
    margin: .6rem auto 0; border-radius: 999px;
}
.categoria-titulo {
    margin: 2rem 0 1rem; color: var(--marca-escura); font-size: 1.1rem;
    padding-left: .75rem; border-left: 3px solid var(--marca);
}
.vitrine .item-card { transition: transform .18s ease, box-shadow .18s ease; }
.vitrine .item-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15,23,42,.12); }
.vitrine .preco { color: var(--marca-escura); }

.vitrine-galeria { padding: 2.5rem 1.5rem; }
.galeria-grid img { border-radius: 10px; }

/* ---------- Equipe ---------- */
.v-equipe { padding: 3rem 1.5rem; }
.v-equipe h2 { text-align: center; margin-bottom: 1.75rem; }
.v-pessoa-card {
    text-align: center; border: 1px solid var(--cor-borda); border-radius: var(--raio);
    overflow: hidden; box-shadow: var(--sombra); transition: transform .18s ease, box-shadow .18s ease;
}
.v-pessoa-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15,23,42,.12); }
.v-pessoa-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.v-cargo { color: var(--marca-escura); font-weight: 600; font-size: .85rem; margin: -.25rem 0 .5rem; }

/* ---------- Sobre / estatísticas ---------- */
.v-sobre {
    text-align: center; padding: 3rem 1.5rem; background: #f8fafc; border-radius: 24px; margin-block: 2rem;
}
.v-sobre h2 { max-width: 32rem; margin-inline: auto; }
.v-sobre-texto { max-width: 38rem; margin: 1rem auto 0; color: var(--cor-texto-muted); font-size: 1.02rem; }
.v-stats-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem; margin-top: 2rem; }
.v-stat { display: flex; flex-direction: column; }
.v-stat span { font-family: 'Fraunces', Georgia, serif; font-size: 2.1rem; font-weight: 700; color: var(--marca-escura); }
.v-stat small { color: var(--cor-texto-muted); font-size: .85rem; }

/* ---------- Diferenciais ---------- */
.v-diferenciais { padding: 3rem 1.5rem; }
.v-diferenciais h2 { text-align: center; margin-bottom: 1.75rem; }
.v-diferencial-card {
    border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 1.5rem;
    border-top: 3px solid var(--marca);
}
.v-diferencial-card h3 { font-size: 1.05rem; margin-bottom: .4rem; }

/* ---------- Depoimentos ---------- */
.v-depoimentos { padding: 3rem 1.5rem; }
.v-depoimentos h2 { text-align: center; margin-bottom: 1.75rem; max-width: 32rem; margin-inline: auto; margin-bottom: 1.75rem; }
.v-depoimento-card {
    background: #f8fafc; border-radius: var(--raio); padding: 1.5rem; display: flex; flex-direction: column; gap: .6rem;
}
.v-estrelas { color: #f59e0b; letter-spacing: .1em; }
.v-depoimento-autor { font-weight: 700; margin-top: auto; }

/* ---------- Como funciona ---------- */
.v-como-funciona { text-align: center; padding: 3rem 1.5rem; }
.v-como-funciona h2 { max-width: 30rem; margin: 0 auto 2rem; }
.v-passos { display: grid; grid-template-columns: 1fr; gap: 1.75rem; text-align: left; }
@media (min-width: 640px) { .v-passos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .v-passos { grid-template-columns: repeat(4, 1fr); } }
.v-passo-numero {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
    border-radius: 50%; background: var(--marca); color: #fff; font-weight: 700; margin-bottom: .75rem;
}
.v-passo h3 { font-size: 1rem; margin-bottom: .3rem; }

/* ---------- Localização ---------- */
.v-localizacao { text-align: center; padding: 3rem 1.5rem; }
.v-localizacao p { color: var(--cor-texto-muted); margin: .5rem 0 1.5rem; }
.v-localizacao .btn-outline { border-color: var(--marca); color: var(--marca); }
.v-localizacao .btn-outline:hover { background: var(--marca); color: #fff; }

.vitrine-cta {
    text-align: center; padding: 3rem 1.5rem; color: #fff; border-radius: 24px; margin-block: 1rem 0;
    background: linear-gradient(155deg, var(--marca), var(--marca-escura));
}
.vitrine-cta p { font-weight: 600; margin-bottom: 1.25rem; font-size: 1.1rem; max-width: 26rem; margin-inline: auto; }

/* ---------- Rodapé ---------- */
.vitrine-footer { padding: 3rem 1.5rem 1.5rem; font-size: .88rem; color: var(--cor-texto-muted); }
.v-footer-grid {
    display: grid; grid-template-columns: 1fr; gap: 1.75rem; padding: 0; border-top: 1px solid var(--cor-borda);
    padding-top: 2rem;
}
@media (min-width: 720px) { .v-footer-grid { grid-template-columns: repeat(4, 1fr); } }
.v-footer-grid strong { display: block; color: var(--cor-texto); margin-bottom: .5rem; font-size: .9rem; }
.v-footer-grid a, .v-footer-grid p { display: block; margin: .3rem 0; }
.v-footer-grid a:hover { color: var(--marca); }
.v-footer-copy { text-align: center; margin-top: 2rem; font-size: .78rem; }

/* ---------- Ações por cliente (painel da plataforma) ---------- */
.acoes-cliente { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.acoes-cliente form { margin: 0; }

/* ---------- Faixa "editando como cliente" ---------- */
.faixa-editando {
    background: #fef3c7; color: #92400e; padding: .7rem 1.25rem; font-size: .88rem;
    display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; justify-content: center;
    border-bottom: 1px solid #fcd34d;
}
.faixa-editando a { color: #92400e; font-weight: 700; text-decoration: underline; }

/* Convite para criar a senha própria. Azul e não amarelo de propósito: amarelo
   já é a faixa de impersonação e a de conteúdo ilustrativo, que pedem ação
   corretiva. Esta não é um problema, é um convite. */
.faixa-convite {
    background: #eff6ff; color: #1e3a8a; padding: .7rem 1.25rem; font-size: .88rem;
    display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; justify-content: center;
    border-bottom: 1px solid #bfdbfe;
}
.faixa-convite a { color: #1e3a8a; font-weight: 700; text-decoration: underline; }

/* ---------- Grupos no menu lateral ---------- */
.menu-titulo {
    display: block; margin: 1rem 0 .25rem; padding: 0 .75rem;
    font-size: .7rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: #64748b;
}

/* ---------- "isso aparece aqui na sua página" ---------- */
.onde-aparece {
    background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 8px;
    padding: .75rem 1rem; font-size: .88rem; color: #065f46; margin-bottom: 1.25rem;
}
.onde-aparece a { font-weight: 700; text-decoration: underline; white-space: nowrap; }

/* ---------- Fotos (painel do cliente) ---------- */
.fotos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1rem; }
@media (min-width: 640px) { .fotos-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .fotos-grid { grid-template-columns: repeat(4, 1fr); } }
.foto-item { margin: 0; border: 1px solid var(--cor-borda); border-radius: var(--raio); overflow: hidden; background: #fff; }
.foto-item img { width: 100%; aspect-ratio: 1/1; object-fit: cover; background: #f1f5f9; }
.foto-campos { display: flex; flex-direction: column; gap: .5rem; padding: .6rem .65rem; }
.foto-campos label { font-size: .78rem; gap: .25rem; }
.foto-campos input[type="text"] { font-size: .85rem; padding: .4rem .5rem; }
.foto-campos .foto-trocar {
    font-size: .78rem; font-weight: 500; color: var(--cor-texto-muted); gap: .25rem;
}
.foto-campos .foto-trocar input[type="file"] {
    font-size: .78rem; padding: .35rem; border: 1px dashed var(--cor-borda);
    border-radius: var(--raio); background: #fff;
}
.foto-campos .remover {
    flex-direction: row; align-items: center; gap: .35rem;
    font-weight: 500; color: #b91c1c;
}
.foto-campos .remover input { width: auto; }

/* item da vitrine que está oculto na página */
.item-inativo { opacity: .55; }
.item-inativo::before {
    content: "não aparece na página"; display: inline-block; margin-bottom: .5rem;
    background: #fef3c7; color: #92400e; font-size: .72rem; font-weight: 700;
    padding: .15rem .5rem; border-radius: 999px;
}

/* ---------- Aviso sobre dado que envelhece ---------- */
.aviso-envelhece {
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
    padding: .7rem .9rem; font-size: .84rem; color: #92400e; margin: .75rem 0 0;
}

/* ---------- Acesso recém-criado (a senha aparece uma vez só) ---------- */
.acesso-novo {
    background: #f0fdf4; border: 1px solid #86efac; border-radius: var(--raio);
    padding: 1rem 1.1rem;
}
.acesso-aviso { margin: 0 0 .85rem; font-size: .85rem; font-weight: 700; color: #166534; }
.acesso-dados { display: grid; grid-template-columns: 1fr; gap: .6rem; }
@media (min-width: 560px) { .acesso-dados { grid-template-columns: 1fr 1fr; } }
.acesso-dados div {
    background: #fff; border: 1px solid var(--cor-borda); border-radius: 8px; padding: .55rem .75rem;
}
.acesso-dados span {
    display: block; font-size: .7rem; text-transform: uppercase;
    letter-spacing: .07em; color: var(--cor-texto-muted); margin-bottom: .15rem;
}
.acesso-dados strong { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.05rem; }
#mensagem-acesso { font-family: inherit; font-size: .88rem; background: #fff; }

/* ---------- Marcação com explicação (painel da plataforma) ---------- */
.marcacao {
    flex-direction: row; align-items: flex-start; gap: .6rem;
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: .8rem .9rem;
}
.marcacao input { width: auto; margin-top: .2rem; flex: none; }
.marcacao span { display: flex; flex-direction: column; gap: .2rem; }
.marcacao small { font-weight: 400; line-height: 1.4; }

/* ---------- Horários por dia (painel do cliente) ---------- */
.dias-semana { display: grid; gap: .5rem; margin-top: 1rem; }
.dia {
    display: grid; grid-template-columns: 1fr; gap: .6rem;
    border: 1px solid var(--cor-borda); border-radius: 8px; padding: .75rem .9rem;
    background: #fafafa;
}
@media (min-width: 560px) { .dia { grid-template-columns: 1fr auto; align-items: center; } }
.dia-aberto { background: #f0fdf4; border-color: #bbf7d0; }
.dia-nome { flex-direction: row; align-items: center; gap: .55rem; font-weight: 600; }
.dia-nome input { width: auto; flex: none; }
.dia-horas { display: flex; gap: .6rem; align-items: flex-end; }
.dia-horas label { font-size: .75rem; font-weight: 500; color: var(--cor-texto-muted); gap: .2rem; }
.dia-horas input { padding: .35rem .5rem; font-size: .9rem; width: auto; }
/* dia fechado: os campos de hora ficam apagados, mas continuam editáveis */
.dia:not(.dia-aberto) .dia-horas { opacity: .45; }

/* ---------- Escolha de tema por cliente (painel da plataforma) ---------- */
.temas-lista { display: grid; gap: .5rem; margin-top: 1rem; }
.tema-opcao {
    display: grid; grid-template-columns: 1fr; gap: .6rem;
    border: 1px solid var(--cor-borda); border-radius: 8px; padding: .8rem .9rem;
}
@media (min-width: 620px) { .tema-opcao { grid-template-columns: 1fr auto; align-items: center; } }
.tema-atual { border-color: var(--cor-primaria); background: #f0fdfa; }
.tema-info { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.tema-acoes { display: flex; align-items: center; gap: 1rem; }
.tema-acoes label {
    flex-direction: row; align-items: center; gap: .35rem;
    font-size: .85rem; font-weight: 600; white-space: nowrap;
}
.tema-acoes input { width: auto; flex: none; }
.tema-acoes .btn { padding: .35rem .8rem; font-size: .82rem; }

/* ---------- Escolha de modelo (painel do cliente) ---------- */
.modelos-lista { display: grid; gap: .75rem; margin-top: 1rem; }
.modelo {
    display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem;
    align-items: start; cursor: pointer; font-weight: 400;
    background: var(--cor-card); border: 1px solid var(--cor-borda);
    border-radius: var(--raio); padding: 1rem 1.1rem;
}
@media (min-width: 620px) { .modelo { grid-template-columns: auto 1fr auto; align-items: center; } }
.modelo-atual { border-color: var(--cor-primaria); border-width: 2px; background: #f0fdfa; }
.modelo > input { width: auto; flex: none; margin-top: .25rem; }
.modelo-texto { display: flex; flex-direction: column; gap: .2rem; }
.modelo-texto strong { font-size: 1.02rem; }
.modelo-titulo { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.modelo-texto small { line-height: 1.4; }
.modelo .btn { white-space: nowrap; }

/* ---------- Campo de foto (link ou arquivo, um campo só) ---------- */
.campo-foto { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.campo-foto-label { font-weight: 600; font-size: .9rem; }
.campo-foto-previa {
    width: 100%; max-width: 260px; aspect-ratio: 16 / 10; object-fit: cover;
    border-radius: var(--raio); border: 1px solid var(--cor-borda); background: #f3f4f6;
}
.campo-foto input[type="file"] {
    width: 100%; font-size: .9rem; padding: .55rem;
    border: 1px dashed var(--cor-borda); border-radius: var(--raio); background: #fff;
}
.campo-foto-remover {
    flex-direction: row; align-items: center; gap: .35rem;
    font-size: .82rem; font-weight: 500; color: #b91c1c; width: fit-content;
}
.campo-foto-remover input { width: auto; }
.campo-foto-link summary {
    cursor: pointer; font-size: .85rem; color: var(--cor-texto-muted);
    padding: .2rem 0;
}
.campo-foto-link input { margin-top: .4rem; }

/* ---------- Dica de campo (o "?" que explica ao passar o mouse) ---------- */
.dica {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 1.05rem; height: 1.05rem; margin-left: .35rem; padding: 0;
    border: 1px solid var(--cor-borda); border-radius: 50%;
    background: #fff; color: var(--cor-texto-muted);
    font-size: .7rem; font-weight: 700; line-height: 1; cursor: help;
    vertical-align: middle;
}
.dica:hover, .dica:focus { border-color: var(--cor-primaria); color: var(--cor-primaria); outline: none; }
.dica-balao {
    display: none; position: absolute; z-index: 20; bottom: calc(100% + .4rem); left: -.5rem;
    width: max-content; max-width: min(300px, 70vw);
    background: #111827; color: #f9fafb; text-align: left;
    font-size: .82rem; font-weight: 400; line-height: 1.45;
    padding: .55rem .7rem; border-radius: var(--raio);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18); white-space: normal;
    /* Abre para CIMA do "?" (não para baixo): para baixo, o balão caía em
       cima do campo logo abaixo do rótulo, tampando o que a pessoa estava
       lendo ou escrevendo ali. Abrindo para cima, ele cobre o espaço vazio
       acima do rótulo em vez do campo. */
    /* Além da posição, o mouse "dentro" do balão (que é filho do próprio
       botão) mantinha o :hover ligado mesmo fora do "?", e um clique ali
       batia no balão em vez do que está embaixo. Com o mouse/clique
       atravessando o balão direto para trás dele, ele só fica visível
       enquanto o cursor está de fato sobre o "?". */
    pointer-events: none;
}
.dica:hover .dica-balao, .dica:focus .dica-balao { display: block; }
/* perto da borda direita o balão sairia da tela */
.span-2 .dica-balao, .campo-foto .dica-balao { left: auto; right: auto; }
/* o rótulo e o "?" precisam ficar na mesma linha: <label> empilha os filhos */
.rotulo { display: block; }

/* ---------- Aviso de conteúdo ilustrativo (painel do cliente) ---------- */
.aviso-exemplo {
    background: #fffbeb; border: 1px solid #fcd34d; border-left-width: 4px;
    border-radius: var(--raio); padding: 1rem 1.15rem; margin-bottom: 1.25rem;
}
.aviso-exemplo strong { display: block; margin-bottom: .35rem; }
.aviso-exemplo p { margin: 0 0 .75rem; font-size: .9rem; line-height: 1.5; color: #713f12; }

/* ---------- Ponto de foco da foto de capa ---------- */
/* A foto inteira é o alvo do clique; as duas prévias mostram o corte real,
   porque o topo é uma faixa larga no computador e quase um retrato no celular
   - é justamente essa diferença que faz um recorte fixo não servir. */
.foco { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.foco-alvo {
    position: relative; width: 100%; max-width: 520px; line-height: 0;
    border: 1px solid var(--cor-borda); border-radius: var(--raio);
    overflow: hidden; background: #f3f4f6;
}
.foco-alvo img { width: 100%; height: auto; display: block; user-select: none; }
.foco-com-js .foco-alvo { cursor: crosshair; }
.foco-marca {
    position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px;
    border: 2px solid #fff; border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .45), inset 0 0 0 2px rgba(0, 0, 0, .35);
    pointer-events: none;   /* o clique é do alvo, nunca da marca */
}
.foco-previas { display: flex; gap: .9rem; flex-wrap: wrap; align-items: flex-start; }
.foco-previas figure { margin: 0; }
.foco-previas figcaption {
    margin-top: .25rem; text-align: center;
    font-size: .78rem; color: var(--cor-texto-muted);
}
.foco-previa {
    max-width: 100%; overflow: hidden; background: #f3f4f6;
    border: 1px solid var(--cor-borda); border-radius: var(--raio);
}
.foco-previa img { width: 100%; height: 100%; display: block; object-fit: cover; }
.foco-previa-desktop { width: 300px; aspect-ratio: 21 / 9; }
.foco-previa-celular { width: 104px; aspect-ratio: 5 / 8; }
.foco-barras summary {
    cursor: pointer; font-size: .85rem; color: var(--cor-texto-muted); padding: .2rem 0;
}
.foco-barras label { display: block; font-size: .82rem; margin-top: .45rem; }

/* ---------------------------------------------------------------- Importar em lote e busca de clientes */
.tag.tag-novo { background: #dcfce7; color: #166534; }
.tag.tag-problema { background: #fee2e2; color: #991b1b; }
.lote-numeros { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0 0 1rem; font-size: .95rem; }
.lote-numeros strong { font-size: 1.25rem; margin-right: .2rem; }
.lote-titulo { font-size: 1.05rem; margin: 1.75rem 0 .75rem; }
.lote-acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.lote-tabela td:first-child { width: 2.5rem; }
.lote-tabela input[type="checkbox"] { width: 1.15rem; height: 1.15rem; padding: 0; margin: 0; }
.busca-clientes { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1rem; }
.busca-clientes input { flex: 1 1 18rem; max-width: 32rem; }