/* =====================================================================
   CLINIQ — Design System (painel interno)
   Fonte de verdade visual da area logada (admin do profissional e
   super admin). A landing page publica usa seu proprio <style> (DM
   Serif/DM Sans) — ver views/site/home.php — pois e a unica tela que
   pode pagar o custo de uma webfont decorativa.
   Paleta: PLANO_MESTRE_CLINICA_SAAS.md secao 11.
   ===================================================================== */

/* ── RESET ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
ul, ol { list-style: none; }

/* ── TOKENS ───────────────────────────────────────────────────────── */
:root {
  /* Primaria — verde clinico (saude, confianca) */
  --cf-primary:        #0F6E56;
  --cf-primary-dark:   #085041;
  --cf-primary-light:  #5DCAA5;
  --cf-primary-bg:     #E1F5EE;

  /* Semanticas */
  --cf-success:        #3B6D11;
  --cf-success-bg:     #EAF3DE;
  --cf-warning:        #BA7517;
  --cf-warning-bg:     #FAEEDA;
  --cf-danger:         #A32D2D;
  --cf-danger-bg:      #FCEBEB;
  --cf-neutral:        #5F5E5A;
  --cf-neutral-bg:     #F1EFE8;
  --cf-info:           #185FA5;
  --cf-info-bg:        #E6F1FB;

  /* Status de consultas (sempre acompanhados de texto — nunca so cor) */
  --cf-agendada:       #378ADD;
  --cf-agendada-bg:    #E7F1FC;
  --cf-confirmada:     #0F6E56;
  --cf-realizada:      #639922;
  --cf-realizada-bg:   #EEF5E0;
  --cf-cancelada:      #888780;
  --cf-falta:          #E24B4A;

  /* Base */
  --bg:           #FAFAF8;
  --surface:      #FFFFFF;
  --surface-sunk: #F4F2EC;
  --text:         #2C2C2A;
  --text-secondary: #5F5E5A;
  --text-muted:   #898781;
  --border:       #E5E3DB;
  --border-strong: #D3D0C6;

  /* Estrutura */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(20, 20, 18, 0.08);
  --shadow-md: 0 8px 24px rgba(20, 20, 18, 0.08);
  --shadow-lg: 0 16px 40px rgba(20, 20, 18, 0.12);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --sidebar-w: 240px;
  --topbar-h: 64px;
}

/* ── TEMA ESCURO ──────────────────────────────────────────────────── */
/* Ativado via <html data-theme="escuro">, definido por app/Layout.php a
   partir da preferencia salva em usuarios.tema (ver views/configuracoes).
   So redefine os tokens — todo o resto do CSS ja usa var(), entao o app
   inteiro se adapta sozinho. */
:root[data-theme="escuro"] {
  --cf-primary:        #2FAE8B;
  --cf-primary-dark:   #7FE0C2;
  --cf-primary-light:  #5DCAA5;
  --cf-primary-bg:     #163C33;

  --cf-success:        #8FCB55;
  --cf-success-bg:     #22301A;
  --cf-warning:        #E3A93F;
  --cf-warning-bg:     #3A2E14;
  --cf-danger:         #E37272;
  --cf-danger-bg:      #3A1E1E;
  --cf-neutral:        #B7B4AC;
  --cf-neutral-bg:     #2A2A26;
  --cf-info:           #6FA8DC;
  --cf-info-bg:        #1C2C3A;

  --cf-agendada:       #6FA8DC;
  --cf-agendada-bg:    #1C2C3A;
  --cf-confirmada:     #2FAE8B;
  --cf-realizada:      #9BC96B;
  --cf-realizada-bg:   #22301A;
  --cf-cancelada:      #8B8A85;
  --cf-falta:          #E37272;

  --bg:            #14181A;
  --surface:       #1D2124;
  --surface-sunk:  #171A1C;
  --text:          #ECEAE3;
  --text-secondary:#B7B4AC;
  --text-muted:    #85837C;
  --border:        #2C302F;
  --border-strong: #3B4440;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
}

/* ── BASE ─────────────────────────────────────────────────────────── */
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; color: var(--text); }
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }

/* ── APP SHELL ────────────────────────────────────────────────────── */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}
.app-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.app-content {
  padding: var(--space-6);
  max-width: 1200px;
  width: 100%;
}
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.page-header h1 { margin-bottom: 2px; }
.page-header p { color: var(--text-secondary); font-size: 13px; }

