/* Aura — componentes
   Depende de um arquivo de tema (aura-tema-*.css) carregado ANTES deste.
   Nenhuma cor literal aqui: tudo por variavel. */

*,*::before,*::after{ box-sizing:border-box }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-ui); font-size:var(--fs-body);
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--brand); text-decoration:none }
a:hover{ color:var(--brand-hover); text-decoration:underline }
input,textarea,select,button{ font-family:inherit }
:focus-visible{ outline:var(--focus-w) solid var(--focus); outline-offset:3px }

.aura-page{ max-width:1200px; margin:0 auto; padding:var(--sp-6) 20px 96px;
  display:flex; flex-direction:column; gap:var(--sp-7) }
.aura-section{ display:flex; flex-direction:column; gap:var(--sp-4) }
.aura-grid{ display:grid; gap:var(--sp-4);
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr)) }

/* ---------- barra de topo ---------- */
.aura-topbar{ position:sticky; top:0; z-index:30; background:var(--surface);
  border-bottom:var(--bw) solid var(--line); box-shadow:var(--shadow-sm) }
.aura-topbar__inner{ max-width:1200px; margin:0 auto; padding:12px 20px;
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3) }
.aura-topbar__brand{ background:var(--deep-grad); color:var(--ink-inv) }
.aura-topbar__spacer{ flex:1; min-width:12px }
.aura-nav{ display:flex; flex-wrap:wrap; align-items:center; gap:2px }
.aura-nav a{ font-size:15px; font-weight:600; padding:8px 14px;
  border-radius:var(--r-pill); color:var(--ink-2) }
.aura-nav a:hover{ background:var(--surface-2); color:var(--ink); text-decoration:none }
.aura-nav a[aria-current="page"]{ background:var(--brand-fill); color:var(--brand) }

/* ---------- migalha e cabecalho ---------- */
.aura-breadcrumb{ display:flex; align-items:center; gap:var(--sp-2);
  font-size:15px; color:var(--ink-2) }
.aura-breadcrumb span[aria-current]{ color:var(--ink); font-weight:600 }
.aura-pagehead{ display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap:var(--sp-5) }
.aura-pagehead h1{ margin:0; font-size:var(--fs-h1); font-weight:700; letter-spacing:-.03em; line-height:1.05 }
.aura-eyebrow{ font-size:var(--fs-label); font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-2) }

/* ---------- acoes: um objeto, quatro niveis ---------- */
.aura-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-size:var(--fs-body); font-weight:700; line-height:1.2;
  padding:13px 22px; border-radius:var(--r);
  border:var(--bw) solid transparent; background:transparent; color:var(--ink);
  cursor:pointer; text-decoration:none;
}
.aura-btn:hover{ text-decoration:none }
.aura-btn:focus-visible{ outline:var(--focus-w) solid var(--focus); outline-offset:3px }
.aura-btn[disabled],.aura-btn[aria-disabled="true"]{
  background:var(--surface-2); color:var(--ink-2);
  border-color:var(--line); border-style:dashed; cursor:not-allowed }
.aura-btn--primary{ background:var(--brand); color:var(--brand-ink); border-color:var(--brand) }
.aura-btn--primary:hover{ background:var(--brand-hover); border-color:var(--brand-hover); color:var(--brand-ink) }
.aura-btn--secondary{ background:var(--surface); color:var(--ink); border-color:var(--line-2) }
.aura-btn--secondary:hover{ background:var(--surface-2); color:var(--ink) }
.aura-btn--tertiary{ text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:2px }
.aura-btn--tertiary:hover{ background:var(--surface-2); color:var(--ink); text-decoration:underline }
.aura-btn--danger{ background:var(--danger-fill); color:var(--danger); border-color:var(--danger) }
.aura-btn--danger:hover{ background:var(--danger); color:var(--danger-ink) }
.aura-btn--pill{ border-radius:var(--r-pill) }
.aura-btn__spinner{ width:16px; height:16px; border:3px solid currentColor;
  border-top-color:transparent; border-radius:50%; animation:aura-spin .85s linear infinite }
.aura-btn.is-loading{ cursor:progress }
@keyframes aura-spin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){ .aura-btn__spinner{ animation-duration:3s } }

/* ---------- pontos e pilulas de estado (nunca so cor) ---------- */
.aura-dot{ width:13px; height:13px; border-radius:50%; background:currentColor; flex:none }
.aura-dot--square{ border-radius:3px }        /* atencao */
.aura-dot--diamond{ border-radius:0; transform:rotate(45deg) }  /* fora de uso */
.aura-chip{ display:inline-flex; align-items:center; gap:8px;
  font-size:15px; font-weight:700; padding:6px 13px; border-radius:var(--r-pill);
  background:var(--surface-2); color:var(--ink) }
