/* =================================================================
   Aurora Design System — components.css
   Scoped entirely under .aurora  ·  Mobile-first
   Tokens consumed from tokens.css — NO hardcoded brand/semantic hex
   ================================================================= */

/* ────────────────────────────────────────────────
   §1  RESET / BASE for aurora scope
──────────────────────────────────────────────── */
.aurora *,
.aurora *::before,
.aurora *::after {
  box-sizing: border-box;
}

.aurora button,
.aurora input,
.aurora select,
.aurora textarea {
  font-family: var(--font-body);
}

/* Remove focus ring only for pointer/touch — keyboard nav keeps it */
.aurora button:focus:not(:focus-visible),
.aurora input:focus:not(:focus-visible),
.aurora select:focus:not(:focus-visible),
.aurora textarea:focus:not(:focus-visible) {
  outline: none;
}

/* ────────────────────────────────────────────────
   §2  BUTTONS  .aurora-btn
──────────────────────────────────────────────── */
.aurora-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: opacity .18s, box-shadow .18s, background .18s, border-color .18s;
  -webkit-user-select: none;
  user-select: none;
}

.aurora-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* ── primary ── gradient acc→acc-2 (cor de Destaque/accent) */
.aurora-btn--primary {
  background: linear-gradient(135deg, var(--acc), var(--acc-2));
  color: var(--acc-ink);
  border-color: transparent;
  /* static glow — no animation on box-shadow */
  box-shadow: 0 0 18px var(--acc-glow);
  /* no overflow:hidden — allows ::after ring to scale out, and --sm tap expansion to work */
}

/* compositor-safe pulse ring via transform+opacity only */
.aurora-btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  outline: 2px solid var(--acc);
  outline-offset: 1px;
  animation: aurora-btn-ring 2.6s ease-out infinite;
  pointer-events: none;
}

@keyframes aurora-btn-ring {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(1.18); opacity: 0; }
}

.aurora-btn--primary:hover {
  opacity: .88;
}

@media (prefers-reduced-motion: reduce) {
  .aurora-btn--primary::after {
    animation: none;
  }
}

/* ── ghost ── */
.aurora-btn--ghost {
  background: rgba(255, 255, 255, .06);
  color: var(--text);
  border-color: rgba(255, 255, 255, .14);
}

.aurora-btn--ghost:hover {
  background: rgba(255, 255, 255, .10);
}

/* ── outline ── (cor de Destaque/accent) */
.aurora-btn--outline {
  background: transparent;
  color: var(--acc);
  border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent);
}

.aurora-btn--outline:hover {
  background: color-mix(in srgb, var(--acc) 8%, transparent);
}

/* ── danger ── */
.aurora-btn--danger {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}

.aurora-btn--danger:hover {
  background: color-mix(in srgb, var(--danger) 22%, transparent);
}

/* ── sm ── */
.aurora-btn--sm {
  min-height: 34px;
  padding: 6px 13px;
  font-size: 11.5px;
}

/* transparent tap-area expansion so touch target ≥44px
   Scoped to non-primary: primary-sm uses the ::after slot for the ring pulse */
.aurora-btn--sm:not(.aurora-btn--primary)::after {
  content: '';
  position: absolute;
  inset: -5px -6px;
  /* no background — purely enlarges the hit area */
}

/* primary-sm used as main CTA (empty-state, modal confirm) → restore full tap target */
.aurora-empty .aurora-btn--primary.aurora-btn--sm,
.aurora-modal__actions .aurora-btn--primary.aurora-btn--sm {
  min-height: 44px;
}

/* ── icon ── square icon-only */
.aurora-btn--icon {
  padding: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
}

.aurora-btn--icon.aurora-btn--sm {
  width: 34px;
  height: 34px;
  min-height: 34px;
  min-width: 34px;
}

/* ── focus-visible ring — btn ── */
.aurora-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ── disabled (any variant) ── */
.aurora-btn:disabled,
.aurora-btn--disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
  animation: none;
}

/* ────────────────────────────────────────────────
   §3  INPUTS  .aurora-input  (input / select / textarea)
──────────────────────────────────────────────── */
.aurora-input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 13px;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--text);
  background: rgba(255, 255, 255, .04);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md);
  transition: border-color .18s, box-shadow .18s;
  -webkit-appearance: none;
  appearance: none;
}

.aurora-input::placeholder {
  color: var(--text-faint);
}

.aurora-input:focus,
.aurora-input:focus-visible {
  border-color: var(--acc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 18%, transparent),
              0 0 16px color-mix(in srgb, var(--acc) 15%, transparent);
  outline: none;
}

/* select chevron */
select.aurora-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23889' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 34px;
  cursor: pointer;
}

