/* ═══════════════════════════════════════════════════════════════
   TEMAS — CAMADA ESTRUTURAL                             v2.13.0

   O motor de temas (assets/js/painel/19_temas.js) escreve VALORES:
   cor, fonte, raio, sombra, densidade do rail. Isso repinta o
   sistema, mas não o reorganiza — e repintar não era o pedido.

   Este arquivo é a segunda camada: um bloco por tema, preso ao
   atributo [data-tema] que o motor grava no elemento raiz. Aqui
   mudam layout, respiro, forma do cartão, ornamento, navegação,
   comportamento de botão e movimento. É o que faz o painel de um
   tema não se parecer com o painel do outro.

   REGRAS DESTA CAMADA
   · Nenhuma regra vale sem [data-tema="…"]. O tema Atual não é
     tocado por nada aqui — ele continua sendo o CSS original.
   · Toda cor sai de um token. Nenhum literal, para o contraste
     medido na bancada continuar valendo depois da estrutura.
   · Nada de !important: [data-tema] na raiz já ganha do seletor de
     classe por especificidade.
   · Movimento respeita prefers-reduced-motion, no fim do arquivo.
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   1 · ATELIER ORGÂNICO — bio-minimalismo editorial
   Respiro largo, fio de régua sob os títulos, botão em cápsula e
   serifa no que é leitura. A página é uma página de revista.
   ═══════════════════════════════════════════════════════════════ */
[data-tema="organic"] .palco { padding: calc(var(--topo) + 34px) 34px 110px; }
[data-tema="organic"] .grade { gap: 22px; }
[data-tema="organic"] .card { padding: 24px 26px; }
[data-tema="organic"] .kpi { padding: 20px 22px; }

/* título de seção com régua fina embaixo: o gesto editorial do tema */
[data-tema="organic"] .card-h {
  margin-bottom: 18px; padding-bottom: 12px;
  border-bottom: 1px solid var(--linha-2);
}
[data-tema="organic"] .h1 { font-size: 25px; line-height: 1.16; }
[data-tema="organic"] .h2 { font-size: 16px; letter-spacing: -.008em; }
[data-tema="organic"] .rot {
  text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px;
}

/* cápsula: nada de canto reto num tema de cantos orgânicos */
[data-tema="organic"] .b { height: 40px; border-radius: 999px; padding: 0 20px; }
[data-tema="organic"] .b-p { height: 32px; padding: 0 15px; }
[data-tema="organic"] .inp,
[data-tema="organic"] select.inp { height: 42px; border-radius: 12px; }
[data-tema="organic"] .tag { height: 24px; padding: 0 11px; }

/* separador tracejado, como o corte de uma página */
[data-tema="organic"] .sep {
  height: 0; background: none;
  border-top: 1px dashed var(--linha); margin: 22px 0;
}
[data-tema="organic"] .trilho { height: 8px; border-radius: 999px; }
[data-tema="organic"] .rail { padding-top: 18px; }
[data-tema="organic"] .ni { border-radius: 999px; }

/* números grandes em serifa: é o tema falando pelos dados também */
[data-tema="organic"] .val,
[data-tema="organic"] .kpi b { font-family: var(--fonte-titulo); font-weight: 600; }


/* ═══════════════════════════════════════════════════════════════
   2 · APEX PERFORMANCE — clínico esportivo, denso e escuro
   Menos respiro e mais dado por tela. Rótulo em caixa alta, fio de
   luz no topo do cartão, medidor segmentado no lugar da barra lisa.
   ═══════════════════════════════════════════════════════════════ */
[data-tema="apex"] .palco { padding: calc(var(--topo) + 14px) 16px 84px; }
[data-tema="apex"] .grade { gap: 10px; }
[data-tema="apex"] .card { padding: 14px 15px; position: relative; overflow: hidden; }
[data-tema="apex"] .kpi { padding: 12px 14px; position: relative; overflow: hidden; }

/* fio de luz no topo: o "neon-lit border" sem gastar uma borda inteira */
[data-tema="apex"] .card::before,
[data-tema="apex"] .kpi::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--roxo), transparent);
  opacity: .55;
}
[data-tema="apex"] .card-h { margin-bottom: 10px; }

/* HUD: rótulo pequeno em caixa alta, número grande e tabular */
[data-tema="apex"] .rot,
[data-tema="apex"] .h2 {
  text-transform: uppercase; letter-spacing: .11em; font-size: 10.5px; font-weight: 600;
}
[data-tema="apex"] .h1 { font-size: 19px; letter-spacing: -.03em; }
[data-tema="apex"] .val,
[data-tema="apex"] .kpi b {
  font-family: var(--fonte-titulo); font-variant-numeric: tabular-nums;
  letter-spacing: -.035em;
}
[data-tema="apex"] .b {
  height: 34px; border-radius: 8px; font-size: 12px;
  text-transform: uppercase; letter-spacing: .07em;
}
[data-tema="apex"] .b-p { height: 28px; font-size: 11px; }
[data-tema="apex"] .b-roxo { box-shadow: 0 0 18px -6px var(--roxo); }
[data-tema="apex"] .inp { height: 36px; background: var(--fundo); }
[data-tema="apex"] .tag {
  border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; font-size: 10px;
}
[data-tema="apex"] .chip { border-radius: 6px; }

/* medidor segmentado: a barra vira uma régua de blocos */
[data-tema="apex"] .trilho {
  height: 7px; border-radius: 2px;
  background-image: repeating-linear-gradient(90deg, transparent 0 6px, var(--fundo) 6px 8px);
}
[data-tema="apex"] .trilho i {
  border-radius: 2px;
  background-image: repeating-linear-gradient(90deg, transparent 0 6px, rgba(0, 0, 0, .55) 6px 8px);
}
[data-tema="apex"] .sep { margin: 12px 0; }


/* ═══════════════════════════════════════════════════════════════
   3 · LUXE MONOLITH — consultório boutique
   Canto reto, moldura de bronze de um fio, capitulares espaçadas e
   nenhuma sombra. O luxo aqui é o vazio, não o enfeite.
   ═══════════════════════════════════════════════════════════════ */
[data-tema="luxe"] .palco { padding: calc(var(--topo) + 40px) 40px 120px; }
[data-tema="luxe"] .grade { gap: 20px; }
[data-tema="luxe"] .card { padding: 26px 28px; position: relative; }
[data-tema="luxe"] .kpi { padding: 22px 24px; position: relative; }

/* a moldura metálica: um fio de bronze por dentro da borda neutra */
[data-tema="luxe"] .card::after,
[data-tema="luxe"] .kpi::after {
  content: ''; position: absolute; inset: 3px; pointer-events: none;
  border: 1px solid var(--verde); opacity: .3; border-radius: 2px;
}
[data-tema="luxe"] .card-h {
  margin-bottom: 20px; padding-bottom: 14px;
  border-bottom: 1px solid var(--linha);
}
[data-tema="luxe"] .h1 { font-size: 20px; letter-spacing: .07em; line-height: 1.4; }
[data-tema="luxe"] .h2 { font-size: 13px; letter-spacing: .1em; }
[data-tema="luxe"] .rot {
  text-transform: uppercase; letter-spacing: .16em; font-size: 10px; font-weight: 500;
}

