/* ============================================================
   NeuroApps — Design System
   Bittar Neurociência
   Versão: 1.1
   Fonte da verdade para todo CSS do projeto.
   NUNCA usar valores hardcoded de cor, fonte ou espaçamento.

   TIPOGRAFIA — regras absolutas:
   • Archivo  → títulos/headings APENAS. Máximo weight 500.
                NUNCA usar 600, 700 ou bold em Archivo.
   • Roboto   → corpo, labels, botões, inputs, todo texto UI
   • Work Sans → fallback universal e textos técnicos/mono
   • Whitespace generoso — nunca comprimir espaçamento
   • Tudo minimalista e sofisticado — sem exageros visuais
   ============================================================ */

/* Roboto vai até 600 — peso dos botões na UI Kit oficial (Buttons/Button).
   Archivo segue limitado a 500 (regra de tipografia acima). */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500&family=Roboto:wght@300;400;500;600&family=Work+Sans:wght@300;400;500&display=swap');

/* ── TOKENS ─────────────────────────────────────────────────── */
:root {

  /* Fundos */
  --bg:          #0a0a0a;
  --surface:     #0d0d0d;
  --surface-2:   #111111;
  --surface-3:   #161616;

  /* Bordas */
  --border:      #1e1e1e;
  --border-2:    #2a2a2a;

  /* Acento primário — teal (alinhado à UI Kit oficial da Bittar:
     primário #2BD3C9 = rgb(43,211,201). Antes #00c8b4. 18/06/2026) */
  --teal:        #2bd3c9;
  --teal-dim:    rgba(43, 211, 201, 0.08);
  --teal-mid:    rgba(43, 211, 201, 0.12);
  --teal-glow:   rgba(43, 211, 201, 0.18);
  --teal-50:     rgba(43, 211, 201, 0.14);  /* tint de "selecionado" (chips de filtro) */
  /* Texto sobre fundo teal (botões) — dark-teal da UI Kit, não preto puro */
  --on-teal:     #092a28;

  /* Status */
  --danger:      #ff4757;
  --danger-dim:  rgba(255, 71, 87, 0.08);
  --danger-mid:  rgba(255, 71, 87, 0.15);
  --warn:        #f0a500;
  --warn-dim:    rgba(240, 165, 0, 0.08);
  --warn-mid:    rgba(240, 165, 0, 0.15);
  /* Âmbar p/ números/realces — era usado como var(--amber, #b58400) sem token;
     o fallback #b58400 ficava escuro sobre dark. Definido brilhante p/ legibilidade. */
  --amber:       #f0a500;

  /* Aliases de compatibilidade — nomes usados no JSX SEM fallback (telas de
     revisão usam var(--warning)/var(--muted) p/ scores/status). Sem o token
     a cor não aplicava (herdava). Apontam p/ os tokens canônicos. 19/06/2026. */
  --warning:     var(--warn);
  --muted:       var(--text-3);
  --success:     #2ed573;
  --success-dim: rgba(46, 213, 115, 0.08);
  --success-mid: rgba(46, 213, 115, 0.15);
  --info:        #3d9bff;
  --info-dim:    rgba(61, 155, 255, 0.08);

  /* Texto — escala revista p/ contraste AA no tema dark (19/06/2026).
     Marcos relatou texto/opções "apagados". text-3 era #555 (~2.5:1, REPROVAVA
     AA em labels/placeholders/tabs/headers); text-4 era #333 (~1.5:1). Elevados
     p/ legibilidade com folga (text-3 ~5.4:1, text-2 ~9:1) mantendo a hierarquia. */
  --text:        #ededed;
  --text-2:      #b3b3b3;
  --text-3:      #8c8c8c;
  --text-4:      #767676;

  /* Tipografia — famílias */
  --font-heading: 'Archivo', 'Work Sans', Arial, sans-serif;
  --font-body:    'Roboto', 'Work Sans', Arial, sans-serif;
  --font-fallback:'Work Sans', Arial, sans-serif;
  --font:         'Roboto', 'Work Sans', Arial, sans-serif; /* alias body */

  /* Tipografia — pesos (Archivo: máx 500, NUNCA 600+) */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;

  /* Tipografia — tamanhos */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;

  /* Tipografia — line-heights (whitespace generoso) */
  --lh-tight: 1.2;
  --lh-snug:  1.4;
  --lh-base:  1.6;
  --lh-loose: 1.8;

  /* Tipografia — letter-spacing */
  --ls-tight:   -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-wider:    0.08em;
  --ls-widest:   0.12em;

  /* Base */
  --font-size:   14px;
  --line-height: 1.6;

  /* Espaçamento */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;

  /* Forma */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* Sombras */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow:    0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);

  /* Layout */
  --sidebar-width:     180px;
  --sidebar-collapsed: 60px;
  --topbar-height:     48px;
  --bottom-nav-height: 64px;
  --touch-target:      44px;
}

