/*
 * TEAcolhe ¢‚¬€ App Theme / Design System
 *
 * Folha principal do sistema. Pensada para PHP puro hoje e para Blade,
 * Livewire, Filament, Vue ou React amanhģ.
 *
 * Ordem das seĤĵes:
 * 01. Tokens / reset / acessibilidade
 * 02. Layout da ƒ¡rea interna
 * 03. NavegaĤģo contextual
 * 04. Tipografia e superfƒ­cies
 * 05. Componentes reutilizƒ¡veis
 * 06. Formulƒ¡rios
 * 07. Tabelas, listas e estados
 * 08. Painel / fila / pacientes / profissionais
 * 09. Agenda / kanban / operaĤģo
 * 10. Portal do cidadģo / login
 * 11. Responsividade
 */

/* =========================================================
   01. TOKENS / RESET / ACESSIBILIDADE
   ========================================================= */
:root {
  --color-primary: #1557c0;
  --color-primary-strong: #0f3f78;
  --color-primary-soft: #e7eefb;
  --color-accent: #c58a12;
  --color-accent-soft: #fff3d2;
  --color-success: #2f8656;
  --color-success-soft: #e1f1e8;
  --color-danger: #b94752;
  --color-danger-soft: #fbe6ea;
  --color-warning: #8a6512;
  --color-warning-soft: #fff3d2;
  --color-info: #2f679e;
  --color-info-soft: #e3eefa;
  --color-purple: #7357a5;
  --color-purple-soft: #ede4f6;
  --color-teal: #2c8c8a;
  --color-teal-soft: #d6eeed;
  --color-mint: #6cb28b;
  --color-mint-soft: #def0e3;
  --color-coral: #d97559;
  --color-coral-soft: #fce6dd;

  /* Slots visuais opcionais: troque somente os caminhos dos assets. */
  /* Slots visuais opcionais do login ¢‚¬€ ver public/assets/branding/README.md. */
  --tea-login-background-image: none;
  --tea-login-decor-1: url("branding/puzzle-blue.svg");
  --tea-login-decor-2: url("branding/puzzle-green.svg");
  --tea-login-decor-3: url("branding/puzzle-purple.svg");

  --color-bg: #eaf1f3;
  --color-surface: rgba(255, 255, 255, 0.86);
  --color-surface-muted: rgba(248, 251, 252, 0.85);
  --color-surface-raised: rgba(255, 255, 255, 0.94);
  --color-text: #15263a;
  --color-text-soft: #3d5468;
  --color-muted: #54697a;
  --color-border: rgba(140, 175, 196, 0.28);
  --color-border-strong: rgba(85, 130, 160, 0.40);
  --color-focus: rgba(21, 87, 192, .22);
  --color-overlay: rgba(8, 22, 36, 0.62);

  --font-sans: "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: .72rem;
  --text-sm: .82rem;
  --text-md: .92rem;
  --text-lg: 1.05rem;
  --text-xl: 1.35rem;
  --text-2xl: 1.75rem;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(24, 49, 73, .055);
  --shadow-md: 0 8px 22px rgba(24, 49, 73, .085);
  --shadow-lg: 0 14px 36px rgba(24, 49, 73, .12);

  --container: 1680px;
  --sidebar-width: 240px;
  --topbar-height: 64px;
  --transition-fast: 140ms ease;
  --transition: 180ms ease;

  /* Compatibilidade com temas antigos */
  --tea-blue: var(--color-primary);
  --tea-blue-dark: var(--color-primary-strong);
  --tea-blue-soft: var(--color-primary-soft);
  --tea-yellow: var(--color-accent);
  --tea-yellow-soft: var(--color-accent-soft);
  --tea-green: var(--color-success);
  --tea-green-soft: var(--color-success-soft);
  --tea-red: var(--color-danger);
  --tea-red-soft: var(--color-danger-soft);
  --tea-purple: var(--color-purple);
  --tea-purple-soft: var(--color-purple-soft);
  --tea-bg: var(--color-bg);
  --tea-surface: var(--color-surface);
  --tea-surface-2: var(--color-surface-muted);
  --tea-text: var(--color-text);
  --tea-muted: var(--color-muted);
  --tea-border: var(--color-border);
  --tea-border-strong: var(--color-border-strong);
  --tea-focus: var(--color-focus);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--color-text);
  background-color: var(--color-bg);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}
body > * { position: relative; z-index: 1; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a { color: var(--color-primary); text-decoration-color: rgba(21, 87, 192, .35); }
a:hover { color: var(--color-primary-strong); text-decoration-color: currentColor; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
::selection { background: #d3e3fb; color: var(--color-primary-strong); }

/* =========================================================
   02. LAYOUT DA ƒREA INTERNA
   ========================================================= */
.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  background: var(--color-bg);
}
.app aside,
aside {
  width: var(--sidebar-width);
  min-height: 100vh;
  padding: 24px 16px;
  background: linear-gradient(180deg, #173f4a 0%, #1d4e57 100%);
  color: #fff;
}
.app aside { position: sticky; top: 0; align-self: start; }
.app aside h1,
aside h1 { margin: 0; font-size: 1.35rem; }
.app aside p,
aside p { color: #b8d1d6; font-size: .75rem; line-height: 1.5; }
aside nav,
.app aside nav { display: grid; gap: 4px; margin-top: 22px; }
aside nav a,
.app aside nav a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  color: #e6f3f4;
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 700;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
aside nav a:hover,
aside nav a.ativo,
.app aside nav a:hover,
.app aside nav a.ativo { background: rgba(255,255,255,.14); color: #fff; }

.sidebar {
  width: var(--sidebar-width);
  min-height: 100vh;
  position: sticky;
  top: 0;
  align-self: start;
  padding: 24px 16px;
  background: linear-gradient(180deg, #173f4a 0%, #1d4e57 100%);
  color: #fff;
}
.main-content {
  width: 100%;
  min-width: 0;
}

main {
  width: 100%;
  max-width: var(--container);
  min-width: 0;
  margin: 18px auto 32px;
  padding: 22px 26px 36px;
  border-radius: var(--radius-lg);
}
.page-title-bar,
.top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(255, 255, 255, .82) 0%, rgba(232, 243, 244, .78) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 4px 14px rgba(15, 63, 74, .07), inset 0 1px 0 rgba(255, 255, 255, .65);
}
.page-title-bar h2,
.top h2 { margin: 0; color: var(--color-primary-strong); font-size: var(--text-xl); }
.page-title-bar small,
.top small { color: var(--color-muted); font-weight: 700; letter-spacing: .03em; }
.top .userbox { color: var(--color-muted); text-align: right; font-size: var(--text-xs); }
.top .badge { margin-left: .25rem; }

.topbar-mobile { display: none; }
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--color-overlay);
}
.overlay.ativo { display: block; }

/* Topbar contemporƒ¢nea, compatƒ­vel com o HTML atual */
.topbar-main {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--topbar-height);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 8px 20px;
  background: linear-gradient(135deg, rgba(23, 63, 74, 0.94) 0%, rgba(29, 78, 87, 0.94) 100%);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  color: #f1f7f8;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
  box-shadow: 0 4px 18px rgba(23, 63, 74, 0.26), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.topbar-main::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse 40% 70% at 100% 0%, rgba(108, 178, 139, .18), transparent),
    radial-gradient(ellipse 35% 70% at 0% 100%, rgba(44, 140, 138, .14), transparent);
  pointer-events: none;
  z-index: 0;
}
.topbar-main::after { display: none; }
.topbar-brand { display: flex; align-items: center; gap: 10px; min-width: 0; position: relative; z-index: 2; }
.topbar-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: #f1f7f8;
  text-decoration: none;
}
.topbar-brand-link:hover { color: #ffffff; }
.topbar-brand-mark,
.topbar-brand-link img,
.topbar-brand-link svg,
.topbar-main .topbar-brand img {
  width: 32px;
  height: 32px;
  max-width: 32px;
  max-height: 32px;
  object-fit: contain;
  flex: 0 0 32px;
}
.topbar-brand-copy { display: grid; gap: 1px; min-width: 0; }
.topbar-brand-copy strong,
.topbar-brand-name { font-size: 17px; line-height: 1.1; letter-spacing: -.01em; color: #fff; }
.topbar-brand-copy strong,
.topbar-brand-name { font-size: 17px; line-height: 1.1; letter-spacing: -.01em; color: #ffffff; }
.topbar-brand-copy small { color: rgba(241, 247, 248, .92); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.topbar-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  background: rgba(12, 35, 42, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  scrollbar-width: none;
  position: relative;
  z-index: 2;
}
.topbar-nav::-webkit-scrollbar { display: none; }
.topbar-nav a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 38px;
  padding: 9px 13px;
  border-radius: 9px;
  color: #faffff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.topbar-nav a:hover { background: rgba(255, 255, 255, .22); color: #ffffff; transform: translateY(-1px); }
.topbar-nav a.ativo { background: #ffffff; color: #173f4a; box-shadow: 0 3px 12px rgba(0, 0, 0, .22); }
.menu-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: rgba(255, 232, 235, .92);
  color: var(--color-danger);
  font-size: 10px;
  font-weight: 900;
}
.topbar-nav a.ativo .menu-count { background: #fff; color: var(--color-primary); box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.topbar-account {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: max-content;
  color: #ffffff;
  font-size: 12px;
  position: relative;
  z-index: 2;
}
.topbar-status {
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, .30);
  border-radius: var(--radius-pill);
  background: rgba(108, 178, 139, .22);
  color: #d6f0d8;
  font-weight: 900;
  box-shadow: 0 0 0 3px rgba(108, 178, 139, .10);
}
.topbar-user-name { color: #ffffff; font-weight: 700; }
.logout-form { margin: 0; }
.logout-form button,
.topbar-account .logout-form button {
  width: auto;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .30);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .14);
  color: #ffffff;
  font-weight: 800;
  box-shadow: none;
}
.logout-form button:hover,
.topbar-account .logout-form button:hover {
  background: rgba(255, 255, 255, .28);
  color: #ffffff;
  border-color: rgba(255, 255, 255, .45);
}
.topbar-menu-button,
.btn-menu { display: none; width: auto; }
.topbar-main .topbar-menu-button { display: none; }

/* =========================================================
   03. NAVEGAƒ€¡ƒÆ’O CONTEXTUAL
   ========================================================= */
.navigation-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  margin: 14px 0 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-border);
}
.nav-button,
.navigation-bar .nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-primary-strong);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
}
.nav-button:hover,
.navigation-bar .nav-button:hover { background: var(--color-primary-soft); border-color: #9fb9d1; }
.navigation-bar .nav-home { display: none; }
.breadcrumb { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--color-muted); font-size: 12px; }
.breadcrumb a { color: var(--color-primary); text-decoration: none; }
.breadcrumb strong { color: var(--color-text); }
.breadcrumb-separator { color: #9aabad; }

/* =========================================================
   04. TIPOGRAFIA / SUPERFƒCIES / GRID
   ========================================================= */
h1, h2, h3, h4, p { overflow-wrap: anywhere; }
h1, h2, h3, h4 { color: var(--color-primary-strong); }
.page-hero,
.section-header,
.report-hero,
.agenda-page-head,
.op-heading,
.patient-header-actions {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.page-hero { margin: 8px 0 16px; }
.page-hero h3,
.section-header h3,
.report-hero h3,
.agenda-page-head h3 { margin: 0 0 4px; }
.page-hero p,
.section-header p,
.report-hero p,
.agenda-page-head p { margin: 0; color: var(--color-muted); }
.page-hero-actions,
.report-hero-meta,
.report-actions,
.agenda-toolbar-actions,
.agenda-form-actions,
.visitor-status-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.section-kicker,
.agenda-modal-kicker,
.section-header .section-kicker,
.login-eyebrow { color: var(--color-primary); font-size: 11px; font-weight: 900; letter-spacing: .10em; text-transform: uppercase; }

.card,
.box,
.card-header,
.card-body,
.panel,
.report-table-card,
.report-summary-card,
.dashboard-card,
.visitor-card,
.solicitacao-card,
.agenda-calendar-card,
.agenda-side-card,
.triage-card {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(15, 63, 74, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.card, .box, .card-body, .panel, .visitor-card, .triage-card { padding: 18px; }
.card-header { padding: 16px 18px; border-bottom: 1px solid rgba(140, 175, 196, 0.22); }
.card-header h3, .card-header h4 { margin: 0; }
.card-body { padding-top: 18px; }
.card:hover, .box:hover, .panel:hover { box-shadow: 0 10px 28px rgba(15, 63, 74, 0.13); transform: translateY(-2px); }
.grid-2,
.duas,
.metrics-grid,
.report-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.grid-3,
.tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.cards,
.dashboard-grid,
.report-summary-grid { display: grid; gap: var(--space-4); }
.cards { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 18px 0; }
.dashboard-grid { grid-template-columns: repeat(5, minmax(150px, 1fr)); margin: 16px 0; align-items: stretch; }
.report-summary-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 16px; }
.full,
.inteiro { grid-column: 1 / -1; }

.cards > :nth-child(5n+1),
.dashboard-grid > :nth-child(5n+1) { border-top: 4px solid var(--color-primary); }
.cards > :nth-child(5n+2),
.dashboard-grid > :nth-child(5n+2) { border-top: 4px solid var(--color-teal); }
.cards > :nth-child(5n+3),
.dashboard-grid > :nth-child(5n+3) { border-top: 4px solid var(--color-success); }
.cards > :nth-child(5n+4),
.dashboard-grid > :nth-child(5n+4) { border-top: 4px solid var(--color-accent); }
.cards > :nth-child(5n+5),
.dashboard-grid > :nth-child(5n+5) { border-top: 4px solid var(--color-purple); }
.card small,
.dashboard-card small { display: block; color: var(--color-muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.card b,
.dashboard-card b { display: block; color: var(--color-text); font-size: 28px; line-height: 1.15; margin: 7px 0; }
.dashboard-card p { margin: 0; color: var(--color-muted); font-size: 13px; }
.dashboard-card.destaque { border-top-color: var(--color-primary); }
.dashboard-card.alerta { border-top-color: var(--color-danger); }
.dashboard-card.online-card { border-top-color: var(--color-purple); }
.mini-list { display: grid; gap: 8px; }
.mini-list > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid rgba(140, 175, 196, 0.22);
  border-radius: var(--radius-sm);
  background: rgba(248, 251, 252, 0.78);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.mini-list > div:hover { border-color: rgba(21, 87, 192, .35); background: rgba(255, 255, 255, 0.92); }
.mini-list strong { color: var(--color-primary-strong); }

/* =========================================================
   05. COMPONENTES REUTILIZƒVEIS
   ========================================================= */
.btn,
button,
.button,
.agenda-primary-action,
.agenda-secondary-action,
.export-link {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  padding: 9px 13px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: #fff;
  font: inherit;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.btn:hover,
.button:hover,
.agenda-primary-action:hover,
button:hover:not(:disabled) { background: var(--color-primary-strong); color: #fff; transform: translateY(-1px); }
.btn:disabled,
button:disabled { opacity: .58; cursor: not-allowed; transform: none; }
.btn-secundario,
.btn.secundario,
button.secundario,
button.secondary,
.button.secundario,
.agenda-secondary-action,
.export-link {
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-primary-strong);
  border-color: rgba(85, 130, 160, 0.32);
  box-shadow: 0 2px 6px rgba(15, 63, 74, 0.05);
}
.btn-secundario:hover,
button.secundario:hover,
button.secondary:hover,
.agenda-secondary-action:hover,
.export-link:hover { background: rgba(231, 238, 251, 0.95); color: var(--color-primary-strong); border-color: rgba(21, 87, 192, 0.42); }
.btn-perigo,
.btn.perigo,
button.perigo { background: var(--color-danger); border-color: var(--color-danger); color: #fff; }
.btn-perigo:hover,
button.perigo:hover { background: #963b45; border-color: #963b45; }
.btn-sucesso { background: var(--color-success); border-color: var(--color-success); }
.btn-alerta { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.btn-sm { min-height: 34px; padding: 7px 10px; font-size: 12px; }

.pill,
.badge,
.tag,
.report-status,
.status,
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}
.pill { background: var(--color-primary-soft); color: var(--color-primary-strong); border-color: #d2e0ef; }
.pill-ok,
.pill.ok,
.report-status-realizado,
.status-ok { background: var(--color-success-soft); color: var(--color-success); border-color: #c9e5d5; }
.pill-alerta,
.pill.alerta,
.report-status-cancelado,
.status-alerta { background: var(--color-danger-soft); color: var(--color-danger); border-color: #eccad0; }
.pill.warning,
.report-status-falta { background: var(--color-warning-soft); color: #795b0b; border-color: #ead7a3; }
.report-status-andamento { background: var(--color-info-soft); color: var(--color-info); }
.report-status-agendado { background: #f1f4f7; color: #536675; border-color: #dce4ea; }
.tag { background: var(--color-purple-soft); color: var(--color-purple); border-color: #ded3ef; }

.msg,
.erros,
.login-alert,
.agenda-form-errors,
.visitor-warning,
.visitor-safety,
.status-note {
  border-radius: var(--radius-sm);
}
.msg {
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid #cbe5d5;
  background: var(--color-success-soft);
  color: #275e3f;
}
.erros {
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid #ebcad0;
  background: var(--color-danger-soft);
  color: #7e2c38;
}
.erros ul { margin: 6px 0 0; padding-left: 18px; }
.dica,
.field-help {
  display: block;
  margin-top: 3px;
  color: var(--color-muted);
  font-size: 12px;
  line-height: 1.45;
}
.toast-message { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.toast-close {
  width: auto;
  min-height: 32px;
  padding: 0 7px;
  border: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  font-size: 20px;
}
.toast-close:hover { background: transparent; box-shadow: none; transform: none; }

.empty-state,
.empty,
.op-empty,
.kanban-empty,
.report-empty,
.agenda-day-empty,
.agenda-empty-box {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 28px 16px;
  color: var(--color-muted);
  text-align: center;
  background: rgba(232, 240, 243, 0.48);
  border: 1px dashed rgba(140, 175, 196, 0.42);
  border-radius: var(--radius-md);
}
.empty-state strong { color: var(--color-primary-strong); }

/* =========================================================
   06. FORMULƒRIOS
   ========================================================= */
.form,
.form-grid,
.triage-form,
.visitor-form,
.agenda-new-form {
  display: grid;
  gap: 12px;
}
.form,
.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-group,
.triage-form label,
.visitor-form label,
.agenda-new-form label,
.report-filters label,
.agenda-period-form label,
.agenda-modal-filters label,
.op-filter label,
.op-report label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
}
label { color: var(--color-muted); font-weight: 700; }
.form-group > label,
.form-grid > label { color: var(--color-muted); }
input,
select,
textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid rgba(85, 130, 160, 0.32);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-text);
  font: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}
textarea { min-height: 96px; resize: vertical; }
input:hover,
select:hover,
textarea:hover { border-color: rgba(21, 87, 192, .42); }
input:focus,
select:focus,
textarea:focus { border-color: var(--color-primary); outline: none; box-shadow: 0 0 0 3px var(--color-focus); background: #ffffff; }
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] { border-color: var(--color-danger); }
input[type="checkbox"],
input[type="radio"] { width: auto; min-height: 0; }
.checkgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; font-size: 13px; }
.check-inline,
.filtro-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.check-inline input,
.filtro-check input { flex: 0 0 auto; margin: 0; }
fieldset {
  min-width: 0;
  margin: 12px 0;
  padding: 14px;
  border: 1px solid rgba(140, 175, 196, 0.30);
  border-radius: var(--radius-md);
  background: rgba(232, 240, 243, 0.55);
}
legend { padding: 0 6px; color: var(--color-primary-strong); font-size: 13px; font-weight: 800; }
.data-tripla { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 8px; }

/* =========================================================
   07. TABELAS / LISTAS / DADOS
   ========================================================= */
.tabela-scroll,
.tablewrap,
.table-wrap,
.tabela-wrapper,
.report-table-wrapper { overflow-x: auto; border: 1px solid rgba(140, 175, 196, 0.24); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.78); }
table { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 0; font-size: 13px; }
th,
td { padding: 11px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(140, 175, 196, 0.18); }
th {
  color: var(--color-primary-strong);
  background: linear-gradient(180deg, rgba(247, 251, 252, 0.95) 0%, rgba(232, 240, 243, 0.92) 100%);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
tbody tr { transition: background-color var(--transition-fast); }
tbody tr:hover td { background: rgba(21, 87, 192, 0.07); }
tbody tr:last-child td { border-bottom: 0; }
td strong { color: var(--color-text); }
.acoes-fila { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
.acoes-fila form { margin: 0; }
.acoes-fila a.pill { justify-content: center; text-align: center; text-decoration: none; }
.grid-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 8px 0; }
.grid-info .rotulo { display: block; color: var(--color-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.grid-info .valor { display: block; color: var(--color-text); font-size: 14px; }
.subtitulo { margin: 18px 0 6px; padding-top: 14px; border-top: 1px solid var(--color-border); color: var(--color-primary-strong); font-size: 14px; }

/* =========================================================
   08. PAINEL / FILA / PACIENTES / PROFISSIONAIS / RELATƒ€œRIOS
   ========================================================= */
.dashboard-card {
  padding: 16px;
}
.dashboard-card.online-card a { color: var(--color-primary); font-weight: 800; text-decoration: none; }
.fila-tools {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px;
  margin-bottom: 14px;
  border: 1px solid rgba(140, 175, 196, 0.26);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(247, 251, 252, 0.82) 0%, rgba(232, 240, 243, 0.72) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.fila-tools form { margin: 0; }
.fila-tools button { width: auto; }
.fila-history { margin-top: 12px; }
.fila-history details { border: 1px solid rgba(140, 175, 196, 0.26); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.78); }
.fila-history summary { padding: 10px 12px; cursor: pointer; color: var(--color-primary-strong); font-size: 12px; font-weight: 800; }
.history-list { display: grid; gap: 8px; padding: 10px 12px 12px; }
.history-list > div { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; padding: 10px; border: 1px solid rgba(140, 175, 196, 0.22); border-radius: var(--radius-sm); background: rgba(248, 251, 252, 0.85); }
.history-list strong { color: var(--color-text); }
.history-list span,
.history-list small { color: var(--color-muted); }
.metrics-grid { margin-bottom: 14px; }
.report-hero h3 { font-size: 24px; }
.report-filter-card { padding: 16px; margin-bottom: 16px; border: 1px solid rgba(140, 175, 196, 0.26); border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(247, 251, 252, 0.82) 0%, rgba(232, 240, 243, 0.72) 100%); }
.report-filters .full { grid-column: 1 / -1; }
.report-actions { align-items: flex-end; }
.report-actions button { max-width: 180px; }
.report-summary-card { padding: 12px; }
.report-summary-card .label { color: var(--color-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.report-summary-card .value { margin-top: 4px; color: var(--color-primary-strong); font-size: 22px; font-weight: 800; }
.report-table-card { padding: 12px; }
.report-table { width: 100%; min-width: 860px; }
.report-empty { padding: 24px 16px; }
.solicitacoes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.solicitacao-card { padding: 16px; }
.solicitacao-card.pending { border-left: 4px solid var(--color-accent); }
.solicitacao-card.processed { border-left: 4px solid var(--color-success); }
.solicitacao-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.solicitacao-head h4 { margin: 0; }
.solicitacao-protocolo { color: var(--color-muted); font-family: var(--font-mono); font-size: 11px; }
.solicitacao-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.triage-summary { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.triage-summary > div { padding: 12px; border: 1px solid rgba(140, 175, 196, 0.24); border-radius: var(--radius-sm); background: linear-gradient(135deg, rgba(247, 251, 252, 0.85) 0%, rgba(232, 240, 243, 0.70) 100%); }
.triage-summary span { display: block; color: var(--color-muted); font-size: 10px; text-transform: uppercase; }
.triage-summary strong { display: block; margin-top: 4px; color: var(--color-text); font-size: 15px; }
.triage-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.triage-actions button,
.triage-actions .pill { width: auto; }
.triage-reject { margin-top: 8px; padding-top: 12px; border-top: 1px solid rgba(140, 175, 196, 0.26); }
.triage-reject button { width: auto; background: var(--color-danger); border-color: var(--color-danger); }
.patient-access-card,
.patient-access-reveal { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; margin: 12px 0; border: 1px solid rgba(140, 175, 196, 0.26); border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(247, 251, 252, 0.82) 0%, rgba(232, 240, 243, 0.72) 100%); }
.patient-access-card h4 { margin: 0 0 4px; color: var(--color-primary-strong); }
.patient-access-card p { margin: 0; color: var(--color-muted); font-size: 12px; }
.patient-access-card button { width: auto; min-width: 170px; }
.patient-access-reveal { grid-template-columns: repeat(2, minmax(0,1fr)); background: var(--color-warning-soft); border-color: #e9d58c; }
.patient-access-reveal > strong,
.patient-access-reveal > p { grid-column: 1 / -1; }
.patient-access-reveal span { display: block; color: #7b6c3a; font-size: 10px; text-transform: uppercase; }
.patient-access-reveal b { display: block; margin-top: 3px; color: var(--color-text); font-size: 18px; }
.patient-access-reveal p { margin: 0; color: #6b6554; font-size: 11px; }

/* =========================================================
   09. AGENDA / KANBAN / OPERAƒ€¡ƒÆ’O
   ========================================================= */
.agenda-page { padding: 2px 0; }
.agenda-page-head { margin-bottom: 16px; }
.agenda-page-head h3 { font-size: 1.45rem; }
.agenda-month-summary { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.agenda-month-summary > div { padding: 12px; border: 1px solid rgba(140, 175, 196, 0.24); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.86); box-shadow: 0 3px 12px rgba(15, 63, 74, 0.06); }
.agenda-month-summary strong { display: block; color: var(--color-primary-strong); font-size: 21px; }
.agenda-month-summary span { color: var(--color-muted); font-size: 11px; }
.agenda-toolbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.agenda-period-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.agenda-period-form label { min-width: 140px; }
.agenda-today { width: auto; }
.agenda-hint { color: var(--color-muted); font-size: 11px; }
.agenda-calendar-card { padding: 12px; }
.agenda-calendar { width: 100%; table-layout: fixed; min-width: 760px; }
.agenda-calendar th { padding: 9px; }
.agenda-calendar td { width: 14.285%; padding: 7px; vertical-align: top; background: transparent; }
.agenda-calendar td.is-outside { background: rgba(232, 240, 243, 0.45); }
.agenda-day {
  display: grid;
  gap: 8px;
  min-height: 120px;
  padding: 10px;
  border: 1px solid rgba(140, 175, 196, 0.22);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}
.agenda-day:hover { border-color: rgba(21, 87, 192, .42); background: rgba(255, 255, 255, 0.95); box-shadow: 0 6px 18px rgba(15, 63, 74, 0.10); }
.agenda-day.is-selected { border-color: var(--color-primary); background: var(--color-primary-soft); box-shadow: inset 0 0 0 1px var(--color-primary); }
.agenda-day.is-today .agenda-day-head strong { color: var(--color-primary); }
.agenda-day-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.agenda-day-head strong { color: var(--color-text); font-size: 13px; }
.agenda-day-head span { color: var(--color-muted); font-size: 10px; }
.agenda-day-list { display: grid; gap: 6px; }
.agenda-day-item { display: grid; gap: 2px; padding: 7px 8px; border-left: 3px solid var(--color-primary); border-radius: 7px; background: rgba(247, 251, 252, 0.85); }
.agenda-day-item time { color: var(--color-primary-strong); font-size: 12px; font-weight: 900; }
.agenda-day-item span { color: var(--color-muted); font-size: 10px; }
.agenda-day-item.status-confirmado { border-left-color: #2f7da9; }
.agenda-day-item.status-chegou { border-left-color: var(--color-success); }
.agenda-day-item.status-em-atendimento { border-left-color: var(--color-primary); }
.agenda-day-item.status-realizado { border-left-color: var(--color-success); }
.agenda-day-item.status-falta-justificada { border-left-color: var(--color-accent); }
.agenda-day-item.status-falta-nao-justificada,
.agenda-day-item.status-falta-nģo-justificada { border-left-color: var(--color-danger); }
.agenda-day-item.status-cancelado { border-left-color: var(--color-danger); }
.agenda-day-item.status-reagendado { border-left-color: var(--color-purple); }
.agenda-more { color: var(--color-primary); font-size: 10px; font-weight: 800; }
.agenda-help-card { padding: 14px; }
.agenda-help-card strong { color: var(--color-primary-strong); }
.agenda-view-switch { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid rgba(140, 175, 196, 0.26); border-radius: 9px; background: rgba(255, 255, 255, 0.82); }
.agenda-view-label { margin-right: 4px; color: var(--color-muted); font-size: 11px; font-weight: 800; }
.agenda-view-btn { min-height: 32px; padding: 6px 9px; border: 0; border-radius: 7px; background: transparent; color: var(--color-text-soft); font-size: 11px; font-weight: 800; cursor: pointer; }
.agenda-view-btn:hover { background: var(--color-primary-soft); }
.agenda-view-btn.is-active { background: var(--color-primary); color: #fff; }

.agenda-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
  background:
    linear-gradient(135deg, rgba(15, 32, 48, 0.55), rgba(23, 63, 74, 0.62)),
    radial-gradient(ellipse at center, rgba(44, 140, 138, 0.18), transparent 65%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.agenda-modal-backdrop.is-open,
.agenda-modal-backdrop.is-visible { display: flex; }
body.agenda-modal-open { overflow: hidden; }
.agenda-modal {
  width: min(1180px, calc(100% - 24px));
  height: min(860px, calc(100dvh - 48px));
  max-height: none;
  min-height: 0;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden !important;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 24px;
  background: #f7fbfc;
  box-shadow: 0 28px 75px rgba(8, 22, 36, 0.32), 0 2px 0 rgba(255,255,255,.85) inset;
}
.agenda-modal-body {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
  min-width: 0;
  min-height: 0 !important;
  height: 100%;
  overflow-y: auto !important;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-gutter: stable;
  padding: 18px 20px 24px;
}
.agenda-modal-header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 18px 20px; border-bottom: 1px solid var(--color-border); flex: 0 0 auto; }
.agenda-modal-header h2 { margin: 2px 0 4px; color: var(--color-primary-strong); font-size: 20px; }
.agenda-modal-header p { margin: 0; color: var(--color-muted); font-size: 12px; }
.agenda-modal-close { width: auto; min-width: 64px; min-height: 32px; padding: 6px 9px; background: #fff; color: var(--color-primary-strong); border: 1px solid var(--color-border-strong); box-shadow: none; transform: none; }
.agenda-modal-close:hover { transform: none; box-shadow: none; }
.agenda-modal-filters { padding: 14px 20px; border-bottom: 1px solid rgba(140, 175, 196, 0.22); background: rgba(247, 251, 252, 0.85); flex: 0 0 auto; }
.agenda-modal-filters form { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.agenda-filter-search { grid-column: span 2; }
.modal-section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.modal-section-head h3 { margin: 0; color: var(--color-primary-strong); }
.modal-section-head p { margin: 2px 0 0; color: var(--color-muted); font-size: 11px; }
.agenda-appointment-list { display: grid; gap: 8px; }
.agenda-appointment { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 11px 12px; border: 1px solid rgba(140, 175, 196, 0.22); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.86); }
.agenda-appointment-main { min-width: 0; }
.agenda-appointment-main time { display: block; color: var(--color-primary); font-size: 13px; font-weight: 900; }
.agenda-appointment-main strong { display: block; margin-top: 2px; color: var(--color-text); }
.agenda-appointment-main span,
.agenda-appointment-main small { display: block; margin-top: 2px; color: var(--color-muted); font-size: 11px; }
.agenda-status-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.agenda-status-form label { min-width: 150px; }
.agenda-status-form button { width: auto; }
.agenda-day-sidebar { display: grid; gap: 12px; }
.agenda-side-card { padding: 14px; }
.agenda-side-card h3 { margin: 0 0 10px; color: var(--color-primary-strong); font-size: 15px; }
.agenda-occupancy-list { display: grid; gap: 7px; }
.agenda-occupancy-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.agenda-occupancy-row:last-child { border-bottom: 0; }
.agenda-occupancy-row strong { color: var(--color-text); }
.agenda-occupancy-row span { color: var(--color-muted); font-size: 11px; }
.agenda-occupancy-value { font-weight: 900; color: var(--color-primary); }
.agenda-details summary { cursor: pointer; color: var(--color-primary-strong); font-weight: 800; }
.agenda-details > p { color: var(--color-muted); font-size: 11px; }
.agenda-filter-details { min-height: 0; margin: 0 22px 10px; border: 1px solid rgba(140, 175, 196, 0.24); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.86); }
.agenda-filter-details > summary { padding: 10px 12px; cursor: pointer; color: var(--color-primary-strong); font-size: 12px; font-weight: 800; }
.agenda-new-focus { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; padding: 14px 16px; margin-bottom: 14px; border: 1px solid rgba(44, 140, 138, 0.32); border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(214, 238, 237, 0.65) 0%, rgba(247, 251, 252, 0.80) 100%); }
.agenda-new-focus h3 { margin: 2px 0 3px; color: var(--color-primary-strong); font-size: 18px; }
.agenda-new-focus p { margin: 0; color: var(--color-muted); font-size: 12px; max-width: 720px; }
.agenda-new-panel { display: none; padding: 14px; margin-bottom: 14px; border: 1px solid rgba(140, 175, 196, 0.28); border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(247, 251, 252, 0.85) 0%, rgba(232, 240, 243, 0.72) 100%); }
.agenda-new-panel.is-open { display: block; }
.agenda-new-panel-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 12px; }
.agenda-new-panel-head strong { color: var(--color-primary-strong); font-size: 15px; }
.agenda-new-panel-head span { display: block; margin-top: 3px; color: var(--color-muted); font-size: 11px; }
.agenda-form-errors { margin-bottom: 12px; padding: 11px 12px; border: 1px solid #e4b0aa; background: #fff6f5; color: #8a3b35; font-size: 12px; }
.agenda-form-errors strong { display: block; margin-bottom: 5px; }
.agenda-form-errors ul { margin: 0; padding-left: 18px; }
.agenda-inline-warning { display: flex; flex-direction: column; gap: 7px; padding: 12px; margin-top: 8px; border: 1px solid #ead9ae; border-radius: var(--radius-sm); background: var(--color-warning-soft); }
.agenda-inline-warning strong { color: #705719; font-size: 12px; }
.agenda-inline-warning span { color: #6b685b; font-size: 11px; line-height: 1.45; }
.agenda-empty-action { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 22px; }
.agenda-empty-action strong { color: var(--color-primary-strong); font-size: 15px; }
.agenda-empty-action span { color: var(--color-muted); }
.agenda-empty-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.kanban-grid,
.kanban { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 4px; }
.kanban-column,
.column { min-width: 0; padding: 12px; border: 1px solid rgba(140, 175, 196, 0.24); border-top: 3px solid var(--color-teal); border-radius: var(--radius-md); background: rgba(248, 251, 252, 0.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.kanban-column h3,
.column h3 { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--color-primary-strong); font-size: 14px; }
.kanban-column h3 b,
.column h3 b { padding: 2px 7px; border-radius: var(--radius-pill); background: rgba(44, 140, 138, 0.18); color: var(--color-primary-strong); font-size: 11px; }
.kanban-card,
.op-card,
.card.card-kanban,
.column > .card { padding: 10px; margin: 8px 0; border: 1px solid rgba(140, 175, 196, 0.22); border-radius: 9px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 3px 10px rgba(15, 63, 74, 0.06); }
.kanban-card time,
.op-card time,
.column > .card time { display: block; color: var(--color-primary); font-size: 16px; font-weight: 900; }
.kanban-card strong,
.kanban-card small,
.op-card strong,
.op-card small,
.column > .card strong,
.column > .card small { display: block; }
.kanban-card small,
.op-card small,
.column > .card small { margin-top: 4px; color: var(--color-muted); font-size: 11px; }
.kanban-card select,
.kanban-card-actions select,
.column > .card select { width: 100%; margin-top: 8px; }
.kanban-card-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.kanban-card-main strong { color: var(--color-text); }
.kanban-card-actions { display: flex; gap: 6px; margin-top: 8px; }
.kanban-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); }
.kanban-column.status-confirmado { border-top-color: #2f7da9; }
.kanban-column.status-chegou { border-top-color: var(--color-success); }
.kanban-column.status-em-atendimento { border-top-color: var(--color-primary); }
.kanban-column.status-realizado { border-top-color: var(--color-success); }
.kanban-column.status-falta-justificada,
.kanban-column.status-falta-nao-justificada { border-top-color: var(--color-accent); }
.kanban-column.status-cancelado { border-top-color: var(--color-danger); }
.op-filter,
.op-report { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 14px; margin-bottom: 14px; border: 1px solid rgba(140, 175, 196, 0.26); border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(247, 251, 252, 0.82) 0%, rgba(232, 240, 243, 0.72) 100%); }
.op-filter label,
.op-report label { min-width: 145px; }
.op-wide { flex: 1 1 220px; }
.op-filter button,
.op-report button { width: auto; }
.op-kanban { display: grid; grid-template-columns: repeat(8, minmax(170px,1fr)); gap: 9px; overflow-x: auto; padding-bottom: 6px; }
.op-col { min-height: 250px; padding: 10px; border: 1px solid rgba(140, 175, 196, 0.24); border-top: 3px solid var(--color-teal); border-radius: var(--radius-md); background: rgba(248, 251, 252, 0.65); }
.op-col h4 { display: flex; justify-content: space-between; margin: 0 0 9px; color: var(--color-primary-strong); font-size: 12px; }
.op-col h4 span { padding: 2px 6px; border-radius: var(--radius-pill); background: rgba(44, 140, 138, 0.18); }
.op-summary { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 12px 14px; margin-bottom: 10px; border-radius: var(--radius-sm); background: linear-gradient(135deg, rgba(225, 241, 232, 0.85) 0%, rgba(214, 238, 237, 0.78) 100%); color: #1f5e44; border: 1px solid rgba(47, 134, 86, 0.20); }
.op-summary strong { font-size: 20px; }
.op-summary a { color: #277454; font-weight: 800; }

/* =========================================================
   10. PORTAL DO CIDADƒÆ’O / LOGIN
   ========================================================= */
.public-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: linear-gradient(135deg, rgba(23, 63, 74, 0.94) 0%, rgba(29, 78, 87, 0.94) 100%);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 18px rgba(23, 63, 74, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.public-topbar-inner { max-width: 1180px; min-height: 72px; margin: 0 auto; padding: 8px 20px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.public-brand { display: flex; align-items: center; gap: 9px; color: #ffffff; text-decoration: none; }
.public-brand-mark,
.public-brand img { width: 34px; height: 34px; max-width: 34px; max-height: 34px; object-fit: contain; }
.public-brand-copy { display: grid; gap: 1px; }
.public-brand-copy strong { color: #ffffff; font-size: 16px; }
.public-brand-copy small { color: rgba(241, 247, 248, 0.92); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.public-topnav,
.visitor-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  flex-wrap: wrap;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  background: rgba(12, 35, 42, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.public-topnav a,
.visitor-nav a { padding: 9px 13px; border-radius: 9px; color: #ffffff; font-size: 13px; font-weight: 800; text-decoration: none; transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); }
.public-topnav a:hover,
.visitor-nav a:hover { background: rgba(255, 255, 255, .22); color: #ffffff; transform: translateY(-1px); }
.visitor-nav a:active { transform: translateY(1px); }
.consulta-destacada { animation: visitorTargetPulse 900ms ease; }
@keyframes visitorTargetPulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.30); } 100% { box-shadow: 0 0 0 12px rgba(255,255,255,0); } }
.public-topnav .public-topnav-active,
.visitor-nav a.nav-active,
.visitor-nav a[aria-current="page"] { background: #ffffff; color: var(--color-primary-strong); box-shadow: 0 3px 12px rgba(0,0,0,.22); }

.login-main {
  position: relative;
  width: min(1180px, calc(100% - 40px));
  min-height: calc(100vh - var(--topbar-height) - 36px);
  margin: 18px auto 32px;
  padding: 56px 48px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 18px 48px rgba(15, 63, 74, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.login-art-slots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.login-art-slot { position: absolute; display: block; width: 180px; height: 180px; background-repeat: no-repeat; background-size: contain; background-position: center; opacity: .55; }
.login-art-slot-1 { left: 2%; bottom: 6%; background-image: var(--tea-login-decor-1); }
.login-art-slot-2 { right: 1%; top: 12%; background-image: var(--tea-login-decor-2); }
.login-art-slot-3 { left: 32%; bottom: 4%; width: 130px; height: 130px; background-image: var(--tea-login-decor-3); }
.login-art-slots + .login-intro,
.login-art-slots ~ .login-card { position: relative; z-index: 1; }

.login-intro { padding: 0; position: relative; width: 100%; max-width: 460px; }
.login-intro h1 { margin: 0 0 12px; color: var(--color-primary-strong); font-size: clamp(34px,5vw,52px); line-height: 1.03; letter-spacing: -.035em; }
.login-intro > p { max-width: 650px; margin: 0; color: var(--color-muted); font-size: 16px; line-height: 1.65; }
.login-info-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; max-width: 760px; margin: 26px 0 20px; }
.login-info-grid > div { padding: 13px 14px; border: 1px solid rgba(140, 175, 196, 0.28); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.85); }
.login-info-grid strong { display: block; margin-bottom: 4px; color: var(--color-primary-strong); font-size: 12px; }
.login-info-grid span { display: block; color: var(--color-muted); font-size: 11px; line-height: 1.45; }
.login-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 11px 16px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-md);
  color: #ffffff;
  background: linear-gradient(135deg, rgba(44, 140, 138, .82) 0%, rgba(21, 87, 192, .82) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(15, 63, 74, .22);
}
.login-back:hover { color: #ffffff; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(15, 63, 74, .30); }
.login-card {
  width: 100%;
  max-width: 460px;
  padding: 30px 32px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 20px 50px rgba(15, 63, 74, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.login-card-brand { display: flex; align-items: center; gap: 10px; padding-bottom: 18px; border-bottom: 1px solid rgba(140, 175, 196, 0.28); }
.login-card-brand img { width: 42px; height: 42px; object-fit: contain; }
.login-card-brand strong { display: block; color: var(--color-primary-strong); font-size: 16px; }
.login-card-brand span { display: block; margin-top: 2px; color: var(--color-muted); font-size: 11px; }
.login-card-heading { padding: 20px 0 8px; }
.login-card-heading h2 { margin: 0 0 4px; color: var(--color-text); font-size: 24px; }
.login-card-heading p { margin: 0; color: var(--color-muted); font-size: 13px; }
.login-form { display: grid; gap: 8px; }
.login-form label { margin-top: 5px; color: var(--color-primary-strong); font-size: 12px; font-weight: 800; }
.login-form input { min-height: 46px; }
.login-form button { width: 100%; min-height: 48px; margin-top: 10px; box-shadow: 0 8px 20px rgba(21, 87, 192, .25); }
.login-alert { margin: 0 0 12px; padding: 11px 12px; border: 1px solid #ecc9cd; border-left: 4px solid var(--color-danger); background: rgba(251, 235, 238, 0.85); color: #84343c; font-size: 12px; border-radius: 8px; }
.login-visitor-box { margin-top: 16px; padding: 13px 14px; border: 1px solid rgba(21, 87, 192, 0.20); border-radius: 10px; background: rgba(231, 238, 251, 0.65); }
.login-visitor-box strong { display: block; margin-bottom: 4px; color: var(--color-primary-strong); font-size: 12px; }
.login-visitor-box a { color: var(--color-primary); font-size: 12px; line-height: 1.45; font-weight: 700; text-decoration: none; }
.login-disclaimer { margin: 16px 0 0; color: #7a8b91; font-size: 10.5px; line-height: 1.45; text-align: center; }

.visitor-body { min-height: 100vh; background-color: transparent; }
.visitor-shell { width: min(1180px, calc(100% - 28px)); margin: 0 auto; padding-top: 14px; }
.visitor-header { position: sticky; top: 14px; z-index: 60; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 20px; background: linear-gradient(135deg, rgba(23, 63, 74, 0.94) 0%, rgba(29, 78, 87, 0.94) 100%); border-bottom: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius-md); box-shadow: 0 6px 22px rgba(23, 63, 74, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); }
.visitor-brand { display: flex; align-items: center; gap: 9px; color: #ffffff; text-decoration: none; }
.visitor-brand-mark { width: 34px; height: 34px; object-fit: contain; }
.visitor-brand strong { display: block; color: #ffffff; font-size: 16px; }
.visitor-brand span { display: block; color: rgba(241, 247, 248, 0.92); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.visitor-main { padding: 20px 0 56px; }
.visitor-hero { padding: 32px; margin-bottom: 18px; border-radius: var(--radius-lg); background: linear-gradient(135deg,var(--color-primary-strong),var(--color-primary)); color: #fff; box-shadow: var(--shadow-md); }
.visitor-kicker { color: #dbe9fb; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; }
.visitor-hero h1 { max-width: 760px; margin: 8px 0 10px; color: #fff; font-size: clamp(30px,5vw,46px); line-height: 1.05; letter-spacing: -.03em; }
.visitor-hero p { max-width: 760px; margin: 0; color: #e7f0fb; line-height: 1.6; }
.visitor-safety { margin-top: 18px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.10); color: #f3f7fb; font-size: 12px; }
.visitor-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.visitor-card { padding: 20px; scroll-margin-top: 92px; }
.visitor-card-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.visitor-card-head h2,
.visitor-card h2 { margin: 0 0 5px; color: var(--color-primary-strong); }
.visitor-card-head p { margin: 0; color: var(--color-muted); font-size: 12px; }
.visitor-number { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); font-weight: 900; }
.visitor-form { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 14px; }
.visitor-form .inteiro { grid-column: 1 / -1; }
.visitor-form button { width: auto; }
.visitor-success { border-left: 4px solid var(--color-success); }
.visitor-warning { margin-top: 12px; padding: 10px 12px; background: var(--color-warning-soft); color: #695a3c; font-size: 11px; }
.visitor-credentials { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.visitor-credentials > div { padding: 12px; border: 1px solid rgba(21, 87, 192, 0.20); border-radius: 10px; background: rgba(231, 238, 251, 0.65); }
.visitor-credentials span,
.visitor-status span { display: block; color: var(--color-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.visitor-credentials strong,
.visitor-status strong { display: block; margin-top: 4px; color: var(--color-primary-strong); word-break: break-word; }
.visitor-status { display: grid; gap: 10px; }
.visitor-status > div { padding: 12px; border: 1px solid rgba(140, 175, 196, 0.26); border-radius: 10px; background: linear-gradient(135deg, rgba(247, 251, 252, 0.85) 0%, rgba(232, 240, 243, 0.72) 100%); }
.visitor-help h2 { margin-bottom: 8px; }
.visitor-help p { color: var(--color-muted); }
.visitor-steps { display: grid; gap: 8px; }
.visitor-steps > div { padding: 12px; border: 1px solid rgba(140, 175, 196, 0.26); border-radius: 10px; background: linear-gradient(135deg, rgba(247, 251, 252, 0.85) 0%, rgba(232, 240, 243, 0.72) 100%); }
.visitor-steps strong { display: block; color: var(--color-primary-strong); }
.visitor-status-page { padding: 20px 0 4px; }
.visitor-status-page .status-header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 18px; }
.visitor-status-page .status-header h2 { margin: 0 0 4px; color: var(--color-primary-strong); font-size: 25px; }
.visitor-status-page .status-header p { margin: 0; color: var(--color-muted); font-size: 13px; }
.visitor-status-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 16px; }
.visitor-status-main,
.visitor-status-aside { padding: 18px; border: 1px solid rgba(140, 175, 196, 0.26); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.visitor-status-topline { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-bottom: 20px; }
.visitor-status-topline > div { padding: 12px; border: 1px solid rgba(140, 175, 196, 0.22); border-radius: 10px; background: linear-gradient(135deg, rgba(247, 251, 252, 0.85) 0%, rgba(232, 240, 243, 0.70) 100%); }
.status-timeline { display: grid; gap: 0; position: relative; }
.status-step { position: relative; display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 12px; min-height: 64px; }
.status-step:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 27px; bottom: 0; width: 2px; background: #d8e1e6; }
.status-step.done:not(:last-child)::before { background: #4d9f7a; }
.status-step-marker { position: relative; z-index: 1; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #cbd7de; border-radius: 50%; background: #edf1f4; color: #6e7f85; font-size: 11px; font-weight: 900; }
.status-step.done .status-step-marker { background: #e3f4ea; border-color: #88c4a3; color: #2e7d4d; }
.status-step.current .status-step-marker { background: var(--color-primary); border-color: var(--color-primary); color: #fff; box-shadow: 0 0 0 4px #e7f0fd; }
.status-step-content { padding: 1px 0 18px; }
.status-step-content strong { display: block; color: var(--color-text); font-size: 14px; }
.status-step-content span { display: block; margin-top: 2px; color: var(--color-muted); font-size: 11px; line-height: 1.45; }
.status-step.current .status-step-content strong { color: var(--color-primary); }
.visitor-status-aside h3 { margin: 0 0 12px; color: var(--color-primary-strong); font-size: 16px; }
.visitor-status-aside .status-box { padding: 12px; margin-bottom: 10px; border: 1px solid rgba(140, 175, 196, 0.24); border-radius: 10px; background: linear-gradient(135deg, rgba(247, 251, 252, 0.85) 0%, rgba(232, 240, 243, 0.70) 100%); }
.visitor-status-aside .status-box strong { margin-top: 4px; color: var(--color-primary-strong); font-size: 16px; }
.visitor-status-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 12px; border: 1px solid #a9bfd0; border-radius: var(--radius-sm); color: var(--color-primary); background: #fff; font-size: 12px; font-weight: 800; text-decoration: none; }
.visitor-status-actions a.primary { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }

/* =========================================================
   12. AJUSTES UX ¢‚¬€ FILA, PACIENTES, AGENDA E PAINEL
   ========================================================= */

/* Logo: mesma linguagem visual em ƒ¡rea interna, login e portal. */
.tea-logo-header, .tea-logo-card, .tea-logo-visitor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  object-fit: contain;
}
.tea-logo-header { width: 32px; height: 32px; }
.tea-logo-card { width: 42px; height: 42px; }
.tea-logo-visitor { width: 34px; height: 34px; }

/* Funcionƒ¡rios: dados de alto valor ficam visualmente mais prƒ³ximos do olhar. */
.fila-table-wrap, .pacientes-table-wrap {
  width: min(100%, 1180px);
  margin: 14px auto 0;
  padding: 0;
}
.fila-table-wrap .tabela-scroll,
.pacientes-table-wrap .tabela-scroll {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}
.fila-table-wrap th,
.fila-table-wrap td,
.pacientes-table-wrap th,
.pacientes-table-wrap td {
  padding: 13px 12px;
}
.fila-table-wrap tbody tr:hover td,
.pacientes-table-wrap tbody tr:hover td {
  background: #f7fbff;
}
.fila-table-wrap td:first-child,
.fila-table-wrap th:first-child {
  width: 78px;
  text-align: center;
}
.pacientes-table-wrap td:nth-child(1) { min-width: 230px; }
.pacientes-table-wrap td:nth-child(4) { min-width: 150px; }

/* Estado vazio ocupa o eixo central da tabela, nģo a borda esquerda. */
.fila-table-wrap .empty-state,
.pacientes-table-wrap .empty-state {
  min-height: 150px;
  padding: 34px 24px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.55;
  vertical-align: middle;
}
.fila-table-wrap .empty-state::before,
.pacientes-table-wrap .empty-state::before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  margin-bottom: 3px;
  border: 2px solid #cbdbe8;
  border-radius: 50%;
}

/* Painel: os trƒªs blocos inferiores passam a pertencer ƒ  mesma composiƒ§ƒ£o. */
.painel-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(300px, .95fr);
  gap: var(--space-4);
  align-items: stretch;
  margin-top: var(--space-4);
}
.painel-bottom-grid > .box { margin: 0; min-width: 0; }
.painel-bottom-grid .tabela-scroll { max-height: none; overflow: visible; border: 0; border-radius: 0; background: transparent; }
.painel-bottom-grid .metrics-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  height: auto;
  margin: 4px 0 0;
  align-content: start;
}
.painel-bottom-grid .metric {
  display: grid;
  align-content: center;
  gap: 4px;
  min-height: 92px;
  padding: 12px 11px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}
.painel-bottom-grid .metric strong {
  color: var(--color-primary-strong);
  font-size: 24px;
  line-height: 1;
}
.painel-bottom-grid .metric span {
  color: var(--color-muted);
  font-size: 11px;
  line-height: 1.35;
}
.painel-bottom-grid .metric:nth-child(1) { border-top: 3px solid var(--color-primary); }
.painel-bottom-grid .metric:nth-child(2) { border-top: 3px solid var(--color-success); }
.painel-bottom-grid .metric:nth-child(3) { border-top: 3px solid var(--color-danger); }

/* Agenda: associaƒ§ƒ£o profissional ¢€ € paciente fica explƒ­cita no bloco. */
.agenda-appointment {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 14px 16px;
  border-radius: var(--radius-md);
}
.agenda-appointment-main {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.agenda-appointment-main time {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  font-size: 13px;
  font-weight: 900;
}
.agenda-appointment-person strong {
  display: block;
  color: var(--color-text);
  font-size: 15px;
}
.agenda-appointment-person .agenda-professional {
  display: block;
  margin-top: 4px;
  color: var(--color-primary-strong);
  font-size: 12px;
  font-weight: 800;
}
.agenda-appointment-person small {
  display: block;
  margin-top: 3px;
  color: var(--color-muted);
}
.agenda-status-form {
  min-width: min(430px, 100%);
  padding-left: 14px;
  border-left: 1px solid var(--color-border);
}
.agenda-status-form input[name=justificativa] { min-width: 210px; }

/* Portal: leitura sequencial e tƒ­tulos no mesmo eixo vertical. */
.visitor-header {
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
  border-bottom: 0;
}
.visitor-brand { min-width: 205px; }
.visitor-grid {
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}
.visitor-card-head {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}
.visitor-card-head h2 { margin: 0 0 4px; line-height: 1.25; }
.visitor-card-head p { line-height: 1.5; }
.visitor-form {
  align-items: start;
}
.visitor-form label { line-height: 1.35; }
.visitor-form button { justify-self: start; }
.visitor-status-page {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
}
.visitor-status-page .status-header {
  margin-bottom: 16px;
}
.visitor-status-page .status-header h2 {
  line-height: 1.25;
}
.status-step { align-items: start; }
.status-step-content {
  min-width: 0;
  padding: 1px 0 20px;
}
.status-step-content strong { line-height: 1.3; }
.status-step-content span { line-height: 1.5; }
.visitor-status-aside { align-self: start; }

/* Mantĩm os componentes prontos para Blade/Livewire sem acoplar a IDs. */
.card-header, .card-body, .form-grid, .tabela-scroll, .empty-state, .pill { min-width: 0; }

@media (max-width: 1100px) {
  .painel-bottom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .painel-bottom-grid > .box:last-child { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .topbar-brand-mark, .tea-logo-header { width: 28px; height: 28px; }
  .agenda-appointment { grid-template-columns: 1fr; }
  .agenda-status-form {
    min-width: 0;
    padding: 12px 0 0;
    border-left: 0;
    border-top: 1px solid var(--color-border);
  }
  .painel-bottom-grid { grid-template-columns: 1fr; }
  .painel-bottom-grid > .box:last-child { grid-column: auto; }
}

@media (max-width: 600px) {
  .tea-logo-header, .topbar-brand-mark { width: 24px; height: 24px; }
  .tea-logo-card { width: 36px; height: 36px; }
  .tea-logo-visitor { width: 28px; height: 28px; }
  .visitor-header { width: min(100% - 20px, 1180px); }
  .visitor-brand { min-width: 0; }
  .visitor-card-head { grid-template-columns: 30px minmax(0, 1fr); }
  .visitor-status-page { padding: 15px; }
  .agenda-appointment-main { grid-template-columns: 60px minmax(0, 1fr); gap: 10px; }
  .fila-table-wrap, .pacientes-table-wrap { margin-top: 10px; }
}

/* =========================================================
   11. RESPONSIVIDADE / REDUƒ€¡ƒÆ’O DE MOVIMENTO
   ========================================================= */
@media (max-width: 1320px) {
  .dashboard-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 1100px) {
  :root { --sidebar-width: 220px; }
  .cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .report-summary-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .login-main { grid-template-columns: 1fr; align-items: start; gap: 24px; padding-top: 28px; }
  .login-card { max-width: none; margin-left: 0; }
}

@media (max-width: 900px) {
  .app { display: block; }
  .app aside,
  aside { position: fixed; inset: 0 auto 0 0; z-index: 110; width: min(var(--sidebar-width), 88vw); transform: translateX(-100%); transition: transform var(--transition); }
  .app aside.aberto,
  aside.aberto { transform: translateX(0); }
  .topbar-mobile { display: flex; }
  .topbar-main { grid-template-columns: auto minmax(0,1fr); }
  .topbar-menu-button,
  .topbar-main .topbar-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .12);
    color: #f1f7f8;
    font-weight: 800;
    font-size: 12px;
    cursor: pointer;
  }
  .topbar-menu-button:hover,
  .topbar-main .topbar-menu-button:hover { background: rgba(255, 255, 255, .22); color: #ffffff; }
  .topbar-account {
    display: flex !important;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 11px;
  }
  .topbar-account .topbar-status { display: none; }
  .topbar-account > span { color: var(--tea-on-deep); font-weight: 700; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-account .logout-form button { padding: 6px 9px; font-size: 11px; }
  .topbar-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 200;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    padding: 10px 14px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    background: linear-gradient(135deg, #1d4e57 0%, #173f4a 100%);
    box-shadow: 0 12px 24px rgba(23, 63, 74, .25);
    max-width: none;
    overflow: visible;
  }
  .topbar-nav a {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 13px;
    white-space: normal;
    border-radius: var(--radius-sm);
    color: #dbe9eb;
  }
  .topbar-nav a:hover { background: rgba(255, 255, 255, .14); color: #ffffff; }
  .topbar-nav a.ativo { background: #ffffff; color: #173f4a; }
  .topbar-main.menu-aberto .topbar-nav,
  .topbar-nav.is-open { display: flex; }
  main { padding: 16px; }
  .duas,
  .tres,
  .form,
  .form-grid,
  .report-filters,
  .metrics-grid { grid-template-columns: 1fr; }
  .grid-2,
  .grid-3 { grid-template-columns: 1fr; }
  .grid-info { grid-template-columns: 1fr; }
  .data-tripla { grid-template-columns: 1fr; }
  .checkgrid { grid-template-columns: 1fr; }
  .report-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .solicitacoes-grid { grid-template-columns: 1fr; }
  .triage-summary { grid-template-columns: 1fr; }
  .agenda-month-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .agenda-modal-filters form { grid-template-columns: 1fr; }
  .agenda-filter-search { grid-column: auto; }
  .visitor-grid { grid-template-columns: 1fr; }
  .visitor-status-layout { grid-template-columns: 1fr; }
  .visitor-nav { width: 100%; justify-content: flex-start; }
  .public-topbar-inner { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 700px) {
  .topbar-main { padding: 8px 12px; }
  .topbar-nav { flex-wrap: wrap; }
  .topbar-nav a { min-height: 34px; padding: 7px 8px; font-size: 11px; }
  main { padding: 13px; }
  .cards,
  .dashboard-grid,
  .report-summary-grid,
  .agenda-month-summary { grid-template-columns: 1fr; }
  .page-title-bar,
  .top { align-items: flex-start; flex-direction: column; }
  .box,
  .card,
  .panel,
  .visitor-card { padding: 15px; }
  .agenda-new-focus { flex-direction: column; }
  .agenda-new-focus .agenda-secondary-action,
  .agenda-form-actions .btn,
  .agenda-form-actions button { width: 100%; }
  .agenda-appointment { grid-template-columns: 1fr; }
  .agenda-status-form { justify-content: flex-start; }
  .agenda-status-form button { width: 100%; }
  .patient-access-card,
  .patient-access-reveal { grid-template-columns: 1fr; }
  .patient-access-card button { width: 100%; }
  .visitor-shell { width: min(100% - 20px, 1180px); }
  .visitor-header { align-items: flex-start; flex-direction: column; }
  .visitor-main { padding-top: 20px; }
  .visitor-hero { padding: 22px; }
  .visitor-form,
  .visitor-credentials,
  .login-info-grid,
  .visitor-status-topline { grid-template-columns: 1fr; }
  .login-main { width: min(100% - 28px, 1180px); padding: 22px 0 40px; min-height: auto; }
  .login-card { padding: 22px; }
  .public-topnav a,
  .visitor-nav a { font-size: 11px; padding: 8px; }
  .kanban-grid,
  .kanban { grid-template-columns: repeat(2,minmax(220px,1fr)); }
}

@media (max-width: 520px) {
  .navigation-bar { align-items: stretch; flex-wrap: wrap; }
  .navigation-bar .breadcrumb { order: 3; width: 100%; }
  .page-hero-actions,
  .report-actions,
  .agenda-toolbar-actions { width: 100%; }
  .page-hero-actions > *,
  .report-actions > *,
  .agenda-toolbar-actions > * { flex: 1 1 140px; }
  .kanban-grid,
  .kanban { grid-template-columns: minmax(220px,1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .consulta-destacada { animation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (prefers-contrast: more) {
  input, select, textarea,
  .card, .box, .panel, .visitor-card, .tabela-scroll,
  .public-topnav a, .visitor-nav a { border-color: #5f6d73; }
}

/* =========================================================
   15. UTILITÁRIOS COMPATÍVEIS COM VIEWS EXISTENTES
   Classes esperadas pelas views Blade que usam sintaxe tipo Bootstrap
   ========================================================= */

/* Page header */
.page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.page-header-content { display: flex; flex-direction: column; gap: var(--space-1); }
.page-header-content h1 { margin: 0; color: var(--color-primary-strong); font-size: var(--text-2xl); }
.page-subtitle { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.page-header-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }

/* Metrics row */
.metrics-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
@media (max-width: 1100px) { .metrics-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .metrics-row { grid-template-columns: 1fr; } }

/* Card footer */
.card-footer { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); background: var(--color-surface-muted); border-radius: 0 0 var(--radius-md) var(--radius-md); }

/* Table responsive */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Search form */
.search-form { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.search-input-wrapper { position: relative; flex: 1; min-width: 200px; }
.search-input-wrapper svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--color-muted); width: 20px; height: 20px; pointer-events: none; }
.search-input { padding-left: 42px !important; }

/* Form inputs - compatibilidade */
.form-input, .form-select {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid rgba(85, 130, 160, 0.32);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-text);
  font: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}
.form-input:hover, .form-select:hover { border-color: rgba(21, 87, 192, .42); }
.form-input:focus, .form-select:focus { border-color: var(--color-primary); outline: none; box-shadow: 0 0 0 3px var(--color-focus); background: #ffffff; }
.form-input[aria-invalid="true"], .form-select[aria-invalid="true"] { border-color: var(--color-danger); }
.form-select { appearance: none; 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='%2354697a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; }

/* Button variants */
.btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; padding: 9px 13px; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--color-primary); color: #fff; font: inherit; font-weight: 800; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); }
.btn:hover { background: var(--color-primary-strong); color: #fff; transform: translateY(-1px); }
.btn:disabled { opacity: .58; cursor: not-allowed; transform: none; }
.btn-sm { min-height: 34px; padding: 7px 10px; font-size: 12px; }
.btn-md { min-height: 40px; padding: 9px 13px; font-size: 14px; }
.btn-lg { min-height: 48px; padding: 11px 18px; font-size: 15px; }
.btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-strong); border-color: var(--color-primary-strong); }
.btn-secondary { background: rgba(255, 255, 255, 0.85); color: var(--color-primary-strong); border-color: rgba(85, 130, 160, 0.32); box-shadow: 0 2px 6px rgba(15, 63, 74, 0.05); }
.btn-secondary:hover { background: rgba(231, 238, 251, 0.95); color: var(--color-primary-strong); border-color: rgba(21, 87, 192, 0.42); }
.btn-success { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.btn-success:hover { background: #277454; border-color: #277454; }
.btn-danger { background: var(--color-danger); border-color: var(--color-danger); color: #fff; }
.btn-danger:hover { background: #963b45; border-color: #963b45; }
.btn-warning { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.btn-warning:hover { background: #a85d0f; border-color: #a85d0f; }
.btn-outline { background: transparent; border-color: var(--color-primary); color: var(--color-primary); }
.btn-outline:hover { background: var(--color-primary-soft); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--color-primary-strong); }
.btn-ghost:hover { background: var(--color-primary-soft); color: var(--color-primary-strong); }
.d-inline { display: inline-flex; }

/* Action buttons */
.action-buttons { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.action-buttons .btn { width: auto; }

/* Visually hidden */
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

/* Agenda grid - compatibilidade com view atual */
.agenda-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); }
.agenda-column { display: grid; gap: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-sm); }
.agenda-column.blocked { opacity: 0.6; background: var(--color-surface-muted); }
.agenda-column-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.agenda-column-header h3 { margin: 0; color: var(--color-primary-strong); font-size: var(--text-lg); }
.agenda-specialty { color: var(--color-muted); font-size: var(--text-sm); font-weight: 600; }
.blocked-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: var(--radius-pill); background: var(--color-danger-soft); color: var(--color-danger); font-size: var(--text-xs); font-weight: 800; }
.agenda-slots { display: grid; gap: var(--space-2); }
.agenda-slot { display: flex; flex-direction: column; gap: 6px; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast); cursor: pointer; }
.agenda-slot:hover { border-color: rgba(21, 87, 192, .42); background: rgba(255, 255, 255, 0.95); box-shadow: 0 4px 12px rgba(15, 63, 74, 0.08); }
.agenda-slot.free { background: var(--color-success-soft); border-color: #c9e5d5; }
.agenda-slot.occupied { background: var(--color-primary-soft); border-color: #d2e0ef; }
.agenda-slot.cancelled { opacity: 0.5; background: var(--color-danger-soft); border-color: #eccad0; }
.slot-time { color: var(--color-primary-strong); font-size: var(--text-sm); font-weight: 900; }
.slot-patient { display: flex; flex-direction: column; gap: 2px; }
.slot-name { color: var(--color-text); font-weight: 700; font-size: var(--text-sm); }
.slot-status { display: inline-flex; align-items: center; width: fit-content; padding: 2px 8px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 800; }
.slot-status.confirmado { background: var(--color-info-soft); color: var(--color-info); }
.slot-status.chegou { background: var(--color-success-soft); color: var(--color-success); }
.slot-status.em-atendimento { background: var(--color-primary-soft); color: var(--color-primary); }
.slot-status.realizado { background: var(--color-success-soft); color: var(--color-success); }
.slot-status.falta-justificada { background: var(--color-warning-soft); color: #795b0b; }
.slot-status.falta-não-justificada { background: var(--color-danger-soft); color: var(--color-danger); }
.slot-status.cancelado { background: var(--color-danger-soft); color: var(--color-danger); }
.slot-status.reagendado { background: var(--color-purple-soft); color: var(--color-purple); }
.slot-free { color: var(--color-success); font-size: var(--text-sm); font-weight: 800; text-align: center; }
.agenda-column-footer { padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.w-full { width: 100%; }

/* Grid system */
.form-row { display: flex; flex-wrap: wrap; margin: 0 calc(var(--space-3) * -1); }
.form-row > .form-group { padding: 0 var(--space-3); }
.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-md-6 { flex: 0 0 50%; max-width: 50%; }
.col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
@media (max-width: 900px) { .col-md-8, .col-md-6, .col-md-4 { flex: 0 0 100%; max-width: 100%; } }

/* Required marker */
.required { color: var(--color-danger); margin-left: 2px; }

/* Field help */
.field-help { display: block; margin-top: 3px; color: var(--color-muted); font-size: 12px; line-height: 1.45; }

/* Modal footer */
.modal-footer { display: flex; justify-content: flex-end; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--color-border); flex-wrap: wrap; }

/* Context rows */
.context-row { display: flex; gap: var(--space-3); align-items: center; }
.context-label { color: var(--color-muted); font-size: var(--text-sm); font-weight: 700; min-width: 100px; }
.context-value { color: var(--color-text); font-size: var(--text-sm); font-weight: 600; }
.agendar-context { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-muted); margin-bottom: var(--space-4); }

/* Alert */
.alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid transparent; }
.alert-title { font-weight: 800; margin-bottom: var(--space-1); }
.alert-content { flex: 1; color: inherit; }
.alert-close { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: inherit; font-size: 20px; cursor: pointer; opacity: 0.6; }
.alert-close:hover { opacity: 1; }
.alert-info { background: var(--color-info-soft); border-color: #b8d4ea; color: #2f679e; }
.alert-success { background: var(--color-success-soft); border-color: #c9e5d5; color: #275e3f; }
.alert-error { background: var(--color-danger-soft); border-color: #ebcad0; color: #7e2c38; }
.alert-warning { background: var(--color-warning-soft); border-color: #ead7a3; color: #795b0b; }

/* Flash messages */
.flash-message { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-4); animation: teaToastSlide 400ms ease; }
.flash-message svg { flex-shrink: 0; }
.flash-success { background: var(--color-success-soft); border: 1px solid #c9e5d5; color: #275e3f; }
.flash-error { background: var(--color-danger-soft); border: 1px solid #ebcad0; color: #7e2c38; }
.flash-info { background: var(--color-info-soft); border: 1px solid #b8d4ea; color: #2f679e; }
.flash-close { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: inherit; font-size: 20px; cursor: pointer; opacity: 0.6; }
.flash-close:hover { opacity: 1; }

/* Pagination */
.pagination { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: var(--space-3); }
.page-item { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font-weight: 700; text-decoration: none; transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); }
.page-item:hover { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary); }
.page-item.current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.page-item.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.pagination-info { color: var(--color-muted); font-size: var(--text-xs); font-weight: 700; }

/* Sidebar */
.sidebar { width: var(--sidebar-width); min-height: 100vh; position: sticky; top: 0; align-self: start; padding: 24px 16px; background: linear-gradient(180deg, #173f4a 0%, #1d4e57 100%); color: #fff; }
.sidebar-nav { display: grid; gap: 4px; margin-top: 22px; }
.sidebar-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sidebar-item { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 9px 11px; border-radius: var(--radius-sm); color: #e6f3f4; text-decoration: none; font-size: var(--text-sm); font-weight: 700; transition: background-color var(--transition-fast), color var(--transition-fast); }
.sidebar-item:hover, .sidebar-item.active { background: rgba(255,255,255,.14); color: #fff; }
.sidebar-item svg { flex: 0 0 20px; width: 20px; height: 20px; }
.sidebar-badge { margin-left: auto; display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: rgba(255, 232, 235, .92); color: var(--color-danger); font-size: 10px; font-weight: 900; }
.sidebar-divider { height: 1px; background: rgba(255,255,255,.15); margin: 16px 0; }
.sidebar-overlay { display: none; position: fixed; inset: 0; z-index: 90; background: var(--color-overlay); }
.sidebar-overlay.ativo { display: block; }
@media (max-width: 900px) { .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 110; transform: translateX(-100%); transition: transform var(--transition); } .sidebar.aberto { transform: translateX(0); } }

/* Button menu */
.btn-menu, .topbar-menu-button { display: none; width: auto; min-height: 36px; padding: 7px 12px; border: 1px solid rgba(255, 255, 255, .26); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .12); color: #f1f7f8; font-weight: 800; font-size: 12px; cursor: pointer; }
@media (max-width: 900px) { .btn-menu, .topbar-menu-button { display: inline-flex; align-items: center; justify-content: center; } }

/* Modal overlay & modal */
.modal-overlay { display: none; position: fixed; inset: 0; z-index: 200; align-items: center; justify-content: center; padding: var(--space-4); background: rgba(8, 22, 36, 0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal-overlay.is-open, .modal-overlay.open { display: flex; position: fixed; inset: 0; z-index: 200; }
.modal { width: min(900px, calc(100% - 32px)); max-height: calc(100vh - 64px); display: grid; grid-template-rows: auto auto 1fr; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.72); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: 0 28px 75px rgba(8, 22, 36, 0.32), 0 2px 0 rgba(255,255,255,.85) inset; }
.modal-sm { width: min(480px, calc(100% - 32px)); }
.modal-md { width: min(640px, calc(100% - 32px)); }
.modal-lg { width: min(900px, calc(100% - 32px)); }
.modal-xl { width: min(1180px, calc(100% - 32px)); }
.modal-full { width: calc(100% - 32px); max-width: none; }
.modal-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); flex: 0 0 auto; }
.modal-title { margin: 0; color: var(--color-primary-strong); font-size: var(--text-xl); }
.modal-close { flex-shrink: 0; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; color: var(--color-primary-strong); font-size: 20px; line-height: 1; cursor: pointer; }
.modal-close:hover { background: var(--color-primary-soft); }
.modal-body { padding: var(--space-5); overflow-y: auto; overscroll-behavior: contain; }
body.modal-open { overflow: hidden; }

/* Metric cards (Painel) */
.metric-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-decoration: none;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
}
.metric-card:hover {
  box-shadow: 0 8px 24px rgba(15, 63, 74, 0.12);
  transform: translateY(-2px);
  border-color: var(--color-border-strong);
}
.metric-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: #fff;
}
.metric-card.metric-primary .metric-icon { background: var(--color-primary); }
.metric-card.metric-success .metric-icon { background: var(--color-success); }
.metric-card.metric-info .metric-icon { background: var(--color-info); }
.metric-card.metric-warning .metric-icon { background: var(--color-accent); }
.metric-card.metric-danger .metric-icon { background: var(--color-danger); }
.metric-card.metric-secondary .metric-icon { background: var(--color-muted); }
.metric-content { flex: 1; min-width: 0; }
.metric-label { display: block; color: var(--color-muted); font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.metric-value { display: block; color: var(--color-text); font-size: var(--text-2xl); font-weight: 800; line-height: 1.2; }

/* Chart cards (Painel) */
.chart-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.chart-header h3 { margin: 0; color: var(--color-primary-strong); font-size: var(--text-lg); }
.chart-bars { display: flex; align-items: flex-end; gap: var(--space-3); height: 260px; padding: var(--space-3) 0 var(--space-2); border-bottom: 1px solid var(--color-border); }
.chart-bar-wrapper { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
.chart-bar { width: min(56px, 100%); min-height: 3px; background: var(--color-primary); border-radius: 8px 8px 3px 3px; transition: height 600ms ease; }
.chart-bar-label { color: var(--color-muted); font-size: var(--text-xs); line-height: 1; white-space: nowrap; }
.chart-bar-value { color: var(--color-text); font-size: var(--text-xs); font-weight: 800; line-height: 1; }
.chart-badge {
  font-size: var(--text-xs);
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}
.chart-badge.teal { background: var(--color-teal-soft); color: var(--color-teal); }
.chart-badge.purple { background: var(--color-purple-soft); color: var(--color-purple); }

/* Bar chart */
.bar-chart { display: flex; flex-direction: column; gap: var(--space-3); }
.bar-chart-item { display: flex; align-items: flex-end; gap: var(--space-3); }
.bar-chart-value { flex: 0 0 40px; text-align: right; color: var(--color-text); font-weight: 700; font-size: var(--text-sm); }
.bar-chart-track { flex: 1; height: 100%; min-height: 60px; background: var(--color-primary-soft); border-radius: var(--radius-pill); overflow: hidden; }
.bar-chart-track span { display: block; width: 100%; height: 0%; background: var(--color-primary); border-radius: var(--radius-pill); transition: height 600ms ease; }
.bar-chart-label { flex: 0 0 60px; color: var(--color-muted); font-size: var(--text-xs); text-align: center; }

/* Occupation list */
.occupation-list { display: grid; gap: var(--space-3); }
.occupation-item { display: grid; grid-template-columns: 1fr auto; gap: var(--space-4); align-items: center; padding: var(--space-3); background: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.occupation-info { min-width: 0; }
.occupation-name { display: block; color: var(--color-text); font-weight: 700; }
.occupation-count { display: block; color: var(--color-muted); font-size: var(--text-sm); }
.occupation-bar { flex: 1; min-width: 120px; height: 8px; background: var(--color-primary-soft); border-radius: var(--radius-pill); overflow: hidden; }
.occupation-fill { height: 100%; background: var(--color-primary); border-radius: var(--radius-pill); transition: width 600ms ease; }
.occupation-percent { flex: 0 0 50px; text-align: right; color: var(--color-primary); font-weight: 800; font-size: var(--text-sm); }

/* Status distribution */
.status-distribution { display: grid; gap: var(--space-3); }
.status-item { display: grid; grid-template-columns: 1fr auto; gap: var(--space-4); align-items: center; }
.status-name { color: var(--color-text); font-weight: 600; }
.status-bar { flex: 1; min-width: 120px; height: 8px; background: var(--color-primary-soft); border-radius: var(--radius-pill); overflow: hidden; }
.status-fill { height: 100%; background: var(--color-primary); border-radius: var(--radius-pill); transition: width 600ms ease; }
.status-count { flex: 0 0 50px; text-align: right; color: var(--color-muted); font-size: var(--text-sm); font-weight: 700; }

/* Charts grid */
.charts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.charts-grid .full-width { grid-column: 1 / -1; }
@media (max-width: 900px) { .charts-grid { grid-template-columns: 1fr; } }

/* Access generated card */
.access-generated-card { display: grid; gap: var(--space-3); }
.access-generated-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.access-generated-grid > div { display: grid; gap: 4px; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.access-generated-grid span { color: var(--color-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; }
.access-generated-grid strong { color: var(--color-primary-strong); font-size: var(--text-lg); word-break: break-all; }

/* Spinner */
.spinner, .btn-spinner { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Empty state adjustments */
.empty-state, .empty { display: grid; justify-items: center; gap: 5px; padding: 28px 16px; color: var(--color-muted); text-align: center; background: rgba(232, 240, 243, 0.48); border: 1px dashed rgba(140, 175, 196, 0.42); border-radius: var(--radius-md); }
.empty-state strong { color: var(--color-primary-strong); }

/* Ensure button component classes work */
.btn-primary, .btn-secondary, .btn-success, .btn-warning, .btn-danger, .btn-outline, .btn-ghost { display: inline-flex; }

/* Badge/pill variants for component compatibility */
.pill, .badge, .tag, .status, .status-chip { display: inline-flex; align-items: center; gap: 4px; width: fit-content; max-width: 100%; padding: 5px 9px; border: 1px solid transparent; border-radius: var(--radius-pill); font-size: 11px; font-weight: 800; line-height: 1.2; }
.pill { background: var(--color-primary-soft); color: var(--color-primary-strong); border-color: #d2e0ef; }
.pill-ok, .pill.ok, .status-ok { background: var(--color-success-soft); color: var(--color-success); border-color: #c9e5d5; }
.pill-alerta, .pill.alerta, .status-alerta { background: var(--color-danger-soft); color: var(--color-danger); border-color: #eccad0; }
.pill-warning { background: var(--color-warning-soft); color: #795b0b; border-color: #ead7a3; }
.status-agendado { background: #f1f4f7; color: #536675; border-color: #dce4ea; }
.status-andamento { background: var(--color-info-soft); color: var(--color-info); }
.tag { background: var(--color-purple-soft); color: var(--color-purple); border-color: #ded3ef; }

/* Login page background */
.login-page { background-image: var(--tea-login-background-image) !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; background-attachment: fixed !important; }
.login-page::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 40% at 92% 8%, rgba(44, 140, 138, .22), transparent 60%), radial-gradient(ellipse 55% 38% at 4% 92%, rgba(21, 87, 192, .18), transparent 60%), radial-gradient(ellipse 45% 30% at 50% 50%, rgba(115, 87, 165, .10), transparent 65%); pointer-events: none; }

/* Visitor body */
.visitor-body { background-color: transparent; }
.visitor-body::before { display: none; }

@media print {
  .topbar-main,
  .topbar-mobile,
  aside,
  .navigation-bar,
  .page-hero-actions,
  .report-actions,
  .agenda-toolbar-actions,
  .logout-form { display: none !important; }
  main { max-width: none; padding: 0; }
  .card, .box, .panel, .visitor-card { box-shadow: none; }
}


/* =========================================================
   14. CORREƒ€¡ƒ€¢ES FINAIS ¢‚¬€ VISITANTE, AGENDA E NAVEGAƒ€¡ƒÆ’O
   ========================================================= */

/* O portal pļblico precisa comunicar erros da operaĤģo sem esconder feedback. */
.visitor-form-errors {
  margin: 0 0 var(--space-4);
  padding: 14px 16px;
  border: 1px solid #e6b5af;
  border-left: 4px solid var(--color-danger);
  border-radius: var(--radius-md);
  background: #fff7f6;
  color: #7d3431;
}
.visitor-form-errors strong { display: block; margin-bottom: 6px; color: #7d3431; }
.visitor-form-errors ul { margin: 0; padding-left: 20px; }
.visitor-form-errors li + li { margin-top: 4px; }
.visitor-form .field-help { display: block; margin-top: 4px; color: var(--color-muted); font-size: 11px; line-height: 1.4; }

/* O header do portal mantĩm marca e navegaĤģo no mesmo eixo. */
.visitor-header {
  justify-content: flex-start;
  gap: 18px;
}
.visitor-brand { flex: 0 0 auto; }
.visitor-nav {
  flex: 1 1 auto;
  justify-content: flex-start;
  min-width: 0;
  padding: 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.visitor-nav a { white-space: nowrap; }

/* Agenda: o corpo do modal e obrigatoriamente uma grade de operacao + ocupacao. */
/* Regras consolidadas na secao 09 (linha 990). Manter apenas overrides especificos aqui. */

.agenda-day-operations,
.agenda-day-sidebar { min-width: 0; }
.agenda-day-sidebar { align-content: start; }
.agenda-side-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.agenda-occupancy-list {
  max-height: none;
  overflow: visible;
}
.agenda-occupancy-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 2px;
  background: #fff;
}
.agenda-occupancy-row > div:first-child { min-width: 0; }
.agenda-occupancy-row strong,
.agenda-occupancy-row span { overflow-wrap: anywhere; }
.agenda-occupancy-value {
  min-width: 44px;
  padding: 4px 7px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  text-align: center;
}

/* Evita segunda rolagem dentro das tabelas em desktop; mantƒ©m sƒ³ uma em telas estreitas. */
.fila-table-wrap .tabela-scroll,
.pacientes-table-wrap .tabela-scroll {
  overflow-x: auto;
  overflow-y: visible;
}
.fila-table-wrap table,
.pacientes-table-wrap table {
  width: 100%;
  min-width: 0;
}

/* OcupaĤģo no painel: cabe inteira no card, sem scroll interno. */
.painel-ocupacao-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
.painel-ocupacao-table th:nth-child(1),
.painel-ocupacao-table td:nth-child(1) { width: 28%; }
.painel-ocupacao-table th:nth-child(2),
.painel-ocupacao-table td:nth-child(2) { width: 32%; }
.painel-ocupacao-table th:nth-child(3),
.painel-ocupacao-table td:nth-child(3) { width: 15%; text-align: center; }
.painel-ocupacao-table th:nth-child(4),
.painel-ocupacao-table td:nth-child(4) { width: 25%; }
.painel-ocupacao-table td { padding: 11px 9px; line-height: 1.35; }
.painel-ocupacao-table td:first-child { font-weight: 800; color: var(--color-primary-strong); }
.painel-ocupacao-table td:nth-child(2) { color: var(--color-muted); }
.painel-ocupacao-table .pill { white-space: nowrap; }

/* A regra global de aside ĩ para a navegaĤģo lateral; o aside da agenda ĩ um componente interno. */
.agenda-day-sidebar {
  width: auto;
  min-height: 0;
  position: static;
  padding: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
}

.agenda-day-sidebar .agenda-side-card {
  background: #fff;
}

.agenda-occupancy-row strong {
  display: block;
  line-height: 1.3;
}
.agenda-occupancy-row span {
  display: block;
  margin-top: 3px;
  line-height: 1.3;
}

/* Fila: aƒ§ƒµes operacionais legƒ­veis; a coluna mantƒ©m largura mƒ­nima para nunca empilhar letras. */
.fila-table {
  table-layout: auto;
  min-width: 1060px;
}
.fila-table th,
.fila-table td { vertical-align: middle; }
.fila-table th:nth-child(1), .fila-table td:nth-child(1) { width: 56px; text-align: center; }
.fila-table th:nth-child(2), .fila-table td:nth-child(2) { min-width: 190px; }
.fila-table th:nth-child(3), .fila-table td:nth-child(3) { min-width: 120px; }
.fila-table th:nth-child(4), .fila-table td:nth-child(4) { min-width: 145px; }
.fila-table th:nth-child(5), .fila-table td:nth-child(5) { min-width: 175px; }
.fila-table th:nth-child(6), .fila-table td:nth-child(6) { min-width: 115px; }
.fila-table th:nth-child(7), .fila-table td:nth-child(7) { min-width: 270px; }
.fila-table .fila-actions-head { text-align: center; }
.fila-table .fila-paciente-nome,
.fila-table .fila-cell-main { display: block; }
.fila-table .fila-paciente-meta {
  display: block;
  margin-top: 4px;
  color: var(--color-muted);
  line-height: 1.35;
}
.fila-table .fila-access-form { margin-top: 7px; }
.fila-table .fila-access-btn {
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  white-space: normal;
  text-align: center;
}
.fila-table .acoes-fila { min-width: 270px; padding: 10px; }
.fila-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  width: 100%;
}
.fila-actions-grid > a,
.fila-actions-grid > form { min-width: 0; }
.fila-action-btn {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  white-space: normal;
  text-align: center;
}
.fila-actions-grid .fila-action-archive {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: 7px;
  align-items: stretch;
  margin: 0;
}
.fila-actions-grid .fila-action-archive input {
  min-width: 0;
  width: 100%;
  min-height: 38px;
  margin: 0;
}

/* Em telas realmente estreitas, uma ļnica rolagem horizontal fica no contĻiner, nunca dentro da aĤģo. */
@media (max-width: 1100px) {
  .fila-table-wrap .tabela-scroll { overflow-x: auto; }
  .fila-table { min-width: 1060px; }
}

.pacientes-table-wrap th:nth-child(1), .pacientes-table-wrap td:nth-child(1) { width: 15%; }
.pacientes-table-wrap th:nth-child(2), .pacientes-table-wrap td:nth-child(2) { width: 27%; }
.pacientes-table-wrap th:nth-child(3), .pacientes-table-wrap td:nth-child(3) { width: 15%; }
.pacientes-table-wrap th:nth-child(4), .pacientes-table-wrap td:nth-child(4) { width: 19%; }
.pacientes-table-wrap th:nth-child(5), .pacientes-table-wrap td:nth-child(5) { width: 9%; }
.pacientes-table-wrap th:nth-child(6), .pacientes-table-wrap td:nth-child(6) { width: 15%; }

.agenda-day-sidebar p {
  color: var(--color-muted);
}

.dashboard-card {
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dashboard-card p { max-width: 34ch; }

@media (max-width: 1100px) {
  .fila-table-wrap .tabela-scroll,
  .pacientes-table-wrap .tabela-scroll {
    overflow-x: auto;
  }
  .fila-table-wrap table,
  .pacientes-table-wrap table {
    table-layout: auto;
    min-width: 760px;
  }
}

/* Administraƒ§ƒ£o: retorno contextual sempre visƒ­vel. */
.page-hero-actions .btn-secundario,
.page-hero-actions a.btn-secundario {
  white-space: nowrap;
}
.breadcrumb + .page-hero { margin-top: 8px; }

@media (max-width: 900px) {
  .login-art-slot { width: 140px; height: 140px; opacity: .42; }
  .login-art-slot-3 { width: 100px; height: 100px; }
}
@media (max-width: 600px) {
  .login-art-slot-1 { left: -18px; bottom: 4%; }
  .login-art-slot-2 { right: -18px; top: 11%; }
  .login-art-slot-3 { display: none; }
}

@media (max-width: 980px) {
  .agenda-modal-body { grid-template-columns: 1fr; }
  .agenda-day-sidebar { order: 2; }
  .agenda-day-operations { order: 1; }
}
@media (max-width: 720px) {
  .visitor-header { align-items: flex-start; flex-direction: column; }
  .visitor-nav { width: 100%; justify-content: flex-start; }
  .visitor-nav a { white-space: normal; }
  .painel-bottom-grid .metrics-grid { grid-template-columns: 1fr; }
  .agenda-modal { width: calc(100% - 12px); }
  .agenda-modal-body { padding: 14px; }
  .agenda-side-card { padding: 13px; }
}

/* Fila: override final para impedir compressģo da coluna de aĤĵes. */
.fila-table-wrap .fila-table td.acoes-fila {
  width: 270px;
  min-width: 270px;
  max-width: 270px;
}
.fila-table-wrap .fila-table td.acoes-fila .fila-actions-grid {
  grid-template-columns: repeat(2, minmax(110px, 1fr));
}
@media (max-width: 1100px) {
  .fila-table-wrap .fila-table td.acoes-fila {
    width: 270px;
    min-width: 270px;
  }
}

/* =========================================================
   16. REFINO DE FLUXO ¢‚¬€ FILA, PROFISSIONAIS E PORTAL
   ========================================================= */

/* Dialogs: cadastros ficam fora do fluxo principal da lista. */
.modal-dialog {
  width: min(760px, calc(100% - 28px));
  max-height: min(90vh, 900px);
  margin: auto;
  padding: 22px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
}
.modal-dialog::backdrop {
  background: rgba(17, 36, 52, .48);
  backdrop-filter: blur(2px);
}
.modal-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
}
.modal-dialog-head h3 { margin: 2px 0 4px; color: var(--color-primary-strong); }
.modal-dialog-head p { margin: 0; color: var(--color-muted); font-size: 12px; }
.modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-primary-strong);
  font-size: 24px;
  line-height: 1;
}
.modal-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  margin-top: 4px;
}
.btn-novo-paciente,
.btn-novo-profissional {
  min-height: 42px;
  padding: 10px 15px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(21,87,192,.15);
}
.btn-novo-paciente:hover,
.btn-novo-profissional:hover { background: var(--color-primary-strong); }

/* Fila: tabela ocupa toda a ƒ¡rea disponƒ­vel; o formulƒ¡rio de cadastro sai do layout principal. */
.fila-page-hero { align-items: center; }
.fila-paciente-dialog .form { margin: 0; }
.fila-paciente-dialog .form > .inteiro { min-width: 0; }
.fila-table-wrap { width: 100%; max-width: none; margin-top: 14px; }
.fila-table-wrap .tabela-scroll { width: 100%; }
.fila-table { width: 100%; }
.fila-table th,
.fila-table td { overflow-wrap: anywhere; }
.fila-table .acoes-fila {
  width: 286px;
  min-width: 286px;
  max-width: 286px;
  padding: 10px;
}
.fila-actions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fila-actions-grid .fila-action-archive {
  grid-column: 1 / -1;
  display: block;
  margin: 0;
}
.fila-actions-grid .fila-action-archive > .fila-archive-fields[hidden] { display: none; }
.fila-archive-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 7px;
  margin-top: 7px;
}
.fila-archive-fields input { min-width: 0; width: 100%; }
.fila-archive-fields button { width: 100%; }

/* Profissionais: lista ĩ a tela principal; cadastro abre em janela. */
.profissionais-page-hero { align-items: center; }
.profissional-dialog { width: min(800px, calc(100% - 28px)); }
.profissionais-list-card { width: 100%; }
.profissionais-list-card .section-header { align-items: center; }
.profissionais-table-wrap { width: 100%; }
.profissionais-table { width: 100%; table-layout: auto; min-width: 0; }
.profissionais-table th,
.profissionais-table td { padding: 12px 11px; vertical-align: middle; }
.profissionais-table th:nth-child(1) { width: 24%; }
.profissionais-table th:nth-child(2) { width: 20%; }
.profissionais-table th:nth-child(3) { width: 15%; }
.profissionais-table th:nth-child(4) { width: 21%; }
.profissionais-table th:nth-child(5) { width: 10%; }
.profissionais-table th:nth-child(6) { width: 10%; }
.profissionais-nome { display: block; }
.profissional-especialidade { display: inline-block; color: var(--color-muted); line-height: 1.35; }
.profissionais-acoes { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.profissionais-acoes form { margin: 0; }
.profissionais-acoes .btn-secundario,
.profissionais-acoes button { min-height: 36px; white-space: nowrap; }

/* Pacientes: a lista ocupa toda a largura interna do bloco. */
.pacientes-table-wrap { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }
.pacientes-table-wrap .tabela-scroll { width: 100%; }
.pacientes-table-wrap table { width: 100%; min-width: 0; }

/* Portal: solicitar ĩ a aĤģo principal; consultar e recuperar dividem a segunda linha. */
.visitor-grid-main { display: grid; grid-template-columns: 1fr; gap: 16px; }
.visitor-primary-card { width: 100%; }
.visitor-secondary-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 16px; align-items: start; }
.visitor-secondary-grid > .visitor-card { min-width: 0; }
.visitor-secondary-grid .visitor-status-page { margin-top: 16px; }
.visitor-secondary-grid .visitor-form { margin-top: 12px; }
.visitor-recovery { height: fit-content; }

/* Login: arte e slots decorativos */
.login-art-slot { opacity: .62; mix-blend-mode: multiply; }
.login-art-slot-1 { background-image: var(--tea-login-decor-1); }
.login-art-slot-2 { background-image: var(--tea-login-decor-2); }
.login-art-slot-3 { background-image: var(--tea-login-decor-3); }

@media (max-width: 1100px) {
  .fila-table-wrap .tabela-scroll,
  .profissionais-table-wrap .tabela-scroll,
  .pacientes-table-wrap .tabela-scroll { overflow-x: auto; }
  .fila-table { min-width: 1060px; }
  .profissionais-table { min-width: 840px; }
}
@media (max-width: 900px) {
  .visitor-secondary-grid { grid-template-columns: 1fr; }
  .profissionais-list-card .section-header,
  .fila-page-hero,
  .profissionais-page-hero { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 720px) {
  .modal-dialog { width: calc(100% - 16px); padding: 16px; }
  .fila-archive-fields { grid-template-columns: 1fr; }
  .fila-table .acoes-fila { width: 260px; min-width: 260px; max-width: 260px; }
  .visitor-secondary-grid { gap: 12px; }
}

/* =========================================================
   17. REFINO 2026-08-13 ¢‚¬€ USUƒRIOS / FILA / LOGIN / AGENDA
   ========================================================= */

/* Usuƒ¡rios: uma aƒ§ƒ£o principal e cadastro em modal. */
.btn-novo-usuario {
  min-height: 42px;
  padding: 10px 15px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(21,87,192,.15);
}
.btn-novo-usuario:hover { background: var(--color-primary-strong); }
.usuario-dialog { width: min(640px, calc(100% - 28px)); }
.usuarios-list-card { width: 100%; }
.usuarios-table { width: 100%; min-width: 0; table-layout: fixed; }
.usuarios-table th, .usuarios-table td { padding: 12px 11px; vertical-align: middle; }
.usuarios-table th:nth-child(1) { width: 28%; }
.usuarios-table th:nth-child(2) { width: 22%; }
.usuarios-table th:nth-child(3) { width: 22%; }
.usuarios-table th:nth-child(4) { width: 14%; }
.usuarios-table th:nth-child(5) { width: 14%; }
.usuarios-status-form { margin: 0; }

/* Fila: aƒ§ƒµes explƒ­citas e estƒ¡veis. O lƒ¡pis fica separado, sem consumir espaƒ§o do grid. */
.fila-table td.acoes-fila {
  position: relative;
  width: 292px;
  min-width: 292px;
  max-width: 292px;
  padding: 10px 40px 10px 10px;
}
.fila-actions-primary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.fila-actions-primary .fila-action-archive {
  grid-column: 1 / -1;
  display: block;
  margin: 0;
}
.fila-action-btn {
  min-width: 0;
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  text-align: center;
}
.fila-btn-admitir { background: var(--color-primary); }
.fila-btn-admitir:hover { background: var(--color-primary-strong); }
.fila-btn-convocar { background: #fff; }
.fila-single-admitir { grid-column: 1 / -1; }
.fila-edit-pencil {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: #fff;
  color: var(--color-primary);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
}
.fila-edit-pencil:hover { background: var(--color-primary-soft); }
.fila-access-cell { vertical-align: top; }
.fila-protocolo { display: block; width: fit-content; max-width: 100%; overflow-wrap: anywhere; }
.fila-code-scratch {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin-top: 7px;
  padding: 7px 10px;
  border: 1px solid #c8cfd7;
  border-radius: var(--radius-md);
  background: repeating-linear-gradient(135deg, #dfe4e9 0 6px, #f5f7f8 6px 12px);
  color: #394b5a;
  overflow: hidden;
  text-align: center;
}
.fila-code-scratch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,.78) 48%, transparent 58%);
  pointer-events: none;
}
.fila-code-scratch.revealed {
  justify-content: space-between;
  background: var(--color-success-soft);
  border-color: #b8ddc7;
  color: var(--color-success);
}
.fila-code-scratch.revealed::after { display: none; }
.fila-code-scratch strong { font: 800 1rem/1.1 var(--font-mono); letter-spacing: .08em; color: #1e5f3a; }
.fila-code-label { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.fila-access-form { margin-top: 7px; }
.fila-access-btn { min-height: 36px; }

/* Login: regras do fundo consolidadas na secao 201 mais abaixo */


/* Agenda: o CTA "Criar primeiro atendimento" nģo existe mais; a aĤģo oficial ĩ "Agendar atendimento". */
.agenda-empty-action .agenda-primary-action { display: none; }

@media (max-width: 980px) {
  .usuarios-page-hero .page-hero-actions { width: 100%; }
  .usuarios-page-hero .page-hero-actions > * { flex: 1 1 180px; }
}
@media (max-width: 720px) {
  .usuarios-table { min-width: 720px; }
  .usuarios-list-card .tabela-scroll { overflow-x: auto; }
  .fila-table td.acoes-fila { width: 280px; min-width: 280px; max-width: 280px; }
  .fila-actions-primary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fila-edit-pencil { width: 28px; height: 28px; }
}

/* Portal do cidadƒ£o: cards 01 ¢€ €™ 02 ¢€ €™ 03 empilham no celular e os CTAs ocupam a largura ƒºtil. */
@media (max-width: 720px) {
  .visitor-grid-main,
  .visitor-secondary-grid { grid-template-columns: 1fr; }
  .visitor-secondary-grid { gap: 12px; }
  .visitor-card-head { align-items: flex-start; gap: 10px; }
  .visitor-form { grid-template-columns: 1fr; gap: 10px; }
  .visitor-form .inteiro { grid-column: auto; }
  .visitor-form button,
  .visitor-status-actions a { width: 100%; }
  .visitor-status-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .visitor-number { flex: 0 0 30px; }
}
@media (min-width: 721px) and (max-width: 980px) {
  .visitor-secondary-grid { grid-template-columns: 1fr 1fr; }
  .visitor-form { grid-template-columns: 1fr 1fr; }
  .visitor-form button { min-width: 170px; }
}

/* =========================================================
   18. PORTAL 2026-08-13 ¢‚¬€ CONSULTA EM MODAL + MOBILE
   ========================================================= */

/* Os blocos 01, 02 e 03 seguem uma leitura vertical previsƒ­vel. */
.visitor-grid-main,
.visitor-secondary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: stretch;
}
.visitor-secondary-grid > .visitor-card {
  width: 100%;
}
.visitor-secondary-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.visitor-secondary-card .visitor-card-head {
  flex: 1 1 auto;
}
.visitor-primary-secondary {
  align-self: flex-start;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(21,87,192,.12);
}
.visitor-primary-secondary:hover {
  background: var(--color-primary-strong);
}

/* Consulta: o conteƒºdo sai do card apertado e passa a ter espaƒ§o prƒ³prio. */
.visitor-consulta-dialog {
  width: min(1040px, calc(100% - 24px));
  max-width: 1040px;
  max-height: min(92vh, 920px);
  overflow: auto;
}
.visitor-consulta-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}
.visitor-consulta-form .modal-form-actions {
  grid-column: 1 / -1;
}
.visitor-consulta-dialog .visitor-status-dialog-content {
  margin-top: 16px;
  padding: 0;
  border: 0;
  background: transparent;
}
.visitor-consulta-dialog .visitor-status-layout {
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
}
.visitor-consulta-dialog .visitor-status-main,
.visitor-consulta-dialog .visitor-status-aside {
  min-width: 0;
}
.visitor-consulta-dialog .visitor-status-topline {
  grid-template-columns: repeat(3, minmax(150px, 1fr));
}
.visitor-consulta-dialog .status-box {
  min-width: 0;
}
.visitor-consulta-dialog .status-box strong {
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.35;
}
.visitor-consulta-dialog .status-note {
  line-height: 1.55;
}
.visitor-consulta-dialog .visitor-status-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.visitor-consulta-dialog .visitor-status-actions > * {
  width: 100%;
}

/* Menu pļblico: desktop em linha; mobile com botģo compacto em vez de ocupar a tela. */
.visitor-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-primary-strong);
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.visitor-nav a.nav-active {
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}

@media (max-width: 980px) {
  .visitor-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
  }
  .visitor-nav-toggle {
    display: inline-flex;
    grid-column: 3;
    grid-row: 1;
  }
  .visitor-nav {
    display: none;
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 2px;
  }
  .visitor-nav.is-open {
    display: flex;
  }
  .visitor-nav a {
    min-height: 38px;
  }
  .visitor-consulta-dialog .visitor-status-layout {
    grid-template-columns: 1fr;
  }
  .visitor-consulta-dialog .visitor-status-topline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .visitor-shell {
    width: min(100% - 16px, 1180px);
  }
  .visitor-header {
    min-height: 64px;
    padding: 8px 0;
  }
  .visitor-brand {
    min-width: 0;
  }
  .visitor-brand-copy strong {
    font-size: 14px;
  }
  .visitor-brand-copy small {
    font-size: 8px;
  }
  .visitor-nav-toggle {
    min-height: 38px;
    padding: 7px 10px;
    font-size: 12px;
  }
  .visitor-nav.is-open {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .visitor-nav a {
    width: 100%;
    min-height: 42px;
    justify-content: flex-start;
    padding: 10px 12px;
  }
  .visitor-primary-secondary,
  .visitor-form button {
    width: 100%;
  }
  .visitor-consulta-dialog {
    width: calc(100% - 12px);
    max-height: calc(100vh - 24px);
    padding: 16px;
  }
  .visitor-consulta-form {
    grid-template-columns: 1fr;
  }
  .visitor-consulta-form .modal-form-actions,
  .visitor-consulta-dialog .visitor-status-actions {
    grid-template-columns: 1fr;
  }
  .visitor-consulta-dialog .visitor-status-topline {
    grid-template-columns: 1fr;
  }
  .visitor-consulta-dialog .visitor-status-main,
  .visitor-consulta-dialog .visitor-status-aside {
    padding: 14px;
  }
}

/* =========================================================
   LOGIN - FUNDO PERSONALIZAVEL
   O arquivo e definido pelo PHP no <body> quando existir.
   A imagem fica atras do conteudo e recebe um overlay leve.
   ========================================================= */

/* =========================================================
   201. PADRONIZACAO TOTAL 2026-08-13 - TOPBAR / MENU MOBILE / AGENDA / CONSULTA
   Fonte unica e autoritativa para os menus de login, visitante e area interna,
   escala do calendario da agenda em celular e do modal de consulta do visitante.
   ========================================================= */

:root {
  --tea-deep:         #173f4a;
  --tea-deep-2:       #1d4e57;
  --tea-deep-3:       #22656f;
  --tea-mist:         #e9f3f3;
  --tea-mist-2:       #d3e6e6;
  --tea-line:         #c4d6d6;
  --tea-text:         #1c3239;
  --tea-text-soft:    #4f6770;
  --tea-on-deep:      #f1f7f8;
  --tea-on-deep-soft: #ffffff;
  --tea-success:      #2e7d4d;
  --tea-success-soft: #e3f4ea;
  --tea-accent:       #c58a12;
  --tea-danger:       #b94752;
  --tea-overlay:      rgba(23, 63, 74, .58);
}

/* === Padrao visual compartilhado: topbar interna, topbar publica e cabecalho do visitante ===
   As tres barras passam a usar exatamente a mesma paleta (teal escuro), tipografia
   e tratamento de hover. Logo abaixo cada bloco adapta a marca propria. */

.topbar-main,
.public-topbar,
.visitor-header {
  background: linear-gradient(135deg, rgba(23, 63, 74, 0.94) 0%, rgba(29, 78, 87, 0.94) 100%);
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 6px 22px rgba(23, 63, 74, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}

/* Topbar publica do login - substituir o fundo branco original pelo teal */
.public-topbar,
.login-page > .public-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 60 !important;
}
.public-topbar-inner {
  max-width: 1180px;
  min-height: 72px;
  margin: 0 auto;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.public-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #ffffff;
  text-decoration: none;
}
.public-brand:hover { color: #ffffff; }
.public-brand-mark,
.public-brand img {
  width: 34px;
  height: 34px;
  max-width: 34px;
  max-height: 34px;
  object-fit: contain;
}
.public-brand-copy { display: grid; gap: 1px; }
.public-brand-copy strong { font-size: 16px; color: #ffffff; }
.public-brand-copy small {
  color: rgba(241, 247, 248, 0.92);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
}


/* Header do visitante (padronizado com o topbar interno) */
.visitor-header {
  position: sticky;
  top: 0;
  z-index: 60;
  width: 100%;
  min-height: 72px;
  margin: 0;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  border-bottom: 1px solid #13404a;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-sizing: border-box;
}
.visitor-brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--tea-on-deep);
  text-decoration: none;
}
.visitor-brand:hover { color: #ffffff; }
.visitor-brand-mark {
  width: 34px;
  height: 34px;
  max-width: 34px;
  max-height: 34px;
  object-fit: contain;
}
.visitor-brand-copy { display: grid; gap: 1px; }
.visitor-brand-copy strong { color: #fff; font-size: 16px; }
.visitor-brand-copy small {
  color: var(--tea-on-deep-soft);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
}

/* O nav do visitante flutua a esquerda como nas outras paginas */
.visitor-nav {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 11px;
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.visitor-nav a { transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); }
.visitor-nav a:active { transform: translateY(1px); }

/* Botao do menu (hamburguer) - unico padrao para area interna, login e visitante */
.topbar-menu-button,
.visitor-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .12);
  color: var(--tea-on-deep);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.topbar-menu-button:hover,
.visitor-nav-toggle:hover {
  background: rgba(255, 255, 255, .24);
  color: #ffffff;
}

/* === Mobile: <=980px (tablet) === */
@media (max-width: 980px) {
  .topbar-main { grid-template-columns: auto minmax(0, 1fr) auto; }
  .topbar-account {
    display: flex !important;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 11px;
  }
  .topbar-account .topbar-status { display: none; }
  .topbar-account > span { color: var(--tea-on-deep); font-weight: 700; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-account .logout-form button { padding: 6px 9px; font-size: 11px; }
  .topbar-nav,
  .public-topnav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 200;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    padding: 12px 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    background: linear-gradient(135deg, rgba(29, 78, 87, .97), rgba(23, 63, 74, .97));
    box-shadow: 0 16px 30px rgba(20, 54, 67, .28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .topbar-nav.is-open,
  .topbar-main.menu-aberto .topbar-nav,
  .public-topnav.is-open {
    display: flex;
  }
  .topbar-nav a,
  .public-topnav a {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 13px;
    white-space: normal;
    color: var(--tea-on-deep-soft);
    border-radius: var(--radius-sm);
  }
  .topbar-nav a:hover,
  .public-topnav a:hover { background: rgba(255, 255, 255, .14); color: #ffffff; }
  .topbar-nav a.ativo,
  .public-topnav a.public-topnav-active {
    background: #ffffff;
    color: var(--tea-deep);
  }

  /* Mostra o botao em ambas as barras */
  .topbar-main .topbar-menu-button,
  .topbar-main .btn-menu,
  .topbar-menu-button,
  .public-topbar .visitor-nav-toggle,
  .visitor-nav-toggle {
    display: inline-flex !important;
    margin-left: auto;
    position: relative !important;
    z-index: 5 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
  }

  /* Permite que o menu dropdown ultrapasse o topbar */
  .topbar-main {
    overflow: visible !important;
  }
  .topbar-nav.is-open,
  .topbar-main.menu-aberto .topbar-nav {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Header do visitante - grid com toggle a direita */
  .visitor-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 10px 12px;
    width: min(100% - 16px, 1180px);
  }
  .visitor-brand { grid-column: 1; grid-row: 1; min-width: 0; }
  .visitor-nav-toggle { grid-column: 2; grid-row: 1; justify-self: end; }
  .visitor-nav {
    display: none;
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    padding: 6px;
    border-radius: 12px;
    border-color: rgba(255, 255, 255, .14);
    background: linear-gradient(135deg, rgba(29, 78, 87, .97), rgba(23, 63, 74, .97));
    box-shadow: 0 14px 30px rgba(20, 54, 67, .25);
  }
  .visitor-nav.is-open { display: flex; }
  .visitor-nav a {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 13px;
    border-radius: 8px;
    color: var(--tea-on-deep-soft);
  }
  .visitor-nav a:hover { background: rgba(255, 255, 255, .14); color: #ffffff; }
  .visitor-nav a.nav-active,
  .visitor-nav a[aria-current="page"] {
    background: #ffffff;
    color: var(--tea-deep);
  }

  /* Topbar do login no mobile: alinha marca + toggle */
  .public-topbar-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 10px 12px;
    min-height: 64px;
  }
  .public-brand { grid-column: 1; grid-row: 1; }
  .public-topbar .visitor-nav-toggle { grid-column: 2; grid-row: 1; }
  .public-topnav {
    grid-column: 1 / -1;
    grid-row: 2;
    position: static;
  }
  .public-topnav a { font-size: 12px; padding: 10px 12px; }
}

/* === Mobile: <=720px (celular) === */
@media (max-width: 720px) {
  .topbar-main { padding: 8px 12px; }
  .topbar-nav { flex-wrap: wrap; }
  .topbar-nav a { min-height: 36px; padding: 8px 10px; font-size: 12px; }
  .topbar-account > span { max-width: 90px; }
  .topbar-account .logout-form button { padding: 5px 8px; font-size: 10px; }

  .visitor-header { min-height: 64px; padding: 8px 0; }
  .visitor-nav-toggle { min-height: 38px; padding: 7px 10px; font-size: 12px; }
  .visitor-nav.is-open { flex-direction: column; align-items: stretch; }
  .visitor-nav a { width: 100%; min-height: 46px; padding: 12px 14px; }

  .public-topbar-inner { min-height: 60px; padding: 6px 16px; }
}

/* === Mobile: <=520px === */
@media (max-width: 520px) {
  .topbar-main { padding: 6px 10px; gap: 8px; }
  .topbar-nav a { font-size: 11px; padding: 7px 9px; }
  .topbar-account > span { display: none; }
  .topbar-account .logout-form button { min-height: 32px; padding: 5px 8px; font-size: 10px; }
  .visitor-brand-copy strong { font-size: 14px; }
  .visitor-brand-copy small { font-size: 8px; }
  .public-topnav a,
  .visitor-nav a { font-size: 13px; }
}

/* === Escalas: agenda no celular === */
@media (max-width: 900px) {
  .agenda-calendar { min-width: 560px; }
  .agenda-calendar-card { overflow-x: auto; }
  .agenda-day { min-height: 88px; padding: 7px; }
  .agenda-day-head strong { font-size: 12px; }
  .agenda-day-head span { font-size: 9px; }
  .agenda-day-item { padding: 5px 6px; font-size: 11px; }
  .agenda-day-item time { font-size: 11px; }
  .agenda-day-empty { font-size: 10px; }
  .agenda-more { font-size: 9px; }
  .agenda-calendar td { overflow: hidden; }
}
@media (max-width: 720px) {
  .agenda-modal {
    width: calc(100% - 12px);
    max-height: calc(100vh - 24px);
  }
  .agenda-modal-header { padding: 14px 16px; }
  .agenda-modal-header h2 { font-size: 18px; }
  .agenda-modal-body { grid-template-columns: 1fr; padding: 14px; }
  .agenda-day-sidebar { order: 2; }
  .agenda-day-operations { order: 1; }
  .agenda-appointment { grid-template-columns: 1fr; padding: 12px 14px; }
  .agenda-appointment-main { grid-template-columns: 60px minmax(0, 1fr); gap: 10px; }
  .agenda-status-form {
    min-width: 0;
    padding: 12px 0 0;
    border-left: 0;
    border-top: 1px solid var(--color-border);
    grid-template-columns: 1fr;
  }
  .agenda-status-form button { width: 100%; }
}
@media (max-width: 700px) {
  .agenda-page-head { flex-direction: column; align-items: stretch; }
  .agenda-month-summary { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .agenda-month-summary > div { padding: 8px; }
  .agenda-month-summary strong { font-size: 16px; }
  .agenda-month-summary span { font-size: 9px; }
  .agenda-toolbar { flex-direction: column; align-items: stretch; }
  .agenda-period-form { width: 100%; }
  .agenda-period-form label { min-width: 0; flex: 1 1 auto; }
  .agenda-toolbar-actions { width: 100%; }
  .agenda-primary-action { width: 100%; }
  .agenda-calendar { min-width: 480px; }
  .agenda-day { min-height: 72px; padding: 5px; }
  .agenda-day-item { font-size: 10px; padding: 4px 5px; }
  .agenda-day-item time { font-size: 10px; }
  .agenda-day-empty { font-size: 9px; padding-top: 4px; }
}

/* === Escalas: modal de consulta do visitante (timeline) === */
@media (max-width: 980px) {
  .visitor-consulta-dialog {
    width: calc(100% - 24px);
    max-width: none;
    max-height: calc(100vh - 32px);
  }
  .visitor-consulta-dialog .visitor-status-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .visitor-consulta-dialog .visitor-status-topline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .visitor-consulta-dialog {
    width: calc(100% - 12px);
    max-height: calc(100vh - 12px);
    padding: 16px !important;
  }
  .visitor-consulta-dialog .visitor-status-topline { grid-template-columns: 1fr; }
  .visitor-consulta-dialog .visitor-status-main,
  .visitor-consulta-dialog .visitor-status-aside { padding: 14px !important; }
  .visitor-consulta-form { grid-template-columns: 1fr; }
  .visitor-consulta-form .modal-form-actions { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .visitor-consulta-dialog { padding: 14px !important; border-radius: 14px !important; }
  .visitor-status-page .status-header h2 { font-size: 19px; }
  .status-step { grid-template-columns: 24px minmax(0, 1fr); gap: 10px; min-height: 56px; }
  .status-step-marker { width: 24px !important; height: 24px !important; font-size: 10px !important; }
  .status-step:not(:last-child)::before { left: 11px; top: 23px; }
  .status-step-content strong { font-size: 13px !important; }
  .status-step-content span { font-size: 11px !important; }
}

/* === Legibilidade da timeline (mantida) === */
.visitor-status-page .status-header h2 {
  color: var(--tea-deep) !important;
  font-size: 24px;
  font-weight: 800;
}
.visitor-status-page .status-header p {
  color: var(--tea-text-soft) !important;
  font-size: 13px;
}
.visitor-status-main {
  background: #ffffff !important;
  border: 1px solid var(--tea-line) !important;
  border-radius: 14px !important;
  padding: 22px 22px 18px !important;
  box-shadow: 0 6px 18px rgba(20, 54, 67, .06);
}
.visitor-status-aside {
  background: #ffffff !important;
  border: 1px solid var(--tea-line) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  box-shadow: 0 6px 18px rgba(20, 54, 67, .06);
}
.visitor-status-topline > div {
  padding: 13px 14px !important;
  border: 1px solid var(--tea-mist-2) !important;
  border-radius: 10px !important;
  background: var(--tea-mist) !important;
}
.visitor-status-topline > div span {
  display: block !important;
  color: var(--tea-text-soft) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.visitor-status-topline > div strong {
  display: block !important;
  color: var(--tea-deep) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  word-break: break-word;
}
.visitor-status-aside h3 {
  color: var(--tea-deep) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}
.visitor-status-aside .status-box {
  padding: 12px 14px !important;
  border: 1px solid var(--tea-mist-2) !important;
  border-radius: 10px !important;
  background: var(--tea-mist) !important;
  margin-bottom: 10px;
}
.visitor-status-aside .status-box span {
  display: block !important;
  color: var(--tea-text-soft) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.visitor-status-aside .status-box strong {
  display: block !important;
  margin-top: 4px;
  color: var(--tea-deep) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  word-break: break-word;
  line-height: 1.35;
}
.visitor-status-aside .status-note {
  margin: 8px 0 0;
  color: var(--tea-text-soft) !important;
  font-size: 12px !important;
  line-height: 1.5;
}
.status-step-marker {
  width: 30px !important;
  height: 30px !important;
  font-size: 12px !important;
}
.status-step-content strong {
  color: var(--tea-text) !important;
  font-size: 14px !important;
  font-weight: 800;
}
.status-step-content span {
  color: var(--tea-text-soft) !important;
  font-size: 12px !important;
  line-height: 1.5;
}

/* === Calendario: remove underline padrao === */
a.agenda-day,
a.agenda-day:hover,
a.agenda-day:focus,
a.agenda-day:active,
.agenda-calendar a,
.agenda-calendar a:hover {
  text-decoration: none !important;
  color: inherit;
}
a.agenda-day {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  align-self: stretch !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  min-width: 0 !important;
}
a.agenda-day > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
a.agenda-day .agenda-day-list,
a.agenda-day .agenda-day-head { width: 100%; }
.agenda-day-empty {
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}
.agenda-day-empty {
  font-size: 11px !important;
  color: var(--color-muted) !important;
  text-decoration: none !important;
  padding-top: 6px;
  font-style: italic;
}
.agenda-day-head strong { text-decoration: none !important; }
.agenda-day-head span,
.agenda-day-item span { text-decoration: none !important; }

/* === Visitor hero (mobile) === */
.visitor-hero {
  position: relative;
  overflow: hidden;
  padding: 32px !important;
  border-radius: var(--radius-lg) !important;
  background: linear-gradient(135deg, var(--tea-deep) 0%, var(--tea-deep-2) 100%) !important;
  color: var(--tea-on-deep) !important;
  box-shadow: 0 10px 28px rgba(20, 54, 67, .14) !important;
  margin-bottom: 18px !important;
}
.visitor-hero::before {
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  background-image: url("branding/puzzle-green.svg");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .18;
  pointer-events: none;
}
.visitor-hero > * { position: relative; z-index: 1; }
.visitor-kicker {
  color: rgba(241, 247, 248, .82) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.visitor-hero h1 {
  max-width: 100% !important;
  margin: 8px 0 12px !important;
  color: #ffffff !important;
  font-size: clamp(26px, 4.6vw, 46px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.025em;
  word-break: normal;
  overflow-wrap: anywhere;
}
.visitor-hero p {
  max-width: 100% !important;
  margin: 0 !important;
  color: rgba(241, 247, 248, .92) !important;
  font-size: 15px !important;
  line-height: 1.6;
}
.visitor-safety {
  margin-top: 18px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .08) !important;
  color: #f1f7f8 !important;
  font-size: 12.5px !important;
  line-height: 1.5;
}
.visitor-safety strong { color: #ffffff; }

@media (max-width: 980px) {
  .visitor-hero { padding: 26px !important; border-radius: 16px !important; }
  .visitor-hero h1 { font-size: clamp(24px, 5.2vw, 34px) !important; }
  .visitor-hero p { font-size: 14px !important; }
}
@media (max-width: 720px) {
  .visitor-hero { padding: 22px !important; border-radius: 14px !important; }
  .visitor-hero h1 { font-size: 24px !important; line-height: 1.15 !important; margin: 6px 0 10px !important; }
  .visitor-hero p { font-size: 14px !important; line-height: 1.55 !important; }
  .visitor-safety { font-size: 12px !important; padding: 10px 12px !important; }
}
@media (max-width: 520px) {
  .visitor-hero { padding: 18px !important; border-radius: 12px !important; }
  .visitor-hero h1 { font-size: 21px !important; }
}

/* === Padronizacao de formularios: blur/transparencia consistente === */
.box,
.panel,
.solicitacao-card,
.visitor-card,
.triage-card,
.patient-access-card,
.login-card,
.fila-tools {
  background: rgba(255, 255, 255, .94) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.box label,
.box legend,
.box .field-help,
.box .dica { color: var(--tea-text-soft); }
.page-title-bar .breadcrumb a { color: var(--tea-deep); font-weight: 800; }
.page-title-bar h2 { color: var(--tea-deep); font-size: 22px; }

.pill-ok,
.pill.ok { background: var(--tea-success-soft) !important; color: var(--tea-success) !important; }
.pill-alerta,
.pill.alerta { background: #fbeaee !important; color: var(--tea-danger) !important; }

button:focus-visible,
a:focus-visible,
.topbar-nav a:focus-visible,
.visitor-nav a:focus-visible,
.visitor-nav-toggle:focus-visible,
.topbar-menu-button:focus-visible {
  outline: 3px solid rgba(21, 87, 192, .35);
  outline-offset: 2px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .topbar-nav,
  .visitor-nav,
  .topbar-menu-button,
  .visitor-nav-toggle { transition: none !important; }
}

/* === Logo consistente === */
.tea-logo-header, .tea-logo-card, .tea-logo-visitor,
.topbar-brand-mark, .public-brand-mark, .visitor-brand-mark,
.visitor-brand img {
  width: 34px;
  height: 34px;
  max-width: 34px;
  max-height: 34px;
  object-fit: contain;
}
.tea-logo-header, .topbar-brand-mark { width: 32px; height: 32px; }
.tea-logo-card { width: 42px; height: 42px; }
.tea-logo-visitor { width: 34px; height: 34px; }

/* === Modal da consulta do visitante - flutuante e padronizado === */
.visitor-modal[hidden] { display: none !important; }
.visitor-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  background: rgba(17, 36, 52, .48) !important;
  overflow: auto !important;
}
.visitor-modal-panel {
  width: min(1100px, calc(100% - 32px)) !important;
  max-height: calc(100vh - 40px) !important;
  overflow: auto !important;
  padding: 24px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  background: #fff !important;
  box-shadow: var(--shadow-lg) !important;
}
.visitor-modal.is-open { display: flex !important; }
html.visitor-dialog-open,
body.visitor-dialog-open { overflow: auto !important; }

@media (max-width: 720px) {
  .visitor-modal { padding: 12px !important; }
  .visitor-modal-panel {
    width: 100% !important;
    max-height: calc(100vh - 24px) !important;
    padding: 18px !important;
    border-radius: 14px !important;
  }
}
@media (max-width: 520px) {
  .visitor-modal { padding: 8px !important; }
  .visitor-modal-panel {
    width: 100% !important;
    max-height: calc(100vh - 16px) !important;
    padding: 14px !important;
    border-radius: 12px !important;
  }
}

/* =========================================================
   202. PLANO DE FUNDO GLOBAL + APARENCIA OLED 2026-08-13
   Imagem login-background.webp + overlay branco translucido
   ja esta aplicado em body. Esta secao apenas remove os
   decorativos azul/roxo do login e fixa detalhes mobile.
   ========================================================= */

.login-art-slot-1,
.login-art-slot-3 { display: none !important; }

@media (max-width: 720px) {
  body { background-attachment: scroll !important; }
  .login-main { min-height: calc(100vh - var(--topbar-height) - 16px); padding: 22px 16px 32px; }
  .login-card { padding: 24px 22px; }
}

/* =========================================================
   203. MOBILE UX 2026-08-13
   Aprimoramentos de toque, legibilidade e densidade para telas
   ate 720px. Mantem a identidade visual do TEAcolhe.
   ========================================================= */

/* === Area de toque minima (44px recomendado pela WCAG) === */
@media (max-width: 720px) {
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .btn,
  .button,
  .agenda-primary-action,
  .agenda-secondary-action,
  .visitor-primary-secondary,
  .topbar-nav a,
  .visitor-nav a,
  .public-topnav a,
  .logout-form button,
  .topbar-menu-button,
  .visitor-nav-toggle,
  .modal-close,
  .pill,
  .badge {
    min-height: 44px;
  }

  /* Inputs com tamanho confortavel para digitacao */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="search"],
  input[type="date"],
  input[type="number"],
  select,
  textarea {
    min-height: 46px;
    font-size: 16px;
  }

  /* Botoes full-width no mobile para melhorar alvo de toque */
  .agenda-toolbar-actions > *,
  .login-form button,
  .visitor-form button,
  .agenda-form-actions button,
  .agenda-form-actions a,
  .modal-form-actions button,
  .modal-form-actions a,
  .agenda-new-panel-head a,
  .fila-tools button,
  .fila-access-btn {
    width: 100%;
    justify-content: center;
  }

  /* Selects com seta maior */
  select {
    background-position: right 14px center;
    padding-right: 36px;
  }
}

/* === Cards empilhados com respiro no mobile === */
@media (max-width: 720px) {
  .card,
  .box,
  .panel,
  .visitor-card,
  .triage-card,
  .solicitacao-card,
  .agenda-calendar-card,
  .login-card {
    padding: 16px;
    border-radius: 14px;
  }

  .page-title-bar {
    padding: 14px 16px;
    margin-bottom: 14px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .page-title-bar h2 { font-size: 18px; }

  /* Form grids colapsam para coluna unica */
  .form,
  .form-grid,
  .visitor-form,
  .agenda-modal-filters form,
  .data-tripla,
  .duas,
  .tres,
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-info,
  .checkgrid,
  .triage-form,
  .agenda-new-form {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Tabelas com scroll horizontal suave */
  .tabela-scroll,
  .tablewrap,
  .table-wrap,
  .tabela-wrapper,
  .report-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    font-size: 13px;
  }

  /* Field-help abaixo de inputs com mais espaco */
  .field-help { margin-top: 6px; font-size: 11.5px; }

  /* Links de voltar e acoes nao devem ficar colados */
  .login-back,
  .btn-voltar {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* === Tabela com cards no mobile (visualizacao otimizada) === */
@media (max-width: 720px) {
  .fila-table thead,
  .pacientes-table thead,
  .profissionais-table thead,
  .usuarios-table thead,
  .report-table thead {
    display: none;
  }

  .fila-table,
  .pacientes-table,
  .profissionais-table,
  .usuarios-table {
    border: 0;
  }

  .fila-table tbody tr,
  .pacientes-table tbody tr,
  .profissionais-table tbody tr,
  .usuarios-table tbody tr {
    display: block;
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
  }

  .fila-table tbody td,
  .pacientes-table tbody td,
  .profissionais-table tbody td,
  .usuarios-table tbody td {
    display: block;
    padding: 6px 0;
    border: 0;
    text-align: left;
  }

  .fila-table tbody td::before,
  .pacientes-table tbody td::before,
  .profissionais-table tbody td::before,
  .usuarios-table tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    font-weight: 800;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 2px;
  }
}

/* === Modal de consulta mais confortavel no mobile === */
@media (max-width: 720px) {
  .modal-dialog {
    width: calc(100% - 16px);
    padding: 16px;
    border-radius: 14px;
  }

  .modal-dialog-head {
    flex-direction: column;
    gap: 8px;
  }

  .modal-close {
    align-self: flex-end;
  }

  .modal-form-actions {
    flex-direction: column;
    gap: 8px;
  }

  .modal-form-actions > * {
    width: 100%;
    justify-content: center;
  }
}

/* === Drawer lateral para detalhes no mobile (agenda) === */
@media (max-width: 720px) {
  .agenda-modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .agenda-modal-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 14px 16px;
  }

  .agenda-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 14px 16px;
    grid-template-columns: 1fr !important;
  }

  .agenda-modal-close {
    min-height: 36px;
    padding: 8px 14px;
  }
}

/* === Foco visivel consistente em todos os elementos === */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(21, 87, 192, .45);
  outline-offset: 2px;
  border-radius: 6px;
}

/* === Densidade de fonte para telas muito pequenas === */
@media (max-width: 380px) {
  html { font-size: 14px; }
  body { font-size: 13px; }
  .page-title-bar h2 { font-size: 17px; }
  .login-intro h1 { font-size: 20px; }
}

/* =========================================================
   204. ANIMACOES TEAcolhe - fade, ripple, toast, shake
   ========================================================= */

@keyframes teaFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.tea-fade-in {
  animation: teaFadeIn 420ms ease both;
}

.tea-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transform: scale(0);
  animation: teaRipple 600ms ease-out;
  pointer-events: none;
}

@keyframes teaRipple {
  to { transform: scale(2.4); opacity: 0; }
}

@keyframes teaToastSlide {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes teaShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.dashboard-card:hover,
.card:hover,
.box:hover,
.panel:hover {
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.dashboard-card:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 12px 32px rgba(15, 63, 74, 0.14);
}

.agenda-day-item {
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.agenda-day-item:hover {
  transform: translateX(3px);
  box-shadow: 0 3px 10px rgba(15, 63, 74, 0.08);
}

tbody tr {
  transition: background-color 140ms ease, transform 200ms ease;
}

tbody tr:hover td {
  background: rgba(21, 87, 192, 0.08);
}

.status-step.done .status-step-marker {
  animation: teaPopIn 340ms ease both;
}

@keyframes teaPopIn {
  0% { opacity: 0; transform: scale(0.6); }
  60% { transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}

.status-step.current .status-step-marker {
  animation: teaPulse 1.8s ease-in-out infinite;
}

@keyframes teaPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(21, 87, 192, 0.12); }
  50% { box-shadow: 0 0 0 8px rgba(21, 87, 192, 0.06); }
}

.pill, .badge, .status-chip {
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.pill:hover, .badge:hover, .status-chip:hover {
  transform: scale(1.04);
}

.agenda-day.is-today .agenda-day-head strong {
  animation: teaGlow 2s ease-in-out infinite;
}

@keyframes teaGlow {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50% { text-shadow: 0 0 8px rgba(21, 87, 192, 0.30); }
}

.visitor-hero h1, .page-hero h3, .report-hero h3, .agenda-page-head h3 {
  animation: teaTextRise 500ms ease both;
}

@keyframes teaTextRise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.btn, button, .agenda-primary-action, .agenda-secondary-action, .export-link {
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.btn:hover, button:hover:not(:disabled), .agenda-primary-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(21, 87, 192, 0.18);
}

.btn:active, button:active:not(:disabled) {
  transform: translateY(0) scale(0.97);
  transition-duration: 60ms;
}

.solicitacao-card, .triage-card, .visitor-card {
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.solicitacao-card:hover, .triage-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 63, 74, 0.10);
}

.mini-list > div {
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.mini-list > div:hover {
  transform: translateX(4px);
}

.agenda-occupancy-row, .metric {
  transition: background-color 140ms ease, border-color 140ms ease;
}

.agenda-occupancy-row:hover {
  background: rgba(21, 87, 192, 0.04);
}

@media (prefers-reduced-motion: reduce) {
  .tea-fade-in, .tea-ripple, .visitor-hero h1, .page-hero h3, .report-hero h3, .agenda-page-head h3,
  .status-step.done .status-step-marker, .status-step.current .status-step-marker,
  .agenda-day.is-today .agenda-day-head strong {
    animation: none !important;
  }
  .dashboard-card:hover, .agenda-day-item:hover, .solicitacao-card:hover,
  .mini-list > div:hover, tbody tr:hover td {
    transform: none !important;
  }
}


/* =========================================================
   2026-08-15 · REFINO OPERACIONAL / SEGURANÇA VISUAL
   ========================================================= */
body:not(.login-page):not(.visitor-body) {
  background: #eef3f5 !important;
  background-image:
    radial-gradient(circle at 8% 0%, rgba(21,87,192,.055), transparent 24%),
    radial-gradient(circle at 92% 10%, rgba(44,140,138,.055), transparent 22%),
    linear-gradient(180deg, #f7fafb 0%, #edf3f5 55%, #e9f0f2 100%) !important;
  background-attachment: fixed;
}
body:not(.login-page):not(.visitor-body)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.28) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.28) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.24), transparent 62%);
}
main {
  background: rgba(255,255,255,.96);
  border: 1px solid #dbe6ea;
  border-color: #dbe6ea;
  box-shadow: 0 18px 46px rgba(22,51,66,.08), 0 2px 8px rgba(22,51,66,.035);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.page-title-bar { background: rgba(255,255,255,.93); }
.box,
.dashboard-card,
.chart-card { box-shadow: 0 7px 20px rgba(24,49,73,.06); }

/* Todos os dialogs nativos passam a ter rolagem própria quando o conteúdo cresce. */
.modal-dialog {
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  max-height: min(90vh, 900px);
}
.modal-dialog .form { min-width: 0; }
.modal-dialog form { padding-bottom: 2px; }
.modal-dialog-head { position: sticky; top: -22px; z-index: 3; background: var(--color-surface-raised); }

/* Gráficos leves, sem dependência externa. */
.dashboard-analytics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .95fr);
  gap: 14px;
  margin-bottom: 14px;
}
.chart-card-wide { min-height: 310px; }
.bar-chart {
  display: grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  align-items: end;
  gap: 10px;
  height: 210px;
  padding-top: 18px;
}
.bar-chart-item { min-width: 0; height: 100%; display: grid; grid-template-rows: 18px minmax(0,1fr) 18px; gap: 7px; align-items: end; text-align: center; }
.bar-chart-value { color: var(--color-primary-strong); font-size: 11px; font-weight: 900; }
.bar-chart-track { height: 100%; display: flex; align-items: end; justify-content: center; padding: 0 7px; border-radius: 9px; background: linear-gradient(180deg, rgba(231,238,251,.6), rgba(214,238,237,.42)); }
.bar-chart-track span { display: block; width: 100%; min-height: 4px; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, var(--color-primary), var(--color-teal)); box-shadow: 0 5px 12px rgba(21,87,192,.16); }
.bar-chart-label { color: var(--color-muted); font-size: 10px; font-weight: 800; }
.occupancy-chart-list, .status-chart-list { display: grid; gap: 12px; }
.occupancy-chart-row, .status-chart-row { display: grid; gap: 6px; }
.occupancy-chart-meta, .status-chart-row > div:first-child { display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.occupancy-chart-meta strong, .status-chart-row strong { color: var(--color-text); font-size: 12px; }
.occupancy-chart-meta span, .status-chart-row span { color: var(--color-muted); font-size: 10px; font-weight: 800; white-space: nowrap; }
.occupancy-track, .status-track { height: 9px; overflow: hidden; border-radius: 999px; background: #e9eff2; }
.occupancy-track span, .status-track span { display:block; height:100%; border-radius:inherit; background: linear-gradient(90deg, var(--color-teal), var(--color-primary)); }
.status-track span { background: linear-gradient(90deg, var(--color-primary), var(--color-purple)); }

@media (max-width: 980px) {
  .dashboard-analytics-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .bar-chart { gap: 6px; }
  .bar-chart-track { padding: 0 3px; }
  .occupancy-chart-meta, .status-chart-row > div:first-child { align-items: flex-start; flex-direction: column; gap: 2px; }
}

/* =========================================================
   2026-08-15 v2 · ACABAMENTO VISUAL / MODAIS
   ========================================================= */
.topbar-main {
  background: linear-gradient(135deg, #123b46 0%, #184d57 58%, #20656a 100%);
  box-shadow: 0 5px 18px rgba(18,59,70,.18);
}
.topbar-main::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  background: linear-gradient(90deg, #1557c0 0%, #2c8c8a 48%, #6cb28b 100%);
  pointer-events: none;
}
.topbar-nav {
  border-color: rgba(255,255,255,.12);
  background: rgba(8,31,38,.46);
}
.page-title-bar {
  background: #f7fafb;
  border: 1px solid #e1eaee;
  box-shadow: 0 4px 15px rgba(22,51,66,.045);
}
.box, .dashboard-card, .chart-card {
  background: #fff;
  border-color: #e1eaee;
  box-shadow: 0 7px 22px rgba(24,49,73,.05);
}
.dashboard-analytics-grid {
  grid-template-columns: minmax(0,1.4fr) minmax(300px,.8fr);
  align-items: stretch;
}
.dashboard-analytics-grid .chart-card-wide { grid-row: span 2; }

/* Native agenda dialog: one dependable scroll region, with a visible scrollbar. */
.agenda-modal-backdrop {
  padding: 0;
  overflow: auto;
  align-items: flex-start;
  justify-content: center;
}
.agenda-modal {
  height: min(860px, calc(100dvh - 48px));
  max-height: calc(100dvh - 48px);
  min-height: 0;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden !important;
}
.agenda-modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none;
  overflow-y: auto !important;
  scrollbar-gutter: stable;
  scrollbar-width: auto;
  scrollbar-color: #9fb4bf #edf3f5;
}
.agenda-modal-body::-webkit-scrollbar { width: 12px; }
.agenda-modal-body::-webkit-scrollbar-track { background: #edf3f5; border-radius: 8px; }
.agenda-modal-body::-webkit-scrollbar-thumb { background: #9fb4bf; border-radius: 8px; border: 3px solid #edf3f5; }
.agenda-modal-body::-webkit-scrollbar-thumb:hover { background: #7f9aa8; }
.agenda-day-operations { min-width: 0; }
.agenda-day-sidebar { min-width: 0; }
.agenda-new-panel { background: #f8fbfc; }
.agenda-new-form { min-width: 0; }

/* Profissional dialog: header stays readable while form content scrolls. */
.profissional-dialog {
  max-height: min(88dvh, 820px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  scrollbar-color: #9fb4bf #edf3f5;
}
.profissional-dialog::-webkit-scrollbar { width: 11px; }
.profissional-dialog::-webkit-scrollbar-track { background: #edf3f5; }
.profissional-dialog::-webkit-scrollbar-thumb { background: #9fb4bf; border-radius: 8px; border: 3px solid #edf3f5; }
.profissional-dialog .modal-dialog-head {
  position: sticky;
  top: -22px;
  z-index: 5;
  background: #fff;
}

@media (max-width: 720px) {
  .agenda-modal-backdrop { padding: 0; }
  .agenda-modal { height: 100dvh; max-height: none; }
  .dashboard-analytics-grid .chart-card-wide { grid-row: auto; }
}

.chart-badge { display:inline-flex; align-items:center; min-height:28px; padding:5px 9px; border-radius:999px; background:#e7eefb; color:#0f3f78; border:1px solid #d0def1; font-size:10px; font-weight:900; white-space:nowrap; }
.chart-badge.teal { background:#d6eeed; color:#206a69; border-color:#c4e3e2; }
.chart-badge.purple { background:#ede4f6; color:#64458c; border-color:#dfd2ec; }


/* =====================================================================
   IDENTIDADE TEACOLHE — mosaico de peças e superfícies mais acolhedoras
   ===================================================================== */
.app-main {
  position: relative;
  isolation: isolate;
}
.app-main > :not(.tea-puzzle-atmosphere) {
  position: relative;
  z-index: 1;
}
.tea-puzzle-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.tea-puzzle {
  position: absolute;
  width: 100px;
  height: 100px;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(28,53,72,.09));
  opacity: .16;
}
.tea-puzzle-blue { top: 22px; right: 28px; transform: rotate(10deg); }
.tea-puzzle-green { top: 115px; right: 125px; width: 76px; height: 76px; transform: rotate(-12deg); opacity: .13; }
.tea-puzzle-purple { top: 52px; left: -22px; width: 88px; height: 88px; transform: rotate(-8deg); opacity: .11; }
.tea-puzzle-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 4px 8px 5px 8px;
  transform: rotate(18deg);
  opacity: .3;
}
.tea-puzzle-dot-1 { top: 180px; left: 9%; background: #2f75d6; }
.tea-puzzle-dot-2 { top: 92px; right: 8%; background: #52a68e; }
.tea-puzzle-dot-3 { top: 260px; right: 13%; background: #8a67bc; }

.page-title-bar {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(249,252,253,.96) 70%, rgba(238,247,246,.95) 100%);
  border-color: #dfeaec;
  box-shadow: 0 8px 24px rgba(25,52,68,.05);
}
.page-title-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, #2f75d6 0 33%, #52a68e 33% 66%, #8a67bc 66% 100%);
  opacity: .72;
}
.page-title-bar h2 { letter-spacing: -.025em; }

.topbar-main {
  position: relative;
  overflow: hidden;
  background: linear-gradient(110deg, #153f4b 0%, #174f5b 58%, #206d70 100%);
}
.topbar-main::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    url('branding/puzzle-purple.svg') no-repeat right -48px top -44px / 150px 150px,
    url('branding/puzzle-blue.svg') no-repeat left 31% top -86px / 128px 128px,
    url('branding/puzzle-green.svg') no-repeat right 29% bottom -72px / 118px 118px;
  opacity: .11;
}
.topbar-nav a { position: relative; }
.topbar-nav a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 5px;
  height: 3px;
  border-radius: 99px;
  background: rgba(255,255,255,.0);
  transform: scaleX(.5);
  transition: .18s ease;
}
.topbar-nav a:nth-child(1)::after { background: #8a67bc; }
.topbar-nav a:nth-child(2)::after { background: #52a68e; }
.topbar-nav a:nth-child(3)::after { background: #2f75d6; }
.topbar-nav a:nth-child(4)::after { background: #52a68e; }
.topbar-nav a:nth-child(5)::after { background: #8a67bc; }
.topbar-nav a:nth-child(6)::after { background: #2f75d6; }
.topbar-nav a:nth-child(7)::after { background: #52a68e; }
.topbar-nav a:hover::after,
.topbar-nav a.ativo::after { transform: scaleX(1); }
.topbar-nav a.ativo::after { background: #ffffff; }

.page-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid #dbe8ea;
  background:
    linear-gradient(115deg, rgba(255,255,255,.98) 0%, rgba(248,252,252,.95) 62%, rgba(232,245,243,.92) 100%);
  box-shadow: 0 12px 30px rgba(23,58,73,.06);
}
.page-hero::after {
  content: "";
  position: absolute;
  right: 18px;
  top: -52px;
  width: 170px;
  height: 170px;
  background: url('branding/puzzle-blue.svg') center/contain no-repeat;
  opacity: .08;
  transform: rotate(13deg);
}
.page-hero-actions { position: relative; z-index: 2; }

.dashboard-card,
.box,
.chart-card {
  border-color: #dfeaec;
  box-shadow: 0 9px 26px rgba(24,49,73,.055);
}
.dashboard-card.destaque::before,
.dashboard-card.alerta::before,
.dashboard-card.online-card::before {
  opacity: .8;
}

@media (max-width: 720px) {
  .tea-puzzle-blue { right: -30px; top: 12px; width: 84px; height: 84px; }
  .tea-puzzle-green { right: 70px; top: 92px; width: 62px; height: 62px; }
  .tea-puzzle-purple { left: -32px; top: 24px; width: 74px; height: 74px; }
  .page-hero::after { right: -36px; top: -40px; width: 130px; height: 130px; }
}


/* =========================================================
   2026-08-15 v3 · AGENDA ROBUSTA + PALETA TEACOLHE + VIDRO
   ========================================================= */

:root {
  --tea-blue-2: #2f75d6;
  --tea-green-2: #52a68e;
  --tea-purple-2: #8a67bc;
  --tea-orange: #e78336;
  --tea-yellow-2: #d9a62e;
  --tea-coral-2: #d96b5c;
  --tea-red-2: #c94f5a;
  --tea-pink: #c96b93;
  --tea-aqua: #54aeb2;
}

/* A causa do modal da agenda desaparecer era o recorte do .app-main.
   Modal fixed precisa escapar do clipping do container. */
.app-main { overflow: visible !important; }
.tea-puzzle-atmosphere { overflow: hidden; }

/* A agenda passa a ter uma abertura de modal previsível, sem travar a página. */
.agenda-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw;
  height: 100dvh;
  overflow: auto !important;
  align-items: flex-start !important;
  justify-content: center !important;
  z-index: 9990 !important;
}
.agenda-modal {
  position: relative !important;
  margin: 24px auto !important;
  max-height: calc(100dvh - 48px) !important;
}
body.agenda-modal-open {
  overflow: hidden !important;
  touch-action: none;
}
.agenda-modal-body {
  overscroll-behavior-y: contain !important;
  scroll-behavior: auto;
  touch-action: pan-y !important;
}
@media (max-width: 720px) {
  .agenda-modal-backdrop { align-items: flex-start !important; }
  .agenda-modal {
    position: fixed !important;
    inset: 0 !important;
    margin: 0 !important;
    max-height: 100dvh !important;
    height: 100dvh !important;
    border-radius: 0 !important;
  }
}

/* Cores adicionais para não deixar a identidade presa a azul/verde/roxo. */
.page-title-bar::after {
  background: linear-gradient(90deg,
    var(--tea-blue-2) 0 16%,
    var(--tea-green-2) 16% 32%,
    var(--tea-purple-2) 32% 48%,
    var(--tea-orange) 48% 64%,
    var(--tea-coral-2) 64% 80%,
    var(--tea-yellow-2) 80% 100%);
  opacity: .86;
}
.topbar-main::after {
  background:
    url('branding/puzzle-purple.svg') no-repeat right -48px top -44px / 150px 150px,
    url('branding/puzzle-blue.svg') no-repeat left 31% top -86px / 128px 128px,
    url('branding/puzzle-green.svg') no-repeat right 29% bottom -72px / 118px 118px,
    linear-gradient(90deg, var(--tea-orange), var(--tea-coral-2), var(--tea-yellow-2), var(--tea-pink));
  background-blend-mode: normal, normal, normal, normal;
  opacity: .13;
}
.topbar-nav a:nth-child(1)::after { background: var(--tea-purple-2); }
.topbar-nav a:nth-child(2)::after { background: var(--tea-green-2); }
.topbar-nav a:nth-child(3)::after { background: var(--tea-blue-2); }
.topbar-nav a:nth-child(4)::after { background: var(--tea-orange); }
.topbar-nav a:nth-child(5)::after { background: var(--tea-coral-2); }
.topbar-nav a:nth-child(6)::after { background: var(--tea-yellow-2); }
.topbar-nav a:nth-child(7)::after { background: var(--tea-pink); }
.tea-puzzle-dot-1 { background: var(--tea-orange); }
.tea-puzzle-dot-2 { background: var(--tea-coral-2); }
.tea-puzzle-dot-3 { background: var(--tea-yellow-2); }

/* Login: imagem em tela cheia + camada de vidro fosco cobrindo todo o palco. */
body.login-page {
  min-height: 100dvh;
  background-color: #dfecef !important;
  background-image: var(--tea-login-background-image) !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
}
body.login-page::before {
  display: block !important;
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(8, 28, 40, .32);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
}
body.login-page::after {
  display: block !important;
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 16%, rgba(231,131,54,.22), transparent 26%),
    radial-gradient(circle at 86% 12%, rgba(201,79,90,.18), transparent 24%),
    radial-gradient(circle at 86% 78%, rgba(217,166,46,.20), transparent 28%);
}
.login-main {
  width: 100% !important;
  min-height: calc(100dvh - 72px) !important;
  margin: 0 !important;
  padding: clamp(28px, 5vw, 72px) clamp(20px, 6vw, 84px) !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border-radius: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible;
}
.login-main > * { position: relative; z-index: 1; }
.login-badget {
  width: clamp(110px, 18vw, 168px);
  height: auto;
  margin-bottom: -84px;
  filter: drop-shadow(0 14px 26px rgba(8, 35, 48, .35));
  position: relative;
  z-index: 2;
}
.login-card {
  max-width: 480px !important;
  width: 100%;
  padding-top: 72px !important;
  background: rgba(255,255,255,.62) !important;
  border-color: rgba(255,255,255,.55) !important;
  box-shadow: 0 24px 70px rgba(8,35,48,.35), inset 0 1px 0 rgba(255,255,255,.95) !important;
  backdrop-filter: blur(34px) saturate(180%);
  -webkit-backdrop-filter: blur(34px) saturate(180%);
}
.login-back {
  align-self: flex-start;
  margin-left: max(0px, calc((100% - 480px) / 2));
}
.login-card::before {
  content: "";
  display: block;
  width: 84px;
  height: 5px;
  margin-bottom: 18px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--tea-blue-2), var(--tea-green-2), var(--tea-purple-2), var(--tea-orange), var(--tea-coral-2));
}

/* Portal: mais confortável no PC, mantendo empilhamento no celular. */
body.visitor-body {
  min-height: 100dvh;
  background:
    linear-gradient(135deg, rgba(249,252,252,.88), rgba(233,243,243,.62)),
    url('/assets/branding/login-background.webp') center/cover fixed !important;
}
.visitor-shell {
  width: min(1360px, calc(100% - 48px)) !important;
  padding-top: 18px !important;
}
.visitor-header {
  max-width: 1360px;
  border-radius: 18px !important;
}
.visitor-main { padding-top: 24px !important; }
.visitor-grid-main {
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
}
.visitor-primary-card { height: 100%; }
.visitor-secondary-grid {
  grid-template-columns: 1fr !important;
  gap: 18px !important;
}
.visitor-secondary-card,
.visitor-recovery,
.visitor-primary-card,
.visitor-help,
.visitor-success {
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: 0 12px 34px rgba(24,54,69,.08);
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.visitor-hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(23,63,74,.96), rgba(38,92,97,.91)),
    url('branding/puzzle-purple.svg') no-repeat right -55px top -65px / 180px;
}
.visitor-hero::after {
  content: "";
  position: absolute;
  right: 7%;
  bottom: -56px;
  width: 170px;
  height: 170px;
  background: url('branding/puzzle-blue.svg') center/contain no-repeat;
  opacity: .10;
}

@media (max-width: 980px) {
  .login-main {
    flex-direction: column;
    align-items: center;
    gap: 16px !important;
  }
  .login-card { width: min(100%, 520px); }
  .login-back { align-self: center; margin-left: 0; }
  .visitor-shell { width: min(100% - 28px, 980px) !important; }
  .visitor-grid-main { grid-template-columns: 1fr !important; }
  .visitor-secondary-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 700px) {
  .login-main { padding: 24px 16px 36px !important; }
  .login-card { padding: 24px 20px !important; }
  .visitor-shell { width: calc(100% - 20px) !important; }
  .visitor-secondary-grid { grid-template-columns: 1fr !important; }
  .visitor-header { position: sticky; top: 10px; }
}


.access-generated-card{padding:18px;border:1px solid #d7e6eb;border-radius:14px;background:#f7fbfc}
.access-generated-card>strong{display:block;color:#0f3f78;font-size:1.05rem;margin-bottom:6px}
.access-generated-card p{margin:0 0 14px;color:#54697a}
.access-generated-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.access-generated-grid>div{padding:12px;border-radius:10px;background:#fff;border:1px solid #e1eaee}
.access-generated-grid span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:#6a7c88;font-weight:800}
.access-generated-grid strong{display:block;margin-top:4px;color:#153f4b;letter-spacing:.04em}
@media(max-width:620px){.access-generated-grid{grid-template-columns:1fr}}


/* Agenda: acesso rápido à ficha sem alterar o layout original. */
.slot-patient-view {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    margin-left:auto;
    border-radius:8px;
    text-decoration:none;
}
.slot-patient-view:hover { opacity:.8; }

/* =========================================================
   TEAcolhe v24 — estabilização final de modais, agenda e responsivo
   ========================================================= */

/* Modal: sempre pertence ao viewport, independente do container de origem. */
.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  padding: 20px !important;
  box-sizing: border-box;
  overflow: auto !important;
  z-index: 9999 !important;
  background: rgba(8, 22, 36, .62) !important;
  backdrop-filter: blur(7px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(7px) saturate(110%) !important;
}
.modal-overlay.open,
.modal-overlay.is-open {
  display: flex !important;
}
.modal-overlay > .modal {
  position: relative !important;
  flex: 0 0 auto;
  width: min(900px, calc(100vw - 40px)) !important;
  max-width: 100% !important;
  max-height: calc(100dvh - 40px) !important;
  margin: auto !important;
  box-sizing: border-box;
}
.modal-overlay > .modal .modal-body {
  min-height: 0;
  overflow: auto;
}

/* Horários: passado não pode parecer livre/clicável. */
.agenda-slot.past {
  cursor: not-allowed !important;
  opacity: .48;
  background: #edf2f4 !important;
  border-color: #d6e0e4 !important;
}
.agenda-slot.past .slot-free { color: #7a8b94; }
.agenda-slot.is-selected {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(21, 87, 192, .16), 0 8px 18px rgba(21, 87, 192, .14) !important;
  background: #eef5ff !important;
}
.agenda-slot.is-selected .slot-time {
  color: var(--color-primary-strong) !important;
  font-weight: 900;
}

/* Gráfico de volume: garante barras visíveis mesmo quando todos os valores são zero. */
.chart-bars {
  min-height: 250px !important;
  align-items: flex-end !important;
  position: relative;
  padding-bottom: 28px !important;
}
.chart-bar-wrapper {
  min-height: 210px !important;
  position: relative;
}
.chart-bar {
  min-height: 4px !important;
  max-height: 190px !important;
  width: min(54px, 72%) !important;
  background: linear-gradient(180deg, var(--color-primary), var(--color-teal)) !important;
  box-shadow: 0 4px 10px rgba(21, 87, 192, .16);
}
.chart-bar[data-zero="1"] { opacity: .25; }
.chart-bar-value { position: relative; z-index: 2; }

/* Menu público e visitante: mesma geometria e comportamento responsivo. */
.public-topbar,
.visitor-header {
  width: 100%;
}
.public-topbar-inner,
.visitor-header {
  box-sizing: border-box;
}

@media (min-width: 901px) {
  .public-topbar-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    min-height: 72px !important;
  }
  .public-topnav,
  .visitor-nav {
    display: flex !important;
    position: static !important;
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
    flex-wrap: nowrap;
  }
  .public-topbar .visitor-nav-toggle,
  .visitor-header .visitor-nav-toggle {
    display: none !important;
  }
  .visitor-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
  }
}

@media (max-width: 900px) {
  .public-topbar-inner,
  .visitor-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 8px 10px !important;
    width: 100% !important;
    max-width: none !important;
    padding: 8px 12px !important;
    min-height: 62px !important;
  }
  .public-brand,
  .visitor-brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }
  .public-topbar .visitor-nav-toggle,
  .visitor-header .visitor-nav-toggle {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    display: inline-flex !important;
    margin: 0 !important;
  }
  .public-topnav,
  .visitor-nav {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: none !important;
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 5px !important;
    padding: 7px !important;
    margin: 0 !important;
    border-radius: 12px !important;
  }
  .public-topnav.is-open,
  .visitor-nav.is-open {
    display: flex !important;
  }
  .public-topnav a,
  .visitor-nav a {
    width: 100% !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    white-space: normal !important;
  }

  .topbar-main {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, auto) !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 60px !important;
    padding: 8px 12px !important;
  }
  .topbar-brand { min-width: 0 !important; }
  .topbar-brand-copy { min-width: 0 !important; }
  .topbar-brand-copy strong { font-size: 15px !important; }
  .topbar-brand-copy small { font-size: 8px !important; }
  .topbar-account {
    min-width: 0 !important;
    max-width: 132px !important;
    justify-content: flex-end !important;
  }
  .topbar-account > span:not(.topbar-status) {
    max-width: 78px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .topbar-nav {
    left: 10px !important;
    right: 10px !important;
    top: calc(100% + 4px) !important;
    width: auto !important;
    max-height: calc(100dvh - 78px) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 600px) {
  .public-topbar-inner,
  .visitor-header {
    padding: 7px 10px !important;
  }
  .topbar-main { padding: 7px 10px !important; }
  .topbar-account { max-width: 92px !important; }
  .topbar-account > span:not(.topbar-status) { display: none !important; }
  .modal-overlay { padding: 10px !important; }
  .modal-overlay > .modal {
    width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
  }
  .modal-header { padding: 14px 16px !important; }
  .modal-body { padding: 16px !important; }
  .agenda-grid { grid-template-columns: 1fr !important; }
  .agenda-controls { width: 100% !important; display: grid !important; grid-template-columns: 1fr !important; }
  .agenda-controls > * { width: 100% !important; }
}

/* Fila: botões principais lado a lado, ações secundárias agrupadas */
.fila-acoes { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.fila-acoes-principais { display: flex; gap: 8px; flex-wrap: wrap; }
.fila-acoes-secundarias { display: flex; gap: 4px; flex-wrap: wrap; }

/* Checkboxes para dias de atendimento */
.dias-atendimento-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.checkbox-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border: 2px solid #d0dde2;
  border-radius: var(--radius-sm);
  background: #f7fafb;
  cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--color-text);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
  user-select: none;
}
.checkbox-pill:hover { border-color: var(--color-primary); }
.checkbox-pill input[type="checkbox"] { width: auto; min-height: 0; margin: 0; }
.checkbox-pill:has(input:checked) {
  border-color: var(--color-primary);
  background: #e7eefb;
  color: var(--color-primary-strong);
}

/* Agenda: profissional não atende neste dia */
.agenda-column.nao-atende { opacity: 0.6; background: #f8f9fa; }
.agenda-column.nao-atende .agenda-column-header { background: #f0f2f5; border-bottom-color: #e0e4e8; }
.agenda-column.nao-atende .agenda-column-header h3 { color: var(--color-muted); }
.nao-atende-header .nao-atende-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: #ffe5e5;
  color: var(--color-danger);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.nao-atende-slot { pointer-events: none; }
.agenda-column.nao-atende .agenda-column-footer { display: none; }

/* =========================================================
   2026-08-21 · AJUSTES DE FLUXO MOBILE / LOGIN / VISITANTE
   ========================================================= */

.form-note {
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(79, 121, 146, .24);
  border-radius: var(--radius-md);
  background: rgba(236, 244, 246, .92);
  color: var(--color-text);
  font-size: 13px;
  line-height: 1.55;
}
.form-note strong { color: var(--color-primary-strong); }

.visitor-header-shell {
  position: sticky;
  top: 0;
  z-index: 80;
  padding: 10px 14px 0;
  background: linear-gradient(180deg, rgba(233, 240, 243, .96) 0%, rgba(233, 240, 243, 0) 100%);
}
.visitor-header {
  width: min(100%, 1180px);
  margin: 0 auto;
  justify-content: space-between;
}
.visitor-nav { justify-content: flex-end; }
.visitor-shell {
  width: min(100% - 24px, 1180px);
  margin: 0 auto;
}
.visitor-main {
  padding-top: 18px;
  padding-bottom: 32px;
}
.visitor-hero,
.visitor-card,
.visitor-help {
  border-radius: 24px;
}
.visitor-primary-card,
.visitor-secondary-grid > .visitor-card,
.visitor-help {
  box-shadow: 0 18px 40px rgba(15, 63, 74, .07);
}
.visitor-grid-main { gap: 18px; }
.visitor-secondary-grid { align-items: stretch; }
.visitor-secondary-grid > .visitor-card { height: 100%; }
.visitor-secondary-grid .visitor-card { margin: 0; }
.visitor-recovery .visitor-form { align-content: start; }

.login-page-simple::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 14% 20%, rgba(255,255,255,.68), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.38), transparent 28%),
    linear-gradient(135deg, rgba(18, 71, 82, .92), rgba(28, 84, 96, .82));
  z-index: -2;
}
.login-page-simple::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: var(--tea-login-background-image);
  background-size: cover;
  background-position: center;
  opacity: .18;
  z-index: -1;
}
.login-simple-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 28px 16px;
}
.login-card-simplified {
  width: min(100%, 460px);
  margin: 0;
  padding: 28px 28px 24px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.58);
  background: rgba(247, 251, 252, .94);
  box-shadow: 0 28px 60px rgba(7, 30, 43, .24);
}
.login-badge-top {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
.login-badge-top img {
  width: 88px;
  max-width: 100%;
  filter: drop-shadow(0 10px 18px rgba(9, 39, 51, .12));
}
.login-card-simplified .login-card-brand {
  justify-content: center;
  margin-bottom: 14px;
}
.login-card-simplified .login-card-brand div {
  align-items: center;
  text-align: center;
}
.login-card-simplified .login-card-heading {
  text-align: center;
}
.login-card-simplified .login-form {
  margin-top: 18px;
}
.login-card-simplified .login-form input {
  min-height: 48px;
}
.login-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  color: #f2f8fa;
  text-decoration: none;
  font-weight: 700;
  backdrop-filter: blur(8px);
}
.login-back:hover { background: rgba(255,255,255,.28); color: #ffffff; }

.mobile-dock,
.mobile-more-sheet { display: none; }

@media (max-width: 980px) {
  .app-main { padding-bottom: 108px; }
  .topbar-account { display: none !important; }

  .mobile-dock {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 140;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(122, 160, 182, .28);
    border-radius: 22px;
    background: rgba(249, 252, 253, .96);
    box-shadow: 0 18px 34px rgba(16, 48, 63, .16);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .mobile-dock-item {
    appearance: none;
    width: 100%;
    min-height: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: #5f7281;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
  }
  .mobile-dock-item.is-active {
    background: rgba(27, 93, 197, .10);
    color: var(--color-primary-strong);
  }
  .mobile-dock-icon {
    font-size: 16px;
    line-height: 1;
  }

  .mobile-more-sheet {
    position: fixed;
    inset: 0;
    z-index: 150;
    padding: 18px 12px 110px;
    background: rgba(8, 24, 37, .44);
  }
  .mobile-more-sheet.is-open { display: block; }
  .mobile-more-sheet-card {
    width: min(100%, 460px);
    margin: auto;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.66);
    background: rgba(249, 252, 253, .98);
    box-shadow: 0 24px 48px rgba(8, 24, 37, .24);
  }
  .mobile-more-sheet-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
  }
  .mobile-more-sheet-head strong {
    display: block;
    color: var(--color-primary-strong);
    font-size: 16px;
  }
  .mobile-more-sheet-head small {
    color: var(--color-muted);
    font-size: 12px;
  }
  .mobile-more-close {
    width: 38px;
    height: 38px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: #fff;
    color: var(--color-primary-strong);
    font-size: 24px;
    line-height: 1;
  }
  .mobile-more-links {
    display: grid;
    gap: 10px;
  }
  .mobile-more-links a,
  .mobile-more-logout button {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    border: 1px solid rgba(130, 169, 191, .28);
    background: rgba(239, 246, 248, .94);
    color: var(--color-primary-strong);
    font-weight: 700;
    text-decoration: none;
  }
  .mobile-more-logout {
    margin-top: 14px;
  }
  .mobile-more-logout button {
    background: var(--color-primary);
    color: #fff;
  }

  .visitor-header-shell {
    padding: 10px 12px 0;
  }
  .visitor-header {
    width: min(100%, 100%);
  }
  .visitor-nav {
    justify-content: flex-start;
    align-items: stretch;
  }
  .visitor-nav a {
    width: 100%;
    text-align: left;
  }
}

@media (max-width: 720px) {
  .login-card-simplified {
    width: min(100%, 100%);
    padding: 24px 18px 20px;
    border-radius: 24px;
  }
  .login-badge-top img { width: 76px; }
  .mobile-dock {
    left: 10px;
    right: 10px;
    bottom: 10px;
    gap: 6px;
    padding: 6px;
  }
  .mobile-dock-item {
    min-height: 54px;
    font-size: 10px;
  }
  .visitor-shell {
    width: min(100% - 18px, 1180px);
  }
}

/* =========================================================
   2026-08-21 · REVISÃO 2 — MENU, LOGIN, FORMULÁRIOS
   ========================================================= */

/* Header interno: uma identidade fixa em cima e a navegação sempre abaixo. */
.topbar-main.topbar-stacked {
  position: sticky;
  top: 0;
  z-index: 120;
  display: block;
  min-height: 0;
  padding: 0;
  overflow: visible;
  background: linear-gradient(110deg, #153f4b 0%, #174f5b 58%, #206d70 100%);
}
.topbar-stacked .topbar-brand-row {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 8px 22px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.topbar-stacked .topbar-brand-link {
  flex: 0 0 auto;
}
.topbar-stacked .topbar-account {
  display: flex;
  margin-left: auto;
}
.topbar-stacked .topbar-nav-stacked {
  position: static;
  width: 100%;
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 18px 8px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: rgba(9, 34, 41, .30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.topbar-stacked .topbar-nav-stacked a {
  flex: 0 0 auto;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 13px;
  white-space: nowrap;
}
.topbar-stacked .topbar-nav-stacked a.ativo {
  background: #ffffff;
  color: #153f4b;
  box-shadow: 0 3px 12px rgba(4, 27, 34, .14);
}

/* Cadastro de profissionais: checkboxes claros em vez do select múltiplo nativo. */
.form-label {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
}
.professional-choice-grid {
  display: grid;
  gap: 7px;
  max-height: 190px;
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(85, 130, 160, .28);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.80);
  overscroll-behavior: contain;
}
.professional-choice {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: rgba(239,245,248,.72);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.professional-choice:hover {
  border-color: rgba(21,87,192,.24);
  background: #f7fbfc;
}
.professional-choice:has(input:checked) {
  border-color: rgba(21,87,192,.38);
  background: #eaf2ff;
}
.professional-choice input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-primary);
}
.professional-choice span {
  min-width: 0;
}
.professional-choice strong,
.professional-choice small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.professional-choice strong {
  color: var(--color-text);
  font-size: 12px;
}
.professional-choice small {
  margin-top: 1px;
  color: var(--color-muted);
  font-size: 10px;
  font-weight: 600;
}

/* Login: apenas fundo + um único card. Remove as superfícies brancas herdadas do tema. */
body.login-page-clean {
  min-height: 100vh;
  background-image:
    linear-gradient(135deg, rgba(12,55,67,.60), rgba(21,87,192,.18)),
    var(--tea-login-background-image) !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
}
body.login-page-clean::before,
body.login-page-clean::after {
  display: none !important;
}
body.login-page-clean > main.login-clean-shell,
.login-clean-shell {
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 28px 16px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.login-clean-card {
  width: min(100%, 440px);
  padding: 26px 28px 24px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 24px;
  background: rgba(250,253,254,.94);
  box-shadow: 0 24px 60px rgba(7,31,43,.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.login-clean-card .login-badge-top {
  margin-bottom: 8px;
}
.login-clean-card .login-badge-top img {
  width: 70px;
}
.login-clean-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(140,175,196,.28);
  text-align: left;
}
.login-clean-brand > img {
  width: 34px;
  height: 34px;
}
.login-clean-brand strong,
.login-clean-brand span {
  display: block;
}
.login-clean-brand strong {
  color: var(--color-primary-strong);
  font-size: 15px;
}
.login-clean-brand span {
  color: var(--color-muted);
  font-size: 10px;
}
.login-clean-card .login-card-heading {
  text-align: center;
}
.login-clean-card .login-card-heading h1 {
  margin: 0 0 5px;
  color: var(--color-text);
  font-size: 24px;
}
.login-clean-card .login-card-heading p {
  margin: 0;
}
.login-clean-card .login-form {
  margin-top: 20px;
}
.login-clean-card .login-form input {
  min-height: 48px;
}
.login-clean-card .login-form button {
  min-height: 48px;
  margin-top: 5px;
}
.login-clean-back {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 9px 15px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 999px;
  background: rgba(7,35,45,.28);
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  backdrop-filter: blur(8px);
}
.login-clean-back:hover {
  color: #fff;
  background: rgba(7,35,45,.42);
}

/* Em desktop estreito, o menu quebra linha em vez de cortar itens. */
@media (max-width: 1250px) and (min-width: 981px) {
  .topbar-stacked .topbar-nav-stacked {
    justify-content: center;
    gap: 3px;
  }
  .topbar-stacked .topbar-nav-stacked a {
    min-height: 36px;
    padding: 7px 10px;
    font-size: 12px;
  }
}

/* Tablet/celular: topo só com a identidade; navegação fica no dock inferior. */
@media (max-width: 980px) {
  .topbar-main.topbar-stacked {
    min-height: 58px;
  }
  .topbar-stacked .topbar-brand-row {
    min-height: 58px;
    justify-content: center;
    padding: 8px 14px;
  }
  .topbar-stacked .topbar-brand-link {
    margin: 0 auto;
  }
  .topbar-stacked .topbar-account,
  .topbar-stacked .topbar-nav-stacked {
    display: none !important;
  }
  .app-main {
    padding-bottom: 108px;
  }
}

@media (max-width: 720px) {
  .login-clean-card {
    width: min(100%, 420px);
    padding: 22px 18px 20px;
    border-radius: 20px;
  }
  .professional-choice-grid {
    max-height: 220px;
  }
}

/* Form rows precisam ocupar a largura do modal; evita campos espremidos em 4/5 colunas. */
.modal .form-grid > .form-row,
.modal .form-grid > .form-note,
.modal .form-grid > .modal-footer {
  grid-column: 1 / -1;
}
.origin-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  max-height: 190px;
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(85,130,160,.28);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.80);
}
.origin-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: rgba(239,245,248,.72);
  cursor: pointer;
  font-size: 11px;
  color: var(--color-text-soft);
}
.origin-choice:has(input:checked) {
  border-color: rgba(21,87,192,.38);
  background: #eaf2ff;
  color: var(--color-primary-strong);
}
.origin-choice input { width: 17px; height: 17px; margin: 0; accent-color: var(--color-primary); }
@media (max-width: 720px) { .origin-choice-grid { grid-template-columns: 1fr; } }

/* =========================================================
   R3 · IDENTIDADE TEACOLHE — MENU INSPIRADO NO CONCEITO 2
   ========================================================= */
.topbar-main.topbar-stacked {
  position: sticky;
  top: 0;
  z-index: 120;
  overflow: hidden;
  display: block;
  min-height: auto;
  padding: 0;
  background:
    radial-gradient(circle at 8% 22%, rgba(71, 150, 219, .20), transparent 22%),
    radial-gradient(circle at 88% 18%, rgba(74, 177, 157, .16), transparent 26%),
    linear-gradient(110deg, #0f4562 0%, #14536a 48%, #1c6d72 100%);
  border-bottom: 0;
  box-shadow: 0 8px 22px rgba(18, 63, 74, .16);
}
.topbar-main.topbar-stacked::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    url('branding/puzzle-blue.svg') no-repeat left 10% top -28px / 92px 92px,
    url('branding/puzzle-green.svg') no-repeat right 15% top -38px / 96px 96px,
    url('branding/puzzle-purple.svg') no-repeat left 1.5% bottom -36px / 84px 84px;
  opacity: .10;
}
.topbar-main.topbar-stacked::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: repeating-linear-gradient(90deg,
    #2f75d6 0 72px,
    #53aa8d 72px 136px,
    #8a67bc 136px 202px,
    #ef9749 202px 272px,
    #db6670 272px 340px,
    #e5c14f 340px 410px);
  opacity: .95;
}
.topbar-stacked .topbar-brand-row {
  position: relative;
  z-index: 2;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 8px 24px 7px;
  border-bottom: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.025);
}
.topbar-stacked .topbar-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}
.topbar-stacked .topbar-brand-mark {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 5px 10px rgba(5,28,42,.2));
}
.topbar-stacked .topbar-brand-copy strong { font-size: 18px; }
.topbar-stacked .topbar-brand-copy small { color: #d6edf2; }
.topbar-stacked .topbar-account {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #eff9fa;
}
.topbar-stacked .topbar-status {
  padding: 7px 12px;
  border: 1px solid rgba(113, 219, 176, .45);
  border-radius: 999px;
  background: rgba(47, 153, 116, .16);
  color: #eafff6;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.topbar-stacked .topbar-nav-stacked {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 7px 20px 10px;
  border: 0;
  border-radius: 0;
  background: rgba(7, 44, 61, .36);
  overflow: visible;
}
.topbar-stacked .topbar-nav-stacked a {
  position: relative;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 10px;
  color: #f5fbfc;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.topbar-stacked .topbar-nav-stacked a::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 2px;
  height: 3px;
  border-radius: 99px;
  background: #2f75d6;
}
.topbar-stacked .topbar-nav-stacked a:nth-child(2)::after { background:#52a68e; }
.topbar-stacked .topbar-nav-stacked a:nth-child(3)::after { background:#4b8edc; }
.topbar-stacked .topbar-nav-stacked a:nth-child(4)::after { background:#ef9749; }
.topbar-stacked .topbar-nav-stacked a:nth-child(5)::after { background:#db6670; }
.topbar-stacked .topbar-nav-stacked a:nth-child(6)::after { background:#e5c14f; }
.topbar-stacked .topbar-nav-stacked a:nth-child(7)::after { background:#d9689e; }
.topbar-stacked .topbar-nav-stacked a:nth-child(8)::after { background:#8a67bc; }
.topbar-stacked .topbar-nav-stacked a:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
}
.topbar-stacked .topbar-nav-stacked a.ativo {
  background: #fff;
  color: #123f58;
  box-shadow: 0 5px 14px rgba(5,30,42,.16);
}

/* =========================================================
   R3 · FICHA DO PACIENTE
   ========================================================= */
.patient-record-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
  padding: 22px;
  border: 1px solid #dce9ed;
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 20%, rgba(82,166,142,.10), transparent 22%),
    linear-gradient(135deg, #ffffff 0%, #f6fbfc 100%);
  box-shadow: 0 12px 30px rgba(20,58,77,.07);
}
.patient-record-hero::after {
  content:"";
  position:absolute;
  right:-18px;
  top:-22px;
  width:120px;
  height:120px;
  background:url('branding/puzzle-green.svg') center/contain no-repeat;
  opacity:.08;
}
.patient-record-avatar {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: linear-gradient(135deg,#1d5f86,#2f75d6);
  color:#fff;
  font-size:28px;
  font-weight:900;
  box-shadow: 0 10px 20px rgba(47,117,214,.18);
}
.patient-record-kicker,
.patient-followup-kicker {
  display:block;
  margin-bottom:4px;
  color:#6a7f8e;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}
.patient-record-title h1 {
  margin:0 0 7px;
  color:#143f56;
  font-size:clamp(24px,3vw,34px);
  line-height:1.05;
}
.patient-record-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; color:#607484; font-size:12px; }
.patient-status-chip {
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:5px 10px;
  border-radius:999px;
  background:#edf3f5;
  color:#526875;
  font-weight:800;
}
.patient-status-chip.is-active { background:#def2e6; color:#2d7a50; }
.patient-status-chip.is-danger { background:#f8dfe3; color:#a73e4e; }
.patient-record-actions { position:relative; z-index:2; display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.patient-edit-button {
  background: linear-gradient(135deg,#ef9749,#e37f36);
  border-color:#df7b31;
  color:#fff;
}
.patient-edit-button:hover { background: linear-gradient(135deg,#e7893d,#d86e28); }

.patient-quick-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:16px;
}
.patient-quick-card {
  position:relative;
  overflow:hidden;
  min-height:88px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  padding:16px 18px;
  border:1px solid #dce8ed;
  border-radius:18px;
  background:#fff;
}
.patient-quick-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:#2f75d6; }
.patient-quick-card span { color:#6e808c; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.patient-quick-card strong { color:#183f55; font-size:15px; overflow-wrap:anywhere; }
.patient-quick-green::before { background:#52a68e; }
.patient-quick-orange::before { background:#ef9749; }
.patient-quick-purple::before { background:#8a67bc; }

.patient-sheet-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-bottom:16px;
}
.patient-sheet-card {
  position:relative;
  overflow:hidden;
  padding:18px;
  border:1px solid #dce8ed;
  border-radius:20px;
  background:#fff;
  box-shadow:0 8px 22px rgba(20,58,77,.045);
}
.patient-sheet-card::before { content:""; position:absolute; left:0; right:0; top:0; height:4px; background:#2f75d6; }
.patient-sheet-green::before { background:#52a68e; }
.patient-sheet-orange::before { background:#ef9749; }
.patient-sheet-purple::before { background:#8a67bc; }
.patient-sheet-card header { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.patient-sheet-number {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:#e9f2fd;
  color:#2f75d6;
  font-weight:900;
}
.patient-sheet-green .patient-sheet-number { background:#e5f3ee; color:#3c8c72; }
.patient-sheet-orange .patient-sheet-number { background:#fff0e3; color:#d87c2f; }
.patient-sheet-purple .patient-sheet-number { background:#f0e9f7; color:#7653a3; }
.patient-sheet-card h3 { margin:0; color:#17445c; font-size:17px; }
.patient-sheet-card header p { margin:2px 0 0; color:#738793; font-size:11px; }
.patient-sheet-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:0;
}
.patient-sheet-list > div {
  min-width:0;
  padding:10px 11px;
  border-radius:12px;
  background:#f7fafb;
  border:1px solid #e7eef1;
}
.patient-sheet-list dt { margin-bottom:4px; color:#6b7e8b; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; }
.patient-sheet-list dd { margin:0; color:#1d3f51; font-size:13px; line-height:1.45; overflow-wrap:anywhere; }
.patient-sheet-wide { grid-column:1/-1; }

.patient-followup-card {
  margin-bottom:16px;
  padding:18px;
  border:1px solid #dce8ed;
  border-radius:20px;
  background:#fff;
  box-shadow:0 8px 22px rgba(20,58,77,.045);
}
.patient-followup-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; }
.patient-followup-head h3 { margin:0; color:#17445c; font-size:18px; }
.patient-professional-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px; }
.patient-professional-card {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:12px;
  border:1px solid #e1ebee;
  border-radius:15px;
  background:#f8fbfc;
}
.patient-professional-avatar { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:#e7effa; color:#2f6bb9; font-weight:900; }
.patient-professional-card strong,
.patient-professional-card span,
.patient-professional-card small { display:block; }
.patient-professional-card strong { color:#173f55; font-size:13px; }
.patient-professional-card span { color:#5f7380; font-size:11px; }
.patient-professional-card small { margin-top:2px; color:#8a9aa3; font-size:9px; }

/* =========================================================
   R3 · MOBILE / TABLET COM A MESMA IDENTIDADE
   ========================================================= */
@media (max-width: 1180px) {
  .topbar-stacked .topbar-nav-stacked,
  .topbar-stacked .topbar-account { display:none !important; }
  .topbar-stacked .topbar-brand-row {
    min-height:62px;
    justify-content:flex-start;
    padding:9px 16px 12px;
  }
  .topbar-main.topbar-stacked::after { height:4px; }
  .app-main { padding-bottom:96px; }

  .mobile-dock {
    position:fixed;
    left:12px;
    right:12px;
    bottom:12px;
    z-index:145;
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:5px;
    padding:7px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.18);
    border-radius:22px;
    background:
      url('branding/puzzle-blue.svg') no-repeat left -24px bottom -28px / 80px 80px,
      url('branding/puzzle-green.svg') no-repeat right -28px top -30px / 82px 82px,
      linear-gradient(110deg,#104861,#16596c 60%,#1b706f);
    box-shadow:0 18px 38px rgba(12,45,59,.28);
  }
  .mobile-dock::after {
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:4px;
    background:repeating-linear-gradient(90deg,#2f75d6 0 42px,#52a68e 42px 84px,#8a67bc 84px 126px,#ef9749 126px 168px,#db6670 168px 210px,#e5c14f 210px 252px);
  }
  .mobile-dock-item {
    position:relative;
    z-index:1;
    min-height:56px;
    border-radius:15px;
    color:#e7f5f6;
    background:transparent;
  }
  .mobile-dock-item.is-active {
    background:#fff;
    color:#17455d;
    box-shadow:0 6px 14px rgba(5,35,47,.15);
  }
  .mobile-dock-more { border:0; }
  .mobile-more-sheet-card {
    overflow:hidden;
    border-color:rgba(255,255,255,.3);
    background:
      radial-gradient(circle at 100% 0%, rgba(82,166,142,.15), transparent 30%),
      #f9fcfd;
  }
  .mobile-more-sheet-head {
    margin:-18px -18px 16px;
    padding:18px;
    background:linear-gradient(110deg,#104861,#17606d);
  }
  .mobile-more-sheet-head strong,
  .mobile-more-sheet-head small { color:#fff; }
  .mobile-more-close { border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.12); color:#fff; }

  .patient-quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .patient-record-hero { grid-template-columns:auto minmax(0,1fr); }
  .patient-record-actions { grid-column:1/-1; justify-content:flex-start; }
}

@media (max-width: 760px) {
  .patient-record-hero { grid-template-columns:1fr; text-align:left; padding:18px; }
  .patient-record-avatar { width:56px; height:56px; border-radius:17px; }
  .patient-quick-grid,
  .patient-sheet-grid { grid-template-columns:1fr; }
  .patient-sheet-list { grid-template-columns:1fr; }
  .patient-followup-head { align-items:flex-start; flex-direction:column; }
  .patient-followup-head .btn { width:100%; }
  .mobile-dock { left:8px; right:8px; bottom:8px; }
  .mobile-dock-item { min-height:52px; font-size:10px; }
}

/* =========================================================
   R4 · MENU TEACOLHE — fidelidade ao conceito aprovado
   ========================================================= */
.topbar-main.topbar-stacked {
  position: sticky !important;
  top: 0 !important;
  z-index: 130 !important;
  isolation: isolate;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 8% 20%, rgba(70,153,218,.18), transparent 22%),
    radial-gradient(circle at 88% 10%, rgba(66,177,157,.13), transparent 25%),
    linear-gradient(112deg,#0c3d60 0%,#0e5270 48%,#176b70 100%) !important;
  border: 0 !important;
  box-shadow: 0 8px 24px rgba(12,47,62,.20) !important;
}
.topbar-main.topbar-stacked::before {
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  opacity:.16 !important;
  pointer-events:none !important;
  background:
    url('branding/puzzle-blue.svg') no-repeat 7% -28px / 92px 92px,
    url('branding/puzzle-green.svg') no-repeat 93% -32px / 98px 98px,
    url('branding/puzzle-purple.svg') no-repeat 1.5% 82% / 76px 76px !important;
}
.topbar-main.topbar-stacked::after {
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  height:6px !important;
  z-index:4 !important;
  opacity:1 !important;
  background: repeating-linear-gradient(90deg,
    #2479d2 0 68px,
    #55aa8d 68px 126px,
    #8e69be 126px 186px,
    #f09a47 186px 248px,
    #dc6470 248px 308px,
    #e8c248 308px 370px) !important;
}
.topbar-stacked .topbar-brand-row {
  position:relative !important;
  z-index:2 !important;
  min-height:66px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  padding:10px 28px 9px !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
  background:transparent !important;
}
.topbar-stacked .topbar-brand-link {
  display:inline-flex !important;
  align-items:center !important;
  gap:11px !important;
  margin:0 !important;
  color:#fff !important;
  text-decoration:none !important;
}
.topbar-stacked .topbar-brand-mark {
  width:38px !important;
  height:38px !important;
  max-width:38px !important;
  max-height:38px !important;
  filter:drop-shadow(0 6px 11px rgba(3,27,41,.26));
}
.topbar-stacked .topbar-brand-copy strong {
  display:block !important;
  color:#fff !important;
  font-size:20px !important;
  line-height:1.02 !important;
  letter-spacing:-.02em !important;
}
.topbar-stacked .topbar-brand-copy small {
  display:block !important;
  margin-top:3px !important;
  color:#d6eef4 !important;
  font-size:9px !important;
  letter-spacing:.12em !important;
}
.topbar-stacked .topbar-account {
  display:flex !important;
  align-items:center !important;
  gap:11px !important;
  margin-left:auto !important;
  color:#f5fcfd !important;
  font-size:12px !important;
}
.topbar-stacked .topbar-status {
  position:relative;
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
  min-height:34px !important;
  padding:7px 13px 7px 29px !important;
  border:1px solid rgba(86,213,164,.48) !important;
  border-radius:999px !important;
  background:rgba(33,145,105,.17) !important;
  color:#effff8 !important;
}
.topbar-stacked .topbar-status::before {
  content:"";
  position:absolute;
  left:12px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#5bdc8d;
  box-shadow:0 0 0 4px rgba(91,220,141,.10);
}
.topbar-stacked .logout-form button {
  min-height:34px !important;
  padding:7px 13px !important;
  border:1px solid rgba(255,255,255,.34) !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.09) !important;
  color:#fff !important;
}
.topbar-stacked .logout-form button:hover { background:rgba(255,255,255,.17) !important; }

.topbar-stacked .topbar-nav-stacked {
  position:relative !important;
  z-index:3 !important;
  width:100% !important;
  max-width:none !important;
  min-height:58px !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  padding:8px 18px 13px !important;
  border:0 !important;
  border-radius:0 !important;
  background:linear-gradient(180deg,rgba(5,37,56,.26),rgba(5,33,51,.43)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035) !important;
  overflow:visible !important;
}
.topbar-stacked .topbar-nav-stacked a {
  position:relative !important;
  flex:0 0 auto !important;
  min-height:38px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:9px 14px !important;
  border:0 !important;
  border-radius:11px !important;
  background:transparent !important;
  color:#f8fcfd !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  font-size:13px !important;
  font-weight:800 !important;
  line-height:1 !important;
  box-shadow:none !important;
  transform:none !important;
}
.topbar-stacked .topbar-nav-stacked a::after {
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  bottom:3px !important;
  width:24px !important;
  height:3px !important;
  border-radius:99px !important;
  transform:translateX(-50%) !important;
  opacity:.95 !important;
}
.topbar-stacked .topbar-nav-stacked a:nth-child(1)::after { background:#8c65bf !important; }
.topbar-stacked .topbar-nav-stacked a:nth-child(2)::after { background:#54ae8b !important; }
.topbar-stacked .topbar-nav-stacked a:nth-child(3)::after { background:#4b93e2 !important; }
.topbar-stacked .topbar-nav-stacked a:nth-child(4)::after { background:#f39a45 !important; }
.topbar-stacked .topbar-nav-stacked a:nth-child(5)::after { background:#e36370 !important; }
.topbar-stacked .topbar-nav-stacked a:nth-child(6)::after { background:#edc84a !important; }
.topbar-stacked .topbar-nav-stacked a:nth-child(7)::after { background:#df66a5 !important; }
.topbar-stacked .topbar-nav-stacked a:nth-child(8)::after { background:#9a70ce !important; }
.topbar-stacked .topbar-nav-stacked a:hover {
  background:rgba(255,255,255,.10) !important;
  color:#fff !important;
}
.topbar-stacked .topbar-nav-stacked a.ativo {
  padding:10px 15px !important;
  background:#fff !important;
  color:#143f59 !important;
  box-shadow:0 5px 15px rgba(3,28,43,.20) !important;
}
.topbar-stacked .topbar-nav-stacked a.ativo::after { bottom:4px !important; }

/* Tablet/celular: header compacto + dock independente do CSS desktop. */
@media (max-width:1180px) {
  .topbar-main.topbar-stacked { min-height:64px !important; }
  .topbar-stacked .topbar-brand-row {
    min-height:64px !important;
    justify-content:flex-start !important;
    padding:10px 18px 13px !important;
    border-bottom:0 !important;
  }
  .topbar-stacked .topbar-brand-link { margin:0 !important; }
  .topbar-stacked .topbar-brand-mark { width:34px !important; height:34px !important; }
  .topbar-stacked .topbar-brand-copy strong { font-size:17px !important; }
  .topbar-stacked .topbar-account,
  .topbar-stacked .topbar-nav-stacked { display:none !important; }
  .app-main { padding-bottom:108px !important; }

  nav.mobile-dock {
    position:fixed !important;
    left:12px !important;
    right:12px !important;
    bottom:12px !important;
    z-index:150 !important;
    width:auto !important;
    height:auto !important;
    min-height:72px !important;
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    align-items:stretch !important;
    gap:6px !important;
    margin:0 !important;
    padding:7px 7px 10px !important;
    overflow:hidden !important;
    border:1px solid rgba(255,255,255,.20) !important;
    border-radius:23px !important;
    background:
      url('branding/puzzle-blue.svg') no-repeat left -26px bottom -30px / 82px 82px,
      url('branding/puzzle-green.svg') no-repeat right -28px top -30px / 84px 84px,
      linear-gradient(112deg,#0d405f,#12566b 58%,#1a706f) !important;
    box-shadow:0 18px 38px rgba(10,42,58,.30) !important;
    backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;
  }
  nav.mobile-dock::before {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,.045),transparent 42%);
  }
  nav.mobile-dock::after {
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    height:4px !important;
    background:repeating-linear-gradient(90deg,#2479d2 0 42px,#55aa8d 42px 84px,#8e69be 84px 126px,#f09a47 126px 168px,#dc6470 168px 210px,#e8c248 210px 252px) !important;
  }
  nav.mobile-dock .mobile-dock-item {
    position:relative !important;
    z-index:2 !important;
    appearance:none !important;
    -webkit-appearance:none !important;
    box-sizing:border-box !important;
    width:100% !important;
    min-width:0 !important;
    min-height:55px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    margin:0 !important;
    padding:6px 4px !important;
    border:0 !important;
    border-radius:15px !important;
    outline:0 !important;
    background:transparent !important;
    color:#dff1f4 !important;
    text-decoration:none !important;
    font-size:10px !important;
    font-weight:800 !important;
    line-height:1.05 !important;
    text-align:center !important;
    box-shadow:none !important;
    transform:none !important;
    cursor:pointer !important;
  }
  nav.mobile-dock .mobile-dock-item::before,
  nav.mobile-dock .mobile-dock-item::after { display:none !important; content:none !important; }
  nav.mobile-dock .mobile-dock-item:hover {
    background:rgba(255,255,255,.08) !important;
    color:#fff !important;
  }
  nav.mobile-dock .mobile-dock-item.is-active {
    background:#fff !important;
    color:#17465d !important;
    box-shadow:0 6px 16px rgba(4,32,48,.22) !important;
  }
  nav.mobile-dock .mobile-dock-icon {
    width:20px !important;
    height:20px !important;
    display:grid !important;
    place-items:center !important;
    flex:0 0 20px !important;
    font-size:0 !important;
    line-height:0 !important;
  }
  nav.mobile-dock .mobile-dock-icon svg {
    width:20px !important;
    height:20px !important;
    display:block !important;
    overflow:visible !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.8 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
  }
  nav.mobile-dock .mobile-dock-dots svg circle { fill:currentColor !important; stroke:none !important; }
  nav.mobile-dock .mobile-dock-label {
    display:block !important;
    overflow:hidden !important;
    max-width:100% !important;
    color:inherit !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    text-decoration:none !important;
  }
  .mobile-more-sheet { z-index:160 !important; }
}

@media (max-width:640px) {
  nav.mobile-dock {
    left:7px !important;
    right:7px !important;
    bottom:7px !important;
    min-height:67px !important;
    gap:3px !important;
    padding:6px 5px 9px !important;
    border-radius:20px !important;
  }
  nav.mobile-dock .mobile-dock-item {
    min-height:51px !important;
    padding:5px 2px !important;
    border-radius:13px !important;
    font-size:9px !important;
  }
  nav.mobile-dock .mobile-dock-icon,
  nav.mobile-dock .mobile-dock-icon svg { width:18px !important; height:18px !important; }
}

/* desktop estreito: evita qualquer corte sem sacrificar a composição */
@media (min-width:1181px) and (max-width:1380px) {
  .topbar-stacked .topbar-nav-stacked { gap:3px !important; padding-left:10px !important; padding-right:10px !important; }
  .topbar-stacked .topbar-nav-stacked a { padding-left:9px !important; padding-right:9px !important; font-size:12px !important; }
}

/* =========================================================
   R5 · CABEÇALHO / MOBILE MAIS / PORTAL DO CIDADÃO
   ========================================================= */

/* Cabeçalho interno mais próximo do conceito visual aprovado. */
.topbar-main.topbar-stacked {
  min-height: 138px !important;
  background:
    radial-gradient(circle at 17% 30%, rgba(60,142,206,.18), transparent 25%),
    radial-gradient(circle at 82% 15%, rgba(65,184,165,.14), transparent 27%),
    linear-gradient(110deg,#08345a 0%,#0b5270 48%,#146b70 100%) !important;
}
.topbar-decoration {
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.topbar-puzzle {
  position:absolute;
  display:block;
  width:94px;
  height:94px;
  opacity:.19;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  filter:drop-shadow(0 8px 14px rgba(2,25,39,.12));
}
.topbar-puzzle-blue-a { left:7%; top:-40px; background-image:url('branding/puzzle-blue.svg'); transform:rotate(11deg); }
.topbar-puzzle-green-a { left:14%; bottom:-48px; background-image:url('branding/puzzle-green.svg'); transform:rotate(-14deg); opacity:.23; }
.topbar-puzzle-purple-a { left:1%; bottom:-42px; background-image:url('branding/puzzle-purple.svg'); transform:rotate(20deg); opacity:.24; }
.topbar-puzzle-orange-a { left:20%; bottom:-56px; background-image:url('branding/puzzle-purple.svg'); transform:rotate(-8deg); filter:hue-rotate(78deg) saturate(1.35) brightness(1.28); opacity:.22; }
.topbar-puzzle-blue-b { right:9%; top:-42px; background-image:url('branding/puzzle-blue.svg'); transform:rotate(-15deg); opacity:.16; }
.topbar-puzzle-green-b { right:-24px; bottom:-42px; background-image:url('branding/puzzle-green.svg'); transform:rotate(16deg); opacity:.22; }

.topbar-stacked .topbar-brand-row {
  min-height:72px !important;
  padding:10px 34px !important;
  z-index:2 !important;
}
.topbar-stacked .topbar-brand-mark {
  width:44px !important;
  height:44px !important;
  max-width:44px !important;
  max-height:44px !important;
}
.topbar-stacked .topbar-brand-copy strong { font-size:22px !important; }
.topbar-stacked .topbar-brand-copy small { font-size:10px !important; }

.topbar-stacked .topbar-nav-stacked {
  min-height:66px !important;
  padding:8px 22px 15px !important;
  gap:13px !important;
  background:linear-gradient(180deg,rgba(3,31,52,.30),rgba(3,27,46,.56)) !important;
}
.topbar-stacked .topbar-nav-stacked a {
  min-height:42px !important;
  padding:10px 16px !important;
  font-size:14px !important;
  text-shadow:0 1px 1px rgba(0,0,0,.14);
}
.topbar-stacked .topbar-nav-stacked a.ativo {
  background:rgba(255,255,255,.97) !important;
  color:#123f59 !important;
  box-shadow:0 7px 18px rgba(2,26,40,.24) !important;
  text-shadow:none !important;
}
.topbar-main.topbar-stacked::after {
  height:8px !important;
  background:
    linear-gradient(90deg,
      #287ed7 0 7%,#55aa8d 7% 13%,#8e69be 13% 20%,#f1a04c 20% 27%,#db6571 27% 34%,#e8c54c 34% 41%,
      #287ed7 41% 48%,#55aa8d 48% 55%,#8e69be 55% 62%,#f1a04c 62% 69%,#db6571 69% 76%,#e8c54c 76% 83%,
      #287ed7 83% 90%,#55aa8d 90% 100%) !important;
  box-shadow:0 -2px 0 rgba(255,255,255,.09) inset;
}

/* O painel "Mais" precisa funcionar no mesmo breakpoint em que o dock existe. */
@media (max-width:1180px) {
  .topbar-main.topbar-stacked { min-height:68px !important; }
  .topbar-decoration .topbar-puzzle { opacity:.12; }
  .topbar-stacked .topbar-brand-row {
    min-height:68px !important;
    padding:9px 18px 12px !important;
  }
  .topbar-stacked .topbar-brand-mark { width:38px !important; height:38px !important; }
  .topbar-stacked .topbar-brand-copy strong { font-size:18px !important; }
  .topbar-main.topbar-stacked::after { height:5px !important; }

  .mobile-more-sheet[hidden] { display:none !important; }
  .mobile-more-sheet.is-open:not([hidden]) {
    position:fixed !important;
    inset:0 !important;
    z-index:190 !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
    padding:20px 14px 100px !important;
    background:rgba(3,22,35,.58) !important;
    backdrop-filter:blur(7px) !important;
    -webkit-backdrop-filter:blur(7px) !important;
  }
  .mobile-more-sheet-card {
    width:min(100%,540px) !important;
    max-height:min(72vh,620px) !important;
    overflow:auto !important;
    margin:0 !important;
    padding:18px !important;
    border-radius:26px !important;
    background:
      url('branding/puzzle-blue.svg') no-repeat left -38px bottom -42px / 110px 110px,
      radial-gradient(circle at 100% 0%,rgba(82,166,142,.13),transparent 34%),
      #fbfdfe !important;
    box-shadow:0 28px 70px rgba(3,22,35,.38) !important;
  }
  .mobile-more-sheet-head {
    margin:-18px -18px 17px !important;
    padding:17px 18px !important;
    border-radius:26px 26px 0 0 !important;
    background:linear-gradient(110deg,#0b4563,#176e70) !important;
  }
  .mobile-more-links {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  .mobile-more-links a,
  .mobile-more-logout button {
    min-height:50px !important;
    border-radius:14px !important;
  }
  body.mobile-sheet-open { overflow:hidden !important; }
}

@media (max-width:560px) {
  .mobile-more-sheet.is-open:not([hidden]) { padding:12px 8px 88px !important; }
  .mobile-more-links { grid-template-columns:1fr !important; }
}

/* Portal do Cidadão: menu é literalmente as etapas 01, 02 e 03. */
.visitor-header {
  grid-template-columns:auto minmax(0,1fr) auto !important;
  width:min(1180px,100%) !important;
}
.visitor-nav {
  justify-self:center;
  justify-content:center !important;
  flex-wrap:nowrap !important;
}
.visitor-nav a {
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
}
.visitor-nav a > span {
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:rgba(255,255,255,.16);
  color:#fff;
  font-size:10px;
  font-weight:900;
}
.visitor-team-access {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:8px 13px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:12px;
  background:rgba(255,255,255,.12);
  color:#fff;
  text-decoration:none;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.visitor-team-access:hover { background:rgba(255,255,255,.22); color:#fff; }

@media (max-width:980px) {
  .visitor-header {
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-rows:auto auto auto !important;
  }
  .visitor-brand { grid-column:1; grid-row:1; }
  .visitor-nav-toggle { grid-column:2; grid-row:1; }
  .visitor-nav {
    grid-column:1/-1 !important;
    grid-row:2 !important;
    justify-self:stretch !important;
  }
  .visitor-nav.is-open { display:grid !important; grid-template-columns:1fr !important; }
  .visitor-nav a { width:100% !important; justify-content:flex-start !important; }
  .visitor-team-access {
    grid-column:1/-1;
    grid-row:3;
    width:100%;
    margin-top:0;
  }
}

/* =========================================================
   R6 · MENU PRINCIPAL FIEL AO MOCKUP + EFEITO NAS LINHAS
   ========================================================= */
.topbar-main.topbar-stacked {
  min-height: 186px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 14% 32%, rgba(111, 164, 255, .18), transparent 17%),
    radial-gradient(circle at 68% 16%, rgba(92, 216, 182, .12), transparent 18%),
    linear-gradient(90deg, #0a3e6a 0%, #0f5674 52%, #166f73 100%) !important;
}
.topbar-main.topbar-stacked::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url('branding/puzzle-purple.svg') no-repeat left -8px bottom -24px / 160px 160px,
    url('branding/puzzle-green.svg') no-repeat left 66px bottom -54px / 214px 214px,
    url('branding/puzzle-blue.svg') no-repeat left 148px top -38px / 172px 172px,
    url('branding/puzzle-blue.svg') no-repeat right -34px top -32px / 152px 152px,
    url('branding/puzzle-green.svg') no-repeat right 120px bottom -44px / 118px 118px;
  opacity: .32;
  pointer-events: none;
  z-index: 0;
}
.topbar-main.topbar-stacked .topbar-decoration { display:none !important; }
.topbar-stacked .topbar-brand-row {
  position: relative;
  min-height: 70px !important;
  padding: 12px 34px 10px !important;
  z-index: 2 !important;
}
.topbar-stacked .topbar-brand-link {
  gap: 14px !important;
  position: relative;
  z-index: 2;
}
.topbar-stacked .topbar-brand-mark {
  width: 46px !important;
  height: 46px !important;
  max-width: 46px !important;
  max-height: 46px !important;
}
.topbar-stacked .topbar-brand-copy strong {
  font-size: 21px !important;
  letter-spacing: -.02em !important;
}
.topbar-stacked .topbar-brand-copy small {
  font-size: 10px !important;
  letter-spacing: .16em !important;
}
.topbar-stacked .topbar-account {
  position: relative;
  z-index: 2;
  gap: 14px !important;
  color: rgba(255,255,255,.96) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.topbar-stacked .topbar-status {
  min-height: 38px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(109, 214, 139, .32) !important;
  background: rgba(37, 128, 102, .18) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important;
}
.topbar-stacked .topbar-status::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 8px;
  border-radius: 50%;
  background: #62e06f;
  box-shadow: 0 0 12px rgba(98, 224, 111, .82);
  vertical-align: middle;
}
.topbar-stacked .logout-form button {
  min-height: 38px !important;
  padding: 8px 15px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
  font-weight: 800 !important;
}
.topbar-stacked .logout-form button:hover {
  background: rgba(255,255,255,.18) !important;
}
.topbar-stacked .topbar-nav-stacked {
  position: relative;
  z-index: 2;
  min-height: 72px !important;
  padding: 8px 28px 18px !important;
  gap: 16px !important;
  justify-content: center !important;
  align-items: center !important;
  background: linear-gradient(180deg, rgba(0, 30, 49, .18), rgba(0, 31, 48, .36)) !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
}
.topbar-stacked .topbar-nav-stacked a {
  --menu-accent: #8e69be;
  position: relative !important;
  min-height: 40px !important;
  padding: 10px 15px 13px !important;
  border-radius: 14px !important;
  color: rgba(255,255,255,.98) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.22) !important;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease !important;
}
.topbar-stacked .topbar-nav-stacked a:nth-child(1) { --menu-accent:#8a67bc; }
.topbar-stacked .topbar-nav-stacked a:nth-child(2) { --menu-accent:#52a68e; }
.topbar-stacked .topbar-nav-stacked a:nth-child(3) { --menu-accent:#2f75d6; }
.topbar-stacked .topbar-nav-stacked a:nth-child(4) { --menu-accent:#f0a148; }
.topbar-stacked .topbar-nav-stacked a:nth-child(5) { --menu-accent:#ef7d73; }
.topbar-stacked .topbar-nav-stacked a:nth-child(6) { --menu-accent:#e5c64b; }
.topbar-stacked .topbar-nav-stacked a:nth-child(7) { --menu-accent:#f36ec1; }
.topbar-stacked .topbar-nav-stacked a:nth-child(8) { --menu-accent:#8e69be; }
.topbar-stacked .topbar-nav-stacked a::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 6px !important;
  width: 26px !important;
  height: 4px !important;
  border-radius: 999px !important;
  transform: translateX(-50%) !important;
  background: var(--menu-accent) !important;
  box-shadow: 0 0 0 rgba(0,0,0,0) !important;
  transition: width .22s ease, transform .22s ease, box-shadow .22s ease, opacity .22s ease !important;
}
.topbar-stacked .topbar-nav-stacked a::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 2px !important;
  width: 34px !important;
  height: 10px !important;
  transform: translateX(-50%) scaleX(.7) !important;
  border-radius: 999px !important;
  background: var(--menu-accent) !important;
  filter: blur(8px) !important;
  opacity: .18 !important;
  transition: transform .22s ease, opacity .22s ease !important;
}
.topbar-stacked .topbar-nav-stacked a:hover {
  background: rgba(255,255,255,.10) !important;
  transform: translateY(-1px) !important;
}
.topbar-stacked .topbar-nav-stacked a:hover::after,
.topbar-stacked .topbar-nav-stacked a.ativo::after {
  width: 42px !important;
  box-shadow: 0 0 14px rgba(255,255,255,.16) !important;
}
.topbar-stacked .topbar-nav-stacked a:hover::before,
.topbar-stacked .topbar-nav-stacked a.ativo::before {
  opacity: .38 !important;
  transform: translateX(-50%) scaleX(1) !important;
}
.topbar-stacked .topbar-nav-stacked a.ativo {
  background: rgba(255,255,255,.97) !important;
  color: #143f5a !important;
  text-shadow: none !important;
  box-shadow: 0 12px 24px rgba(0, 28, 46, .24) !important;
}
.topbar-stacked .topbar-nav-stacked a.ativo::after {
  animation: teaMenuPulse 2.1s ease-in-out infinite;
}
@keyframes teaMenuPulse {
  0%,100% { box-shadow: 0 0 0 rgba(255,255,255,0); }
  50% { box-shadow: 0 0 18px rgba(255,255,255,.28); }
}
.topbar-main.topbar-stacked::after {
  height: 12px !important;
  background:
    linear-gradient(90deg,
      rgba(70,204,178,.96) 0 8%, rgba(115,212,204,.96) 8% 13%, rgba(219,100,118,.96) 13% 18%, rgba(237,181,73,.96) 18% 23%,
      rgba(73,124,214,.96) 23% 28%, rgba(147,106,197,.96) 28% 33%, rgba(84,170,143,.96) 33% 38%, rgba(225,120,96,.96) 38% 43%,
      rgba(73,124,214,.96) 43% 48%, rgba(237,181,73,.96) 48% 53%, rgba(219,100,118,.96) 53% 58%, rgba(84,170,143,.96) 58% 63%,
      rgba(147,106,197,.96) 63% 68%, rgba(73,124,214,.96) 68% 73%, rgba(225,120,96,.96) 73% 78%, rgba(237,181,73,.96) 78% 83%,
      rgba(84,170,143,.96) 83% 88%, rgba(73,124,214,.96) 88% 93%, rgba(147,106,197,.96) 93% 100%) !important;
  box-shadow: 0 -1px 0 rgba(255,255,255,.22) inset !important;
}

@media (min-width:1181px) and (max-width:1480px) {
  .topbar-stacked .topbar-brand-row { padding-left: 22px !important; padding-right: 22px !important; }
  .topbar-stacked .topbar-nav-stacked { gap: 8px !important; }
  .topbar-stacked .topbar-nav-stacked a { padding-left: 11px !important; padding-right: 11px !important; font-size: 13px !important; }
}

@media (max-width:1180px) {
  .topbar-main.topbar-stacked {
    min-height: 70px !important;
    background: linear-gradient(90deg, #0a406c 0%, #12636f 100%) !important;
  }
  .topbar-main.topbar-stacked::before {
    background:
      url('branding/puzzle-blue.svg') no-repeat left -28px top -36px / 120px 120px,
      url('branding/puzzle-green.svg') no-repeat right -34px bottom -42px / 118px 118px !important;
    opacity: .25 !important;
  }
  .topbar-main.topbar-stacked::after { height: 6px !important; }
}

/* =========================================================
   R7 · CABEÇALHO MAIS COMPACTO + FAIXA DE QUEBRA-CABEÇAS
   ========================================================= */
.topbar-main.topbar-stacked {
  min-height: 152px !important;
  background:
    radial-gradient(circle at 22% 22%, rgba(113, 169, 255, .14), transparent 18%),
    radial-gradient(circle at 73% 18%, rgba(77, 209, 176, .10), transparent 18%),
    linear-gradient(90deg, #0a3e6a 0%, #0e5474 52%, #176f72 100%) !important;
}
.topbar-main.topbar-stacked::before {
  background:
    url('branding/puzzle-purple.svg') no-repeat left -16px bottom -24px / 150px 150px,
    url('branding/puzzle-green.svg') no-repeat left 72px bottom -58px / 212px 212px,
    url('branding/puzzle-blue.svg') no-repeat left 150px top -42px / 168px 168px,
    url('branding/puzzle-blue.svg') no-repeat right -34px top -30px / 148px 148px,
    url('branding/puzzle-green.svg') no-repeat right 118px bottom -40px / 112px 112px,
    url('branding/puzzle-purple.svg') no-repeat 23% 52% / 46px 46px,
    url('branding/puzzle-blue.svg') no-repeat 79% 54% / 58px 58px !important;
  opacity: .34 !important;
}
.topbar-stacked .topbar-brand-row {
  min-height: 68px !important;
  padding: 12px 34px 8px !important;
}
.topbar-stacked .topbar-nav-stacked {
  min-height: 70px !important;
  padding: 8px 26px 8px !important;
  background: linear-gradient(180deg, rgba(0, 29, 49, .16), rgba(0, 31, 49, .28)) !important;
}
.topbar-stacked .topbar-nav-stacked a {
  min-height: 38px !important;
  padding: 8px 15px 12px !important;
}
.topbar-stacked .topbar-nav-stacked a::after {
  bottom: 5px !important;
  height: 4px !important;
}
.topbar-stacked .topbar-nav-stacked a::before {
  bottom: 0 !important;
}
.topbar-main.topbar-stacked::after {
  height: 18px !important;
  background:
    url('branding/puzzle-green.svg') repeat-x left center / 34px 34px,
    url('branding/puzzle-blue.svg') repeat-x 12px center / 34px 34px,
    url('branding/puzzle-purple.svg') repeat-x 24px center / 34px 34px,
    linear-gradient(90deg,
      #48cdb2 0 7%, #72d4cc 7% 12%, #db6476 12% 17%, #edb549 17% 22%,
      #497cd6 22% 27%, #936ac5 27% 32%, #54aa8f 32% 37%, #e17860 37% 42%,
      #497cd6 42% 47%, #edb549 47% 52%, #db6476 52% 57%, #54aa8f 57% 62%,
      #936ac5 62% 67%, #497cd6 67% 72%, #e17860 72% 77%, #edb549 77% 82%,
      #54aa8f 82% 87%, #497cd6 87% 92%, #936ac5 92% 100%) !important;
  background-blend-mode: normal, normal, normal, multiply !important;
  border-top: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 -1px 0 rgba(255,255,255,.10) inset !important;
}

@media (min-width:1181px) and (max-width:1480px) {
  .topbar-main.topbar-stacked { min-height: 148px !important; }
  .topbar-stacked .topbar-brand-row { padding-left: 22px !important; padding-right: 22px !important; }
  .topbar-stacked .topbar-nav-stacked { gap: 8px !important; padding-left: 14px !important; padding-right: 14px !important; }
  .topbar-stacked .topbar-nav-stacked a { padding-left: 11px !important; padding-right: 11px !important; font-size: 13px !important; }
}

@media (max-width:1180px) {
  .topbar-main.topbar-stacked { min-height: 70px !important; }
  .topbar-main.topbar-stacked::after {
    height: 8px !important;
    background:
      url('branding/puzzle-green.svg') repeat-x left center / 22px 22px,
      url('branding/puzzle-blue.svg') repeat-x 8px center / 22px 22px,
      url('branding/puzzle-purple.svg') repeat-x 16px center / 22px 22px,
      linear-gradient(90deg,#48cdb2,#72d4cc,#db6476,#edb549,#497cd6,#936ac5,#54aa8f,#e17860) !important;
  }
}

/* =========================================================
   R8 · MODAIS, MENU PÚBLICO E FAIXA PUZZLE DEFINITIVA
   ========================================================= */
/* Modal: cabeçalho fixo e conteúdo rolável até o último campo/botão. */
.modal-overlay > .modal {
  display: flex !important;
  flex-direction: column !important;
  grid-template-rows: none !important;
  max-height: calc(100dvh - 40px) !important;
  overflow: hidden !important;
}
.modal-overlay > .modal > .modal-header {
  flex: 0 0 auto !important;
}
.modal-overlay > .modal > .modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-gutter: stable !important;
}
.modal-overlay > .modal > .modal-body > form {
  min-height: min-content;
}
.modal-overlay > .modal > .modal-body .modal-footer {
  margin-top: 18px !important;
  padding-bottom: 4px !important;
}
@media (max-width: 600px) {
  .modal-overlay > .modal { max-height: calc(100dvh - 18px) !important; }
}

/* Cabeçalho interno: sem faixa vazia; strip real fica imediatamente antes do conteúdo. */
.topbar-main.topbar-stacked {
  min-height: 0 !important;
  height: auto !important;
  padding-bottom: 16px !important;
}
.topbar-stacked .topbar-brand-row { min-height: 64px !important; }
.topbar-stacked .topbar-nav-stacked {
  min-height: 58px !important;
  padding-top: 5px !important;
  padding-bottom: 7px !important;
}
.topbar-main.topbar-stacked::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 5 !important;
  height: 16px !important;
  opacity: 1 !important;
  background: url('branding/puzzle-strip.svg') repeat-x left center / auto 16px !important;
  box-shadow: 0 -1px 0 rgba(255,255,255,.16) inset, 0 3px 9px rgba(6,42,57,.16) !important;
}
@media (max-width:1180px) {
  .topbar-main.topbar-stacked { padding-bottom: 8px !important; }
  .topbar-main.topbar-stacked::after {
    height: 8px !important;
    background-size: auto 10px !important;
  }
}

/* O dock mobile recebe a mesma assinatura puzzle do topo. */
nav.mobile-dock::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 6px !important;
  background: url('branding/puzzle-strip.svg') repeat-x left center / auto 8px !important;
  opacity: 1 !important;
}

/* Portal do Cidadão: mesma linguagem visual e escala do sistema interno. */
.visitor-system-header {
  position: sticky;
  top: 0;
  z-index: 120;
  width: 100%;
  overflow: hidden;
  padding-bottom: 14px;
  background:
    radial-gradient(circle at 18% 22%, rgba(113,169,255,.14), transparent 18%),
    radial-gradient(circle at 78% 18%, rgba(77,209,176,.10), transparent 18%),
    linear-gradient(90deg,#0a3e6a 0%,#0e5474 52%,#176f72 100%);
  box-shadow: 0 7px 20px rgba(8,44,59,.18);
}
.visitor-system-header::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    url('branding/puzzle-purple.svg') no-repeat left -20px bottom -42px / 140px 140px,
    url('branding/puzzle-green.svg') no-repeat left 92px bottom -62px / 178px 178px,
    url('branding/puzzle-blue.svg') no-repeat right -32px top -40px / 142px 142px,
    url('branding/puzzle-green.svg') no-repeat right 120px bottom -44px / 108px 108px;
  opacity:.25;
}
.visitor-system-header::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:14px;
  z-index:4;
  background:url('branding/puzzle-strip.svg') repeat-x left center / auto 14px;
  box-shadow:0 -1px 0 rgba(255,255,255,.14) inset;
}
.visitor-system-brand-row {
  position:relative;
  z-index:2;
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:9px clamp(18px,3vw,40px) 7px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.visitor-system-brand {
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:#fff;
  text-decoration:none;
}
.visitor-system-brand img { width:42px; height:42px; object-fit:contain; }
.visitor-system-brand span { display:grid; gap:1px; }
.visitor-system-brand strong { color:#fff; font-size:20px; line-height:1; }
.visitor-system-brand small { color:rgba(255,255,255,.92); font-size:9px; font-weight:900; letter-spacing:.15em; }
.visitor-system-header .visitor-team-access {
  min-height:38px;
  padding:8px 14px;
  border:1px solid rgba(255,255,255,.30);
  border-radius:12px;
  background:rgba(255,255,255,.10);
  color:#fff;
  font-size:12px;
  font-weight:800;
  text-decoration:none;
}
.visitor-system-header .visitor-team-access:hover { background:rgba(255,255,255,.18); }
.visitor-system-nav {
  position:relative;
  z-index:2;
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:6px 18px 7px;
  background:linear-gradient(180deg,rgba(0,29,49,.16),rgba(0,31,49,.28));
}
.visitor-system-nav a {
  position:relative;
  min-height:38px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:13px;
  color:#fff;
  text-decoration:none;
  font-size:13px;
  font-weight:800;
  transition:background .18s ease, transform .18s ease;
}
.visitor-system-nav a::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:3px;
  width:30px;
  height:3px;
  border-radius:99px;
  transform:translateX(-50%);
  background:#55b095;
  box-shadow:0 0 10px rgba(85,176,149,.28);
}
.visitor-system-nav a:nth-child(2)::after { background:#3f8fe3; box-shadow:0 0 10px rgba(63,143,227,.28); }
.visitor-system-nav a:nth-child(3)::after { background:#f2a14b; box-shadow:0 0 10px rgba(242,161,75,.28); }
.visitor-system-nav a:hover { background:rgba(255,255,255,.11); transform:translateY(-1px); }
.visitor-system-nav a > span {
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  border-radius:50%;
  background:rgba(255,255,255,.15);
  font-size:9px;
  font-weight:900;
}
.visitor-system-header .visitor-nav-toggle { display:none !important; }
.visitor-body > .visitor-main {
  width:100% !important;
  padding-top:18px !important;
}

@media (max-width: 900px) {
  .visitor-system-header { padding-bottom:8px; }
  .visitor-system-header::after { height:8px; background-size:auto 9px; }
  .visitor-system-brand-row { min-height:60px; padding:8px 12px; }
  .visitor-system-brand img { width:36px; height:36px; }
  .visitor-system-brand strong { font-size:17px; }
  .visitor-system-header .visitor-team-access { display:none !important; }
  .visitor-system-header .visitor-nav-toggle {
    display:inline-flex !important;
    align-items:center;
    gap:6px;
    min-height:40px;
    padding:8px 12px;
    border:1px solid rgba(255,255,255,.28);
    border-radius:12px;
    background:rgba(255,255,255,.10);
    color:#fff;
    font-weight:800;
  }
  .visitor-system-nav {
    display:none;
    min-height:0;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    padding:8px 12px 10px;
  }
  .visitor-system-nav.is-open { display:flex !important; }
  .visitor-system-nav a {
    width:100%;
    justify-content:flex-start;
    min-height:44px;
    background:rgba(255,255,255,.08);
  }
  .visitor-system-nav a::after { left:44px; transform:none; bottom:5px; }
}

.visitor-result-page { width:min(900px,calc(100% - 28px)); margin:24px auto 40px; }
.visitor-result-card { overflow:hidden; border-radius:22px; }
.visitor-result-list { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px 18px; }
.visitor-result-list > div { padding:12px; border-radius:12px; background:#f6fafb; border:1px solid #e1eaee; }
@media(max-width:700px){ .visitor-result-list { grid-template-columns:1fr !important; } }


/* =========================================================
   SUPER VERSAO · FICHA DO NOTEBOOK + PICKER DE HORARIOS
   ========================================================= */
.patient-profile-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(240px, 1.3fr) minmax(240px, .8fr) auto;
  align-items: center;
  gap: 22px;
  margin-bottom: 20px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 24px;
  background:
    linear-gradient(118deg, rgba(18, 63, 78, .96), rgba(25, 92, 100, .91)),
    url('branding/puzzle-blue.svg') no-repeat right -48px top -52px / 180px;
  box-shadow: 0 22px 54px rgba(18, 63, 78, .19), inset 0 1px 0 rgba(255, 255, 255, .18);
  color: #fff;
}
.patient-profile-hero::after {
  content: "";
  position: absolute;
  inset: auto -55px -85px auto;
  z-index: -1;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 174, 49, .26), transparent 68%);
}
.patient-avatar {
  display: grid;
  place-items: center;
  width: clamp(82px, 8vw, 112px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  border: 4px solid rgba(255, 255, 255, .88);
  border-radius: 50%;
  background: linear-gradient(145deg, hsl(var(--patient-avatar-hue) 72% 56%), hsl(calc(var(--patient-avatar-hue) + 55) 75% 43%));
  color: #fff;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 900;
  letter-spacing: -.04em;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .24), 0 0 0 7px rgba(255, 255, 255, .10);
}
.patient-profile-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, .72);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.patient-profile-identity h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(27px, 3vw, 42px);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.patient-profile-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.patient-profile-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, .19);
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  color: #fff;
  font-size: 11px;
  font-weight: 850;
  backdrop-filter: blur(8px);
}
.patient-profile-chip.is-success { background: rgba(63, 180, 111, .24); }
.patient-profile-chip.is-danger { background: rgba(224, 82, 93, .28); }
.patient-profile-contact {
  display: grid;
  gap: 10px;
  padding-left: 22px;
  border-left: 1px solid rgba(255, 255, 255, .16);
}
.patient-profile-contact span { min-width: 0; }
.patient-profile-contact small {
  display: block;
  margin-bottom: 2px;
  color: rgba(255, 255, 255, .66);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.patient-profile-contact strong {
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.patient-profile-actions { display: grid; gap: 9px; min-width: 145px; }
.patient-profile-actions .btn { justify-content: center; }
.patient-profile-actions .btn-ghost {
  border-color: rgba(255, 255, 255, .30);
  background: rgba(255, 255, 255, .10);
  color: #fff;
}
.patient-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}
.patient-detail-card {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(137, 169, 183, .22);
  border-top: 4px solid var(--detail-accent, var(--color-primary));
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .94), var(--detail-soft, rgba(232, 240, 252, .72)));
  box-shadow: 0 14px 34px rgba(22, 58, 74, .08);
}
.patient-detail-card.detail-blue { --detail-accent: #2e73d2; --detail-soft: rgba(225, 237, 253, .72); }
.patient-detail-card.detail-green { --detail-accent: #3d9a79; --detail-soft: rgba(224, 245, 236, .72); }
.patient-detail-card.detail-purple { --detail-accent: #8a69bf; --detail-soft: rgba(239, 232, 249, .72); }
.patient-detail-card.detail-orange { --detail-accent: #df8b3d; --detail-soft: rgba(253, 238, 223, .72); }
.patient-detail-card .card-header {
  color: #173f4a;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -.01em;
}
.patient-detail-card .detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}
.patient-detail-card .detail-list > div {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(116, 151, 165, .15);
  border-radius: 11px;
  background: rgba(255, 255, 255, .62);
}
.patient-detail-card .detail-list dt {
  margin: 0 0 4px;
  color: #687d86;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.patient-detail-card .detail-list dd {
  margin: 0;
  color: #17333d;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.patient-related-card {
  border-radius: 19px;
  box-shadow: 0 14px 34px rgba(22, 58, 74, .07);
}
.patient-list-person { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.patient-list-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  background: linear-gradient(145deg, #2e73d2, #41a38a);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 5px 12px rgba(28, 83, 108, .16);
}
.patient-list-person strong { display: block; color: #173f4a; font-size: 13px; }
.patient-list-person small { display: block; margin-top: 2px; color: #73858d; font-size: 10px; }
.paciente-edit-trigger { border-color: rgba(21, 87, 192, .28) !important; color: #1557c0 !important; }

/* Horarios com atalhos e intervalos editaveis. */
.schedule-picker {
  padding: 14px;
  border: 1px solid #c9dce4;
  border-radius: 15px;
  background: linear-gradient(145deg, #f9fcfd, #eef6f8);
}
.schedule-presets { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.schedule-preset,
.schedule-add {
  width: auto;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid #b9d0da;
  border-radius: 999px;
  background: #fff;
  color: #174859;
  font-size: 11px;
  font-weight: 850;
  box-shadow: none;
}
.schedule-preset:hover,
.schedule-add:hover { border-color: #1557c0; background: #eaf1fd; color: #1557c0; }
.schedule-interval-list { display: grid; gap: 8px; }
.schedule-interval {
  display: grid;
  grid-template-columns: minmax(105px, 1fr) auto minmax(105px, 1fr) auto;
  align-items: end;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(111, 147, 162, .17);
  border-radius: 11px;
  background: rgba(255, 255, 255, .82);
}
.schedule-interval label { margin: 0; }
.schedule-interval label span {
  display: block;
  margin-bottom: 4px;
  color: #637983;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}
.schedule-interval input { min-height: 42px; }
.schedule-arrow { align-self: center; color: #738891; font-size: 11px; font-weight: 800; }
.schedule-remove {
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  border: 1px solid #edc4c8;
  border-radius: 10px;
  background: #fff5f6;
  color: #b94752;
  font-size: 22px;
  box-shadow: none;
}
.schedule-picker-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 11px; }
.schedule-summary { color: #58717b; font-size: 11px; font-weight: 750; }
.other-field-row,
.other-inline-field { animation: teaOtherFieldIn 180ms ease-out; }
.other-inline-field { margin-top: 10px; padding: 10px; border-radius: 11px; background: rgba(231, 239, 251, .62); }
.other-inline-field label { margin-bottom: 5px; }
@keyframes teaOtherFieldIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Login maior com o coracao fornecido como emblema sobre o vidro. */
.login-card-stack {
  position: relative;
  width: min(100%, 500px);
  padding-top: 74px;
}
.login-heart-badge {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  width: 150px;
  height: 150px;
  object-fit: contain;
  transform: translateX(-50%);
  filter: drop-shadow(0 15px 22px rgba(37, 43, 57, .24));
  pointer-events: none;
}
.login-card-stack .login-card {
  width: 100% !important;
  max-width: 500px !important;
  padding: 72px 42px 36px !important;
}

@media (max-width: 980px) {
  .patient-profile-hero { grid-template-columns: auto 1fr auto; }
  .patient-profile-contact { grid-column: 2; grid-row: 2; padding: 0; border: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .patient-profile-actions { grid-column: 3; grid-row: 1 / span 2; }
}

@media (max-width: 720px) {
  .patient-profile-hero { grid-template-columns: auto 1fr; gap: 16px; border-radius: 19px; }
  .patient-avatar { width: 74px; }
  .patient-profile-contact { grid-column: 1 / -1; grid-row: auto; grid-template-columns: 1fr; }
  .patient-profile-actions { grid-column: 1 / -1; grid-row: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .patient-details-grid { grid-template-columns: 1fr; }
  .patient-detail-card .detail-list { grid-template-columns: 1fr; }
  .schedule-interval { grid-template-columns: 1fr auto 1fr auto; }
  .schedule-picker-footer { align-items: flex-start; flex-direction: column; }
  .login-card-stack { width: min(100%, 440px); padding-top: 62px; }
  .login-heart-badge { width: 128px; height: 128px; }
  .login-card-stack .login-card { padding: 62px 24px 27px !important; }
}

@media (max-width: 480px) {
  .patient-profile-hero { grid-template-columns: 1fr; text-align: center; }
  .patient-avatar { margin: 0 auto; }
  .patient-profile-meta { justify-content: center; }
  .patient-profile-contact { text-align: left; }
  .schedule-interval { grid-template-columns: 1fr 1fr auto; }
  .schedule-arrow { display: none; }
}


/* =========================================================
   SUPER STABLE · 2026-08-22
   Fluxos condicionais, agenda consistente e portal acessível
   ========================================================= */

/* hidden precisa vencer regras de layout como .form-row {display:grid}. */
[hidden],
.other-field-row[hidden],
.other-inline-field[hidden] {
  display: none !important;
}

/* Agenda: colunas com alturas independentes e horários sempre alinhados no topo. */
.agenda-grid {
  align-items: start !important;
  grid-auto-rows: auto !important;
}
.agenda-column {
  display: flex !important;
  flex-direction: column !important;
  align-self: start !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  overflow: hidden !important;
}
.agenda-column-header {
  min-height: 58px !important;
  flex: 0 0 auto !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
}
.agenda-column-header h3 {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}
.agenda-specialty {
  max-width: 48% !important;
  text-align: right !important;
  overflow-wrap: anywhere !important;
}
.agenda-slots {
  flex: 0 0 auto !important;
  align-content: start !important;
  align-self: stretch !important;
  min-height: 0 !important;
}
.agenda-column-footer {
  margin-top: 12px !important;
  flex: 0 0 auto !important;
}
.agenda-slot {
  min-height: 76px !important;
  box-sizing: border-box !important;
}
.agenda-slot.nao-atende-slot {
  min-height: 180px !important;
}

/* Feedback de admissão: evita o usuário perder o contexto da lista de espera. */
.admission-flow-banner {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
  padding: 11px 13px;
  border: 1px solid #bde0cf;
  border-radius: 13px;
  background: #edf9f2;
  color: #1c6043;
}
.admission-flow-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #2f8d5b;
  color: #fff;
  font-weight: 900;
}
.admission-flow-banner span:last-child { display: grid; gap: 2px; }
.admission-flow-banner strong { font-size: 12px; }
.admission-flow-banner small { color: #507065; font-size: 10px; line-height: 1.45; }
.admission-form-errors { margin-bottom: 12px; }

/* Solicitação pública: três campos essenciais e complementos sob demanda. */
.visitor-phone-field { max-width: 100%; }
.visitor-optional-details {
  overflow: hidden;
  border: 1px solid #d9e6ea;
  border-radius: 14px;
  background: rgba(246, 250, 251, .85);
}
.visitor-optional-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  color: #345b69;
  font-size: 11px;
  font-weight: 850;
  list-style: none;
}
.visitor-optional-details summary::-webkit-details-marker { display:none; }
.visitor-optional-details summary::after {
  content: '+';
  font-size: 20px;
  line-height: 1;
  color: #1b5dc5;
}
.visitor-optional-details[open] summary::after { content: '−'; }
.visitor-optional-details summary span {
  margin-left: auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: #e7f0f4;
  color: #64808b;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.visitor-optional-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  padding: 0 14px 14px;
}

/* Área da equipe nunca some no portal; no mobile vira ação compacta. */
@media (max-width: 900px) {
  .visitor-system-brand-row {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto auto !important;
    gap: 8px !important;
  }
  .visitor-system-header .visitor-team-access {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
    white-space: nowrap !important;
    font-size: 10px !important;
  }
  .visitor-system-header .visitor-nav-toggle {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }
  .visitor-system-nav {
    grid-column: 1 / -1 !important;
  }
  .visitor-optional-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .visitor-system-brand-row {
    grid-template-columns: minmax(0,1fr) auto !important;
    grid-template-rows: auto auto !important;
  }
  .visitor-system-brand { grid-column: 1; grid-row: 1; }
  .visitor-system-header .visitor-nav-toggle { grid-column: 2 !important; grid-row: 1 !important; }
  .visitor-system-header .visitor-team-access {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-height: 36px !important;
    background: rgba(255,255,255,.08) !important;
  }
}

/* Faixa TEAcolhe compartilhada entre portal e área interna. */
.topbar-main.topbar-stacked::after,
.visitor-system-header::after {
  background-image: url('branding/puzzle-strip.svg') !important;
  background-repeat: repeat-x !important;
  background-position: left center !important;
  background-size: auto 22px !important;
  height: 18px !important;
  opacity: 1 !important;
  filter: saturate(1.06) !important;
}
@media (max-width: 900px) {
  .topbar-main.topbar-stacked::after,
  .visitor-system-header::after {
    height: 11px !important;
    background-size: auto 14px !important;
  }
}
.triage-approval-intro {
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid #cfe0e7;
  border-radius: 13px;
  background: #f2f8fa;
}
.triage-approval-intro strong { display:block; color:#164d63; font-size:13px; margin-bottom:3px; }
.triage-approval-intro p { margin:0; color:#607985; font-size:10px; line-height:1.55; }

/* =========================================================
   DEPLOY STABLE · 2026-08-22
   Header/strip real, FOUC guard e modais determinísticos
   ========================================================= */
html:not(.tea-css-loading) body {
  visibility: visible;
  opacity: 1;
}
body {
  transition: opacity 70ms ease-out;
}

/* A faixa é um elemento real no DOM: não depende de ::after/z-index/overflow. */
.topbar-main.topbar-stacked::after,
.visitor-system-header::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
.tea-puzzle-strip {
  position: relative;
  z-index: 70;
  width: 100%;
  height: 20px;
  margin: 0;
  overflow: hidden;
  background-color: #0d5c6d;
  background-image: url('branding/puzzle-strip.svg');
  background-repeat: repeat-x;
  background-position: left center;
  background-size: auto 28px;
  border-top: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(7,53,74,.18);
  box-shadow: 0 5px 13px rgba(15,63,74,.13);
}
.tea-puzzle-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 30%;
  transform: translateX(-130%);
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  animation: teaPuzzleStripShine 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes teaPuzzleStripShine {
  0%, 74% { transform: translateX(-130%); opacity: 0; }
  78% { opacity: .6; }
  94% { transform: translateX(430%); opacity: .15; }
  100% { transform: translateX(430%); opacity: 0; }
}

/* O conteúdo começa imediatamente após a faixa. */
.app-main,
.visitor-main {
  border-top: 0 !important;
}

/* Modal de deploy: viewport fixo + corpo rolável sempre. */
.modal-overlay {
  overflow: hidden !important;
}
.modal-overlay > .modal {
  display: flex !important;
  flex-direction: column !important;
  width: min(1180px, calc(100vw - 32px)) !important;
  max-height: calc(100dvh - 32px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.modal-overlay > .modal.modal-lg { width: min(980px, calc(100vw - 32px)) !important; }
.modal-overlay > .modal.modal-md { width: min(720px, calc(100vw - 32px)) !important; }
.modal-overlay > .modal > .modal-header {
  flex: 0 0 auto !important;
}
.modal-overlay > .modal > .modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}
.modal-overlay > .modal > .modal-body > form {
  min-height: 0 !important;
}

@media (max-width: 1180px) {
  .tea-puzzle-strip {
    height: 13px;
    background-size: auto 20px;
  }
}
@media (max-width: 600px) {
  .tea-puzzle-strip {
    height: 10px;
    background-size: auto 16px;
  }
  .modal-overlay { padding: 8px !important; }
  .modal-overlay > .modal,
  .modal-overlay > .modal.modal-lg,
  .modal-overlay > .modal.modal-md {
    width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tea-puzzle-strip::after { animation: none !important; }
  body { transition: none !important; }
}

/* Faixa exatamente baseada no protótipo aprovado pelo usuário. */
.tea-puzzle-strip {
  height: 20px !important;
  background-color: #0e6572 !important;
  background-image: url('branding/puzzle-strip-prototype.webp') !important;
  background-repeat: repeat-x !important;
  background-position: left center !important;
  background-size: auto 28px !important;
}
@media (max-width: 1180px) {
  .tea-puzzle-strip { height: 13px !important; background-size: auto 19px !important; }
}
@media (max-width: 600px) {
  .tea-puzzle-strip { height: 10px !important; background-size: auto 15px !important; }
}

/* =========================================================
   PRE-DEPLOY UX/PERMISSÕES · 2026-08-22
   Menu profissional, dock tablet, auditoria e segurança
   ========================================================= */

/* Status/usuário no cabeçalho: alinhamento previsível e sem "bolinha solta". */
.topbar-stacked .topbar-account {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
}
.topbar-stacked .topbar-status {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.topbar-stacked .topbar-status::before {
  flex: 0 0 9px !important;
  margin: 0 !important;
  vertical-align: initial !important;
}
.topbar-user-link {
  color: rgba(255,255,255,.96) !important;
  text-decoration: none !important;
  font-weight: 750 !important;
  white-space: nowrap !important;
  border-bottom: 1px solid transparent !important;
}
.topbar-user-link:hover {
  color: #fff !important;
  border-bottom-color: rgba(255,255,255,.45) !important;
}

/* Faixa: faz parte física do cabeçalho, imediatamente sob as opções do menu. */
.topbar-main.topbar-stacked,
.visitor-system-header {
  padding-bottom: 0 !important;
}
.topbar-main.topbar-stacked .tea-puzzle-strip,
.visitor-system-header .tea-puzzle-strip {
  position: relative !important;
  inset: auto !important;
  z-index: 8 !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: 15px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,.14) !important;
  border-bottom: 1px solid rgba(5,44,62,.24) !important;
  background: #0d5d6e !important;
  box-shadow: none !important;
}
.tea-puzzle-strip img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: .96 !important;
}
.tea-puzzle-strip::after {
  height: 100% !important;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.18), transparent) !important;
}

/* Tablet/celular: o dock é limpo; a faixa de puzzle permanece no cabeçalho, não no dock. */
@media (max-width: 1180px) {
  .topbar-main.topbar-stacked .tea-puzzle-strip,
  .visitor-system-header .tea-puzzle-strip {
    height: 10px !important;
  }

  nav.mobile-dock {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)) !important;
    align-items: stretch !important;
    gap: 7px !important;
    padding: 8px !important;
    border: 1px solid rgba(153,194,208,.36) !important;
    border-radius: 22px !important;
    background: rgba(248,252,253,.97) !important;
    box-shadow: 0 18px 38px rgba(5,37,52,.20) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    overflow: hidden !important;
  }
  nav.mobile-dock::before,
  nav.mobile-dock::after {
    display: none !important;
    content: none !important;
    background: none !important;
  }
  nav.mobile-dock .mobile-dock-item,
  nav.mobile-dock button.mobile-dock-item {
    position: relative !important;
    min-width: 0 !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 8px 5px !important;
    border: 0 !important;
    border-radius: 15px !important;
    background: transparent !important;
    color: #5c7280 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    overflow: hidden !important;
  }
  nav.mobile-dock .mobile-dock-item:hover {
    background: #eef6f8 !important;
    color: #174d67 !important;
    transform: none !important;
  }
  nav.mobile-dock .mobile-dock-item.is-active {
    background: linear-gradient(180deg,#ffffff,#f3f8fa) !important;
    color: #0d4663 !important;
    box-shadow: 0 7px 18px rgba(14,64,86,.12) !important;
  }
  nav.mobile-dock .mobile-dock-item.is-active::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 28% !important;
    right: 28% !important;
    bottom: 5px !important;
    height: 3px !important;
    border-radius: 99px !important;
    background: #3f84d9 !important;
  }
  nav.mobile-dock .mobile-dock-more.is-active::after { background:#8f69be !important; }

  .mobile-more-sheet.is-open:not([hidden]) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px !important;
  }
  .mobile-more-sheet-card {
    width: min(100%, 520px) !important;
    max-height: min(78dvh, 620px) !important;
    overflow: auto !important;
    padding: 0 18px 18px !important;
    border: 1px solid rgba(186,211,219,.58) !important;
    border-radius: 24px !important;
    background: #fbfdfe !important;
    background-image: none !important;
    box-shadow: 0 28px 70px rgba(4,30,44,.34) !important;
  }
  .mobile-more-sheet-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    min-height: 82px !important;
    margin: 0 -18px 16px !important;
    padding: 16px 18px !important;
    border-radius: 24px 24px 0 0 !important;
    background: linear-gradient(105deg,#0b4c69,#187676) !important;
  }
  .mobile-more-identity {
    min-width: 0 !important;
    display: grid !important;
    gap: 4px !important;
  }
  .mobile-more-identity strong {
    display: block !important;
    color: #fff !important;
    font-size: 17px !important;
    line-height: 1.15 !important;
  }
  .mobile-more-identity small {
    display: block !important;
    color: rgba(255,255,255,.78) !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
  .mobile-more-close {
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    border-radius: 13px !important;
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
    font-size: 23px !important;
  }
  .mobile-more-links {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 10px !important;
  }
  .mobile-more-links a {
    min-height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 12px !important;
    border: 1px solid #d9e8ed !important;
    border-radius: 14px !important;
    background: #f4f9fa !important;
    color: #174d67 !important;
    font-weight: 750 !important;
    text-decoration: none !important;
  }
  .mobile-more-links a:hover { background:#eaf4f6 !important; }
  .mobile-more-logout { margin-top: 12px !important; }
  .mobile-more-logout button {
    width: 100% !important;
    min-height: 48px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #1f61c5 !important;
    color: #fff !important;
    font-weight: 800 !important;
  }
}
@media (max-width: 560px) {
  .mobile-more-links { grid-template-columns: 1fr !important; }
}

/* Agenda do perfil profissional. */
.agenda-own-context {
  min-width: 240px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px 10px;
  padding: 8px 14px;
  border: 1px solid #cfe0e7;
  border-radius: 13px;
  background: #f5fafb;
}
.agenda-own-context-label {
  grid-row: 1 / 3;
  padding: 5px 8px;
  border-radius: 9px;
  background: #e5f2f5;
  color: #1d6072;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.agenda-own-context strong { color:#123f58; font-size:13px; }
.agenda-own-context small { color:#6a7f8b; font-size:10px; }
.agenda-link-warning { margin: 0 0 16px; }

/* Administração/auditoria e segurança. */
.admin-page-actions { display:flex !important; gap:10px !important; flex-wrap:wrap !important; }
.admin-info-banner,
.audit-intro-banner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
  padding:13px 15px;
  border:1px solid #d4e5ea;
  border-radius:15px;
  background:linear-gradient(115deg,#f7fbfc,#eef7f8);
}
.admin-info-banner strong,
.audit-intro-banner strong { color:#124b64; }
.admin-info-banner span,
.audit-intro-banner span { color:#607984; font-size:12px; }
.audit-intro-banner > div { display:grid; gap:4px; }
.audit-filter-card {
  display:grid;
  grid-template-columns:1fr 1fr minmax(150px,.55fr) auto;
  align-items:end;
  gap:12px;
  margin-bottom:14px;
  padding:14px;
  border:1px solid #dce9ed;
  border-radius:16px;
  background:#fff;
}
.audit-filter-actions { display:flex; gap:8px; padding-bottom:1px; }
.password-reset-intro {
  margin-bottom:14px;
  padding:12px 14px;
  border:1px solid #d6e5ea;
  border-radius:13px;
  background:#f4f9fa;
}
.password-reset-intro strong { display:block; color:#124b64; margin-bottom:3px; }
.password-reset-intro p { margin:0; color:#667d88; font-size:12px; line-height:1.45; }
.account-security-shell { max-width:820px; margin:0 auto; }
.account-security-card { overflow:hidden; }
.account-security-intro { display:flex; gap:14px; align-items:center; margin-bottom:20px; }
.account-security-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:16px; background:#e7f2f6; font-size:24px; }
.account-security-intro h3 { margin:0 0 4px; color:#123f58; }
.account-security-intro p { margin:0; color:#647b87; }
.account-password-form { display:grid; gap:16px; }
.page-form-actions { display:flex; justify-content:flex-end; gap:10px; }
.login-password-help {
  margin:14px 0 0;
  padding:10px 12px;
  border-radius:11px;
  background:#f4f8fa;
  color:#667b86;
  font-size:11px;
  line-height:1.45;
  text-align:center;
}
.login-password-help strong { color:#244e65; }

@media (max-width: 800px) {
  .audit-filter-card { grid-template-columns:1fr 1fr; }
  .audit-filter-actions { grid-column:1/-1; }
  .admin-info-banner,
  .audit-intro-banner { align-items:flex-start; flex-direction:column; }
}

.professional-dashboard-intro {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px;
  padding:18px 20px;
  border:1px solid #d5e6ea;
  border-radius:18px;
  background:linear-gradient(120deg,#f8fcfd 0%,#eef7f7 100%);
}
.professional-dashboard-intro h3 { margin:2px 0 5px; color:#123f58; }
.professional-dashboard-intro p { margin:0; color:#607985; max-width:760px; }
.professional-dashboard-kicker { color:#2870aa; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.professional-metrics-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
.professional-charts-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.professional-dashboard-warning { margin-bottom:14px; }
@media (max-width:1100px) { .professional-metrics-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:720px) {
  .professional-dashboard-intro { align-items:flex-start; flex-direction:column; }
  .professional-metrics-grid,.professional-charts-grid { grid-template-columns:1fr; }
}

/* V11: dock mobile consolidado. Esta regra final neutraliza as versões antigas
   e mantém o menu dentro da área segura em qualquer largura de celular/tablet. */
@media (max-width:1180px) {
  body { padding-bottom:calc(92px + env(safe-area-inset-bottom, 0px)) !important; }
  body.mobile-sheet-open { overflow:hidden !important; }
  nav.mobile-dock {
    display:grid !important;
    grid-template-columns:none !important;
    grid-auto-flow:column !important;
    grid-auto-columns:minmax(0, 1fr) !important;
    align-items:stretch !important;
    position:fixed !important;
    z-index:170 !important;
    left:max(10px, env(safe-area-inset-left, 0px)) !important;
    right:max(10px, env(safe-area-inset-right, 0px)) !important;
    bottom:max(8px, env(safe-area-inset-bottom, 0px)) !important;
    width:auto !important;
    height:74px !important;
    min-height:74px !important;
    padding:6px !important;
    margin:0 !important;
    border:1px solid rgba(108,155,178,.28) !important;
    border-radius:26px !important;
    overflow:hidden !important;
  }
  nav.mobile-dock .mobile-dock-item,
  nav.mobile-dock button.mobile-dock-item {
    display:flex !important;
    min-width:0 !important;
    min-height:62px !important;
    padding:7px 4px 5px !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:3px !important;
    border-radius:20px !important;
  }
  nav.mobile-dock .mobile-dock-icon { width:24px !important; height:24px !important; flex:0 0 24px !important; }
  nav.mobile-dock .mobile-dock-label { max-width:100% !important; padding-bottom:5px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
  nav.mobile-dock .mobile-dock-more.is-current:not(.is-active) .mobile-dock-label::after { width:40px !important; }
  nav.mobile-dock .mobile-dock-more.is-current:not(.is-active) { color:inherit !important; }
  .mobile-more-sheet { z-index:180 !important; }
  .mobile-more-sheet.is-open:not([hidden]) { display:flex !important; align-items:flex-end !important; padding:12px 10px calc(94px + env(safe-area-inset-bottom, 0px)) !important; }
  .mobile-more-sheet-card { width:min(100%, 560px) !important; max-height:min(72vh, 620px) !important; overflow:auto !important; overscroll-behavior:contain !important; }
}

@media (max-width:420px) {
  nav.mobile-dock { left:6px !important; right:6px !important; border-radius:22px !important; }
  nav.mobile-dock .mobile-dock-item,
  nav.mobile-dock button.mobile-dock-item { padding-inline:2px !important; }
  nav.mobile-dock .mobile-dock-label { font-size:11px !important; }
}

/* Grade semanal individual dos profissionais. */
.weekly-schedule { display:grid; gap:10px; margin-top:8px; }
.weekly-schedule-day {
  border:1px solid var(--color-border);
  border-radius:16px;
  background:rgba(239,246,248,.55);
  overflow:hidden;
}
.weekly-schedule-day.is-enabled { background:var(--color-surface); border-color:rgba(34,111,164,.34); }
.weekly-schedule-toggle {
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 15px;
  cursor:pointer;
}
.weekly-schedule-toggle input { width:20px; height:20px; flex:0 0 20px; accent-color:var(--color-primary); }
.weekly-schedule-toggle span { display:flex; min-width:0; flex:1; align-items:center; justify-content:space-between; gap:12px; }
.weekly-schedule-toggle strong { color:var(--color-text); }
.weekly-schedule-toggle small { color:var(--color-muted); font-weight:700; }
.weekly-schedule-day.is-enabled .weekly-schedule-toggle small { color:var(--color-primary); }
.weekly-schedule-hours { padding:0 14px 14px; border-top:1px solid var(--color-border); }
.weekly-schedule-hours .schedule-picker { margin-top:12px; }
html[data-theme="dark"] .weekly-schedule-day { background:#102431; border-color:rgba(142,177,196,.20); }
html[data-theme="dark"] .weekly-schedule-day.is-enabled { background:#162f3d; border-color:rgba(92,167,202,.42); }
@media (max-width:560px) {
  .weekly-schedule-toggle span { align-items:flex-start; flex-direction:column; gap:2px; }
  .weekly-schedule-hours { padding-inline:10px; }
}
.visitor-system-header > .tea-puzzle-strip { grid-column: 1 / -1 !important; width:100% !important; }
.field-error { display:block; margin-top:5px; color:#b64650; font-size:11px; font-weight:700; }


/* =========================================================
   V3 FINAL · MENU PROFISSIONAL / POLIMENTO VISUAL / PERFORMANCE LEVE
   ========================================================= */

/* O strip passa a usar somente a arte aprovada, sem mosaico montado por CSS. */
.topbar-main.topbar-stacked::after,
.visitor-system-header::after,
nav.mobile-dock::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

.topbar-main.topbar-stacked,
.visitor-system-header {
  overflow: visible !important;
}

.topbar-main.topbar-stacked {
  min-height: 0 !important;
  padding-bottom: 0 !important;
  background:
    radial-gradient(circle at 15% 22%, rgba(91, 156, 255, .10), transparent 16%),
    radial-gradient(circle at 84% 20%, rgba(90, 204, 176, .10), transparent 15%),
    linear-gradient(90deg, #0b406d 0%, #0f5772 56%, #167073 100%) !important;
  box-shadow: 0 8px 22px rgba(8, 40, 58, .16) !important;
}
.topbar-main.topbar-stacked::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    url('branding/puzzle-blue.svg') no-repeat left -28px top -18px / 124px 124px,
    url('branding/puzzle-green.svg') no-repeat left 120px bottom -48px / 138px 138px,
    url('branding/puzzle-purple.svg') no-repeat right -32px top -18px / 110px 110px,
    url('branding/puzzle-green.svg') no-repeat right 128px bottom -44px / 82px 82px !important;
  opacity: .18 !important;
}
.topbar-decoration,
.topbar-puzzle {
  display: none !important;
}
.topbar-stacked .topbar-brand-row {
  min-height: 64px !important;
  padding: 10px 32px 9px !important;
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
}
.topbar-stacked .topbar-brand-link { position: relative !important; z-index: 2 !important; }
.topbar-stacked .topbar-brand-mark {
  width: 44px !important;
  height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
}
.topbar-stacked .topbar-brand-copy strong { font-size: 21px !important; color: #ffffff !important; }
.topbar-stacked .topbar-brand-copy small { font-size: 10px !important; letter-spacing: .16em !important; color: rgba(255,255,255,.94) !important; }

.topbar-stacked .topbar-account {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  position: relative !important;
  z-index: 2 !important;
}
.topbar-stacked .topbar-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 34px !important;
  padding: 6px 13px !important;
  border: 1px solid rgba(113, 220, 146, .32) !important;
  border-radius: 999px !important;
  background: rgba(79, 167, 104, .16) !important;
  color: #f1fff4 !important;
  line-height: 1 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(57,153,84,.08) !important;
}
.topbar-stacked .topbar-status::before {
  content: "" !important;
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  margin: 0 !important;
  flex: 0 0 10px !important;
  border-radius: 50% !important;
  background: #65e56e !important;
  box-shadow: 0 0 0 3px rgba(101,229,110,.14), 0 0 12px rgba(101,229,110,.66) !important;
}
.topbar-user-link,
.topbar-stacked .topbar-user-link {
  color: #ffffff !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}
.topbar-user-link:hover { color: #f2fbfd !important; text-decoration: underline !important; }
.topbar-stacked .logout-form button {
  min-height: 36px !important;
  padding: 8px 14px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
}

.topbar-stacked .topbar-nav-stacked {
  position: relative !important;
  z-index: 2 !important;
  min-height: 54px !important;
  padding: 10px 20px 12px !important;
  gap: 12px !important;
  border: 0 !important;
  background: rgba(5, 39, 56, .12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.topbar-stacked .topbar-nav-stacked a {
  position: relative !important;
  min-height: 42px !important;
  padding: 9px 14px 14px !important;
  border-radius: 16px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.16) !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: background-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease !important;
}
.topbar-stacked .topbar-nav-stacked a::before {
  display: none !important;
  content: none !important;
}
.topbar-stacked .topbar-nav-stacked a::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 6px !important;
  width: 24px !important;
  height: 4px !important;
  border-radius: 999px !important;
  transform: translateX(-50%) !important;
  background: var(--menu-accent, #6ba4ff) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
.topbar-stacked .topbar-nav-stacked a:hover {
  background: rgba(255,255,255,.10) !important;
  transform: translateY(-1px) !important;
}
.topbar-stacked .topbar-nav-stacked a.ativo {
  background: rgba(255,255,255,.97) !important;
  color: #123f58 !important;
  text-shadow: none !important;
  box-shadow: 0 8px 18px rgba(4, 31, 46, .18) !important;
}
.topbar-stacked .topbar-nav-stacked a:hover::after,
.topbar-stacked .topbar-nav-stacked a.ativo::after {
  width: 40px !important;
  box-shadow: 0 0 16px color-mix(in srgb, var(--menu-accent, #6ba4ff) 38%, transparent) !important;
}

.tea-puzzle-strip {
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  height: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  background: linear-gradient(90deg, rgba(9,73,101,.28), rgba(18,113,118,.18)) !important;
  box-shadow: 0 4px 14px rgba(10, 52, 69, .14) !important;
}
.tea-puzzle-strip img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 1 !important;
  filter: saturate(1.02) contrast(1.02) !important;
}
.tea-puzzle-strip::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, rgba(255,255,255,.08), transparent 14%, transparent 86%, rgba(255,255,255,.08)) !important;
  pointer-events: none !important;
}

/* Portal do cidadão alinhado visualmente ao cabeçalho principal. */
.visitor-system-header {
  padding-bottom: 0 !important;
  background:
    radial-gradient(circle at 15% 20%, rgba(91, 156, 255, .10), transparent 16%),
    radial-gradient(circle at 84% 20%, rgba(90, 204, 176, .10), transparent 15%),
    linear-gradient(90deg, #0b406d 0%, #0f5772 56%, #167073 100%) !important;
}
.visitor-system-header::before {
  background:
    url('branding/puzzle-blue.svg') no-repeat left -28px top -18px / 124px 124px,
    url('branding/puzzle-green.svg') no-repeat left 120px bottom -48px / 138px 138px,
    url('branding/puzzle-purple.svg') no-repeat right -32px top -18px / 110px 110px,
    url('branding/puzzle-green.svg') no-repeat right 128px bottom -44px / 82px 82px !important;
  opacity: .18 !important;
}
.visitor-system-brand-row { padding-bottom: 10px !important; }
.visitor-system-nav {
  gap: 10px !important;
  padding: 10px 24px 12px !important;
  background: rgba(5, 39, 56, .12) !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
  border-bottom: 0 !important;
}
.visitor-system-nav a {
  position: relative !important;
  min-height: 42px !important;
  padding: 9px 14px 13px !important;
  border-radius: 16px !important;
  background: transparent !important;
  color: #fff !important;
  border: 0 !important;
}
.visitor-system-nav a::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 5px !important;
  width: 34px !important;
  height: 4px !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background: #68c7a2 !important;
}
.visitor-system-nav a:nth-child(2)::after { background: #5d9ef2 !important; }
.visitor-system-nav a:nth-child(3)::after { background: #f0a148 !important; }
.visitor-system-nav a:hover { background: rgba(255,255,255,.10) !important; }
.visitor-system-nav a.is-active,
.visitor-system-nav a[aria-current="page"] { background: rgba(255,255,255,.97) !important; color: #123f58 !important; }

/* Dock mobile/tablet com a mesma família visual do desktop. */
@media (max-width: 1180px) {
  .topbar-main.topbar-stacked .topbar-account {
    display: flex !important;
    gap: 8px !important;
  }
  .topbar-main.topbar-stacked .topbar-brand-row {
    padding: 8px 16px 7px !important;
    gap: 12px !important;
  }
  .topbar-main.topbar-stacked .topbar-status { padding: 6px 11px !important; font-size: 12px !important; }
  .topbar-main.topbar-stacked .topbar-user-link { font-size: 12px !important; }
  .topbar-main.topbar-stacked .logout-form button { padding: 8px 11px !important; min-height: 34px !important; }
  .topbar-main.topbar-stacked .tea-puzzle-strip,
  .visitor-system-header .tea-puzzle-strip { height: 10px !important; }

  nav.mobile-dock {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 7px !important;
    padding: 9px !important;
    border: 1px solid rgba(73,127,152,.26) !important;
    border-radius: 24px !important;
    background: linear-gradient(90deg, rgba(13,77,106,.96), rgba(25,125,122,.94)) !important;
    box-shadow: 0 20px 40px rgba(7, 38, 54, .24) !important;
    overflow: hidden !important;
  }
  nav.mobile-dock::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
      url('branding/puzzle-blue.svg') no-repeat left -20px bottom -22px / 76px 76px,
      url('branding/puzzle-green.svg') no-repeat right -18px top -16px / 74px 74px !important;
    opacity: .18 !important;
    pointer-events: none !important;
  }
  nav.mobile-dock .mobile-dock-item,
  nav.mobile-dock button.mobile-dock-item {
    position: relative !important;
    z-index: 1 !important;
    min-height: 62px !important;
    padding: 8px 4px 13px !important;
    border-radius: 18px !important;
    background: transparent !important;
    color: rgba(255,255,255,.92) !important;
  }
  nav.mobile-dock .mobile-dock-item:nth-child(1) { --dock-accent:#8a67bc; }
  nav.mobile-dock .mobile-dock-item:nth-child(2) { --dock-accent:#52a68e; }
  nav.mobile-dock .mobile-dock-item:nth-child(3) { --dock-accent:#f0a148; }
  nav.mobile-dock .mobile-dock-item:nth-child(4) { --dock-accent:#5d9ef2; }
  nav.mobile-dock .mobile-dock-item:nth-child(5) { --dock-accent:#ffffff; }
  nav.mobile-dock .mobile-dock-item::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 7px !important;
    width: 30px !important;
    height: 4px !important;
    border-radius: 999px !important;
    transform: translateX(-50%) !important;
    background: var(--dock-accent, #fff) !important;
    opacity: .9 !important;
    display: block !important;
  }
  nav.mobile-dock .mobile-dock-item:hover {
    background: rgba(255,255,255,.08) !important;
    color: #ffffff !important;
  }
  nav.mobile-dock .mobile-dock-item.is-active {
    background: linear-gradient(180deg,#ffffff,#f3f8fa) !important;
    color: #0f4560 !important;
    box-shadow: 0 10px 22px rgba(3,31,46,.18) !important;
  }
  nav.mobile-dock .mobile-dock-item.is-active::after { width: 42px !important; }
  nav.mobile-dock .mobile-dock-icon,
  nav.mobile-dock .mobile-dock-icon svg { width: 20px !important; height: 20px !important; }
  nav.mobile-dock .mobile-dock-label {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
  }

  .mobile-more-sheet { background: rgba(4, 18, 27, .48) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; }
  .mobile-more-sheet-card {
    width: min(520px, calc(100% - 22px)) !important;
    margin: 36px auto 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(194,214,224,.26) !important;
    border-radius: 28px !important;
    background: rgba(248, 252, 253, .98) !important;
    box-shadow: 0 24px 60px rgba(6, 34, 49, .28) !important;
  }
  .mobile-more-sheet-head {
    padding: 18px 18px 16px !important;
    background: linear-gradient(90deg, #0b406d, #167073) !important;
    color: #fff !important;
  }
  .mobile-more-identity strong { color: #fff !important; font-size: 17px !important; }
  .mobile-more-identity small { color: rgba(255,255,255,.84) !important; }
  .mobile-more-close {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,.24) !important;
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
  }
  .mobile-more-links {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px !important;
    padding: 18px !important;
  }
  .mobile-more-links a {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(185, 205, 214, .72) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: #123f58 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
  }
  .mobile-more-links a:hover { background: #f4f9fb !important; }
  .mobile-more-logout { padding: 0 18px 18px !important; }
  .mobile-more-logout button {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg,#1e62d0,#225bb7) !important;
    color: #fff !important;
    font-weight: 800 !important;
  }
}

@media (max-width: 980px) {
  .topbar-main.topbar-stacked .topbar-nav-stacked { display: none !important; }
  .topbar-main.topbar-stacked .topbar-brand-copy strong { font-size: 18px !important; }
  .topbar-main.topbar-stacked .topbar-brand-copy small { font-size: 9px !important; }
}

@media (max-width: 720px) {
  .topbar-main.topbar-stacked .topbar-brand-row { align-items: center !important; }
  .topbar-main.topbar-stacked .topbar-account { gap: 6px !important; }
  .topbar-main.topbar-stacked .topbar-user-link { display: none !important; }
  .topbar-main.topbar-stacked .logout-form button { min-height: 32px !important; padding: 7px 10px !important; font-size: 11px !important; }
  .topbar-main.topbar-stacked .topbar-status { min-height: 32px !important; padding: 5px 10px !important; font-size: 11px !important; }
  .topbar-main.topbar-stacked .tea-puzzle-strip,
  .visitor-system-header .tea-puzzle-strip { height: 9px !important; }
  .visitor-system-brand-row { gap: 10px !important; }
  .visitor-system-nav { grid-template-columns: 1fr !important; gap: 8px !important; padding: 10px 14px 12px !important; }
  .mobile-more-links { grid-template-columns: 1fr !important; }
}

/* Peças decorativas do conteúdo: menos custosas e menos intrusivas. */
.tea-puzzle-atmosphere { pointer-events: none; }
.tea-puzzle-atmosphere .tea-puzzle { opacity: .10 !important; filter: none !important; }
@media (max-width: 980px) {
  .tea-puzzle-atmosphere { display: none !important; }
}

/* Pequena otimização visual: cartões off-screen podem ser pulados pelo navegador. */
.card, .box, .dashboard-card, .chart-card, .visitor-card, .solicitacao-card, .agenda-professional-column, .patient-record-section, .report-table-card {
  content-visibility: auto;
  contain-intrinsic-size: 300px;
}

/* =========================================================
   PRE-DEPLOY V4 · TEMA / FLUXOS / FAIXA MAIS FINA
   ========================================================= */

/* Faixa de quebra-cabeças mais discreta e profissional. */
.tea-puzzle-strip {
  height: 7px !important;
  min-height: 7px !important;
  box-shadow: 0 2px 7px rgba(10, 52, 69, .11) !important;
}
.tea-puzzle-strip img {
  object-position: center 54% !important;
  filter: saturate(.96) contrast(1.02) !important;
}
@media (max-width: 1180px) {
  .topbar-main.topbar-stacked .tea-puzzle-strip,
  .visitor-system-header .tea-puzzle-strip {
    height: 5px !important;
    min-height: 5px !important;
  }
}

/* Feedback visual do seletor de horários. */
.schedule-picker .is-invalid {
  border-color: #c94e59 !important;
  box-shadow: 0 0 0 3px rgba(185, 71, 82, .12) !important;
}
.schedule-summary.is-error {
  color: var(--color-danger) !important;
  font-weight: 800 !important;
}
.schedule-interval {
  align-items: end !important;
}

/* Flash fechável: o X agora remove a mensagem com transição curta. */
.flash-message {
  transition: opacity 160ms ease, transform 160ms ease, max-height 180ms ease, margin 180ms ease, padding 180ms ease !important;
  max-height: 260px;
  overflow: hidden;
}
.flash-message.is-closing {
  opacity: 0 !important;
  transform: translateY(-6px) !important;
  max-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0 !important;
}
.flash-close {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 32px !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 9px !important;
  cursor: pointer !important;
}
.flash-close:hover { background: rgba(0,0,0,.06) !important; }

/* Ações administrativas com significado, sem depender só de ícone. */
.btn-action-labeled { gap: 6px !important; padding-inline: 9px !important; }
.btn-action-labeled span { font-size: 11px; font-weight: 800; }

/* Tema: controles compartilhados entre sistema, visitante e login. */
.theme-toggle {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 12px;
  background: rgba(255,255,255,.10);
  color: #fff;
  cursor: pointer;
  box-shadow: none;
}
.theme-toggle:hover { background: rgba(255,255,255,.17); }
.theme-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html[data-theme="light"] .theme-icon-moon { display: block; }
html[data-theme="light"] .theme-icon-sun { display: none; }
html[data-theme="dark"] .theme-icon-moon { display: none; }
html[data-theme="dark"] .theme-icon-sun { display: block; }
.theme-toggle-login {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 30;
  background: rgba(15,63,78,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.visitor-system-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.mobile-more-theme {
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(185,205,214,.72) !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: #123f58 !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

/* =========================================================
   TEMA ESCURO
   ========================================================= */
html[data-theme="dark"] {
  --color-bg: #0d1822;
  --color-surface: rgba(22, 36, 48, .94);
  --color-surface-muted: rgba(26, 42, 55, .90);
  --color-surface-raised: rgba(29, 46, 60, .98);
  --color-text: #edf5f8;
  --color-text-soft: #c5d3da;
  --color-muted: #a9bbc5;
  --color-border: rgba(141, 176, 194, .18);
  --color-border-strong: rgba(141, 176, 194, .32);
  --color-primary-soft: #183452;
  --color-success-soft: #17392b;
  --color-danger-soft: #48252c;
  --color-warning-soft: #493b1c;
  --color-info-soft: #183651;
  --color-purple-soft: #302646;
  --color-teal-soft: #183d3d;
  --color-mint-soft: #173a2a;
  --color-coral-soft: #472c26;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.16);
  --shadow-md: 0 8px 22px rgba(0,0,0,.22);
  --shadow-lg: 0 14px 36px rgba(0,0,0,.28);
}
html[data-theme="dark"] body,
html[data-theme="dark"] .app-main,
html[data-theme="dark"] .visitor-main { background-color: var(--color-bg) !important; color: var(--color-text) !important; }
html[data-theme="dark"] .page-title-bar,
html[data-theme="dark"] .card,
html[data-theme="dark"] .box,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .visitor-card,
html[data-theme="dark"] .report-table-card,
html[data-theme="dark"] .report-summary-card,
html[data-theme="dark"] .agenda-column,
html[data-theme="dark"] .agenda-professional-column,
html[data-theme="dark"] .patient-record-section,
html[data-theme="dark"] .patient-record-hero,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .modal-dialog,
html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}
html[data-theme="dark"] .page-title-bar,
html[data-theme="dark"] .page-hero,
html[data-theme="dark"] .section-header {
  background: linear-gradient(115deg, rgba(27,43,56,.98), rgba(21,38,50,.96)) !important;
}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] strong { color: #f1f7fa; }
html[data-theme="dark"] small,
html[data-theme="dark"] .field-help,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .text-muted { color: var(--color-muted) !important; }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .form-select {
  background: #132533 !important;
  color: #edf5f8 !important;
  border-color: rgba(142,177,196,.28) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #8095a2 !important; }
html[data-theme="dark"] table,
html[data-theme="dark"] .table,
html[data-theme="dark"] .tabela { color: var(--color-text) !important; }
html[data-theme="dark"] th { background: #182d3a !important; color: #d8e6ec !important; }
html[data-theme="dark"] td { border-color: rgba(142,177,196,.14) !important; }
html[data-theme="dark"] tr:hover td { background: rgba(71,107,128,.10) !important; }
html[data-theme="dark"] .professional-choice,
html[data-theme="dark"] .origin-choice,
html[data-theme="dark"] .checkbox-pill,
html[data-theme="dark"] .schedule-picker,
html[data-theme="dark"] .schedule-interval,
html[data-theme="dark"] .form-note,
html[data-theme="dark"] .admin-info-banner {
  background: #162a37 !important;
  color: var(--color-text) !important;
  border-color: rgba(142,177,196,.20) !important;
}
html[data-theme="dark"] .professional-choice:has(input:checked),
html[data-theme="dark"] .origin-choice:has(input:checked),
html[data-theme="dark"] .checkbox-pill:has(input:checked) { background: #193959 !important; }
html[data-theme="dark"] .mobile-more-sheet-card { background: #122432 !important; }
html[data-theme="dark"] .mobile-more-links a,
html[data-theme="dark"] .mobile-more-theme { background: #192f3d !important; color: #ecf6f8 !important; border-color: rgba(142,177,196,.22) !important; }
html[data-theme="dark"] nav.mobile-dock { border-color: rgba(142,177,196,.20) !important; }
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .login-card-simplified { background: rgba(18, 35, 47, .96) !important; color: #edf5f8 !important; }
html[data-theme="dark"] .login-card input { background: #102431 !important; }

@media (max-width: 720px) {
  .visitor-system-actions { margin-left: auto; gap: 6px; }
  .visitor-system-actions .theme-toggle { width: 34px; height: 34px; flex-basis: 34px; }
}

/* Renderização mais leve para máquinas modestas: vidro apenas onde agrega contexto. */
.card,
.box,
.panel,
.dashboard-card,
.chart-card,
.report-table-card,
.report-summary-card,
.patient-record-section,
.patient-record-hero,
.visitor-card,
.solicitacao-card,
.agenda-professional-column,
.agenda-column {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* =========================================================
   V5 · DARK MODE PROFISSIONAL + STRIP FINO + DOCK LIMPO
   ========================================================= */

/* Faixa de quebra-cabeças: assinatura visual discreta. */
.topbar-main.topbar-stacked .tea-puzzle-strip,
.visitor-system-header .tea-puzzle-strip,
.tea-puzzle-strip {
  height: 4px !important;
  min-height: 4px !important;
  max-height: 4px !important;
  box-shadow: 0 2px 7px rgba(8, 46, 63, .12) !important;
}
.topbar-main.topbar-stacked .tea-puzzle-strip img,
.visitor-system-header .tea-puzzle-strip img,
.tea-puzzle-strip img {
  height: 4px !important;
  min-height: 4px !important;
  max-height: 4px !important;
  object-fit: cover !important;
  object-position: center 57% !important;
}
.tea-puzzle-strip::after { opacity: .35 !important; }

/* Dock: sem peça decorativa cortada nas laterais, que parecia uma barra azul. */
@media (max-width: 1180px) {
  nav.mobile-dock::before,
  nav.mobile-dock::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }
  nav.mobile-dock {
    overflow: hidden !important;
    background: linear-gradient(112deg, #0d4a68 0%, #126275 56%, #187b78 100%) !important;
  }
  nav.mobile-dock .mobile-dock-item,
  nav.mobile-dock button.mobile-dock-item {
    border-left: 0 !important;
    border-right: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  nav.mobile-dock .mobile-dock-item:focus,
  nav.mobile-dock .mobile-dock-item:focus-visible,
  nav.mobile-dock button.mobile-dock-item:focus,
  nav.mobile-dock button.mobile-dock-item:focus-visible {
    outline: 2px solid rgba(255,255,255,.78) !important;
    outline-offset: -4px !important;
    box-shadow: none !important;
  }
  nav.mobile-dock .mobile-dock-item.is-active {
    background: linear-gradient(180deg, #ffffff 0%, #f2f7f9 100%) !important;
    color: #0e455f !important;
    box-shadow: 0 8px 18px rgba(5, 35, 50, .22) !important;
  }
  nav.mobile-dock .mobile-dock-item.is-active:focus-visible {
    outline-color: rgba(20, 86, 192, .42) !important;
  }
  .topbar-main.topbar-stacked .tea-puzzle-strip,
  .visitor-system-header .tea-puzzle-strip,
  .tea-puzzle-strip {
    height: 3px !important;
    min-height: 3px !important;
    max-height: 3px !important;
  }
  .topbar-main.topbar-stacked .tea-puzzle-strip img,
  .visitor-system-header .tea-puzzle-strip img,
  .tea-puzzle-strip img {
    height: 3px !important;
    min-height: 3px !important;
    max-height: 3px !important;
  }
}

/* Tema escuro: azul-grafite, não preto. Mantém hierarquia e identidade TEAcolhe. */
html[data-theme="dark"] {
  --color-bg: #13212b;
  --color-surface: #1b2d39;
  --color-surface-muted: #203542;
  --color-surface-raised: #243b49;
  --color-text: #edf5f7;
  --color-text-soft: #ccdae0;
  --color-muted: #a8bdc7;
  --color-border: rgba(147, 182, 198, .20);
  --color-border-strong: rgba(147, 182, 198, .34);
  --color-focus: rgba(93, 158, 242, .26);
  --shadow-sm: 0 2px 8px rgba(2, 12, 19, .16);
  --shadow-md: 0 8px 22px rgba(2, 12, 19, .20);
  --shadow-lg: 0 16px 36px rgba(2, 12, 19, .26);
}
html[data-theme="dark"] body,
html[data-theme="dark"] .app-main,
html[data-theme="dark"] .visitor-main {
  background: #13212b !important;
  color: var(--color-text) !important;
}
html[data-theme="dark"] .app-main::before,
html[data-theme="dark"] .app-main::after { opacity: .25 !important; }

html[data-theme="dark"] .card,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .box,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .visitor-card,
html[data-theme="dark"] .report-table-card,
html[data-theme="dark"] .report-summary-card,
html[data-theme="dark"] .agenda-column,
html[data-theme="dark"] .agenda-professional-column,
html[data-theme="dark"] .patient-detail-card,
html[data-theme="dark"] .patient-related-card,
html[data-theme="dark"] .patient-record-section,
html[data-theme="dark"] .patient-record-hero,
html[data-theme="dark"] .table-responsive,
html[data-theme="dark"] .tabela-scroll,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .tablewrap {
  background: #1b2d39 !important;
  color: var(--color-text) !important;
  border-color: rgba(147, 182, 198, .18) !important;
  box-shadow: 0 5px 16px rgba(2, 12, 19, .12) !important;
}
html[data-theme="dark"] .card-header {
  background: #203542 !important;
  border-bottom-color: rgba(147, 182, 198, .18) !important;
}
html[data-theme="dark"] .card-footer {
  background: #1a2b37 !important;
  border-top-color: rgba(147, 182, 198, .16) !important;
}
html[data-theme="dark"] .page-title-bar {
  background: linear-gradient(115deg, #203643 0%, #1a303b 100%) !important;
  border-color: rgba(147,182,198,.20) !important;
  box-shadow: 0 7px 20px rgba(2,12,19,.15) !important;
}
html[data-theme="dark"] .page-title-bar h1,
html[data-theme="dark"] .page-title-bar h2 { color: #f3f8fa !important; }

html[data-theme="dark"] .search-form,
html[data-theme="dark"] .search-input-wrapper {
  background: transparent !important;
  border-color: transparent !important;
}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .form-select {
  background: #162936 !important;
  color: #eef6f8 !important;
  border-color: rgba(147, 182, 198, .30) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] .form-input:focus,
html[data-theme="dark"] .form-select:focus {
  background: #192f3d !important;
  border-color: #5d9ef2 !important;
  box-shadow: 0 0 0 3px rgba(93,158,242,.18) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #8ba1ac !important; }

html[data-theme="dark"] table,
html[data-theme="dark"] .table,
html[data-theme="dark"] .tabela {
  background: transparent !important;
  color: #eaf3f6 !important;
}
html[data-theme="dark"] thead,
html[data-theme="dark"] th {
  background: #223a48 !important;
  color: #dcebf0 !important;
  border-color: rgba(147,182,198,.18) !important;
}
html[data-theme="dark"] tbody,
html[data-theme="dark"] tbody tr,
html[data-theme="dark"] tbody td {
  background: #1b2d39 !important;
  color: #dce8ed !important;
  border-color: rgba(147,182,198,.13) !important;
}
html[data-theme="dark"] tbody tr:nth-child(even) td { background: #1d313e !important; }
html[data-theme="dark"] tbody tr:hover td { background: #243c4a !important; }
html[data-theme="dark"] td strong { color: #f3f8fa !important; }

html[data-theme="dark"] .metric-card { background: #1b2d39 !important; }
html[data-theme="dark"] .metric-label { color: #b3c7d0 !important; }
html[data-theme="dark"] .metric-value { color: #f6fafb !important; }
html[data-theme="dark"] .professional-choice,
html[data-theme="dark"] .origin-choice,
html[data-theme="dark"] .checkbox-pill,
html[data-theme="dark"] .schedule-picker,
html[data-theme="dark"] .schedule-interval,
html[data-theme="dark"] .form-note,
html[data-theme="dark"] .admin-info-banner,
html[data-theme="dark"] .access-generated-card {
  background: #203541 !important;
  color: #e8f2f5 !important;
  border-color: rgba(147,182,198,.20) !important;
}
html[data-theme="dark"] .professional-choice:has(input:checked),
html[data-theme="dark"] .origin-choice:has(input:checked),
html[data-theme="dark"] .checkbox-pill:has(input:checked) {
  background: #24445b !important;
  border-color: #5d9ef2 !important;
}
html[data-theme="dark"] .modal,
html[data-theme="dark"] .modal-dialog,
html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
  background: #1b2d39 !important;
  color: #edf5f7 !important;
  border-color: rgba(147,182,198,.20) !important;
}
html[data-theme="dark"] .modal-header { background: #203542 !important; }
html[data-theme="dark"] .modal-close {
  background: #294353 !important;
  color: #f2f8fa !important;
  border-color: rgba(147,182,198,.26) !important;
}
html[data-theme="dark"] .flash-message {
  box-shadow: 0 8px 22px rgba(2,12,19,.18) !important;
}
html[data-theme="dark"] .flash-success { background: #183b2d !important; color: #dff7e7 !important; }
html[data-theme="dark"] .flash-error { background: #48292f !important; color: #fde9ec !important; }
html[data-theme="dark"] .flash-info { background: #20384c !important; color: #e7f3fb !important; }

/* Acesso público do paciente. */
.patient-public-access-btn { color: #155bb5 !important; }
.patient-public-access-hero { gap: 7px !important; }
.patient-public-protocol {
  display: inline-flex;
  padding: 5px 8px;
  border-radius: 9px;
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}
.access-result-success {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.access-result-success p { margin: 4px 0 0; color: var(--color-muted); }
.access-result-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-success-soft);
  color: var(--color-success);
  font-size: 20px;
  font-weight: 900;
}
.access-code-highlight { color: var(--color-primary-strong) !important; font-size: 20px !important; letter-spacing: .12em !important; }
html[data-theme="dark"] .patient-public-access-btn { color: #80b6ff !important; }
html[data-theme="dark"] .patient-public-protocol { background: #24445b !important; color: #b7d8ff !important; }
html[data-theme="dark"] .access-code-highlight { color: #9bc5ff !important; }

/* =========================================================
   V6 · LOGIN DARK FIX + TIMELINE PUBLICA + STRIP MANUAL
   ========================================================= */

/* Faixa manual de mini quebra-cabeças importada como asset. */
.topbar-main.topbar-stacked .tea-puzzle-strip,
.visitor-system-header .tea-puzzle-strip,
.tea-puzzle-strip {
  background-image: url('branding/puzzle-strip-mini.svg') !important;
  background-repeat: repeat-x !important;
  background-position: left center !important;
  background-size: auto 100% !important;
}
.topbar-main.topbar-stacked .tea-puzzle-strip img,
.visitor-system-header .tea-puzzle-strip img,
.tea-puzzle-strip img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

/* Login: o fundo sempre permanece visível; o card se adapta ao tema. */
html[data-theme="dark"] body.login-page-clean {
  background-color: #0d1822 !important;
  background-image:
    linear-gradient(135deg, rgba(5, 18, 28, .58), rgba(12, 64, 81, .38)),
    var(--tea-login-background-image) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  color: #eef6f8 !important;
}
html[data-theme="dark"] .login-clean-card {
  background: rgba(16, 31, 43, .86) !important;
  border-color: rgba(173, 201, 214, .28) !important;
  box-shadow: 0 24px 60px rgba(2, 12, 19, .38) !important;
}
html[data-theme="dark"] .login-clean-brand {
  border-bottom-color: rgba(173, 201, 214, .16) !important;
}
html[data-theme="dark"] .login-clean-brand strong,
html[data-theme="dark"] .login-clean-card .login-card-heading h1,
html[data-theme="dark"] .login-clean-card .login-form label,
html[data-theme="dark"] .login-password-help strong,
html[data-theme="dark"] .login-clean-back {
  color: #f3f8fa !important;
}
html[data-theme="dark"] .login-clean-brand span,
html[data-theme="dark"] .login-clean-card .login-card-heading p,
html[data-theme="dark"] .login-password-help,
html[data-theme="dark"] .login-disclaimer {
  color: #bed0d8 !important;
}
html[data-theme="dark"] .login-clean-card .login-form input {
  background: rgba(11, 24, 34, .86) !important;
  color: #eff7fa !important;
  border-color: rgba(173, 201, 214, .24) !important;
}
html[data-theme="dark"] .login-clean-card .login-form input::placeholder {
  color: #8eabb9 !important;
}
html[data-theme="dark"] .login-password-help {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(173, 201, 214, .16) !important;
}
html[data-theme="dark"] .theme-toggle-login {
  background: rgba(12, 26, 37, .72) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: #eff6f9 !important;
}

/* Timeline pública no portal do cidadão. */
.visitor-status-page { padding: 20px 0 8px; }
.visitor-status-badge .tag,
.visitor-status-badge .status-badge,
.visitor-status-badge .badge { white-space: nowrap; }
.status-step-date {
  margin-top: 8px !important;
  color: var(--color-primary-strong) !important;
  font-weight: 700 !important;
}
.visitor-status-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-start;
}
.visitor-status-actions a.primary {
  min-width: 150px;
}
html[data-theme="dark"] .visitor-status-main,
html[data-theme="dark"] .visitor-status-aside {
  background: rgba(23, 38, 49, .94) !important;
  border-color: rgba(147, 182, 198, .18) !important;
  color: #edf5f8 !important;
}
html[data-theme="dark"] .visitor-status-page .status-header h2,
html[data-theme="dark"] .visitor-status-aside h3,
html[data-theme="dark"] .visitor-status-topline strong,
html[data-theme="dark"] .visitor-status-aside .status-box strong,
html[data-theme="dark"] .status-step-content strong,
html[data-theme="dark"] .visitor-kicker {
  color: #f3f8fa !important;
}
html[data-theme="dark"] .visitor-status-page .status-header p,
html[data-theme="dark"] .visitor-status-topline span,
html[data-theme="dark"] .visitor-status-aside .status-box span,
html[data-theme="dark"] .status-step-content span {
  color: #b9cbd4 !important;
}
html[data-theme="dark"] .visitor-status-topline > div,
html[data-theme="dark"] .visitor-status-aside .status-box {
  background: rgba(29, 47, 60, .96) !important;
  border-color: rgba(147, 182, 198, .18) !important;
}
html[data-theme="dark"] .status-step:not(:last-child)::before {
  background: rgba(147, 182, 198, .28) !important;
}
html[data-theme="dark"] .status-step.done:not(:last-child)::before {
  background: #4ea978 !important;
}
html[data-theme="dark"] .status-step-marker {
  background: #213846 !important;
  border-color: rgba(147, 182, 198, .22) !important;
  color: #d6e6ec !important;
}
html[data-theme="dark"] .status-step.done .status-step-marker {
  background: #173b2d !important;
  border-color: #4ea978 !important;
  color: #dff4e7 !important;
}
html[data-theme="dark"] .status-step.current .status-step-marker {
  background: #2c6bd9 !important;
  border-color: #2c6bd9 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(44,107,217,.16) !important;
}
html[data-theme="dark"] .status-step.current .status-step-content strong,
html[data-theme="dark"] .status-step-date {
  color: #8ab9ff !important;
}

@media (max-width: 920px) {
  .visitor-status-layout {
    grid-template-columns: 1fr;
  }
  .visitor-status-topline {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   V7 · POLIMENTO FINAL DE ESTÉTICA / DARK MODE / LOGIN
   ========================================================= */

/* Faixa RGB simples e elegante no lugar da listra de quebra-cabeças. */
.topbar-main.topbar-stacked .tea-puzzle-strip,
.visitor-system-header .tea-puzzle-strip,
.tea-puzzle-strip {
  position: relative !important;
  height: 4px !important;
  min-height: 4px !important;
  max-height: 4px !important;
  background:
    linear-gradient(90deg,
      #58a6ff 0%, #58a6ff 14%,
      #67c7a7 14%, #67c7a7 28%,
      #a47ddd 28%, #a47ddd 42%,
      #f0a14d 42%, #f0a14d 58%,
      #e5718c 58%, #e5718c 74%,
      #e7c24a 74%, #e7c24a 88%,
      #58a6ff 88%, #58a6ff 100%) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 4px 12px rgba(10, 44, 59, .14) !important;
}
.topbar-main.topbar-stacked .tea-puzzle-strip img,
.visitor-system-header .tea-puzzle-strip img,
.tea-puzzle-strip img,
.tea-puzzle-strip::after {
  display: none !important;
  content: none !important;
}

/* Indicador Online sem sobreposição da bolinha. */
.topbar-stacked .topbar-status,
.topbar-main.topbar-stacked .topbar-status {
  position: relative !important;
  min-width: 88px !important;
  padding: 7px 14px 7px 29px !important;
  justify-content: flex-start !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  background: rgba(66, 167, 95, .15) !important;
  border: 1px solid rgba(120, 225, 145, .28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
}
.topbar-stacked .topbar-status::before,
.topbar-main.topbar-stacked .topbar-status::before {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 9px !important;
  height: 9px !important;
  margin: 0 !important;
}

/* Tema escuro global mais consistente. */
html[data-theme="dark"] body,
html[data-theme="dark"] .app-main,
html[data-theme="dark"] .visitor-main,
html[data-theme="dark"] .visitor-body {
  background:
    linear-gradient(90deg, rgba(6,22,32,.98), rgba(7,28,40,.98)) !important;
  color: #e6f0f4 !important;
}
html[data-theme="dark"] .page-title-bar,
html[data-theme="dark"] .card,
html[data-theme="dark"] .visitor-card,
html[data-theme="dark"] .visitor-primary-card,
html[data-theme="dark"] .visitor-help,
html[data-theme="dark"] .visitor-status-main,
html[data-theme="dark"] .visitor-status-aside,
html[data-theme="dark"] .visitor-form-errors,
html[data-theme="dark"] .protocolo-box,
html[data-theme="dark"] .status-box,
html[data-theme="dark"] .visitor-optional-details,
html[data-theme="dark"] .visitor-steps li,
html[data-theme="dark"] .search-panel,
html[data-theme="dark"] .table-wrapper,
html[data-theme="dark"] .data-table-shell,
html[data-theme="dark"] .queue-card,
html[data-theme="dark"] .hero-card,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .agenda-column,
html[data-theme="dark"] .agenda-professional-column,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .box {
  background: linear-gradient(180deg, rgba(20,38,51,.96), rgba(16,31,43,.97)) !important;
  border-color: rgba(130, 169, 188, .20) !important;
  color: #e7f1f5 !important;
}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] .page-title-bar h2,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] label,
html[data-theme="dark"] strong,
html[data-theme="dark"] .visitor-system-nav a,
html[data-theme="dark"] .visitor-system-brand strong,
html[data-theme="dark"] .visitor-team-access,
html[data-theme="dark"] .topbar-user-link,
html[data-theme="dark"] .mobile-dock-label,
html[data-theme="dark"] .mobile-more-identity strong {
  color: #f4f9fb !important;
}
html[data-theme="dark"] p,
html[data-theme="dark"] span,
html[data-theme="dark"] small,
html[data-theme="dark"] .field-help,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .visitor-card p,
html[data-theme="dark"] .page-title-bar small {
  color: #bfd1da !important;
}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .form-select {
  background: #102534 !important;
  color: #edf5f8 !important;
  border-color: rgba(130, 169, 188, .22) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #88a1af !important;
}
html[data-theme="dark"] .visitor-system-header {
  background:
    radial-gradient(circle at 15% 20%, rgba(91, 156, 255, .09), transparent 16%),
    radial-gradient(circle at 84% 20%, rgba(90, 204, 176, .09), transparent 15%),
    linear-gradient(90deg, #0b406d 0%, #0f5772 56%, #167073 100%) !important;
}
html[data-theme="dark"] .visitor-body > .visitor-main::before,
html[data-theme="dark"] .visitor-body > .visitor-main::after,
html[data-theme="dark"] .app-main::before,
html[data-theme="dark"] .app-main::after {
  opacity: .18 !important;
}
html[data-theme="dark"] .visitor-card .btn,
html[data-theme="dark"] .visitor-primary-card .btn,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-ghost {
  color: #edf5f8 !important;
}

/* Menu mobile/tablet: remove barra azul lateral e unifica visual. */
@media (max-width: 1180px) {
  nav.mobile-dock,
  nav.mobile-dock::before,
  nav.mobile-dock::after,
  nav.mobile-dock *::before {
    background-image: none !important;
  }
  nav.mobile-dock {
    background: linear-gradient(90deg, #0d4a68 0%, #146172 55%, #1a7a79 100%) !important;
    border: 1px solid rgba(108, 155, 178, .22) !important;
    box-shadow: 0 18px 36px rgba(3, 24, 37, .26) !important;
    overflow: hidden !important;
  }
  nav.mobile-dock::before,
  nav.mobile-dock::after,
  nav.mobile-dock .mobile-dock-item::before,
  nav.mobile-dock button.mobile-dock-item::before {
    display: none !important;
    content: none !important;
  }
  nav.mobile-dock .mobile-dock-item,
  nav.mobile-dock button.mobile-dock-item {
    border: 0 !important;
    border-left: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background-clip: padding-box !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  nav.mobile-dock .mobile-dock-item:focus,
  nav.mobile-dock .mobile-dock-item:focus-visible,
  nav.mobile-dock button.mobile-dock-item:focus,
  nav.mobile-dock button.mobile-dock-item:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }
  nav.mobile-dock .mobile-dock-item.is-active {
    background: linear-gradient(180deg, #ffffff 0%, #f3f8fa 100%) !important;
    color: #124862 !important;
    box-shadow: 0 10px 24px rgba(3, 31, 46, .16) !important;
  }

  .topbar-main.topbar-stacked .topbar-account {
    gap: 7px !important;
  }
  .topbar-main.topbar-stacked .topbar-status {
    min-width: 40px !important;
    padding: 0 !important;
    width: 40px !important;
    height: 40px !important;
    justify-content: center !important;
    font-size: 0 !important;
    border-radius: 14px !important;
  }
  .topbar-main.topbar-stacked .topbar-status::before {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 12px !important;
    height: 12px !important;
    box-shadow: 0 0 0 4px rgba(101,229,110,.12), 0 0 14px rgba(101,229,110,.65) !important;
  }
  .topbar-main.topbar-stacked .logout-form button,
  .visitor-system-actions .visitor-team-access,
  .visitor-system-actions .theme-toggle {
    min-height: 40px !important;
    border-radius: 14px !important;
  }
}

/* Login com entrada mais polida estilo splash do CapyChat. */
.login-showcase-shell {
  position: relative !important;
  min-height: 100vh !important;
  display: grid !important;
  place-items: center !important;
  padding: 48px 18px 72px !important;
  overflow: hidden !important;
}
.login-intro-heart {
  position: absolute !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 1 !important;
  animation: loginHeartIntro 1.05s cubic-bezier(.2,.84,.28,1) both !important;
}
.login-intro-heart img {
  width: 108px !important;
  height: auto !important;
  display: block !important;
  filter: drop-shadow(0 10px 28px rgba(17, 82, 110, .18)) !important;
}
.login-animated-card {
  position: relative !important;
  margin-top: 86px !important;
  padding-top: 88px !important;
  overflow: visible !important;
  animation: loginCardReveal .55s ease .35s both !important;
}
.login-clean-card .login-badge-top {
  position: absolute !important;
  left: 50% !important;
  top: -34px !important;
  transform: translateX(-50%) !important;
  z-index: 3 !important;
}
.login-clean-card .login-badge-top img {
  width: 76px !important;
  height: auto !important;
  display: block !important;
  filter: drop-shadow(0 10px 24px rgba(15, 72, 96, .16)) !important;
}
.login-reveal {
  opacity: 0 !important;
  transform: translateY(14px) !important;
  animation: loginContentReveal .45s ease forwards !important;
}
.login-reveal.delay-1 { animation-delay: .60s !important; }
.login-reveal.delay-2 { animation-delay: .72s !important; }
.login-reveal.delay-3 { animation-delay: .84s !important; }
.login-reveal.delay-4 { animation-delay: .96s !important; }
.login-reveal.delay-5 { animation-delay: 1.08s !important; }
.theme-toggle-login {
  top: 16px !important;
  left: 16px !important;
  right: auto !important;
  z-index: 12 !important;
}
html[data-theme="dark"] .theme-toggle-login {
  background: rgba(14, 31, 43, .76) !important;
  color: #eff6f9 !important;
}
html[data-theme="dark"] .login-clean-back {
  color: #f1f7fa !important;
  background: rgba(14, 31, 43, .52) !important;
  border-color: rgba(173, 201, 214, .20) !important;
}
@keyframes loginHeartIntro {
  0% { opacity: 0; transform: translateX(-50%) scale(.58); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.14); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}
@keyframes loginCardReveal {
  0% { opacity: 0; transform: translateY(22px) scale(.985); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes loginContentReveal {
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .login-intro-heart,
  .login-animated-card,
  .login-reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Correções finas no tema escuro do login. */
html[data-theme="dark"] body.login-page-clean {
  background-color: #0d1822 !important;
  background-image:
    linear-gradient(135deg, rgba(8, 21, 32, .38), rgba(11, 40, 53, .16)),
    var(--tea-login-background-image) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: #eef6f8 !important;
}
html[data-theme="dark"] .login-clean-card {
  background: rgba(14, 29, 40, .82) !important;
  border-color: rgba(173, 201, 214, .26) !important;
  backdrop-filter: blur(18px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
}
html[data-theme="dark"] .login-clean-brand span,
html[data-theme="dark"] .login-card-heading p,
html[data-theme="dark"] .login-password-help,
html[data-theme="dark"] .login-disclaimer {
  color: #c8d8de !important;
}
html[data-theme="dark"] .login-password-help {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(173, 201, 214, .15) !important;
}

/* =========================================================
   V7.1 HOTFIX · LOGIN NUNCA PODE FICAR SEM CONTEÚDO
   ========================================================= */
.login-reveal,
.login-reveal.delay-1,
.login-reveal.delay-2,
.login-reveal.delay-3,
.login-reveal.delay-4,
.login-reveal.delay-5 {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* A animação fica restrita ao símbolo inicial e ao card completo. */
.login-intro-heart {
  animation: teaLoginHeartSplash .82s cubic-bezier(.2,.82,.28,1) both !important;
}
.login-animated-card {
  opacity: 1 !important;
  transform: none !important;
  animation: teaLoginCardEnter .52s cubic-bezier(.22,.75,.25,1) .26s both !important;
}
.login-clean-card .login-badge-top {
  animation: teaLoginBadgeSettle .55s cubic-bezier(.2,.82,.25,1) .46s both !important;
}
@keyframes teaLoginHeartSplash {
  0% { opacity: 0; transform: translateX(-50%) scale(.62); }
  42% { opacity: 1; transform: translateX(-50%) scale(1.16); }
  72% { opacity: .92; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(.88); }
}
@keyframes teaLoginCardEnter {
  0% { opacity: 0; transform: translateY(18px) scale(.99); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes teaLoginBadgeSettle {
  0% { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(.82); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .login-intro-heart { display: none !important; }
  .login-animated-card,
  .login-clean-card .login-badge-top {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .login-clean-card .login-badge-top { transform: translateX(-50%) !important; }
}

/* =========================================================
   V8 · DARK MODE UNIFICADO + HEARTBEAT LOGIN
   ========================================================= */

/* Login: vidro sobre o fundo, coração projetado e batimento curto. */
body.login-page-clean::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(135deg, rgba(239,248,250,.12), rgba(210,232,239,.08)) !important;
  backdrop-filter: blur(5px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(5px) saturate(112%) !important;
}
.login-showcase-shell { position: relative !important; z-index: 1 !important; }
.login-animated-card {
  margin-top: 34px !important;
  padding-top: 76px !important;
  background: rgba(246, 250, 252, .86) !important;
  border: 1px solid rgba(255,255,255,.70) !important;
  box-shadow: 0 28px 70px rgba(20, 65, 84, .18) !important;
  backdrop-filter: blur(18px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
}
.login-clean-card .login-badge-top {
  top: -48px !important;
}
.login-clean-card .login-badge-top img {
  width: 100px !important;
  filter: drop-shadow(0 14px 28px rgba(20,71,92,.20)) !important;
  animation: teaLoginHeartbeat 1.35s ease-in-out .18s 3 both !important;
  transform-origin: center center !important;
}
.theme-toggle-login {
  left: auto !important;
  right: 18px !important;
  top: 18px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.28) !important;
  border: 1px solid rgba(255,255,255,.46) !important;
  box-shadow: 0 10px 28px rgba(9,52,72,.14) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
@keyframes teaLoginHeartbeat {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.09); }
  22% { transform: scale(.98); }
  34% { transform: scale(1.13); }
  48% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .login-clean-card .login-badge-top img { animation: none !important; }
}
html[data-theme="dark"] body.login-page-clean::before {
  background: linear-gradient(135deg, rgba(2,13,21,.34), rgba(7,34,46,.26)) !important;
  backdrop-filter: blur(6px) saturate(110%) brightness(.76) !important;
  -webkit-backdrop-filter: blur(6px) saturate(110%) brightness(.76) !important;
}
html[data-theme="dark"] .login-animated-card {
  background: rgba(13, 29, 40, .84) !important;
  border-color: rgba(180,205,217,.22) !important;
}

/* Dark mode: superfícies, cabeçalhos e componentes usam a mesma família. */
html[data-theme="dark"] {
  --tea-dark-bg: #091722;
  --tea-dark-surface: #102633;
  --tea-dark-surface-2: #142d3b;
  --tea-dark-surface-3: #193644;
  --tea-dark-border: rgba(139,177,196,.20);
  --tea-dark-text: #edf5f8;
  --tea-dark-muted: #a9bec9;
}
html[data-theme="dark"] body:not(.login-page-clean),
html[data-theme="dark"] .app-main,
html[data-theme="dark"] .visitor-main,
html[data-theme="dark"] .visitor-body,
html[data-theme="dark"] .visitor-shell,
html[data-theme="dark"] .visitor-main-content,
html[data-theme="dark"] .visitante-page {
  background: var(--tea-dark-bg) !important;
  color: var(--tea-dark-text) !important;
}
html[data-theme="dark"] .page-title-bar,
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .box,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .visitor-card,
html[data-theme="dark"] .visitor-primary-card,
html[data-theme="dark"] .visitor-help,
html[data-theme="dark"] .visitor-status-main,
html[data-theme="dark"] .visitor-status-aside,
html[data-theme="dark"] .visitor-optional-details,
html[data-theme="dark"] .search-panel,
html[data-theme="dark"] .table-wrapper,
html[data-theme="dark"] .data-table-shell,
html[data-theme="dark"] .report-table-card,
html[data-theme="dark"] .report-summary-card,
html[data-theme="dark"] .admin-info-banner,
html[data-theme="dark"] .agenda-column,
html[data-theme="dark"] .agenda-slots,
html[data-theme="dark"] .agenda-slot,
html[data-theme="dark"] .agenda-column-footer,
html[data-theme="dark"] .patient-record-section,
html[data-theme="dark"] .patient-record-hero,
html[data-theme="dark"] .patient-detail-card,
html[data-theme="dark"] .patient-related-card {
  background: var(--tea-dark-surface) !important;
  color: var(--tea-dark-text) !important;
  border-color: var(--tea-dark-border) !important;
}
html[data-theme="dark"] .agenda-column-header,
html[data-theme="dark"] .agenda-column.nao-atende .agenda-column-header,
html[data-theme="dark"] .agenda-column.nao-atende,
html[data-theme="dark"] .agenda-slot.nao-atende-slot,
html[data-theme="dark"] .agenda-slot.past {
  background: var(--tea-dark-surface-2) !important;
  border-color: var(--tea-dark-border) !important;
  opacity: 1 !important;
}
html[data-theme="dark"] .agenda-column-header h3,
html[data-theme="dark"] .agenda-column.nao-atende .agenda-column-header h3,
html[data-theme="dark"] .agenda-specialty,
html[data-theme="dark"] .agenda-slot.nao-atende-slot p,
html[data-theme="dark"] .slot-time,
html[data-theme="dark"] .slot-name,
html[data-theme="dark"] .slot-free {
  color: var(--tea-dark-text) !important;
}
html[data-theme="dark"] .agenda-slot.nao-atende-slot p:last-child,
html[data-theme="dark"] .agenda-specialty {
  color: var(--tea-dark-muted) !important;
}
html[data-theme="dark"] .agenda-slot:hover {
  background: var(--tea-dark-surface-3) !important;
  border-color: rgba(104,166,255,.38) !important;
}
html[data-theme="dark"] .agenda-slot.free { background: #13372d !important; border-color: rgba(86,176,130,.30) !important; }
html[data-theme="dark"] .agenda-slot.occupied { background: #162f4c !important; border-color: rgba(87,142,210,.32) !important; }
html[data-theme="dark"] .agenda-slot.cancelled { background: #43222b !important; border-color: rgba(215,103,126,.28) !important; }
html[data-theme="dark"] .nao-atende-header .nao-atende-badge {
  background: #4a292d !important;
  color: #ffadb6 !important;
}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .search-form input {
  background: #0c202c !important;
  color: var(--tea-dark-text) !important;
  border-color: var(--tea-dark-border) !important;
}
html[data-theme="dark"] table,
html[data-theme="dark"] .table,
html[data-theme="dark"] .tabela { background: transparent !important; color: var(--tea-dark-text) !important; }
html[data-theme="dark"] thead,
html[data-theme="dark"] th { background: #183546 !important; color: #eff7fa !important; }
html[data-theme="dark"] tbody,
html[data-theme="dark"] tr,
html[data-theme="dark"] td { background: transparent !important; color: #dbe8ed !important; border-color: var(--tea-dark-border) !important; }
html[data-theme="dark"] tbody tr:nth-child(even) td { background: rgba(255,255,255,.018) !important; }
html[data-theme="dark"] tbody tr:hover td { background: rgba(91,156,255,.07) !important; }
html[data-theme="dark"] .visitor-steps > div,
html[data-theme="dark"] .visitor-steps li,
html[data-theme="dark"] .status-box,
html[data-theme="dark"] .visitor-status-topline > div,
html[data-theme="dark"] .protocolo-box {
  background: var(--tea-dark-surface-2) !important;
  color: var(--tea-dark-text) !important;
  border-color: var(--tea-dark-border) !important;
}
html[data-theme="dark"] .visitor-optional-details {
  background: #132b38 !important;
}
html[data-theme="dark"] .visitor-kicker,
html[data-theme="dark"] .visitor-number,
html[data-theme="dark"] .status-step-date { color: #8dbbff !important; }
html[data-theme="dark"] .page-title-bar h2,
html[data-theme="dark"] .card-header h3,
html[data-theme="dark"] .visitor-card-head h2,
html[data-theme="dark"] .visitor-card-head h3,
html[data-theme="dark"] .visitor-primary-card h2,
html[data-theme="dark"] .visitor-help h2,
html[data-theme="dark"] .visitor-status-page h2,
html[data-theme="dark"] .visitor-status-aside h3 {
  color: #f3f8fa !important;
}
html[data-theme="dark"] .page-title-bar small,
html[data-theme="dark"] .field-help,
html[data-theme="dark"] .visitor-card-head p,
html[data-theme="dark"] .visitor-primary-card p,
html[data-theme="dark"] .visitor-help p,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .muted {
  color: var(--tea-dark-muted) !important;
}

/* Menu em dark continua com identidade e contraste, não “some” no fundo. */
html[data-theme="dark"] .topbar-main.topbar-stacked,
html[data-theme="dark"] .visitor-system-header {
  background: linear-gradient(90deg, #0a3f6c 0%, #0d5570 54%, #126f72 100%) !important;
  border-bottom-color: rgba(255,255,255,.10) !important;
}
html[data-theme="dark"] .topbar-stacked .topbar-nav-stacked {
  background: rgba(2,25,38,.24) !important;
}
html[data-theme="dark"] .topbar-stacked .topbar-nav-stacked a:not(.ativo) { color:#f0f7f9 !important; }
html[data-theme="dark"] .topbar-stacked .topbar-nav-stacked a.ativo { color:#143f58 !important; background:#f5f9fa !important; }

/* Online em desktop/tablet/celular mantém texto e ponto separados. */
.topbar-main.topbar-stacked .topbar-status {
  width: auto !important;
  min-width: 84px !important;
  height: 38px !important;
  font-size: 12px !important;
  padding: 7px 13px 7px 29px !important;
  border-radius: 999px !important;
}
.topbar-main.topbar-stacked .topbar-status::before {
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 9px !important;
  height: 9px !important;
}
@media (max-width:720px) {
  .topbar-main.topbar-stacked .topbar-status {
    min-width: 32px !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    font-size: 0 !important;
    border-radius: 12px !important;
  }
  .topbar-main.topbar-stacked .topbar-status::before {
    left: 50% !important;
    transform: translate(-50%,-50%) !important;
    width: 10px !important;
    height: 10px !important;
  }
}


/* =========================================================
   V9 · PERFORMANCE PERCEBIDA / NAVEGAÇÃO
   ========================================================= */

/* Transição progressiva entre documentos, quando o navegador oferece suporte. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: teaPageOut 90ms ease both; }
::view-transition-new(root) { animation: teaPageIn 135ms ease both; }
@keyframes teaPageOut { to { opacity: .94; } }
@keyframes teaPageIn { from { opacity: .96; transform: translateY(2px); } to { opacity: 1; transform: none; } }

/* Não escondemos cards/linhas aguardando IntersectionObserver ou timers. */
.tea-enter-soft { animation: teaElementIn 125ms ease-out both; }
.tea-row-ready { opacity: 1 !important; transform: none !important; }
@keyframes teaElementIn { from { opacity: .975; transform: translateY(2px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root), .tea-enter-soft { animation: none !important; }
}

/* =========================================================
   V10 · ESTABILIZAÇÃO VISUAL / DARK / MOBILE / PERFORMANCE
   ========================================================= */

/* Feedback de navegação imediato, sem atrasar a troca de página. */
.tea-nav-progress {
  position: fixed;
  z-index: 10050;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg,#58a6ff,#67c7a7,#a47ddd,#f0a14d,#e5718c,#e7c24a);
  box-shadow: 0 0 12px rgba(88,166,255,.35);
}
body.tea-navigating .tea-nav-progress {
  opacity: 1;
  animation: teaNavLoading 1.25s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes teaNavLoading {
  0% { width: 5%; }
  35% { width: 48%; }
  72% { width: 74%; }
  100% { width: 88%; }
}
.app-main,
.visitor-main {
  animation: teaMainEnter 115ms ease-out both;
}
@keyframes teaMainEnter {
  from { opacity: .985; transform: translateY(2px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .app-main,.visitor-main,.tea-nav-progress { animation:none !important; }
}

/* ---------------------------------------------------------
   LOGIN: vidro real + botão de tema legível e previsível
   --------------------------------------------------------- */
body.login-page-clean {
  position: relative !important;
  isolation: isolate;
  background-color: #dcebf0 !important;
  background-image: var(--tea-login-background-image) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}
body.login-page-clean::before {
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:-1 !important;
  pointer-events:none !important;
  background: rgba(232,244,248,.16) !important;
  backdrop-filter: blur(8px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(112%) !important;
}
body.login-page-clean::after {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background: radial-gradient(circle at 50% 34%, rgba(255,255,255,.20), transparent 36%), linear-gradient(135deg, rgba(15,75,101,.10), rgba(255,255,255,.06));
}
.login-animated-card {
  background: rgba(248,252,253,.82) !important;
  border: 1px solid rgba(255,255,255,.74) !important;
  box-shadow: 0 28px 72px rgba(11,53,72,.22) !important;
  backdrop-filter: blur(22px) saturate(132%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(132%) !important;
}
.theme-toggle-login {
  position: fixed !important;
  top: 18px !important;
  right: 18px !important;
  left: auto !important;
  z-index: 100 !important;
  width: auto !important;
  min-width: 126px !important;
  height: 44px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: 14px !important;
  color: #f7fbfc !important;
  background: rgba(9,61,81,.68) !important;
  border: 1px solid rgba(255,255,255,.32) !important;
  box-shadow: 0 10px 28px rgba(5,39,55,.18) !important;
  backdrop-filter: blur(14px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
}
.theme-toggle-login:hover {
  background: rgba(9,61,81,.80) !important;
  transform: translateY(-1px);
}
.theme-toggle-login-label {
  color: inherit !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap;
}
html[data-theme="dark"] body.login-page-clean::before {
  background: rgba(2,16,25,.24) !important;
  backdrop-filter: blur(9px) saturate(108%) brightness(.72) !important;
  -webkit-backdrop-filter: blur(9px) saturate(108%) brightness(.72) !important;
}
html[data-theme="dark"] body.login-page-clean::after {
  background: radial-gradient(circle at 50% 34%, rgba(38,104,126,.12), transparent 38%), linear-gradient(135deg, rgba(2,14,23,.30), rgba(4,32,43,.16)) !important;
}
html[data-theme="dark"] .login-animated-card {
  background: rgba(15,31,42,.84) !important;
  border-color: rgba(169,201,215,.24) !important;
}
html[data-theme="dark"] .theme-toggle-login {
  color:#f4f9fb !important;
  background: rgba(13,34,46,.78) !important;
  border-color: rgba(190,216,226,.23) !important;
}
@media (max-width: 560px) {
  .theme-toggle-login { min-width:44px !important; width:44px !important; padding:0 !important; border-radius:14px !important; }
  .theme-toggle-login-label { display:none !important; }
}

/* ---------------------------------------------------------
   DARK MODE: superfícies e botões sem blocos brancos perdidos
   --------------------------------------------------------- */
html[data-theme="dark"] {
  --v10-bg: #081720;
  --v10-surface: #102632;
  --v10-surface-2: #142e3b;
  --v10-surface-3: #193846;
  --v10-border: rgba(145,181,198,.21);
  --v10-text: #eef6f8;
  --v10-muted: #abc0ca;
}
html[data-theme="dark"] body:not(.login-page-clean),
html[data-theme="dark"] .app-main,
html[data-theme="dark"] .visitor-main,
html[data-theme="dark"] .visitor-shell,
html[data-theme="dark"] .visitor-main-content {
  background-color: var(--v10-bg) !important;
  color: var(--v10-text) !important;
}
html[data-theme="dark"] .modal,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .page-title-bar,
html[data-theme="dark"] .schedule-picker,
html[data-theme="dark"] .schedule-picker-shell,
html[data-theme="dark"] .schedule-interval-row,
html[data-theme="dark"] .origin-multi,
html[data-theme="dark"] .origin-options,
html[data-theme="dark"] .admin-info-banner,
html[data-theme="dark"] .patient-record-section,
html[data-theme="dark"] .patient-detail-card,
html[data-theme="dark"] .report-filter-card,
html[data-theme="dark"] .report-table-card {
  background: var(--v10-surface) !important;
  color: var(--v10-text) !important;
  border-color: var(--v10-border) !important;
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .schedule-interval-row,
html[data-theme="dark"] .password-reset-intro,
html[data-theme="dark"] .triage-approval-intro {
  background: var(--v10-surface-2) !important;
  border-color: var(--v10-border) !important;
}
html[data-theme="dark"] .password-reset-intro strong,
html[data-theme="dark"] .password-reset-intro p,
html[data-theme="dark"] .triage-approval-intro strong,
html[data-theme="dark"] .triage-approval-intro p,
html[data-theme="dark"] .modal-title,
html[data-theme="dark"] .modal label {
  color: var(--v10-text) !important;
}
html[data-theme="dark"] .password-reset-intro p,
html[data-theme="dark"] .triage-approval-intro p,
html[data-theme="dark"] .field-help {
  color: var(--v10-muted) !important;
}
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] a.btn-secondary,
html[data-theme="dark"] button.btn-secondary,
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .mobile-more-theme {
  background: #173342 !important;
  color: #edf6f9 !important;
  border-color: rgba(148,185,201,.28) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-outline:hover,
html[data-theme="dark"] .mobile-more-theme:hover {
  background: #1d4050 !important;
  color:#fff !important;
  border-color: rgba(126,177,201,.44) !important;
}
html[data-theme="dark"] .btn-ghost {
  background: transparent !important;
  color: #cfe0e7 !important;
  border-color: transparent !important;
}
html[data-theme="dark"] .btn-ghost:hover {
  background: rgba(105,166,195,.12) !important;
  color:#fff !important;
}
html[data-theme="dark"] .modal-close,
html[data-theme="dark"] .flash-close,
html[data-theme="dark"] .mobile-more-close {
  color:#edf6f9 !important;
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(165,196,210,.18) !important;
}
html[data-theme="dark"] .modal select,
html[data-theme="dark"] .modal input,
html[data-theme="dark"] .modal textarea {
  background:#0b202c !important;
  color:#eef6f8 !important;
  border-color:var(--v10-border) !important;
}
html[data-theme="dark"] .agenda-column,
html[data-theme="dark"] .agenda-column-header,
html[data-theme="dark"] .agenda-slots,
html[data-theme="dark"] .agenda-slot,
html[data-theme="dark"] .agenda-column.nao-atende,
html[data-theme="dark"] .agenda-column.nao-atende .agenda-column-header,
html[data-theme="dark"] .agenda-slot.nao-atende-slot {
  background: var(--v10-surface) !important;
  color: var(--v10-text) !important;
  border-color: var(--v10-border) !important;
  opacity: 1 !important;
}
html[data-theme="dark"] .agenda-column-header,
html[data-theme="dark"] .agenda-column.nao-atende .agenda-column-header {
  background: var(--v10-surface-2) !important;
}
html[data-theme="dark"] .agenda-column-header h3,
html[data-theme="dark"] .agenda-specialty,
html[data-theme="dark"] .agenda-slot p,
html[data-theme="dark"] .agenda-slot strong {
  color: var(--v10-text) !important;
}
html[data-theme="dark"] .agenda-specialty,
html[data-theme="dark"] .agenda-slot.nao-atende-slot p:last-child { color:var(--v10-muted) !important; }

/* ---------------------------------------------------------
   MOBILE/TABLET: indicador ativo sem artefato azul lateral
   --------------------------------------------------------- */
@media (max-width:1180px) {
  nav.mobile-dock {
    isolation:isolate !important;
    overflow:hidden !important;
    outline:0 !important;
    border-left:1px solid rgba(108,155,178,.22) !important;
  }
  nav.mobile-dock::before,
  nav.mobile-dock::after,
  nav.mobile-dock .mobile-dock-item::before,
  nav.mobile-dock .mobile-dock-item::after,
  nav.mobile-dock button.mobile-dock-item::before,
  nav.mobile-dock button.mobile-dock-item::after {
    content:none !important;
    display:none !important;
    width:0 !important;
    height:0 !important;
    border:0 !important;
    box-shadow:none !important;
  }
  nav.mobile-dock .mobile-dock-item,
  nav.mobile-dock button.mobile-dock-item {
    position:relative !important;
    overflow:hidden !important;
    outline:0 !important;
    border:0 !important;
  }
  nav.mobile-dock .mobile-dock-label {
    position:relative !important;
    display:inline-block !important;
    padding-bottom:7px !important;
    color:inherit !important;
  }
  nav.mobile-dock .mobile-dock-label::after {
    content:"" !important;
    display:block !important;
    position:absolute !important;
    left:50% !important;
    right:auto !important;
    bottom:0 !important;
    width:30px !important;
    height:3px !important;
    transform:translateX(-50%) !important;
    border-radius:999px !important;
    background:var(--dock-accent,#dcecf2) !important;
    box-shadow:none !important;
  }
  nav.mobile-dock .mobile-dock-item.is-active .mobile-dock-label::after { width:40px !important; }
  html[data-theme="dark"] nav.mobile-dock {
    background:linear-gradient(90deg,#0b3e58,#105b68 54%,#14706e) !important;
    border-color:rgba(142,184,201,.22) !important;
  }
  html[data-theme="dark"] nav.mobile-dock .mobile-dock-item:not(.is-active) {
    color:#e6f2f5 !important;
  }
  html[data-theme="dark"] nav.mobile-dock .mobile-dock-item.is-active {
    background:#dcecef !important;
    color:#103f57 !important;
    box-shadow:0 8px 20px rgba(0,16,26,.24) !important;
  }
}

/* Header: ponto de presença separado do texto em qualquer largura útil. */
.topbar-main.topbar-stacked .topbar-status {
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:0 !important;
  padding-left:30px !important;
}
.topbar-main.topbar-stacked .topbar-status::before {
  content:"" !important;
  position:absolute !important;
  left:12px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  margin:0 !important;
}
@media (max-width:720px) {
  .topbar-main.topbar-stacked .topbar-status { padding:0 !important; justify-content:center !important; }
  .topbar-main.topbar-stacked .topbar-status::before { left:50% !important; transform:translate(-50%,-50%) !important; }
}

/* Heartbeat curto: duas batidas e depois símbolo totalmente estático. */
.login-clean-card .login-badge-top img {
  animation: teaLoginHeartbeat 1.05s ease-in-out .18s 2 both !important;
}

/* V11 final: prevalece sobre os patches históricos do dock. */
@media (max-width:1180px) {
  body { padding-bottom:calc(92px + env(safe-area-inset-bottom, 0px)) !important; }
  body.mobile-sheet-open { overflow:hidden !important; }
  nav.mobile-dock {
    display:grid !important;
    grid-template-columns:none !important;
    grid-auto-flow:column !important;
    grid-auto-columns:minmax(0, 1fr) !important;
    align-items:stretch !important;
    position:fixed !important;
    z-index:170 !important;
    left:max(10px, env(safe-area-inset-left, 0px)) !important;
    right:max(10px, env(safe-area-inset-right, 0px)) !important;
    bottom:max(8px, env(safe-area-inset-bottom, 0px)) !important;
    width:auto !important;
    height:74px !important;
    min-height:74px !important;
    padding:6px !important;
    margin:0 !important;
    border:1px solid rgba(108,155,178,.28) !important;
    border-radius:26px !important;
    overflow:hidden !important;
  }
  nav.mobile-dock .mobile-dock-item,
  nav.mobile-dock button.mobile-dock-item {
    appearance:none !important;
    -webkit-appearance:none !important;
    -moz-appearance:none !important;
    display:flex !important;
    min-width:0 !important;
    min-height:62px !important;
    padding:7px 4px 5px !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:3px !important;
    border-radius:20px !important;
    border:0 !important;
    border-inline:0 !important;
    outline:0 !important;
    -webkit-tap-highlight-color:transparent !important;
  }
  nav.mobile-dock::before,
  nav.mobile-dock::after,
  nav.mobile-dock .mobile-dock-item::before,
  nav.mobile-dock button.mobile-dock-item::before { content:none !important; display:none !important; }
  nav.mobile-dock .mobile-dock-item:focus,
  nav.mobile-dock .mobile-dock-item:focus-visible,
  nav.mobile-dock button.mobile-dock-item:focus,
  nav.mobile-dock button.mobile-dock-item:focus-visible { outline:0 !important; border:0 !important; }
  nav.mobile-dock .mobile-dock-icon { width:24px !important; height:24px !important; flex:0 0 24px !important; opacity:1 !important; }
  nav.mobile-dock .mobile-dock-icon svg { width:24px !important; height:24px !important; opacity:1 !important; stroke:currentColor !important; stroke-width:2.25 !important; }
  nav.mobile-dock .mobile-dock-item.is-active { color:#073e5a !important; }
  nav.mobile-dock .mobile-dock-item.is-active .mobile-dock-icon,
  nav.mobile-dock .mobile-dock-item.is-active .mobile-dock-icon svg { color:#07527a !important; stroke:#07527a !important; opacity:1 !important; }
  nav.mobile-dock .mobile-dock-item.is-active .mobile-dock-label { color:#073e5a !important; opacity:1 !important; }
  nav.mobile-dock .mobile-dock-label { max-width:100% !important; padding-bottom:5px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
  nav.mobile-dock .mobile-dock-more.is-current:not(.is-active) .mobile-dock-label::after { width:40px !important; }
  nav.mobile-dock .mobile-dock-more.is-current:not(.is-active) { color:inherit !important; }
  .mobile-more-sheet { z-index:180 !important; }
  .mobile-more-sheet.is-open:not([hidden]) { display:flex !important; align-items:flex-end !important; padding:12px 10px calc(94px + env(safe-area-inset-bottom, 0px)) !important; }
  .mobile-more-sheet-card { width:min(100%, 560px) !important; max-height:min(72vh, 620px) !important; overflow:auto !important; overscroll-behavior:contain !important; }
}

@media (max-width:420px) {
  nav.mobile-dock { left:6px !important; right:6px !important; border-radius:22px !important; }
  nav.mobile-dock .mobile-dock-item,
  nav.mobile-dock button.mobile-dock-item { padding-inline:2px !important; }
  nav.mobile-dock .mobile-dock-label { font-size:11px !important; }
}