/* Tema e componentes base copiados do painel de monitoramento (Clariens-Painel-monitoramento-N8N). */
/* Cores por variável. Claro = padrão Clariens (Conecta): fundo claro, cartões brancos, roxo e azul.
   Escuro = paleta original do painel. O tema fica em <html data-theme>, escolhido pelo botão da barra. */
:root {
  --font: "IBM Plex Sans", "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --nav-w: 220px;
  --bar-h: 44px;
  
}

:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f3f8;
  --bg-glow: rgba(123, 31, 228, 0.07);
  --panel: #ffffff;
  --panel-2: #f6f2fe;
  --field: #ffffff;
  --stat-mix: 9%;
  /* Bloqueio em roxo (o vermelho fica só para erro); apto em azul; liberado antes em verde-azulado. */
  --bloq: #7b1fe4;
  --pendente: #c25e00;
  --proc: #c62828;
  --btn-bloquear: #c62828;
  --apto: #1c1fc8;
  --antecipado: #0b7a86;
  --th-bg: #ede3fd;
  --th-text: #5b0fc0;
  --hover: #f3ecfe;
  --login-base: #12148f;
  --login-bg: linear-gradient(135deg, #0d0f6e 0%, #1c1fc8 45%, #5a12c4 100%);
  --login-luz-1: rgba(160, 70, 255, 0.85);
  --login-luz-2: rgba(70, 190, 255, 0.55);
  --login-luz-3: rgba(255, 255, 255, 0.35);
  --line: rgba(74, 32, 140, 0.14);
  --text: #20183a;
  --muted: #625a7e;
  --brass: #7b1fe4;
  --brass-strong: #5b0fc0;
  --on-brass: #ffffff;
  --alert: #d84315;
  --alert-strong: #c62828;
  --ok: #2e7d4f;
  --ok-strong: #1e7a46;
  --steel: #1f3fd1;
  --tint-alert: rgba(198, 40, 40, 0.08);
  --tint-brass: rgba(123, 31, 228, 0.08);
  --backdrop: rgba(24, 12, 48, 0.45);
  --shadow: rgba(40, 20, 90, 0.18);
  /* Séries dos gráficos do Dashboard (Chart.js lê estes tokens). */
  --serie-1: #7b1fe4;
  --serie-2: #1c1fc8;
  --serie-3: #0b7a86;
  --serie-4: #c25e00;
  --serie-5: #1e7a46;
  --serie-6: #c62828;
  --tip-bg: #20183a;
  --tip-text: #ffffff;
  /* Barra inferior: azul do topo do Conecta. */
  --bar: #1c1fc8;
  --bar-text: #ffffff;
  --bar-muted: rgba(255, 255, 255, 0.8);
  --bar-line: rgba(255, 255, 255, 0.3);
  --bar-accent: #ffffff;
  /* Menu lateral: mesmo azul da barra do topo. */
  --side-bg: linear-gradient(180deg, #1c1fc8 0%, #12148f 100%);
  --side-text: #ffffff;
  --side-muted: rgba(255, 255, 255, 0.78);
  --side-line: rgba(255, 255, 255, 0.24);
  --side-active: rgba(255, 255, 255, 0.16);
  --side-accent: #ffffff;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #10140f;
  --bg-glow: rgba(196, 160, 86, 0.08);
  --panel: #171c16;
  --panel-2: #1d231c;
  --field: #10140f;
  --stat-mix: 22%;
  --bloq: #ff6a45;
  --pendente: #f0a04b;
  --proc: #ff6b6b;
  --btn-bloquear: #ff6a45;
  --apto: #e8b95a;
  --antecipado: #86b4d4;
  --th-bg: #171c16;
  --th-text: #a29c8b;
  --hover: #1d231c;
  --login-base: #0b0e0a;
  --login-bg: linear-gradient(135deg, #070906 0%, #10140f 50%, #1a2018 100%);
  --login-luz-1: rgba(196, 160, 86, 0.45);
  --login-luz-2: rgba(111, 154, 118, 0.4);
  --login-luz-3: rgba(232, 185, 90, 0.25);
  --line: rgba(232, 224, 204, 0.12);
  --text: #ece6d4;
  --muted: #a29c8b;
  --brass: #c4a056;
  --brass-strong: #e8b95a;
  --on-brass: #14120c;
  --alert: #d85a3c;
  --alert-strong: #ff6a45;
  --ok: #6f9a76;
  --ok-strong: #7ccf88;
  --steel: #86b4d4;
  --tint-alert: rgba(216, 90, 60, 0.14);
  --tint-brass: rgba(196, 160, 86, 0.1);
  --backdrop: rgba(8, 10, 8, 0.72);
  --shadow: rgba(0, 0, 0, 0.45);
  --serie-1: #c4a056;
  --serie-2: #86b4d4;
  --serie-3: #6fc3c9;
  --serie-4: #f0a35e;
  --serie-5: #7ccf88;
  --serie-6: #ff6a45;
  --tip-bg: #121610;
  --tip-text: #ece6d4;
  --bar: #121610;
  --bar-text: #ece6d4;
  --bar-muted: #a29c8b;
  --bar-line: rgba(232, 224, 204, 0.12);
  --bar-accent: #c4a056;
  --side-bg: #171c16;
  --side-text: #ece6d4;
  --side-muted: #a29c8b;
  --side-line: rgba(232, 224, 204, 0.12);
  --side-active: #1d231c;
  --side-accent: #c4a056;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(1200px 500px at 10% -10%, var(--bg-glow), transparent 50%),
    var(--bg);
  color: var(--text);
  font-family: var(--font);
}

body {
  padding-top: var(--bar-h);
}

button,
input,
select,
textarea,
a {
  font: inherit;
}

[hidden] {
  display: none !important;
}

.skip {
  position: absolute;
  left: -999px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip:focus {
  left: 16px;
  top: 16px;
  z-index: 20;
  background: var(--brass);
  color: var(--on-brass);
  padding: 8px 12px;
}

/* ---------- menu lateral ---------- */
.sidebar {
  --text: var(--side-text);
  --muted: var(--side-muted);
  --line: var(--side-line);
  --brass: var(--side-accent);
  --panel-2: var(--side-active);
  position: fixed;
  top: var(--bar-h);
  left: 0;
  bottom: 0;
  z-index: 30;
  width: var(--nav-w);
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 20px 20px 24px;
  overflow-y: auto;
  background: var(--side-bg);
  border-right: 1px solid var(--line);
  transform: translateX(-100%);
  visibility: hidden;
  transition:
    transform 0.2s ease,
    visibility 0s linear 0.2s;
}

body.is-nav-open .sidebar {
  transform: none;
  visibility: visible;
  transition: transform 0.2s ease;
}

.sidebar__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sidebar__brand {
  display: grid;
  gap: 4px;
  margin: 0;
}

.sidebar__logo {
  display: block;
  width: 150px;
  max-width: 100%;
  height: auto;
}

.sidebar__mark {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
}

.sidebar__title {
  font-size: 19px;
  font-weight: 500;
}

.sidebar__close {
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.sidebar__close:hover,
.sidebar__close:focus-visible {
  border-color: var(--brass);
  color: var(--brass);
  outline: 0;
}

.sidebar__nav {
  display: grid;
  gap: 4px;
}

.sidebar__nav a {
  color: var(--muted);
  text-decoration: none;
  padding: 8px 12px;
  border: 1px solid transparent;
}

.sidebar__nav a:hover,
.sidebar__nav a:focus-visible,
.sidebar__nav a[aria-current="page"] {
  color: var(--brass);
  border-color: var(--line);
  background: var(--panel-2);
  outline: 0;
}

.sidebar__label {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sidebar__user {
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.sidebar__user strong {
  color: var(--text);
  font-weight: 500;
}

.sidebar__user button {
  margin-left: 6px;
  border: 0;
  background: transparent;
  color: var(--brass);
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

.nav-backdrop {
  display: none;
}

.shell {
  min-width: 0;
  transition: margin-left 0.2s ease;
}

@media (min-width: 981px) {
  body.is-nav-open .shell {
    margin-left: var(--nav-w);
  }
}

/* ---------- barra de status ---------- */
.statusbar {
  --text: var(--bar-text);
  --muted: var(--bar-muted);
  --line: var(--bar-line);
  --brass: var(--bar-accent);
  --panel: transparent;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 40;
  height: var(--bar-h);
  box-shadow: 0 2px 8px var(--shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 10px 0 6px;
  background: var(--bar);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
}

.statusbar__left,
.statusbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.statusbar__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
}

.statusbar button {
  white-space: nowrap;
}

/* Unidade escolhida (js/pagina.js). Com mais de uma unidade é botão e abre a troca. */
.statusbar__unidade {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 220px;
  overflow: hidden;
  padding: 3px 10px;
  border: 1px solid var(--brass);
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

button.statusbar__unidade {
  cursor: pointer;
}

button.statusbar__unidade:hover,
button.statusbar__unidade:focus-visible {
  color: var(--brass);
  outline: 0;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  padding: 3px 10px;
  font-family: var(--font);
  font-size: 12px;
  cursor: pointer;
}

.nav-toggle:hover,
.nav-toggle:focus-visible,
.nav-toggle[aria-expanded="true"] {
  border-color: var(--brass);
  color: var(--brass);
  outline: 0;
}

.nav-toggle__bars {
  position: relative;
  width: 12px;
  height: 9px;
  border-top: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}

.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 2.25px;
  border-top: 1.5px solid currentColor;
}

.statusbar .ghost {
  padding: 3px 10px;
  font-size: 11px;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(111, 154, 118, 0.12);
}

.dot.is-busy {
  background: var(--brass);
  box-shadow: 0 0 0 4px rgba(196, 160, 86, 0.16);
}

.dot.is-error {
  background: var(--alert);
  box-shadow: 0 0 0 4px rgba(216, 90, 60, 0.16);
}

/* ---------- botões e campos ---------- */
.ghost,
.login button,
.btn {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  padding: 8px 12px;
  cursor: pointer;
}

.ghost:hover,
.ghost:focus-visible,
.btn:hover,
.btn:focus-visible,
.login button:hover {
  border-color: var(--brass);
  color: var(--brass);
  outline: 0;
}

.ghost:disabled,
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn--sm {
  padding: 4px 10px;
  font-size: 12px;
}

.btn--liberar {
  border-color: color-mix(in srgb, var(--ok-strong) 45%, transparent);
  color: var(--ok-strong);
}

.btn--bloquear {
  border-color: color-mix(in srgb, var(--btn-bloquear) 55%, transparent);
  color: var(--btn-bloquear);
}

.btn--bloquear:hover,
.btn--bloquear:focus-visible {
  border-color: var(--btn-bloquear);
  color: #ffffff;
  background: var(--btn-bloquear);
}

.btn--primario {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--on-brass);
  font-weight: 600;
}

.btn--primario:hover,
.btn--primario:focus-visible {
  background: var(--brass-strong);
  color: var(--on-brass);
}

.btn--perigo {
  background: var(--alert);
  border-color: var(--alert);
  color: #fff;
  font-weight: 600;
}

.btn--perigo:hover,
.btn--perigo:focus-visible {
  background: var(--alert-strong);
  color: #fff;
}

input,
select,
textarea {
  width: 100%;
  background: var(--field);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 9px 12px;
  outline: none;
}

textarea {
  resize: vertical;
  min-height: 92px;
  line-height: 1.45;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brass);
}

.api-error {
  margin: 0;
  padding: 10px 28px;
  background: var(--tint-alert);
  color: var(--alert-strong);
  font-size: 13px;
  border-bottom: 1px solid var(--line);
}

.aviso {
  margin: 0;
  padding: 10px 28px;
  background: var(--tint-brass);
  color: var(--brass-strong);
  font-size: 13px;
  line-height: 1.45;
  border-bottom: 1px solid var(--line);
}

/* ---------- cabeçalho da página ---------- */
.pagina__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 18px 28px 12px;
  border-bottom: 1px solid var(--line);
}

.pagina__head h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
}

.pagina__head p {
  margin: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
}

/* ---------- números (stat tiles) ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  padding: 10px 28px;
  border-bottom: 1px solid var(--line);
}

.stats--4 {
  grid-template-columns: repeat(4, 1fr);
}

.stats > * {
  --accent: var(--text);
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 14px 8px 12px;
  border-left: 3px solid var(--accent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) var(--stat-mix), transparent), transparent 80%);
}

.stats button.stat {
  font: inherit;
  color: inherit;
  text-align: left;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  cursor: pointer;
}

.stats button.stat:hover,
.stats button.stat:focus-visible,
.stats button.stat[aria-pressed="true"] {
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}

.stats .stat--pendente {
  --accent: var(--pendente);
}

.stats .stat--alert {
  --accent: var(--bloq);
}

.stats .stat--brass {
  --accent: var(--apto);
}

.stats .stat--steel {
  --accent: var(--antecipado);
}

.stats .stat--ok {
  --accent: var(--ok-strong);
}

.stats p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stats strong {
  color: var(--text);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.stats small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
}

/* ---------- filtros ---------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px 16px;
  padding: 14px 28px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.toolbar label,
.login label,
.modal label,
.campo {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.toolbar .grow {
  flex: 1 1 260px;
  min-width: 0;
}

.toolbar select,
.toolbar input[type="date"] {
  min-width: 150px;
}

.segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.segmented button {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  padding: 8px 10px;
  font-size: 13px;
  cursor: pointer;
}

.segmented button[aria-pressed="true"],
.segmented button:hover,
.segmented button:focus-visible {
  border-color: var(--brass);
  color: var(--brass);
  outline: 0;
}

.segmented button span {
  margin-left: 4px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
}

/* Filtros de situação: cada botão com a cor do seu status. */
.segmented button[data-situacao] {
  --cor: var(--brass);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.segmented button[data-situacao]:not([data-situacao=""])::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cor);
}

.segmented button[data-situacao="pendente"] {
  --cor: var(--pendente);
}

.segmented button[data-situacao="bloqueado"] {
  --cor: var(--bloq);
}

.segmented button[data-situacao="apto"] {
  --cor: var(--apto);
}

.segmented button[data-situacao="liberado_antecipado"] {
  --cor: var(--antecipado);
}

.segmented button[data-situacao="liberado"] {
  --cor: var(--ok-strong);
}

.segmented button[data-situacao][aria-pressed="true"],
.segmented button[data-situacao]:hover,
.segmented button[data-situacao]:focus-visible {
  border-color: var(--cor);
  color: var(--cor);
  background: color-mix(in srgb, var(--cor) 8%, transparent);
}

.segmented button[data-situacao] span {
  margin-left: 0;
}

/* ---------- tabelas ---------- */
.tabela-wrap {
  overflow-x: auto;
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tabela th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 12px;
  background: var(--th-bg);
  color: var(--th-text);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}

.tabela th:first-child,
.tabela td:first-child {
  padding-left: 28px;
}

.tabela th:last-child,
.tabela td:last-child {
  padding-right: 28px;
}

.tabela td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.tabela tbody tr:hover {
  background: var(--hover);
}

.tabela .num {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.tabela .mono {
  font-family: var(--mono);
  font-size: 12px;
  white-space: nowrap;
}

.tabela .sub {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.tabela .acoes-cel {
  text-align: right;
  white-space: nowrap;
}

.tabela--compacta th:first-child,
.tabela--compacta td:first-child {
  padding-left: 0;
}

.tabela--compacta th:last-child,
.tabela--compacta td:last-child {
  padding-right: 0;
}

.link-paciente {
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 0;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.link-paciente:hover,
.link-paciente:focus-visible {
  color: var(--brass);
  text-decoration: underline;
  outline: 0;
}

.vazio,
.rodape-lista {
  margin: 0;
  padding: 14px 28px;
  color: var(--muted);
  font-size: 13px;
}

.rodape-lista {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ---------- selos de situação (sempre com texto) ---------- */
.selo {
  --cor: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--cor) 55%, transparent);
  color: var(--cor);
  font-size: 12px;
  white-space: nowrap;
}

.selo::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--cor);
}

.selo--bloqueado {
  --cor: var(--bloq);
}

.selo--apto {
  --cor: var(--apto);
}

/* Falta no prazo sem bloqueio registrado: borda tracejada para não confundir com "Bloqueado". */
.selo--pendente {
  --cor: var(--pendente);
  border-style: dashed;
  background: color-mix(in srgb, var(--pendente) 10%, transparent);
}

.selo--pendente::before {
  background: transparent;
  border: 1px solid var(--cor);
}

.selo--liberado_antecipado {
  --cor: var(--antecipado);
}

.selo--liberado,
.selo--ok {
  --cor: var(--ok-strong);
}

.selo--falha {
  --cor: var(--alert-strong);
}

/* ---------- diálogos ---------- */
.login,
.modal {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--text);
}

.login::backdrop,
.modal::backdrop,
.gaveta::backdrop {
  background: var(--backdrop);
}

.login form {
  position: relative;
  z-index: 1;
  width: min(400px, calc(100vw - 32px));
  padding: 36px 32px 32px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  display: grid;
  gap: 14px;
}

.login form h1 {
  margin: 4px 0 6px;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
}

.login__logo {
  justify-self: center;
  width: 180px;
  height: auto;
}

.login__logo--branca {
  display: none;
}

:root[data-theme="dark"] .login__logo--preta {
  display: none;
}

:root[data-theme="dark"] .login__logo--branca {
  display: block;
}

.login__kicker,
.login h1 {
  margin: 0;
}

.login__kicker,
.modal__kicker {
  margin: 0;
  color: var(--brass);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 11px;
}

.login__copy,
.login__error {
  margin: 0;
  color: var(--muted);
}

.login__error {
  color: var(--alert-strong);
}

.login button {
  margin-top: 8px;
  background: var(--brass);
  color: var(--on-brass);
  border-color: var(--brass);
  font-weight: 600;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

/* Hover próprio: o hover geral pinta o texto de roxo, que some no fundo roxo do botão. */
.login form button[type="submit"]:hover:not(:disabled),
.login form button[type="submit"]:focus-visible {
  background: var(--brass-strong);
  border-color: var(--brass-strong);
  color: var(--on-brass);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--brass) 40%, transparent);
  transform: translateY(-1px);
}