/* ── RESET ───────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--font-size);
  font-weight: var(--fw-regular);
  line-height: var(--line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Tipografia — headings usam Archivo, NUNCA acima de 500 ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-light);   /* 300 — default heading */
  line-height: var(--lh-tight);
  color: var(--text);
  letter-spacing: var(--ls-tight);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl);  font-weight: var(--fw-regular); }
h4 { font-size: var(--text-lg);  font-weight: var(--fw-regular); }

p { line-height: var(--lh-base); }

/* ── Utilitários tipográficos ── */

/* Headings */
.t-display  { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: var(--fw-light);   letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
.t-title    { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--fw-light);   letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
.t-heading  { font-family: var(--font-heading); font-size: var(--text-xl);  font-weight: var(--fw-regular); letter-spacing: var(--ls-tight); line-height: var(--lh-snug);  }
.t-subhead  { font-family: var(--font-heading); font-size: var(--text-lg);  font-weight: var(--fw-regular); letter-spacing: var(--ls-tight); line-height: var(--lh-snug);  }
/* .t-headline — usado p/ números de métrica (cards) e títulos de seção (h2).
   Estava sem definição (18 arquivos): números saíam como corpo normal. 19/06. */
.t-headline { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--fw-light); color: var(--text); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }

/* Body (Roboto) */
.t-body     { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--fw-regular); line-height: var(--lh-base); }
.t-body-md  { font-family: var(--font-body); font-size: var(--text-md);   font-weight: var(--fw-regular); line-height: var(--lh-base); }
.t-body-sm  { font-family: var(--font-body); font-size: var(--text-sm);   font-weight: var(--fw-regular); line-height: var(--lh-base); }
.t-caption  { font-family: var(--font-body); font-size: var(--text-xs);   font-weight: var(--fw-regular); line-height: var(--lh-snug); color: var(--text-3); }

/* Labels uppercase (Roboto medium) */
.t-label    { font-family: var(--font-body); font-size: var(--text-xs);   font-weight: var(--fw-medium);  text-transform: uppercase; letter-spacing: var(--ls-wider); color: var(--text-3); }
.t-label-sm { font-family: var(--font-body); font-size: 10px;              font-weight: var(--fw-medium);  text-transform: uppercase; letter-spacing: var(--ls-widest); color: var(--text-3); }

/* Peso */
.fw-light   { font-weight: var(--fw-light);   }
.fw-regular { font-weight: var(--fw-regular); }
.fw-medium  { font-weight: var(--fw-medium);  }

/* Cor */
.t-primary  { color: var(--text);   }
.t-secondary{ color: var(--text-2); }
.t-muted    { color: var(--text-3); }
.t-teal     { color: var(--teal);   }
.t-danger   { color: var(--danger); }
.t-warn     { color: var(--warn);   }
.t-success  { color: var(--success);}

img, svg { display: block; max-width: 100%; }
/* color: inherit — sem isto, <button> e .badge usados como botão herdavam a cor
   nativa do browser (preto), saindo escuro-sobre-escuro no tema dark (19/06). */
button, input, select, textarea { font-family: inherit; color: inherit; }
a { color: var(--teal); text-decoration: none; }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }


/* ══════════════════════════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════════════════════════ */

.app-shell {
  display: flex;
  min-height: 100vh;
}