/* ── SIDEBAR ──────────────────────────────────────────────────────── */
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: var(--space-4) 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-3);
}
.sidebar-logo-icon {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: var(--cf-primary);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sidebar-logo-icon svg { width: 16px; height: 16px; stroke: #fff; }
.sidebar-logo-text { font-size: 15px; font-weight: 700; color: var(--text); }
.sidebar-group {
  font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  color: var(--text-muted); padding: var(--space-4) var(--space-5) var(--space-1);
}
.sidebar-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px var(--space-5);
  font-size: 13.5px; font-weight: 500; color: var(--text-secondary);
  text-decoration: none; border-right: 3px solid transparent;
  transition: background .15s, color .15s;
}
.sidebar-item svg { width: 17px; height: 17px; stroke: currentColor; fill: none; flex-shrink: 0; }
.sidebar-item:hover { background: var(--cf-primary-bg); color: var(--cf-primary); }
.sidebar-item.active {
  background: var(--cf-primary-bg); color: var(--cf-primary);
  border-right-color: var(--cf-primary); font-weight: 600;
}
.sidebar-item .count {
  margin-left: auto; font-size: 11px; font-weight: 600;
  background: var(--surface-sunk); color: var(--text-secondary);
  padding: 1px 7px; border-radius: var(--radius-pill);
}

/* ── TOPBAR ───────────────────────────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space-6);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.topbar-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-sunk); border-radius: var(--radius-pill);
  padding: 8px 16px; font-size: 13px; color: var(--text-muted);
  width: 280px;
}
.topbar-search svg { width: 15px; height: 15px; stroke: var(--text-muted); flex-shrink: 0; }
.topbar-actions { display: flex; align-items: center; gap: var(--space-4); }
.topbar-icon-btn {
  width: 36px; height: 36px; border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer; position: relative;
}
.topbar-icon-btn:hover { background: var(--surface-sunk); }
#sidebar-toggle { display: none; }
.topbar-icon-btn svg { width: 18px; height: 18px; stroke: var(--text-secondary); }
.topbar-icon-btn .dot {
  position: absolute; top: 7px; right: 8px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--cf-danger);
  border: 1.5px solid var(--surface);
}

/* ── AVATAR ───────────────────────────────────────────────────────── */
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: #fff; background: var(--cf-primary);
  flex-shrink: 0;
}
.avatar.sm { width: 24px; height: 24px; font-size: 10px; }
.avatar.lg { width: 48px; height: 48px; font-size: 16px; }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* Avatar clicavel pra trocar foto (ver /perfil) — o <label> cobre o avatar
   inteiro e aponta pro <input type="file"> escondido dentro dele. */
.avatar-upload { position: relative; display: inline-flex; cursor: pointer; }
.avatar-upload input[type="file"] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.avatar-upload:hover .avatar { opacity: .85; }
.avatar-edit-badge {
  position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--cf-primary); border: 2px solid var(--surface);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.avatar-edit-badge svg { width: 11px; height: 11px; stroke: #fff; }

/* ── BOTOES ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; border-radius: var(--radius-pill);
  font-size: 13.5px; font-weight: 600; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s, box-shadow .15s;
  line-height: 1.2;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--cf-primary); color: #fff; }
.btn-primary:hover { background: var(--cf-primary-dark); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-sunk); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--surface-sunk); color: var(--text); }
.btn-danger { background: var(--cf-danger); color: #fff; }
.btn-danger:hover { filter: brightness(0.92); }
.btn-sm { padding: 6px 14px; font-size: 12.5px; }
.btn-lg { padding: 13px 28px; font-size: 15px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-icon { padding: 9px; border-radius: var(--radius-sm); }

/* ── CARDS ────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-4); gap: var(--space-3);
}
.card-title { font-size: 15px; font-weight: 600; color: var(--text); }
.card-subtitle { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }

/* ── KPI STAT TILES ───────────────────────────────────────────────── */
/* Contrato: label (sentence case, sem dois-pontos) + valor (sans, semibold,
   figuras proporcionais) + delta opcional (cor = direcao x se "subir" e bom). */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.kpi-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  display: flex; flex-direction: column; gap: 6px;
}
.kpi-label {
  font-size: 12.5px; color: var(--text-secondary); font-weight: 500;
  display: flex; align-items: center; gap: 6px;
}
.kpi-label svg { width: 14px; height: 14px; stroke: var(--text-muted); }
.kpi-value {
  font-size: 28px; font-weight: 700; color: var(--text);
  font-variant-numeric: proportional-nums;
  letter-spacing: -0.5px;
}
.kpi-tile.accent .kpi-value { color: var(--cf-primary); }
.kpi-delta { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.kpi-delta.up { color: var(--cf-success); }
.kpi-delta.down { color: var(--cf-danger); }
.kpi-delta svg { width: 12px; height: 12px; }

/* ── BADGES / STATUS ──────────────────────────────────────────────── */
/* Regra: cor nunca sozinha — todo badge carrega rotulo em texto. */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600;
  padding: 3px 11px; border-radius: var(--radius-pill);
  white-space: nowrap;
}
.badge-success { background: var(--cf-success-bg); color: var(--cf-success); }
.badge-warning { background: var(--cf-warning-bg); color: var(--cf-warning); }
.badge-danger  { background: var(--cf-danger-bg);  color: var(--cf-danger); }
.badge-info    { background: var(--cf-info-bg);    color: var(--cf-info); }
.badge-neutral { background: var(--cf-neutral-bg); color: var(--cf-neutral); }