.aura-chip--ok{ background:var(--ok-fill); color:var(--ok) }
.aura-chip--warn{ background:var(--warn-fill); color:var(--warn) }
.aura-chip--off{ background:transparent; color:var(--ink-2);
  border:var(--bw) dashed var(--line-2) }

/* ---------- painel de estado da aula ---------- */
.aura-state{ background:var(--deep-grad); border-radius:var(--r-lg);
  padding:clamp(24px,3vw,34px); display:grid; gap:var(--sp-6); align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); box-shadow:var(--shadow) }
.aura-state__label{ font-size:var(--fs-label); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-inv-2) }
.aura-state__name{ font-size:clamp(30px,3.8vw,42px); font-weight:800;
  letter-spacing:-.03em; color:var(--ink-inv); line-height:1 }
.aura-state__clock{ font-family:var(--font-mono); font-size:var(--fs-display);
  font-weight:700; color:var(--ink-inv); letter-spacing:-.04em;
  font-variant-numeric:tabular-nums; line-height:1 }
.aura-state__pills{ display:flex; flex-wrap:wrap; gap:9px }
.aura-state__pills .aura-chip{ background:color-mix(in srgb, var(--ink-inv) 14%, transparent);
  color:var(--ink-inv) }
.aura-state__pills .aura-chip--warn{ background:var(--warn-fill); color:var(--warn) }

/* ---------- faixa de retorno ---------- */
.aura-feedback{ display:flex; align-items:flex-start; gap:var(--sp-3);
  padding:17px 22px; border-radius:var(--r-lg); border:var(--bw) solid transparent;
  font-size:18px; line-height:1.55 }
.aura-feedback--sending{ background:var(--brand-fill); color:var(--brand); border-color:var(--brand); font-weight:700; align-items:center }
.aura-feedback--done{ background:var(--ok-fill); border-color:var(--ok); color:var(--ink) }

/* ---------- cartoes ---------- */
.aura-card{ background:var(--surface); border:var(--bw) solid var(--line);
  border-radius:var(--r-lg); padding:22px; display:flex; flex-direction:column;
  gap:var(--sp-3); box-shadow:var(--shadow-sm) }
.aura-card h3{ margin:0; font-size:var(--fs-h3); font-weight:700; letter-spacing:-.02em }
.aura-card p{ margin:0; font-size:var(--fs-support); line-height:1.55; color:var(--ink-2) }
.aura-card--active{ background:var(--warn-fill); border:var(--bw-strong) solid var(--warn) }
.aura-card--active p{ color:var(--ink) }
.aura-card__counter{ font-family:var(--font-mono); font-size:var(--fs-label); color:var(--ink-2) }
.aura-card__head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3) }

/* cartao de sala */
.aura-room{ background:var(--surface); border:var(--bw) solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden;
  display:flex; flex-direction:column }
.aura-room__body{ padding:22px; display:flex; flex-direction:column; gap:var(--sp-3) }
.aura-room__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:16px 22px; border-top:var(--bw) solid var(--line); background:var(--surface-2) }
.aura-room__actions .aura-btn--danger{ margin-left:auto }

/* numeros de resumo */
.aura-stat{ background:var(--surface); border:var(--bw) solid var(--line);
  border-radius:var(--r-lg); padding:20px; display:flex; flex-direction:column; gap:6px }
.aura-stat__value{ font-family:var(--font-mono); font-size:42px; font-weight:700;
  line-height:1; letter-spacing:-.05em; font-variant-numeric:tabular-nums }
.aura-stat__label{ font-size:var(--fs-support); color:var(--ink-2); line-height:1.35 }
.aura-stat__flag{ display:flex; align-items:center; gap:7px; font-size:var(--fs-label);
  font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ok) }
.aura-stat--attention{ background:var(--warn-fill); border-color:var(--warn) }
.aura-stat--attention .aura-stat__value,
.aura-stat--attention .aura-stat__flag{ color:var(--warn) }
.aura-stat--attention .aura-stat__label{ color:var(--ink) }

/* ---------- formulario ---------- */
.aura-field{ display:flex; flex-direction:column; gap:7px }
.aura-field > label{ font-size:var(--fs-support); font-weight:700 }
.aura-input,.aura-textarea,.aura-select{
  font-size:var(--fs-body); padding:12px 14px; background:var(--surface-2);
  color:var(--ink); border:var(--bw) solid var(--line); border-radius:var(--r); width:100% }