/* ── Topbar ── */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-height);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 var(--space-4);
  gap: var(--space-3);
  z-index: 20;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--text);
}

.topbar-brand-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
}

.topbar-brand em {
  color: var(--teal);
  font-style: normal;
}

.topbar-spacer { flex: 1; }

.topbar-datetime {
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
}

/* Avatar no topbar */
.avatar {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--teal-dim);
  border: 1px solid var(--teal-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--teal);
  flex-shrink: 0;
  cursor: pointer;
}

/* ── Sidebar desktop ── */
.sidebar {
  position: fixed;
  top: var(--topbar-height);
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 15;
  transition: width .25s ease;
}

.sidebar.collapsed { width: var(--sidebar-collapsed); }

.sidebar-section-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--fw-medium);
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  padding: var(--space-5) var(--space-4) var(--space-2);
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-nav { flex: 1; overflow-y: auto; padding: var(--space-2); }

.sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 9px var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  /* 20/06: itens inativos estavam em --text-3 (#8c8c8c) + peso 300 — finos e
     apagados no fundo escuro ("sumiam" até o hover/clique). Subido p/ --text-2
     + peso regular: itens de NAVEGAÇÃO precisam ser legíveis sem hover. */
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  min-height: var(--touch-target);
  margin-bottom: 2px;
}

.sidebar-item:hover {
  background: var(--surface-2);
  color: var(--text-1);
}

.sidebar-item.active {
  background: var(--teal-dim);
  color: var(--teal);
}

.sidebar-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: var(--teal);
  border-radius: 0 3px 3px 0;
}

.sidebar-item i {
  font-size: 17px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.sidebar-item-danger {
  color: var(--danger);
}
.sidebar-item-danger:hover {
  background: var(--danger-dim);
  color: var(--danger);
}

.sidebar-footer {
  padding: var(--space-2);
  border-top: 1px solid var(--border);
}

/* ── Main content ── */
.main-content {
  flex: 1;
  margin-top: var(--topbar-height);
  margin-left: var(--sidebar-width);
  min-width: 0;
  transition: margin-left .25s ease;
}

.main-content.sidebar-collapsed { margin-left: var(--sidebar-collapsed); }

.page-body { padding: var(--space-6) var(--space-6); }

/* ── Mobile drawer ── */
.drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 40;
  opacity: 0;
  transition: opacity .25s;
}

.drawer-backdrop.open { opacity: 1; }

.drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 240px;
  background: var(--surface);
  border-right: 1px solid var(--border-2);
  z-index: 50;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}

.drawer.open { transform: translateX(0); }

/* ── Bottom navigation (mobile) ── */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--bottom-nav-height);
  background: var(--surface);
  border-top: 1px solid var(--border);
  z-index: 30;
  padding: 0 var(--space-2);
  padding-bottom: env(safe-area-inset-bottom);
  justify-content: space-around;
  align-items: center;
}

.bn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: var(--space-1) var(--space-1);
  border-radius: var(--radius-sm);
  cursor: pointer;
  min-height: var(--touch-target);
  transition: background .15s;
  color: var(--text-3);
}

.bn-item.active { color: var(--teal); }
.bn-item i { font-size: 21px; }
.bn-item span { font-size: 9px; font-weight: 600; letter-spacing: .03em; }


/* ══════════════════════════════════════════════════════════════
   PAGE HEADER
══════════════════════════════════════════════════════════════ */

.page-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  gap: var(--space-4);
  flex-wrap: wrap;
}

.page-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--fw-light);
  color: var(--text);
  letter-spacing: var(--ls-tight);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.page-title i { color: var(--teal); font-size: 22px; }

.page-sub {
  font-size: var(--text-sm);
  font-weight: var(--fw-light);
  color: var(--text-2);
  margin-top: var(--space-2);
  line-height: var(--lh-base);
}


