:root {
    /* Cor do sistema: definida ao criar o projeto e trocada pela paleta de Configuracoes → Empresa (js/tema.js). */
    --app-primaria: #00B894;
    --app-primaria-escura: #008A6F;
    --app-rosa: #E84393;
    --app-verde: #00B894;
    --app-amarelo: #FDCB6E;
    --app-vermelho: #D63031;
    --app-azul: #0984E3;
    --app-fundo: #F4F5FB;
    --app-texto: #2D3436;
    --app-cinza: #7a8290;
    --app-borda: #e6e8f0;
    --topbar-h: 60px;
    --sidebar-w: 250px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--app-fundo);
    color: var(--app-texto);
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
}

.btn-primary {
    --bs-btn-bg: var(--app-primaria);
    --bs-btn-border-color: var(--app-primaria);
    --bs-btn-hover-bg: var(--app-primaria-escura);
    --bs-btn-hover-border-color: var(--app-primaria-escura);
    --bs-btn-active-bg: var(--app-primaria-escura);
    --bs-btn-disabled-bg: var(--app-primaria);
    --bs-btn-disabled-border-color: var(--app-primaria);
}
.btn-outline-primary {
    --bs-btn-color: var(--app-primaria);
    --bs-btn-border-color: var(--app-primaria);
    --bs-btn-hover-bg: var(--app-primaria);
    --bs-btn-hover-border-color: var(--app-primaria);
    --bs-btn-active-bg: var(--app-primaria);
}
.text-primary { color: var(--app-primaria) !important; }
.form-control:focus, .form-select:focus {
    border-color: var(--app-primaria);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--app-primaria) 15%, transparent);
}
a { color: var(--app-primaria); }
.form-check-input:checked { background-color: var(--app-primaria); border-color: var(--app-primaria); }
.form-check-input:focus { border-color: var(--app-primaria); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--app-primaria) 15%, transparent); }
.nav-tabs .nav-link:not(.active), .nav-pills .nav-link:not(.active) { color: var(--app-primaria); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--app-primaria); }
.pagination { --bs-pagination-color: var(--app-primaria); --bs-pagination-active-bg: var(--app-primaria); --bs-pagination-active-border-color: var(--app-primaria); }

/* Escolha do tema em Configuracoes → Empresa */
.tema-opcoes { display: flex; flex-wrap: wrap; gap: .75rem; }
.tema-opcao { cursor: pointer; text-align: center; font-size: .78rem; color: var(--app-cinza); width: 64px; }
.tema-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.tema-opcao .amostra {
    display: block; width: 40px; height: 40px; margin: 0 auto .3rem; border-radius: 50%;
    border: 3px solid #fff; box-shadow: 0 0 0 1px var(--app-borda);
}
.tema-opcao input:checked + .amostra { box-shadow: 0 0 0 2px var(--app-texto); }
.tema-opcao input:checked ~ span:last-child { color: var(--app-texto); font-weight: 600; }
.tema-opcao input:focus-visible + .amostra { outline: 2px solid var(--app-texto); outline-offset: 2px; }
.tema-opcao input:disabled ~ * { cursor: default; }

/* ---------- LOGIN ---------- */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: linear-gradient(135deg, var(--app-primaria) 0%, var(--app-primaria-escura) 100%);
}
.login-card {
    background: #fff;
    border-radius: 18px;
    padding: 2.25rem;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .25);
}
.login-brand { text-align: center; margin-bottom: 1.75rem; }
.login-logo {
    width: 64px; height: 64px; margin: 0 auto .85rem;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--app-primaria), var(--app-primaria-escura));
    color: #fff; font-weight: 700; font-size: 1.5rem;
    display: flex; align-items: center; justify-content: center;
}
.login-brand h1 { font-size: 1.5rem; font-weight: 700; margin: 0; }
.login-brand p { color: var(--app-cinza); margin: .25rem 0 0; font-size: .875rem; }
.marca-empresa {
    margin-top: 1.5rem; padding-top: 1.25rem;
    border-top: 1px solid var(--app-borda);
    text-align: center; color: var(--app-cinza);
}
.marca-empresa small { display: block; font-size: .7rem; margin-bottom: .4rem; }
.marca-empresa img { max-width: 180px; height: auto; }
.login-dica {
    margin: 1.25rem 0 0; text-align: center;
    font-size: .75rem; color: var(--app-cinza);
}