textarea.aurora-input {
  min-height: 88px;
  resize: vertical;
}

/* ── .aurora-field  label + hint wrapper ── */
.aurora-field {
  margin-bottom: 14px;
}

/* PS-220 — a MESMA definicao, sob os tres nomes que as views ja escreviam. `.aurora-label`
   (8 usos, modal da fila de espera) e `.aurora-field__label` (4 usos, lead-nova-para-cliente)
   nao existiam em CSS nenhum: o rotulo saia com o tamanho e a cor do corpo do texto, do lado do
   campo, sem parecer rotulo. Alias e nao copia — tres blocos iguais viram tres blocos diferentes
   na primeira mudanca de tema. */
.aurora-field label,
.aurora-label,
.aurora-field__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.aurora-field .aurora-hint {
  display: block;
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 4px;
}

.aurora-field .aurora-hint--error {
  color: var(--danger);
}

/* ────────────────────────────────────────────────
   .aurora-note  — callout informativo / banner de status
   • base: painel de vidro + chip de icone (nota persistente, info)
   • .aurora-note--{ok|warn|danger|info}: cor do chip
   • .aurora-note--strip: variante enxuta tingida, icone inline, sem chip
     (banners transitorios: erro de form, sucesso, aviso)
   • .aurora-alert[--ok|--warn|--danger|--info]: MESMO desenho do strip, sob o nome
     que as views ja escreviam. PS-218: 12 divs em 7 views usavam `.aurora-alert`
     e a classe nao existia em CSS nenhum — o aviso saia como paragrafo sem caixa,
     sem cor e sem borda, justamente onde precisava chamar atencao. Nao quebra nada,
     e por isso sobreviveu: ninguem ve erro, ve um aviso apagado.
     E ALIAS, nao copia: os seletores entram nas MESMAS regras do strip, para nao
     existirem dois desenhos que precisem ser mantidos em sincronia.
──────────────────────────────────────────────── */
.aurora-note,
.aurora-alert {
  display: flex;
  align-items: flex-start;            /* robusto p/ texto multi-linha */
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.45;
}
.aurora-note__icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  font-size: 17px;
  background: var(--info-bg);
  color: var(--info);
}
.aurora-note__icon .aurora-icon { filter: drop-shadow(0 0 6px currentColor); }
.aurora-note strong,
.aurora-alert strong { color: var(--text); font-weight: 600; }
.aurora-note a,
.aurora-alert a {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--info) 55%, transparent);
  transition: color .15s ease, border-color .15s ease;
}
.aurora-note a:hover,
.aurora-alert a:hover { color: var(--info); border-bottom-color: var(--info); }

/* cor do chip por variante (versao com chip) */
.aurora-note--ok     .aurora-note__icon { background: var(--ok-bg);     color: var(--ok); }
.aurora-note--warn   .aurora-note__icon { background: var(--warn-bg);   color: var(--warn); }
.aurora-note--danger .aurora-note__icon { background: var(--danger-bg); color: var(--danger); }
.aurora-note--info   .aurora-note__icon { background: var(--info-bg);   color: var(--info); }