/* ══════════════════════════════════════════════════════════════
   BOTÕES
══════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 9px var(--space-4);
  border-radius: 4px;              /* UI Kit: controles têm radius 4px */
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;               /* UI Kit: botão é Roboto 600 */
  letter-spacing: var(--ls-wide);
  cursor: pointer;
  /* 20/06 FIX: o .btn base não tinha background/color → um botão SEM modificador
     (ex.: cenário não-selecionado, "Voltar tudo") caía no botão NATIVO do browser
     (fundo claro) + color:inherit (texto claro do tema dark) = TEXTO INVISÍVEL,
     só aparecia ao virar btn-primary no clique. Default legível: superfície
     escura + texto claro + borda. Modificadores (primary/danger/...) sobrescrevem. */
  background: var(--surface-2);
  color: var(--text-1);
  border: 1px solid var(--border);
  transition: opacity .15s, background .15s, border-color .15s;
  white-space: nowrap;
  min-height: var(--touch-target);
}

.btn:hover { opacity: .85; }
.btn:active { opacity: .7; }

.btn-primary  { background: var(--teal);    color: var(--on-teal); }
.btn-danger   { background: var(--danger);  color: #fff; }
.btn-success  { background: var(--success); color: #000; }

.btn-ghost {
  background: none;
  border: 1px solid var(--border-2);   /* borda mais visível p/ afordância (19/06) */
  color: var(--text-2);
}
.btn-ghost:hover {
  border-color: var(--teal-glow);
  color: var(--text);
  opacity: 1;
}

/* .btn-secondary — usado standalone (paginação, modais, ações de card/Link) e às
   vezes como `.btn .btn-secondary`. NÃO existia no DS: botões caíam pro estilo
   nativo do browser (fundo claro = "tela branca"). Definido completo p/ funcionar
   sozinho; visual = secundário legível (texto cheio + borda visível). 19/06/2026. */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 9px var(--space-4);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  cursor: pointer;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  color: var(--text);
  transition: background .15s, border-color .15s, color .15s, opacity .15s;
  white-space: nowrap;
  min-height: var(--touch-target);
  text-decoration: none;   /* p/ <Link> estilizado como botão */
}
.btn-secondary:hover {
  border-color: var(--teal-glow);
  color: var(--teal);
  background: var(--teal-dim);
  opacity: 1;
}
.btn-secondary:disabled,
.btn-secondary[disabled] { opacity: .4; cursor: not-allowed; }

.btn-icon {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-3);
  cursor: pointer;
  transition: all .15s;
  font-size: 16px;
  min-height: unset;
}

.btn-icon:hover               { border-color: var(--border-2); color: var(--text); opacity: 1; }
.btn-icon.edit:hover          { border-color: var(--teal);    color: var(--teal);    background: var(--teal-dim); }
.btn-icon.warn:hover          { border-color: var(--warn);    color: var(--warn);    background: var(--warn-dim); }
.btn-icon.danger:hover        { border-color: var(--danger);  color: var(--danger);  background: var(--danger-dim); }
.btn-icon.success:hover       { border-color: var(--success); color: var(--success); background: var(--success-dim); }

/* ── Toggle switch (componente global) ────────────────────────── */
.toggle-switch {
  position: relative;
  display: inline-flex;
  width: 40px; height: 22px;
  cursor: pointer;
  flex-shrink: 0;
}

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

.toggle-switch-track {
  position: absolute; inset: 0;
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  border-radius: 20px;
  transition: background .2s, border-color .2s, opacity .15s;
}

.toggle-switch-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--text-3);
  transition: transform .2s, background .2s;
}

.toggle-switch:hover .toggle-switch-track      { border-color: var(--teal-glow); }
.toggle-switch input:checked ~ .toggle-switch-track  { background: var(--teal); border-color: var(--teal); }
.toggle-switch input:checked ~ .toggle-switch-thumb  { background: #000; transform: translateX(18px); }
.toggle-switch:has(input:checked):hover .toggle-switch-track { opacity: .82; }
.toggle-switch:focus-within .toggle-switch-track {
  outline: 2px solid rgba(43,211,201,.3);
  outline-offset: 2px;
}

/* Hamburger mobile */
.btn-hamburger {
  background: none;
  border: none;
  color: var(--text-2);
  font-size: 22px;
  cursor: pointer;
  padding: var(--space-1);
  display: none;
  align-items: center;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  justify-content: center;
}


/* ══════════════════════════════════════════════════════════════
   FORMULÁRIOS
══════════════════════════════════════════════════════════════ */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--fw-medium);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
}