/* botão de contorno com sublinhado que cresce: a micro-interação do tema */
[data-tema="luxe"] .b { height: 38px; border-radius: 2px; letter-spacing: .06em; font-weight: 500; }
[data-tema="luxe"] .b-linha,
[data-tema="luxe"] .b-linha-roxo { border-color: var(--verde); color: var(--verde); }
[data-tema="luxe"] .b-fant { position: relative; }
[data-tema="luxe"] .b-fant::after {
  content: ''; position: absolute; left: 15px; right: 15px; bottom: 7px; height: 1px;
  background: var(--verde); transform: scaleX(0); transform-origin: left;
  transition: transform .22s ease;
}
[data-tema="luxe"] .b-fant:hover::after { transform: scaleX(1); }
[data-tema="luxe"] .inp { height: 40px; border-radius: 2px; }
[data-tema="luxe"] .tag {
  border-radius: 2px; text-transform: uppercase; letter-spacing: .09em; font-size: 10px;
}
[data-tema="luxe"] .chip { border-radius: 2px; }

/* filete que nasce e morre no bronze */
[data-tema="luxe"] .sep {
  background: linear-gradient(90deg, transparent, var(--verde), transparent);
  opacity: .45; margin: 24px 0;
}
[data-tema="luxe"] .trilho { height: 4px; border-radius: 0; }
[data-tema="luxe"] .trilho i { border-radius: 0; }
[data-tema="luxe"] .ni { border-radius: 2px; }


/* ═══════════════════════════════════════════════════════════════
   4 · VITALITY DYNAMIC — comportamental, relevo macio
   Sem borda: o cartão nasce do fundo por luz e sombra. Botão que
   afunda ao ser tocado, tudo em pílula, campo escavado.
   ═══════════════════════════════════════════════════════════════ */
[data-tema="vitality"] .palco { padding: calc(var(--topo) + 26px) 26px 100px; }
[data-tema="vitality"] .grade { gap: 18px; }
[data-tema="vitality"] .card,
[data-tema="vitality"] .kpi {
  border: none; padding: 22px 24px; box-shadow: var(--sombra);
}
[data-tema="vitality"] .card-h { margin-bottom: 16px; }
[data-tema="vitality"] .h1 { font-size: 23px; }

/* botão tátil: 3 px de base que somem quando é pressionado */
[data-tema="vitality"] .b {
  height: 42px; border-radius: 999px; padding: 0 22px; font-weight: 600;
  box-shadow: 0 3px 0 rgba(43, 45, 66, .13);
  transition: transform .09s ease, box-shadow .09s ease, background .12s;
}
[data-tema="vitality"] .b:active { transform: translateY(3px); box-shadow: none; }
[data-tema="vitality"] .b-p { height: 34px; padding: 0 16px; }
[data-tema="vitality"] .b-roxo,
[data-tema="vitality"] .b-verde {
  background-image: var(--gradiente-marca);
  color: var(--sobre-marca-viva);
  border: none;
}
[data-tema="vitality"] .b-fant { box-shadow: none; }
[data-tema="vitality"] .b-fant:active { transform: none; }

/* campo escavado: relevo para dentro, o oposto do cartão */
[data-tema="vitality"] .inp,
[data-tema="vitality"] select.inp {
  height: 44px; border: none; border-radius: 14px; background: var(--fundo-2);
  box-shadow: inset 3px 3px 7px rgba(43, 45, 66, .07), inset -3px -3px 7px var(--superficie);
}
[data-tema="vitality"] .inp:focus {
  box-shadow: inset 3px 3px 7px rgba(43, 45, 66, .07), 0 0 0 3px var(--roxo-cla);
}
[data-tema="vitality"] .tag { height: 26px; padding: 0 13px; font-weight: 600; }
[data-tema="vitality"] .chip { height: 34px; border: none; background: var(--fundo-2); }
[data-tema="vitality"] .chip.on { background: var(--roxo); color: var(--sobre-marca); }

/* barra de progresso gorda: é recompensa, tem que aparecer */
[data-tema="vitality"] .trilho { height: 12px; border-radius: 999px; }
[data-tema="vitality"] .trilho i { border-radius: 999px; background-image: var(--gradiente-marca); }
[data-tema="vitality"] .aba.on {
  background: var(--roxo-cla); border-radius: 999px; border-bottom-color: transparent;
  padding: 9px 16px;
}
[data-tema="vitality"] .sep { background: none; border-top: 2px dotted var(--linha); height: 0; }
[data-tema="vitality"] .ni { border-radius: 14px; }


/* ═══════════════════════════════════════════════════════════════
   5 · ZENITH BENTO — blocos modulares em vidro fosco
   Fundo com malha de gradiente, superfícies translúcidas e a grade
   quebrando a simetria: o primeiro bloco ocupa dois.
   ═══════════════════════════════════════════════════════════════ */
[data-tema="zenith"] body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38rem 30rem at 12% 4%, var(--roxo-mid), transparent 62%),
    radial-gradient(34rem 26rem at 92% 10%, var(--ciano-viv), transparent 60%),
    radial-gradient(40rem 34rem at 60% 96%, var(--verde-viv), transparent 66%);
  opacity: .3;
}
/* O rail e a barra de topo são `position: fixed` e assim precisam
   continuar — trocar por `relative` aqui jogava os dois para dentro do
   fluxo e empurrava a página inteira para baixo. Eles já têm z-index
   próprio; quem precisa subir acima da malha é só o palco. */
[data-tema="zenith"] .palco { position: relative; z-index: 1; }

[data-tema="zenith"] .palco { padding: calc(var(--topo) + 22px) 22px 96px; }
[data-tema="zenith"] .grade { gap: 14px; }
[data-tema="zenith"] .card,
[data-tema="zenith"] .kpi { padding: 20px 22px; border-color: var(--linha-2); }

/* a assinatura do bento: o primeiro bloco de uma grade de 4 ou de 3
   ocupa duas colunas, e a grade deixa de ser uma fileira igual */
@media (min-width: 900px) {
  [data-tema="zenith"] .grade.g4 > *:first-child,
  [data-tema="zenith"] .grade.g3 > *:first-child { grid-column: span 2; }
}
[data-tema="zenith"] .rail,
[data-tema="zenith"] .topo {
  background: var(--cartao-fundo);
  backdrop-filter: var(--cartao-desfoque);
  -webkit-backdrop-filter: var(--cartao-desfoque);
}
[data-tema="zenith"] .h1 { font-size: 22px; letter-spacing: -.026em; }
[data-tema="zenith"] .h2 { letter-spacing: -.018em; }
[data-tema="zenith"] .b { height: 38px; border-radius: 14px; }
[data-tema="zenith"] .b-p { height: 30px; border-radius: 10px; }
[data-tema="zenith"] .inp { height: 40px; border-radius: 14px; }
[data-tema="zenith"] .tag { height: 24px; border-radius: 8px; }
[data-tema="zenith"] .chip { border-radius: 12px; }
[data-tema="zenith"] .trilho { height: 10px; border-radius: 999px; }
[data-tema="zenith"] .ni { border-radius: 12px; }
[data-tema="zenith"] .modal { border-radius: 26px; }
[data-tema="zenith"] .sep { margin: 20px 0; }