/* ── variante STRIP: enxuta, tingida, icone inline (sem chip nem vidro) ── */
.aurora-note--strip,
.aurora-alert {
  align-items: center;
  gap: var(--sp-2);
  border-radius: var(--r-md);
  background: var(--info-bg);
  border-color: color-mix(in srgb, var(--info) 30%, transparent);
  color: var(--text);
  font-size: 13px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.aurora-note--strip .aurora-note__icon {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font-size: 16px;
  color: var(--info);
}
.aurora-note--strip.aurora-note--ok     { background: var(--ok-bg);     border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.aurora-note--strip.aurora-note--ok     .aurora-note__icon { color: var(--ok); }
.aurora-note--strip.aurora-note--warn   { background: var(--warn-bg);   border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.aurora-note--strip.aurora-note--warn   .aurora-note__icon { color: var(--warn); }
.aurora-note--strip.aurora-note--danger { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.aurora-note--strip.aurora-note--danger .aurora-note__icon { color: var(--danger); }

/* ── .aurora-alert: variantes de cor ──
   O icone vem inline pelo helper `auroraIcon()`, que desenha em `currentColor` — por isso
   a cor da variante e aplicada ao `.aurora-icon`, e nao a um chip. */
.aurora-alert--ok     { background: var(--ok-bg);     border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.aurora-alert--warn   { background: var(--warn-bg);   border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.aurora-alert--danger { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.aurora-alert--info   { background: var(--info-bg);   border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.aurora-alert--ok     .aurora-icon { color: var(--ok); }
.aurora-alert--warn   .aurora-icon { color: var(--warn); }
.aurora-alert--danger .aurora-icon { color: var(--danger); }
.aurora-alert--info   .aurora-icon { color: var(--info); }

/* ── .aform-error  banner de erro de formulario (familia strip danger) ──
   Definicao unica e canonica — antes duplicada inline em ~15 forms.
   Markup continua: <div class="aform-error"> SVG + mensagem </div> */
.aform-error {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  background: var(--danger-bg);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-5);
  color: var(--danger);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}
.aform-error svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }

/* ────────────────────────────────────────────────
   §4  BADGES  .aurora-badge
──────────────────────────────────────────────── */
.aurora-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  line-height: 1;
}

.aurora-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ok / success */
.aurora-badge--ok {
  background: var(--ok-bg);
  color: var(--ok);
}
.aurora-badge--ok::before {
  background: var(--ok);
  box-shadow: 0 0 7px var(--ok);
}

/* info / rented */
.aurora-badge--info {
  background: var(--info-bg);
  color: var(--info);
}
.aurora-badge--info::before {
  background: var(--brand);
  box-shadow: 0 0 7px var(--brand);
}

/* warn / maintenance */
.aurora-badge--warn {
  background: var(--warn-bg);
  color: var(--warn);
}
.aurora-badge--warn::before {
  background: var(--warn);
  box-shadow: 0 0 7px var(--warn);
}

/* danger */
.aurora-badge--danger {
  background: var(--danger-bg);
  color: var(--danger);
}
.aurora-badge--danger::before {
  background: var(--danger);
  box-shadow: 0 0 7px var(--danger);
}

/* ────────────────────────────────────────────────
   §5  SWITCH  .aurora-switch
──────────────────────────────────────────────── */
.aurora-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}

.aurora-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.aurora-switch__track {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .16);
  border-radius: var(--r-pill);
  transition: background .2s, box-shadow .2s;
  cursor: pointer;
}

.aurora-switch__track::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
}

.aurora-switch input:checked + .aurora-switch__track {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 0 14px var(--glow);
}

.aurora-switch input:checked + .aurora-switch__track::before {
  transform: translateX(18px);
}

/* ── focus-visible ring — switch track ── */
.aurora-switch input:focus-visible + .aurora-switch__track {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ────────────────────────────────────────────────
   §6  SEGMENTED CONTROL  .aurora-segmented
──────────────────────────────────────────────── */
.aurora-segmented {
  display: inline-flex;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 2px;
}

.aurora-segmented__item {
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: calc(var(--r-md) - 2px);
  color: var(--text-muted);
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  transition: background .15s, color .15s, box-shadow .15s;
  -webkit-user-select: none;
  user-select: none;
}

.aurora-segmented__item--active,
.aurora-segmented__item.active {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: var(--brand-ink);
  box-shadow: 0 0 10px var(--glow);
}

/* ── focus-visible ring — segmented item ── */
.aurora-segmented__item:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ────────────────────────────────────────────────
   §7  CHECKBOX  .aurora-check
──────────────────────────────────────────────── */
.aurora-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  min-height: 44px;
}

.aurora-check__box {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--acc);
  background: color-mix(in srgb, var(--acc) 16%, transparent);
  display: grid;
  place-items: center;
  color: var(--acc);
  font-size: 11px;
  box-shadow: 0 0 10px color-mix(in srgb, var(--acc) 30%, transparent);
  flex-shrink: 0;
}

/* ────────────────────────────────────────────────
   §8  TABS  .aurora-tabs  (pill style)
──────────────────────────────────────────────── */
.aurora-tabs {
  display: inline-flex;
  gap: 3px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-lg);
  padding: 4px;
}

.aurora-tabs__item {
  font-size: 11.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: calc(var(--r-lg) - 2px);
  color: var(--text-muted);
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 34px;
  transition: background .15s, color .15s, box-shadow .15s;
  -webkit-user-select: none;
  user-select: none;
  text-decoration: none;
}

.aurora-tabs__item svg {
  width: 14px;
  height: 14px;
}

.aurora-tabs__item--active,
.aurora-tabs__item.active {
  background: rgba(255, 255, 255, .08);
  color: var(--text);
  box-shadow: 0 0 16px var(--acc-glow),
              inset 0 0 0 1px color-mix(in srgb, var(--acc) 30%, transparent);
}

/* ── focus-visible ring — tab item ── */
.aurora-tabs__item:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ────────────────────────────────────────────────
   §9  STAT CARD  .aurora-stat
──────────────────────────────────────────────── */
.aurora-stat {
  position: relative;
  overflow: hidden;
  background: var(--glass-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* glow corner */
.aurora-stat::after {
  content: '';
  position: absolute;
  top: -26px;
  right: -26px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow), transparent 70%);
  pointer-events: none;
}