.input,
input[type="date"],
input[type="time"] {
  color-scheme: dark;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.6);
  cursor: pointer;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="number"],
select,
textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px var(--space-3);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-light);
  outline: none;
  transition: border-color .15s;
  min-height: var(--touch-target);
  -webkit-appearance: none;
}

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

.input::placeholder,
input::placeholder { color: var(--text-3); }

select option { background: var(--surface-2); }


/* ══════════════════════════════════════════════════════════════
   CARDS
══════════════════════════════════════════════════════════════ */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
}

/* Stat cards (clicáveis) */
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px var(--space-4);
  cursor: pointer;
  transition: border-color .15s;
  flex: 1;
  min-width: 110px;
}

.stat-card:hover   { border-color: var(--border-2); }
.stat-card.active  { border-color: var(--teal); background: var(--teal-dim); }
.stat-card.nocursor { cursor: default; }

.stat-val {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--fw-light);
  color: var(--text);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}

.stat-val.teal    { color: var(--teal); }
.stat-val.danger  { color: var(--danger); }
.stat-val.warn    { color: var(--warn); }
.stat-val.success { color: var(--success); }

.stat-lbl {
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-top: 3px;
}

.stats {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}


/* ══════════════════════════════════════════════════════════════
   BADGES / STATUS
══════════════════════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}

.badge i { font-size: 10px; }

.badge-ativo      { background: var(--success-dim); color: var(--success); border: 1px solid rgba(46,213,115,.2); }
.badge-inativo    { background: var(--danger-dim);  color: var(--danger);  border: 1px solid rgba(255,71,87,.2); }
.badge-disponivel { background: var(--teal-dim);    color: var(--teal);    border: 1px solid rgba(43,211,201,.2); }
.badge-pendente   { background: var(--warn-dim);    color: var(--warn);    border: 1px solid rgba(240,165,0,.2); }
.badge-admin      { background: var(--info-dim);    color: var(--info);    border: 1px solid rgba(61,155,255,.2); }

/* Chips (menores, sem uppercase) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px var(--space-3);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  cursor: default;
}

.chip i { font-size: 13px; }


/* ══════════════════════════════════════════════════════════════
   TABELA
══════════════════════════════════════════════════════════════ */

.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table { width: 100%; border-collapse: collapse; }

thead th {
  background: var(--surface-2);
  padding: 12px var(--space-4);
  text-align: left;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--fw-medium);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}

tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: rgba(255, 255, 255, 0.02); }

tbody td {
  padding: 14px var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-light);
  color: var(--text-2);
  vertical-align: middle;
  line-height: var(--lh-snug);
}

tbody td.bold { color: var(--text); font-weight: 500; }

.cell-mono {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  letter-spacing: .03em;
  color: var(--text);
}

.actions {
  display: flex;
  gap: var(--space-1);
  justify-content: flex-end;
}


/* ══════════════════════════════════════════════════════════════
   TOOLBAR (busca + filtros)
══════════════════════════════════════════════════════════════ */

.toolbar {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  align-items: center;
}

.search-wrap {
  position: relative;
  flex: 1;
}

.search-wrap i {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  pointer-events: none;
  font-size: 16px;
}

.search-wrap input {
  padding-left: 36px;
}

.btn-filter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 9px var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-family: var(--font);
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  position: relative;
  min-height: var(--touch-target);
}

.btn-filter:hover         { border-color: var(--border-2); color: var(--text); }
.btn-filter.active        { border-color: var(--teal); color: var(--teal); background: var(--teal-dim); }

.filter-badge {
  display: none;
  position: absolute;
  top: -6px; right: -6px;
  background: var(--teal);
  color: #000;
  font-size: 9px;
  font-weight: 700;
  border-radius: 50%;
  width: 16px; height: 16px;
  align-items: center;
  justify-content: center;
}