.login form button[type="submit"]:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

.login form button[type="submit"]:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: none;
}

.login form button[type="submit"]:disabled {
  opacity: 0.85;
  cursor: wait;
  /* O hover geral dos botões pinta o texto de roxo; desabilitado (Entrando…) o texto continua visível. */
  color: var(--on-brass);
  border-color: var(--brass);
}

.modal__form {
  width: min(480px, calc(100vw - 32px));
  display: grid;
  gap: 14px;
  padding: 24px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.modal__form h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
}

.modal__contexto {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.modal__alerta {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid var(--brass-strong);
  background: var(--tint-brass);
  color: var(--brass-strong);
  font-size: 13px;
  line-height: 1.45;
}

.modal__contador {
  justify-self: end;
  margin-top: -8px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
}

.modal__erro {
  margin: 0;
  color: var(--alert-strong);
  font-size: 13px;
  line-height: 1.45;
}

.modal__acoes {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Gaveta lateral com o detalhe do paciente. */
.gaveta {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(640px, 100vw);
  max-width: 100vw;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  overflow-y: auto;
}

.gaveta__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 24px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.gaveta__head h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
}

.gaveta__head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
}

.gaveta__corpo {
  display: grid;
  gap: 20px;
  padding: 18px 24px 28px;
}

.gaveta__corpo h3 {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cartao {
  padding: 14px 16px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}

.cartao__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cartao__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

dl.dados {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 6px 14px;
  margin: 12px 0 0;
  font-size: 13px;
}

dl.dados dt {
  color: var(--muted);
}

dl.dados dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.linha-tempo {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.linha-tempo li {
  display: grid;
  gap: 3px;
  padding: 10px 0 10px 14px;
  border-left: 2px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.linha-tempo li.is-liberacao {
  border-left-color: var(--ok-strong);
}

.linha-tempo li.is-bloqueio {
  border-left-color: var(--bloq);
}

.linha-tempo .quando {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
}

.linha-tempo .motivo {
  color: var(--text);
  opacity: 0.9;
}

.linha-tempo .falha {
  color: var(--alert-strong);
  font-size: 12px;
}

/* Aviso rápido depois de uma ação. */
.toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 16px;
  background: var(--panel-2);
  border: 1px solid var(--ok);
  border-left-width: 4px;
  color: var(--text);
  font-size: 14px;
  box-shadow: 0 8px 24px var(--shadow);
}

.toast.is-erro {
  border-color: var(--alert);
}

/* ---------- gráficos (relatórios) ---------- */
.graficos {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 12px;
  padding: 16px 28px;
}

.grafico {
  min-width: 0;
  padding: 14px 16px 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}

.grafico--largo {
  grid-column: 1 / -1;
}

.grafico header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.grafico .grafico__sub {
  margin-top: 22px;
}

.grafico h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}

.grafico header p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

/* Colunas verticais (série única): barra fina, ponta arredondada de 4px apoiada na base. */
.colunas {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(34px, 88px);
  gap: 2px;
  height: 236px;
  overflow-x: auto;
  overflow-y: hidden;
}

.coluna {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: default;
}

.coluna__barra {
  width: min(28px, 70%);
  min-height: 2px;
  background: var(--brass);
  border-radius: 4px 4px 0 0;
}

.coluna:hover .coluna__barra,
.coluna:focus-visible .coluna__barra {
  background: var(--brass-strong);
}

.coluna:focus-visible {
  outline: 1px solid var(--brass);
}

.coluna__valor {
  margin-bottom: 4px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* O traço de cima do rótulo forma a linha de base do gráfico. */
.coluna__rotulo {
  align-self: stretch;
  padding-top: 6px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  text-align: center;
  white-space: nowrap;
}

/* Barras horizontais (ranking). */
.barras {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.barras li {
  display: grid;
  grid-template-columns: minmax(110px, 38%) 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.barras__nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.barras__trilho {
  display: block;
  height: 10px;
}

.barras__barra {
  display: block;
  height: 100%;
  min-width: 2px;
  background: var(--brass);
  border-radius: 0 4px 4px 0;
}

.barras li:hover .barras__barra {
  background: var(--brass-strong);
}

.barras__valor {
  min-width: 3ch;
  color: var(--text);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.dica {
  position: fixed;
  z-index: 70;
  pointer-events: none;
  padding: 6px 10px;
  background: var(--tip-bg);
  border: 1px solid var(--line);
  color: var(--tip-text);
  font-family: var(--mono);
  font-size: 12px;
  white-space: nowrap;
}

/* ---------- configuração ---------- */
.config {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  padding: 16px 28px;
}

.config .cartao h2 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 500;
}

.config .cartao p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.config code {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--brass-strong);
}

.prazos {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.prazos td {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.prazos td:last-child {
  text-align: right;
  font-family: var(--mono);
  color: var(--text);
}

/* ---------- responsivo ---------- */
@media (max-width: 1100px) {
  .stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .graficos {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .sidebar {
    width: min(300px, 86vw);
    box-shadow: 12px 0 32px var(--shadow);
  }

  body.is-nav-open .nav-backdrop {
    display: block;
    position: fixed;
    inset: var(--bar-h) 0 0 0;
    z-index: 25;
    background: var(--backdrop);
  }
}

@media (max-width: 720px) {
  .stats,
  .stats--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .pagina__head,
  .stats,
  .toolbar,
  .graficos,
  .config,
  .vazio,
  .rodape-lista,
  .api-error,
  .aviso {
    padding-left: 16px;
    padding-right: 16px;
  }

  .tabela th:first-child,
  .tabela td:first-child {
    padding-left: 16px;
  }

  .tabela th:last-child,
  .tabela td:last-child {
    padding-right: 16px;
  }

  dl.dados {
    grid-template-columns: 1fr;
  }

  #clock {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  body.is-nav-open .sidebar,
  .shell {
    transition: none;
  }
}

/* Botão de tema (claro / escuro) na barra inferior. */
.tema-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tema-toggle::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}

/* ---------- tela de login: tela cheia com fundo animado ---------- */
/* O diálogo cobre a página inteira: nada do painel aparece por trás. */
/* Sem sessão (marcado no <head>), o login já aparece antes do JS abrir o diálogo. */
.login[open],
:root[data-sessao="nao"] .login {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--login-bg);
}

:root[data-sessao="nao"] .login:not([open]) {
  z-index: 1000;
}

/* O painel por trás fica escondido até o login dar certo. */
:root[data-sessao="nao"] body {
  overflow: hidden;
  background: var(--login-base);
}

:root[data-sessao="nao"] body > :not(.login, script) {
  visibility: hidden;
}

.login::backdrop {
  background: var(--login-base);
}

/* Duas manchas de luz que flutuam devagar e um anel de cor que gira. */
.login__fundo,
.login__fundo span {
  position: absolute;
  pointer-events: none;
}

.login__fundo {
  inset: 0;
  overflow: hidden;
}

.login__fundo span {
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}

.login__fundo span:nth-child(1) {
  width: 55vmax;
  height: 55vmax;
  top: -18vmax;
  left: -12vmax;
  background: radial-gradient(circle, var(--login-luz-1), transparent 65%);
  animation: login-flutua-1 18s ease-in-out infinite alternate;
}

.login__fundo span:nth-child(2) {
  width: 50vmax;
  height: 50vmax;
  right: -14vmax;
  bottom: -20vmax;
  background: radial-gradient(circle, var(--login-luz-2), transparent 65%);
  animation: login-flutua-2 22s ease-in-out infinite alternate;
}

.login__fundo span:nth-child(3) {
  width: 80vmax;
  height: 80vmax;
  top: 50%;
  left: 50%;
  margin: -40vmax 0 0 -40vmax;
  filter: blur(40px);
  opacity: 0.6;
  background: conic-gradient(from 0deg, transparent 0deg, var(--login-luz-3) 60deg, transparent 140deg, var(--login-luz-1) 220deg, transparent 300deg);
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 40%, #000 52%, transparent 54%);
  mask: radial-gradient(circle, transparent 38%, #000 40%, #000 52%, transparent 54%);
  animation: login-gira 40s linear infinite;
}

@keyframes login-flutua-1 {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(18vw, 14vh) scale(1.15);
  }
}

@keyframes login-flutua-2 {
  from {
    transform: translate(0, 0) scale(1.1);
  }
  to {
    transform: translate(-16vw, -12vh) scale(0.95);
  }
}

@keyframes login-gira {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .login__fundo span {
    animation: none;
  }
}

/* ---------- perfis de acesso ---------- */
/* data-perfil é marcado no <head> antes da pintura; a API recusa o que o perfil não pode, isto só esconde. */
:root:not([data-perfil="ADMIN"]) [data-requer="admin"],
:root:not([data-perfil="EDITOR"]):not([data-perfil="ADMIN"]) [data-requer="editor"] {
  display: none !important;
}

.sidebar__user p {
  margin: 0;
}

.sidebar__user p + p {
  margin-top: 6px;
}

.sidebar__user p + p button:first-child {
  margin-left: 0;
}

.sidebar__perfil {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sidebar__perfil:empty {
  display: none;
}

/* Unidade escolhida (js/pagina.js monta a linha no topo de .sidebar__user). */
.sidebar__unidade {
  margin: 0 0 10px !important;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line);
  line-height: 1.45;
}

.sidebar__unidade-rotulo {
  display: block;
  color: var(--brass);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sidebar__unidade strong {
  color: var(--text);
}

.sidebar__unidade button {
  margin-left: 4px;
}

/* Unidades no cadastro de usuário (tela Usuários). */
.unidades-campo {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 10px 12px 12px;
  border: 1px solid var(--line);
}

/* Mesmo visual dos rótulos do formulário (LOGIN, NOME, PERFIL). */
.unidades-campo legend {
  padding: 0 4px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.unidades-campo__lista {
  display: grid;
  gap: 6px;
}

.unidades-campo__lista[hidden] {
  display: none;
}

/* O nome da unidade é conteúdo, não rótulo: sem a caixa alta dos labels do .modal. */
.modal .unidades-campo__item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
}

.unidades-campo__item input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--brass);
}

/* Escolha da unidade: botões maiores, um por unidade. */
.escolha--unidade {
  max-height: none;
  gap: 8px;
}

.escolha--unidade button {
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 500;
}

.selo--perfil-admin {
  --cor: var(--brass);
}

.selo--perfil-editor {
  --cor: var(--steel);
}

.selo--perfil-leitor {
  --cor: var(--muted);
}

/* ---------- tela de usuários ---------- */
.pagina__head--acao {
  align-items: center;
}

.pagina__head--acao h1 + p {
  margin-top: 4px;
}

.secao__titulo {
  margin: 0;
  padding: 26px 28px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tabela .linha--inativa td {
  color: var(--muted);
}

.tabela .acoes-cel .btn + .btn {
  margin-left: 6px;
}

.sub-inline {
  color: var(--muted);
  font-size: 11px;
}

.senha-temp {
  display: block;
  padding: 14px 16px;
  border: 1px dashed var(--brass);
  background: var(--tint-brass);
  color: var(--text);
  font-family: var(--mono);
  font-size: 20px;
  letter-spacing: 0.06em;
  text-align: center;
  user-select: all;
}

/* Tipo de consulta, procedimentos e profissional embaixo da falta vigente: quebra a linha em vez de alargar a coluna. */
.tabela .sub--agenda {
  max-width: 300px;
  white-space: normal;
  font-family: var(--font);
}

/* ---------- lista de pacientes: procedimento ao lado da data ---------- */
.tabela .falta-cel {
  min-width: 260px;
}

.falta-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}

.falta-linha .mono {
  font-family: var(--mono);
  font-size: 12px;
  white-space: nowrap;
}

/* O que o paciente ia fazer: vermelho, para saltar aos olhos na lista. */
.falta-proc {
  color: var(--proc);
  font-weight: 600;
  font-size: 12.5px;
}

.tabela td:first-child {
  min-width: 190px;
}

.faltas-selo {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 10.5px;
  white-space: nowrap;
}

.faltas-selo--alta {
  border-color: color-mix(in srgb, var(--proc) 55%, transparent);
  color: var(--proc);
}

/* ---------- preparando os dados (ao entrar: busca todas as telas de uma vez) ---------- */
.preparo {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(6px);
  animation: preparo-entra 0.25s ease both;
}

.preparo.is-saindo {
  animation: preparo-sai 0.35s ease both;
}

.preparo__cartao {
  width: min(380px, calc(100vw - 32px));
  padding: 28px 28px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.preparo__cartao h2 {
  margin: 14px 0 4px;
  font-size: 18px;
  font-weight: 600;
}

.preparo__cartao p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 13px;
}

/* Três arcos girando em velocidades diferentes. */
.preparo__anel {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 auto;
}

.preparo__anel span {
  position: absolute;
  inset: 0;
  border: 3px solid transparent;
  border-radius: 50%;
}

.preparo__anel span:nth-child(1) {
  border-top-color: var(--brass);
  animation: preparo-gira 1.1s linear infinite;
}

.preparo__anel span:nth-child(2) {
  inset: 8px;
  border-right-color: var(--steel);
  animation: preparo-gira 1.6s linear infinite reverse;
}

.preparo__anel span:nth-child(3) {
  inset: 16px;
  border-bottom-color: var(--ok-strong);
  animation: preparo-gira 2.2s linear infinite;
}

.preparo__lista {
  display: grid;
  gap: 6px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  text-align: left;
  font-size: 13px;
}

.preparo__lista li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}

.preparo__lista li.is-ok,
.preparo__lista li.is-falha {
  color: var(--text);
}

/* Bolinha girando enquanto busca; vira ✓ ou ✗ quando termina. */
.preparo__marca {
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid var(--line);
  border-top-color: var(--brass);
  border-radius: 50%;
  animation: preparo-gira 0.8s linear infinite;
}

.is-ok .preparo__marca,
.is-falha .preparo__marca {
  border: 0;
  animation: none;
  font-size: 13px;
  line-height: 14px;
  text-align: center;
}

.is-ok .preparo__marca::before {
  content: "✓";
  color: var(--ok-strong);
  font-weight: 700;
}

.is-falha .preparo__marca::before {
  content: "✗";
  color: var(--alert-strong);
  font-weight: 700;
}

.preparo__barra {
  height: 4px;
  overflow: hidden;
  background: var(--line);
  border-radius: 2px;
}

.preparo__barra span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--brass);
  transition: width 0.3s ease;
}