.aurora-stat__label {
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.aurora-stat__value {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  margin-top: var(--sp-1);
  color: var(--text);
}

.aurora-stat__trend {
  font-style: normal;
  font-size: 11px;
  color: var(--ok);
  margin-left: var(--sp-1);
}

.aurora-stat__trend--warn   { color: var(--warn); }
.aurora-stat__trend--danger { color: var(--danger); }

/* PS-241 — `.aurora-spark` foi REMOVIDO daqui e das 12 views admin que o usavam.
   Eram seis barras com a altura cravada no proprio CSS (40%, 65%, 48%, 85%, 60%, 100%) e
   animacao de bounce: decoracao que imita serie historica. Em tenant novo — o estado em
   que todo onboarding comeca — o painel mostrava zeros debaixo de graficos coloridos, e
   foi assim que o dono fotografou a aba de Manutencao (PS-236). Nenhum dos 50 blocos lia
   dado: `tests/sem-grafico-decorativo.test.js` mede isso e falha se voltarem.
   Se um dia houver serie de verdade para mostrar, ela nasce ligada aos dados, nao aqui. */

/* ────────────────────────────────────────────────
   §9b  TEXTO  .aurora-link · .aurora-muted / .aurora-text--muted   (PS-220)

   Tres classes que o markup escrevia ha meses e que nao existiam em lugar nenhum. Nao quebravam
   nada — e por isso sobreviveram: o link saia com a cor padrao do navegador dentro do tema
   escuro, e o texto "esmaecido" saia com o mesmo peso do texto principal, que e o oposto do que
   se queria dizer.
──────────────────────────────────────────────── */
.aurora-link {
  color: var(--acc);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--acc) 40%, transparent);
  transition: color .15s ease, border-color .15s ease;
}
.aurora-link:hover {
  color: var(--acc-2);
  border-bottom-color: var(--acc-2);
}

/* Dois nomes para a mesma coisa porque as views usam os dois. Quem escrever um terceiro cai no
   check do portao, que e o ponto deste card. */
.aurora-muted,
.aurora-text--muted {
  color: var(--text-muted);
}

/* ────────────────────────────────────────────────
   §10  TOAST  .aurora-toast
──────────────────────────────────────────────── */
/* `--ok` e o padrao da base; a variante existe para o nome do markup nao mentir (PS-220). */
.aurora-toast,
.aurora-toast--ok {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ok-bg);
  border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent);
  border-radius: var(--r-md);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--ok);
  box-shadow: 0 0 22px color-mix(in srgb, var(--ok) 18%, transparent);
  max-width: 100%;
}

.aurora-toast svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.aurora-toast--warn {
  background: var(--warn-bg);
  border-color: color-mix(in srgb, var(--warn) 35%, transparent);
  color: var(--warn);
  box-shadow: 0 0 22px color-mix(in srgb, var(--warn) 18%, transparent);
}

.aurora-toast--danger {
  background: var(--danger-bg);
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
  color: var(--danger);
  box-shadow: 0 0 22px color-mix(in srgb, var(--danger) 18%, transparent);
}

.aurora-toast--info {
  background: var(--info-bg);
  border-color: color-mix(in srgb, var(--info) 35%, transparent);
  color: var(--info);
  box-shadow: 0 0 22px color-mix(in srgb, var(--info) 18%, transparent);
}

/* ────────────────────────────────────────────────
   §11  SPINNER  .aurora-spinner
──────────────────────────────────────────────── */
.aurora-spinner {
  display: inline-block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .1);
  border-top-color: var(--brand);
  animation: aurora-spin .8s linear infinite;
  box-shadow: 0 0 16px var(--glow);
  flex-shrink: 0;
}

.aurora-spinner--sm {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

.aurora-spinner--lg {
  width: 48px;
  height: 48px;
  border-width: 4px;
}

@keyframes aurora-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .aurora-spinner { animation: none; opacity: .5; }
}

/* ────────────────────────────────────────────────
   §12  PROGRESS BAR  .aurora-progress
──────────────────────────────────────────────── */
.aurora-progress {
  height: 7px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.aurora-progress__bar {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  box-shadow: 0 0 12px var(--glow);
  border-radius: var(--r-pill);
  transition: width .4s ease;
}

/* ────────────────────────────────────────────────
   §13  EMPTY STATE  .aurora-empty
──────────────────────────────────────────────── */
.aurora-empty {
  text-align: center;
  padding: var(--sp-8) var(--sp-6);
}

.aurora-empty svg {
  width: 84px;
  height: auto;
  overflow: visible;
  margin-bottom: var(--sp-2);
}

.aurora-empty .stroke {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px var(--brand));
}