/* Status especificos de consulta — mesma logica de cor+rotulo do badge */
.badge-agendada  { background: var(--cf-agendada-bg); color: var(--cf-agendada); }
.badge-confirmada{ background: var(--cf-primary-bg); color: var(--cf-confirmada); }
.badge-realizada { background: var(--cf-realizada-bg); color: var(--cf-realizada); }
.badge-cancelada { background: var(--cf-neutral-bg); color: var(--cf-cancelada); }
.badge-falta     { background: var(--cf-danger-bg); color: var(--cf-falta); }

.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* ── ALERTAS ──────────────────────────────────────────────────────── */
.alert {
  display: flex; gap: 12px; align-items: flex-start;
  padding: var(--space-4); border-radius: var(--radius-md);
  font-size: 13px; border: 1px solid transparent;
}
.alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.alert-info    { background: var(--cf-info-bg);    color: var(--cf-info); }
.alert-success { background: var(--cf-success-bg); color: var(--cf-success); }
.alert-warning { background: var(--cf-warning-bg); color: var(--cf-warning); }
.alert-danger  { background: var(--cf-danger-bg);  color: var(--cf-danger); }
.alert strong { color: inherit; }

/* ── FORMULARIOS ──────────────────────────────────────────────────── */
.form-group { margin-bottom: var(--space-4); }
.form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
}
/* Conteudo principal + painel lateral menor (ex.: formulario longo + card
   curto de preferencias) — combinar com .form-row: class="form-row form-row-wide". */
.form-row-wide { grid-template-columns: 2fr 1fr; }
.form-label {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--text);
  margin-bottom: 6px;
}
.form-label .optional { font-weight: 400; color: var(--text-muted); }
.form-hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.form-error { font-size: 12px; color: var(--cf-danger); margin-top: 4px; }

.input, .select, .textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 13.5px; color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--cf-primary);
  box-shadow: 0 0 0 3px var(--cf-primary-bg);
}
.textarea { resize: vertical; min-height: 96px; }
.input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--cf-danger); }

/* Titulo de secao dentro de um formulario longo (ex.: Configuracoes) — separa
   visualmente blocos de campos relacionados em vez de deixar tudo colado. */
.form-section-title {
  margin-top: var(--space-6); padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

/* Campo de arquivo estilizado: esconde o input nativo (feio, inconsistente
   entre navegadores) e usa um botao do proprio design system como gatilho. */
.file-input { display: inline-flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.file-input input[type="file"] { display: none; }
.file-input-name { font-size: 13px; color: var(--text-muted); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--surface-sunk); color: var(--text-muted); }

.checkbox-row, .radio-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }

.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track {
  position: absolute; inset: 0; background: var(--border-strong);
  border-radius: var(--radius-pill); transition: background .2s; cursor: pointer;
}
.switch .track::before {
  content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .2s;
}
.switch input:checked + .track { background: var(--cf-primary); }
.switch input:checked + .track::before { transform: translateX(18px); }

/* Variante ativo/inativo (verde/vermelho) — usada em toggles de status. */
.switch-status .track { background: var(--cf-danger); }
.switch-status input:checked + .track { background: var(--cf-success); }

/* ── CHIP SELECT (alternativa ao <select> pra poucas opcoes fixas) ─── */
.chip-select { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-option { position: relative; }
.chip-option input {
  position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer;
}
.chip-option label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); background: var(--surface);
  font-size: 13px; font-weight: 600; color: var(--text);
  cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; user-select: none;
}
.chip-option .chip-check { width: 14px; height: 14px; flex-shrink: 0; display: none; }
.chip-option input:checked + label {
  border-color: var(--cf-primary); background: var(--cf-primary-bg); color: var(--cf-primary-dark);
}
.chip-option input:checked + label .chip-check { display: inline-flex; }
.chip-option input:focus-visible + label { outline: 2px solid var(--cf-primary); outline-offset: 2px; }
.chip-option input:disabled + label { opacity: .5; cursor: not-allowed; }

/* ── TABELAS ──────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
.table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--surface); }
.table th {
  text-align: left; font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .4px; color: var(--text-muted);
  padding: 12px var(--space-4); background: var(--surface-sunk);
  border-bottom: 1px solid var(--border);
}
.table td { padding: 12px var(--space-4); border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--surface-sunk); }
.table .cell-muted { color: var(--text-muted); }
.table .cell-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* ── ABAS (tabs) — ex: ficha do paciente ─────────────────────────── */
.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border); margin-bottom: var(--space-5); }
.tab {
  padding: 10px 18px; font-size: 13.5px; font-weight: 500; color: var(--text-secondary);
  border-bottom: 2px solid transparent; cursor: pointer; text-decoration: none;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--cf-primary); border-color: var(--cf-primary); font-weight: 600; }