/* ═══════════════════════════════════════════════════════════════
   6 · JARDIM SERENO — a casca branca flutuando no campo verde
                                                          v2.13.1

   Estrutura tirada da referência enviada, e não inventada: o campo
   verde ocupa a janela inteira; o sistema mora dentro de uma casca
   branca arredondada, com folga de todos os lados; o trilho é um
   SEGUNDO cartão, de menta, encaixado dentro da casca; a navegação é
   uma coluna de pílulas largas; e a ação principal fica no PÉ do
   trilho, em pílula escura, não no canto da tela.

   O que a referência mostra em desktop não cabe em celular: abaixo
   de 981px a casca vira a tela inteira e o trilho volta ao rodapé
   fixo do sistema. Um tema que só funciona numa largura não é tema,
   é maquete.
   ═══════════════════════════════════════════════════════════════ */
[data-tema="sage"] body { background: var(--cena); }
[data-tema="sage"] .palco { padding: calc(var(--topo) + 26px) 30px 100px; }
[data-tema="sage"] .grade { gap: 20px; }
[data-tema="sage"] .card { padding: 22px 24px; border-color: var(--linha-2); }
[data-tema="sage"] .kpi { padding: 18px 20px; border-color: var(--linha-2); }
[data-tema="sage"] .h1 { font-size: 27px; line-height: 1.14; }
[data-tema="sage"] .h2 { font-size: 17px; }
[data-tema="sage"] .card-h { margin-bottom: 14px; }

/* busca e campos em pílula larga, como na referência */
[data-tema="sage"] .inp,
[data-tema="sage"] select.inp {
  height: 44px; border-radius: 999px; padding-left: 18px;
  background: var(--superficie); border-color: var(--linha);
}
[data-tema="sage"] textarea.inp { border-radius: 18px; padding: 14px 18px; }
[data-tema="sage"] .b { height: 44px; border-radius: 999px; padding: 0 22px; font-weight: 600; }
[data-tema="sage"] .b-p { height: 34px; padding: 0 16px; }
/* a ação principal é a pílula quase preta da referência */
[data-tema="sage"] .b-roxo { background: var(--roxo); color: var(--sobre-marca); }
[data-tema="sage"] .tag { height: 26px; padding: 0 12px; border-radius: 999px; }
[data-tema="sage"] .trilho { height: 8px; border-radius: 999px; }

@media (min-width: 981px) {
  /* a casca: o sistema inteiro dentro de um cartão branco flutuante */
  [data-tema="sage"] .rail {
    top: 16px; bottom: 16px; left: 16px; width: var(--rail-x);
    align-items: stretch; padding: 20px 14px 16px;
    background: var(--trilho-fundo); border-right: none;
    border-radius: 26px; box-shadow: none;
  }
  [data-tema="sage"] .rail .rail-nome,
  [data-tema="sage"] .rail .rail-mais { display: block; }
  [data-tema="sage"] .rail .ni { justify-content: flex-start; padding: 0 14px; }
  [data-tema="sage"] .rail .ni b { display: block; }
  [data-tema="sage"] .topo {
    top: 16px; right: 16px; left: calc(var(--rail-x) + 26px);
    height: calc(var(--topo) - 12px);
    background: var(--superficie); border-bottom: 1px solid var(--linha-2);
    border-radius: 26px 26px 0 0; padding: 0 26px;
  }
  [data-tema="sage"] .palco {
    margin-left: calc(var(--rail-x) + 26px); margin-right: 16px;
    background: var(--fundo); border-radius: 0 0 26px 26px;
    min-height: calc(100vh - 32px);
    padding: calc(var(--topo) + 18px) 30px 90px;
  }
  /* pílulas largas: 44px de altura e canto redondo cheio */
  [data-tema="sage"] .ni {
    height: 46px; flex: 0 0 46px; border-radius: 999px;
    font-weight: 600; gap: 13px;
  }
  [data-tema="sage"] .ni:hover { background: var(--fundo-3); }
  [data-tema="sage"] .ni.on { background: var(--superficie); color: var(--tinta); }
  [data-tema="sage"] .ni.on svg { color: var(--tinta); }
  [data-tema="sage"] .ni b { font-size: 14px; font-weight: 600; }
  [data-tema="sage"] .nav-sep { background: var(--linha); margin: 12px 8px; }
  /* a ação principal desce para o pé do trilho */
  [data-tema="sage"] .rail-pe { margin-top: auto; gap: 10px; }
  [data-tema="sage"] .rail-pe .b { width: 100%; }
  [data-tema="sage"] .fab { right: 30px; bottom: 30px; }
}


/* ═══════════════════════════════════════════════════════════════
   7 · AURORA ANALÍTICA — vidro sobre degradê             v2.13.1

   A outra referência: um degradê de lavanda a céu ocupando a janela
   inteira, e todo painel por cima dele em vidro translúcido — trilho,
   barra de topo e cartões. Nada é branco opaco, e é isso que faz o
   fundo aparecer entre os blocos. A leitura é de números, então o
   corpo é tabular e o cartão é mais raso que alto.
   ═══════════════════════════════════════════════════════════════ */
[data-tema="aurora"] body { background: var(--cena); background-attachment: fixed; }
[data-tema="aurora"] .palco { padding: calc(var(--topo) + 22px) 26px 96px; background: transparent; }
[data-tema="aurora"] .grade { gap: 16px; }
[data-tema="aurora"] .card {
  padding: 18px 20px; border-color: var(--linha-2);
  background: var(--cartao-fundo);
  backdrop-filter: var(--cartao-desfoque); -webkit-backdrop-filter: var(--cartao-desfoque);
}
[data-tema="aurora"] .kpi { padding: 16px 18px; border-color: var(--linha-2); }
[data-tema="aurora"] .h1 { font-size: 24px; letter-spacing: -.022em; }
[data-tema="aurora"] .h2 { font-size: 15.5px; }
/* painel de número: tabular em tudo que é valor */
[data-tema="aurora"] .val,
[data-tema="aurora"] .kpi b,
[data-tema="aurora"] .num { font-variant-numeric: tabular-nums; }
[data-tema="aurora"] .inp,
[data-tema="aurora"] select.inp {
  height: 40px; border-radius: 999px; padding-left: 16px;
  background: var(--cartao-fundo);
  backdrop-filter: var(--cartao-desfoque); -webkit-backdrop-filter: var(--cartao-desfoque);
}
[data-tema="aurora"] .b { height: 40px; border-radius: 12px; padding: 0 18px; font-weight: 600; }
[data-tema="aurora"] .b-p { height: 30px; padding: 0 13px; border-radius: 9px; }
[data-tema="aurora"] .tag { height: 24px; padding: 0 11px; border-radius: 999px; font-weight: 600; }
/* a barra de progresso da referência: trilho fino e alto contraste */
[data-tema="aurora"] .trilho { height: 9px; border-radius: 999px; background: var(--linha); }