.filter-badge.visible { display: flex; }


/* ══════════════════════════════════════════════════════════════
   TABS
══════════════════════════════════════════════════════════════ */

.tabs {
  display: flex;
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

.tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-5);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all .15s;
  white-space: nowrap;
  min-height: var(--touch-target);
}

.tab:hover { color: var(--text-2); }

.tab.active {
  color: var(--teal);
  border-bottom-color: var(--teal);
}

.tab-count {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
}

.tab.active .tab-count {
  background: var(--teal-dim);
  border-color: var(--teal);
  color: var(--teal);
}


/* ══════════════════════════════════════════════════════════════
   PAGINAÇÃO
══════════════════════════════════════════════════════════════ */

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px var(--space-4);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pag-info {
  font-size: 12px;
  color: var(--text-3);
}

.pag-btns { display: flex; gap: var(--space-2); }

.pag-btn {
  padding: 6px var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-family: var(--font);
  font-size: 12px;
  cursor: pointer;
  transition: all .15s;
  min-height: var(--touch-target);
  display: flex;
  align-items: center;
}

.pag-btn:hover:not(:disabled) { border-color: var(--border-2); color: var(--text); }
.pag-btn:disabled { opacity: .3; cursor: default; }
.pag-btn.active { background: var(--teal-dim); border-color: var(--teal); color: var(--teal); }


/* ══════════════════════════════════════════════════════════════
   MODAL
══════════════════════════════════════════════════════════════ */

.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.overlay.open { display: flex; }

.modal {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 560px;
  box-shadow: var(--shadow-lg);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.modal-hdr {
  padding: var(--space-5) var(--space-6) var(--space-4);
  flex-shrink: 0;
}

.modal-title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--fw-light); color: var(--text); letter-spacing: var(--ls-tight); }
.modal-sub { font-size: 12px; color: var(--text-3); margin-top: 3px; }

.modal-divider { height: 1px; background: var(--border); flex-shrink: 0; }

.modal-body {
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow-y: auto;
}

.modal-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border);
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  flex-shrink: 0;
}

/* Modal de confirmação */
.confirm-modal { max-width: 400px; }

.confirm-body { padding: var(--space-6); }

.confirm-ico {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
  font-size: 22px;
}

.confirm-ico.warn    { background: var(--warn-dim);    color: var(--warn); }
.confirm-ico.danger  { background: var(--danger-dim);  color: var(--danger); }
.confirm-ico.success { background: var(--success-dim); color: var(--success); }
.confirm-ico.teal    { background: var(--teal-dim);    color: var(--teal); }

.confirm-title { font-family: var(--font-heading); font-size: var(--text-md); font-weight: var(--fw-regular); color: var(--text); margin-bottom: var(--space-3); letter-spacing: var(--ls-tight); }
.confirm-desc  { font-size: 13px; color: var(--text-2); line-height: 1.6; }


/* ══════════════════════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════════════════════ */

.toast {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  font-size: 13px;
  color: var(--text);
  box-shadow: var(--shadow);
  z-index: 300;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  transform: translateY(80px);
  opacity: 0;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
  max-width: 320px;
}

.toast.show { transform: translateY(0); opacity: 1; }
.toast.sucesso { border-left: 3px solid var(--success); }
.toast.erro    { border-left: 3px solid var(--danger); }
.toast.aviso   { border-left: 3px solid var(--warn); }

.toast i { font-size: 18px; flex-shrink: 0; }
.toast.sucesso i { color: var(--success); }
.toast.erro i    { color: var(--danger); }
.toast.aviso i   { color: var(--warn); }


/* ══════════════════════════════════════════════════════════════
   ESTADOS
══════════════════════════════════════════════════════════════ */

/* Empty state */
.empty {
  padding: 60px var(--space-5);
  text-align: center;
}

.empty i { font-size: 40px; color: var(--text-3); margin-bottom: var(--space-3); }
.empty p { color: var(--text-2); font-size: 13px; }
.empty small { color: var(--text-3); font-size: 12px; display: block; margin-top: var(--space-1); }

/* Loading spinner */
.spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--border-2);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

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