@keyframes preparo-gira {
  to {
    transform: rotate(360deg);
  }
}

@keyframes preparo-entra {
  from {
    opacity: 0;
  }
}

@keyframes preparo-sai {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .preparo,
  .preparo.is-saindo,
  .preparo__anel span,
  .preparo__marca {
    animation: none;
  }
}

/* ---------- solicitações de desbloqueio ---------- */
/* Contador do menu: quantas aguardam aprovação (em destaque para o admin, que aprova). */
.sidebar__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sidebar__badge {
  min-width: 20px;
  padding: 0 6px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}

.sidebar__badge:empty {
  display: none;
}

.sidebar__badge.is-destaque {
  border-color: var(--pendente);
  background: var(--pendente);
  color: #fff;
}

.selo--sol-pendente {
  --cor: var(--pendente);
  border-style: dashed;
  background: color-mix(in srgb, var(--pendente) 10%, transparent);
}

.selo--sol-aprovada {
  --cor: var(--apto);
}

.selo--sol-liberada {
  --cor: var(--ok-strong);
}

.selo--sol-recusada {
  --cor: var(--alert-strong);
}

.selo--sol-cancelada,
.selo--sol-encerrada {
  --cor: var(--muted);
}

/* Na lista de Pacientes: o selo da solicitação aberta leva à tela Solicitações. */
.sol-link {
  text-decoration: none;
}