.aurora-empty .wheel {
  fill: none;
  stroke: var(--brand-2);
  stroke-width: 2.4;
  filter: drop-shadow(0 0 5px var(--brand-2));
}

.aurora-empty__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 var(--sp-1);
}

.aurora-empty__sub {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 var(--sp-4);
}

/* ────────────────────────────────────────────────
   §13b  LINE-ART ICONS  .aurora-icon
──────────────────────────────────────────────── */
/*
  Usage: <svg class="aurora-icon" ...>
  Size is controlled by font-size on the parent or an explicit width/height.
  Color is currentColor — set CSS `color` to theme the icon.
  Glow is applied via drop-shadow filter.
*/
.aurora-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px currentColor);
  transition: filter .18s;
}

/* Larger size variant */
.aurora-icon--lg {
  width: 1.5em;
  height: 1.5em;
}

/* Stronger glow on hover / active parent */
a:hover .aurora-icon,
button:hover .aurora-icon,
.active .aurora-icon {
  filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 0 12px currentColor);
}

/* ────────────────────────────────────────────────
   §14  CARD / SECTION  .aurora-card  .aurora-section
──────────────────────────────────────────────── */
.aurora-card {
  background: var(--glass-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  position: relative;
  overflow: hidden;
}

/* ── opt-in: hover float + glow (accent) — só p/ cards clicáveis (ex.: cards de
   veículo). Adicione a classe .aurora-card--hover no markup. A especificidade
   (.aurora .aurora-card.aurora-card--hover:hover = 0,4,0) vence o
   .aurora [data-reveal].is-in { transform:none } (0,3,0) do motion.css, então
   o lift funciona mesmo nos cards com animação de entrada. ── */
.aurora .aurora-card.aurora-card--hover {
  transition: transform .3s cubic-bezier(.2, .75, .3, 1),
              box-shadow .3s ease,
              border-color .3s ease,
              opacity .55s cubic-bezier(.2, .75, .3, 1),
              filter .55s;
}
.aurora .aurora-card.aurora-card--hover:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--acc) 45%, transparent);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .5), 0 0 24px var(--acc-glow);
}
@media (prefers-reduced-motion: reduce) {
  /* respeita quem pede menos animação: mantém o glow, remove o movimento */
  .aurora .aurora-card.aurora-card--hover:hover { transform: none; }
}

.aurora-card__header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

/* icon chip */
.aurora-card__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  display: grid;
  place-items: center;
  color: var(--brand-ink);
  flex-shrink: 0;
}

.aurora-card__icon svg {
  width: 18px;
  height: 18px;
}

.aurora-card__title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.aurora-section {
  position: relative;
  z-index: var(--z-content);
  padding: var(--sp-8) var(--sp-4);
}

@media (min-width: 768px) {
  .aurora-section {
    padding: var(--sp-8) var(--sp-6);
  }
}

/* ────────────────────────────────────────────────
   §15  NAV  .aurora-nav  +  FAB  .aurora-fab
   Task 7 — complete CSS from plan
──────────────────────────────────────────────── */

/* base = mobile: bottom tab bar */
.aurora-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: rgba(8, 14, 22, .94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  z-index: var(--z-chrome);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.aurora-nav a,
.aurora-nav .aurora-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-height: 44px;
  justify-content: center;
  font-size: 10px;
  color: var(--text-faint);
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  transition: color .18s;
}

/* gap slot for FAB center space */
.aurora-nav .aurora-nav__gap {
  width: 54px;
  flex-shrink: 0;
}

/* ── focus-visible ring — nav items ── */
.aurora-nav a:focus-visible,
.aurora-nav .aurora-nav__item:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.aurora-nav a svg,
.aurora-nav .aurora-nav__item svg {
  width: 22px;
  height: 22px;
}

.aurora-nav a.active,
.aurora-nav .aurora-nav__item.active,
.aurora-nav a[aria-current="page"],
.aurora-nav .aurora-nav__item[aria-current="page"] {
  color: var(--info);
}

.aurora-nav a.active svg,
.aurora-nav .aurora-nav__item.active svg,
.aurora-nav a[aria-current="page"] svg,
.aurora-nav .aurora-nav__item[aria-current="page"] svg {
  filter: drop-shadow(0 0 6px var(--brand));
}

/* FAB */
.aurora-fab {
  position: fixed;
  bottom: 38px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: var(--brand-ink);
  border: 3px solid var(--bg);
  box-shadow: var(--shadow-glow);
  display: grid;
  place-items: center;
  z-index: calc(var(--z-chrome) + 1);
  cursor: pointer;
  transition: opacity .18s;
}

.aurora-fab:hover {
  opacity: .88;
}

/* ── focus-visible ring — fab ── */
.aurora-fab:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.aurora-fab svg {
  width: 24px;
  height: 24px;
}

/* main content needs bottom padding on mobile so content isn't under the bar */
.aurora-shell {
  padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}

/* content gutter — top gap below the topbar + side breathing room
   (was edge-to-edge: content used to hug the topbar and the rail) */
.page-content-aurora {
  padding: var(--sp-4) var(--sp-4) 0;
}

@media (min-width: 1024px) {
  .page-content-aurora {
    padding: var(--sp-6) var(--sp-6) 0;
  }
}

/* ────────────────────────────────────────────────
   §15b  DESKTOP SIDEBAR  .aurora-sidebar  (categorized, collapsible, scrollable)
   Replaces the icon-only rail: labels + groups (<details>) + scroll.
──────────────────────────────────────────────── */
.aurora-sidebar { display: none; }

@media (min-width: 1024px) {
  /* mobile bottom bar + FAB are hidden on desktop — the sidebar takes over */
  .aurora-nav { display: none; }
  .aurora-fab { display: none; }

  .aurora-shell {
    padding-bottom: 0;
    margin-left: var(--rail-w);
  }

  .aurora-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--rail-w);
    display: flex;
    flex-direction: column;
    background: rgba(8, 14, 22, .94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-right: 1px solid var(--border);
    z-index: var(--z-chrome);
  }

  /* scrollable nav area — long menus scroll instead of overflowing */
  .aurora-sidebar__nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 10px 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .aurora-sidebar__nav::-webkit-scrollbar { width: 6px; }
  .aurora-sidebar__nav::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 3px;
  }

  /* pinned footer (e.g. logout) — sits below the scroll area */
  .aurora-sidebar__foot {
    flex-shrink: 0;
    margin: 4px 10px calc(10px + env(safe-area-inset-bottom, 0px));
    padding-top: 10px;
    border-top: 1px solid var(--border);
  }
}

/* ── collapsible category group (<details>) — shared by sidebar + "Mais" sheet ── */
.aurora-navgroup {
  border-radius: var(--r-md);
}

.aurora-navgroup__sum {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  min-height: 38px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-faint);
  -webkit-user-select: none;
  user-select: none;
  transition: color .15s;
}

.aurora-navgroup__sum::-webkit-details-marker { display: none; }

/* chevron — rotates when the group is open */
.aurora-navgroup__sum::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s;
  flex-shrink: 0;
  margin-right: 4px;
  opacity: .7;
}

.aurora-navgroup[open] > .aurora-navgroup__sum::after {
  transform: rotate(-135deg);
}

.aurora-navgroup__sum:hover { color: var(--text-muted); }

.aurora-navgroup__sum:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.aurora-navgroup__items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 6px;
}

.aurora-navlink {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  min-height: 40px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: background .15s, color .15s;
}

.aurora-navlink svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.aurora-navlink:hover {
  background: var(--surface-2);
  color: var(--text);
}

.aurora-navlink.active {
  background: color-mix(in srgb, var(--acc) 16%, transparent);
  color: var(--text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 34%, transparent);
}

.aurora-navlink.active svg {
  color: var(--acc);
  filter: drop-shadow(0 0 5px var(--acc-glow));
}

.aurora-navlink:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ────────────────────────────────────────────────
   §16  DATA LIST / TABLE  .aurora-list
   Task 8 — mobile = cards, desktop = table grid
──────────────────────────────────────────────── */

/* ── mobile: cards (base) ── */
.aurora-list__head {
  display: none;
}

.aurora-list__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px;
  margin-bottom: 11px;
  min-height: 44px;
  text-decoration: none;
  color: var(--text);
  /* backdrop-filter removed — 10+ rows would create 10 compositing layers on mobile */
  transition: background .15s;
}

.aurora-list__cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-muted);
}

/* label prefix from data-label on mobile */
.aurora-list__cell[data-label]::before {
  content: attr(data-label);
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* first cell / lead cell — no label prefix */
.aurora-list__cell:first-child[data-label]::before {
  content: none;
}

.aurora-list__lead {
  font-weight: 700;
  color: var(--text);
  font-size: 15px;
}

/* ── desktop: table grid ── */
@media (min-width: 768px) {
  .aurora-list {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
  }

  .aurora-list__head {
    display: grid;
    grid-template-columns: 1.4fr 1fr .9fr .8fr;
    gap: 10px;
    padding: 11px 16px;
    background: var(--surface-2);
    color: var(--text-faint);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
  }

  .aurora-list__row {
    display: grid;
    grid-template-columns: 1.4fr 1fr .9fr .8fr;
    gap: 10px;
    align-items: center;
    margin: 0;
    border: none;
    border-top: 1px solid var(--border);
    border-radius: 0;
    padding: 12px 16px;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .aurora-list__row:hover {
    background: color-mix(in srgb, var(--brand) 5%, transparent);
  }

  .aurora-list__cell {
    display: block;
  }

  /* hide mobile labels on desktop */
  .aurora-list__cell[data-label]::before {
    content: none;
  }
}

/* ────────────────────────────────────────────────
   §17  OVERLAY + BOTTOM SHEET / DIALOG  .aurora-overlay  .aurora-sheet
   Task 9 — mobile = bottom sheet, desktop = centered dialog
──────────────────────────────────────────────── */
.aurora-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 7, 12, .6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: var(--z-modal);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, visibility .25s;
}

.aurora-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* ── base = mobile: bottom sheet ── */
.aurora-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(16, 23, 34, .97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border-strong);
  border-radius: 22px 22px 0 0;
  padding: 14px 18px calc(20px + env(safe-area-inset-bottom, 0));
  z-index: calc(var(--z-modal) + 1);
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
  box-shadow: 0 -16px 40px rgba(0, 0, 0, .5);
}

.aurora-sheet.open {
  transform: translateY(0);
}

.aurora-sheet .grip {
  width: 38px;
  height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .25);
  margin: 0 auto 12px;
}

.aurora-sheet h3,
.aurora-sheet .aurora-sheet__title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text);
}

.aurora-sheet__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  min-height: 44px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
}

.aurora-sheet__opt:last-of-type {
  border-bottom: none;
}

.aurora-sheet__chk {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid var(--brand);
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  display: grid;
  place-items: center;
  color: var(--brand);
  font-size: 11px;
  flex-shrink: 0;
}

.aurora-sheet__chk--off {
  border-color: var(--border-strong);
  background: transparent;
  color: transparent;
}

/* ── desktop: centered dialog ── */
@media (min-width: 768px) {
  .aurora-sheet {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    transform: translate(-50%, -46%);
    width: min(440px, 92vw);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    /* on desktop the sheet is no longer hidden via translateY(100%), so hide explicitly */
    opacity: 0;
    visibility: hidden;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1),
                opacity .25s,
                visibility .25s;
  }

  .aurora-sheet.open {
    transform: translate(-50%, -50%);
    opacity: 1;
    visibility: visible;
  }

  .aurora-sheet .grip {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aurora-sheet {
    transform: none;
    transition: opacity .2s, visibility .2s;
  }
  .aurora-sheet.open {
    transform: none;
  }
}

/* ────────────────────────────────────────────────
   §18  MODAL (inline, not sheet)  .aurora-modal
──────────────────────────────────────────────── */
.aurora-modal {
  border-radius: var(--r-lg);
  border: 1px solid var(--border-strong);
  background: rgba(18, 26, 38, .90);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  padding: var(--sp-4);
  position: relative;
  overflow: hidden;
}

/* glow header effect — uses a wider soft radial-gradient instead of filter:blur (compositor-safe) */
.aurora-modal::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  height: 100px;
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--glow) 60%, transparent) 0%, transparent 70%);
  pointer-events: none;
}

.aurora-modal h4,
.aurora-modal .aurora-modal__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  position: relative;
  margin: 0 0 var(--sp-2);
}

.aurora-modal p,
.aurora-modal .aurora-modal__body {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0 0 var(--sp-4);
  position: relative;
}

.aurora-modal__actions {
  display: flex;
  gap: var(--sp-2);
  justify-content: flex-end;
  position: relative;
}

/* ────────────────────────────────────────────────
   §19  body scroll lock when sheet is open
──────────────────────────────────────────────── */
.aurora.sheet-locked {
  overflow: hidden;
}

/* ────────────────────────────────────────────────
   §  WRAPPERS DE PÁGINA (ADMIN) — fonte única de largura
   Centralizado + alargado p/ desktop. Caps page-local removidos das views.
   max-width só atua ACIMA da própria largura → mobile (estreito) intacto.
──────────────────────────────────────────────── */
.aform-page-wrap,
.acfg-page-wrap  { max-width: 1040px; margin-inline: auto; }
.detail-page-wrap,
.aprc-page-wrap  { max-width: 1120px; margin-inline: auto; }

/* Símbolo da marca fleetec (chapado; sem o glow das line-icons) */
.fleetec-mark{display:inline-block;width:1em;height:1em;vertical-align:middle}