/* Fullpage loading */
.fullpage {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 200;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-3);
  text-align: center;
}

.fullpage.show { display: flex; }
.fullpage p { font-size: 13px; color: var(--text-2); }


/* ══════════════════════════════════════════════════════════════
   PANEL DE FILTROS (lateral)
══════════════════════════════════════════════════════════════ */

.filter-panel {
  width: 0;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--surface);
  border-left: 1px solid transparent;
  transition: width .28s cubic-bezier(.4,0,.2,1), border-color .28s ease;
  position: sticky;
  top: var(--topbar-height);
  height: calc(100vh - var(--topbar-height));
  align-self: flex-start;
}

.filter-panel.open { width: 268px; border-left-color: var(--border-2); }

.filter-panel-inner { width: 268px; display: flex; flex-direction: column; height: 100%; }

.fp-hdr {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fp-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.fp-title i { color: var(--teal); }

.fp-body { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-5); }

.fp-section { margin-bottom: var(--space-5); }

.fp-section-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: var(--space-3);
}

.pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.pill {
  padding: 5px var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
  transition: all .15s;
  min-height: var(--touch-target);
  display: flex;
  align-items: center;
}

.pill:hover { border-color: var(--border-2); color: var(--text); }
.pill.active { background: var(--teal-dim); border-color: var(--teal); color: var(--teal); }

.fp-ftr {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
}

.btn-limpar {
  width: 100%;
  padding: 10px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-family: var(--font);
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
  min-height: var(--touch-target);
}

.btn-limpar:hover { border-color: var(--border-2); color: var(--text); }


/* ══════════════════════════════════════════════════════════════
   WELCOME / HOME STATE
══════════════════════════════════════════════════════════════ */

.welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  padding: var(--space-8);
}

.welcome-icon {
  width: 72px; height: 72px;
  border-radius: var(--radius-lg);
  background: var(--teal-dim);
  border: 1px solid var(--teal-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--teal);
  margin-bottom: var(--space-5);
}

.welcome-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--fw-light);
  color: var(--text);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-3);
  line-height: var(--lh-snug);
}

.welcome-title em { color: var(--teal); font-style: normal; }

.welcome-sub {
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: var(--space-6);
}

.welcome-apps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

.welcome-app-chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  transition: all .15s;
  min-height: var(--touch-target);
}

.welcome-app-chip:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: var(--teal-dim);
}

.welcome-app-chip i { font-size: 15px; }


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE FIRST
══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Esconde sidebar desktop */
  .sidebar { display: none; }

  /* Remove margem do sidebar */
  .main-content { margin-left: 0; }

  /* Mostra hamburger */
  .btn-hamburger { display: inline-flex; }

  /* Mostra bottom nav */
  .bottom-nav { display: flex; }

  /* Padding extra no bottom para não ficar atrás da bottom nav */
  .page-body {
    padding: var(--space-4);
    padding-bottom: calc(var(--bottom-nav-height) + var(--space-4) + env(safe-area-inset-bottom));
  }

  /* Stats em grid 3 colunas compacto */
  .stats { gap: var(--space-2); }
  .stat-card { padding: var(--space-3); min-width: 90px; }
  .stat-val { font-size: 22px; }

  /* Page header empilhado */
  .page-hdr { flex-direction: column; gap: var(--space-3); }
  .page-hdr .btn { width: 100%; justify-content: center; }

  /* Esconde colunas de tabela em mobile */
  .hide-mobile { display: none; }

  /* Field row vira coluna */
  .field-row { grid-template-columns: 1fr; }

  /* Toast na base da tela */
  .toast { bottom: calc(var(--bottom-nav-height) + var(--space-3)); right: var(--space-4); left: var(--space-4); max-width: 100%; }

  /* Modal full screen em mobile */
  .overlay { padding: 0; align-items: flex-end; }
  .modal { border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 85vh; }

  /* Tabs scroll horizontal */
  .tabs { margin: 0 calc(-1 * var(--space-4)) var(--space-4); padding: 0 var(--space-4); }

  /* Filter panel vira modal em mobile */
  .filter-panel { display: none; }

  /* Toolbar */
  .toolbar { flex-wrap: wrap; }
  .search-wrap { min-width: 0; width: 100%; order: 1; }
  .btn-filter { order: 2; }

  /* Topbar datetime esconde */
  .topbar-datetime { display: none; }
}