.sol-link:hover .selo,
.sol-link:focus-visible .selo {
  background: color-mix(in srgb, var(--cor) 14%, transparent);
}

.sol-aviso {
  display: block;
  max-width: 260px;
  margin-top: 4px;
  color: var(--alert-strong);
  font-size: 12px;
  white-space: normal;
}

.tabela .motivo-cel {
  min-width: 220px;
  max-width: 340px;
  white-space: normal;
  overflow-wrap: break-word;
}

/* Até quatro botões por solicitação: quebram em duas linhas em vez de espremer o motivo. */
.tabela--solicitacoes .acoes-cel {
  width: 1%;
  min-width: 200px;
  white-space: normal;
}

.tabela--solicitacoes .acoes-cel .btn {
  margin: 0 0 6px 6px;
}

.tabela .acoes-cel .sol-link + .btn,
.tabela .acoes-cel .btn + .sol-link {
  margin-left: 6px;
}

.tabela .linha--destaque td {
  background: color-mix(in srgb, var(--pendente) 10%, transparent);
}

.toolbar .check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
}

/* Escolha do paciente na "Nova solicitação". */
.escolha {
  display: grid;
  gap: 4px;
  max-height: 240px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.escolha button {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.escolha button:hover,
.escolha button:focus-visible,
.escolha button[aria-selected="true"] {
  border-color: var(--brass);
  outline: 0;
}

.escolha button[aria-selected="true"] {
  background: color-mix(in srgb, var(--brass) 10%, transparent);
}

.escolha .sub {
  color: var(--muted);
  font-size: 12px;
}

.escolha__vazio {
  padding: 8px 10px;
  color: var(--muted);
  font-size: 13px;
}

/* ---------- carregamento no botão (ações que esperam o n8n e o CNN) ---------- */
.btn.is-ocupado,
.login button.is-ocupado {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: progress;
  opacity: 1;
}

.btn.is-ocupado::before,
.login button.is-ocupado::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: botao-gira 0.8s linear infinite;
}

.btn.is-ocupado:disabled {
  opacity: 0.92;
}

@keyframes botao-gira {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- botão Entrar ---------- */
.login .login__entrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Um brilho que passa devagar pelo texto. */
.login__entrar:not(.is-ocupado) .login__texto {
  background: linear-gradient(
      100deg,
      var(--on-brass) 0%,
      var(--on-brass) 38%,
      color-mix(in srgb, var(--on-brass) 35%, var(--brass)) 50%,
      var(--on-brass) 62%,
      var(--on-brass) 100%
    )
    0 0 / 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: entrar-brilho 3.2s ease-in-out infinite;
}

.login__seta {
  display: inline-block;
  transition: transform 0.2s ease;
}

.login__entrar:hover .login__seta,
.login__entrar:focus-visible .login__seta {
  transform: translateX(4px);
}

/* "Entrando" com três pontinhos piscando em sequência. */
.login__pontos span {
  display: inline-block;
  animation: entrar-ponto 1.2s ease-in-out infinite;
}

.login__pontos span:nth-child(2) {
  animation-delay: 0.2s;
}

.login__pontos span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes entrar-brilho {
  0% {
    background-position: 100% 0;
  }
  60%,
  100% {
    background-position: 0 0;
  }
}

@keyframes entrar-ponto {
  0%,
  80%,
  100% {
    opacity: 0.2;
  }
  40% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn.is-ocupado::before,
  .login button.is-ocupado::before {
    animation: none;
    border-right-color: currentColor;
    opacity: 0.6;
  }

  .login__entrar:not(.is-ocupado) .login__texto {
    animation: none;
    background: none;
    color: inherit;
  }

  .login__pontos span {
    animation: none;
    opacity: 1;
  }
}

/* ---------- Dashboard ---------- */
.stats--5 {
  grid-template-columns: repeat(5, 1fr);
}

.toolbar__nota {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
}

.painel-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 12px;
  padding: 8px 28px 20px;
}

.painel-card {
  min-width: 0;
  padding: 14px 16px 16px;
  border: 1px solid var(--line);
  background: var(--panel-2);
}

.painel-card--largo {
  grid-column: 1 / -1;
}

.painel-card header {
  margin-bottom: 10px;
}

.painel-card h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.painel-card header p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.painel-card__area {
  position: relative;
  height: 240px;
}

.painel-card__area--alta {
  height: 300px;
}

.painel-card--largo .painel-card__area {
  height: 260px;
}

.painel-card__vazio {
  display: grid;
  place-items: center;
  height: 100%;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

/* Variação em relação ao período anterior (nos indicadores). */
.var--sobe {
  color: var(--alert-strong);
}

.var--desce {
  color: var(--ok-strong);
}

.var--igual {
  color: var(--muted);
}

/* Mapa de calor dia da semana × hora: uma grade feita em HTML (cor pela intensidade). */
.calor {
  display: grid;
  grid-template-columns: 44px repeat(var(--horas, 14), minmax(26px, 1fr));
  gap: 3px;
  overflow-x: auto;
  padding-bottom: 4px;
  font-size: 11px;
}

.calor__rotulo {
  display: flex;
  align-items: center;
  color: var(--muted);
  font-family: var(--mono);
}

.calor__hora {
  color: var(--muted);
  font-family: var(--mono);
  text-align: center;
}

.calor__celula {
  height: 26px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--serie-1) var(--nivel, 0%), var(--panel));
  outline: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}

.calor__celula:focus-visible {
  outline: 2px solid var(--text);
}

@media (max-width: 1100px) {
  .stats--5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 720px) {
  .stats--5 {
    grid-template-columns: repeat(2, 1fr);
  }

  .painel-grade {
    grid-template-columns: 1fr;
    padding: 8px 16px 16px;
  }
}