/* ────────────────────────────────────────────────
   §  .aurora-table — PS-131
   A classe era usada em `partials/veiculo-hub/imobilizacao.ejs` e NÃO EXISTIA no CSS: a
   tabela do histórico de comandos renderizava com o padrão do navegador, dentro de um tema
   escuro. Não aparecia ainda só porque `imobilizacao_comandos` está vazia — a promessa
   quebrava no primeiro comando registrado.
   Rola sozinha no eixo X: histórico tem 6 colunas e o painel do cliente é estreito.
──────────────────────────────────────────────── */
.aurora-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--text);
}
.aurora-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}
.aurora-table tbody td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.aurora-table tbody tr:last-child td { border-bottom: none; }
.aurora-table tbody tr:hover { background: var(--surface-2); }

/* ────────────────────────────────────────────────
   §20  PUBLIC MARKETING CHROME  .pubx-*   (layouts/public-aurora)

   PS-132 — estas 26 regras viviam num <style> inline dentro de
   `layouts/public-aurora.ejs`. CSS da area publica nao mora no EJS
   (ver docs: public-pages.css + page_css); e um <style> inline num
   LAYOUT e pior que num view, porque um erro nele apaga toda a
   superficie publica de uma vez.

   Movidas SEM alterar uma declaracao: a area publica e a vitrine das
   locadoras, entao o criterio deste lote e delta visual ZERO. O unico
   risco de um refactor assim e de CASCATA — sair do fim do <head> para
   dentro do components.css poe as regras ANTES do tenantThemeCSS e do
   page_css, e uma regra de igual especificidade que hoje perde passaria
   a ganhar. Medido antes de mover: zero mencoes a `pubx` em qualquer
   .css e zero seletores de elemento cru (header/nav/main/ul) nos quatro
   page_css publicos (landing/catalogo/sobre/acompanhar). Nao existe
   competidor, entao o movimento e neutro.

   `body.aurora { margin:0 }` NAO veio junto. O components.css e
   carregado pelos QUATRO layouts Aurora, e medido em producao o body do
   /admin tem `margin: 8px`. Trazer o reset como `body.aurora` teria
   arrancado 8px de toda tela de admin e de cliente, calada. Por isso o
   layout publico passou a marcar `<body class="aurora aurora-public">`
   e o reset e keyed nessa marca.

   O `rgba(7,13,21,.82)` da barra e um hex cru — o cabecalho deste
   arquivo pede que nao haja. Ficou como estava DE PROPOSITO: tokenizar
   mudaria a cor (o token --bg e #161818, outro tom), e isso e mudanca
   visual, nao refactor. Fica anotado como divida, nao resolvido de
   contrabando.
──────────────────────────────────────────────── */
body.aurora-public { margin: 0; padding: 0; }

/* ── barra de navegacao ── */
.pubx-nav {
  position: sticky; top: 0; z-index: var(--z-chrome, 100);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 20px;
  background: rgba(7,13,21,.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.pubx-brand { display:flex; align-items:center; gap:10px; text-decoration:none; min-width:0; }
.pubx-brand img { height: 36px; width:auto; object-fit:contain; }
.pubx-brand span { font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--brand); white-space:nowrap; }
.pubx-links { display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; }
.pubx-links a {
  display:inline-flex; align-items:center; min-height:40px; padding:0 12px;
  font-size:14px; font-weight:500; color:var(--text-muted); text-decoration:none;
  border-radius: var(--r-md); transition: color .18s, background .18s;
}
.pubx-links a:hover { color:var(--text); background:var(--surface-2); }
.pubx-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.pubx-hamb { display:none; background:none; border:none; color:var(--text); cursor:pointer; padding:8px; min-width:44px; min-height:44px; align-items:center; justify-content:center; }

/* ── folha mobile ── */
.pubx-mobile { display:none; flex-direction:column; gap:4px; padding:8px 16px 16px; border-bottom:1px solid var(--border); background:rgba(7,13,21,.96); }
.pubx-mobile.open { display:flex; }
.pubx-mobile a {
  display:flex; align-items:center; min-height:48px; padding:0 12px;
  font-size:15px; font-weight:500; color:var(--text); text-decoration:none; border-radius:var(--r-md);
}
.pubx-mobile a:hover { background:var(--surface-2); }
@media (max-width: 860px) {
  .pubx-links { display:none; }
  .pubx-hamb { display:inline-flex; }
}

/* ── conteudo acima da atmosphere ── */
.pubx-content { position:relative; z-index: var(--z-content, 1); }

/* ── botao flutuante de WhatsApp ── */
.pubx-wa {
  position: fixed; right: 18px; bottom: 18px; z-index: 200;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25D366; color: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.4); text-decoration:none;
}
.pubx-powered { text-align:center; font-size:11px; color:var(--text-faint); padding: 24px 16px 28px; position:relative; z-index:var(--z-content,1); }
.pubx-powered strong { color: var(--brand); }