/* ── GRAFICO DE BARRAS SIMPLES (resultado de subescalas) ─────────── */
/* Mark spec: barra <=24px, ponta arredondada, base reta, gap de 2px
   entre trilho e preenchimento nao se aplica (barra unica por linha);
   rotulo (valor) fica fora/no fim da barra, nunca sobre ela. */
.bar-chart { display: flex; flex-direction: column; gap: var(--space-3); }
.bar-row { display: grid; grid-template-columns: 140px 1fr 48px; align-items: center; gap: var(--space-3); }
.bar-row-label { font-size: 12.5px; color: var(--text-secondary); font-weight: 500; }
.bar-track {
  height: 10px; background: var(--surface-sunk); border-radius: var(--radius-pill);
  overflow: hidden;
}
.bar-fill {
  height: 100%; border-radius: var(--radius-pill);
  background: var(--cf-primary);
  transition: width .4s ease;
}
.bar-row-value { font-size: 12.5px; font-weight: 600; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }

/* ── FAIXAS DE INTERPRETACAO (avaliacoes) ────────────────────────── */
.faixa-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: var(--radius-pill);
}

/* ── MODAL ────────────────────────────────────────────────────────── */
/* Popup sem JavaScript: o gatilho e um <a href="#id-do-modal">, o modal e
   um .modal-overlay com esse id em algum lugar da pagina. So aparece
   quando a URL aponta pra ele (:target) — fechar e um link href="#". */
.modal-overlay {
  display: none;
  position: fixed; inset: 0; background: rgba(20, 20, 18, 0.45);
  align-items: center; justify-content: center;
  padding: var(--space-4); z-index: 100;
}
.modal-overlay:target { display: flex; }
.modal {
  background: var(--surface); border-radius: var(--radius-lg);
  max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5); border-bottom: 1px solid var(--border);
}
.modal-body { padding: var(--space-5); }
.modal-footer {
  display: flex; justify-content: flex-end; gap: var(--space-3);
  padding: var(--space-5); border-top: 1px solid var(--border);
}

/* ── EMPTY STATE ──────────────────────────────────────────────────── */
.empty-state {
  text-align: center; padding: var(--space-7) var(--space-4); color: var(--text-muted);
}
.empty-state svg { width: 40px; height: 40px; margin: 0 auto var(--space-3); stroke: var(--text-muted); }
.empty-state h3 { color: var(--text); margin-bottom: 6px; }
.empty-state p { font-size: 13px; max-width: 320px; margin: 0 auto var(--space-4); }

/* ── PAGINACAO ────────────────────────────────────────────────────── */
.pagination { display: flex; align-items: center; gap: 4px; justify-content: flex-end; margin-top: var(--space-4); }
.pagination button {
  width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface); cursor: pointer; font-size: 13px; color: var(--text-secondary);
}
.pagination button:hover { background: var(--surface-sunk); }
.pagination button.active { background: var(--cf-primary); border-color: var(--cf-primary); color: #fff; }
.pagination button:disabled { opacity: .4; cursor: not-allowed; }

/* ── UTILITARIOS ──────────────────────────────────────────────────── */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); }
.mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); }
.mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-4 { margin-bottom: var(--space-4); }
.w-full { width: 100%; }
.hidden { display: none !important; }

/* ── RESPONSIVO ───────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; left: -260px; top: 0; width: var(--sidebar-w); z-index: 50;
    transition: left .2s ease; box-shadow: var(--shadow-lg);
  }
  .sidebar.open { left: 0; }
  #sidebar-toggle { display: flex; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 100px 1fr 40px; }
}
@media (max-width: 640px) {
  .app-content { padding: var(--space-4); }
  .kpi-grid { grid-template-columns: 1fr; }
  .topbar-search { display: none; }
}

/* ── APP NATIVO (Capacitor) ──────────────────────────────────────────
   Regras aqui dentro so valem quando a pagina roda dentro do app instalado
   (classe "app-native" no <html>, ver isApp() em includes/helpers.php).
   Nao afetam o site acessado por navegador normal. */
.topbar-title { font-size: 16px; font-weight: 700; color: var(--text); }

html.app-native .sidebar-item {
  padding: 13px var(--space-5);
  font-size: 14.5px;
}
html.app-native .sidebar-item svg { width: 19px; height: 19px; }
html.app-native .topbar-icon-btn { width: 42px; height: 42px; }
html.app-native .topbar-icon-btn svg { width: 20px; height: 20px; }
html.app-native .avatar { width: 34px; height: 34px; }