@media (min-width: 981px) {
  [data-tema="aurora"] .rail {
    background: var(--trilho-fundo); border-right: 1px solid var(--linha-2);
    padding-top: 16px;
    backdrop-filter: var(--cartao-desfoque); -webkit-backdrop-filter: var(--cartao-desfoque);
  }
  [data-tema="aurora"] .topo {
    background: var(--trilho-fundo); border-bottom: 1px solid var(--linha-2);
    backdrop-filter: var(--cartao-desfoque); -webkit-backdrop-filter: var(--cartao-desfoque);
  }
  /* Aberto, o trilho vira um painel sobreposto ao conteúdo — é o
     comportamento do sistema. Num tema de vidro isso ficava ilegível:
     o texto do palco aparecia ATRAVÉS do menu. Expandido, portanto, o
     vidro fica opaco e ganha sombra: painel sobreposto tem de parecer
     painel sobreposto. */
  [data-tema="aurora"] .rail.aberto {
    background: var(--superficie); backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: var(--sombra-2);
  }
  [data-tema="aurora"] .ni { height: 40px; flex: 0 0 40px; border-radius: 12px; }
  [data-tema="aurora"] .ni.on { background: var(--superficie); color: var(--roxo); }
  [data-tema="aurora"] .fab { right: 26px; bottom: 26px; border-radius: 16px; }
}


/* ═══════════════════════════════════════════════════════════════
   Movimento — quem pediu menos movimento recebe menos movimento.
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  [data-tema] .b,
  [data-tema] .b-fant::after { transition: none; }
  [data-tema="vitality"] .b:active { transform: none; }
  [data-tema="luxe"] .b-fant:hover::after { transform: scaleX(1); }
}


/* ═══════════════════════════════════════════════════════════════
   COMPONENTES WHITE-LABEL                                v2.13.0

   Componentes NOVOS, que não existiam antes desta versão: por isso
   as regras base ficam sem [data-tema] — elas não alteram nada do
   que o tema Atual já desenhava, apenas dão forma ao que passou a
   existir. Cada tema depois ajusta o que precisa ajustar.

   Toda cor sai de token. O cabeçalho é o mesmo componente no app do
   paciente, na prévia do painel e na tela de abertura.
   ═══════════════════════════════════════════════════════════════ */