@media (min-width: 769px) {
  /* Esconde drawer e bottom nav */
  .drawer { display: none; }
  .drawer-backdrop { display: none; }
  .bottom-nav { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════
   FIDELIDADE À UI KIT OFICIAL DA BITTAR
   (uikit.bittarneurociencia.com.br → Buttons/Button)
   Extraído FIEL do Storybook em 18/06/2026. Botões PREENCHIDOS
   (primary/success/danger) ganham o brilho "glossy" neumórfico + hover/active
   da kit; ghost/icon/filter seguem como estão (são outline, já consistentes).
   Vem no fim do arquivo de propósito: em conflitos de mesma especificidade
   (.btn-primary:hover vs .btn:hover) a regra que vem depois vence — então
   estas sobrescrevem o `opacity` base sem !important. NÃO altera JSX.
══════════════════════════════════════════════════════════════ */

/* Glow glossy dos botões preenchidos — box-shadow da kit no estado de repouso
   (a kit usa --glow-x:0 / --glow-y:-1; aqui bakeado, luz vinda do topo). */
.btn-primary,
.btn-success,
.btn-danger {
  position: relative;
  box-shadow:
    0 16px 8px -4px rgba(0, 0, 0, .08),
    0 8px 12px 0 rgba(0, 0, 0, .08),
    inset 0 1px 0 0 rgba(255, 255, 255, .48),
    0 -6px 16px -4px rgba(255, 255, 255, .24);
  transition: transform 60ms cubic-bezier(.49, .02, 0, 1.08), box-shadow .15s, opacity .15s;
}

/* Véu branco translúcido no hover/active (técnica ::before da kit — não muda a
   cor base). 5%/2% são imperceptíveis sobre o texto, como na kit original. */
.btn-primary::before,
.btn-success::before,
.btn-danger::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0);
  transition: background .12s;
  pointer-events: none;
}

.btn-primary:hover,
.btn-success:hover,
.btn-danger:hover {
  opacity: 1;
  box-shadow:
    0 20px 16px -4px rgba(0, 0, 0, .08),
    0 12px 24px 0 rgba(0, 0, 0, .08),
    inset 0 1px 1px 0 rgba(255, 255, 255, .32),
    0 -6px 24px -4px rgba(255, 255, 255, .16);
}
.btn-primary:hover::before,
.btn-success:hover::before,
.btn-danger:hover::before { background: rgba(255, 255, 255, .05); }

.btn-primary:active,
.btn-success:active,
.btn-danger:active {
  opacity: 1;
  transform: scale(.98);
}
.btn-primary:active::before,
.btn-success:active::before,
.btn-danger:active::before { background: rgba(255, 255, 255, .02); }

/* Variante invertida/secundária da kit: fundo translúcido, borda sutil, texto teal */
.btn-inverted {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--teal);
}
.btn-inverted:hover {
  opacity: 1;
  background: rgba(255, 255, 255, .06);
  border-color: var(--teal-glow);
  color: var(--teal);
}

/* Largura total (prop `block` do <Button>) */
.btn-block { width: 100%; justify-content: center; }

/* Desabilitado fiel à kit (cinza, sem brilho) — só nos preenchidos */
.btn-primary:disabled,
.btn-success:disabled,
.btn-danger:disabled,
.btn-primary[disabled],
.btn-success[disabled],
.btn-danger[disabled] {
  background: #666666;
  color: #9fa1a1;
  box-shadow: none;
  transform: none;
  opacity: 1;
  cursor: not-allowed;
}
.btn-primary:disabled::before,
.btn-success:disabled::before,
.btn-danger:disabled::before { display: none; }

/* Spinner do estado loading do <Button> — herda a cor do texto do botão */
.btn-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: spin .6s linear infinite;
  opacity: .85;
}