/* ---------- ESTRUTURA ---------- */
.topbar {
    position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h);
    background: linear-gradient(90deg, var(--app-primaria), var(--app-primaria-escura));
    display: flex; align-items: center; gap: .5rem;
    padding: 0 1rem; z-index: 1040; color: #fff;
}
.topbar-brand {
    color: #fff; text-decoration: none; font-weight: 700; font-size: 1.05rem;
    display: flex; align-items: center; gap: .5rem;
}
.topbar-logo {
    width: 32px; height: 32px; border-radius: 9px;
    background: rgba(255, 255, 255, .2);
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700;
}
.btn-perfil {
    color: #fff; border: 0; background: rgba(255, 255, 255, .12);
    border-radius: 30px; padding: .3rem .75rem .3rem .3rem;
    display: flex; align-items: center; gap: .5rem; font-size: .85rem;
}
.btn-perfil:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--app-primaria-escura); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 700; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.badge-whatsapp {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--app-verde); color: #fff; text-decoration: none;
    border-radius: 20px; padding: .3rem .7rem; font-size: .78rem; font-weight: 600;
}
.badge-whatsapp:hover { color: #fff; filter: brightness(1.08); }
.badge-whatsapp.d-none { display: none !important; }

.sidebar {
    position: fixed; top: var(--topbar-h); bottom: 0; left: 0;
    width: var(--sidebar-w); background: #fff;
    border-right: 1px solid var(--app-borda);
    overflow-y: auto; z-index: 1035;
    display: flex; flex-direction: column;
    transition: transform .25s ease;
}
.sidebar .nav { padding: .75rem .6rem; flex: 1; }
.sidebar .nav-link {
    color: var(--app-texto); border-radius: 10px;
    padding: .6rem .8rem; margin-bottom: 2px;
    display: flex; align-items: center; gap: .65rem; font-weight: 500;
}
.sidebar .nav-link i { font-size: 1.05rem; width: 20px; color: var(--app-cinza); }
.sidebar .nav-link:hover { background: color-mix(in srgb, var(--app-primaria) 8%, #fff); color: var(--app-primaria); }
.sidebar .nav-link:hover i { color: var(--app-primaria); }
.sidebar .nav-link.ativo { background: var(--app-primaria); color: #fff; }
.sidebar .nav-link.ativo i { color: #fff; }
.sidebar-secao {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--app-cinza); padding: 1rem .8rem .35rem; font-weight: 700;
}
.sidebar-rodape {
    padding: .75rem 1rem; border-top: 1px solid var(--app-borda);
    color: var(--app-cinza); text-align: center;
}
.sidebar-marca { display: block; max-width: 140px; height: auto; margin: 0 auto .35rem; }
.sidebar-backdrop {
    position: fixed; inset: 0; background: rgba(0, 0, 0, .45);
    z-index: 1030; display: none;
}
.conteudo {
    margin-left: var(--sidebar-w); padding: calc(var(--topbar-h) + 1.25rem) 1.25rem 2.5rem;
    min-height: 100vh;
}

@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); box-shadow: 0 0 30px rgba(0, 0, 0, .15); }
    .sidebar.aberta { transform: translateX(0); }
    .sidebar-backdrop.visivel { display: block; }
    .conteudo { margin-left: 0; padding-left: .85rem; padding-right: .85rem; }
}

/* ---------- COMPONENTES ---------- */
.pagina-titulo {
    display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
    margin-bottom: 1.25rem;
}
.pagina-titulo h2 { font-size: 1.4rem; font-weight: 700; margin: 0; }
.pagina-titulo .acoes { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

.card {
    border: 1px solid var(--app-borda); border-radius: 14px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}
.card-header {
    background: #fff; border-bottom: 1px solid var(--app-borda);
    font-weight: 600; border-radius: 14px 14px 0 0 !important;
}

.kpi { display: flex; align-items: center; gap: .9rem; padding: 1.1rem; }
.kpi-icone {
    width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; color: #fff;
}
.kpi-valor { font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.kpi-rotulo { font-size: .78rem; color: var(--app-cinza); }
.bg-primaria { background: var(--app-primaria); }
.bg-rosa { background: var(--app-rosa); }
.bg-verde { background: var(--app-verde); }
.bg-amarelo { background: var(--app-amarelo); }
.bg-vermelho { background: var(--app-vermelho); }
.bg-azul { background: var(--app-azul); }

/* Relatorios: barra proporcional sob o valor principal e medalhas do ranking. */
.barra-prop { height: 4px; border-radius: 2px; background: var(--app-borda); margin-top: 4px; min-width: 60px; overflow: hidden; }
.barra-prop > span { display: block; height: 100%; border-radius: 2px; background: var(--app-primaria); }
td.text-end .barra-prop { margin-left: auto; max-width: 140px; }
.medalha-1 { color: #d4a017; }
.medalha-2 { color: #9aa4ad; }
.medalha-3 { color: #b0703c; }

.table { --bs-table-hover-bg: color-mix(in srgb, var(--app-primaria) 4%, #fff); margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .65rem .75rem; }
.table thead th {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--app-cinza); border-bottom: 2px solid var(--app-borda);
    white-space: nowrap; font-weight: 700;
}
.tabela-scroll { overflow-x: auto; }

.badge-status { font-size: .72rem; padding: .32em .65em; border-radius: 20px; font-weight: 600; }
.st-Aberta { background: #fff2d8; color: #92650a; }
.st-Fechada { background: #e6f6e9; color: #1d7a33; }
.st-Aberto { background: #e2f8f1; color: #0b7a5f; }
.st-Fechado { background: #f0f0f0; color: #555; }
.st-Pendente { background: #fff2d8; color: #92650a; }
.st-Pago { background: #e6f6e9; color: #1d7a33; }
.st-Vencido { background: #ffe5e5; color: #b02a2a; }
.st-Cancelada { background: #ffe5e5; color: #b02a2a; }
.st-Processando { background: #e3f0ff; color: #0b5ed7; }
.st-Autorizada { background: #e6f6e9; color: #1d7a33; }
.st-Rejeitada { background: #ffe5e5; color: #b02a2a; }
.st-Descartada { background: #f0f0f0; color: #555; }
.st-Lancada { background: #e6f6e9; color: #1d7a33; }
.st-Estornada { background: #ffe5e5; color: #b02a2a; }
.st-Efetivado { background: #e6f6e9; color: #1d7a33; }
.st-Cancelado { background: #ffe5e5; color: #b02a2a; }
.st-Solicitada { background: #fff4d6; color: #8a6100; }
.st-Entregue { background: #e6f6e9; color: #1d7a33; }
.st-Cancelada { background: #ffe5e5; color: #b02a2a; }
.pontos-mais { color: #1d7a33; font-weight: 600; }
.pontos-menos { color: #b02a2a; font-weight: 600; }
.saldo-destaque { font-size: 2rem; font-weight: 700; color: var(--app-primaria); line-height: 1; }

.vazio { text-align: center; color: var(--app-cinza); padding: 2.5rem 1rem; }
.vazio i { font-size: 2.25rem; display: block; margin-bottom: .5rem; opacity: .45; }

.lista-selecao { max-height: 320px; overflow-y: auto; }
.lista-selecao .item {
    padding: .55rem .7rem; border-radius: 8px; cursor: pointer;
    display: flex; justify-content: space-between; gap: .5rem;
}
.lista-selecao .item:hover { background: color-mix(in srgb, var(--app-primaria) 8%, #fff); }

.filtro-barra {
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin-bottom: 1rem;
}
.filtro-barra .form-control, .filtro-barra .form-select { min-width: 150px; }

.paginacao { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

@media print {
    .topbar, .sidebar, .pagina-titulo .acoes, .filtro-barra, .filtro-vendas { display: none !important; }
    #abas-rel, .paginacao, .card-header .btn { display: none !important; }
    /* Botoes de acao (pagar, editar, excluir...) nao tem informacao no papel. */
    .conteudo .btn { display: none !important; }
    /* Abas, caixas de selecao e icones dos indicadores sao da tela: no papel so ocupam espaco
       (com 4 indicadores por linha o icone empurrava o valor para fora do cartao). */
    .conteudo .nav-pills, .conteudo .form-check-input, .conteudo .kpi-icone { display: none !important; }
    .kpi { padding: .6rem .75rem; }
    /* Meio gutter das .row g-3 (margens negativas), senao as bordas dos cartoes saem da pagina. */
    .conteudo { margin: 0; padding: 0 .5rem; min-height: 0; }
    /* O Chart.js fixa a largura do canvas em px pela tela e nao redimensiona ao imprimir:
       reduz proporcionalmente para caber na pagina em vez de cortar o grafico. */
    canvas { width: auto !important; height: auto !important; max-width: 100% !important; max-height: 9cm; margin: 0 auto; }
    .card:has(canvas), .col-lg-3 > .card { break-inside: avoid; }
    /* Linha flex com grafico: quando o cartao e empurrado para a proxima pagina o Chrome nao recalcula
       a altura da coluna e o canvas vaza por tras do conteudo seguinte. Empilha em bloco e solta o h-100. */
    .row:has(canvas) { display: block; }
    .row:has(canvas) > [class*="col-"] { width: 100%; max-width: 100%; margin-bottom: 1rem; }
    .row:has(canvas) > [class*="col-"]:last-child { margin-bottom: 0; }
    .h-100 { height: auto !important; }
    .card-header { break-after: avoid; }
    /* Indicadores 4 por linha, como na tela. */
    .row > .col-6.col-lg-3, .row > .col-6.col-xl-3 { flex: 0 0 25%; max-width: 25%; }
    .row > .col-lg-4:has(> .card > .kpi) { flex: 0 0 33.333%; max-width: 33.333%; }
    /* Grades de cartoes: 2 por linha e cartao nunca partido entre paginas. */
    #area-lista.row > [class*="col-"] { flex: 0 0 50%; max-width: 50%; }
    #area-lista.row > [class*="col-"] > .card { break-inside: avoid; }
    .kpi-valor { font-size: 1.05rem; }
    /* No papel nao ha rolagem: as tabelas mostram todas as linhas e colunas. */
    .tabela-scroll { overflow: visible !important; max-height: none !important; }
    .tabela-scroll table { font-size: .66rem; }
    .tabela-scroll .table > :not(caption) > * > * { padding: .2rem .25rem; white-space: normal; }
    .tabela-scroll .table thead th { font-size: .6rem; letter-spacing: 0; white-space: normal; }
    .tabela-scroll .table > :not(caption) > * > .text-end { white-space: nowrap; }
    /* O Chrome imprime sem fundo por padrao: texto branco sobre faixa ou selo colorido sumiria. */
    .badge, .foto-cliente, .kpi-icone { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- AJUDA E SOBRE ---------- */
.sidebar-versao { display: block; font-size: .8rem; color: var(--app-cinza); text-decoration: none; }
.sidebar-versao:hover { color: var(--app-primaria); }

.ajuda-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 1rem; align-items: start; }
.ajuda-indice { position: sticky; top: calc(var(--topbar-h) + 1rem); max-height: calc(100vh - var(--topbar-h) - 2rem); display: flex; flex-direction: column; }
.ajuda-lista { overflow-y: auto; padding: 0 .5rem .5rem; }
.ajuda-item {
    display: flex; align-items: center; gap: .6rem; padding: .45rem .7rem;
    border-radius: 8px; color: var(--app-texto); text-decoration: none; font-weight: 500;
}
.ajuda-item i:first-child { color: var(--app-cinza); width: 18px; }
.ajuda-item:hover { background: color-mix(in srgb, var(--app-primaria) 8%, #fff); color: var(--app-primaria); }
.ajuda-item.ativo { background: var(--app-primaria); color: #fff; }
.ajuda-item.ativo i { color: #fff; }
.ajuda-titulo { font-size: 1.3rem; font-weight: 700; margin: 0; }
.ajuda-secao { margin-top: 1.25rem; line-height: 1.6; }
.ajuda-secao h5 { font-size: 1rem; font-weight: 700; margin-bottom: .5rem; }
.ajuda-secao ol, .ajuda-secao ul { padding-left: 1.25rem; margin-bottom: .5rem; }
.ajuda-secao li { margin-bottom: .25rem; }
.ajuda-dica, .ajuda-atencao {
    display: flex; gap: .6rem; padding: .65rem .85rem; border-radius: 10px; margin: .5rem 0; font-size: .85rem;
}
.ajuda-dica { background: color-mix(in srgb, var(--app-primaria) 8%, #fff); color: var(--app-primaria-escura); }
.ajuda-atencao { background: #fff4dd; color: #8a5a00; }

.sobre-capa {
    display: flex; align-items: center; gap: 1.25rem; padding: 1.5rem;
    background: linear-gradient(135deg, var(--app-primaria), var(--app-primaria-escura)); color: #fff; border: 0;
}
.sobre-capa .login-logo { background: rgba(255, 255, 255, .2); flex: 0 0 auto; }
.sobre-capa h3 { font-weight: 700; }
.sobre-versao {
    display: inline-block; margin-top: .5rem; padding: .2rem .7rem; border-radius: 20px;
    background: rgba(255, 255, 255, .2); font-size: .78rem; font-weight: 600;
}
.sobre-linha {
    display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0;
    border-bottom: 1px dashed var(--app-borda);
}
.sobre-linha:last-child { border-bottom: 0; }
.sobre-linha span { color: var(--app-cinza); }
.sobre-linha strong { text-align: right; font-weight: 600; word-break: break-word; }

@media (max-width: 991.98px) {
    .ajuda-layout { grid-template-columns: 1fr; }
    .ajuda-indice { position: static; max-height: 320px; }
}

@media print {
    .ajuda-indice { display: none !important; }
    .ajuda-layout { display: block; }
}

/* ---------- LICENCA ---------- */
.aviso-licenca {
    display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem;
    padding: .6rem .9rem; border-radius: 10px; text-decoration: none;
    background: #fff6e0; color: #7a5300; border: 1px solid #f5d68a;
}
.aviso-licenca:hover { color: #5c3f00; background: #fff0c8; }
.aviso-licenca.bloqueio { background: #fdecec; color: #8a1f1f; border-color: #f2b8b8; }
.aviso-licenca i { font-size: 1.1rem; }
.licenca-codigo {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 1.05rem; letter-spacing: .04em;
    background: var(--app-fundo); border: 1px dashed var(--app-borda); border-radius: 8px; padding: .35rem .6rem;
    display: inline-block; word-break: break-all;
}
.licenca-capa { display: flex; align-items: center; gap: 1rem; }
.licenca-capa .icone {
    width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font-size: 1.7rem; flex: 0 0 auto;
}
.licenca-capa .icone.ok { background: #e3f8f2; color: var(--app-verde); }
.licenca-capa .icone.alerta { background: #fff6e0; color: #c58a00; }
.licenca-capa .icone.erro { background: #fdecec; color: var(--app-vermelho); }
@media print { .aviso-licenca { display: none !important; } }

/* ---------- Fotos (usuario e cadastros) ---------- */
.foto-cliente {
    --tam: 64px;
    width: var(--tam); height: var(--tam); flex: 0 0 var(--tam);
    border-radius: 50%; overflow: hidden;
    background: var(--app-primaria-escura); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: calc(var(--tam) * .36); font-weight: 700;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--app-borda);
}
.foto-cliente img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Logomarca da empresa ---------- */
.logo-preview {
    width: 180px; height: 90px; flex: 0 0 180px;
    display: flex; align-items: center; justify-content: center;
    border: 1px dashed var(--app-borda); border-radius: 10px; padding: .4rem; background: #fff;
}
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-empresa { height: 44px; max-width: 160px; object-fit: contain; }
.foto-cliente.clicavel { cursor: zoom-in; }

.antes-depois { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.ad-quadro { margin: 0; min-width: 0; }
.ad-quadro figcaption {
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--app-cinza); margin-bottom: .25rem;
}
.ad-foto {
    height: 340px; width: 100%;
    border-radius: 10px; overflow: hidden;
    background: var(--app-fundo); border: 1px solid var(--app-borda);
    display: flex; align-items: center; justify-content: center; text-align: center;
}
.ad-foto img { width: 100%; height: 100%; object-fit: contain; }
.ad-foto[data-ad-foto] { cursor: zoom-in; }
.ad-upload { cursor: pointer; border-style: dashed; margin: 0; }
.ad-upload:hover { border-color: var(--app-primaria); }

.visualizador-imagem {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(0, 0, 0, .88); cursor: zoom-out;
    display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem;
}
.visualizador-imagem img { max-width: 100%; max-height: calc(100% - 3rem); object-fit: contain; border-radius: 6px; }
.visualizador-imagem .legenda { color: #fff; margin-top: .75rem; font-size: .9rem; }
.visualizador-imagem .btn-close { position: absolute; top: 1rem; right: 1rem; }
@media (max-width: 576px) { .ad-foto { height: 220px; } }
.foto-cliente.foto-lista { box-shadow: none; }

/* ---------- PORTAL DO HOSPEDE (/hospedes) ---------- */
.login-logo.com-imagem, .topbar-logo.com-imagem { background: #fff; overflow: hidden; padding: 4px; }
.login-logo.com-imagem img, .topbar-logo.com-imagem img { max-width: 100%; max-height: 100%; object-fit: contain; }
.codigo-acesso { letter-spacing: .5rem; font-weight: 700; }
.portal-contato i { margin-right: .15rem; }

/* Abas: barra fixa embaixo no celular, faixa sob o topo no computador. */
.portal-abas {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    display: flex; background: #fff; border-top: 1px solid var(--app-borda);
    padding-bottom: env(safe-area-inset-bottom);
}
.portal-abas a {
    flex: 1 1 0; min-width: 0; text-align: center; text-decoration: none;
    color: var(--app-cinza); font-size: .68rem; padding: .45rem .1rem .4rem;
}
.portal-abas a i { display: block; font-size: 1.2rem; line-height: 1.3; }
.portal-abas a span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal-abas a.ativo { color: var(--app-primaria); font-weight: 600; }
.portal-conteudo {
    max-width: 960px; margin: 0 auto;
    padding: calc(var(--topbar-h) + 1rem) 1rem calc(72px + env(safe-area-inset-bottom));
}
@media (min-width: 768px) {
    .portal-abas {
        top: var(--topbar-h); bottom: auto; justify-content: center; gap: .25rem;
        border-top: 0; border-bottom: 1px solid var(--app-borda); padding: 0 1rem;
    }
    .portal-abas a {
        flex: 0 0 auto; display: flex; align-items: center; gap: .4rem;
        font-size: .875rem; padding: .7rem .9rem; border-bottom: 3px solid transparent;
    }
    .portal-abas a i { display: inline; font-size: 1rem; }
    .portal-abas a.ativo { border-bottom-color: var(--app-primaria); }
    .portal-conteudo { padding: calc(var(--topbar-h) + 64px) 1.5rem 2rem; }
}

.portal-ola { font-size: 1.35rem; font-weight: 700; margin-bottom: 1rem; }
.portal-titulo { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; }
.portal-saldo {
    border-radius: 18px; color: #fff; padding: 1.4rem 1.5rem;
    background: linear-gradient(135deg, var(--app-primaria) 0%, var(--app-primaria-escura) 100%);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--app-primaria) 35%, transparent);
}
.portal-saldo .valor { font-size: 2.6rem; font-weight: 800; line-height: 1.1; margin: .2rem 0 .35rem; }
.portal-saldo .valor span { font-size: 1rem; font-weight: 400; opacity: .85; }
.portal-nivel {
    width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #fff;
}
.nivel-Bronze, .nivel-barra-Bronze { background: linear-gradient(135deg, #cd7f32, #a0612a); }
.nivel-Prata, .nivel-barra-Prata { background: linear-gradient(135deg, #b8bec6, #8a929c); }
.nivel-Ouro, .nivel-barra-Ouro { background: linear-gradient(135deg, #f5c542, #d49b0c); }
.portal-multiplicador {
    min-width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--app-primaria) 12%, #fff); color: var(--app-primaria);
    font-weight: 800; font-size: 1.05rem;
}
/* Cards da area "Onde usar seus pontos" (portal e tela de personalizacao). */
.destaque-portal { overflow: hidden; }
.destaque-portal-imagem {
    aspect-ratio: 16 / 9; width: 100%; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--app-primaria) 8%, #fff); color: color-mix(in srgb, var(--app-primaria) 45%, #fff); font-size: 2rem;
}
.destaque-portal-imagem img { width: 100%; height: 100%; object-fit: cover; }
.destaque-portal-texto { white-space: pre-line; }
.portal-simulacao { border: 2px solid color-mix(in srgb, var(--app-primaria) 40%, #fff); }
.portal .form-range::-webkit-slider-thumb { background: var(--app-primaria); }
.portal .form-range::-moz-range-thumb { background: var(--app-primaria); }
.codigo-portal { font-size: 2.4rem; font-weight: 800; letter-spacing: .6rem; color: var(--app-primaria); font-family: ui-monospace, Consolas, monospace; }