/* ── cabeçalho da marca do profissional ───────────────────────── */
.marca-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; background: var(--superficie);
  border-bottom: 1px solid var(--linha);
}
.marca-cab-p { padding: 9px 12px; }
.marca-cab-id { display: flex; align-items: center; gap: 11px; min-width: 0; }
.marca-cab-logo {
  display: block; height: 34px; max-width: 132px; width: auto;
  object-fit: contain; flex: 0 0 auto;
}
.marca-cab-p .marca-cab-logo { height: 26px; max-width: 104px; }
/* sem logo enviada, o monograma segura a identidade sem parecer falta */
.marca-cab-mono {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: var(--r-s);
  background: var(--roxo); color: var(--sobre-marca);
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 13px; letter-spacing: .02em;
}
.marca-cab-p .marca-cab-mono { width: 27px; height: 27px; font-size: 11px; }
.marca-cab-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.marca-cab-nome {
  font-family: var(--fonte-titulo); font-size: 13.5px; font-weight: 600;
  color: var(--tinta); letter-spacing: var(--espaco-titulo);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.marca-cab-p .marca-cab-nome { font-size: 12.5px; }
.marca-cab-sub {
  font-size: 10.5px; color: var(--cinza);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* cada tema assina o cabeçalho do seu jeito */
[data-tema="organic"] .marca-cab { padding: 16px 20px; border-bottom-color: var(--linha-2); }
[data-tema="organic"] .marca-cab-mono { border-radius: 999px; }
[data-tema="apex"] .marca-cab { padding: 10px 14px; }
[data-tema="apex"] .marca-cab-nome { text-transform: uppercase; letter-spacing: .09em; font-size: 12px; }
[data-tema="apex"] .marca-cab-mono { border-radius: 6px; box-shadow: 0 0 16px -5px var(--roxo); }
[data-tema="luxe"] .marca-cab {
  padding: 18px 22px; border-bottom: 1px solid var(--verde); text-align: center;
}
[data-tema="luxe"] .marca-cab-nome { text-transform: uppercase; letter-spacing: .13em; font-size: 12.5px; }
[data-tema="luxe"] .marca-cab-sub { letter-spacing: .09em; text-transform: uppercase; font-size: 9.5px; }
[data-tema="luxe"] .marca-cab-mono { border-radius: 2px; }
[data-tema="vitality"] .marca-cab { border-bottom: none; box-shadow: var(--sombra); }
[data-tema="vitality"] .marca-cab-mono { border-radius: 999px; background-image: var(--gradiente-marca); color: var(--sobre-marca-viva); }
[data-tema="zenith"] .marca-cab {
  border-bottom: none; background: var(--cartao-fundo);
  backdrop-filter: var(--cartao-desfoque); -webkit-backdrop-filter: var(--cartao-desfoque);
}
[data-tema="zenith"] .marca-cab-mono { border-radius: 12px; }
[data-tema="sage"] .marca-cab { padding: 14px 18px; background: var(--trilho-fundo); border-bottom: none; }
[data-tema="sage"] .marca-cab-mono { border-radius: 999px; }
[data-tema="aurora"] .marca-cab {
  border-bottom: 1px solid var(--linha-2); background: var(--trilho-fundo);
  backdrop-filter: var(--cartao-desfoque); -webkit-backdrop-filter: var(--cartao-desfoque);
}
[data-tema="aurora"] .marca-cab-mono { border-radius: 10px; }

/* ── capa do app (a imagem que o profissional envia) ──────────────
   A forma e a altura da capa mudam com o tema; o véu escuro do
   `.capa-app::after` não muda, porque quem está embaixo dele é uma
   foto, não o tema. */
[data-tema="organic"] .capa-app { min-height: 148px; border-radius: 24px; }
[data-tema="apex"] .capa-app {
  min-height: 116px; border-radius: 10px;
  border: 1px solid var(--linha); box-shadow: none;
}
[data-tema="apex"] .capa-app-ola { text-transform: uppercase; letter-spacing: .08em; font-size: 16px; }
[data-tema="luxe"] .capa-app { min-height: 170px; border-radius: 0; box-shadow: none; }
[data-tema="luxe"] .capa-app-ola { text-transform: uppercase; letter-spacing: .14em; font-size: 15px; }
[data-tema="vitality"] .capa-app { min-height: 140px; border-radius: 26px; }
[data-tema="zenith"] .capa-app { min-height: 132px; border-radius: 22px; }
[data-tema="sage"] .capa-app { min-height: 152px; border-radius: 26px; }
[data-tema="aurora"] .capa-app { min-height: 124px; border-radius: 18px; box-shadow: none; }


/* ── cartão da refeição do dia (app do paciente) ──────────────── */
.ref-cartao {
  background: var(--cartao-fundo); border: var(--borda-l) solid var(--linha);
  border-radius: var(--r-l); padding: 14px 15px;
  backdrop-filter: var(--cartao-desfoque); -webkit-backdrop-filter: var(--cartao-desfoque);
  display: flex; flex-direction: column; gap: 10px;
}
.ref-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ref-hora {
  font-family: var(--fonte-titulo); font-variant-numeric: tabular-nums;
  font-size: 11px; font-weight: 600; color: var(--roxo); letter-spacing: .04em;
}
.ref-nome {
  font-family: var(--fonte-titulo); font-size: 14.5px; font-weight: var(--peso-titulo);
  color: var(--tinta); letter-spacing: var(--espaco-titulo); text-transform: var(--caixa-alta);
}
.ref-kcal {
  font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--cinza); white-space: nowrap;
}
.ref-itens { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ref-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 12.5px; color: var(--tinta-2);
}
.ref-item span { color: var(--cinza); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ref-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.ref-cartao.feita { opacity: .72; }
.ref-cartao.feita .ref-nome { text-decoration: line-through; text-decoration-thickness: 1px; }

/* linha pontilhada de caderno: a lista de compras do tema editorial */
[data-tema="organic"] .ref-item {
  border-bottom: 1px dotted var(--linha); padding-bottom: 5px;
}
[data-tema="organic"] .ref-hora { font-family: var(--fonte-corpo); letter-spacing: .1em; text-transform: uppercase; }
[data-tema="apex"] .ref-cartao { gap: 7px; padding: 11px 12px; }
[data-tema="apex"] .ref-hora { text-transform: uppercase; letter-spacing: .12em; }
[data-tema="luxe"] .ref-cartao { padding: 20px 22px; }
[data-tema="luxe"] .ref-nome { letter-spacing: .09em; }
[data-tema="luxe"] .ref-hora { letter-spacing: .16em; color: var(--verde); }
[data-tema="vitality"] .ref-cartao { border: none; box-shadow: var(--sombra); }
[data-tema="zenith"] .ref-cartao { border-color: var(--linha-2); }
[data-tema="sage"] .ref-cartao { padding: 18px 20px; border-radius: 22px; }
[data-tema="aurora"] .ref-cartao { padding: 14px 16px; gap: 8px; }


/* ── macros e hidratação (app do paciente) ────────────────────── */
.macro-bloco { display: flex; flex-direction: column; gap: 12px; }
.macro-anel { display: flex; align-items: center; gap: 14px; }
.macro-lista { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.macro-linha { display: flex; flex-direction: column; gap: 3px; }
.macro-topo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 11.5px;
}
.macro-topo b { font-weight: 600; color: var(--tinta); }
.macro-topo span { color: var(--cinza); font-variant-numeric: tabular-nums; }
.macro-barra { height: 7px; border-radius: 99px; background: var(--fundo-2); overflow: hidden; }
.macro-barra i { display: block; height: 100%; border-radius: 99px; transition: width .3s ease; }
.macro-cho i { background: var(--cho); }
.macro-ptn i { background: var(--ptn); }
.macro-lip i { background: var(--lip); }

.agua-bloco { display: flex; align-items: center; gap: 12px; }
.agua-copos { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; }
.agua-copo {
  width: 17px; height: 23px; border-radius: 4px 4px 7px 7px;
  border: 1.5px solid var(--ciano); background: transparent;
}
.agua-copo.cheio { background: var(--ciano); }
.agua-conta { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--cinza); white-space: nowrap; }

[data-tema="apex"] .macro-barra { border-radius: 2px; background-image: repeating-linear-gradient(90deg, transparent 0 5px, var(--fundo) 5px 7px); }
[data-tema="apex"] .macro-barra i { border-radius: 2px; }
[data-tema="apex"] .agua-copo { border-radius: 2px; }
[data-tema="luxe"] .macro-barra,
[data-tema="luxe"] .macro-barra i { border-radius: 0; }
[data-tema="luxe"] .agua-copo { border-radius: 0; }
[data-tema="vitality"] .macro-barra { height: 10px; }
[data-tema="vitality"] .agua-copo { border-radius: 999px; width: 15px; }
[data-tema="zenith"] .macro-barra { height: 8px; }


/* ═══════════════════════════════════════════════════════════════
   NAVEGAÇÃO, BARRAS E CURSOR                             v2.13.0

   Aqui as coisas mudam de lugar, não só de cor. O menu, a barra de
   topo, a barra de rolagem, o botão flutuante e o cursor recebem um
   tratamento por tema — é o que faz dois temas parecerem dois
   produtos, e não o mesmo produto pintado duas vezes.

   As relocações grandes valem só a partir de 981 px, onde há espaço
   para elas. Abaixo disso todo tema volta ao rail lateral estreito
   do desenho original, que é o que funciona no celular.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1 · ORGÂNICO — coluna editorial sempre aberta ────────────── */
@media (min-width: 981px) {
  /* o menu deixa de ser um trilho de ícones e vira o sumário da
     revista: largura cheia, rótulos à mostra, sem hover para abrir */
  [data-tema="organic"] .rail {
    width: var(--rail-x); align-items: stretch; padding: 20px 12px 12px;
    border-right: 1px solid var(--linha-2); box-shadow: none;
  }
  [data-tema="organic"] .rail .ni { padding: 0 12px; height: 38px; flex: 0 0 38px; }
  /* o trilho é largo o tempo todo neste tema, então o rótulo e o nome
     também precisam estar à mostra o tempo todo: sem isto o tema
     mostrava 218px de coluna com ícones centralizados e texto escondido
     até o hover — largura de sumário com legibilidade de trilho */
  [data-tema="organic"] .rail .ni b,
  [data-tema="organic"] .rail .rail-nome,
  [data-tema="organic"] .rail .rail-mais { display: block; }
  [data-tema="organic"] .rail .ni { justify-content: flex-start; }
  [data-tema="organic"] .rail-topo { justify-content: flex-start; }
  [data-tema="organic"] .topo { left: var(--rail-x); padding: 0 34px; }
  [data-tema="organic"] .palco { margin-left: var(--rail-x); }
}
[data-tema="organic"] .rail-topo { margin-bottom: 20px; }
[data-tema="organic"] .ni.on { background: var(--roxo-cla); }
[data-tema="organic"] .fab { border-radius: 999px; box-shadow: var(--sombra-2); }
[data-tema="organic"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-tema="organic"] ::-webkit-scrollbar-track { background: var(--fundo); }
[data-tema="organic"] ::-webkit-scrollbar-thumb {
  background: var(--roxo-cla); border-radius: 999px; border: 2px solid var(--fundo);
}
[data-tema="organic"] ::-webkit-scrollbar-thumb:hover { background: var(--roxo-mid); }
[data-tema="organic"] { scrollbar-color: var(--roxo-mid) var(--fundo); scrollbar-width: thin; }


/* ── 2 · APEX — console: o menu troca de lado e vai para a direita ─
   Trilho à direita, como a coluna de instrumentos de uma cabine; a
   barra de topo começa na borda esquerda, e o botão flutuante muda
   de canto para não disputar espaço com o menu. */
@media (min-width: 981px) {
  [data-tema="apex"] .rail {
    left: auto; right: 0;
    border-right: none; border-left: 1px solid var(--linha);
  }
  [data-tema="apex"] .rail.aberto { box-shadow: -8px 0 30px rgba(0, 0, 0, .5); }
  [data-tema="apex"] .topo { left: 0; right: var(--rail); }
  [data-tema="apex"] .palco { margin-left: 0; margin-right: var(--rail); }
  [data-tema="apex"] .fab { right: auto; left: 22px; }
  [data-tema="apex"] .fab-ia { left: auto; right: calc(var(--rail) + 18px); }
}
[data-tema="apex"] .rail { padding: 10px 0 8px; }
/* aberto, o padding lateral zerado acima encostava os rótulos na borda */
[data-tema="apex"] .rail.aberto { padding: 10px 10px 8px; }
[data-tema="apex"] .ni { border-radius: 6px 0 0 6px; }
/* marcador de item ativo colado na borda de dentro, como um LED */
[data-tema="apex"] .ni.on::before {
  content: ''; position: absolute; right: 0; top: 6px; bottom: 6px; width: 2px;
  background: var(--roxo); box-shadow: 0 0 10px var(--roxo);
}
[data-tema="apex"] .topo {
  border-bottom: 1px solid var(--linha); padding: 0 16px;
  font-variant-numeric: tabular-nums;
}
[data-tema="apex"] .crumb { text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; }
[data-tema="apex"] .fab { border-radius: 12px; }
/* cursor de instrumento sobre a área de dados */
[data-tema="apex"] .palco { cursor: crosshair; }
[data-tema="apex"] .palco .b,
[data-tema="apex"] .palco a,
[data-tema="apex"] .palco button,
[data-tema="apex"] .palco input,
[data-tema="apex"] .palco select,
[data-tema="apex"] .palco textarea,
[data-tema="apex"] .palco .linha-clic { cursor: pointer; }
[data-tema="apex"] .palco input,
[data-tema="apex"] .palco textarea { cursor: text; }
[data-tema="apex"] ::-webkit-scrollbar { width: 6px; height: 6px; }
[data-tema="apex"] ::-webkit-scrollbar-track { background: var(--fundo); }
[data-tema="apex"] ::-webkit-scrollbar-thumb { background: var(--roxo); border-radius: 0; }
[data-tema="apex"] { scrollbar-color: var(--roxo) var(--fundo); scrollbar-width: thin; }


/* ── 3 · LUXE — o menu sai da lateral e vai para o topo ───────── */
@media (min-width: 981px) {
  /* A relocação mais radical do conjunto: o trilho vertical vira uma
     barra horizontal no alto, com o nome à esquerda e a navegação
     centrada. O painel deixa de parecer um SaaS e passa a parecer a
     recepção de um consultório. */
  [data-tema="luxe"] .rail {
    left: 0; right: 0; bottom: auto; width: auto; height: 58px;
    flex-direction: row; align-items: center; gap: 18px;
    padding: 0 32px; border-right: none; border-bottom: 1px solid var(--verde);
    box-shadow: none;
  }
  /* Mesmo defeito da doca do Vitality, e aqui nem havia contra-regra:
     a barra horizontal não neutralizava `.rail.aberto`. A geometria
     escapava por ordem de arquivo — sorte, não desenho —, mas o widget
     de teste (`.rail.aberto .trial`, especificidade maior) entrava
     numa faixa de 58px com `overflow: hidden`, e os rótulos voltavam a
     aparecer no hover e viravam tira rolante. Agora está escrito. */
  [data-tema="luxe"] .rail.aberto {
    width: auto; height: 58px; align-items: center; padding: 0 32px; box-shadow: none;
  }
  [data-tema="luxe"] .rail.aberto .trial { display: none; }
  [data-tema="luxe"] .rail .ni b {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  [data-tema="luxe"] .rail-topo { margin-bottom: 0; flex: 0 0 auto; }
  /* o nome do consultório é a âncora da barra: fica sempre visível,
     não só quando o rail é expandido */
  [data-tema="luxe"] .rail .rail-nome {
    display: block; text-transform: uppercase; letter-spacing: .14em;
    font-size: 11px; font-weight: 500;
  }
  [data-tema="luxe"] .nav {
    flex-direction: row; justify-content: center; align-items: center;
    gap: 4px; width: auto; overflow-x: auto; overflow-y: hidden;
  }
  [data-tema="luxe"] .rail .ni {
    flex: 0 0 auto; height: 34px; padding: 0 13px; border-radius: 0;
  }
  [data-tema="luxe"] .ni.on { border-bottom: 1px solid var(--verde); }
  [data-tema="luxe"] .rail-mais { display: none; }
  /* O rodapé do trilho é `width:100%` — desenhado para uma coluna. Na
     barra horizontal ele engolia a faixa inteira e espremia o menu a
     zero px. Aqui ele volta ao tamanho do conteúdo e ancora à direita. */
  [data-tema="luxe"] .rail-pe {
    width: auto; flex: 0 0 auto; flex-direction: row; align-items: center;
    margin-top: 0; margin-left: auto; gap: 8px;
  }
  [data-tema="luxe"] .topo { top: 58px; left: 0; padding: 0 40px; }
  [data-tema="luxe"] .palco { margin-left: 0; padding-top: calc(58px + var(--topo) + 40px); }
}
[data-tema="luxe"] .fab { border-radius: 2px; box-shadow: none; border: 1px solid var(--verde); }
[data-tema="luxe"] ::-webkit-scrollbar { width: 5px; height: 5px; }
[data-tema="luxe"] ::-webkit-scrollbar-track { background: var(--fundo); }
[data-tema="luxe"] ::-webkit-scrollbar-thumb { background: var(--verde); border-radius: 0; }
[data-tema="luxe"] { scrollbar-color: var(--verde) var(--fundo); scrollbar-width: thin; }


/* ── 4 · VITALITY — o menu descola da borda e vira uma doca ───── */
@media (min-width: 981px) {
  /* O menu sai da lateral e vira uma DOCA no rodapé, centrada, como
     num aplicativo de celular — a leitura fica com a largura toda e a
     navegação fica onde a mão alcança. */
  [data-tema="vitality"] .rail {
    top: auto; left: 50%; right: auto; bottom: 18px;
    transform: translateX(-50%);
    width: auto; max-width: calc(100vw - 40px); height: 62px;
    flex-direction: row; align-items: center; gap: 6px;
    padding: 0 14px; border-radius: 999px; border-right: none;
    box-shadow: 0 10px 34px rgba(43, 45, 66, .18);
  }
  [data-tema="vitality"] .rail.aberto {
    width: auto; align-items: center; padding: 0 14px; border-radius: 999px;
  }
  [data-tema="vitality"] .rail-topo { margin-bottom: 0; flex: 0 0 auto; }
  [data-tema="vitality"] .rail-nome { display: none; }
  [data-tema="vitality"] .nav {
    flex-direction: row; align-items: center; justify-content: center;
    gap: 4px; width: auto; overflow-x: auto; overflow-y: hidden;
  }
  [data-tema="vitality"] .rail .ni {
    flex: 0 0 auto; width: 42px; height: 42px; padding: 0;
    justify-content: center; border-radius: 999px; margin: 0;
  }
  /* DEFEITO CORRIGIDO (v2.13.1): a doca ficava ilegível ao passar o
     mouse. O rail tem um estado `.aberto` que o sistema usa para
     expandir a coluna lateral — e ele mostra o rótulo `<b>` de cada
     item e o widget de teste (`.trial`, uns 110px de altura) dentro de
     uma barra de 62px com `overflow: hidden`. O resultado era a tira
     espremida com barra de rolagem que o cliente fotografou.

     A regra anterior mirava `span:not(.tag)`, e dentro de `.ni` não
     existe `<span>` nenhum: só o `<svg>` do ícone e o `<b>` do rótulo.
     Era regra morta. Agora o rótulo é escondido do OLHO mas continua
     no leitor de tela — numa doca só de ícones, `display: none`
     deixaria a navegação muda para quem não vê. */
  [data-tema="vitality"] .rail .ni b {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  [data-tema="vitality"] .rail.aberto .trial { display: none; }
  [data-tema="vitality"] .rail-pe {
    width: auto; flex: 0 0 auto; flex-direction: row; align-items: center;
    margin-top: 0; gap: 6px;
  }
  [data-tema="vitality"] .rail-mais { display: none; }
  /* sem trilho lateral, a barra de topo ocupa a largura inteira */
  [data-tema="vitality"] .topo {
    left: 0; right: 0; top: 0; height: var(--topo);
    border-radius: 0; border-bottom: none; box-shadow: var(--sombra); padding: 0 26px;
  }
  [data-tema="vitality"] .palco {
    margin-left: 0; padding: calc(var(--topo) + 26px) 26px 118px;
  }
  /* o flutuante sobe para não bater na doca */
  [data-tema="vitality"] .fab { bottom: 96px; }
  [data-tema="vitality"] .fab-ia { left: 22px; bottom: 96px; }
}
[data-tema="vitality"] .ni { margin: 0 8px; }
[data-tema="vitality"] .ni.on { background: var(--roxo-cla); }
[data-tema="vitality"] .fab { width: 58px; height: 58px; box-shadow: 0 8px 22px rgba(43, 45, 66, .28); }
[data-tema="vitality"] ::-webkit-scrollbar { width: 12px; height: 12px; }
[data-tema="vitality"] ::-webkit-scrollbar-track { background: transparent; }
[data-tema="vitality"] ::-webkit-scrollbar-thumb {
  background: var(--roxo); border-radius: 999px; border: 3px solid var(--fundo);
}
[data-tema="vitality"] { scrollbar-color: var(--roxo) transparent; scrollbar-width: auto; }
/* tudo o que é clicável parece clicável: é um tema de adesão */
[data-tema="vitality"] .ni,
[data-tema="vitality"] .kpi,
[data-tema="vitality"] .linha-clic,
[data-tema="vitality"] .chip { cursor: pointer; }


/* ── 5 · ZENITH — ilha de vidro e barra de topo suspensa ──────── */
@media (min-width: 981px) {
  [data-tema="zenith"] .rail {
    top: 14px; bottom: 14px; left: 12px; height: auto;
    border-radius: 22px; border-right: 1px solid var(--linha-2);
    box-shadow: var(--sombra); padding: 14px 0 12px;
  }
  /* mesma correção do Aurora: expandido, o vidro vira painel opaco,
     senão o conteúdo do palco lê-se através do menu */
  [data-tema="zenith"] .rail.aberto {
    border-radius: 22px; background: var(--superficie);
    backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--sombra-2);
  }
  /* a barra de topo deixa de ser faixa e vira ilha: não encosta em
     nenhuma borda, e o conteúdo passa por baixo dela */
  [data-tema="zenith"] .topo {
    top: 14px; left: calc(var(--rail) + 26px); right: 14px;
    height: calc(var(--topo) - 10px); border-radius: 20px;
    border-bottom: 1px solid var(--linha-2); box-shadow: var(--sombra); padding: 0 18px;
  }
  [data-tema="zenith"] .palco {
    margin-left: calc(var(--rail) + 26px);
    padding: calc(var(--topo) + 22px) 20px 96px;
  }
}
[data-tema="zenith"] .ni { margin: 0 7px; }
[data-tema="zenith"] .ni.on { background: var(--roxo-cla); }
[data-tema="zenith"] .fab { border-radius: 20px; }
[data-tema="zenith"] ::-webkit-scrollbar { width: 9px; height: 9px; }
[data-tema="zenith"] ::-webkit-scrollbar-track { background: transparent; }
[data-tema="zenith"] ::-webkit-scrollbar-thumb {
  background: var(--roxo-mid); border-radius: 999px; border: 2px solid transparent;
  background-clip: padding-box;
}
[data-tema="zenith"] { scrollbar-color: var(--roxo-mid) transparent; scrollbar-width: thin; }


/* ── 6 · JARDIM SERENO — barra de menta e cursor de leitura ───── */
[data-tema="sage"] .rail-topo { margin-bottom: 18px; }
[data-tema="sage"] .fab { border-radius: 999px; box-shadow: var(--sombra-2); }
[data-tema="sage"] ::-webkit-scrollbar { width: 11px; height: 11px; }
[data-tema="sage"] ::-webkit-scrollbar-track { background: transparent; }
[data-tema="sage"] ::-webkit-scrollbar-thumb {
  background: var(--trilho-fundo); border-radius: 999px; border: 3px solid var(--fundo);
}
[data-tema="sage"] ::-webkit-scrollbar-thumb:hover { background: var(--marca-viva); }
[data-tema="sage"] { scrollbar-color: var(--marca-viva) transparent; scrollbar-width: auto; }

/* ── 7 · AURORA — barra fina de índigo e cursor de precisão ───── */
[data-tema="aurora"] .rail-topo { margin-bottom: 12px; }
[data-tema="aurora"] .fab { border-radius: 16px; }
/* painel de análise: a célula de dado convida à leitura, não ao clique */
[data-tema="aurora"] .palco .tab td { cursor: default; }
[data-tema="aurora"] .palco .linha-clic,
[data-tema="aurora"] .palco .kpi { cursor: pointer; }
[data-tema="aurora"] ::-webkit-scrollbar { width: 7px; height: 7px; }
[data-tema="aurora"] ::-webkit-scrollbar-track { background: transparent; }
[data-tema="aurora"] ::-webkit-scrollbar-thumb { background: var(--roxo-mid); border-radius: 999px; }
[data-tema="aurora"] ::-webkit-scrollbar-thumb:hover { background: var(--roxo); }
[data-tema="aurora"] { scrollbar-color: var(--roxo-mid) transparent; scrollbar-width: thin; }


/* ── modais e avisos, um por tema ─────────────────────────────── */
[data-tema="organic"] .modal { border-radius: 26px; }
[data-tema="apex"] .modal { border-radius: 10px; border: 1px solid var(--linha); }
[data-tema="luxe"] .modal { border-radius: 2px; border: 1px solid var(--verde); }
[data-tema="vitality"] .modal { border-radius: 28px; }
[data-tema="sage"] .modal { border-radius: 22px; }
[data-tema="aurora"] .modal {
  border-radius: 18px; border: 1px solid var(--linha-2);
  backdrop-filter: var(--cartao-desfoque); -webkit-backdrop-filter: var(--cartao-desfoque);
}

[data-tema="organic"] .toast { border-radius: 999px; }
[data-tema="apex"] .toast { border-radius: 6px; text-transform: uppercase; letter-spacing: .07em; font-size: 11.5px; }
[data-tema="luxe"] .toast { border-radius: 2px; }
[data-tema="vitality"] .toast { border-radius: 999px; }
[data-tema="zenith"] .toast { border-radius: 16px; }
[data-tema="sage"] .toast { border-radius: 999px; padding: 12px 20px; }
[data-tema="aurora"] .toast { border-radius: 12px; }


/* ═══════════════════════════════════════════════════════════════
   CABEÇALHO DA PÁGINA, ABAS E AVISOS — cada tema no seu lugar

   O pedido foi explícito: nenhum objeto no mesmo lugar entre um tema
   e outro. O menu e a barra de topo já mudaram de posição acima;
   aqui mudam as ações da página, as abas e o aviso que sobe na tela.
   ═══════════════════════════════════════════════════════════════ */

/* ── ações da página ──────────────────────────────────────────── */
/* organic: empilhado — título, subtítulo e só então as ações, à
   esquerda, como a abertura de uma matéria */
[data-tema="organic"] .cabec { flex-direction: column; align-items: stretch; gap: 16px; }
[data-tema="organic"] .cabec-a { justify-content: flex-start; }

/* apex: as ações vêm ANTES do título, encostadas à esquerda —
   a barra de comando de um console fica no começo da linha */
[data-tema="apex"] .cabec { align-items: center; gap: 16px; }
[data-tema="apex"] .cabec-a { order: -1; }
[data-tema="apex"] .cabec-t { text-align: right; }

/* luxe: tudo centrado, como a folha de rosto de um dossiê */
[data-tema="luxe"] .cabec { flex-direction: column; align-items: center; text-align: center; gap: 18px; }
[data-tema="luxe"] .cabec-t { text-align: center; }
[data-tema="luxe"] .cabec-a { justify-content: center; }

/* vitality: ações grandes, ocupando a largura toda, embaixo */
[data-tema="vitality"] .cabec { flex-direction: column; align-items: stretch; gap: 14px; }
[data-tema="vitality"] .cabec-a { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
[data-tema="vitality"] .cabec-a .b { width: 100%; }

/* zenith: a ordem se inverte — ações à esquerda, título à direita */
@media (min-width: 981px) {
  [data-tema="zenith"] .cabec { align-items: center; }
  [data-tema="zenith"] .cabec-a { order: -1; }
  [data-tema="zenith"] .cabec-t { text-align: right; }
}

/* ── abas ─────────────────────────────────────────────────────── */
[data-tema="organic"] .abas { border-bottom: 1px solid var(--linha-2); gap: 6px; }
[data-tema="apex"] .abas { justify-content: flex-end; gap: 0; }
[data-tema="apex"] .aba { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; padding: 8px 12px; }
[data-tema="luxe"] .abas { justify-content: center; gap: 10px; border-bottom-color: var(--verde); }
[data-tema="luxe"] .aba { text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; }
[data-tema="vitality"] .abas {
  justify-content: center; gap: 6px; border-bottom: none;
  background: var(--fundo-2); border-radius: 999px; padding: 5px;
}
[data-tema="zenith"] .abas {
  border-bottom: none; gap: 5px; padding: 5px;
  background: var(--cartao-fundo); border-radius: 16px;
  backdrop-filter: var(--cartao-desfoque); -webkit-backdrop-filter: var(--cartao-desfoque);
}
[data-tema="zenith"] .aba.on { background: var(--roxo-cla); border-radius: 12px; border-bottom-color: transparent; }
[data-tema="sage"] .abas { border-bottom: 1px solid var(--linha); gap: 8px; }
[data-tema="sage"] .aba.on { border-bottom-width: 3px; border-radius: 3px 3px 0 0; }
[data-tema="aurora"] .abas {
  border-bottom: none; gap: 4px; padding: 4px;
  background: var(--cartao-fundo); border-radius: 999px;
  backdrop-filter: var(--cartao-desfoque); -webkit-backdrop-filter: var(--cartao-desfoque);
}
[data-tema="aurora"] .aba.on { background: var(--superficie); border-radius: 999px; border-bottom-color: transparent; }

/* sage: título e ações lado a lado, ações encostadas à direita — é o
   arranjo da referência, com a busca larga entre os dois */
[data-tema="sage"] .cabec { align-items: center; gap: 20px; }
[data-tema="sage"] .cabec-a { justify-content: flex-end; gap: 12px; }
/* aurora: título à esquerda e um filtro solto à direita, como na
   referência — mas as ações quebram em linha própria no estreito */
[data-tema="aurora"] .cabec { align-items: flex-start; gap: 12px; }
[data-tema="aurora"] .cabec-a { margin-left: auto; gap: 8px; }

/* ── onde o aviso aparece ─────────────────────────────────────── */
/* padrão do sistema: rodapé centrado. Cada tema leva para outro canto. */
[data-tema="apex"] #toasts {
  bottom: auto; top: calc(var(--topo) + 14px); left: 18px; transform: none; align-items: flex-start;
}
[data-tema="luxe"] #toasts { bottom: auto; top: 90px; }
[data-tema="vitality"] #toasts { bottom: auto; top: calc(var(--topo) + 12px); }
[data-tema="zenith"] #toasts { left: auto; right: 18px; transform: none; align-items: flex-end; }
[data-tema="sage"] #toasts {
  bottom: auto; top: 30px; left: auto; right: 34px; transform: none; align-items: flex-end;
}
[data-tema="aurora"] #toasts { left: 26px; transform: none; align-items: flex-start; }