.aura-textarea{ resize:vertical }
.aura-hint{ font-size:15px; color:var(--ink-2) }
.aura-field--error > label{ color:var(--danger) }
.aura-field--error .aura-input,
.aura-field--error .aura-textarea,
.aura-field--error .aura-select{ background:var(--danger-fill); border:var(--bw-strong) solid var(--danger) }
.aura-error{ display:flex; align-items:center; gap:8px; font-size:15px;
  font-weight:700; color:var(--danger) }
.aura-error__icon{ width:16px; height:16px; border-radius:50%; background:var(--danger);
  color:var(--danger-ink); font-size:12px; font-weight:800;
  display:flex; align-items:center; justify-content:center; flex:none }

/* ---------- tabela ---------- */
.aura-tablewrap{ background:var(--surface); border:var(--bw) solid var(--line);
  border-radius:var(--r-lg); overflow:auto; box-shadow:var(--shadow-sm) }
.aura-table{ width:100%; min-width:720px; border-collapse:collapse; font-size:var(--fs-body) }
.aura-table thead tr{ background:var(--surface-2) }
.aura-table th{ text-align:left; padding:14px 20px; font-size:var(--fs-label);
  font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);
  border-bottom:var(--bw) solid var(--line) }
.aura-table th:last-child,.aura-table td:last-child{ text-align:right }
.aura-table td{ padding:16px 20px; border-bottom:var(--bw) solid var(--line) }
.aura-table tbody tr:hover{ background:var(--surface-2) }
.aura-table__code{ font-family:var(--font-mono); font-weight:700 }
.aura-table tr.is-revoked{ background:var(--surface-2) }
.aura-table tr.is-revoked .aura-table__code{ color:var(--ink-2); text-decoration:line-through }

/* ---------- painel lateral (gaveta) ---------- */
.aura-drawer__scrim{ position:fixed; inset:0; z-index:60;
  background:color-mix(in srgb, var(--deep) 65%, transparent); display:flex; justify-content:flex-end }
.aura-drawer{ width:440px; max-width:94vw; height:100%; background:var(--surface);
  display:flex; flex-direction:column; box-shadow:var(--shadow) }
.aura-drawer__head{ background:var(--deep-grad); color:var(--ink-inv);
  padding:22px 24px; display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-3) }
.aura-drawer__title{ font-size:24px; font-weight:800; letter-spacing:-.02em; color:var(--ink-inv) }
.aura-drawer__body{ flex:1; overflow-y:auto; padding:22px;
  display:flex; flex-direction:column; gap:var(--sp-5) }
.aura-drawer__group{ display:flex; flex-direction:column; gap:10px }
.aura-drawer__foot{ padding:18px 22px; display:flex; align-items:center; gap:12px;
  background:var(--surface-2); border-top:var(--bw) solid var(--line) }
.aura-check{ display:flex; align-items:center; gap:12px; font-size:var(--fs-body);
  padding:11px 14px; background:var(--surface-2); border-radius:var(--r) }
.aura-check input{ width:20px; height:20px; accent-color:var(--brand) }

/* ---------- tira destrutiva, erro, vazio, privacidade ---------- */
.aura-danger-strip{ display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:var(--sp-5); padding:20px 24px;
  background:var(--danger-fill); border:var(--bw) solid var(--danger); border-radius:var(--r-lg) }
.aura-danger-strip strong{ display:block; font-size:20px; color:var(--danger) }
.aura-alert{ display:flex; align-items:stretch; gap:var(--sp-3); padding:18px 22px;
  background:var(--danger-fill); border:var(--bw) solid var(--danger); border-radius:var(--r-lg) }
.aura-alert::before{ content:""; width:6px; border-radius:var(--r-pill); background:var(--danger); flex:none }
.aura-empty{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-3);
  padding:36px 26px; background:var(--surface);
  border:var(--bw) dashed var(--line-2); border-radius:var(--r-lg) }
.aura-privacy{ display:flex; align-items:stretch; background:var(--surface);
  border:var(--bw) solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm) }
.aura-privacy::before{ content:""; width:8px; background:var(--accent); flex:none }
.aura-privacy p{ margin:0; padding:20px 24px; font-size:18px; line-height:1.6; max-width:72ch; text-wrap:pretty }

/* ---------- rodape ---------- */
.aura-footer{ border-top:var(--bw) solid var(--line); padding:28px 20px;
  display:flex; justify-content:center; background:var(--bg) }
.aura-footer__sig{ font-size:15px; color:var(--ink-2) }
.aura-footer__sig b{ color:var(--ink); font-weight:700 }
.aura-footer__sig i{ color:var(--accent); font-weight:800; font-style:normal }

/* utilitarios */
.aura-mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums }
.aura-vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }