/* spa.css — Sistema Virtualize */

/* T17B: fila longitudinal e revisão documental, com controles locais. */
.adm-pp { padding: 20px 0; }
.adm-pp-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.adm-pp p, .adm-pp-item p, .adm-pp-evento p { margin: 6px 0; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.adm-pp h2, .adm-pp-item h4 { margin: 0 0 8px; }
.adm-pp-filtros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.adm-pp-filtros label { display: grid; gap: 6px; font-size: 12px; font-weight: 600; }
.adm-pp-filtros select { width: 100%; min-width: 0; }
.adm-pp-linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .6fr) auto; align-items: center; gap: 20px; padding: 18px 0; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.adm-pp-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.adm-pp-item { padding: 14px; border: 1px solid var(--border); border-radius: 10px; overflow-wrap: anywhere; min-width: 0; }
.adm-pp-candidato { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 12px 0; }
.adm-pp-candidato .adm-pp-item { border: 0; padding-left: 0; }
.adm-pp-evento { padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
[data-pp-conteudo] h3 { margin: 20px 0 12px; }
[data-pp-conteudo] h3:first-child { margin-top: 0; }
.adm-pp-aviso { color: var(--s-warning-text, #805c00) !important; }
[data-pp-erro]:not(:empty) { margin-top: 16px; }
@media (max-width: 640px) {
  .adm-pp-cabecalho { align-items: flex-start; flex-direction: column; }
  .adm-pp-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-pp-linha, .adm-pp-par, .adm-pp-candidato { grid-template-columns: 1fr; gap: 10px; }
  .adm-pp-linha > button, .adm-pp-candidato > button { justify-self: start; }
  .adm-conf-linha:has([data-pp-origem]) { flex-wrap: wrap; }
}

/* ============================================================
   Tokens
   ============================================================ */
:root {
  /* Accent — Secretária */
  --navy:           #1B2B4B;
  --navy-light:     rgba(27,43,75,0.08);
  --navy-hover:     rgba(27,43,75,0.12);

  /* Accent — Médico (verde sage acinzentado — institucional/médico) */
  --teal:           #3D5A3D;
  --teal-light:     rgba(61,90,61,0.10);
  --teal-hover:     rgba(61,90,61,0.14);

  /* Accent ativo — alias trocado por body.theme-medico abaixo.
     CSS de toda a UI usa var(--accent*). Login (antes do role conhecido)
     mantém var(--navy*) explícito pra não vazar verde. */
  --accent:         var(--navy);
  --accent-light:   var(--navy-light);
  --accent-hover:   var(--navy-hover);

  /* Superfícies */
  --bg:             #FFFFFF;
  --bg-subtle:      #F5F6F8;
  --bg-card:        #FFFFFF;
  --hover-subtle:   rgba(17,24,39,0.04);
  --shell-fill:     rgba(249,248,247,0.70);
  --shell-fill-strong: rgba(251,250,249,0.86);
  --shell-line:     rgba(124,120,116,0.08);
  --shell-ink:      #4C4F69;
  --shell-muted:    #646980;   /* era #6E7590 (~4.29): escurecido p/ cruzar WCAG AA (4.5) */
  --shell-faint:    #9AA0B7;
  --card-line:      rgba(27,43,75,0.06);

  /* Conteúdo — home premium calma */
  --home-atmo-top:        #F7F8FC;
  --home-atmo-bottom:     #F3F5FA;
  --home-atmo-glow-a:     rgba(92,110,181,0.08);
  --home-atmo-glow-b:     rgba(186,194,229,0.22);
  --home-surface:         rgba(255,255,255,0.96);
  --home-surface-strong:  #FFFFFF;
  --home-line:            rgba(118,129,166,0.16);
  --home-line-soft:       rgba(118,129,166,0.11);
  --home-line-faint:      rgba(118,129,166,0.07);
  --home-hover:           rgba(83,99,155,0.045);
  --home-text-strong:     #1E2435;
  --home-text:            #31384A;
  --home-text-muted:      #717B92;
  --home-text-soft:       #98A2B6;
  --home-accent-soft:     rgba(82,102,235,0.10);
  --home-accent-border:   rgba(82,102,235,0.18);
  --home-chart-line:      rgba(74,98,255,0.52);   /* linha guia vertical do gráfico de KPIs */
  --home-chart-fill:      rgba(74,98,255,0.10);   /* fill do gráfico de KPIs */
  --home-chart-dot:       #4A62FF;                /* dot ativo do gráfico (cor sólida) */
  --home-shadow-card:     0 0 2px rgba(175,178,206,0.56), 0 1px 4px rgba(4,4,52,0.10);
  --home-shadow-card-hover: 0 0 2px rgba(175,178,206,0.62), 0 16px 34px rgba(21,26,56,0.08);

  /* Home — tokens semânticos (não usar fora da Home; status global = --s-*) */
  --home-success:    #1A7A4A;  /* recebido, check tarefa */
  --home-overdue:    #E03131;  /* tarefa atrasada */
  --home-flag:       #F59E0B;  /* sinalizador de tarefa */
  --home-badge:      #B5185A;  /* badge numérico na sidebar */
  --home-badge-bg:   rgba(194,24,91,0.12);

  /* Glass — camada de controles apenas */
  --glass-sidebar:  rgba(243,246,250,0.76);
  --glass-topbar:   rgba(248,248,249,0.82);
  --glass-modal:    rgba(255,255,255,0.88);
  --glass-login:    rgba(255,255,255,0.10);
  --sidebar-glass-top:    rgba(234,240,249,0.94);
  --sidebar-glass-bottom: rgba(240,239,248,0.68);
  --sidebar-glass-core:   rgba(229,232,239,0.14);
  --sidebar-item-hover:   rgba(216,224,235,0.28);
  --sidebar-item-active:  rgba(209,218,231,0.36);
  --sidebar-item-border:  rgba(126,138,164,0.09);
  --sidebar-glow-a:       rgba(136,178,228,0.13);
  --sidebar-glow-b:       rgba(198,182,236,0.12);
  --sidebar-tint:         rgba(176,198,232,0.04);
  --sidebar-tint-fade:    rgba(176,198,232,0.015);
  --blur-sm:        blur(12px);
  --blur-md:        blur(20px);
  --blur-lg:        blur(40px);

  /* Texto */
  --text:           #111827;
  --text-ink:       #2F3140;
  --text-cool:      #7F8193;
  --text-muted:     #6B7280;
  --text-xmuted:    #9CA3AF;
  /* secundário SOBRE superfície preenchida (--bg-subtle): --text-muted cai pra
     4,47:1 ali e reprova por 0,03. Mesma família, 5,03:1. */
  --text-muted-fill: #636A77;

  /* Erro / destrutivo — declarado pra matar o ghost var(--error) */
  --error:          #DC2626;

  /* Tints suaves */
  --surface-tint:         rgba(132,126,120,0.03);
  --surface-tint-hover:   rgba(132,126,120,0.045);
  --row-hover:            rgba(17,24,39,0.018);
  --surface-tint-border:  rgba(132,126,120,0.07);
  --chrome-soft:          rgba(248,247,246,0.76);
  --chrome-soft-hover:    rgba(245,244,242,0.88);
  --chrome-soft-active:   rgba(240,238,236,0.92);
  --chrome-soft-border:   rgba(132,126,120,0.07);
  /* Texto escurecido p/ cruzar WCAG AA (4.5:1) sobre o pastel-bg E sobre branco —
     o fix do R4 mexe na COR DO TEXTO, não no bg (aumentar alpha do pastel
     escureceria o fundo e pioraria o contraste). bg/border preservam a pastela. */
  --patient-status-lead:        #715FA5;  /* era #7E6AB7 (3.92:1) → 4.67:1 */
  --patient-status-lead-bg:     rgba(126,106,183,0.12);
  --patient-status-lead-border: rgba(126,106,183,0.18);
  --patient-status-active:        #4F7362;  /* era #5B8471 (3.66:1) → 4.60:1 */
  --patient-status-active-bg:     rgba(91,132,113,0.12);
  --patient-status-active-border: rgba(91,132,113,0.18);
  --patient-status-inactive:        #676C7A;  /* era #8A90A3 (2.84:1) → 4.68:1 */
  --patient-status-inactive-bg:     rgba(138,144,163,0.12);
  --patient-status-inactive-border: rgba(138,144,163,0.16);

  /* Pendências — cores semânticas */
  --pend-cobranca:    #9a6c2d;
  --pend-cobranca-bg: rgba(196,139,79,0.12);
  --pend-nf:          var(--text-cool);
  --pend-nf-bg:       rgba(79,84,110,0.08);
  --pend-retorno:     #b5606d;
  --pend-retorno-bg:  rgba(209,106,106,0.10);
  /* Vermelho para "falta" em Pendências — tom escuro/saturado para texto em fundo claro */
  --pend-falta:       #b5606d;
  --pend-falta-bg:    rgba(209,106,106,0.10);
  /* Teal para "reservar sala" — distingue de retorno/falta (vermelho) */
  --pend-sala:        #3a8a8a;
  --pend-sala-bg:     rgba(58,138,138,0.10);

  /* Warning / atenção (vencido, retorno atrasado) — âmbar terroso calmo.
     Unifica os 3 ambers divergentes que existiam: #D97706 (pacientes),
     #9a6c2d (ficha), #F59E0B (home flag). Mesmo tom do --pend-cobranca. */
  --warning:    #9a6c2d;
  --warning-bg: rgba(245,158,11,0.10);

  /* Bordas */
  --border:                 #D8DCE3;               /* cards, modais — sólida */
  --border-solid:           #D8DCE3;               /* tabelas, separadores, inputs */
  --border-soft:            #E8EBF0;
  --border-glass:           rgba(255,255,255,0.60);
  --border-hairline:        rgba(112,115,147,0.08);  /* hairline neutra (cinza-violeta) */
  --border-hairline-strong: rgba(112,115,147,0.14);  /* hairline mais marcada */

  /* Tints de accent (acompanham body.theme-medico via color-mix) */
  --accent-tint-1:  color-mix(in srgb, var(--accent) 5%, transparent);   /* row hover/active sutil */
  --accent-tint-2:  color-mix(in srgb, var(--accent) 8%, transparent);   /* pill active, btn-icon hover */
  --accent-tint-3:  color-mix(in srgb, var(--accent) 18%, transparent);  /* border de active */
  --accent-dark:    #131F42;                                              /* hover do primary (secretária) */

  /* Texto meta (cinza neutro usado em metadados de tabela) */
  --text-meta:      rgba(112,112,125,0.92);

  /* Avatar soft (variante operacional lilás — compartilhada Pacientes/Configurações) */
  --avatar-soft-bg: rgba(199,210,254,0.34);
  --avatar-soft-fg: #41507B;

  /* Audit log — tons saturados intencionais (contexto técnico, não status operacional) */
  --log-insert:     #16A34A;  --log-insert-bg: rgba(34,197,94,0.10);
  --log-update:     #CA8A04;  --log-update-bg: rgba(234,179,8,0.10);
  --log-delete:     #DC2626;  --log-delete-bg: rgba(239,68,68,0.10);

  /* Toasts — feedback do sistema (vocabulário local, separado de --s-* operacional) */
  --toast-success:  #30A46C;
  --toast-error:    #DC2626;
  --toast-warning:  #D97706;
  --toast-info:     #3B82F6;

  /* Inputs */
  --bg-input:       rgba(0,0,0,0.045);

  /* Sombras */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:  0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10);
  --shadow-shell: 0 1px 2px rgba(52,44,36,0.025), 0 10px 24px rgba(52,44,36,0.04);
  --shadow-card-soft: 0 1px 2px rgba(52,44,36,0.03), 0 12px 32px rgba(52,44,36,0.045);
  --shadow-card-hover: 0 1px 2px rgba(52,44,36,0.03), 0 16px 34px rgba(52,44,36,0.07);

  /* Tipografia */
  --font:           -apple-system, "SF Pro Text", BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display:   -apple-system, "SF Pro Display", BlinkMacSystemFont, "Segoe UI", sans-serif;
  --size-xs:        11px;
  --size-12:        12px;
  --size-sm:        13px;
  --size-14:        14px;
  --size-base:      15px;
  --size-md:        17px;
  --size-lg:        20px;
  --size-xl:        22px;
  --size-2xl:       28px;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* 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;

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* Overlay (drawers, sheets, modais leves) */
  --overlay-backdrop:    rgba(10,14,30,0.28);
  --overlay-backdrop-blur: 3px;
  --easing-pop:          cubic-bezier(0.32, 0.72, 0, 1);
  --duration-fast:       140ms;
  --duration-pop:        200ms;

  /* Drawer */
  --drawer-width-sm: 360px;
  --drawer-width-md: 420px;
  --drawer-width-lg: 520px;
  --drawer-offset:   16px;
  --drawer-radius:   28px;

  /* Drawer — header/footer (Apple-like) */
  --drawer-head-pad-y:    14px;
  --drawer-head-pad-x:    14px;
  --drawer-pill-size:     34px;
  --drawer-pill-radius:   50%;
  --drawer-pill-border:   rgba(112,115,147,0.18);
  --drawer-pill-border-h: rgba(112,115,147,0.28);
  --drawer-pill-bg-hover: rgba(112,115,147,0.08);
  --drawer-pill-gap:       8px;
  --drawer-footer-pad-top:  18px;
  --drawer-footer-pad-bot:  24px;
  --drawer-pill-margin-y: -18px;  /* --drawer-head-pad-y(14) * 1.3 */
  --drawer-pill-margin-x: -18px;  /* --drawer-head-pad-x(14) * 1.3 */
  --drawer-footer-pad-x:    20px;
  --drawer-footer-action-size: 26px;
  --drawer-footer-action-bg-hover: rgba(112,115,147,0.10);
  --drawer-footer-action-gap: 20px;
  --drawer-destructive-pad-y:   4px;
  --drawer-destructive-pad-x:   14px;
  --drawer-destructive-radius:  999px;
  --drawer-destructive-bg-hover: rgba(112,115,147,0.08);
  --drawer-destructive-font:    13px;
  --drawer-destructive-weight:  500;

  /* Eventos administrativos compartilham uma cor em todas as agendas. */
  --ag-admin-color: #B1843E;
  --ag-admin-bg: rgba(177, 132, 62, .13);
  --ag-admin-text: #79551F;

  /* Status */
  --s-agendada:      #7B8FD4;
  --s-agendada-sel:  #BBC7FC;
  --s-agendada-bg:   rgba(187,199,252,0.35);
  --s-confirmada:    #4DA88A;
  --s-confirmada-sel:#B3E0D7;
  --s-confirmada-bg: rgba(179,224,215,0.35);
  --s-atendida:      #5AAACE;
  --s-atendida-sel:  #C8E8F8;
  --s-atendida-bg:   rgba(200,232,248,0.35);
  /* Vermelho para "falta" na Agenda — tom suave para chips de status em fundo colorido */
  --s-falta:         #E07070;
  --s-falta-sel:     #FFCBCB;
  --s-falta-bg:      rgba(255,203,203,0.35);
  --s-cancelada:     #B87AA4;
  --s-cancelada-sel: #ECD5E3;
  --s-cancelada-bg:  rgba(236,213,227,0.35);
  /* ── Agenda Pessoal — paleta pastel exclusiva (5 categorias) ── */
  /* Token de transparência para fundos de chip — preserva a malha da grade
     atrás do chip (mesmo efeito da agenda médica que usa rgba no bg).
     Derivado da cor sólida via color-mix, evita duplicar valores RGB. */
  --pag-chip-bg-alpha: 22%;

  --pag-cat1:       #8B9DD4;  /* lilás suave    — Pessoal  */
  --pag-cat1-bg:    color-mix(in srgb, var(--pag-cat1) var(--pag-chip-bg-alpha), transparent);
  --pag-cat1-sel:   #C5CBEF;
  --pag-cat2:       #6BBFA4;  /* verde-menta    — Trabalho */
  --pag-cat2-bg:    color-mix(in srgb, var(--pag-cat2) var(--pag-chip-bg-alpha), transparent);
  --pag-cat2-sel:   #AADDD2;
  --pag-cat3:       #E8A87C;  /* pêssego        — Saúde    */
  --pag-cat3-bg:    color-mix(in srgb, var(--pag-cat3) var(--pag-chip-bg-alpha), transparent);
  --pag-cat3-sel:   #F4CCAB;
  --pag-cat4:       #79BCCC;  /* azul-céu       — Família  */
  --pag-cat4-bg:    color-mix(in srgb, var(--pag-cat4) var(--pag-chip-bg-alpha), transparent);
  --pag-cat4-sel:   #B3DDE8;
  --pag-cat5:       #C49ABF;  /* lavanda-rosa   — Outros   */
  --pag-cat5-bg:    color-mix(in srgb, var(--pag-cat5) var(--pag-chip-bg-alpha), transparent);
  --pag-cat5-sel:   #DFC3DA;

  --s-pendente:        #E07070;
  --s-pendente-bg:     rgba(255,203,203,0.35);
  --s-pendente-border: rgba(224,112,112,0.22);
  --s-paga:            #4DA88A;
  --s-paga-bg:         rgba(179,224,215,0.35);
  --s-paga-border:     rgba(77,168,138,0.22);
  /* Cores de valor como TEXTO sobre branco (WCAG AA). O --s-paga pastel é
     badge-bg (2.88:1 como texto) — não usar como cor de texto. */
  --fin-receita-fg:    #227A50;   /* 5.29:1 */
  --fin-despesa-fg:    #A54C61;   /* 5.52:1 (era literal em .fin-valor-despesa) */
  --s-vencida:         #E07070;
  --s-vencida-bg:      rgba(255,203,203,0.35);
  --s-vencida-border:  rgba(224,112,112,0.22);
  --s-cancelada-border: rgba(184,122,164,0.22);
  --s-atendida-border:  rgba(90,170,206,0.18);

  /* Layout */
  --sidebar-w:       220px;
  --sidebar-w-mini:  64px;
  --topbar-h:        56px;

  /* Focus rings (Apple-like, só keyboard) */
  --focus-ring:        0 0 0 3px rgba(82, 102, 235, 0.22);
  --focus-ring-danger: 0 0 0 3px rgba(220, 38, 38, 0.22);
}

/* Tema do médico: alias --accent → teal e sidebar com tons verdes derivados
   por hue rotation dos azuis originais (mesma alpha, mesma luminosidade,
   só desloca o hue). Toggle via document.body.classList em showApp(). */
body.theme-medico {
  --accent:        var(--teal);
  --accent-light:  var(--teal-light);
  --accent-hover:  var(--teal-hover);
  --accent-dark:   #2A4030;  /* sage escuro pra hover de primary */

  /* Re-declara os tints porque color-mix() resolve var(--accent) no escopo
     onde é declarado. No :root o --accent era navy, então os tints ficaram
     congelados em navy. Redeclarar aqui usa o --accent local (sage). */
  --accent-tint-1: color-mix(in srgb, var(--accent) 5%, transparent);
  --accent-tint-2: color-mix(in srgb, var(--accent) 8%, transparent);
  --accent-tint-3: color-mix(in srgb, var(--accent) 18%, transparent);

  /* Sidebar liquid glass — clara como a da secretária, com o MESMO degradê
     (top mais pigmentado que o bottom, glows presentes), só deslocando o hue
     de azul-acinzentado pra sage: G um toque acima de R/B dá o hint verde
     sem voltar ao verde escuro pesado. Espelha o gap top↔bottom do :root. */
  --sidebar-glass-top:    rgba(220,236,222,0.94);
  --sidebar-glass-bottom: rgba(236,243,236,0.66);
  --sidebar-glass-core:   rgba(224,234,225,0.14);
  --sidebar-item-hover:   rgba(206,224,209,0.30);
  --sidebar-item-active:  rgba(196,218,199,0.38);
  --sidebar-item-border:  rgba(108,138,112,0.10);

  /* Sidebar gradients — glows sage visíveis pro liquid glass não chapar */
  --sidebar-glow-a:       rgba(140,196,152,0.20);
  --sidebar-glow-b:       rgba(178,206,184,0.18);
  --sidebar-tint:         rgba(150,196,162,0.08);
  --sidebar-tint-fade:    rgba(150,196,162,0.03);
}

/* ============================================================
   Reset & base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font);
  font-size: var(--size-base);
  font-weight: var(--weight-regular);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

/* Tema do médico: ambient gradient sutil atrás de tudo, dá ao liquid glass
   algo pra refrair. Sem isso, o glass na sidebar vira visualmente plano. */
body.theme-medico {
  background:
    radial-gradient(ellipse 80% 50% at 0% 0%, rgba(125,150,125,0.08) 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 100% 100%, rgba(170,195,170,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 100% 60% at 50% 50%, rgba(208,218,208,0.04) 0%, transparent 70%),
    var(--bg);
  background-attachment: fixed;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; }
img { max-width: 100%; }
ul, ol { list-style: none; }

/* Focus rings — Apple HIG: só no keyboard */
*:focus { outline: none; }
*:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 6px;
}
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  box-shadow: var(--focus-ring);
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  box-shadow: var(--focus-ring);
  border-color: var(--accent);
}
.btn-destructive:focus-visible {
  box-shadow: var(--focus-ring-danger);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Utilitários
   ============================================================ */
.hidden  { display: none !important; }
.text-muted  { color: var(--text-muted); font-size: var(--size-sm); }
.text-xmuted { color: var(--text-xmuted); font-size: var(--size-xs); }

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 10000;
  transform: translateY(-140%);
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-fast);
}
.skip-link:focus-visible {
  transform: translateY(0);
  box-shadow: var(--focus-ring), var(--shadow-md);
}

/* ============================================================
   Tela de Login
   ============================================================ */
.login-screen {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(180,170,220,0.30) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(160,165,215,0.24) 0%, transparent 55%),
    #F2F3F7;
  padding: var(--space-4);
  transition: background 320ms ease-out;
}

/* Preview do tema médico aplicado quando o email digitado bate com role=medico.
   Detectado via RPC role_para_login() no blur do #login-email. Espelha o
   verde do body.theme-medico — mantido como classe local pra não exigir
   toggle no body antes do submit (evita flicker em outros componentes). */
.login-screen.theme-medico-preview {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(125,150,125,0.30) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(170,195,170,0.24) 0%, transparent 55%),
    #EEF2EE;
}
.login-screen.theme-medico-preview .login-icon rect { fill: #2F4A3A; }
.login-screen.theme-medico-preview .login-icon polygon:nth-of-type(3) { fill: #2F4A3A; }
.login-screen.theme-medico-preview .login-icon { filter: drop-shadow(0 4px 16px rgba(47,74,58,0.25)); }
.login-screen.theme-medico-preview .login-card input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-light);
}
.login-screen.theme-medico-preview .btn-primary {
  background: var(--teal);
}
.login-screen.theme-medico-preview .btn-primary:hover {
  background: var(--teal-hover);
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: rgba(235,236,242,0.55);
  backdrop-filter: blur(40px) saturate(1.6);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.70);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
  animation: fadeInDown 280ms ease-out both;
}

.login-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.login-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 16px rgba(27,42,74,0.25));
}

.login-wordmark {
  font-family: -apple-system, "SF Pro Text", BlinkMacSystemFont, sans-serif;
  font-size: var(--size-md);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  color: var(--text-muted);
  line-height: 1;
}

.login-welcome {
  font-family: -apple-system, "SF Pro Display", BlinkMacSystemFont, sans-serif;
  font-size: var(--size-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.1;
  margin-top: var(--space-3);
}

.login-card .field {
  margin-bottom: var(--space-4);
}

.login-card label {
  display: block;
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
  margin-bottom: var(--space-2);
}

.login-card input {
  width: 100%;
  height: 42px;
  padding: 0 var(--space-3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: var(--size-base);
  transition: border-color 150ms, box-shadow 150ms;
}

.login-card input::placeholder { color: var(--text-xmuted); }
.login-card input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px var(--navy-light);
}

.input-icon-right { position: relative; }
.input-icon-right input { padding-right: 40px; }
.input-icon-right .btn-icon,
.input-icon-right .btn-icon:hover,
.input-icon-right .btn-icon:focus,
.input-icon-right .btn-icon:focus-visible,
.input-icon-right .btn-icon:active {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  cursor: pointer;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-height: 0;
  box-shadow: none;
}
.input-icon-right .btn-icon { color: var(--text-muted); }
.input-icon-right .btn-icon:hover { color: var(--text); }
.input-icon-right .btn-icon svg {
  display: block;
  pointer-events: none;
}

.login-error {
  font-size: var(--size-sm);
  color: #DC2626;
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: rgba(220,38,38,0.06);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(220,38,38,0.15);
}

.btn-full { width: 100%; }

.login-forgot {
  display: block;
  text-align: center;
  margin-top: var(--space-4);
  font-size: var(--size-sm);
  color: var(--text-muted);
  transition: color 150ms;
}
.login-forgot:hover { color: var(--navy); }

/* Confirmação do pedido de link de redefinição (#forgot-sent) */
.login-sent {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3);
  margin-bottom: var(--space-4);
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.login-sent-icon { color: var(--navy); }

.login-sent-msg {
  font-size: var(--size-sm);
  color: var(--text);
  line-height: 1.45;
}

/* Aviso que evita o erro real: pedir link novo invalida o anterior, e a pessoa
   acaba abrindo o e-mail velho e caindo em "link expirado". */
.login-sent-warn {
  font-size: var(--size-xs);
  color: var(--text-muted);
  line-height: 1.45;
}

/* ============================================================
   App shell
   ============================================================ */
.app {
  display: flex;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
}

/* ============================================================
   Sidebar
   ============================================================ */
.sidebar {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  z-index: 200;
  transition: width 220ms ease, transform 250ms ease;
  will-change: width;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    1px 0 0 rgba(121,129,157,0.08),
    16px 0 26px -30px rgba(104,116,144,0.18);
}

.sidebar::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(148% 68% at -14% 2%, var(--sidebar-glow-a) 0%, transparent 40%),
    radial-gradient(128% 84% at 20% 112%, var(--sidebar-glow-b) 0%, transparent 52%),
    linear-gradient(168deg, var(--sidebar-tint) 0%, var(--sidebar-tint-fade) 32%, transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,0.11) 0%, rgba(255,255,255,0.02) 24%, transparent 44%),
    linear-gradient(180deg, var(--sidebar-glass-top) 0%, var(--sidebar-glass-bottom) 100%),
    var(--sidebar-glass-core);
  backdrop-filter: blur(26px) saturate(118%) brightness(0.995);
  -webkit-backdrop-filter: blur(26px) saturate(118%) brightness(0.995);
  border-right: 1px solid rgba(255,255,255,0.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24);
  pointer-events: none;
  z-index: 0;
}

.sidebar::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: rgba(121,129,157,0.10);
  pointer-events: none;
  z-index: 0;
}

/* ────────────────────────────────────────────────────────────
   Sidebar Liquid Glass (tema do médico — visionOS/iOS 26 vibe).
   Translucidez maior, blur denso, specular highlight no topo,
   refração sutil nas bordas, borda interna luminosa dupla.
   ──────────────────────────────────────────────────────────── */
body.theme-medico .sidebar {
  box-shadow:
    1px 0 0 rgba(61,90,61,0.10),
    20px 0 40px -32px rgba(40,60,40,0.22);
}

body.theme-medico .sidebar::before {
  /* Liquid glass — topo escuro/saturado, meio com reflexo, base clara.
     Highlight especular movido pro meio (luz oblíqua atravessando o
     vidro) em vez do topo. Topo recebe glow verde sage marcado. */
  background:
    /* Highlight central — clareia no meio-baixo (vidro recebendo luz central) */
    radial-gradient(ellipse 90% 50% at 50% 65%, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0.08) 38%, transparent 70%),
    /* Glow sage descendo do topo (mantém a parte escura em cima) */
    radial-gradient(160% 50% at 30% -8%, var(--sidebar-glow-a) 0%, transparent 60%),
    /* Glow sage canto inferior (continua do tema sage) */
    radial-gradient(140% 70% at 20% 110%, var(--sidebar-glow-b) 0%, transparent 60%),
    /* Sombra sutil interna na lateral direita (curvatura) */
    linear-gradient(90deg, transparent 0%, transparent 88%, rgba(61,90,61,0.05) 96%, rgba(61,90,61,0.10) 100%),
    /* Base de cor — gradiente top-down (top mais saturado) */
    linear-gradient(180deg, var(--sidebar-glass-top) 0%, var(--sidebar-glass-bottom) 100%),
    var(--sidebar-glass-core);
  backdrop-filter: blur(38px) saturate(170%) brightness(1.02);
  -webkit-backdrop-filter: blur(38px) saturate(170%) brightness(1.02);
  border-right: 1px solid rgba(255,255,255,0.45);
  box-shadow:
    /* Bordas: top sage (sem branco), base luminosa */
    inset 0 1px 0 rgba(61,90,61,0.20),
    inset 1px 0 0 rgba(255,255,255,0.18),
    inset -1px 0 0 rgba(61,90,61,0.14),
    inset 0 -1px 0 rgba(255,255,255,0.32),
    0 0 0 1px rgba(255,255,255,0.10);
}

body.theme-medico .sidebar::after {
  /* Linha vertical da borda direita com leve refração colorida */
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.20) 0%,
    rgba(61,90,61,0.18) 50%,
    rgba(255,255,255,0.10) 100%
  );
}

/* Texto/ícones da sidebar do médico em accent (sage). Estado padrão usa
   tom mais translúcido; hover/active aumentam pra accent puro. */
body.theme-medico .sidebar-logo-text,
body.theme-medico .sidebar-item,
body.theme-medico .sidebar-logout,
body.theme-medico .sidebar-user-name {
  color: color-mix(in srgb, var(--accent) 78%, transparent);
}

body.theme-medico .sidebar-user-role {
  color: color-mix(in srgb, var(--accent) 58%, transparent);
}

/* hover/active = accent puro. Dupla classe no active vence a cor base
   (color-mix 78%) por especificidade + ordem; :hover vence por pseudo-classe. */
body.theme-medico .sidebar-item:hover,
body.theme-medico .sidebar-item.sidebar-item-active,
body.theme-medico .sidebar-logout:hover {
  color: var(--accent);
}

/* Item ativo não escurece no hover — já está selecionado */
body.theme-medico .sidebar-item.sidebar-item-active:hover {
  background: var(--sidebar-item-active);
}

body.theme-medico .sidebar-item.sidebar-item-active {
  border-color: var(--sidebar-item-border);
  font-weight: var(--weight-semibold);
}

/* Mini sidebar (colapsada) */
.sidebar-collapsed {
  width: var(--sidebar-w-mini);
}

/* Fix: Safari não anima width corretamente em elementos com backdrop-filter — remove o filtro durante a transição */
.sidebar-transitioning {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.sidebar-transitioning::before {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Fix: no Safari, camadas com backdrop-filter podem "engolir" clique de filhos */
.sidebar > * {
  position: relative;
  z-index: 1;
}

.sidebar-collapsed .sidebar-logo-text,
.sidebar-collapsed .sidebar-item span,
.sidebar-collapsed .sidebar-user-info {
  opacity: 0;
  pointer-events: none;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.sidebar-collapsed .sidebar-header {
  justify-content: center;
  padding: 0;
  gap: 0;
}

.sidebar-collapsed .sidebar-nav {
  padding: var(--space-3) 0;
  align-items: stretch;
  gap: var(--space-2);
}

.sidebar-collapsed .sidebar-item {
  position: relative;
  justify-content: center;
  padding: 0;
  width: 44px;
  height: 44px;
  margin: 0 auto;
  border-radius: 14px;
  gap: 0;
}

/* Colapsada: badge sai do fluxo (o min-width:18px venceria o width:0 da regra
   de span e o margin-left:auto deslocaria o ícone). Vira ponto sobre o ícone. */
.sidebar-collapsed .sidebar-item-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 8px;
  width: 8px;
  height: 8px;
  padding: 0;
  font-size: 0;
  margin: 0;
}

.sidebar-collapsed .sidebar-footer {
  align-items: center;
  padding: var(--space-3) 0;
}

/* Mini: avatar em cima, botão sair embaixo, ambos centralizados. */
.sidebar-collapsed .sidebar-user {
  flex-direction: column;
  gap: var(--space-2);
  padding: 0;
}
.sidebar-collapsed .sidebar-user-info {
  display: none;
}

.sidebar-collapsed .sidebar-logout {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border-radius: 14px;
}

.sidebar-collapsed .sidebar-nav-divider {
  width: 24px;
  margin: var(--space-2) auto;
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: var(--topbar-h);
  padding: 0 14px;
  color: var(--shell-ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(124,140,168,0.10);
  flex-shrink: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background 140ms ease;
}
.sidebar-header:hover { background: var(--accent-tint-1); }

.sidebar-brand-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: block;
  color: var(--accent);
}

.sidebar-item svg,
.sidebar-logout-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.sidebar-collapsed .sidebar-brand-icon {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  transform: none;
}

.sidebar-logo-text {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--shell-ink);
}

.sidebar-nav {
  flex: 1;
  padding: var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  overflow-y: auto;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 9px var(--space-3);
  border-radius: var(--radius-md);
  color: var(--shell-muted);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition: background 140ms, color 140ms, border-color 140ms, box-shadow 140ms;
}

.sidebar-item:hover {
  background: var(--sidebar-item-hover);
  border-color: var(--sidebar-item-border);
  color: var(--shell-ink);
}
/* feedback de toque (mobile não tem hover — Bruna no Android) */
.sidebar-item:active {
  transform: scale(0.98);
  transition: transform 80ms;
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-item:active { transform: none; }
}

/* Dupla classe (.sidebar-item.sidebar-item-active = 0,0,2,0) vence
   .sidebar-item:hover (mesma especificidade, vem antes) sem !important.
   O elemento sempre tem as duas classes (sidebar.js). */
.sidebar-item.sidebar-item-active {
  background: var(--sidebar-item-active);
  border-color: var(--sidebar-item-border);
  color: var(--shell-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28);
  font-weight: var(--weight-medium);
}

/* ============================================================
   Sidebar — grupo com sub-itens (Gestão) e flyout da recolhida.
   Padrão de sub-itens do RAE (spec 3.1): pai em vidro quando um filho é
   a rota atual, filho ativo só em peso, acordeão por grid-template-rows.
   ============================================================ */
.sidebar-group-head { cursor: default; }

.sidebar-group-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.sidebar-group-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--space-6);
  height: var(--space-6);
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background var(--duration-fast) ease;
}
.sidebar-group-chevron:hover { background: var(--hover-subtle); }
.sidebar-group-chevron svg { transition: transform var(--duration-fast) ease; }
.sidebar-group-open .sidebar-group-chevron svg { transform: rotate(90deg); }

.sidebar-subnav {
  --sidebar-icon-w: var(--space-5);
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--duration-pop) ease, opacity var(--duration-fast) ease;
}
.sidebar-group-open .sidebar-subnav { grid-template-rows: 1fr; opacity: 1; }
.sidebar-subnav-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-subnav,
  .sidebar-group-chevron svg { transition: none; }
}

/* Sub-item: mais baixo, texto alinhado ao rótulo do pai (padding + ícone + gap). */
.sidebar-item.sidebar-subitem {
  padding: var(--space-2) var(--space-3) var(--space-2) calc(var(--space-3) + var(--sidebar-icon-w) + var(--space-3));
  font-size: var(--size-sm);
  font-weight: var(--weight-regular);
}
.sidebar-item.sidebar-subitem.sidebar-subitem-active {
  background: none;
  border-color: transparent;
  color: var(--shell-ink);
  font-weight: var(--weight-semibold);
  box-shadow: none;
}

.sidebar-collapsed .sidebar-group-chevron,
.sidebar-collapsed .sidebar-subnav { display: none; }
.sidebar-collapsed .sidebar-group-link { justify-content: center; }

/* Flyout: receita do .notif-popover. position fixed porque a sidebar tem overflow hidden. */
.sidebar-flyout {
  position: fixed;
  z-index: var(--z-dropdown);
  min-width: calc(var(--sidebar-w) - var(--space-10));
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--glass-modal);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--border-hairline-strong);
  box-shadow: var(--shadow-card-soft);
}
.sidebar-flyout-item {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  color: var(--shell-ink);
  text-decoration: none;
  white-space: nowrap;
}
.sidebar-flyout-item:hover,
.sidebar-flyout-item.sidebar-flyout-item-active { background: var(--sidebar-item-hover); }
.sidebar-flyout-item.sidebar-flyout-item-active { font-weight: var(--weight-semibold); }

.sidebar-footer {
  padding: var(--space-3);
  border-top: 1px solid rgba(124,140,168,0.10);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Identidade do usuário logado: avatar + nome/role à esquerda, ícone de sair
   à direita. Vale pras duas roles (a shell é a mesma). */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 6px;
}
.sidebar-user-avatar {
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--accent-light);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
}
.sidebar-user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  line-height: 1.25;
}
.sidebar-user-name {
  font-size: var(--size-base);
  font-weight: var(--weight-medium);
  color: var(--shell-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-user-role {
  font-size: var(--size-xs);
  color: var(--shell-muted);
}

body.theme-medico .sidebar-footer {
  border-top-color: rgba(61,90,61,0.18);
  padding-top: var(--space-4);
}

.sidebar-nav-divider {
  height: 1px;
  background: rgba(124,140,168,0.08);
  margin: var(--space-2) var(--space-3);
}

.sidebar-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: var(--radius-md);
  color: var(--shell-muted);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 140ms, color 140ms, border-color 140ms;
}
.sidebar-logout:hover { background: rgba(216,224,235,0.28); border-color: rgba(111,124,151,0.06); color: var(--shell-ink); }

/* ============================================================
   Main wrapper
   ============================================================ */
.main-wrapper {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  transition: margin-left 220ms ease;
  will-change: margin-left;
}

.sidebar.sidebar-collapsed ~ .main-wrapper {
  margin-left: var(--sidebar-w-mini);
}

/* ============================================================
   Topbar
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6) 0 var(--space-4);
  z-index: 100;
  flex-shrink: 0;
  gap: var(--space-5);
  isolation: isolate;
}

.topbar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(18px) saturate(100%);
  -webkit-backdrop-filter: blur(18px) saturate(100%);
  border-bottom: 1px solid rgba(121,129,157,0.08);
  box-shadow: 0 1px 0 rgba(255,255,255,0.44);
  pointer-events: none;
  z-index: 0;
}

.topbar > * {
  position: relative;
  z-index: 1;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding-left: 0;
}

.page-title { display: none; }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.topbar-datetime {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 32px;
  padding: 0 10px;
  background: rgba(255,255,255,0.46);
  border: 1px solid rgba(121,129,157,0.10);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.60);
  font-size: 12px;
  color: var(--shell-muted);
  white-space: nowrap;
}

/* Versão esquerda — sem pill, texto simples ao lado do hamburger */
.topbar-datetime-left {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  gap: 10px;
}

/* Botão "Brief" na topbar — pílula discreta ao lado da data/hora. Gera a folha
   imprimível do dia (Bruna → brief da secretária; médico → brief do médico). */
.topbar-brief-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(121,129,157,0.16);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.46);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.60);
  color: var(--shell-muted);
  font-size: 12px;
  font-weight: var(--weight-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.topbar-brief-btn svg { flex-shrink: 0; color: #F5A623; }
.topbar-brief-btn:hover {
  background: rgba(255,255,255,0.72);
  border-color: rgba(121,129,157,0.28);
  color: var(--shell-ink, #1a1a1a);
}
.topbar-brief-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Mobile: só o solzinho, sem label (topbar apertada) */
@media (max-width: 767px) {
  .topbar-brief-btn { padding: 0 8px; }
  .topbar-brief-btn span { display: none; }
}

.topbar-datetime-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--shell-faint);
}

.topbar-date {
  color: var(--shell-muted);
  font-size: 13px;
  font-weight: var(--weight-regular);
  letter-spacing: 0;
}

.topbar-separator {
  width: 4px;
  height: 4px;
  background: #AEB7C7;
  border-radius: 50%;
  flex-shrink: 0;
}

.topbar-clock-wrap {
  display: flex;
  align-items: center;
  gap: 2px;
}

.flip-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  width: auto;
  height: auto;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--shell-ink);
  line-height: 1;
}

.flip-sep {
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--shell-faint);
  line-height: 1;
  margin: 0;
}

.hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--shell-faint);
  cursor: pointer;
  padding: 0;
  transition: color 140ms ease, background 140ms ease;
}
@media (max-width: 780px) {
  .hamburger { display: inline-flex; }
}
.hamburger:hover {
  color: var(--shell-ink);
  background: rgba(27,43,75,0.06);
}

/* Filtro de médico — dropdown estilizado com busca inline */
.mf-root {
  position: relative;
  width: 224px;
}
.mf-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  max-height: 36px;
  overflow: hidden;
  width: 100%;
  padding: 0 9px 0 10px;
  background: var(--chrome-soft);
  border: 1px solid var(--chrome-soft-border);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
  cursor: pointer;
  transition: border-color 150ms, background 150ms, box-shadow 150ms;
  box-sizing: border-box;
}
.mf-trigger:hover {
  background: var(--chrome-soft-hover);
  border-color: rgba(132,144,169,0.12);
}
.mf-trigger:focus-within {
  background: rgba(245,247,250,0.88);
  border-color: rgba(136,128,120,0.12);
  box-shadow: 0 0 0 3px rgba(196,188,180,0.05), inset 0 1px 0 rgba(255,255,255,0.72);
}
/* .mf-root .mf-input (0,0,2,0) vence input[type=text] global (0,0,1,1)
   por especificidade maior, independente da ordem no arquivo — sem !important */
.mf-root .mf-input {
  flex: 1;
  background: transparent;
  border: none;
  font-size: 13px;
  color: var(--shell-ink);
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  height: 22px;
  padding: 0;
  margin: 0;
  cursor: pointer;
  line-height: 22px;
  display: block;
}
.mf-root .mf-input:focus {
  cursor: text;
  outline: none;
  box-shadow: none;
  border-color: transparent;
}
.mf-input::placeholder { color: var(--shell-muted); }
.mf-clear {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  background: rgba(0,0,0,0.07);
  border-radius: 50%;
  color: var(--shell-muted);
  cursor: pointer;
  padding: 0;
  transition: background 150ms, color 150ms;
}
.mf-clear:hover {
  background: rgba(0,0,0,0.13);
  color: var(--text);
}
.mf-chevron {
  flex-shrink: 0;
  color: var(--shell-faint);
  transition: transform 200ms;
  pointer-events: none;
}
.mf-root.mf-open .mf-chevron { transform: rotate(180deg); }
.mf-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: rgba(249,250,252,0.92);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid rgba(132,144,169,0.10);
  border-radius: 14px;
  box-shadow: var(--shadow-card-soft);
  z-index: 200;
  max-height: 220px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-1) 0;
}
.mf-item {
  padding: var(--space-2) var(--space-3);
  font-size: var(--size-sm);
  cursor: pointer;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  box-sizing: border-box;
}
.mf-item:hover { background: rgba(238,241,246,0.66); }
.mf-item-active { color: var(--accent); font-weight: var(--weight-semibold); }
.mf-empty { padding: var(--space-2) var(--space-3); font-size: var(--size-sm); color: var(--text-muted); }

/* ============================================================
   Notificações
   ============================================================ */
.notif-wrap { position: relative; }

.topbar .btn-icon,
.topbar .mf-root,
.notif-wrap,
.sidebar .sidebar-item,
.sidebar .sidebar-logout {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

.notif-badge {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  background: var(--s-cancelada);
  border-radius: var(--radius-pill);
  border: 2px solid rgba(255,255,255,0.94);
  font-size: 9px; font-weight: 700;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  animation: badgePop 280ms cubic-bezier(0.32, 0.72, 0, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .notif-badge { animation: none; }
}

.notif-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 300px;
  max-height: 340px;
  background: rgba(255,255,255,0.97);
  border: 1px solid rgba(27,43,75,0.08);
  border-radius: 18px;
  box-shadow: var(--shadow-card-soft);
  z-index: 300;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: fadeInDown 180ms ease-out both;
}

.notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 10px 16px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
  background: rgba(255,255,255,0.97);
}
.notif-header-label {
  font-size: var(--size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
}
.notif-header-clear {
  font-size: var(--size-xs);
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.notif-header-clear:hover { color: var(--accent); background: var(--bg-subtle); }

.notif-list {
  overflow-y: auto;
  flex: 1;
}

.notif-wrap .btn-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(255,255,255,0.60);
  border: 1px solid var(--shell-line);
  color: #778397;
}

.notif-wrap .btn-icon:hover {
  background: rgba(255,255,255,0.84);
  border-color: rgba(27,43,75,0.12);
  color: var(--accent);
}

.notif-empty {
  padding: var(--space-4);
  font-size: var(--size-sm);
  color: var(--text-muted);
  text-align: center;
}

.notif-item {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: var(--space-2) var(--space-3);
  align-items: start;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-soft);
  transition: background 120ms;
  cursor: pointer;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg-subtle); }

.notif-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2px;
  color: var(--text-muted);
}
/* Cores semânticas por tipo de notificação. Tokens compartilhados com
   pendências (--pend-cobranca/falta/nf), badges (--patient-status-active)
   e bloqueios (--violet) — mantém coerência visual no app. */
.notif-icon--cobranca_consulta,
.notif-icon--cobranca_falta,
.notif-icon--cobranca_criada,
.notif-icon--timeline_cobranca       { color: var(--pend-cobranca); }

.notif-icon--timeline_falta,
.notif-icon--aviso_falta_registrado  { color: var(--pend-falta); }

.notif-icon--timeline_reagendamento,
.notif-icon--bloqueio_agenda         { color: #7A69AE; }  /* violeta — vocabulário local de notificação */

.notif-icon--timeline_nf             { color: var(--pend-nf); }

.notif-icon--timeline_confirmacao    { color: var(--patient-status-active); }

.notif-icon--timeline_dados          { color: var(--text-cool); }

.notif-icon--relatorio_enviado       { color: var(--accent); }

/* Lote de convênio aberto perto/depois do dia_fechamento — entry virtual.
   Cor do ícone segue a severidade; .notif-time vira badge "Atrasado" / "Lembrete".
   Vermelho/amarelo aqui são vocabulário local de severidade — não vazam pra
   --s-* operacional (que é pastel) nem pra --toast-* (que é sistema). */
.notif-item--vermelha .notif-icon--lote_convenio { color: #C62828; }
.notif-item--amarela  .notif-icon--lote_convenio { color: #B97700; }
.notif-item--vermelha .notif-time {
  color: #C62828;
  font-weight: var(--weight-medium);
}
.notif-item--amarela .notif-time {
  color: #B97700;
  font-weight: var(--weight-medium);
}

.notif-item-body { display: flex; flex-direction: column; gap: var(--space-1); }
.notif-content { font-size: var(--size-sm); line-height: 1.45; }
.notif-time    { font-size: var(--size-xs); color: var(--text-xmuted); }

/* ============================================================
   View
   ============================================================ */
.view-header {
  padding: 24px 56px 10px;
  flex-shrink: 0;
}

.view-header-greeting {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: var(--weight-medium);
  color: var(--home-text-strong);
  letter-spacing: -0.03em;
  margin: 0;
}

.view-header-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: var(--weight-medium);
  color: var(--home-text-strong);
  letter-spacing: -0.02em;
  margin: 0;
}

.view {
  flex: 1;
  overflow-y: auto;
  padding: 20px 64px 32px;
}

.view--home {
  padding: 8px 56px 48px;
  background: #FFFFFF;
}

.view--agenda {
  padding: 12px 56px 24px;
}


.view-content {
  width: 100%;
}

/* ============================================================
   Botões
   ============================================================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 36px;
  padding: 0 var(--space-4);
  background: var(--accent);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  transition: opacity 150ms;
}
.btn-primary:hover   { opacity: 0.90; }
.btn-primary:active  { opacity: 0.82; }
.btn-primary:disabled { opacity: 0.50; cursor: not-allowed; }


.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 36px;
  padding: 0 var(--space-4);
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  transition: background 150ms, border-color 150ms;
}
.btn-secondary:hover { background: var(--bg-subtle); border-color: var(--text-xmuted); }

/* Variante só-ícone: quadrada (largura = altura do btn-secondary), sem padding
   lateral. Para botões de ação compactos com tooltip (ex: sincronizar webcal). */
.btn-secondary--icon {
  width: 36px;
  padding: 0;
  flex-shrink: 0;
}

.btn-danger-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 var(--space-4);
  background: transparent;
  color: #DC2626;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: opacity 150ms;
  font-family: var(--font);
}
.btn-danger-ghost:hover { opacity: 0.75; }

.btn-destructive {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 36px;
  padding: 0 var(--space-4);
  background: transparent;
  color: #DC2626;
  border: 1px solid #DC2626;
  border-radius: var(--radius-md);
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  transition: background 150ms;
}
.btn-destructive:hover { background: rgba(220,38,38,0.06); }

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-muted);
  transition: background 140ms, color 140ms;
}
.btn-icon:hover { background: var(--accent-light); color: var(--accent); }

/* Active state — press feedback (Apple HIG) */
.btn-primary,
.btn-secondary,
.btn-destructive,
.btn-icon {
  transition:
    background 150ms ease,
    border-color 150ms ease,
    color 140ms ease,
    box-shadow 150ms ease,
    transform 120ms cubic-bezier(0.32, 0.72, 0, 1);
}
.btn-primary:active,
.btn-secondary:active,
.btn-destructive:active,
.btn-icon:active {
  transform: scale(0.97);
}

.action-pop-item:active,
.home-pend-row--active:active,
.pend-tipo-item:active {
  transform: scale(0.97);
}

.drawer-pill:active,
.filter-pill:active,
.modal-close:active,
.drawer-footer-action:active {
  transform: scale(0.92);
  transition: transform 100ms cubic-bezier(0.32, 0.72, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary:active,
  .btn-secondary:active,
  .btn-destructive:active,
  .btn-icon:active,
  .action-pop-item:active,
  .home-pend-row--active:active,
  .pend-tipo-item:active,
  .drawer-pill:active,
  .filter-pill:active,
  .modal-close:active,
  .drawer-footer-action:active {
    transform: none;
  }
}

/* ============================================================
   Campos de formulário
   ============================================================ */
.field { display: flex; flex-direction: column; gap: var(--space-1); }

.field label {
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="url"],
#rps-prazos-desde,
select,
textarea {
  height: 38px;
  padding: 0 var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--size-base);
  transition: border-color 150ms, box-shadow 150ms;
  width: 100%;
}

textarea {
  height: auto;
  padding: var(--space-2) var(--space-3);
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

/* Validação inline no blur (input-masks.js) — campo inválido + mensagem */
.field--invalid input {
  border-color: var(--error);
}
.field--invalid input:focus {
  border-color: var(--error);
  box-shadow: var(--focus-ring-danger);
}
.field-error-msg {
  font-size: var(--size-xs);
  color: var(--error);
}

/* Pill-style para inputs date/time (Apple-like) */
.input-pill,
input.input-pill[type="date"],
input.input-pill[type="time"],
input.input-pill[type="datetime-local"] {
  height: 32px;
  padding: 0 10px;
  background: rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 8px;
  color: var(--text);
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  box-shadow: none;
  transition: background var(--duration-fast);
}
.input-pill:hover { background: rgba(0, 0, 0, 0.08); }
.input-pill:focus {
  background: rgba(0, 0, 0, 0.08);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

input:focus, select:focus, textarea:focus {
  outline: none;
}

input::placeholder, textarea::placeholder { color: var(--text-xmuted); }

/* ============================================================
   Cards
   ============================================================ */
.card {
  background: var(--bg-card);
  border: 0.5px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.card-title {
  font-size: var(--size-base);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
}

/* ============================================================
   Tabelas
   ============================================================ */
.table-wrap  { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--size-sm);
}

thead th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border-solid);
  white-space: nowrap;
}

tbody tr {
  border-bottom: 1px solid var(--border-solid);
  transition: background 120ms;
}
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: rgba(17,24,39,0.04); }
tbody tr:active { background: rgba(17,24,39,0.07); }

tbody td {
  padding: 11px var(--space-3);
  vertical-align: middle;
}

/* ============================================================
   Badges de status
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.status-badge,
.status-badge-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: var(--size-xs);
  font-weight: var(--weight-medium);
  line-height: 1;
  white-space: nowrap;
}

.status-badge--interactive,
.status-badge-sm--interactive {
  cursor: pointer;
  user-select: none;
  transition: filter 140ms;
}

/* Tons semânticos unificados — pastel suave */
.status-badge--neutral  { background: rgba(0,0,0,0.05);       color: var(--text-muted); }
.status-badge--success  { background: var(--s-paga-bg);       color: var(--s-paga); }
.status-badge--info     { background: var(--s-atendida-bg);   color: var(--s-atendida); }
.status-badge--pending  { background: var(--s-agendada-bg);   color: var(--s-agendada); }
.status-badge--warning  { background: var(--s-pendente-bg);   color: var(--s-pendente); }
.status-badge--danger   { background: var(--s-cancelada-bg);  color: var(--s-cancelada); }
.status-badge--confirmed { background: var(--s-confirmada-bg); color: var(--s-confirmada); }
.status-badge--isento   { background: rgba(180, 130, 70, 0.10); color: rgba(140, 95, 45, 0.95); }

/* ============================================================
   Avatar
   ============================================================ */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--radius-pill);
  background: var(--accent-light);
  color: var(--accent);
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  flex-shrink: 0;
}

/* ============================================================
   Modais
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Acima de .drawer-sheet (1200), .ag-detail-pop (9500), .pag-detail-pop
     (9500), backdrop mobile (9600) — pra modais abertos de dentro de
     drawer ou de balão da agenda (ex: openConfirm, openScopeModal)
     ficarem visíveis e clicáveis. Abaixo só de toast (9999). */
  z-index: 9700;
  padding: var(--space-4);
  opacity: 0;
  transition: opacity 200ms ease-out;
}

.modal-overlay.modal-visible { opacity: 1; }

.modal-overlay.modal-visible .modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modal-overlay-mobile {
  align-items: flex-end;
  padding: 0;
}

.modal {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 48px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06);
  width: 100%;
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  overflow: clip;
  transform: translateY(16px) scale(0.97);
  opacity: 0;
  transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1), opacity 200ms ease-out;
}

.modal-sm { max-width: 400px; }
.modal-md { max-width: 560px; }
.modal-lg { max-width: 760px; }

.modal-hide {
  animation: fadeOut 180ms ease-in both;
}

@keyframes modal-in {
  from { transform: translateY(20px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* Modal empilhado (abre sobre outro modal). Precisa ficar acima do .modal-overlay
   base (9700), não abaixo — o 410 original era bug silencioso que só não aparecia
   porque o modal "filho" captura o foco e o pai fica congelado. */
.modal-stack { z-index: 9710; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--space-6) 18px;
  flex-shrink: 0;
  background: transparent;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.modal-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 560;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6) var(--space-6);
}
.modal-body--overflow-visible {
  overflow: visible;
}
.modal-body--no-padding {
  padding: 0;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: visible;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6) 22px;
  border-top: 1px solid rgba(0,0,0,0.06);
  background: transparent;
  flex-shrink: 0;
}

.modal-overlay-mobile .modal {
  max-width: 100% !important;
  max-height: min(92dvh, 100dvh);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  position: relative;
}

.modal-overlay-mobile .modal::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 5px;
  border-radius: 3px;
  background: rgba(60,60,67,0.28);
  pointer-events: none;
  z-index: 2;
}

.modal-overlay-mobile .modal-header {
  padding-top: calc(var(--space-5) + 16px);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.modal-overlay-mobile .modal-title {
  font-size: 18px;
  font-weight: 560;
  letter-spacing: -0.01em;
}

.modal-overlay-mobile .modal-footer {
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.96));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  flex-direction: column-reverse;
  align-items: stretch;
  gap: var(--space-2);
  padding-bottom: calc(env(safe-area-inset-bottom) + 24px);
}

.modal-overlay-mobile .modal-footer > button,
.modal-overlay-mobile .modal-footer > .modal-footer-primary,
.modal-overlay-mobile .modal-footer > .modal-footer-dismiss {
  width: 100%;
  min-width: 0;
  justify-content: center;
}

/* Footer com ação destrutiva à esquerda + botões à direita */
.modal-footer-actions {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-3);
}

.modal-footer-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  color: var(--text-muted);
  font-size: var(--size-xs);
  line-height: 1.45;
}

.modal-footer-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
  flex-wrap: wrap;
}

/* Quando .modal-footer-right está dentro de um actions splitado (Excluir + Cancelar/Salvar),
   nowrap garante que Cancelar e Salvar fiquem na mesma linha em modal sm. O padrão original
   com flex-wrap é mantido pros usos isolados. */
.modal-footer-actions .modal-footer-right {
  flex-wrap: nowrap;
}

.modal-footer-compact {
  justify-content: flex-end;
}

.modal-footer-primary {
  min-width: 124px;
}

.modal-footer-dismiss {
  min-width: 100px;
}

.action-pop {
  position: absolute;
  top: calc(100% + 4px);
  z-index: 100;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-1);
  display: none;
  min-width: 180px;
  width: max-content;
}
.action-pop.ag-pop-open { display: block; }

.action-pop-right {
  right: 0;
}

.action-pop-left {
  left: 0;
}

.action-pop-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--size-sm);
  cursor: pointer;
  transition: background 100ms, color 100ms;
  color: var(--text);
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  font-family: inherit;
  box-sizing: border-box;
  white-space: nowrap;
}

.action-pop-item:hover {
  background: var(--accent-light);
}

.action-pop-item-danger {
  color: var(--s-cancelada);
}
.action-pop-item-danger:hover {
  background: var(--s-cancelada-bg);
}
.action-pop-item-warning {
  color: var(--s-falta);
}
.action-pop-item-warning:hover {
  background: var(--s-falta-bg);
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.modal-form .form-section-title {
  margin-bottom: var(--space-2);
  margin-top: var(--space-3);
}
.modal-form .form-section-title:first-child {
  margin-top: 0;
}

.modal-form .field,
.modal-form .form-grid,
.modal-form .form-grid-2 {
  gap: var(--space-3);
}

.modal-form .field label {
  color: var(--text-cool);
}

/* Inputs no modal: cinza suave, sem borda, radius maior — estilo Dovetail */
.modal-form input[type="text"],
.modal-form input[type="email"],
.modal-form input[type="number"],
.modal-form input[type="date"],
.modal-form input[type="time"],
.modal-form input[type="datetime-local"],
.modal-form input[type="url"],
.modal-form select,
.modal-form textarea,
.nf-modal input[type="text"],
.nf-modal input[type="number"],
.nf-modal input[type="date"],
.nf-modal input[type="url"],
.nf-modal select,
.nf-modal textarea {
  background: #F4F6FB;
  border: none;
  border-radius: 10px;
  height: 40px;
}
.modal-form textarea,
.nf-modal textarea {
  height: auto;
}
.modal-form input:focus,
.modal-form select:focus,
.modal-form textarea:focus,
.nf-modal input:focus,
.nf-modal select:focus,
.nf-modal textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.modal-form textarea {
  min-height: 96px;
}

/* Bloco de campos de convênio (modal novo paciente) — fundo discreto
   pra agrupar Convênio + Plano quando 'Convênio' é selecionado. */
.mn-convenio-fields-wrap {
  margin-bottom: var(--space-5);
  padding: var(--space-3);
  background: var(--surface-tint, rgba(132, 126, 120, 0.03));
  border-radius: var(--radius-md, 10px);
}

/* Mobile do modal de novo paciente — endereço de 3 colunas (CEP+Núm+Estado)
   vira 2 colunas (CEP+Núm na primeira linha, Estado quebra). 60px de Estado
   em 375px é apertado demais. */
@media (max-width: 767px) {
  .modal-form .form-grid[style*="80px 60px"] {
    grid-template-columns: 1fr 80px !important;
  }
  .modal-form .form-grid[style*="80px 60px"] > .field:nth-child(3) {
    grid-column: 1 / -1;
  }
}

.modal-confirm-desc {
  color: var(--text-muted);
  font-size: var(--size-base);
  line-height: 1.5;
}

/* Datas em que a série colide com consultas já agendadas (aviso de conflito). */
.modal-conflito-lista {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--size-base);
  color: var(--text-ink);
}

.modal-conflito-lista li {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}

/* ============================================================
   Network status banner
   ============================================================ */
.network-banner {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 9800;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(560px, calc(100vw - 32px));
  padding: 10px 12px;
  border-radius: 16px;
  border: 0.5px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.88);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 12px 34px rgba(27,43,75,0.12), 0 2px 8px rgba(27,43,75,0.08);
  color: var(--text-ink);
  pointer-events: all;
}

.network-banner-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
  background: var(--toast-info);
  box-shadow: 0 0 0 4px rgba(59,130,246,0.10);
}

.network-banner--offline .network-banner-dot {
  background: var(--toast-warning);
  box-shadow: 0 0 0 4px rgba(217,119,6,0.12);
}

.network-banner--online .network-banner-dot {
  background: var(--toast-success);
  box-shadow: 0 0 0 4px rgba(48,164,108,0.12);
}

.network-banner-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.network-banner-copy strong {
  font-size: var(--size-sm);
  line-height: 1.25;
  color: var(--text-ink);
  font-weight: var(--weight-semibold);
}

.network-banner-copy span {
  font-size: var(--size-12);
  line-height: 1.35;
  color: var(--text-muted);
}

.network-banner-action {
  border: 0;
  border-radius: 10px;
  background: var(--accent-tint-2);
  color: var(--accent);
  font-size: var(--size-12);
  font-weight: var(--weight-semibold);
  padding: 7px 10px;
  cursor: pointer;
  white-space: nowrap;
}

.network-banner-action:hover { background: var(--accent-tint-3); }

@media (max-width: 640px) {
  .network-banner {
    align-items: flex-start;
    bottom: 12px;
  }
  .network-banner-action {
    padding-inline: 8px;
  }
}

/* ============================================================
   Toasts
   ============================================================ */
.toast-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
  width: auto;
  max-width: calc(100% - 32px);
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  color: var(--text-ink);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
  font-size: var(--size-14);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  max-width: 440px;
  pointer-events: all;
  opacity: 0;
  transform: translateY(-12px);
  transition:
    opacity 260ms cubic-bezier(0.32, 0.72, 0, 1),
    transform 260ms cubic-bezier(0.32, 0.72, 0, 1);
}

.toast-visible { opacity: 1; transform: translateY(0); }
.toast-hide    { opacity: 0; transform: translateY(-12px); transition-duration: 200ms; }

/* Cores por tipo — apenas no ícone */
.toast-success .toast-icon { color: var(--toast-success); }
.toast-error   .toast-icon { color: var(--toast-error); }
.toast-warning .toast-icon { color: var(--toast-warning); }
.toast-info    .toast-icon { color: var(--toast-info); }

.toast-msg  { flex: 1; min-width: 0; }
.toast-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Close button — hover-only */
.toast-close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: rgba(0, 0, 0, 0.4);
  padding: 2px;
  display: flex;
  align-items: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 160ms, color 140ms;
}
.toast:hover .toast-close { opacity: 1; }
.toast-close:hover { color: rgba(0, 0, 0, 0.7); }

.toast-undo-btn {
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.05);
  border: none;
  color: var(--accent);
  font-size: var(--size-14);
  font-weight: var(--weight-semibold);
  padding: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--duration-fast);
}
.toast-undo-btn:hover { background: rgba(0, 0, 0, 0.08); }

@media (prefers-reduced-motion: reduce) {
  .toast {
    transform: none;
    transition: opacity 200ms ease-out;
  }
  .toast-visible { transform: none; }
  .toast-hide    { transform: none; }
}

/* ============================================================
   Paginação
   ============================================================ */
.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-4) 0;
  justify-content: center;
}

.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  transition: background 140ms, color 140ms, border-color 140ms;
}
.page-btn:hover:not([disabled]) { background: var(--accent-light); color: var(--accent); }
.page-btn-active { background: var(--accent) !important; color: #FFFFFF !important; border-color: var(--accent); }
.page-btn[disabled] { opacity: 0.35; cursor: not-allowed; }
.page-ellipsis { color: var(--text-xmuted); padding: 0 var(--space-1); font-size: var(--size-sm); }

/* Variante cursor (keyset, view Pacientes — R23): Anterior/Próxima + "Página N". */
.pagination-cursor { gap: var(--space-2); }
.page-current {
  min-width: 72px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Skeleton loading
   ============================================================ */
.skeleton-wrap { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-2); }

.skeleton {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0.09) 50%,
    rgba(0, 0, 0, 0.05) 100%
  );
  background-size: 200% 100%;
  border-radius: 8px;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-title     { height: 18px; width: 40%; border-radius: 5px; }
.skeleton-row       { height: 40px; width: 100%; border-radius: 10px; }
.skeleton-row.short { width: 70%; }
.skeleton-line      { border-radius: 4px; }
.skeleton-block     { border-radius: 12px; }

.skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
}

.skeleton-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; opacity: 0.6; }
}

/* ============================================================
   Spinner
   ============================================================ */
.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.30);
  border-top-color: #FFFFFF;
  border-radius: var(--radius-pill);
  animation: spin 0.7s linear infinite;
}

/* Spinner inline para botões em loading */
.btn-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1.8px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
  opacity: 0.7;
  flex-shrink: 0;
}

/* Em botões icon-only (drawer-pill, btn-icon), o spinner é o único filho:
   anula o margin-right (que existe pra separar do texto) e centraliza. */
.drawer-pill > .btn-spinner:only-child,
.btn-icon > .btn-spinner:only-child {
  margin: 0;
}

/* ============================================================
   Estado vazio
   ============================================================ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  color: var(--text-muted);
  text-align: center;
}

.empty-state-icon {
  width: 24px;
  height: 24px;
  color: var(--text-xmuted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.empty-state-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.6;
}

/* Variante de erro do empty-state: só o ícone muda de cor (warning). */
.empty-state--error .empty-state-icon {
  color: var(--warning);
}

.empty-state--degraded .empty-state-icon {
  color: var(--toast-warning);
}

.empty-state-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-ink);
  line-height: 1.35;
}

.empty-state-desc {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 280px;
  line-height: 1.45;
  margin: 0;
}

.empty-state p { font-size: var(--size-base); line-height: 1.5; }

.empty-state-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
}
.empty-state-actions .btn-ghost {
  background: transparent;
  border: 0;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.12s ease;
}
.empty-state-actions .btn-ghost:hover {
  background: var(--home-accent-soft);
}
.empty-state-actions .btn-ghost:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ============================================================
   Sidebar mobile overlay
   ============================================================ */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.32);
  z-index: 190;
  display: none; /* oculto no desktop */
}

/* ============================================================
   Animações
   ============================================================ */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Home: conteúdo dos widgets surge com fade sutil quando os dados chegam
   (cada widget popula async; sem isso, "pipocam" secos). Calmo, ~260ms. */
@keyframes homeWidgetReveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Pop sutil de badge ao surgir/mudar (notif + pendências) — feedback calmo
   de "algo novo". Overshoot leve, sem exagero. */
@keyframes badgePop {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

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

/* ── Widget Tarefas (home) ─────────────────────────────── */

/* View bar — label clicável "Hoje ›" */
.hw-view-bar {
  padding: 14px 22px 6px;
}
.hw-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px 4px 2px;
  border-radius: 8px;
  color: var(--home-text-muted);
  font-size: 13px;
  font-weight: var(--weight-medium);
  transition: background 120ms, color 120ms;
  line-height: 1;
}
.hw-view-btn:hover {
  background: var(--home-hover);
  color: var(--home-text-strong);
}
/* Chevron — o último SVG filho roda 90° quando aberto */
.hw-view-btn > svg:last-child {
  transition: transform 180ms cubic-bezier(0.4,0,0.2,1);
}
.hw-view-btn--open > svg:last-child {
  transform: rotate(90deg);
}
.hw-view-icon {
  display: flex;
  align-items: center;
  color: var(--home-text-soft);
}

/* Itens */
.hw-task {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 22px;
  cursor: pointer;
  transition: background 100ms;
}
.hw-task:hover { background: var(--home-hover); }
.hw-task--done { opacity: 0.4; transition: opacity 400ms; pointer-events: none; }
.hw-task--done .hw-task-title { text-decoration: line-through; }

.hw-check {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(113,123,155,0.28);
  background: transparent;
  cursor: pointer;
  padding: 0;
  color: transparent;
  transition: border-color 140ms, background 140ms, color 140ms;
}
/* Expande a hit area para 44×44 (mínimo confortável Android) sem alterar layout */
.hw-check::before {
  content: '';
  position: absolute;
  inset: -12px;
}
.hw-check:hover {
  border-color: var(--home-success);
  color: var(--home-success);
}

.hw-task-title {
  flex: 1;
  font-size: 14px;
  color: var(--home-text);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hw-task-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.hw-flag { color: var(--home-flag); display: flex; align-items: center; }
.hw-due {
  font-size: 12px;
  color: var(--home-text-soft);
  white-space: nowrap;
}
.hw-due--overdue { color: var(--home-overdue); }

/* Empty */
.hw-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-10);
  color: var(--text-muted);
  font-size: var(--size-base);
  text-align: center;
}

/* Botão + no header do card de tarefas */
.hw-header-add-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(113,123,155,0.08);
  color: var(--home-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 140ms, color 140ms;
  flex-shrink: 0;
}
/* Mobile: alvo de toque confortável (44px Apple HIG) sem inflar o visual */
@media (max-width: 767px) {
  .hw-header-add-btn { width: 40px; height: 40px; }
}
.hw-header-add-btn:hover {
  background: var(--navy-light, rgba(27,43,75,0.08));
  color: var(--navy, #1B2B4B);
}

/* Dot colorido de lista */
.hw-list-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hw-list-dot-wrap { display: flex; align-items: center; color: var(--home-text-soft); }

/* Popover de view/lista */
.hw-view-pop,
.hw-qa-pop {
  min-width: 180px;
  background: var(--bg, #fff);
  border: 1px solid rgba(113,123,155,0.14);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(30,36,64,0.13);
  padding: 4px;
  z-index: 1400;
}
.hw-view-pop-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  color: var(--home-text);
  cursor: pointer;
  text-align: left;
  transition: background 100ms;
}
.hw-view-pop-item:hover { background: var(--home-hover); }
.hw-view-pop-item--active {
  background: var(--home-accent-soft);
  color: var(--home-text-strong);
  font-weight: var(--weight-medium);
}
.hw-view-pop-icon {
  display: flex;
  align-items: center;
  color: var(--home-text-soft);
  flex-shrink: 0;
  width: 16px;
}

/* ── Quick Add Sheet ─────────────────────────────────────── */
.hw-qa-sheet {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.hw-qa-backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay-backdrop);
  backdrop-filter: blur(var(--overlay-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--overlay-backdrop-blur));
  animation: hw-qa-backdrop-in 180ms ease-out both;
}
.hw-qa-panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: var(--bg, #fff);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(11,15,32,0.18), 0 4px 16px rgba(11,15,32,0.08);
  animation: hw-qa-pop-in var(--duration-pop) var(--easing-pop) both;
}
@keyframes hw-qa-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes hw-qa-pop-in {
  from { transform: scale(0.96); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

@media (max-width: 640px) {
  .hw-qa-sheet { align-items: flex-end; padding: 0; }
  .hw-qa-panel {
    border-radius: 20px 20px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
    animation: hw-qa-slide-up 220ms var(--easing-pop) both;
  }
  @keyframes hw-qa-slide-up {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
}

.hw-qa-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: var(--text-xmuted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 1;
  transition: color 140ms;
}
.hw-qa-close:hover { color: var(--text-muted); }

.hw-qa-input-wrap { padding: 22px 22px 14px; }
.hw-qa-input,
.hw-qa-input:focus {
  width: 100%;
  font-size: 18px !important;
  height: auto !important;
  font-family: var(--font);
  color: var(--home-text-strong);
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box;
  line-height: 1.4;
  font-weight: var(--weight-medium);
  padding: 0 !important;
}
.hw-qa-input::placeholder { color: var(--text-xmuted); font-weight: 400; }

.hw-qa-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px 16px;
  border-top: 1px solid var(--border-soft);
}

.hw-qa-confirm {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 140ms, color 140ms, opacity 140ms;
  margin-left: auto;
  background: rgba(113,123,155,0.12);
  color: var(--text-xmuted);
}
.hw-qa-confirm:disabled { cursor: default; }
.hw-qa-confirm:not(:disabled) {
  background: var(--navy, #1B2B4B);
  color: #fff;
}
.hw-qa-confirm:not(:disabled):hover { background: #253d6b; }
.hw-qa-tool {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 999px;
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 120ms, color 120ms;
  white-space: nowrap;
}
.hw-qa-tool:hover {
  background: rgba(113,123,155,0.08);
  color: var(--text-ink);
}
.hw-qa-tool--icon-only {
  padding: 6px 8px;
}
.hw-qa-tool--icon-only svg { width: 18px; height: 18px; }
.hw-qa-tool--flag {
  color: var(--text-xmuted);
}
.hw-qa-tool--flag-on { color: var(--home-flag); }
.hw-qa-tool--flag-on:hover { background: rgba(245,158,11,0.10); color: var(--home-flag); }
.hw-qa-tool-label { line-height: 1; }

/* Quick Add Evento — inputs inline de data/hora */
.hw-qae-input-tool {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 6px;
  cursor: pointer;
}
.hw-qae-input-tool svg { color: var(--text-muted); flex-shrink: 0; }
.hw-qae-input-tool:hover svg { color: var(--text-ink); }

.hw-qae-inline-input {
  height: 22px !important;
  font-size: 13px;
  font-family: var(--font);
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-muted);
  box-shadow: none !important;
  flex-shrink: 0;
  width: auto !important;
  cursor: pointer;
  outline: none;
}
.hw-qae-input-tool:hover .hw-qae-inline-input { color: var(--text-ink); }
.hw-qae-inline-input[type="date"] { width: 90px !important; min-width: 0 !important; }
.hw-qae-inline-input[type="time"] { width: 52px !important; min-width: 0 !important; }
.hw-qae-inline-input[type="date"]::-webkit-datetime-edit { padding: 0; }
.hw-qae-inline-input[type="time"]::-webkit-datetime-edit { padding: 0; }
.hw-qae-inline-input::-webkit-calendar-picker-indicator { display: none; }
.hw-qae-inline-input::-webkit-inner-spin-button,
.hw-qae-inline-input::-webkit-clear-button { display: none; }

.hw-qae-cat-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Quick Add Evento — pills de categoria */
.hw-qae-cats {
  display: flex;
  gap: 6px;
  padding: 0 22px 12px;
  flex-wrap: wrap;
}
.hw-qae-cat-pill {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--cat-color);
  color: var(--cat-color);
  background: transparent;
  cursor: pointer;
  transition: background 120ms, color 120ms;
  line-height: 1;
}
.hw-qae-cat-pill--active {
  background: var(--cat-color);
  color: #fff;
}
.hw-qae-datetime-label {
  font-size: 12px;
  color: var(--home-text-muted);
  margin-left: 2px;
}

/* ============================================================
   Pacientes
   ============================================================ */
.view--pacientes {
  background: var(--bg-card);
}

.pac-wrap {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding-bottom: 40px;
}

.ws-toolbar,
.fin-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

.ws-toolbar-row,
.pac-toolbar,
.fin-toolbar-top,
.fin-toolbar-bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.ws-toolbar-actions,
.pac-toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.ws-filter-row,
.pac-filters {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}
.ws-filter-row[hidden],
.pac-filters[hidden] {
  display: none;
}

.pac-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: 26px;
  flex-wrap: wrap;
}

.ws-search-wrap,
.pac-search-wrap {
  position: relative;
  flex: 1 1 360px;
  max-width: 540px;
  min-width: 240px;
}

.ws-search-icon,
.pac-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.ws-search,
.pac-search {
  width: 100%;
  height: 44px;
  padding: 0 16px 0 42px;
  background: var(--bg-card);
  border: 1px solid rgba(112,115,147,0.12);
  border-radius: var(--radius-xl);
  font-size: var(--size-14);
  color: var(--text-ink);
  box-shadow: 0 0 2px rgba(175,178,206,0.28), 0 4px 14px rgba(11,15,32,0.03);
  transition: border-color 150ms, box-shadow 150ms, background 150ms;
}
.ws-search:focus,
.pac-search:focus {
  outline: none;
  background: var(--bg-card);
  border-color: var(--accent-tint-3);
  box-shadow: 0 0 0 3px var(--accent-tint-2);
}
@keyframes ws-loading-pulse {
  0%, 100% { border-color: rgba(112,115,147,0.12); }
  50%       { border-color: rgba(82,102,235,0.30); }
}
.ws-search--loading {
  animation: ws-loading-pulse 0.9s ease-in-out infinite;
}

.pac-filters {
  padding: 0 0 22px;
}

.ws-filter-row .filter-pill,
.pac-filters .filter-pill,
.fin-status-pills .filter-pill {
  min-height: 32px;
  padding: 0 12px;
  font-size: 12px;
}
.ws-filter-row .filter-pill-active,
.pac-filters .filter-pill-active,
.fin-status-pills .filter-pill-active,
.pes-filter-pills .filter-pill-active {
  background: var(--accent-tint-2);
  border-color: var(--accent-tint-3);
}
.filter-divider,
.pac-filter-divider {
  width: 1px;
  height: 16px;
  background: var(--border);
  margin: 0 var(--space-1);
  flex-shrink: 0;
}


.btn-active {
  background: var(--surface-tint-hover) !important;
  color: var(--text-ink) !important;
  border-color: rgba(123,108,168,0.20) !important;
}

.td-muted { color: var(--text-muted); font-size: var(--size-sm); }

.action-row { display: flex; align-items: center; gap: var(--space-1); justify-content: flex-end; }

/* Seção de form no modal */
.form-section-title {
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
  margin-top: var(--space-5);
}
.form-section-title:first-child { margin-top: 0; }

.form-grid   { display: grid; gap: var(--space-3); }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

/* Status toggle */
.field-label {
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
  margin-bottom: var(--space-2);
}

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

.status-opt {
  min-width: 84px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--surface-tint-border);
  background: rgba(255,255,255,0.76);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.58);
  color: var(--text-cool);
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background 150ms, border-color 150ms, color 150ms, box-shadow 150ms;
}
.status-opt:hover {
  border-color: rgba(123,108,168,0.22);
  background: rgba(255,255,255,0.92);
  color: var(--text-ink);
}

.status-opt-active {
  box-shadow: none;
}
.status-opt-active.status-opt-lead {
  background: var(--patient-status-lead-bg);
  border-color: var(--patient-status-lead-border);
  color: var(--patient-status-lead);
}
.status-opt-active.status-opt-ativo {
  background: var(--patient-status-active-bg);
  border-color: var(--patient-status-active-border);
  color: var(--patient-status-active);
}
.status-opt-active.status-opt-inativo {
  background: var(--patient-status-inactive-bg);
  border-color: var(--patient-status-inactive-border);
  color: var(--patient-status-inactive);
}
/* Origem pills */
.origem-pills {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.origem-pill {
  height: 30px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--surface-tint-border);
  background: rgba(255,255,255,0.72);
  color: var(--text-cool);
  font-size: var(--size-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all 150ms;
}
.origem-pill:hover {
  border-color: rgba(123,108,168,0.20);
  background: rgba(255,255,255,0.92);
  color: var(--text-ink);
}
.origem-pill-active {
  background: var(--surface-tint);
  border-color: rgba(123,108,168,0.20);
  color: var(--text-ink);
}

.ws-table-shell,
.pac-list-shell {
  overflow: hidden;
  background: var(--bg-card);
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}

/* Tabela de pacientes */
.ws-table,
.pac-table,
.fin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.ws-table thead th,
.pac-table thead th,
.fin-table thead th {
  padding: 18px 28px 16px;
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  color: var(--text-meta);
  text-align: left;
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--border-hairline);
  background: var(--bg-card);
  white-space: nowrap;
}
.ws-table td,
.pac-table tbody td,
.fin-table td {
  padding: 18px 28px;
  font-size: var(--size-base);
  color: var(--text-ink);
  border-bottom: 1px solid var(--border-hairline);
  vertical-align: middle;
  line-height: 1.2;
}
.ws-table tbody tr:last-child td,
.pac-table tbody tr:last-child td,
.fin-table tbody tr:last-child td { border-bottom: none; }
.ws-table-row,
.pac-table-row,
.fin-tr-click {
  cursor: pointer;
  transition: background 140ms ease, box-shadow 140ms ease;
}
.ws-table-row:hover,
.pac-table-row:hover,
.fin-tr-click:hover { background: var(--row-hover); }
.ws-row-active,
.pac-table-row.pac-row-active,
.fin-tr-selected {
  background: var(--accent-tint-1);
  box-shadow: inset 0 0 0 1px var(--accent-tint-3);
}

.pac-cell-nome-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.pac-row-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  background: var(--avatar-soft-bg);
  color: var(--avatar-soft-fg);
  font-size: var(--size-12);
  font-weight: 700;
  letter-spacing: 0.03em;
}
.pac-cell-nome-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
/* Sub-linha do médico: só no mobile (no desktop o médico tem coluna própria) */
.pac-cell-sub--mobile { display: none; }
.pac-nome-text { font-weight: 500; }
.pac-cpf-inline { font-weight: 400; color: var(--text-meta); font-size: var(--size-14); }
.pac-cell-medico { color: var(--text-meta); font-size: var(--size-base); }
.pac-cell-status { white-space: nowrap; }
.pac-cell-proxima { color: var(--text-meta); white-space: nowrap; }
.ws-cell-actions,
.pac-cell-actions,
.fin-td-action {
  width: 92px;
  white-space: nowrap;
  vertical-align: middle;
  text-align: right;
}
.ws-action-group,
.pac-actions-wrap,
.fin-action-group {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.ws-action-btn,
.pac-table-row .row-action-btn,
.btn-icon.fin-action-btn {
  opacity: 0.54;
  color: var(--text-meta);
  transition: opacity 150ms ease, color 150ms ease, background 150ms ease;
}
.ws-table-row:hover .ws-action-btn,
.ws-row-active .ws-action-btn,
.pac-table-row:hover .row-action-btn,
.pac-row-active .row-action-btn,
.fin-tr-click:hover .btn-icon.fin-action-btn,
.fin-tr-selected .btn-icon.fin-action-btn {
  opacity: 1;
}
.ws-action-btn:hover,
.pac-table-row .row-action-btn:hover,
.btn-icon.fin-action-btn:hover {
  color: var(--accent);
  background: var(--accent-tint-1);
}
.btn-icon.fin-action-btn-danger:hover {
  color: var(--error);
  background: rgba(220, 38, 38, 0.07);
}
.pac-retorno-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(112, 112, 125, 0.92);
  background: rgba(27,43,75,0.04);
  border-radius: 999px;
  padding: 4px 10px;
}
.pac-retorno-vencido {
  color: var(--warning);
  background: var(--warning-bg);
}
/* Coluna "Próx. consulta" — variantes uniformes.
   Data simples (tem agendamento) e vazio compartilham peso visual cinza
   pra não competir com o destaque do retorno vencido. */
.pac-proxima-data {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-meta);
}
.pac-proxima-vazio {
  font-size: 12px;
  color: var(--text-xmuted);
}

.pac-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.pac-detail-header-info { display: flex; align-items: flex-start; gap: 12px; }
.pac-detail-header-actions { display: flex; align-items: center; gap: 8px; }
.ws-drawer-shell,
.ws-drawer-empty,
.pac-detail-shell,
.fin-drawer-shell,
.fin-drawer-empty {
  background: var(--bg-card);
  border: 1px solid var(--border-hairline-strong);
  border-radius: 28px;
  box-shadow: 0 0 2px rgba(175,178,206,0.44), 0 10px 24px rgba(11,15,32,0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
}
.drawer-panel .ws-drawer-shell,
.drawer-panel .pac-detail-shell,
.drawer-panel .fin-drawer-shell,
.drawer-panel .fin-drawer-empty {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  max-height: none;
  /* overflow:hidden no shell aborta position:sticky do .drawer-head filho.
     Dentro do drawer, o clipping já é feito pelo .drawer-panel. */
  overflow: visible;
}
.drawer-panel .fin-drawer-shell {
  padding-top: 0;
  --drawer-pill-margin-y: 0px;
  --drawer-pill-margin-x: 0px;
  --drawer-head-pad-y: 22px;
  --drawer-head-pad-x: 22px;
}
.drawer-panel .fin-drawer-shell-cobranca {
  padding-inline: 34px;
}
.drawer-panel .fin-drawer-shell-cobranca > .fin-drawer-footer-actions {
  margin-inline: -34px;
}
.ws-drawer-shell-compact,
.pac-detail-shell-compact {
  --drawer-head-pad-y: 22px;
  --drawer-head-pad-x: 20px;
  --drawer-pill-margin-y: 0px;
  --drawer-pill-margin-x: 0px;
}
.ws-drawer-shell-compact .drawer-head-info,
.pac-detail-shell-compact .drawer-head-info {
  padding: 2px 4px 0;
}
.ws-drawer-shell-compact .pac-detail-body,
.pac-detail-shell-compact .pac-detail-body {
  padding: 0 26px 32px;
}
.pac-detail-shell-compact .pac-detail-body:not(.pac-detail-body-edit) {
  padding-bottom: 48px;
}
.ws-drawer-shell .pac-detail-body {
  flex: 1;
  min-height: 0;
}

.ws-drawer-head,
.pac-detail-header,
.fin-drawer-head {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 20px 16px;
  border-bottom: 1px solid rgba(112,115,147,0.10);
  flex-shrink: 0;
  background: rgba(255,255,255,0.96);
}

.fin-drawer-head-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.pac-detail-shell {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
}

.ws-drawer-close,
.pac-detail-close,
.fin-drawer-close {
  flex-shrink: 0;
  margin-top: 1px;
}

.ws-drawer-icon-btn,
.ws-drawer-close,
.pac-detail-icon-btn,
.pac-detail-close,
.fin-drawer-icon-btn,
.fin-drawer-close {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(112,115,147,0.14);
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(42,44,63,0.84);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.ws-drawer-icon-btn:hover,
.ws-drawer-close:hover,
.pac-detail-icon-btn:hover,
.pac-detail-close:hover,
.fin-drawer-icon-btn:hover,
.fin-drawer-close:hover {
  background: rgba(82,102,235,0.05);
  border-color: rgba(82,102,235,0.18);
  color: var(--accent);
}
.ws-drawer-icon-btn-primary,
.pac-detail-icon-btn-primary,
.fin-drawer-icon-btn-primary {
  background: #1F325A;
  border-color: #1F325A;
  color: #FFFFFF;
}
.ws-drawer-icon-btn-primary:hover,
.pac-detail-icon-btn-primary:hover,
.fin-drawer-icon-btn-primary:hover {
  background: #263D6D;
  border-color: #263D6D;
  color: #FFFFFF;
}
.ws-drawer-title,
.pac-detail-nome,
.fin-drawer-title {
  font-size: 30px;
  font-weight: 420;
  color: var(--text-ink);
  line-height: 1.08;
  letter-spacing: -0.04em;
}
.pac-detail-sub {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 8px;
}
/* Sub-linha do drawer com nome do médico + badge de status alinhado.
   Status sai do hero (que sumiu) e vira meta junto do médico. */
.pac-detail-sub--with-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ws-drawer-kicker,
.pac-detail-kicker,
.fin-drawer-kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(112, 112, 125, 0.8);
  margin-bottom: 8px;
}
.pac-detail-body {
  /* overflow-y: auto retirado pra evitar scroll aninhado com o .drawer-body
     do componente, que já é o container scrollável. Antes do hero sair, o
     conteúdo cabia e o scroll interno raramente aparecia — agora reaparecia
     em todo paciente com observações longas. */
  padding: 0 26px 30px;
  min-height: 0;
}
.pac-detail-body-edit {
  padding-top: 0;
}
.pac-detail-hero {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 14px;
  padding-bottom: 14px;
  /* Sticky no topo do .pac-detail-body (scroll container) — badges/chips
     seguem visíveis enquanto o conteúdo da ficha rola. .drawer-head está
     fora deste scroll, então não há conflito de empilhamento. */
  position: sticky;
  top: 0;
  z-index: 1;
  background: #FFFFFF;
}
.pac-detail-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ws-drawer-chip,
.pac-detail-chip,
.fin-drawer-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(112, 115, 147, 0.14);
  background: rgba(246, 247, 251, 0.9);
  font-size: 12px;
  font-weight: 500;
  color: rgba(42, 44, 63, 0.82);
}
.pac-detail-consulta-next {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  background: rgba(27,43,75,0.035);
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 16px;
}
.pac-detail-consulta-retorno { color: #1A7A4A; background: rgba(26,122,74,0.07); }
.pac-detail-consulta-vencido { color: #D97706; background: rgba(245,158,11,0.08); }
.pac-detail-section-title {
  font-size: 12px;
  font-weight: var(--weight-medium);
  color: var(--text-xmuted);
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* Bloco de aniversário no drawer (só Bruna, só no dia): rótulo à esquerda +
   ícone-atalho de WhatsApp à direita. Destaque sutil no topo do corpo, com
   espaço em relação ao header. */
.pac-detail-birthday {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 14px;
  margin-top: 16px;
  margin-bottom: 4px;
  background: var(--accent-tint-1);
  border: 1px solid var(--accent-tint-3);
  border-radius: 12px;
}
.pac-detail-birthday-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 560;
  color: var(--accent);
  min-width: 0;
}
.pac-detail-birthday-label svg { flex-shrink: 0; }
/* Fora de linha de tabela: força visível (o .ws-action-btn nasce a 54% e só
   ganha opacidade no hover da linha, que aqui não existe). */
.pac-detail-birthday-btn.ws-action-btn { opacity: 1; color: var(--accent); }
.pac-detail-birthday-btn.ws-action-btn:hover { background: var(--accent-tint-2); }

.pac-detail-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(112, 115, 147, 0.12);
  padding-top: 16px;
  margin-top: 16px;
}
.pac-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.pac-detail-col { display: flex; flex-direction: column; }
.pac-detail-linha {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(112,115,147,0.08);
  font-size: 14px;
  color: var(--text-ink);
  line-height: 1.4;
}
.pac-detail-linha small { color: var(--text-muted); font-size: 11px; }
.pac-detail-values {
  display: flex;
  flex-direction: column;
}
.pac-detail-value-row,
.pac-detail-linha-valor {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(112,115,147,0.08);
  padding: 10px 0;
}
.pac-detail-servico-nome { font-size: 14px; color: var(--text-muted); }
.pac-detail-servico-valor { font-size: 14px; }
.pac-ic { color: var(--text-xmuted); flex-shrink: 0; margin-top: 1px; }
.pac-detail-obs {
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-muted);
  background: rgba(27,43,75,0.03);
  border-radius: 14px;
  padding: 10px 12px;
  line-height: 1.5;
}
.pac-detail-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 26px 18px;
  border-top: 1px solid rgba(112,115,147,0.10);
  flex-shrink: 0;
  background: rgba(255,255,255,0.96);
}
.pac-detail-footer .pac-detail-icon-btn,
.pac-detail-footer a.pac-detail-icon-btn {
  text-decoration: none;
}
.pac-detail-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 14px;
}

.pac-detail-form .field input,
.pac-detail-form .field select,
.pac-detail-form .field textarea {
  border-radius: 14px;
  border-color: rgba(112,115,147,0.16);
  background: #FFFFFF;
}
.pac-detail-form textarea {
  min-height: 110px;
}

/* ============================================================
   Home — 4 cards 2×2
   ============================================================ */
.home-wrap {
  max-width: 1328px;
  margin: 0 auto;
}

/* Home: Consultório (1fr, cards sólidos) + Pessoal (sidebar leve 320px).
   Consultório: Pendências + Financeiro empilhados (cards com peso).
   Pessoal: Agenda + Tarefas como listas aéreas SEM casca de card — a
   hierarquia entre os mundos vem do peso visual (sólido vs leve), não da
   largura. Altura natural: cada bloco cresce com seu conteúdo (sem casar). */
.home-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-template-rows: auto auto auto;
  gap: 12px 48px;
  padding: 0 0 24px;
  align-items: start;
}
.home-section-label {
  font-size: 12px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);   /* não --text-xmuted: contraste 2.54 reprova WCAG AA */
  align-self: end;
  padding: 0 2px 2px;
}
.home-section-label--consultorio { grid-column: 1; grid-row: 1; }
.home-section-label--pessoal     { grid-column: 2; grid-row: 1; }
.home-card--pend   { grid-column: 1; grid-row: 2; }
.home-card--hs     { grid-column: 1; grid-row: 3; margin-top: 12px; }
/* Pessoal ocupa a coluna 2 inteira (linhas 2-3), com Agenda+Tarefas dentro. */
.home-side {
  grid-column: 2;
  grid-row: 2 / 4;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
/* Divisor vertical sutil ancora a sidebar como "outra zona". Vive no .home-grid
   (não na .home-side) pra cobrir a altura TOTAL — vai até o fim do Financeiro,
   não só até onde o conteúdo do Pessoal termina. */
.home-grid {
  position: relative;
}
.home-grid::before {
  content: "";
  position: absolute;
  top: 28px;             /* abaixo dos labels de seção */
  bottom: 24px;          /* até o fim da área (descontando o padding-bottom) */
  /* na fronteira entre Consultório e Pessoal: largura da sidebar (320) + metade do gap (24) */
  right: calc(320px + 24px);
  width: 1px;
  background: var(--home-line-soft);
}

/* Entrada calma: cards do Consultório e seções do Pessoal surgem com fade
   sutil em cascata (stagger) ao montar a Home, em vez de pipocar secos. */
.home-card--pend   { animation: homeWidgetReveal 260ms ease-out both; }
.home-card--hs     { animation: homeWidgetReveal 260ms ease-out 60ms both; }
.home-side-sec     { animation: homeWidgetReveal 260ms ease-out 120ms both; }
.home-side-sec + .home-side-sec { animation-delay: 180ms; }
@media (prefers-reduced-motion: reduce) {
  .home-card--pend, .home-card--hs, .home-side-sec { animation: none; }
}

/* Seção da sidebar leve (Agenda / Tarefas) — sem fundo/borda/sombra */
.home-side-sec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px 10px;
  border-bottom: 1px solid var(--home-line-soft);
  margin-bottom: 8px;
}
.home-side-sec-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  color: var(--text);
  transition: color 140ms;
}
/* a seção Agenda é navegável (toca → Pessoal); foco de teclado visível */
#home-card-agenda { cursor: pointer; border-radius: 10px; outline: none; }
#home-card-agenda:focus-visible { box-shadow: 0 0 0 2px var(--accent-tint-3); }
#home-card-agenda .home-side-sec-header { cursor: pointer; }
/* hover sutil indica que o cabeçalho leva pro Pessoal (não no botão "+") */
#home-card-agenda:hover:not(:has(.hw-header-add-btn:hover)) .home-side-sec-title {
  color: var(--accent);
}

/* Pendências e Financeiro também navegam no clique (widget-pendencias /
   widget-financeiro) — mesma affordance do card da agenda. Hover só quando
   nenhum filho interativo (row, toggle, link) está em hover. */
#home-card-pend, #home-card-hs { cursor: pointer; outline: none; }
#home-card-pend:focus-visible,
#home-card-hs:focus-visible {
  box-shadow: var(--home-shadow-card), 0 0 0 2px var(--accent-tint-3);
}
#home-card-pend .home-card-title,
#home-card-hs .home-card-title { transition: color 140ms; }
#home-card-pend:hover:not(:has(.home-pend-row:hover, .home-card-link:hover)) .home-card-title,
#home-card-hs:hover:not(:has(.hw-header-add-btn:hover)) .home-card-title {
  color: var(--accent);
}

/* Card base */
.ws-card-shell,
.home-card {
  background: linear-gradient(180deg, var(--home-surface-strong) 0%, var(--home-surface) 100%);
  border: 1px solid var(--home-line-soft);
  border-radius: 16px;
  box-shadow: var(--home-shadow-card);
  display: flex;
  flex-direction: column;
  min-height: 336px;
  overflow: hidden;
  cursor: default;
}

.ws-card-header,
.home-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 14px;
  border-bottom: 1px solid var(--home-line-faint);
  flex-shrink: 0;
}

.ws-card-title,
.home-card-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--home-text-strong);
  letter-spacing: -0.015em;
}

.home-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: var(--weight-medium);
  background: rgba(112,123,146,0.08);
  color: var(--home-text-muted);
}

.ws-card-link,
.home-card-link {
  font-size: 12px;
  font-weight: var(--weight-medium);
  color: var(--home-text-muted);
  text-decoration: none;
  transition: color 140ms;
}
.ws-card-link:hover,
.home-card-link:hover { color: var(--home-text-strong); }

/* Header do card Pendências: botão "Brief" (imprimir) + link "Abrir" */
.home-pend-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ws-card-body,
.home-card-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.ws-card-footer,
.home-card-footer {
  padding: 12px 20px 18px;
  flex-shrink: 0;
}

.ws-card-empty,
.home-card-empty {
  padding: 40px 24px;
  font-size: 14px;
  color: var(--home-text-soft);
  text-align: center;
}

/* Card Pendências */
#home-pend-body {
  display: flex;
  flex-direction: column;
}

.home-pend-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  flex: 1;
  border-bottom: 1px solid var(--home-line-faint);
  transition: background 120ms;
  min-height: 56px;
}
.home-pend-row:last-child { border-bottom: none; }
.home-pend-row--active { cursor: pointer; }
.home-pend-row--active:hover { background: var(--home-hover); }

.home-pend-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  border-radius: 999px;
  background: var(--home-pend-hover-bg, rgba(113,123,155,0.10));
  color: var(--home-pend-accent, var(--home-text-strong));
  flex-shrink: 0;
  transition: filter 140ms ease;
}

.home-pend-row--active:hover .home-pend-icon {
  filter: saturate(1.08) brightness(0.98);
}
.home-pend-label { flex: 1; font-size: 14px; color: var(--home-text); letter-spacing: -0.012em; }
.home-pend-count {
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--home-text-soft);
  min-width: 20px;
  text-align: right;
}
.home-pend-count--has { color: var(--home-text-strong); }

/* Modal lista por tipo */
.pend-tipo-list { list-style: none; margin: 0; padding: 0; }
.pend-tipo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 4px;
  border-bottom: 1px solid var(--home-line-faint);
  cursor: pointer;
  transition: background 100ms;
  border-radius: var(--radius-sm);
}
.pend-tipo-item:last-child { border-bottom: none; }
.pend-tipo-item:hover { background: var(--home-hover); }
.pend-tipo-nome { font-size: 14px; color: var(--home-text); }

/* Agenda da Home (sidebar Pessoal): a seção limita a altura, o BODY é quem rola.
   Fix: o max-height veio da época em que isto era um .home-card (que tem
   overflow:hidden + .home-card-body com scroll). Ao virar .home-side-sec (seção
   leve, sem casca), o max-height ficou órfão de overflow — com a agenda cheia a
   lista pintava PRA FORA da caixa, por cima do bloco de Tarefas. Espelha o
   .home-todo-body, que já rolava. */
#home-card-agenda {
  max-height: 430px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#home-card-agenda .home-side-sec-header { flex-shrink: 0; }
#home-agenda-body { overflow-y: auto; }

#home-card-hs {
  max-height: 430px;
}
/* Agenda da Home (sidebar Pessoal da Bruna + agenda do médico) — lista de
   compromissos do dia, não grade. As classes .hw-ag-grid/-row/-cell/-chip/-time
   ficaram órfãs ao remover o widget-hoje do médico (TODO: limpar CSS morto). */
.home-side-sec-body { padding: 0 2px; }
.hw-ag-list { display: flex; flex-direction: column; }
.hw-ag-item {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 8px 0;
}
.hw-ag-item + .hw-ag-item { border-top: 1px solid var(--home-line-faint); }
.hw-ag-item-hora {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  width: 46px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.hw-ag-item-info { flex: 1; min-width: 0; }
.hw-ag-item-nome {
  display: block;
  font-size: 14px;
  color: var(--text-ink);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hw-ag-item-dur { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.hw-ag-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 0 8px;
  color: var(--text-xmuted);
}
.hw-ag-empty-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(118,129,166,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hw-ag-empty-text { font-size: 13px; }

/* medico-home — itens da agenda da sidebar (clicáveis → balão de detalhes) */
.med-ag-item {
  align-items: center;
  border-radius: 8px;
  padding: 8px 8px;
  margin: 0 -8px;
  cursor: pointer;
  transition: background 120ms ease;
}
.med-ag-item:hover { background: rgba(118, 129, 166, 0.06); }
.med-ag-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* O hover quebra a borda do + adjacente; reforça o separador via box-shadow leve */
.med-ag-item + .med-ag-item { border-top: 1px solid var(--home-line-faint); }
.med-ag-item-mode {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  flex-shrink: 0;
}
/* Falta/cancelada: texto esmaecido + tachado no nome */
.med-ag-item--off { opacity: 0.55; }
.med-ag-item--off .hw-ag-item-nome { text-decoration: line-through; }

/* Linha de aniversariantes no topo do widget de agenda (Home do médico) */
.med-home-birthday {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 4px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--home-line-faint);
  font-size: 12.5px;
}
.med-home-birthday-icon {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  flex-shrink: 0;
}
.med-home-birthday-names {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 8px;
  min-width: 0;
}
.med-home-birthday-name {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: var(--accent);
  font-weight: 540;
  cursor: pointer;
  border-radius: 4px;
}
.med-home-birthday-name:hover { text-decoration: underline; }
.med-home-birthday-name:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Erro de carregamento de widget da Home: agora usa .empty-state--error
   (homeWidgetError() delega a errorState() em utils.js). */

.hw-ag-grid {
  /* scroll é feito pelo .home-card-body pai */
  position: relative; /* ancora a .hw-now-line (ponteiro de hora atual) */
}
/* Ponteiro de "agora" no widget de consultas de hoje (espelha .ag-now-line) */
/* Ponteiro de hora atual — espelha .ag-now-line da agenda fielmente:
   opacity 0.45 no elemento dessatura linha + dot + badge juntos (o badge
   esmaecido é o visual correto, igual ao da agenda). */
.hw-now-line {
  position: absolute;
  left: 46px; /* largura do gutter .hw-ag-time */
  right: 0;
  height: 1.5px;
  background: var(--accent);
  opacity: 0.45;
  z-index: 3;
  pointer-events: none;
}
.hw-now-line::before {
  content: '';
  position: absolute;
  left: -3px;
  top: -2.25px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.85;
}
/* Badge do horário sobre o gutter (centrado nos 46px à esquerda da linha). */
.hw-now-line-label {
  position: absolute;
  left: -23px;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 40px;
  height: 17px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: -0.01em;
  opacity: 0.92;
  z-index: 5;
}
.hw-ag-row {
  display: grid;
  grid-template-columns: 46px 1fr;
  min-height: 40px;
  border-bottom: 1px solid rgba(228,232,239,0.8);
  position: relative;
}
.hw-ag-time {
  font-size: 11px;
  color: rgba(107,114,128,0.85);
  padding: 8px 8px 0 12px;
  letter-spacing: -0.01em;
  user-select: none;
  flex-shrink: 0;
}
.hw-ag-cell {
  position: relative;
  min-height: 40px;
  padding: 3px 6px 3px 4px;
}
.hw-ag-chip {
  position: absolute;
  left: 4px; right: 6px;
  border-radius: 5px;
  padding: 3px 6px;
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 1px;
  transition: filter 100ms;
  border-left: 3px solid transparent;
}
.hw-ag-chip:hover { filter: brightness(0.94); }
.hw-ag-chip--agendada   { background: var(--s-agendada-bg);   border-left-color: var(--s-agendada);   color: var(--s-agendada); }
.hw-ag-chip--confirmada { background: var(--s-confirmada-bg); border-left-color: var(--s-confirmada); color: var(--s-confirmada); }
.hw-ag-chip--atendida   { background: var(--s-atendida-bg);   border-left-color: var(--s-atendida);   color: var(--s-atendida); }
.hw-ag-chip--falta      { background: var(--s-falta-bg);      border-left-color: var(--s-falta);      color: var(--s-falta); }
.hw-ag-chip--cancelada  { background: var(--s-cancelada-bg);  border-left-color: var(--s-cancelada);  color: var(--s-cancelada); }
.hw-ag-chip-nome {
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  font-size: 12px;
}
.hw-ag-chip-medico {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Card Agenda — legado (mantido para compatibilidade) */
.home-agenda-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--home-line-faint);
  cursor: pointer;
  transition: background 120ms;
}
.home-agenda-row:last-child { border-bottom: none; }
.home-agenda-row:hover { background: var(--home-hover); }
.home-agenda-hora { font-size: 12px; font-weight: var(--weight-medium); color: var(--home-text-muted); min-width: 44px; flex-shrink: 0; letter-spacing: -0.01em; }
.home-agenda-nome { font-size: 14px; color: var(--home-text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.012em; }
.home-agenda-medico { font-size: 13px; color: var(--home-text-muted); white-space: nowrap; flex-shrink: 0; }

/* Card Financeiro da Home saiu (2026-07-02); .home-fin-hero/-table/-chart seguem vivas — medico-home reusa. */

.home-fin-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 18px;
}

.home-fin-hero-label {
  font-size: 12px;
  color: var(--home-text-muted);
  letter-spacing: -0.012em;
}

.home-fin-hero-value {
  font-family: var(--font-display);
  font-size: 39px;
  line-height: 0.9;
  letter-spacing: -0.045em;
  font-weight: var(--weight-medium);
  color: var(--home-text-strong);
}

.home-fin-hero-indicators {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 1px;
}

.home-fin-hero-meta {
  font-size: 12px;
  color: var(--home-text-muted);
  letter-spacing: -0.012em;
  margin-left: auto;
}

.home-fin-ind {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: var(--weight-medium);
  letter-spacing: -0.012em;
}

.home-fin-ind--up {
  color: var(--home-success);
}

.home-fin-ind--down {
  color: var(--home-text-muted);
}

.home-fin-ind-sep {
  font-size: 12px;
  color: var(--home-text-soft);
}

.home-fin-chart-wrap {
  min-height: 232px;
}

.home-fin-table {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.home-fin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--home-line-faint);
  font-size: 14px;
  color: var(--home-text);
}
.home-fin-row:last-child { border-bottom: none; }
.home-fin-row--muted { color: var(--home-text-muted); }
.home-fin-row--sub {
  color: var(--home-text-muted);
  font-size: 12px;
  padding-left: 8px;
}
.home-fin-recebido { color: var(--home-success); font-weight: var(--weight-semibold); }

/* Card To Do */
.home-todo-body { padding: 0; overflow-y: auto; align-self: flex-start; width: 100%; }

/* Sidebar badge */
.sidebar-item-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  background: var(--home-badge-bg);
  color: var(--home-badge);
  margin-left: auto;
  animation: badgePop 280ms cubic-bezier(0.32, 0.72, 0, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-item-badge { animation: none; }
}
.sidebar-item-badge:empty,
.sidebar-item-badge.hidden { display: none; }

/* Modal pendências (ficha do paciente — mantido) */
.pm-header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.pm-pac-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--accent-light);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 150ms;
}
.pm-header-inner:hover .pm-pac-icon { background: var(--accent-hover); }

.pm-header-info { display: flex; flex-direction: column; gap: 4px; }
.pm-header-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.pm-nome { font-size: var(--size-md); font-weight: var(--weight-semibold); }
.pm-meta { font-size: var(--size-xs); color: var(--text-muted); }
.pm-actions { display: flex; flex-direction: column; gap: 0; }

.pm-action-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.pm-action-row:last-child { border-bottom: none; }

.pm-action-icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: rgba(17,24,39,0.05);
  color: var(--text-muted);
}
.pm-action-info { flex: 1; min-width: 0; }
.pm-action-label { font-size: var(--size-sm); font-weight: var(--weight-medium); }
.pm-action-desc  { font-size: var(--size-xs); color: var(--text-muted); margin-top: 2px; }
.pm-action-btns  { display: flex; gap: var(--space-2); flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; max-width: 160px; }


/* View Pendências */
.pend-view {
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}

.pend-view .pend-toolbar {
  flex-shrink: 0;
}

.pend-view .ws-table-shell {
  width: 100%;
}

/* Painel genérico pendências */
.pend-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: 20px;
}

/* Empty state */
.pend-empty-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-10) var(--space-5);
  color: var(--text-muted);
  text-align: center;
}
.pend-empty-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(27,43,75,0.05);
  border-radius: 50%;
  color: var(--text-muted);
}
.pend-empty-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.pend-empty-sub {
  font-size: var(--size-sm);
  color: var(--text-xmuted);
}
.pend-empty-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-1);
}
.pend-empty-link {
  background: transparent;
  border: 0;
  padding: 6px 10px;
  font-size: var(--size-sm);
  color: var(--accent);
  font-weight: var(--weight-medium);
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.12s ease;
}
.pend-empty-link:hover {
  background: var(--home-accent-soft);
}
.pend-empty-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Lote — prep. Painel único: lista de tipos + linha de ação (ordem + CTA). */
.pend-lote-prep {
  max-width: 560px;
}
.pend-lote-card {
  background: linear-gradient(180deg, var(--home-surface-strong) 0%, var(--home-surface) 100%);
  border: 1px solid var(--home-line-soft);
  border-radius: 16px;
  box-shadow: var(--home-shadow-card);
  overflow: hidden;
}
.pend-lote-type-list {
  display: flex;
  flex-direction: column;
  padding: var(--space-2) 0;
}
.pend-lote-type {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 11px 18px;
  cursor: pointer;
  font-size: 14px;
  color: var(--home-text);
  letter-spacing: -0.012em;
}
.pend-lote-type:hover { background: var(--home-hover); }
.pend-lote-type--disabled { opacity: 0.45; cursor: not-allowed; }
.pend-lote-type-copy { flex: 1; }
.pend-lote-type-count {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--home-text-muted);
  min-width: 20px;
  text-align: right;
}
.pend-lote-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 18px;
  border-top: 1px solid var(--home-line-faint);
}
.pend-lote-order-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
}
.pend-lote-order-label {
  color: var(--home-text-muted);
}
.pend-lote-order-select {
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--home-line-soft);
  border-radius: var(--radius-sm);
  background: var(--home-surface);
  font-size: 13px;
  color: var(--home-text);
  cursor: pointer;
}
.pend-lote-order-select:focus {
  outline: none;
  border-color: var(--accent);
}

/* Lote — run phase. Workspace 2 colunas: fila (sidebar) + detalhe.
   Mobile empilha (regra @media abaixo). */
.pend-lote-workspace {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-5);
  align-items: start;
}
.pend-lote-queue {
  background: linear-gradient(180deg, var(--home-surface-strong) 0%, var(--home-surface) 100%);
  border: 1px solid var(--home-line-soft);
  border-radius: 12px;
  box-shadow: var(--home-shadow-card);
  overflow: hidden;
}
.pend-lote-queue-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 12px;
  border-bottom: 1px solid var(--home-line-faint);
}
.pend-lote-queue-kpis {
  margin-left: auto;
  font-size: 12px;
  color: var(--home-text-muted);
  letter-spacing: -0.01em;
}
.pend-lote-queue-kpis strong {
  font-weight: var(--weight-semibold);
  color: var(--home-text);
}
/* Botão "Voltar" / "Reconfigurar" — agora com label visível, não só seta */
.pend-lote-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 4px 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--home-text-muted);
  border-radius: 6px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: var(--weight-medium);
  transition: background 0.12s, color 0.12s;
}
.pend-lote-back:hover { background: var(--home-hover); color: var(--home-text-strong); }
.pend-lote-queue-list {
  display: flex;
  flex-direction: column;
  max-height: 480px;
  overflow-y: auto;
}
.pend-lote-queue-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  border-bottom: 1px solid var(--home-line-faint);
  transition: background 0.12s;
}
.pend-lote-queue-item:last-child { border-bottom: none; }
.pend-lote-queue-item:hover { background: var(--home-hover); }
/* Active distinto do hover: barra lateral colorida + título em semibold.
   Sem o indicador, hover e active eram visualmente idênticos. */
.pend-lote-queue-item.is-active {
  background: var(--home-hover);
  box-shadow: inset 3px 0 0 var(--accent);
}
.pend-lote-queue-item.is-active .pend-lote-queue-title {
  font-weight: var(--weight-semibold);
}
.pend-lote-queue-title {
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--home-text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pend-lote-queue-sub {
  font-size: 12px;
  color: var(--home-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Coluna direita — card único com 3 zonas: head, body (textarea + restaurar),
   footer (ações utilitárias à esquerda, ações principais à direita). */
.pend-lote-detail {
  background: linear-gradient(180deg, var(--home-surface-strong) 0%, var(--home-surface) 100%);
  border: 1px solid var(--home-line-soft);
  border-radius: 12px;
  box-shadow: var(--home-shadow-card);
  overflow: hidden;
}
.pend-lote-detail-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--home-line-faint);
}
.pend-lote-head-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.pend-lote-detail-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 16px 18px;
}
.pend-lote-detail-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 12px 18px;
  border-top: 1px solid var(--home-line-faint);
  background: var(--home-surface);
}
.pend-lote-paciente {
  font-size: 16px;
  font-weight: var(--weight-semibold);
  color: var(--home-text-strong);
  margin: 0 0 2px;
}
.pend-lote-summary {
  font-size: 13px;
  color: var(--home-text-muted);
  margin: 0;
}
.pend-lote-meta {
  font-size: 13px;
  color: var(--home-text-muted);
  white-space: nowrap;
}
.pend-lote-message-wrap {
  position: relative;
}
.pend-lote-copy-inline {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  transition: color 0.15s;
}
.pend-lote-message {
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.5;
  color: var(--home-text-strong);
  background: var(--home-hover);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px 38px 10px 12px;
  resize: vertical;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
  cursor: text;
}
.pend-lote-message:hover {
  background: var(--home-hover);
  border-color: var(--home-line-soft);
}
.pend-lote-message:focus {
  outline: none;
  background: var(--home-surface);
  border-color: var(--home-line-soft);
  cursor: auto;
}
/* Restaurar template — só aparece quando a mensagem foi editada.
   Chip cinza pequeno, alinhado à direita pra não competir com a textarea. */
.pend-lote-restore {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-end;
  padding: 4px 10px;
  background: var(--home-hover);
  border: 1px solid var(--home-line-soft);
  border-radius: 999px;
  color: var(--home-text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.pend-lote-restore:hover {
  background: var(--home-surface);
  color: var(--home-text-strong);
}
.pend-lote-utility-actions {
  display: flex;
  gap: var(--space-1);
}
.pend-lote-run-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.pend-lote-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--home-text-muted);
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}
.pend-lote-icon-btn:hover {
  background: var(--home-hover);
  color: var(--home-text-strong);
}

/* Banner pós-lote — feedback efêmero no topo da view Pendências.
   Aparece quando um lote termina (em vez da tela "done" cheia que parecia
   relatório). Auto-some em 10s, ou no clique do × / troca de aba.
   Filosofia: continuidade do fluxo > celebração de conquista. */
.pend-lote-banner {
  border: 1px solid var(--home-line-soft);
  border-radius: 10px;
  background: var(--home-surface-strong);
  margin-bottom: var(--space-4);
  overflow: hidden;
  animation: pendLoteBannerIn 220ms var(--easing-pop);
}
@keyframes pendLoteBannerIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pend-lote-banner-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 9px 10px 9px 14px;
  font-size: 13px;
  color: var(--home-text);
  letter-spacing: -0.005em;
}
.pend-lote-banner-icon {
  color: var(--accent);
  flex-shrink: 0;
}
.pend-lote-banner-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pend-lote-banner-text strong {
  font-weight: var(--weight-semibold);
  color: var(--home-text-strong);
}
.pend-lote-banner-breakdown {
  font-size: 12px;
  color: var(--home-text-muted);
  padding-left: var(--space-2);
  border-left: 1px solid var(--home-line-faint);
  white-space: nowrap;
  flex-shrink: 0;
}
.pend-lote-banner-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
  border-radius: 6px;
  flex-shrink: 0;
  transition: background 0.12s;
}
.pend-lote-banner-toggle:hover { background: var(--home-hover); }
.pend-lote-banner-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--home-text-muted);
  cursor: pointer;
  border-radius: 6px;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.pend-lote-banner-close:hover {
  background: var(--home-hover);
  color: var(--home-text-strong);
}
/* Lista de adiados — cada item mostra ícone do tipo (com cor do chip),
   nome do paciente em destaque, label da pendência em sub-linha, chevron à
   direita. Clique navega pra ficha. */
.pend-lote-banner-skipped {
  list-style: none;
  margin: 0;
  padding: 0 14px 6px 14px;
  border-top: 1px solid var(--home-line-faint);
}
.pend-lote-banner-skipped-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--home-text);
  border-bottom: 1px solid var(--home-line-faint);
  transition: color 0.12s;
  text-align: left;
}
.pend-lote-banner-skipped li:last-child .pend-lote-banner-skipped-item {
  border-bottom: none;
}
.pend-lote-banner-skipped-item:hover .pend-lote-banner-skipped-name {
  color: var(--accent);
}
/* Ícone do tipo herda visual de .pend-chip (mesma fonte das pendências) */
.pend-lote-banner-skipped-ic {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.pend-lote-banner-skipped-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.pend-lote-banner-skipped-name {
  font-size: 13px;
  color: var(--home-text-strong);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.12s;
}
.pend-lote-banner-skipped-label {
  font-size: 12px;
  color: var(--home-text-muted);
  margin-top: 1px;
}
.pend-lote-banner-skipped-item > svg {
  color: var(--home-text-muted);
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .pend-lote-banner-row {
    flex-wrap: wrap;
    padding: 9px 8px 9px 12px;
  }
  .pend-lote-banner-breakdown {
    border-left: none;
    padding-left: 0;
    width: 100%;
    order: 5;
  }
}

/* Bulk bar — flutuante na base */
.pend-bulk-bar {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  transition: opacity 160ms ease, transform 200ms cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 24px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
  white-space: nowrap;
}
.pend-bulk-bar.hidden { opacity: 0; transform: translateX(-50%) translateY(16px); pointer-events: none; }
.pend-bulk-count {
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  padding-right: 6px;
  border-right: 1px solid var(--border);
}
.pend-bulk-actions {
  display: flex;
  gap: 4px;
}
.pend-bulk-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  color: var(--text);
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background 120ms;
}
.pend-bulk-btn:hover { background: var(--accent-light); color: var(--accent); }
.pend-bulk-btn--danger { color: #DC2626; }
.pend-bulk-btn--danger:hover { background: rgba(220,38,38,0.06); color: #DC2626; }
.pend-bulk-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.04);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 120ms;
  flex-shrink: 0;
  margin-left: 2px;
}
.pend-bulk-clear:hover { background: rgba(0,0,0,0.08); color: var(--text); }

.pend-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

/* ── Pendências agrupadas por paciente ───────────────────────── */
.pend-group-list { display: flex; flex-direction: column; gap: 10px; }

.pend-group {
  background: #fff;
  border: 1px solid var(--home-line-soft);
  border-radius: 14px;
  overflow: hidden;
}
.pend-group-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  cursor: pointer;
  outline: none;
  transition: background 120ms;
}
.pend-group-head:hover { background: var(--accent-tint-1); }
.pend-group-head:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-tint-3); }
.pend-group-chev { color: var(--text-xmuted); flex-shrink: 0; display: flex; transition: transform 160ms; }
.pend-group--open .pend-group-chev { transform: rotate(90deg); }
.pend-group-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent-tint-1); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: var(--weight-semibold); flex-shrink: 0;
}
.pend-group-info { flex: 1; min-width: 0; }
.pend-group-nome-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pend-group-nome { font-size: 15px; font-weight: var(--weight-semibold); color: var(--text-ink); }
.pend-group-chips { display: flex; align-items: center; gap: 5px; }
.pend-group-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.pend-group-total { color: var(--text-ink); font-weight: var(--weight-medium); }
.pend-group-tel { color: var(--text-xmuted); }
.pend-group-trail { flex-shrink: 0; }
.pend-group-lote-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--accent-tint-3); background: var(--accent-tint-1);
  color: var(--accent); font-size: 13px; font-weight: var(--weight-medium);
  cursor: pointer; transition: background 120ms;
}
.pend-group-lote-btn:hover { background: var(--accent-tint-2); }
.pend-group-lote-btn svg { width: 15px; height: 15px; }
.pend-group-lote-text { font-weight: var(--weight-medium); }
.pend-group-lote-count {
  font-weight: var(--weight-semibold);
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  line-height: 1;
}

/* chip ícone+contagem — alarga o .pend-chip (26px fixo) p/ caber o número */
.pend-chip--count { width: auto; min-width: 24px; height: 24px; padding: 0 7px; gap: 4px; background: rgba(118,129,166,0.07); }
.pend-chip-count { font-size: 12px; font-weight: var(--weight-semibold); color: var(--text-ink); }

/* itens expandidos */
.pend-group-items { display: none; border-top: 1px solid var(--home-line-soft); }
.pend-group--open .pend-group-items { display: block; }
.pend-group-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 18px 11px 70px;
  border-bottom: 1px solid var(--home-line-faint);
}
.pend-group-item:last-child { border-bottom: none; }
.pend-group-item-ic { width: 26px; height: 26px; flex-shrink: 0; }
.pend-group-item-desc { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pend-group-item-main { font-size: 14px; color: var(--text-ink); }
.pend-group-item-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.pend-group-item-acts { display: flex; gap: 6px; flex-shrink: 0; }

/* mobile: padding do item recolhe, chips podem quebrar */
@media (max-width: 767px) {
  .pend-group-head { padding: 12px 14px; gap: 10px; }
  .pend-group-item { padding: 10px 14px 10px 14px; }
  /* mobile: esconde o label de texto mas mantém ícone + contagem (Cobrar(3) → WA + 3) */
  .pend-group-lote-text { display: none; }
  .pend-group-lote-btn { padding: 0 10px; gap: 4px; }
}

/* ── Valores por paciente (reusa a casca .pend-group) ────────────────────── */
/* Linha de serviço dentro do card expandido: nome | valor | ações */
.val-serv-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--home-line-soft);
}
.val-serv-row:last-child { border-bottom: none; }
.val-serv-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.val-serv-nome-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.val-serv-nome { font-size: 14px; color: var(--text-ink); font-weight: var(--weight-medium); }
.val-serv-tag { font-size: 12px; color: var(--text-xmuted); margin-top: 1px; }
.val-serv-valor {
  font-size: 15px; font-weight: var(--weight-semibold); color: var(--text-ink);
  flex-shrink: 0; font-variant-numeric: tabular-nums;
  min-width: 88px; text-align: right;
}
.val-serv-acts { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* pill de reajuste — reusa o visual do lote-btn, um pouco menor */
.val-reaj-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px; border-radius: 9px;
  border: 1px solid var(--accent-tint-3); background: var(--accent-tint-1);
  color: var(--accent); font-size: 13px; font-weight: var(--weight-medium);
  cursor: pointer; transition: background 120ms;
}
.val-reaj-btn:hover { background: var(--accent-tint-2); }
.val-reaj-btn svg { width: 14px; height: 14px; }
/* badge "reajuste pendente" no lugar do botão quando há proposta em aberto */
.val-pend-badge {
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
  border-radius: 9px; font-size: 12px; font-weight: var(--weight-medium);
  background: var(--warning-bg); color: var(--warning);
}
.val-pending-audit {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 7px;
  padding: 8px 10px;
  border-left: 2px solid var(--warning);
  border-radius: 0 7px 7px 0;
  background: var(--warning-bg);
  color: var(--text-cool);
  font-size: 11px;
}
.val-pending-values { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.val-pending-values strong { color: var(--text-ink); font-variant-numeric: tabular-nums; }
.val-pending-just { color: var(--text-ink); overflow-wrap: anywhere; }
.val-pending-meta { color: var(--text-muted); }
/* sub-linha do card: contagem de serviços */
.val-group-count { color: var(--text-muted); }

@media (max-width: 767px) {
  .val-serv-row { padding: 11px 14px; gap: 10px; }
  .val-reaj-text { display: none; }
  .val-reaj-btn { padding: 0 10px; }
  .val-serv-row { align-items: flex-start; flex-wrap: wrap; }
  .val-serv-info:has(.val-pending-audit) { flex-basis: 100%; }
}

/* Badge de tendência no cabeçalho da linha de serviço: ↗ +20% · mai/26 */
.val-trend-badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px; border-radius: 7px;
  font-size: 12px; font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.val-trend-badge svg { flex-shrink: 0; }
.val-trend-badge-date { font-weight: var(--weight-medium); opacity: 0.75; }
.val-trend-badge--up { background: var(--log-insert-bg); color: var(--log-insert); }
.val-trend-badge--down { background: var(--log-delete-bg); color: var(--error); }

/* Badge "há X sem reajuste" — valor parado (6+ meses = âmbar, 12+ = mais forte) */
.val-stale-badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px; border-radius: 7px;
  font-size: 12px; font-weight: var(--weight-medium); white-space: nowrap;
  /* texto: --warning escurecido p/ passar AA (4.5) sobre o fundo âmbar */
  background: var(--warning-bg); color: color-mix(in srgb, var(--warning) 85%, black);
}
.val-stale-badge svg { flex-shrink: 0; }
/* forte (12m+): mesmo token, fundo mais denso derivado do --warning */
.val-stale-badge--forte { background: color-mix(in srgb, var(--warning) 18%, transparent); font-weight: var(--weight-semibold); }
/* alinha verticalmente o badge de parado com o texto da sub-linha */
.val-sub-stale { display: inline-flex; vertical-align: middle; }
.pend-group-sub:has(.val-sub-stale) { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ── Drawer de histórico: header rico + step chart + timeline ────────────── */
.val-dh-meta {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
  font-size: 13px; color: var(--text-muted); padding: 4px 0 2px;
}
.val-dh-valor { font-size: 22px; font-weight: var(--weight-semibold); color: var(--text-ink); font-variant-numeric: tabular-nums; }
.val-dh-sep { color: var(--text-xmuted); }
.val-dh-delta { font-weight: var(--weight-semibold); }
.val-dh-delta--up { color: var(--log-insert); }
.val-dh-delta--down { color: var(--error); }

.val-chart-block { margin: 16px 0 8px; }
.val-chart-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.val-chart-kicker { font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-xmuted); }
.val-chart { display: block; width: 100%; height: 128px; overflow: visible; }
.val-chart-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.val-chart-area { fill: var(--accent-tint-1); stroke: none; }
.val-chart-dot { fill: var(--bg-card); stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.val-chart-lbl { fill: var(--text-muted); font-size: 11px; font-weight: 600; font-family: inherit; }

.val-tl { list-style: none; margin: 14px 0 0; padding: 0; position: relative; }
/* linha vertical conectando os pontos da timeline */
.val-tl::before { content: ''; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1px; background: var(--home-line-soft); }
.val-tl-item { position: relative; display: flex; gap: 14px; padding: 8px 0; }
.val-tl-dot { position: relative; z-index: 1; flex-shrink: 0; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--bg-card); }
.val-tl-body { flex: 1; min-width: 0; }
.val-tl-main { font-size: 14px; color: var(--text-ink); }
.val-tl-arrow { color: var(--text-xmuted); margin: 0 2px; }
.val-tl-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.val-tl-empty { font-size: 13px; color: var(--text-muted); padding: 12px 0; line-height: 1.5; }

.pend-toggles {
  display: flex;
  background: rgba(27,43,75,0.05);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
}

.pend-toggle {
  padding: 5px 16px;
  border-radius: 6px;
  border: none;
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  transition: background 140ms, color 140ms, box-shadow 140ms;
}
.pend-toggle--active {
  background: #FFFFFF;
  color: var(--text-ink);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.pend-filters { display: flex; gap: 8px; flex-wrap: wrap; }

.ws-filter-select,
.pend-filter-select {
  height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(27,43,75,0.10);
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  font-size: 13px;
  color: var(--text-ink);
  cursor: pointer;
  width: auto;
  flex: 0 0 auto;
}

/* Checkbox column */
.pend-view .ws-table thead th:first-child,
.pend-cell-check {
  width: 40px;
  padding: 0 16px 0 16px !important;
  vertical-align: middle !important;
  text-align: center;
}
.pend-cell-check input {
  display: block;
  margin: auto;
}
.pend-checkbox {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  border: 1.5px solid rgba(27,43,75,0.22);
  background: #fff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  display: block;
  flex-shrink: 0;
  transition: border-color 120ms, background 120ms;
  position: relative;
}
.pend-checkbox:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.pend-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 1px;
  width: 5px;
  height: 8px;
  border: 1.5px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.pend-checkbox:indeterminate {
  background: var(--accent);
  border-color: var(--accent);
}
.pend-checkbox:indeterminate::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 5px;
  width: 7px;
  height: 1.5px;
  background: #fff;
}
/* Checkbox visível só no hover ou quando selecionado */
.pend-checkbox-row {
  opacity: 0;
  transition: opacity 120ms;
}
.ws-table-row:hover .pend-checkbox-row,
.ws-row-active .pend-checkbox-row,
.pend-checkbox-row:checked {
  opacity: 1;
}
.pend-cell-actions { text-align: right; white-space: nowrap; }

/* Mobile: tabela espremia 6 colunas em 375px e gerava 707px de scrollWidth.
   Esconde Médico e Descrição; replica info dentro da célula Paciente via
   .pend-cell-mobile-only (oculto no desktop). Ações ficam visíveis (~56px). */
.pend-cell-mobile-only { display: none; }

@media (max-width: 767px) {
  /* Esconde só Médico (4) e Descrição (5) — coluna 6 (Ações) fica visível.
     Escopo restrito a .pend-view pra não vazar pra tabelas de Config/Acesso. */
  .pend-cell-medico,
  .pend-cell-desc,
  .pend-view .ws-table thead th:nth-child(4),
  .pend-view .ws-table thead th:nth-child(5) {
    display: none;
  }
  /* Linha 1: nome (destaque) — herda estilo do .pend-open-ficha
     Linha 2: meta (médico · descrição) com bullet — single line, ellipsis
     Linha 3: telefone, pequenino — só se necessário */
  .pend-cell-mobile-only {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  /* Linha "Dra. X · Confirmar consulta · 19/05 às 20:00" — uma linha só */
  .pend-cell-mobile-meta {
    display: none;  /* incorpora dentro de mobile-desc com bullet */
  }
  .pend-cell-mobile-desc {
    margin-top: 1px;
  }
  /* Aperta padding lateral pra caber em 375px */
  .ws-table th,
  .ws-table td {
    padding-left: 6px;
    padding-right: 6px;
  }
  .pend-cell-paciente {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .pend-cell-paciente .pend-open-ficha {
    white-space: normal;
    text-align: left;
    line-height: 1.2;
    font-size: 14px;
    font-weight: var(--weight-medium);
    overflow-wrap: anywhere;
  }
  /* Telefone fica abaixo do nome em fonte menor, opacidade reduzida */
  .pend-cell-paciente .pend-cell-inline-meta {
    font-size: 11px;
    color: var(--text-xmuted);
    margin-top: 1px;
  }
  .pend-cell-actions {
    padding-left: 2px;
    padding-right: 4px;
  }
  /* Força layout fixo pra coluna Ações não ser empurrada pra fora pelo nome longo */
  .pend-view .ws-table { table-layout: fixed; width: 100%; }
  .pend-view .ws-table thead th:nth-child(6) { width: 72px !important; }

  /* Mensagens em lote — fase prep: card único, ordem acima do CTA */
  .pend-lote-prep {
    max-width: none;
  }
  .pend-lote-type {
    padding: 10px 16px;
    font-size: 13px;
  }
  .pend-lote-card-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding: var(--space-3) 16px;
  }
  .pend-lote-order-inline {
    justify-content: space-between;
  }
  .pend-lote-card-actions .btn-primary {
    width: 100%;
  }

  /* Mensagens em lote — fase run: empilha fila acima do detalhe.
     Footer empilha utilitárias acima das principais; ambas full-width. */
  .pend-lote-workspace {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .pend-lote-queue-list {
    max-height: 200px;
  }
  .pend-lote-detail-head,
  .pend-lote-detail-body {
    padding: 14px 16px;
  }
  .pend-lote-detail-footer {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding: 12px 16px;
  }
  .pend-lote-utility-actions {
    justify-content: flex-start;
  }
  .pend-lote-run-actions {
    justify-content: stretch;
  }
  .pend-lote-run-actions .btn-primary,
  .pend-lote-run-actions .btn-secondary {
    flex: 1;
  }
}

.row-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.row-action-btn svg {
  display: block;
  pointer-events: none;
  flex-shrink: 0;
}

.row-action-btn:hover {
  background: rgba(27,43,75,0.07);
  color: var(--text-ink);
}
.row-action-btn:disabled,
.row-action-btn[disabled] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
.row-action-btn--danger:hover {
  background: rgba(220,38,38,0.07);
  color: #DC2626;
}

/* filter-pill — mantido para outras views */
.filter-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--surface-tint-border);
  background: rgba(255,255,255,0.76);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.58);
  color: var(--text-cool);
  font-size: var(--size-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background 150ms, border-color 150ms, color 150ms, box-shadow 150ms;
}
.filter-pill:hover { border-color: rgba(123,108,168,0.22); background: rgba(255,255,255,0.92); color: var(--text-ink); }
.filter-pill-active { background: var(--accent-tint-2); border-color: var(--accent-tint-3); color: var(--accent); box-shadow: none; }
.filter-pill-circle { width: 34px; min-width: 34px; height: 34px; padding: 0; border-radius: 50%; font-size: var(--size-sm); }
.filter-pill-mono { color: var(--accent); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.filter-pill-mono:hover { color: var(--accent); }
.pac-filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  margin-left: 5px;
  border-radius: var(--radius-pill);
  background: rgba(112,115,147,0.10);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: var(--weight-medium);
  line-height: 1;
}
.filter-pill-active .pac-filter-badge {
  background: rgba(27,43,75,0.12);
  color: var(--accent);
}

.pm-footer-btn {
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.64);
}

.pm-footer-btn:hover {
  background: var(--bg);
  border-color: rgba(27,43,75,0.16);
}

.pm-footer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 14px;
  color: var(--text-ink);
  font-size: 13px;
  font-weight: var(--weight-medium);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.pm-footer-cta svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Modal NF */
.nf-modal {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Layout 2 colunas: contexto (esq) + formulário (dir) */
.nf-modal--cols {
  flex-direction: row;
  gap: 0;
  min-height: 0;
}

.nf-col-left {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5);
  background: #F4F6FB;
  border-radius: 10px 0 0 10px;
  overflow-y: auto;
}

.nf-col-right {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border-left: 1px solid rgba(0,0,0,0.06);
}

.nf-col-right .nf-section-title {
  margin-bottom: var(--space-1);
}

.nf-col-right .nf-form-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (max-width: 767px) {
  .nf-modal--cols {
    flex-direction: column;
  }
  .nf-col-left {
    border-radius: 10px 10px 0 0;
  }
  .nf-col-right {
    border-left: none;
    border-top: 1px solid rgba(0,0,0,0.06);
    flex: none;
  }
}

.nf-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.nf-summary-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 440;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-ink);
}

.nf-summary-main {
  font-size: var(--size-sm);
  color: var(--text);
  margin-top: 2px;
}

.nf-summary-meta {
  font-size: var(--size-xs);
  color: var(--text-muted);
}

.nf-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.nf-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-xmuted);
}

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

.nf-copy-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: transparent;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin: 0 -10px;
  transition: background 120ms;
}
.nf-copy-block:hover {
  background: rgba(27,43,75,0.04);
}

.nf-copy-label {
  font-size: var(--size-xs);
  color: var(--text-muted);
  line-height: 1;
}

.nf-copy-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.nf-copy-value {
  font-size: var(--size-sm);
  color: var(--text);
  line-height: 1.45;
  word-break: break-word;
  flex: 1;
}

.nf-copy-value--multi {
  white-space: pre-wrap;
}

.nf-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 140ms, color 140ms, opacity 120ms;
  margin-top: -2px;
  opacity: 0;
}
.nf-copy-block:hover .nf-copy-btn { opacity: 1; }
.nf-copy-btn:hover { background: var(--accent-light); color: var(--accent); }
.nf-copy-btn--copied { pointer-events: none; opacity: 1; }

.nf-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.nf-footer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  width: 100%;
}

.nf-wa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--accent-light);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 140ms, color 140ms;
}
.nf-wa-btn:hover {
  background: var(--accent-hover);
  color: var(--accent);
}
.nf-wa-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Badge NF clicável — ficha */
.ficha-nf-badge-btn {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--accent-light);
  color: var(--accent);
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background 140ms, color 140ms;
}
.ficha-nf-badge-btn:hover {
  background: rgba(27,43,75,0.15);
}

/* Badge NF clicável — financeiro */
.fin-nf-badge-btn {
  cursor: pointer;
  border: none;
  transition: opacity 140ms;
}
.fin-nf-badge-btn:hover { opacity: 0.75; }

/* Chip NF clicável dentro do drawer de cobrança — herda visual do
   .fin-drawer-chip e só ajusta font/cursor pra que <button> não puxe
   defaults do user-agent. */
.fin-drawer-chip-btn {
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: opacity 140ms;
}
.fin-drawer-chip-btn:hover { opacity: 0.75; }

/* Modal de visualização NF */
.nf-view-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.nf-view-fields {
  display: flex;
  gap: var(--space-6);
}
.nf-view-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.nf-view-value {
  font-size: var(--size-sm);
  color: var(--text);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.nf-view-open-btn {
  flex-shrink: 0;
  align-self: center;
  opacity: 1;
}

/* ============================================================
   Responsive — Tablet (< 1024px)
   ============================================================ */
/* ============================================================
   Responsive — Mobile (< 768px)
   ============================================================ */
@media (max-width: 767px) {
  :root {
    --topbar-h: 60px;
  }

  body {
    overflow-x: hidden;
  }

  .btn-primary,
  .btn-secondary,
  .btn-destructive,
  .btn-icon,
  .filter-pill,
  .sidebar-item {
    min-height: 44px;
  }

  /* Sair virou ícone quadrado — alvo de toque de 40px, não estica pra 44 de
     altura (viraria oval ao lado do avatar de 34px). */
  .sidebar-logout {
    width: 40px;
    height: 40px;
  }

  .sidebar {
    width: min(88vw, 320px);
    transform: translateX(-100%);
  }

  .sidebar.sidebar-open {
    transform: translateX(0);
  }

  /* Fix: a preferência desktop pode persistir no resize; no mobile ela não
     altera visualmente a gaveta, mas continua disponível ao voltar ao desktop. */
  .sidebar-collapsed .sidebar-logo-text,
  .sidebar-collapsed .sidebar-item span,
  .sidebar-collapsed .sidebar-user-info {
    opacity: 1;
    pointer-events: auto;
    width: auto;
    overflow: visible;
    white-space: normal;
  }
  .sidebar-collapsed .sidebar-header {
    justify-content: flex-start;
    padding: 0 14px;
    gap: 8px;
  }
  .sidebar-collapsed .sidebar-nav {
    padding: var(--space-3);
    align-items: stretch;
    gap: var(--space-1);
  }
  .sidebar-collapsed .sidebar-item {
    justify-content: flex-start;
    padding: 9px var(--space-3);
    width: auto;
    height: auto;
    margin: 0;
    border-radius: var(--radius-md);
    gap: var(--space-3);
  }
  .sidebar-collapsed .sidebar-item.sidebar-subitem {
    padding: var(--space-2) var(--space-3) var(--space-2) calc(var(--space-3) + var(--sidebar-icon-w) + var(--space-3));
  }
  .sidebar-collapsed .sidebar-item-badge {
    position: static;
    min-width: 18px;
    width: auto;
    height: 18px;
    padding: 0 5px;
    font-size: 10px;
    margin-left: auto;
  }
  .sidebar-collapsed .sidebar-footer {
    align-items: stretch;
    padding: var(--space-3);
  }
  .sidebar-collapsed .sidebar-user {
    flex-direction: row;
    gap: var(--space-2);
    padding: var(--space-2) 6px;
  }
  .sidebar-collapsed .sidebar-user-info { display: flex; }
  .sidebar-collapsed .sidebar-logout {
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: var(--radius-md);
  }
  .sidebar-collapsed .sidebar-nav-divider {
    width: auto;
    margin: var(--space-2) var(--space-3);
  }
  .sidebar-collapsed .sidebar-group-link { justify-content: flex-start; }
  .sidebar-collapsed .sidebar-group-chevron { display: flex; }
  .sidebar-collapsed .sidebar-subnav { display: grid; }

  .main-wrapper {
    margin-left: 0;
  }
  .sidebar.sidebar-collapsed ~ .main-wrapper { margin-left: 0; }

  .topbar {
    padding: 0 var(--space-4);
    gap: var(--space-3);
  }

  .topbar-left {
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
  }

  .page-title {
    display: block;
    font-size: 16px;
    font-weight: var(--weight-semibold);
    color: var(--shell-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
  }

  .topbar-right {
    gap: 8px;
    min-width: 0;
  }

  #medico-filter-wrap:not(.hidden) {
    flex: 0 1 auto;
    min-width: 0;
  }

  .mf-root {
    width: clamp(140px, 44vw, 180px);
  }

  .mf-input {
    font-size: 13px;
  }

  .notif-popover {
    position: fixed;
    top: calc(var(--topbar-h) + 8px);
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
  }

  .hamburger {
    display: inline-flex;
  }

  .topbar-datetime {
    display: none;
  }

  .view {
    padding: var(--space-4);
  }

  .view--agenda {
    padding: var(--space-4);
  }

  .view-header {
    padding: var(--space-4) var(--space-4) var(--space-2);
  }

  .view-header-greeting {
    font-size: 23px;
  }

  .view-header-title {
    font-size: 18px;
  }

  .toast-container {
    top: calc(env(safe-area-inset-top) + 12px);
    left: 16px;
    right: 16px;
    transform: none;
    max-width: none;
    align-items: center;
  }
  .toast { width: 100%; max-width: 100%; }

  .home-grid {
    gap: 16px;
  }
  /* Reorder mobile (1 coluna + labels de seção) está no @media 767 mais abaixo,
     em .home-grid:not(.medico-home-grid), via grid-row explícito. */
  .home-card {
    min-height: 220px;
  }
  .home-card-link,
  .hw-header-add-btn {
    min-height: 40px;
    min-width: 40px;
  }
  .home-pend-row {
    min-height: 48px;
  }
  .pm-action-btns { flex-direction: column; align-items: flex-end; }
  .nf-form-grid { grid-template-columns: 1fr; }

  /* ===== Agenda mobile — toolbar unificada + view-header oculto ===== */

  /* Esconde o view-header ("Agenda" + saudação) — título já está na topbar */
  #view-header,
  .view-header {
    display: none !important;
  }

  .view--agenda {
    padding: var(--space-3) var(--space-2);
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }
  /* Em mobile o scroll vai pro container interno da grade, não pra .view.
     Sem isso, .view--agenda vira "altura de conteúdo" e sobra branco abaixo. */
  .view:has(.ag-wrap) {
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* Toolbar em linha única:
     [<]  Abril 2026  [>]  [Dia|Semana|Mês]  [+] */
  .ag-toolbar {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .ag-nav {
    flex: 0 0 auto !important;
    width: auto !important;
    justify-content: flex-start !important;
    gap: 2px;
    min-width: 0;
  }
  /* Mobile mostra o botão "Hoje" entre as setas (mais compacto que o label do período) */
  .ag-hoje-btn {
    display: inline-flex !important;
    flex: 0 0 auto;
    padding: 0 8px !important;
    font-size: 13px !important;
  }
  .ag-periodo {
    display: none !important;
  }
  /* Label clicável (date-picker do mini-calendário) → fica visível também no
     mobile, nas agendas que o adotam (médico e secretária). O caret continua,
     mas o padding encolhe pra caber na linha única. */
  .ag-periodo.ag-periodo-clickable {
    display: inline-flex !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 3px 4px;
  }
  .ag-nav-pill {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    flex-shrink: 0;
  }
  .ag-toolbar-right {
    flex: 1 1 auto !important;
    width: auto !important;
    gap: 6px !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
  }
  .ag-view-toggle {
    flex: 0 1 auto !important;
    height: 28px;
    padding: 2px !important;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
  }
  .ag-view-btn {
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    flex: 0 1 auto !important;
    white-space: nowrap;
    box-sizing: border-box;
    line-height: 1;
  }
  .ag-quick-add {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    min-height: 28px !important;
  }
  .ag-calendar-wrap {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Toggle Dia/Semana/Mês preenche a largura inteira */
  .ag-view-toggle {
    display: flex;
  }
  .ag-view-btn {
    flex: 1 1 0;
  }

  /* Chip de agendamento em mobile: altura compacta + cantos arredondados.
     min-height = SLOT_HEIGHT_PX (50) do JS — senão o chip vaza pra linha seguinte. */
  .ag-row,
  .ag-dia-row {
    min-height: 50px !important;
  }
  .ag-event,
  .ag-dia-event {
    left: 6px !important;
    right: 6px !important;
    border-radius: 10px;
    padding: 6px 10px;
  }
  .ag-event .ag-ev-nome,
  .ag-dia-event .ag-ev-nome {
    font-size: 13px;
    font-weight: 560;
  }
  .ag-event .ag-ev-serv,
  .ag-dia-event .ag-ev-serv {
    font-size: 11px;
  }

  /* Semana filtrada: container vira scroll 2D e preenche altura disponível */
  .ag-semana-wrap {
    overflow: auto;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }
  .ag-semana-wrap .ag-header {
    min-width: max-content;
    grid-template-columns: 56px repeat(7, minmax(100px, 1fr));
    position: sticky;
    top: 0;
    z-index: 3;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .ag-semana-wrap .ag-body {
    overflow: visible;
    min-width: max-content;
  }
  .ag-semana-wrap .ag-row {
    grid-template-columns: 56px repeat(7, minmax(100px, 1fr));
  }
  .ag-semana-wrap .ag-birthday-week-row {
    min-width: max-content;
    grid-template-columns: 56px repeat(7, minmax(100px, 1fr));
  }
  .ag-semana-wrap .ag-time-label,
  .ag-semana-wrap .ag-time-gutter {
    position: sticky;
    left: 0;
    z-index: 2;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .ag-semana-wrap .ag-header .ag-time-gutter {
    z-index: 4;
  }

  /* Dia filtrado: esconder painel de pendências/tarefas lateral em mobile */
  .ag-dia-wrap .ag-dia-header {
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    grid-template-columns: 56px minmax(0, 1fr) !important;
  }
  .ag-dia-row {
    grid-template-columns: 56px minmax(0, 1fr) !important;
  }
  .ag-birthday-strip {
    grid-template-columns: 56px minmax(0, 1fr) !important;
  }
  .ag-time-label {
    padding: 6px 4px 0 8px !important;
    font-size: 11px !important;
    background: #ffffff;
    justify-content: flex-start !important;
    align-items: stretch !important;
    text-align: left !important;
    border-right: 1px solid var(--border-soft) !important;
  }
  .ag-dia-pend,
  .pag-dia-tasks {
    display: none !important;
  }
  .ag-dia-wrap,
  .pag-dia-wrap {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  /* Grade sem filtro (dia multi-médico):
     unifica scroll horizontal do header + corpo em um único container
     (.ag-grade-wrap). Header vira sticky top, coluna de horas vira
     sticky left. Assim a linha dos médicos scrolla junto com a grade. */
  .ag-grade-wrap {
    overflow: auto !important;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
  }
  .ag-grade-header-row {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    overflow: visible !important;
    background: rgba(255,255,255,0.96) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }
  .ag-grade-scroll {
    overflow: visible !important;
  }
  .ag-grade-corner {
    position: sticky;
    left: 0;
    z-index: 4;
    background: rgba(255,255,255,0.96);
  }
  .ag-grade-time {
    position: sticky;
    left: 0;
    z-index: 2;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  /* Header dos médicos: primeira célula (canto) também sticky left
     — interseção do top+left. z-index maior que ambos. */
  .ag-grade-header-row .ag-grade-corner {
    z-index: 5 !important;
  }

  /* Legendas de status ficam ocultas em mobile — ocupam espaço sem ajudar,
     usuário já conhece as cores pelo uso. */
  .ag-legend,
  .ag-tabela-legenda,
  .pag-legend {
    display: none !important;
  }

  /* ===== Mês mobile — estilo Apple Calendar ===== */
  /* 7 colunas iguais (minmax 0,1fr impede expansão por conteúdo longo) */
  .ag-mes-header,
  .ag-mes-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }
  .ag-mes-wrap {
    overflow-x: hidden;
    width: 100%;
  }

  /* Mês preenche o viewport: linhas iguais dividindo a altura disponível.
     Mínimo 88px pra caber número (16) + 2 chips (18 cada) + "+N mais" (14) + gaps. */
  .ag-mes-grid {
    grid-auto-rows: minmax(88px, 1fr) !important;
    align-content: stretch !important;
    flex: 1 1 auto !important;
    overflow-y: hidden !important;
  }
  .ag-mes-cell {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 4px 2px 4px !important;
    gap: 2px !important;
    min-width: 0;
    overflow: hidden !important;
  }
  /* Body do chip com scroll oculto (visualmente cortado) e altura mínima zero
     pra não empurrar o "+N mais" pra fora da célula */
  .ag-mes-cell-body {
    overflow: hidden !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  /* Número do dia: grande, negrito, topo-centro (Apple style) */
  .ag-mes-cell-head {
    justify-content: center !important;
    padding: 2px 0 !important;
  }
  .ag-mes-dia-num {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    line-height: 1 !important;
  }
  /* Hoje: círculo navy sólido */
  .ag-mes-dia-hoje {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--accent) !important;
    color: #fff !important;
    font-weight: 700 !important;
  }

  /* Header da semana: letras menores, cinza */
  .ag-mes-dow {
    padding: 8px 2px !important;
    font-size: 10px !important;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* Chips viram pílulas — ocupam largura da célula */
  .ag-mes-cell-body {
    gap: 2px !important;
    width: 100%;
  }
  .ag-mes-chip {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    width: 100% !important;
    padding: 2px 4px !important;
    border-radius: 4px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    min-height: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    min-height: 15px;
    overflow: hidden;
  }
  /* Fundo pastel do status (usa --s-<status>-bg já existente).
     Especificidade dupla (2 classes) vence .ag-ev-X (1 classe) — sem !important. */
  .ag-mes-chip.ag-ev-agendada   { background: var(--s-agendada-bg); }
  .ag-mes-chip.ag-ev-confirmada { background: var(--s-confirmada-bg); }
  .ag-mes-chip.ag-ev-atendida   { background: var(--s-atendida-bg); }
  .ag-mes-chip.ag-ev-falta      { background: var(--s-falta-bg); }
  .ag-mes-chip.ag-ev-cancelada  { background: var(--s-cancelada-bg); }

  /* Barra lateral fina (mantém o indicador de cor do status) */
  .ag-mes-chip-bar {
    display: none !important;
  }

  /* Nome truncado, cor sólida do status */
  .ag-mes-chip-nome {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    font-weight: 600 !important;
  }
  .ag-ev-agendada   .ag-mes-chip-nome { color: var(--s-agendada); }
  .ag-ev-confirmada .ag-mes-chip-nome { color: var(--s-confirmada); }
  .ag-ev-atendida   .ag-mes-chip-nome { color: var(--s-atendida); }
  .ag-ev-falta      .ag-mes-chip-nome { color: var(--s-falta); }
  .ag-ev-cancelada  .ag-mes-chip-nome { color: var(--s-cancelada); }

  /* Esconde separador e hora no chip mobile (falta espaço) */
  .ag-mes-chip-sep,
  .ag-mes-chip-hora {
    display: none !important;
  }

  /* Ícone de modalidade: pequeno, à direita, mesma cor do nome */
  .ag-mes-chip .ag-ev-mode-icon {
    flex-shrink: 0;
    opacity: 0.7;
  }
  .ag-mes-chip .ag-ev-mode-icon svg {
    width: 8px;
    height: 8px;
  }

  /* +N mais: linha única, centralizado, discreto */
  .ag-mes-mais {
    font-size: 9px !important;
    color: var(--text-muted);
    text-align: center;
    padding: 2px 0 0 !important;
    white-space: nowrap;
  }

  /* ===== Pessoal mobile — espelha Agenda médica =====
     Tabs ficam no topo (já estão em .pes-tab-bar), view-header sai,
     toolbar compacta com [<] [Hoje] [>]  [Dia|Semana|Mês] [+],
     grade preenche viewport. */

  .view--pessoal-agenda {
    padding: 0 var(--space-2) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
  }
  .view:has(.pag-wrap) {
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* Tab bar compacta */
  .pes-tab-bar {
    margin: 0 !important;
    padding: 4px 12px 0 !important;
    flex-shrink: 0;
  }
  .pes-tab-bar .tabs {
    gap: 18px;
  }
  .pes-tab-bar .tab {
    font-size: 14px !important;
    padding: 8px 2px !important;
  }

  #pes-tab-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .pag-wrap {
    padding: var(--space-3) var(--space-2);
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Toolbar em linha única */
  .pag-toolbar {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .pag-nav {
    flex: 0 0 auto !important;
    gap: 2px !important;
    min-width: 0;
  }
  .pag-hoje-btn {
    display: inline-flex !important;
    flex: 0 0 auto;
    padding: 0 6px !important;
    font-size: 13px !important;
  }
  .pag-periodo {
    display: none !important;
  }
  /* Label clicável (date-picker) → visível no mobile, padding encolhido. */
  .pag-periodo.pag-periodo-clickable {
    display: inline-flex !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 3px 4px;
  }
  .pag-nav-pill {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    flex-shrink: 0;
  }
  .pag-toolbar-right {
    flex: 1 1 auto !important;
    gap: 6px !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
  }
  .pag-view-toggle {
    flex: 0 1 auto !important;
    height: 28px;
    padding: 2px !important;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
  }
  .pag-view-btn {
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    flex: 0 1 auto !important;
    white-space: nowrap;
    box-sizing: border-box;
    line-height: 1;
  }
  .pag-quick-add,
  .pag-cat-config-btn {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    min-height: 28px !important;
  }
  /* Botão "Categorias" (ícone de calendário) — some em mobile pra economizar espaço na toolbar */
  #pag-cat-config {
    display: none !important;
  }

  .pag-calendar-wrap {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Dia filtrado: grid 56px gutter + 1fr, painel de tarefas oculto.
     Gutter 56px pra caber o label do ponteiro ("13:03") sem estourar. */
  .pag-dia-header {
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    grid-template-columns: 56px minmax(0, 1fr) !important;
  }
  /* Pra vista Dia, o HTML usa .pag-row direto (sem wrapper intermediário).
     Escopo ao .pag-dia-grid pra não afetar a vista Semana (que também usa .pag-row
     com 7 colunas dentro de .pag-body). */
  .pag-dia-grid .pag-row {
    grid-template-columns: 56px minmax(0, 1fr) !important;
  }
  /* Label da hora alinhado à esquerda (Apple Calendar style) */
  .pag-time-label {
    padding: 6px 4px 0 8px !important;
    font-size: 11px !important;
    background: #ffffff;
    justify-content: flex-start !important;
    align-items: stretch !important;
    text-align: left !important;
    border-right: 1px solid var(--border-soft) !important;
  }
  /* Header precisa do gutter com a mesma borda pra linha divisória ser contínua */
  .pag-dia-header .pag-time-gutter {
    border-right: 1px solid var(--border-soft);
  }
  /* Ponteiro da hora atual: label compacto e centralizado no meio do gutter.
     O JS posiciona label.left = -cellLeft + gutterWidth/2 (centro do gutter).
     Com translate(-50%, -50%), o label fica visualmente centralizado nesse ponto. */
  .pag-now-line-label {
    min-width: 0 !important;
    width: 48px !important;
    max-width: 48px !important;
    padding: 0 4px !important;
    height: 18px !important;
    font-size: 10px !important;
    letter-spacing: 0 !important;
    transform: translate(-50%, -50%) !important;
    z-index: 11 !important;
  }
  .pag-dia-wrap {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0;
  }

  /* Semana: scroll 2D como a Agenda médica.
     Header sticky top, gutter (coluna de horas) sticky left. */
  .pag-semana-wrap {
    overflow: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .pag-semana-wrap .pag-header {
    min-width: max-content;
    grid-template-columns: 56px repeat(7, minmax(100px, 1fr));
    position: sticky;
    top: 0;
    z-index: 3;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .pag-semana-wrap .pag-body {
    overflow: visible !important;
    min-width: max-content;
  }
  .pag-semana-wrap .pag-body .pag-row {
    grid-template-columns: 56px repeat(7, minmax(100px, 1fr));
    /* Altura fixa = SLOT_HEIGHT_PX (50) da Pessoal pro chip de 1h preencher a célula */
    min-height: 50px;
    height: 50px;
  }
  .pag-semana-wrap .pag-time-label,
  .pag-semana-wrap .pag-time-gutter {
    position: sticky;
    left: 0;
    z-index: 2;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .pag-semana-wrap .pag-header .pag-time-gutter {
    z-index: 4;
  }

  /* Mês: igual Agenda */
  .pag-mes-wrap {
    overflow-x: hidden;
    width: 100%;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Pessoal Mês mobile — estilo Apple Calendar (espelha .ag-mes-*) */
  .pag-mes-header,
  .pag-mes-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }
  /* Grade preenche viewport; min 88px pra caber número + 2 chips + "+N mais" */
  .pag-mes-grid {
    grid-auto-rows: minmax(88px, 1fr) !important;
    align-content: stretch !important;
    flex: 1 1 auto !important;
    overflow-y: hidden !important;
  }
  .pag-mes-cell {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 4px 2px 4px !important;
    gap: 2px !important;
    min-width: 0;
    overflow: hidden !important;
  }
  .pag-mes-cell-body {
    overflow: hidden !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    gap: 2px !important;
    width: 100%;
  }
  /* Número do dia grande, centralizado no topo (Apple style) */
  .pag-mes-cell-head {
    justify-content: center !important;
    padding: 2px 0 !important;
  }
  .pag-mes-dia-num {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    line-height: 1 !important;
  }
  .pag-mes-dia-hoje {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--accent) !important;
    color: #fff !important;
    font-weight: 700 !important;
  }
  .pag-mes-dow {
    padding: 8px 2px !important;
    font-size: 10px !important;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  /* Chips viram pílulas pastel com nome truncado + ícone de modalidade */
  .pag-mes-chip {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    width: 100% !important;
    padding: 2px 4px !important;
    border-radius: 4px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    min-height: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    overflow: hidden;
  }
  /* Fundo pastel por categoria (--pag-cat*-bg já existem em :root) */
  /* Especificidade dupla vence — sem !important */
  .pag-mes-chip.pag-ev-cat1 { background: var(--pag-cat1-bg); }
  .pag-mes-chip.pag-ev-cat2 { background: var(--pag-cat2-bg); }
  .pag-mes-chip.pag-ev-cat3 { background: var(--pag-cat3-bg); }
  .pag-mes-chip.pag-ev-cat4 { background: var(--pag-cat4-bg); }
  .pag-mes-chip.pag-ev-cat5 { background: var(--pag-cat5-bg); }
  /* Barra lateral some — a cor fica no fundo pastel do chip */
  .pag-mes-chip-bar {
    display: none !important;
  }
  .pag-mes-chip-titulo {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    font-weight: 600 !important;
  }
  .pag-ev-cat1 .pag-mes-chip-titulo { color: var(--pag-cat1); }
  .pag-ev-cat2 .pag-mes-chip-titulo { color: var(--pag-cat2); }
  .pag-ev-cat3 .pag-mes-chip-titulo { color: var(--pag-cat3); }
  .pag-ev-cat4 .pag-mes-chip-titulo { color: var(--pag-cat4); }
  .pag-ev-cat5 .pag-mes-chip-titulo { color: var(--pag-cat5); }
  /* Hora some do chip — espaço curto no mobile */
  .pag-mes-chip-hora {
    display: none !important;
  }
  /* +N mais compacto */
  .pag-mes-mais {
    font-size: 9px !important;
    color: var(--text-muted);
    text-align: center;
    padding: 2px 0 0 !important;
    white-space: nowrap;
  }

  .ag-detail-pop,
  .pag-detail-pop {
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 22px 22px 0 0 !important;
    max-height: min(88dvh, 100dvh);
    overflow: hidden;
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.18), 0 -2px 8px rgba(0,0,0,0.08) !important;
    z-index: 9600 !important;
  }
  .ag-detail-pop-backdrop {
    display: block !important;
  }
  /* Chip draft (preview de novo agendamento) — escondido em mobile
     pra não sobrepor o drawer. Em desktop mostra ao lado do popover. */
  .ag-draft-anchor {
    display: none !important;
  }
  .ag-detail-pop-arrow,
  .pag-detail-pop-arrow {
    display: none !important;
  }
  .ag-detail-pop-inner,
  .pag-detail-pop-inner {
    max-height: min(88dvh, 100dvh);
    overflow-y: auto;
    padding-top: 22px !important;
    background: #ffffff;
  }
  /* Grabber iOS no topo do sheet */
  .ag-detail-pop::after,
  .pag-detail-pop::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(0,0,0,0.2);
    pointer-events: none;
    z-index: 2;
  }
  /* Header do popover — X com espaço e input não encosta.
     Também é a zona dedicada de swipe-down (drag zone). */
  .ag-detail-pop-header,
  .pag-detail-pop-header {
    padding-right: 4px;
    padding-top: 14px;
    min-height: 56px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
  }
  .ag-detail-pop-header:active,
  .pag-detail-pop-header:active {
    cursor: grabbing;
  }
  .ag-chip-body-field-name {
    flex: 1;
    min-width: 0;
  }

  /* Datas e horários: aumenta largura dos inputs pra mostrar completo,
     centraliza o texto. Distribui espaço proporcionalmente. */
  .ag-chip-body-dt-group {
    flex: 1;
    justify-content: flex-end;
    gap: 8px !important;
  }
  .ag-chip-body-date-wrap {
    width: auto !important;
    flex: 1 1 140px !important;
    min-width: 120px;
    max-width: 170px;
  }
  .ag-chip-body-time-wrap {
    width: auto !important;
    flex: 0 0 78px !important;
  }
  .ag-chip-body-field-date,
  .ag-chip-body-field-time {
    text-align: center !important;
    padding: 0 6px !important;
  }
  .ag-chip-body-field-date::-webkit-datetime-edit,
  .ag-chip-body-field-time::-webkit-datetime-edit {
    justify-content: center !important;
    text-align: center !important;
  }

  /* Overlay mobile: mostrar apenas quando não tem hidden */
  .sidebar-overlay:not(.hidden) { display: block; }

  /* Fix: removido .sidebar-collapsed override — o JS nunca aplica essa classe no mobile (isMobile() guard em app.js:171) */
}

@media (max-width: 767px) {
  .ws-filter-row,
  #pes-filter-row,
  .fin-status-pills,
  .pac-filters {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    /* Fade na borda direita sinaliza overflow ("tem mais à direita").
       Aplicado sempre — quando não há overflow, o fade corta nada visível. */
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
            mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
  }

  .ws-filter-row::-webkit-scrollbar,
  #pes-filter-row::-webkit-scrollbar,
  .fin-status-pills::-webkit-scrollbar,
  .pac-filters::-webkit-scrollbar {
    display: none;
  }

  .pac-toolbar,
  .fin-toolbar-bottom,
  .cfg-med-head,
  .cfg-access-head {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 12px;
  }

  /* Em mobile, search vira flex linha — sem flex-basis 360 que viraria altura */
  .pac-toolbar .pac-search-wrap,
  .pac-toolbar .ws-search-wrap,
  .fin-toolbar-bottom .fin-search-wrap,
  .fin-toolbar-bottom .ws-search-wrap,
  .fin-toolbar-bottom .pac-search-wrap {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }

  /* Financeiro toolbar-bottom: search + "+" na linha 1, filtros na linha 2 */
  .fin-toolbar-bottom {
    flex-wrap: wrap;
    gap: 8px;
  }
  .fin-toolbar-bottom .fin-search-wrap,
  .fin-toolbar-bottom .ws-search-wrap {
    order: 1;
    flex: 1 1 0;
  }
  .fin-toolbar-bottom .fin-btn-new {
    order: 2;
    align-self: center;
  }
  .fin-toolbar-bottom .fin-status-pills,
  .fin-toolbar-bottom .ws-filter-row {
    order: 3;
    flex: 1 0 100%;
  }

  /* Convênios — esconde Competência e Atendimentos (viram sub-linha dentro do médico) */
  .conv-td-comp,
  .conv-td-atend {
    display: none !important;
  }
  /* Esconde headers correspondentes na primeira tabela com conv-lote-row */
  .fin-table:has(.conv-lote-row) thead th:nth-child(2),
  .fin-table:has(.conv-lote-row) thead th:nth-child(3) {
    display: none !important;
  }
  .conv-td-mobile-meta {
    display: block !important;
  }
  .fin-table:has(.conv-lote-row) {
    width: 100%;
  }
  .fin-table:has(.conv-lote-row) thead th,
  .fin-table:has(.conv-lote-row) tbody td {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Configurações — tabs com scroll horizontal (são 9 itens).
     overscroll-behavior + touch-action garantem que o scroll vertical do
     body não fica bloqueado quando o dedo passa sobre a faixa das tabs. */
  .cfg-tabs-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    overscroll-behavior: contain;
  }
  .cfg-tabs-scroll::-webkit-scrollbar { display: none; }
  .cfg-tabs {
    flex-wrap: nowrap !important;
    gap: 16px;
    width: max-content;
  }
  .cfg-tab {
    white-space: nowrap;
    flex: 0 0 auto;
  }

  /* Médicos: esconde CRM/Especialidade/Status/Mensalidade/Termos no mobile
     (viram sub-line dentro da célula nome). Seletor :has(.cfg-med-row)
     restringe à tabela de Médicos — Acesso usa mesma .cfg-med-table mas
     com colunas diferentes. */
  .cfg-med-td-crm,
  .cfg-med-td-esp,
  .cfg-med-td-status,
  .cfg-med-td-mensal,
  .cfg-med-td-termos,
  .cfg-med-table:has(.cfg-med-row) thead th:nth-child(2),
  .cfg-med-table:has(.cfg-med-row) thead th:nth-child(3),
  .cfg-med-table:has(.cfg-med-row) thead th:nth-child(4),
  .cfg-med-table:has(.cfg-med-row) thead th:nth-child(5),
  .cfg-med-table:has(.cfg-med-row) thead th:nth-child(6) {
    display: none !important;
  }
  .cfg-med-table { width: 100% !important; min-width: 0 !important; }
  .cfg-table-shell .ws-table { min-width: 0 !important; }
  .cfg-med-table thead th,
  .cfg-med-table td {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  /* Borda do thead: box-shadow em <th> não funciona em WebKit (iOS).
     Solução: aplica border-top em TODAS as células do primeiro tr do tbody.
     Como th de display:none não ocupam coluna, a borda cobre largura inteira. */
  .cfg-med-table thead th,
  .cfg-acesso-table thead th {
    border-bottom: none !important;
  }
  .cfg-med-table tbody tr:first-child td,
  .cfg-acesso-table tbody tr:first-child td {
    border-top: 1px solid rgba(112,115,147,0.10);
  }

  /* WhatsApp: variáveis dentro do card — layout compacto em mobile */
  .cfg-wa-vars {
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }

  /* Configurações do médico: grids 2 colunas empilham em 1 no mobile
     (Nome/Gênero, CRM/RQE, Nova senha/Confirmar, datas de exportar). */
  .cfg-wa-card-grid {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  /* legado — inline style antigo, manter por compatibilidade durante transição */
  .cfg-wa-card > div[style*="grid-template-columns:1fr 1fr"],
  .cfg-wa-card > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    padding: 16px !important;
  }

  /* Tabela de serviços do médico: muito apertada no mobile (4 colunas em
     390px com Nome de 6px). Esconde thead e converte cada <tr> em "card"
     com nome em cima, valor + duração + trash embaixo. */
  .cfg-servicos-table thead { display: none; }
  .cfg-servicos-table,
  .cfg-servicos-table tbody,
  .cfg-servicos-table tr,
  .cfg-servicos-table td {
    display: block !important;
    width: 100% !important;
  }
  .cfg-servicos-table tr.pref-srv-row {
    display: grid !important;
    grid-template-columns: 1fr 90px 36px;
    grid-template-areas: "nome nome nome" "valor duracao trash";
    gap: 6px 8px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(112,115,147,0.08);
  }
  .cfg-servicos-table tr.pref-srv-row > td:nth-child(1) { grid-area: nome; }
  .cfg-servicos-table tr.pref-srv-row > td:nth-child(2) { grid-area: valor; }
  .cfg-servicos-table tr.pref-srv-row > td:nth-child(3) { grid-area: duracao; }
  .cfg-servicos-table tr.pref-srv-row > td:nth-child(4) { grid-area: trash; align-self: center; justify-self: center; }
  .cfg-servicos-table tr.pref-srv-row input,
  .cfg-servicos-table tr.pref-srv-row select {
    width: 100% !important;
  }

  /* Despesas do médico: select de categoria sozinho na 1ª linha,
     search + botão "+" na 2ª linha (era tudo em 1 linha com input cortado) */
  .fin-toolbar-bottom .ws-filter-select {
    order: 0;
    flex: 1 0 100%;
  }
  .fin-toolbar-bottom .ws-filter-select select {
    width: 100%;
  }

  /* Pacientes do médico: esconde colunas Contato e Status, mostra contato
     como sub-linha abaixo do nome. */
  .med-pac-td-contato,
  .med-pac-td-status,
  table:has(.med-pac-row) thead th:nth-child(2),
  table:has(.med-pac-row) thead th:nth-child(3) {
    display: none !important;
  }
  .med-pac-sub--mobile {
    display: block !important;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
  }
  /* Busca médico: largura total no mobile */
  .med-pac-search-wrap {
    max-width: 100%;
  }

  /* Agenda do médico: toolbar compacta — toggle Dia/Semana/Mês full-width
     na 1ª linha, ações de "Conectar calendário" e "+ Bloqueio" em ícone */
  .ag-toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }
  .ag-toolbar-right {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
  }
  .ag-view-toggle {
    flex: 1 1 auto;
    display: flex;
  }
  .ag-view-toggle .ag-view-btn {
    flex: 1 1 0;
    text-align: center;
  }
  /* "Conectar ao calendário" e "+ Bloqueio" colapsam pra ícone */
  #med-ag-webcal,
  #med-ag-bloqueio,
  #ag-novo {
    width: 36px;
    height: 36px;
    padding: 0;
    flex: 0 0 36px;
    justify-content: center;
    gap: 0;
    font-size: 0;
  }
  #med-ag-webcal svg,
  #med-ag-bloqueio svg,
  #ag-novo svg {
    width: 16px;
    height: 16px;
  }
  #med-ag-webcal span,
  #med-ag-bloqueio span {
    display: none;
  }

  /* Agenda mobile: seletor de médico quando "Todos" está na topbar */
  .ag-mobile-pick {
    padding: 16px 12px;
  }
  .ag-mobile-pick-hint {
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 16px;
  }
  .ag-mobile-pick-list {
    background: #FFFFFF;
    border: 1px solid rgba(112,115,147,0.12);
    border-radius: 12px;
    overflow: hidden;
  }
  .ag-mobile-pick-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: none;
    background: transparent;
    border-bottom: 1px solid rgba(112,115,147,0.08);
    cursor: pointer;
    text-align: left;
  }
  .ag-mobile-pick-item:last-child {
    border-bottom: none;
  }
  .ag-mobile-pick-item:active {
    background: rgba(112,115,147,0.04);
  }
  .ag-mobile-pick-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    background: rgba(82,102,235,0.10);
    color: rgba(82,102,235,0.85);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: var(--weight-semibold);
  }
  .ag-mobile-pick-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .ag-mobile-pick-nome {
    font-size: 14px;
    color: var(--text-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ag-mobile-pick-sub {
    font-size: 12px;
    color: var(--text-muted);
  }
  .ag-mobile-pick-chevron {
    color: var(--text-xmuted, rgba(112,115,147,0.4));
    font-size: 22px;
    line-height: 1;
    flex: 0 0 auto;
  }

  /* Home da Bruna: mobile vira 1 coluna mantendo os dois mundos.
     Consultório (label → Pendências → Financeiro) e Pessoal (label → Agenda → Tarefas).
     :not(.medico-home-grid) pra não vazar pra Home do médico (grid próprio). */
  .home-grid:not(.medico-home-grid) {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, auto);
  }
  .home-grid:not(.medico-home-grid) .home-section-label--consultorio { grid-column: 1; grid-row: 1; }
  .home-grid:not(.medico-home-grid) .home-card--pend                 { grid-column: 1; grid-row: 2; }
  .home-grid:not(.medico-home-grid) .home-card--hs                   { grid-column: 1; grid-row: 3; margin-top: 0; }
  .home-grid:not(.medico-home-grid) .home-section-label--pessoal     { grid-column: 1; grid-row: 4; padding-top: 8px; }
  /* sidebar Pessoal vira full-width abaixo do Consultório */
  .home-grid:not(.medico-home-grid) .home-side { grid-column: 1; grid-row: 5; }
  .home-grid:not(.medico-home-grid)::before { display: none; }
  .home-grid:not(.medico-home-grid) .home-card { height: auto; }

  /* Minha conta: card "perfil + alterar senha" empilha em coluna única */
  .cfg-conta-two-col {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .cfg-conta-col-divider {
    display: none !important;
  }
  .cfg-conta-col-left,
  .cfg-conta-col-right {
    width: 100% !important;
  }

  /* Histórico (log): esconde Usuário e Tabela como colunas, mostra como
     sub-line abaixo da data/hora. Esconde também a th "Data/hora" porque
     o info já é evidente. */
  .cfg-log-td-usuario,
  .cfg-log-td-tabela,
  table:has(.cfg-log-row) thead th:nth-child(3),
  table:has(.cfg-log-row) thead th:nth-child(4),
  table:has(.cfg-log-row) thead {
    display: none !important;
  }
  .cfg-log-sub--mobile {
    display: block !important;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
  }
  /* Lista densa: ícone à esquerda + data/sub no centro, chevron > à direita */
  table:has(.cfg-log-row) tbody td {
    padding: 12px 8px !important;
    vertical-align: middle !important;
  }
  .cfg-log-row td:first-child {
    width: 36px;
  }
  .cfg-log-row td:first-child + td {
    position: relative;
  }
  .cfg-log-row td:first-child + td::after {
    content: '›';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--text-xmuted, rgba(112,115,147,0.4));
    line-height: 1;
  }

  /* Dados (Exportar dados): botão encolhe pra não ultrapassar viewport. */
  .cfg-export-row {
    gap: 8px;
  }
  .cfg-export-btn {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Relatório avulso: form com 3 campos (Data inicial, Data final, Médico)
     vira coluna única ou 2 datas em linha + médico full-width abaixo. */
  .cfg-rel-form {
    /* minmax(0,1fr), não 1fr: `1fr` é `minmax(auto, 1fr)` e o `auto` respeita o
       min-content do input[type=date] (~162px no Chrome), então em telas de
       360px as colunas não encolhiam e a Data final saía cortada PELA BORDA da
       viewport — sem barra de rolagem, isto é, inalcançável. Atingia também a
       tela da secretária (3 campos), não só o card de 2 do médico. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 12px !important;
  }
  .cfg-rel-form .field,
  .cfg-rel-form input,
  .cfg-rel-form select {
    min-width: 0;
  }
  .cfg-rel-form .field:last-child {
    grid-column: 1 / -1;
  }
  /* No card de 2 campos o :last-child é a Data final, não o seletor de médico:
     esticá-la jogaria a data final sozinha numa linha inteira embaixo. */
  .cfg-rel-form--2col .field:last-child {
    grid-column: auto;
  }

  /* Relatórios: esconde E-mail, Último envio e ação em mobile — viram sub-linha */
  .cfg-rel-td-email,
  .cfg-rel-td-ultimo,
  .cfg-rel-td-action {
    display: none !important;
  }
  .cfg-rel-table thead th.cfg-rel-td-email,
  .cfg-rel-table thead th.cfg-rel-td-ultimo,
  .cfg-rel-table thead th.cfg-rel-td-action {
    display: none !important;
  }
  .cfg-rel-table { width: 100% !important; min-width: 0 !important; }
  .cfg-rel-table-scroll, .cfg-rel-table-scroll .ws-table-shell {
    overflow-x: visible !important;
  }
  .cfg-rel-sub--mobile {
    display: block !important;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
  }

  /* Convênios: botão "Novo convênio" colapsa pra ícone +, card empilha info */
  #cfg-conv-novo {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    flex: 0 0 36px !important;
    align-self: center;
    gap: 0;
    font-size: 0;
    justify-content: center;
  }
  #cfg-conv-novo span { display: none; }
  /* Header de convênios: título + descrição cabe à esquerda, botão à direita */
  .cfg-section-header:has(#cfg-conv-novo) {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  /* Card de convênio: nome+CNPJ acima, KPIs+badge na mesma linha abaixo */
  .cfg-conv-card {
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
    padding: 14px 16px !important;
  }
  .cfg-conv-card-nome,
  .cfg-conv-card-sub {
    grid-column: 1 / -1;
  }
  .cfg-conv-card > div:first-child {
    grid-column: 1 / -1;
  }
  .cfg-conv-card-stats {
    grid-column: 1 / 2;
    justify-content: flex-start !important;
    gap: 16px !important;
  }
  .cfg-conv-card > .status-badge-sm {
    grid-column: 2 / 3;
    justify-self: end;
  }
  .cfg-med-sub--mobile {
    display: block !important;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
  }

  /* Acesso: tabela tem 5 colunas — Médico, E-mail, Status, Acesso, Ações.
     Esconde E-mail, Status e Acesso (viram sub-line). O <td> de status precisa da
     classe própria: esconder só o <th> deixava a célula órfã e desalinhava a linha. */
  .cfg-acesso-td-email,
  .cfg-acesso-td-status,
  .cfg-acesso-td-login,
  .cfg-acesso-table thead th:nth-child(2),
  .cfg-acesso-table thead th:nth-child(3),
  .cfg-acesso-table thead th:nth-child(4) {
    display: none !important;
  }
  .cfg-acesso-sub--mobile {
    display: block !important;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
  }
  /* No mobile: esconde botões inline e mostra kebab */
  .cfg-acesso-actions { display: none !important; }
  .cfg-acesso-kebab { display: block !important; }

  /* Botão "Convidar médico" colapsa pra ícone "+" */
  #cfg-convidar {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    justify-content: center;
    flex: 0 0 36px !important;
    font-size: 0;
    align-self: center;
    gap: 0;
  }
  #cfg-convidar svg {
    width: 16px;
    height: 16px;
  }
  #cfg-convidar span {
    display: none;
  }

  /* Pessoal Tarefas — sidebar empilha em cima do main, sem coluna desktop */
  .ptk-wrap {
    flex-direction: column;
    overflow: visible;
    padding-top: 8px;
  }
  .ptk-sidebar {
    width: 100% !important;
    border-right: none;
    border-bottom: 1px solid rgba(113,123,155,0.14);
    padding: 8px 4px 16px;
    overflow-y: visible;
    gap: 12px;
    align-self: stretch;
  }
  /* Pílulas Inbox/Hoje/Sinalizadas/Concluídas em grid 2x2 compacto */
  .ptk-smart-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .ptk-main {
    padding: 8px 4px 16px;
  }

  /* Filtro: pílulas com texto longo "Vencem em breve" sem quebrar */
  #pes-filter-row .filter-pill,
  .pes-filter-row .filter-pill {
    white-space: nowrap;
  }

  .pac-toolbar-right,
  .ws-toolbar-actions {
    width: auto;
    flex: 0 0 auto;
  }

  /* Botão "Novo paciente" colapsa o label, fica só com ícone "+" */
  #btn-novo-pac,
  .fin-btn-new,
  .fin-btn-export,
  #cfg-novo-medico {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    justify-content: center;
    flex: 0 0 36px !important;
    align-self: center;
    gap: 0;
    font-size: 0;
  }

  /* Espaço entre os filtros (pílulas Todos/Ativo/...) e a lista */
  .pac-filters {
    margin-bottom: 12px;
  }
  #btn-novo-pac-label,
  .fin-btn-new span,
  .fin-btn-export .fin-btn-export-label,
  #cfg-novo-medico span:not(.notif-badge) {
    display: none;
  }

  /* Ficha do paciente: header empilha em coluna, próxima consulta abaixo */
  .ficha-header-surface {
    padding: 14px 14px;
  }
  .ficha-header-main {
    flex-direction: column;
    gap: 12px;
  }
  .fp-proxima-wrap {
    margin-left: 0;
    width: 100%;
  }
  .fp-nome {
    font-size: 17px;
    line-height: 1.2;
  }
  .ficha-meta {
    font-size: 12px;
  }
  /* Botões "Novo agendamento" / "Nova cobrança" / "Nova entrada" / "Nova mensalidade"
     viram só ícone "+" no mobile */
  #ficha-novo-ag,
  #ficha-nova-cob,
  #ficha-nova-entrada,
  #pes-new-mensalidade,
  #med-mens-nova {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
    flex: 0 0 36px;
    gap: 0;
    font-size: 0;
  }
  #ficha-novo-ag svg,
  #ficha-nova-cob svg,
  #ficha-nova-entrada svg,
  #pes-new-mensalidade svg,
  #med-mens-nova svg {
    width: 16px;
    height: 16px;
  }

  /* Header da página do médico: actions (✎) alinhado no canto superior direito,
     não solto embaixo do card */
  .pes-detail-wrap .ficha-header-actions,
  #pes-shell .ficha-header-actions,
  .ficha-header-surface:has(#med-ficha-cfg) .ficha-header-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    margin: 0;
  }
  .pes-detail-wrap .ficha-header-surface,
  .ficha-header-surface:has(#pes-cfg-open),
  .ficha-header-surface:has(#med-ficha-cfg) {
    position: relative;
  }
  /* Tabela da ficha: esconde colunas secundárias no mobile.
     Em Consultas: thead 1=check?,2=Data,3=Serviço,4=Modal,5=Status,6=ações → esconde Modal+Status.
     Em Cobranças: 1=Data,2=Serviço,3=Valor,4=Status,5=NF,6=ações → esconde Valor+Status+NF
     (Valor e NF aparecem como sub-linha dentro de Serviço via ficha-td-sub--mobile).
     Em Mensalidades Pessoal: 1=Comp,2=Valor,3=Venc,4=Pag,5=Status,6=ações → esconde Venc+Pag+Status
     (viram sub-linha dentro de Competência via pes-history-sub--mobile). */
  .ficha-td-modal,
  .ficha-td-status,
  .ficha-td-valor,
  .ficha-td-nf,
  .pes-history-td-venc,
  .pes-history-td-pag,
  .pes-history-td-status,
  .ficha-table thead th:nth-child(3),
  .ficha-table thead th:nth-child(4),
  .ficha-table thead th:nth-child(5) {
    display: none !important;
  }
  .pes-history-sub--mobile {
    display: block !important;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
  }
  /* Sem table-layout: fixed — auto deixa Data ocupar o necessário pra não vazar */
  .ficha-table { width: 100%; }
  .ficha-table thead th,
  .ficha-table tbody td {
    padding-left: 8px;
    padding-right: 8px;
    line-height: 1.4;
  }
  .ficha-td-data { white-space: nowrap; }
  /* Sub-linha de Valor+NF dentro de Serviço (só mobile) — !important pra vencer
     a regra .ficha-td-sub--mobile { display: none } definida fora do media. */
  .ficha-td-sub--mobile { display: block !important; }

  /* Pacientes: a MESMA <table> do desktop vira lista densa estilo "contatos".
     Sem branch JS — só CSS reposiciona células. Linha inteira (tr) clica/abre. */
  .pac-table thead {
    display: none;
  }
  .pac-table,
  .pac-table tbody {
    display: block;
    width: 100%;
  }
  /* tr vira flex (não block) — seletor com tag pra vencer .pac-table tr genérico */
  .pac-table tr.pac-table-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    min-height: 60px;
    border-bottom: 1px solid var(--border-hairline);
    cursor: pointer;
  }
  .pac-table-row:last-child { border-bottom: none; }
  .pac-table-row:active { background: var(--home-hover, var(--accent-tint-1)); }

  /* Coluna Paciente ocupa o espaço; demais células reposicionadas ou ocultas */
  .pac-table-row .pac-cell-nome {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: none;
  }
  /* Médico (coluna própria), Próx. consulta e ações somem — médico vira sub-linha,
     ações vão pro toque na linha (abre drawer). */
  .pac-table-row .pac-cell-medico,
  .pac-table-row .pac-cell-proxima,
  .pac-table-row .pac-cell-actions,
  .pac-table-row .pac-cell-contato {
    display: none;
  }
  /* Status fica à direita da linha */
  .pac-table-row .pac-cell-status {
    display: flex;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0;
    border: none;
    align-items: center;
  }
  /* Sub-linha do médico: visível no mobile (vence o display:none base) */
  .pac-cell-sub--mobile {
    display: block;
    font-size: var(--size-12);
    line-height: 1.25;
    color: var(--text-meta);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .pac-cell-nome-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
  }
  /* CPF inline some por padrão no mobile; reaparece quando a busca é por CPF */
  .pac-table:not(.is-searching-cpf) .pac-cpf-inline {
    display: none;
  }

  /* Financeiro (Cobranças + Despesas): mesma <table> vira lista densa.
     Cobranças mobile: Paciente (data/serviço sub) + Valor + Status à direita.
     Despesas mobile: Descrição (categoria/data sub) + Valor à direita. */
  .fin-table-cobrancas thead,
  .fin-table-despesas thead {
    display: none;
  }
  .fin-table-cobrancas,
  .fin-table-cobrancas tbody,
  .fin-table-despesas,
  .fin-table-despesas tbody {
    display: block;
    width: 100%;
  }
  .fin-table-cobrancas tr.fin-tr-click,
  .fin-table-despesas tr.fin-tr-click {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    min-height: 56px;
    border-bottom: 1px solid var(--border-hairline);
    cursor: pointer;
  }
  .fin-table-cobrancas tr.fin-tr-click:last-child,
  .fin-table-despesas tr.fin-tr-click:last-child { border-bottom: none; }
  .fin-table-cobrancas tr.fin-tr-click:active,
  .fin-table-despesas tr.fin-tr-click:active { background: var(--home-hover, var(--accent-tint-1)); }

  /* Nome/descrição ocupa o espaço, com sub-linha */
  .fin-table-cobrancas .fin-td-nome,
  .fin-table-despesas .fin-td-nome {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    padding: 0;
    border: none;
    white-space: normal;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  /* Sub-linha visível no mobile (especificidade dupla pra vencer a base display:none) */
  .fin-table-cobrancas .fin-td-sub--mobile,
  .fin-table-despesas .fin-td-sub--mobile {
    display: block;
    font-size: var(--size-12);
    line-height: 1.25;
    color: var(--text-meta);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  /* Oculta colunas secundárias: data, serviço, categoria, NF, ações */
  .fin-table-cobrancas .fin-td-date,
  .fin-table-cobrancas .fin-td-serv,
  .fin-table-cobrancas .fin-td-nf,
  .fin-table-cobrancas .fin-td-action,
  .fin-table-despesas .fin-td-cat,
  .fin-table-despesas .fin-td-date,
  .fin-table-despesas .fin-td-action {
    display: none;
  }
  /* Valor e Status à direita, lado a lado */
  .fin-table-cobrancas .fin-td-valor,
  .fin-table-despesas .fin-td-valor {
    flex: 0 0 auto;
    padding: 0;
    border: none;
    text-align: right;
  }
  .fin-table-cobrancas .fin-td-status {
    flex: 0 0 auto;
    padding: 0;
    border: none;
    margin-left: 4px;
  }

  /* Pessoal (clientes/médicos): mesma <table> vira lista densa.
     Mobile: Médico (mensalidade·venc sub) + Status à direita + ações. */
  .pes-table thead {
    display: none;
  }
  .pes-table,
  .pes-table tbody {
    display: block;
    width: 100%;
  }
  .pes-table tr.pes-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    min-height: 56px;
    border-bottom: 1px solid var(--border-hairline);
    cursor: pointer;
  }
  .pes-table tr.pes-row:last-child { border-bottom: none; }
  .pes-table tr.pes-row:active { background: var(--home-hover, var(--accent-tint-1)); }
  .pes-table .pes-medico-cell {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: none;
  }
  /* Sub-linha (mensalidade · venc) visível no mobile */
  .pes-table .pes-cell-sub--mobile {
    display: block;
    font-size: var(--size-12);
    line-height: 1.25;
    color: var(--text-meta);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  /* Oculta colunas próprias de mensalidade/venc (viraram sub-linha) */
  .pes-table .pes-td-valor,
  .pes-table .pes-td-venc {
    display: none;
  }
  /* Status + ações à direita */
  .pes-table .pes-td-status {
    flex: 0 0 auto;
    padding: 0;
    border: none;
    margin-left: auto;
  }
  .pes-table .pes-td-actions {
    flex: 0 0 auto;
    padding: 0 0 0 4px;
    border: none;
    width: auto;
  }

  .ws-drawer,
  .pac-detail-card,
  .fin-drawer,
  .cfg-med-drawer {
    inset: auto 0 0 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: min(92dvh, 100dvh) !important;
    border-radius: 22px 22px 0 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
  }

  .pac-detail-body,
  .fin-drawer-shell,
  .ws-drawer-shell,
  .pac-detail-shell {
    max-height: min(92dvh, 100dvh);
  }

  .pac-detail-grid,
  .form-grid-2,
  .ficha-grid-2,
  .cfg-nf-layout,
  .pes-config-grid,
  .pes-competencia-grid {
    grid-template-columns: 1fr !important;
  }

  .pac-detail-footer,
  .modal-footer,
  .fin-drawer-actions,
  .fin-drawer-actions-icons,
  .pac-detail-header-actions {
    flex-wrap: wrap;
  }

  .cfg-med-drawer,
  .cfg-med-drawer.cfg-med-drawer-open {
    transform: translateY(0);
  }
}

/* ============================================================
   Agenda
   ============================================================ */

/* Layout wrapper */
.ag-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: 12px;
}

/* Toolbar */
.ag-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: 0;
}

.ag-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.ag-nav-pill {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(214, 220, 229, 0.92);
  background: rgba(255, 255, 255, 0.82);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 140ms, color 140ms, border-color 140ms;
  flex-shrink: 0;
}
.ag-nav-pill:hover {
  background: rgba(246, 248, 252, 0.88);
  border-color: rgba(204, 211, 222, 0.96);
  color: var(--text);
}


.ag-hoje-btn {
  height: 28px;
  padding: 0 12px;
  border: 1px solid rgba(214, 220, 229, 0.92);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 140ms, opacity 150ms, background 140ms, border-color 140ms;
}
.ag-hoje-btn:hover {
  color: var(--text);
  background: rgba(246, 248, 252, 0.88);
  border-color: rgba(204, 211, 222, 0.96);
}
/* Apagado quando já estamos no período atual (offset === 0). */
.ag-hoje-btn:disabled,
.ag-hoje-btn-disabled {
  color: var(--text-xmuted);
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
  box-shadow: none;
}

.ag-periodo {
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--text);
  letter-spacing: -0.015em;
  white-space: nowrap;
  line-height: 1.2;
  margin: 0 2px;
}
@media (max-width: 767px) {
  .ag-periodo { font-size: 13px; }
}

/* Label clicável → abre o mini-calendário. Caret ▾ via ::after (triângulo CSS). */
.ag-periodo-clickable {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  border-radius: 8px;
  padding: 3px 8px;
  transition: background 120ms ease;
}
.ag-periodo-clickable::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 6px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-muted);
}
.ag-periodo-clickable:hover {
  background: var(--accent-tint-1);
}
.ag-periodo-clickable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ─── Mini-calendário popover (navegação rápida de data) ─── */
.ag-minical {
  position: fixed;
  z-index: 10001;
  width: 248px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 12px;
  animation: fadeInDown 160ms ease-out both;
}
.ag-minical-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.ag-minical-title {
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--text);
}
.ag-minical-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 17px;
  cursor: pointer;
  transition: background 120ms ease;
}
.ag-minical-nav:hover {
  background: var(--accent-tint-1);
}
.ag-minical-dow,
.ag-minical-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.ag-minical-dow {
  margin-bottom: 4px;
}
.ag-minical-dow span {
  text-align: center;
  font-size: 10px;
  font-weight: var(--weight-medium);
  color: var(--text-xmuted);
  text-transform: uppercase;
}
.ag-minical-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.ag-minical-day:hover {
  background: var(--accent-tint-1);
}
.ag-minical-day.is-today {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: var(--weight-semibold);
}
.ag-minical-day.is-selected {
  background: var(--accent);
  color: #fff;
  font-weight: var(--weight-semibold);
}
.ag-minical-day.is-today.is-selected {
  color: #fff;
  border-color: color-mix(in srgb, #fff 60%, var(--accent));
}
.ag-minical-empty {
  aspect-ratio: 1;
}
/* Modo inline (Home do médico): fixo no container, sem casca de popover. */
.ag-minical--inline {
  position: static;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 4px;
  animation: none;
  z-index: auto;
}
/* Sidebar é mais larga que o popover → limitar o diâmetro do dia pra o
   círculo do selecionado/hoje não ficar gordo. Centraliza na célula. */
.ag-minical--inline .ag-minical-grid { row-gap: 4px; }
.ag-minical--inline .ag-minical-day {
  aspect-ratio: auto;
  width: 30px;
  height: 30px;
  margin: 0 auto;
}
/* Dot de ocupação (estilo Fantastical): cor = pior status do dia. */
.ag-minical-day { position: relative; }
.ag-minical-dot {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
}
.ag-minical-dot--ok      { background: var(--s-confirmada); }
.ag-minical-dot--atencao { background: var(--s-agendada); }
/* No dia selecionado (fundo accent) o dot vira branco pra manter contraste. */
.ag-minical-day.is-selected .ag-minical-dot { background: #fff; }
/* Bottom-sheet em telas estreitas */
.ag-minical--sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: auto;
  border-radius: 18px 18px 0 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0));
}
.ag-minical--sheet .ag-minical-day {
  font-size: 14px;
}

.ag-periodo-hidden {
  display: none;
}

.ag-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Segmented control Dia/Semana/Mês — mesmo padrão visual do toggle
   Urgentes/Não Urgentes da view Pendências (pend-toggles), pra
   linguagem visual consistente entre as views. */
.ag-view-toggle {
  display: flex;
  background: rgba(27, 43, 75, 0.05);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
}
.ag-view-btn {
  padding: 5px 14px;
  border-radius: 6px;
  border: none;
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  font-family: var(--font);
  transition: background 140ms, color 140ms, box-shadow 140ms;
  white-space: nowrap;
}
.ag-view-btn:hover { color: var(--text); }
.ag-view-btn-active {
  background: #FFFFFF;
  color: var(--text-ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Botão Novo da toolbar — outline cinza neutro (sem accent), pra não
   competir com chips coloridos da grade. Hover escurece sutilmente.
   Em mobile esconde o label e fica só com o ícone. */
.ag-quick-add {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 12px 0 10px;
  border-radius: 9px;
  border: 1px solid rgba(214, 220, 229, 0.92);
  background: rgba(255, 255, 255, 0.82);
  color: var(--text);
  font-family: var(--font);
  cursor: pointer;
  transition: background 140ms, color 140ms, border-color 140ms;
}
.ag-quick-add:hover {
  background: rgba(246, 248, 252, 0.88);
  border-color: rgba(204, 211, 222, 0.96);
  color: var(--text-ink);
}
.ag-quick-add svg { color: var(--text-muted); }
.ag-quick-add:hover svg { color: var(--text); }
.ag-quick-add-label {
  font-size: 13px;
  font-weight: var(--weight-medium);
  line-height: 1;
}
@media (max-width: 767px) {
  .ag-quick-add-label { display: none; }
  .ag-quick-add { padding: 0; width: 28px; justify-content: center; gap: 0; }
}

/* Calendário */
.ag-calendar-wrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  width: calc(100% + 112px);
  margin-left: -56px;
  margin-right: -56px;
}

.ag-calendar {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative; /* âncora do .cal-empty-overlay */
}

/* Cabeçalho dos dias */
.ag-header {
  display: grid;
  grid-template-columns: 72px repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--border-soft);
  background: transparent;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 2;
}

.ag-time-gutter {
  border-right: 1px solid var(--border-soft);
  background: transparent;
}

.ag-col-header {
  padding: 8px 8px 9px;
  text-align: center;
  border-right: 1px solid var(--border-soft);
}
/* Cabeçalho do dia na Semana é clicável (drilldown → vista Dia) */
.ag-col-header[data-day-jump] { cursor: pointer; }
.ag-col-header[data-day-jump]:hover { background: var(--hover-subtle); }
.ag-col-header:last-child { border-right: none; }

/* Coluna "hoje" na vista semana — tint accent muito sutil pra identificar
   de relance. Era cinza-branco (#F6F8FC 78%), quase imperceptível em telas
   claras. Agora rgba do accent com 4% — sente sem dominar. */
.ag-col-hoje {
  background: rgba(82, 102, 235, 0.04);
}

.ag-col-header-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ag-dow {
  display: inline;
  font-size: 12px;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0.01em;
  line-height: 1;
  margin: 0;
}

.ag-day-num {
  display: inline;
  min-width: 0;
  height: auto;
  padding: 0;
  border-radius: 0;
  font-size: 13px;
  font-weight: 560;
  color: var(--text);
}

.ag-day-hoje {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 620;
  font-size: 12px;
}

/* Body scrollável */
.ag-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  background: transparent;
}

/* Indicador de hora atual */
/* Indicador de hora atual — linha + dot + label.
   Mais discreto que a versão anterior: linha 1.5px, label compacto.
   Cor accent mantém pra ser óbvio onde a Bruna está no dia. */
.ag-now-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--accent);
  opacity: 0.45;
  pointer-events: none;
  z-index: 20;
  transition: top 1s linear;
}
.ag-now-line::before {
  content: '';
  position: absolute;
  left: -3px;
  top: -2.25px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.85;
  z-index: 21;
}
.ag-now-line-label {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: -0.01em;
  opacity: 0.92;
  z-index: 22;
}

/* Linhas de horário */
.ag-row {
  display: grid;
  grid-template-columns: 72px repeat(7, minmax(0, 1fr));
  min-height: 50px;
  border-bottom: 1px solid var(--border-soft);
  position: relative;
}

.ag-time-label {
  font-size: 12px;
  color: rgba(107, 114, 128, 0.92);
  padding: 10px 12px 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  border-right: 1px solid var(--border-soft);
  user-select: none;
  letter-spacing: -0.01em;
  background: transparent;
}

.ag-time-label.ag-half {
  border-right: 1px solid var(--border-soft);
}

/* Células do grid */
.ag-cell {
  border-right: 1px solid var(--border-soft);
  min-height: 50px;
  padding: 4px 5px;
  position: relative;
  overflow: visible;
  cursor: pointer;
  transition: background 100ms;
}
.ag-cell:last-child { border-right: none; }
.ag-cell:hover { background: transparent; }

/* Semana: a célula coberta só desabilita criação (cursor); o visual é o bloco
   flutuante .ag-bloqueio-chip por cima (igual Dia/RAE). Sem fundo próprio pra
   não pintar cada slot — o bloco único é que mostra o cinza. */
.ag-cell-bloqueio {
  cursor: not-allowed;
}
/* Não há mais hover na célula (o alvo de clique é o chip flutuante). */

.ag-bloqueio-label {
  font-size: 10px;
  color: var(--text-xmuted);
  padding: 2px 4px;
  user-select: none;
}

/* Eventos */
.ag-event {
  border-radius: var(--radius-sm);
  padding: 3px 6px;
  font-size: var(--size-xs);
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  cursor: pointer;
  position: absolute;
  left: 2px;
  right: 2px;
  transition: filter 100ms;
  min-height: 0;
  z-index: 2;
  box-sizing: border-box;
}
.ag-event:hover { filter: brightness(0.95); }

/* Alças de resize para chips verticais da agenda médica (grade e Semana).
   O renderer não as emite na tabela Dia nem no Mês. */
.ag-chip-resize-handle {
  position: absolute;
  left: 0;
  right: 0;
  height: 8px;
  cursor: ns-resize;
  z-index: 3;
  touch-action: none;
}
.ag-chip-resize-handle::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 100ms;
}
.ag-chip-resize-top { top: 0; }
.ag-chip-resize-bottom { bottom: 0; }
.ag-chip-resize-top::after { top: 2px; }
.ag-chip-resize-bottom::after { bottom: 2px; }
.ag-event:hover .ag-chip-resize-handle::after,
.ag-event:focus-visible .ag-chip-resize-handle::after,
.ag-grade-chip:hover .ag-chip-resize-handle::after,
.ag-grade-chip:focus-visible .ag-chip-resize-handle::after,
.is-resizing .ag-chip-resize-handle::after { opacity: 0.32; }
.ag-event.is-resizing,
.ag-grade-chip.is-resizing { filter: brightness(0.93); }
@media (pointer: coarse) {
  .ag-chip-resize-handle { display: none; }
}

/* Guia de horário compartilhada por drag e resize. A posição vem do mesmo
   minuto snapped persistido pelo handler. */
.ag-grade-grid { position: relative; }
.ag-gesture-guide-line {
  position: absolute;
  display: none;
  height: 0;
  border-top: 1px dashed var(--accent);
  pointer-events: none;
  z-index: var(--z-dropdown);
}
.ag-gesture-guide-pill {
  position: absolute;
  left: 8px;
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
  transform: translateY(-50%);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
  pointer-events: none;
  z-index: var(--z-dropdown);
}

/* Colisão de horário idêntico — chips lado a lado (left/width inline por col).
   Sombra fina separa as colunas adjacentes; o inline vence right:2px. */
.ag-chip-split { box-shadow: -1px 0 0 rgba(255,255,255,0.6); }

.ag-ev-agendada   { background: var(--s-agendada-bg);   border-left: 3px solid var(--s-agendada);   }
.ag-ev-confirmada { background: var(--s-confirmada-bg); border-left: 3px solid var(--s-confirmada); }
.ag-ev-atendida   { background: var(--s-atendida-bg);   border-left: 3px solid var(--s-atendida);   }
.ag-ev-falta      { background: var(--s-falta-bg);      border-left: 3px solid var(--s-falta);      }
.ag-ev-cancelada  { background: var(--s-cancelada-bg);  border-left: 3px solid var(--s-cancelada);  }
.ag-ev-pendente   { background: var(--s-pendente-bg);   border-left: 3px solid var(--s-pendente);   }
.ag-ev-paga       { background: var(--s-paga-bg);       border-left: 3px solid var(--s-paga);       }

/* Drop hover — especificidade dupla pra vencer .ag-cell:hover sem !important */
.ag-cell.ag-drop-hover,
.ag-mes-cell.ag-drop-hover {
  background: rgba(27,43,75,0.07);
}

/* Modo de seleção ativo — cursor crosshair nos slots vazios */
.ag-selecting .ag-cell,
.ag-selecting .ag-mes-cell { cursor: crosshair; }

/* Estado selecionado — fundo sólido, texto branco, estilo Apple Calendar.
   Especificidade (2 classes) já vence .ag-ev-X (1 classe) — sem !important.
   .ag-grade-chip.ag-chip-selected.ag-ev-X (3 classes) cobre o caso da grade
   multi-médico onde .ag-grade-chip tem suas próprias regras de background. */
.ag-chip-selected.ag-ev-agendada,   .ag-grade-chip.ag-chip-selected.ag-ev-agendada   { background: var(--s-agendada-sel);   color: #fff; border-left-color: transparent; filter: none; outline: none; }
.ag-chip-selected.ag-ev-confirmada, .ag-grade-chip.ag-chip-selected.ag-ev-confirmada { background: var(--s-confirmada-sel); color: #fff; border-left-color: transparent; filter: none; outline: none; }
.ag-chip-selected.ag-ev-atendida,   .ag-grade-chip.ag-chip-selected.ag-ev-atendida   { background: var(--s-atendida-sel);   color: #fff; border-left-color: transparent; filter: none; outline: none; }
.ag-chip-selected.ag-ev-falta,      .ag-grade-chip.ag-chip-selected.ag-ev-falta      { background: var(--s-falta-sel);      color: #fff; border-left-color: transparent; filter: none; outline: none; }
.ag-chip-selected.ag-ev-cancelada,  .ag-grade-chip.ag-chip-selected.ag-ev-cancelada  { background: var(--s-cancelada-sel);  color: #fff; border-left-color: transparent; filter: none; outline: none; }
.ag-chip-selected .ag-ev-nome,
.ag-chip-selected .ag-ev-serv,
.ag-chip-selected .ag-mes-chip-nome,
.ag-chip-selected .ag-mes-chip-hora,
.ag-chip-selected .ag-grade-chip-nome,
.ag-chip-selected .ag-grade-chip-serv { color: #fff; }

.ag-ev-nome {
  font-weight: var(--weight-semibold);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
}

.ag-ev-mode-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 0.7;
}

/* Recorrência + modalidade agrupadas à direita do nome (week/day) */
.ag-ev-icons {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.ag-ev-icons .ag-chip-recorrente {
  margin-left: 0;
  opacity: 0.7;
}
/* Casa com a modalidade (iconVideo/iconPerson a 9px) */
.ag-ev-icons .ag-chip-recorrente svg {
  width: 9px;
  height: 9px;
}

/* Ícone de repetição no chip de BLOQUEIO. Escopo próprio: o chip de bloqueio não
   tem .ag-ev-icons, então a regra acima não o alcança — sem isto o SVG sairia no
   tamanho natural e estouraria a faixa. flex:none impede que o ellipsis do rótulo
   (motivo longo) esmague o ícone. */
.ag-bloqueio-chip-recorrente {
  flex: none;
  display: inline-flex;
  align-items: center;
  opacity: 0.7;
}
.ag-bloqueio-chip-recorrente svg {
  width: 9px;
  height: 9px;
}

.ag-ev-serv {
  color: var(--text-muted);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ag-ev-horario {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* -------- Formulário de agendamento -------- */
.ag-form { display: flex; flex-direction: column; gap: var(--space-4); }

/* Autocomplete de paciente */
.ag-pac-search-wrap {
  position: relative;
}
.ag-pac-input-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  position: relative;
}
.ag-pac-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-xmuted);
  pointer-events: none;
  flex-shrink: 0;
}
.ag-pac-input-row input {
  flex: 1;
  padding-left: 30px;
}
.ag-pac-add-btn {
  flex-shrink: 0;
}

.ag-pac-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--glass-modal);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 50;
  max-height: 220px;
  overflow-y: auto;
  display: none;
}
.ag-pac-dropdown.ag-pop-open { display: block; }

.ag-pac-item {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: var(--space-2) var(--space-3);
  color: var(--text);
  cursor: pointer;
  transition: background 100ms;
}
.ag-pac-item-name { font-size: var(--size-sm); }
.ag-pac-item-meta {
  margin-top: 2px;
  font-size: var(--size-xs);
  color: var(--text-muted);
}
.ag-pac-item:hover,
.ag-pac-item.is-active { background: var(--accent-light); }
.ag-pac-empty { color: var(--text-muted); cursor: default; }
.ag-pac-empty:hover { background: transparent; }

/* -------- Pill de modalidade -------- */
.ag-modal-pill {
  border-color: transparent;
  gap: 4px;
}

/* Botão wrapper transparente — o pill dentro já tem visual próprio */
.ficha-modalidade-btn {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
}
.ag-modal-pill-presencial {
  background: rgba(27,43,75,0.08);
  border-color: rgba(27,43,75,0.14);
  color: var(--accent);
}
.ag-modal-pill-teleconsulta {
  background: rgba(26,58,42,0.08);
  border-color: rgba(26,58,42,0.14);
  color: var(--teal);
}

/* Backdrop do bottom sheet em mobile (escondido em desktop) */
.ag-detail-pop-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 9550;
  animation: ag-backdrop-in 180ms ease-out;
}
@keyframes ag-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* -------- Popover balão de detalhes (estilo Apple Calendar) -------- */
.ag-detail-pop {
  position: fixed;
  z-index: 9500;
  isolation: isolate;
  width: 400px;
  background: rgba(248,248,252,0.68);
  backdrop-filter: blur(48px) saturate(180%);
  -webkit-backdrop-filter: blur(48px) saturate(180%);
  border: 0.5px solid rgba(255,255,255,0.75);
  border-radius: 20px;
  box-shadow:
    0 20px 48px rgba(0,0,0,0.12),
    0 4px 12px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.5);
  animation: ag-pop-in 180ms cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes ag-pop-in {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

/* Seta do balão */
.ag-detail-pop-arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  background: rgba(248,248,252,0.9);
  border: 0.5px solid rgba(255,255,255,0.75);
  transform: rotate(45deg);
  z-index: -1;
}
.ag-detail-pop-arrow--left  { left: -6px; border-right: none; border-top: none; }
.ag-detail-pop-arrow--right { right: -6px; border-left: none; border-bottom: none; }
.ag-detail-pop-arrow--top   { top: -6px; border-bottom: none; border-right: none; }
.ag-detail-pop-arrow--bottom { bottom: -6px; border-top: none; border-left: none; }

/* Inner container */
.ag-detail-pop-inner {
  padding: 14px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Header: nome do paciente + X */
.ag-detail-pop-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.ag-detail-pop-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(0,0,0,0.08);
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s;
  margin-left: auto;
}
.ag-detail-pop-close:hover { background: rgba(0,0,0,0.13); }
.ag-detail-pop-close:active { background: rgba(0,0,0,0.18); transform: scale(0.93); }

/* Meta (data/hora/repetir) — seção cinza */
.ag-detail-pop-meta {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: rgba(0,0,0,0.03);
  border: 0.5px solid rgba(0,0,0,0.07);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 8px;
}

/* Linha data/hora */
.ag-chip-body-datetime-row,
.ag-chip-body-repeat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  min-height: 44px;
  border-bottom: 0.5px solid rgba(0,0,0,0.07);
}
.ag-chip-body-repeat-row { border-bottom: none; }
.ag-chip-body-dt-lbl {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 400;
  width: 58px;
  flex-shrink: 0;
}
.ag-chip-body-dt-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Rows de campos (Serviço, Modalidade, Status, Obs) */
.ag-detail-pop-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: rgba(0,0,0,0.03);
  border: 0.5px solid rgba(0,0,0,0.07);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 8px;
}
.ag-detail-pop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  min-height: 44px;
  border-bottom: 0.5px solid rgba(0,0,0,0.07);
}
.ag-detail-pop-row:last-child { border-bottom: none; }
.ag-detail-pop-lbl {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 400;
  flex-shrink: 0;
}
.ag-detail-pop-row > .ag-chip-body-value-btn,
.ag-detail-pop-row > .ag-chip-body-mode-toggle,
.ag-detail-pop-row > .ag-status-badge,
.ag-detail-pop-row > .ag-chip-body-field-obs {
  width: 178px;
  max-width: 178px;
  margin-left: auto;
}
.ag-detail-pop-val {
  font-size: 13px;
  color: var(--text);
  font-weight: 400;
}
.ag-detail-pop-row--obs {
  align-items: center;
  min-height: 44px;
  height: auto;
}
.ag-detail-pop-row--obs > .ag-chip-body-field-obs {
  width: 100%;
  max-width: none;
}

/* ─── Popover de atalhos do bloqueio (menu compacto, estilo RAE) ───
   Reusa o glass/arrow/animação de .ag-detail-pop; sobrescreve a largura. */
.med-ag-bloq-pop {
  width: auto;
  min-width: 240px;
  max-width: 320px;
}
.med-ag-bloq-pop-inner {
  padding: 6px;
  display: flex;
  flex-direction: column;
}
/* Cabeçalho = contexto (não ação): menor, muted, com divisória separando das
   ações abaixo. Dá hierarquia clara entre "o que é" e "o que faço". */
.med-ag-bloq-pop-head {
  padding: 6px 12px 8px;
  margin-bottom: 4px;
  border-bottom: 0.5px solid rgba(0,0,0,0.08);
  font-size: 12px;
  font-weight: 590;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.med-ag-bloq-pop-item {
  appearance: none;
  border: none;
  background: transparent;
  text-align: left;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s;
}
.med-ag-bloq-pop-item:hover { background: rgba(0,0,0,0.06); }
.med-ag-bloq-pop-item:active { background: rgba(0,0,0,0.1); }
.med-ag-bloq-pop-item--danger { color: #DC2626; }
.med-ag-bloq-pop-item--danger:hover { background: rgba(220,38,38,0.06); }

/* Footer — ações ícone */
.ag-detail-pop-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 0.5px solid rgba(0,0,0,0.07);
}
.ag-detail-pop-footer-left,
.ag-detail-pop-footer-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Campos inline — reseta o input global. Seletor com tag (input.classe = mesma
   especificidade de input[type=text], mas vem depois na cascata) dispensa !important. */
input.ag-chip-body-field {
  width: auto;
}

input.ag-chip-body-field-name {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.24px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  color: var(--text);
  width: 100%;
}
.ag-chip-body-field-name::placeholder { color: var(--text-muted); font-weight: 400; }
.ag-chip-body-date-wrap {
  width: 130px;
  height: 32px;
  flex-shrink: 0;
  overflow: hidden;
  border: none;
  border-radius: 8px;
  background: rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
}
.ag-chip-body-time-wrap {
  width: 100px;
  height: 32px;
  flex-shrink: 0;
  overflow: visible;
  border: none;
  border-radius: 8px;
  background: rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
}
input.ag-chip-body-field-date,
input.ag-chip-body-field-time {
  width: 100%;
  font-size: 12px;
  padding: 0 4px;
  height: 32px;
  margin-top: 0;
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  cursor: pointer;
  display: block;
  outline: none;
}
.ag-chip-body-field-date::-webkit-date-and-time-value,
.ag-chip-body-field-time::-webkit-date-and-time-value {
  text-align: center;
}
.ag-chip-body-field-date::-webkit-datetime-edit,
.ag-chip-body-field-time::-webkit-datetime-edit {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-height: 0;
}
/* Obs — linha única, expande ao digitar */
textarea.ag-chip-body-field-obs {
  flex: 1;
  min-width: 0;
  resize: none;
  font-size: 13px;
  color: var(--text);
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  overflow: hidden;
  transition: height 160ms ease;
  line-height: 1.4;
  height: 20px;
  min-height: 20px;
}

/* Dropdown de pacientes */
.ag-chip-body-pac-dropdown {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 0.5px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  overflow: hidden;
  max-height: 180px;
  overflow-y: auto;
  margin-top: 2px;
}
.ag-chip-body-pac-item {
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text);
  background: none;
  border: none;
  border-bottom: 0.5px solid rgba(0,0,0,0.07);
  cursor: pointer;
  display: block;
}
.ag-chip-body-pac-item:last-child { border-bottom: none; }
.ag-chip-body-pac-item:hover,
.ag-chip-body-pac-item.is-active { background: rgba(120,120,128,0.08); }

/* Toggle modalidade — segmented control Apple */
.ag-chip-body-mode-toggle {
  display: flex;
  background: rgba(120,120,128,0.12);
  border-radius: 9px;
  padding: 2px;
  gap: 2px;
  justify-content: flex-end;
}
.ag-chip-body-mode-btn {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  border-radius: 7px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 120ms, color 120ms, box-shadow 120ms;
}
.ag-chip-body-mode-btn.ag-chip-body-mode-active {
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.06);
  font-weight: 600;
}

/* Serviço e Repetir — valor à direita */
.ag-chip-body-value-btn {
  font-size: 13px;
  color: var(--accent);
  font-weight: 400;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: right;
  white-space: nowrap;
}
.ag-chip-body-value-btn:active { opacity: 0.6; }

/* Separator no action-pop */
.action-pop-separator {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* Sheet "Personalizar repetição" */
.ag-rrule-sheet {
  background: var(--glass-modal);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 0.5px solid var(--border-glass);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
}
.ag-rrule-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.ag-rrule-sheet-title {
  font-size: var(--size-base);
  font-weight: var(--weight-semibold);
  color: var(--text);
}
.ag-rrule-sheet-close {
  width: 24px;
  height: 24px;
  border: none;
  background: var(--accent-light);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
}
.ag-rrule-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ag-rrule-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.ag-rrule-lbl {
  font-size: var(--size-xs);
  color: var(--text-muted);
  flex-shrink: 0;
}
.ag-rrule-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.ag-rrule-step-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: var(--bg);
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  flex-shrink: 0;
}
.ag-rrule-step-btn:hover { background: var(--accent-hover); }
.ag-rrule-step-val {
  min-width: 28px;
  text-align: center;
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
  padding: 0 4px;
}
.ag-rrule-seg {
  display: inline-flex;
  background: rgba(120,120,128,0.12);
  border-radius: 9px;
  padding: 2px;
  gap: 2px;
  flex: 1;
}
.ag-rrule-seg-stop { width: 100%; }
.ag-rrule-seg-btn {
  flex: 1;
  padding: 5px 6px;
  font-size: var(--size-xs);
  font-weight: var(--weight-medium);
  border: none;
  border-radius: 7px;
  background: none;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 120ms, color 120ms, box-shadow 120ms;
  white-space: nowrap;
}
.ag-rrule-seg-btn.active {
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  font-weight: var(--weight-semibold);
}
.ag-rrule-seg-btn:active { transform: scale(0.96); }

/* Campo "Até" na sheet de repetição */
.ag-chip-body-date-wrap[data-rrule-date] {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 220px;
  max-width: 220px;
  height: 36px;
  border-radius: 9px;
  background: rgba(0,0,0,0.05);
  border: none;
  overflow: hidden;
  cursor: pointer;
}
.ag-chip-body-date-pill {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 12px;
  font-size: 14px;
  color: var(--text);
  pointer-events: none;
}
input.ag-chip-body-picker-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 2;
  border: none;
  background: transparent;
}
.ag-rrule-sheet-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* ── Sinalizador de recorrência nos chips ─────────────────── */
/* Recurrence icon — símbolo visível ao lado do nome+modal icon.
   Inspirado no RAE Clínica Digital: ícone solto com peso suficiente
   pra Bruna identificar de relance que o chip é recorrente.
   Tamanho 13px, cor herdada (currentColor) com opacidade plena. */
.ag-chip-recorrente {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 3px;
  color: currentColor;
  opacity: 0.85;
  flex-shrink: 0;
  vertical-align: middle;
}
/* Tamanho padrão 13px (usos fora do chip da agenda). Dentro dos chips,
   os wrappers abaixo reduzem pra casar com o ícone de modalidade. */
.ag-chip-recorrente svg {
  width: 13px;
  height: 13px;
}
.ag-chip-recorrente--inline {
  margin-left: 4px;
}

/* View Mês */
.ag-mes-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: transparent;
}

.ag-mes-header {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--border-soft);
  background: transparent;
}

.ag-mes-dow {
  padding: 14px 12px;
  font-size: 12px;
  font-weight: 560;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0.01em;
  text-align: center;
  border-right: 1px solid var(--border-soft);
}
.ag-mes-dow:last-child { border-right: none; }

.ag-mes-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  flex: 1;
  overflow-y: auto;
  align-content: start;
  background: transparent;
}

.ag-mes-cell {
  min-height: 150px;
  min-width: 0;
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: 10px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: background 0.1s;
  text-align: left;
  background: transparent;
}

.ag-mes-cell:hover { box-shadow: inset 0 0 0 9999px var(--hover-subtle); }

.ag-mes-cell:nth-child(7n) { border-right: none; }

.ag-mes-cell-vazia {
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-tint);
  cursor: default;
}

.ag-mes-cell.ag-mes-hoje {
  background: rgba(246, 248, 252, 0.68);
}

/* Heatmap por densidade — tint accent sutil pra Bruna identificar de
   relance dias cheios vs vazios. Soma-se ao .ag-mes-hoje sem competir. */
.ag-mes-cell--d1 { background: rgba(82, 102, 235, 0.025); }
.ag-mes-cell--d2 { background: rgba(82, 102, 235, 0.05); }
.ag-mes-cell--d3 { background: rgba(82, 102, 235, 0.08); }
/* Quando hoje + densidade, o destaque de 'hoje' (cinza-claro) prevalece —
   evita acúmulo visual confuso. */
.ag-mes-cell.ag-mes-hoje.ag-mes-cell--d1,
.ag-mes-cell.ag-mes-hoje.ag-mes-cell--d2,
.ag-mes-cell.ag-mes-hoje.ag-mes-cell--d3 {
  background: rgba(246, 248, 252, 0.68);
}

.ag-mes-cell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 28px;
}

/* Indicador de bloqueio na vista Mensal (cadeado no canto do dia) */
.ag-mes-lock {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   Faixa de aniversariantes — camada "dia todo" desenhada sobre a agenda.
   Discreta e do tamanho da grade. Cor via --accent (navy Bruna / teal médico).
   Ícone SVG (iconCake), nunca emoji. Só nas views Dia e Semana — o Mês não tem.
   ───────────────────────────────────────────────────────────────────────── */

/* Nome clicável — comum às 3 faixas (Dia filtrado, grade por médico, Semana) */
.ag-birthday-name {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 12px;
  color: var(--accent);
  font-weight: 540;
  cursor: pointer;
  border-radius: 4px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ag-birthday-name:hover { text-decoration: underline; }
.ag-birthday-name:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Ícone de bolo — herda a cor accent, discreto */
.ag-birthday-icon,
.ag-birthday-gutter,
.ag-birthday-grade-gutter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}

/* Dia filtrado (1 médico) — grid gutter+coluna: ícone alinhado à coluna de
   horas (antes do divisor), nomes na coluna do dia (depois). Espelha o
   .ag-dia-header (desktop 72px; mobile reajusta pra 56px). */
.ag-birthday-strip {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  background: var(--accent-tint-1);
  border-bottom: 1px solid var(--border-hairline);
  min-height: 26px;
}
.ag-birthday-strip-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  padding: 4px 12px;
  min-width: 0;
}

/* Grade (Dia multi-médico): a largura mínima é compartilhada com header e
   horários, sem depender do conteúdo de cada faixa. */
.ag-birthday-grade-row {
  display: grid;
  width: 100%;
  min-width: var(--ag-grade-min-width);
  flex-shrink: 0;
  background: var(--accent-tint-1);
  border-bottom: 1px solid var(--border-hairline);
  min-height: 26px;
}
.ag-birthday-grade-gutter {
  padding: 4px 0;
}
.ag-birthday-grade-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  padding: 4px 12px;
  min-width: 0;
  border-left: 1px solid var(--border-hairline);
}

/* Semana — linha "dia todo" alinhada às 7 colunas (espelha .ag-header/.ag-row:
   desktop 72px + 7 cols; o escopo mobile reajusta pra 56px junto da grade). */
.ag-birthday-week-row {
  display: grid;
  grid-template-columns: 72px repeat(7, minmax(0, 1fr));
  background: var(--accent-tint-1);
  border-bottom: 1px solid var(--border-hairline);
  min-height: 24px;
}
.ag-birthday-week-cell {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  min-width: 0;
  border-left: 1px solid var(--border-hairline);
}
/* Nome encolhe (com ellipsis); o "+N" nunca é comprimido */
.ag-birthday-week-cell .ag-birthday-name { min-width: 0; flex: 0 1 auto; }
.ag-birthday-week-cell .ag-birthday-mais { flex: 0 0 auto; }

/* "+N" da Semana — leva à vista Dia. Discreto, tom mais apagado que os nomes. */
.ag-birthday-mais {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: 11px;
  font-weight: 560;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
  white-space: nowrap;
}
.ag-birthday-mais:hover { text-decoration: underline; }
.ag-birthday-mais:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ag-mes-cell-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
}

.ag-mes-dia-num {
  font-size: 13px;
  font-weight: 560;
  color: var(--text-muted);
  line-height: 1;
  padding: 0;
  align-self: flex-start;
}
/* Click no número do dia → drilldown pra vista Dia. Cursor + hover accent
   afford da ação. Stop propagation no JS evita disparar a cell parent. */
.ag-mes-dia-num[data-month-jump-day] {
  cursor: pointer;
  transition: color 120ms;
}
.ag-mes-dia-num[data-month-jump-day]:hover {
  color: var(--accent);
}

.ag-mes-dia-hoje {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  font-weight: 620;
  font-size: 12px;
}

.ag-mes-chip {
  font-size: 11px;
  font-weight: var(--weight-medium);
  padding: 2px 5px 2px 0;
  border-radius: 5px;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  min-height: 22px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  color: var(--text);
}

.ag-mes-chip-bar {
  width: 3px;
  align-self: stretch;
  border-radius: 2px 0 0 2px;
  flex-shrink: 0;
}
.ag-ev-agendada   .ag-mes-chip-bar { background: var(--s-agendada);   }
.ag-ev-confirmada .ag-mes-chip-bar { background: var(--s-confirmada); }
.ag-ev-atendida   .ag-mes-chip-bar { background: var(--s-atendida);   }
.ag-ev-falta      .ag-mes-chip-bar { background: var(--s-falta);      }
.ag-ev-cancelada  .ag-mes-chip-bar { background: var(--s-cancelada);  }
.ag-ev-pendente   .ag-mes-chip-bar { background: var(--s-pendente);   }
.ag-ev-paga       .ag-mes-chip-bar { background: var(--s-paga);       }
.ag-chip-selected .ag-mes-chip-bar { display: none; }

.ag-mes-chip-nome {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.ag-mes-chip-sep {
  flex: 1;
}

.ag-mes-chip-hora {
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Recorrência do mês: casa com a modalidade pequena (iconVideo/Person 8px);
   o glifo do ↻ é mais leve, 10px equilibra sem parecer maior. */
.ag-mes-chip .ag-chip-recorrente {
  opacity: 0.7;
}
.ag-mes-chip .ag-chip-recorrente svg {
  width: 10px;
  height: 10px;
}

/* Sem hover no chip mensal — bg/cor de hover ficava esquisito sobre o
   chip pequeno e colorido. Clique abre o popover, que é o feedback real. */

/* Reset estilos de ag-ev-* no contexto do mês */
.ag-mes-chip[class*="ag-ev-"]:not(.ag-chip-selected) {
  background: transparent;
  border-left: none;
  opacity: 1;
}

.ag-mes-mais {
  font-size: 11px;
  color: var(--text-muted);
  padding: 2px 0 0;
  cursor: pointer;
  margin-top: auto;
  align-self: flex-start;
}

.ag-mes-mais:hover { color: var(--accent); }

/* ============================================================
   Agenda — Grade multi-coluna (sem filtro)
   ============================================================ */

/* Scroller único (x+y): header sticky top acompanha o scroll horizontal.
   Header em container separado do corpo desconectava médicos das colunas
   ao scrollar pra direita. Mesmo padrão que o mobile já usa. */
.ag-grade-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.ag-grade-header-row {
  display: grid;
  width: 100%;
  min-width: var(--ag-grade-min-width);
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  position: sticky;
  top: 0;
  z-index: 3;
}

.ag-grade-scroll {
  flex: 1;
  width: 100%;
  min-width: var(--ag-grade-min-width);
}

.ag-grade-grid {
  display: grid;
  width: 100%;
  min-width: var(--ag-grade-min-width);
}

/* Célula de canto (acima da coluna de horas) — sticky na interseção
   top+left, acima do header e da coluna de horas. */
.ag-grade-corner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  border-right: 1px solid var(--border);
  background: var(--bg-card);
  position: sticky;
  left: 0;
  z-index: 4;
}

/* Legenda dentro do scroller: sticky bottom+left pra seguir visível
   em qualquer posição de scroll (era filho fixo fora do scroll). */
.ag-grade-wrap > .ag-tabela-legenda {
  position: sticky;
  bottom: 0;
  left: 0;
  background: var(--bg-card);
  z-index: 3;
}

/* Header de cada médico */
.ag-grade-doc-header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-right: 1px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  transition: background 140ms;
}
.ag-grade-doc-header:last-child { border-right: none; }
.ag-grade-doc-header:hover { background: var(--accent-light); }

.ag-grade-avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  flex-shrink: 0;
  letter-spacing: 0.02em;
  letter-spacing: 0.02em;
}

.ag-grade-doc-info { min-width: 0; }
.ag-grade-doc-nome {
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ag-grade-doc-cnt {
  font-size: var(--size-xs);
  color: var(--text-muted);
}

/* Coluna de horários (sticky à esquerda) */
.ag-grade-time {
  padding: var(--space-1) var(--space-2) 0;
  font-size: var(--size-xs);
  color: var(--text-xmuted);
  font-variant-numeric: tabular-nums;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  position: sticky;
  left: 0;
  z-index: 1;
}

/* Células de agendamento */
.ag-grade-cell {
  position: relative;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.ag-grade-cell:last-child { border-right: none; }
button.ag-grade-cell,
button.ag-cell,
button.ag-mes-cell,
button.pag-mes-cell {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border-radius: 0;
  color: inherit;
  font: inherit;
  text-align: left;
}
button.ag-grade-cell {
  border: 0;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition: background 120ms;
}
button.ag-grade-cell-empty:hover {
  background: var(--accent-light);
}
button.ag-cell, div.ag-cell {
  border: 0;
  border-right: 1px solid rgba(229,231,235,0.45);
  border-bottom: 1px solid rgba(229,231,235,0.45);
}
div.ag-cell:hover,
[data-grade-drop]:hover { background: transparent; cursor: pointer; }
/* Hover de criação — só a agenda do MÉDICO (Dia/Semana) marca .ag-cell--criavel,
   revelando que o slot livre aceita duplo clique pra criar bloqueio. Mesmo
   --accent-light da célula vazia da Grade da Bruna, pra não inventar cor nova.
   Especificidade dupla (.ag-cell.ag-cell--criavel) pra vencer o `background:
   transparent` acima sem !important — mesmo truque do drop hover. Slot já
   bloqueado não recebe a classe. */
div.ag-cell.ag-cell--criavel:hover { background: var(--accent-light); }
/* O `cursor:pointer` do :hover acima vence o `cursor:not-allowed` de
   .ag-cell-bloqueio (0,2,1 > 0,1,0) — medido no browser: a célula bloqueada
   virava "clicável" justo ao passar o mouse, que é quando o cursor importa.
   Repõe com especificidade suficiente. Vale pra Semana da Bruna também. */
div.ag-cell.ag-cell-bloqueio:hover { cursor: not-allowed; }
button.ag-mes-cell,
button.pag-mes-cell {
  border: 0;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
/* Hover sutil via box-shadow inset: soma sobre o heatmap de densidade
   (--d1/d2/d3) sem sobrescrever a cor da célula. Célula do Mês é clicável. */
button.ag-mes-cell:hover,
button.pag-mes-cell:hover { box-shadow: inset 0 0 0 9999px var(--hover-subtle); }
button.ag-status-badge,
button.ag-wapop-item,
button.ag-ctxpop-item,
button.ag-spop-item {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
}
button.ag-status-badge {
  width: auto;
}

.ag-grade-cell-bloqueio {
  /* Só desabilita criação; o visual é o bloco flutuante .ag-bloqueio-chip por
     cima (igual Semana/RAE). Sem fundo próprio pra não pintar cada slot. */
  cursor: not-allowed;
}

.ag-grade-bloqueio-lbl {
  font-size: 10px;
  color: var(--text-xmuted);
  font-style: italic;
}

/* Chip dentro da grade — estilo Apple Calendar */
.ag-grade-chip {
  position: absolute;
  left: 3px;
  right: 3px;
  padding: 4px var(--space-2) 4px 6px;
  border-radius: 4px;
  border: none;
  border-left: 2.5px solid transparent;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: filter 140ms;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1px;
  z-index: 1;
  font: inherit;
  text-align: left;
  min-height: 0;
  box-sizing: border-box;
}

/* Ícones do chip (recorrência + modalidade) agrupados no canto sup. direito */
.ag-grade-chip-icons {
  position: absolute;
  top: 3px;
  right: 4px;
  display: flex;
  align-items: center;
  gap: 3px;
  line-height: 1;
}
.ag-grade-chip-modal-icon {
  opacity: 0.45;
  display: flex;
  align-items: center;
  line-height: 1;
}
/* Recorrência dentro do grupo — mesma opacidade e sem margin inline */
.ag-chip-recorrente--grade {
  margin-left: 0;
  opacity: 0.45;
}
.ag-chip-recorrente--grade svg {
  width: 11px;
  height: 11px;
}
.ag-grade-chip:hover { filter: brightness(0.96); }

.ag-grade-chip.ag-ev-agendada   { background: var(--s-agendada-bg);   border-left-color: var(--s-agendada);   }
.ag-grade-chip.ag-ev-confirmada { background: var(--s-confirmada-bg); border-left-color: var(--s-confirmada); }
.ag-grade-chip.ag-ev-atendida   { background: var(--s-atendida-bg);   border-left-color: var(--s-atendida);   }
.ag-grade-chip.ag-ev-falta      { background: var(--s-falta-bg);      border-left-color: var(--s-falta);      }
.ag-grade-chip.ag-ev-cancelada  { background: var(--s-cancelada-bg);  border-left-color: var(--s-cancelada);  }
.ag-grade-chip.ag-ev-pendente   { background: var(--s-pendente-bg);   border-left-color: var(--s-pendente);   }
.ag-grade-chip.ag-ev-paga       { background: var(--s-paga-bg);       border-left-color: var(--s-paga);       }

.ag-grade-chip-nome {
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1.3;
  /* Reserva o espaço dos ícones absolutos no canto sup. direito */
  padding-right: 30px;
}

.ag-grade-chip-serv {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

/* Fix: chips curtos cabem no intervalo real; nome e horário ficam em uma
   linha. O title conserva os detalhes quando a largura também é pequena. */
.ag-grade-chip.ag-chip--compact,
.ag-event.ag-chip--compact {
  flex-direction: row;
  align-items: center;
  padding: 0 30px 0 5px;
  gap: 5px;
}
.ag-chip--compact .ag-grade-chip-nome,
.ag-chip--compact .ag-ev-nome {
  flex: 1;
  min-width: 0;
  padding-right: 0;
  font-size: 11px;
  line-height: 1;
}
.ag-chip--compact .ag-ev-horario {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 9px;
  line-height: 1;
}
.ag-chip--compact .ag-grade-chip-icons,
.ag-chip--compact .ag-ev-icons {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
}
.ag-chip--compact .ag-ev-horario svg {
  display: none;
}
.ag-chip--tiny .ag-grade-chip-nome,
.ag-chip--tiny .ag-ev-nome {
  font-size: 10px;
}
.ag-chip--tiny .ag-ev-horario,
.ag-chip--compact.ag-chip-split .ag-ev-horario { display: none; }
.ag-chip--micro .ag-grade-chip-nome,
.ag-chip--micro .ag-ev-nome,
.ag-chip--micro .ag-ev-horario {
  opacity: 0;
}
@media (max-width: 767px) {
  .ag-event.ag-chip--compact:not(.ag-dia-event) .ag-ev-horario { display: none; }
}

/* Legenda de status */
/* Legenda colapsável — <details> nativo. summary fica como link discreto
   no rodapé, .ag-legend só renderiza altura quando expandido. */
.ag-legend-collapsible {
  flex-shrink: 0;
  padding: 4px var(--space-4) 8px;
}
.ag-legend-summary {
  display: inline-block;
  font-size: var(--size-xs);
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
  list-style: none;
}
.ag-legend-summary::-webkit-details-marker { display: none; }
.ag-legend-summary::before {
  content: '▸ ';
  font-size: 9px;
  color: var(--text-xmuted);
  transition: transform 120ms;
  display: inline-block;
}
.ag-legend-collapsible[open] .ag-legend-summary::before {
  content: '▾ ';
}
.ag-legend-summary:hover {
  color: var(--text);
}

.ag-legend {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 8px 0 0;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.ag-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.ag-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ag-legend-dot.ag-ev-agendada   { background: var(--s-agendada);   }
.ag-legend-dot.ag-ev-confirmada { background: var(--s-confirmada); }
.ag-legend-dot.ag-ev-atendida   { background: var(--s-atendida);   }
.ag-legend-dot.ag-ev-falta      { background: var(--s-falta);      }
.ag-legend-dot.ag-ev-cancelada  { background: var(--s-cancelada);  }
.ag-legend-dot.ag-ev-pendente   { background: var(--s-pendente);   }
.ag-legend-dot.ag-ev-paga       { background: var(--s-paga);       }
.ag-legend-label {
  font-size: var(--size-xs);
  color: var(--text-muted);
}

/* ============================================================
   Agenda — Tabela (dia, médico filtrado)
   ============================================================ */

.ag-tabela-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ag-tabela-inner {
  flex: 1;
  overflow-y: auto;
}

.ag-tabela {
  width: 100%;
  border-collapse: collapse;
}

.ag-tabela thead th {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.7);
  position: sticky;
  top: 0;
  z-index: 2;
}

.ag-tabela tbody tr {
  border-bottom: 1px solid var(--border-soft);
  transition: background 100ms;
}
.ag-tabela tbody tr:hover { background: rgba(27,43,75,0.02); }
.ag-tabela tbody tr:last-child { border-bottom: none; }

.ag-tabela td {
  padding: var(--space-2) var(--space-3);
  vertical-align: middle;
}

.ag-tab-hora {
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
  width: 88px;
  line-height: 1.5;
}
.ag-tab-hora-fim {
  font-size: var(--size-xs);
  font-weight: var(--weight-regular);
  color: var(--text-xmuted);
}

.ag-tab-nome {
  min-width: 180px;
}
.ag-tab-nome strong {
  display: block;
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
}
.ag-tab-nome small {
  font-size: var(--size-xs);
  color: var(--text-muted);
}

.ag-tab-serv {
  width: 120px;
}

/* Coluna de ações */
.ag-tab-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  width: 80px;
}
.ag-tab-action-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
}

/* Badge de status (inline na tabela) */
.ag-status-wrap { position: relative; display: inline-block; }

.ag-status-badge {
  gap: 5px;
}
.ag-status-badge:hover { filter: brightness(0.93); }

/* Dot no status badge */
.ag-status-badge::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Status popover */
.ag-status-pop {
  min-width: 150px;
}
.ag-status-pop.ag-pop-open { display: block; }

.ag-spop-item {
}
.ag-spop-item-active {
  background: var(--accent-light);
  font-weight: var(--weight-medium);
}

.ag-spop-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* WA popover */
.ag-wa-pop,
.ag-ctx-pop {
  min-width: 140px;
}
.ag-wa-pop.ag-pop-open,
.ag-ctx-pop.ag-pop-open { display: block; }

.ag-wapop-item,
.ag-ctxpop-item {
}

/* Legenda (rodapé da tabela) */
.ag-tabela-legenda {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.ag-leg-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--size-xs);
  color: var(--text-muted);
}

.ag-leg-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ag-leg-badge {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ag-leg-text {
  font-size: var(--size-xs);
  color: var(--text-muted);
}

/* ============================================================
   Agenda — Modal motivo (falta/cancelada)
   ============================================================ */

.ag-toggle-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.ag-toggle-wrap input[type="checkbox"] {
  display: none;
}

.ag-toggle-slider {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: background 200ms;
  flex-shrink: 0;
}
.ag-toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  transition: transform 200ms;
  box-shadow: var(--shadow-sm);
}
.ag-toggle-slider.ag-toggle-on,
input[type="checkbox"]:checked + .ag-toggle-slider {
  background: var(--accent);
}
.ag-toggle-slider.ag-toggle-on::after,
input[type="checkbox"]:checked + .ag-toggle-slider::after {
  transform: translateX(16px);
}

.ag-mot-textarea {
  width: 100%;
  min-height: 80px;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: var(--size-sm);
  color: var(--text);
  background: var(--bg-input);
  resize: vertical;
  transition: border-color 150ms;
  box-sizing: border-box;
}
.ag-mot-textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.ag-mot-textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================
   Agenda — empty state quando filtro de médico não retorna nada
   ============================================================ */

.ag-empty-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  padding: var(--space-6);
}

/* ============================================================
   scope-modal — opções verticais (Esta / Esta e próximas / Toda a série)
   ============================================================ */

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

.scope-modal-option {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: var(--size-sm);
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}

.scope-modal-option:hover {
  background: var(--navy-light);
  border-color: var(--border-strong, var(--border));
}

/* Sublabel opt-in (ex: preview de contagem na exclusão recorrente) */
.scope-modal-option-label { display: block; }
.scope-modal-option-sub {
  display: block;
  margin-top: 2px;
  font-size: var(--size-12);
  color: var(--text-muted);
}

.scope-modal-option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Cancelar como opção na lista (action-sheet): mais discreto que as ações */
.scope-modal-option[data-scope-cancel] {
  color: var(--text-meta);
}

/* ============================================================
   Botões de ação da tabela (wrapper relativo para popovers)
   ============================================================ */

.ag-btn-wa,
.ag-btn-ctx {
  position: relative;
}

/* Asterisco obrigatório */
.req { color: var(--s-cancelada); }

/* form-label (alias para label em modais da agenda) */
.form-label {
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
}

/* ============================================================
   Financeiro
   ============================================================ */

.view--financeiro {
  background: var(--bg-card);
}

.fin-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.fin-shell {
  position: relative;
}

.fin-shell.fin-shell-has-drawer {
  gap: 0;
}

.fin-main {
  min-width: 0;
}

.fin-ledger-shell {
  background: var(--bg-card);
  border: none;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}

/* Fluxo de caixa — timeline read-only agrupada por dia (médico) */
/* Respiro do primeiro header em relação à faixa de KPIs (colava no divisor). */
.fluxo-list {
  display: flex;
  flex-direction: column;
  padding-top: var(--space-4);
}

/* Header de dia = ÂNCORA do grupo (forte, escuro). O item é subordinado a ele:
   dia domina por peso E tamanho, como no padrão de extrato/fluxo do Mobills. */
.fluxo-dia-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 28px 10px;
  border-bottom: 1px solid var(--border-hairline);
}

.fluxo-dia-data {
  font-size: var(--size-base);
  font-weight: var(--weight-semibold);
  color: var(--text-ink);
  letter-spacing: -0.01em;
}

.fluxo-dia-liquido {
  font-size: var(--size-base);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
}

/* Densidade alinhada ao dense-table das abas Receitas/Despesas (padding lateral
   28px = mesma coluna de valor; linha ~46px). */
.fluxo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 28px;
  border-bottom: 1px solid var(--border-hairline);
}

/* Espaço entre um grupo-dia e o próximo header, sem gap solto no flex. */
.fluxo-dia + .fluxo-dia { margin-top: var(--space-5); }

.fluxo-row:last-child { border-bottom: none; }

.fluxo-row-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fluxo-row-label {
  font-size: var(--size-14);
  font-weight: var(--weight-regular);
  color: var(--text-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fluxo-row-sub {
  font-size: var(--size-sm);
  color: var(--text-muted);
}

.fluxo-row-valor {
  font-size: var(--size-14);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  letter-spacing: -0.02em;
}

/* Cor de texto de valor por tipo — tokens passam WCAG AA (receita 5.29:1,
   despesa 5.52:1), ao contrário do --s-paga pastel (2.88:1 como texto). */
.fluxo-row-valor--receita,
.fluxo-dia-liquido--pos { color: var(--fin-receita-fg); }
.fluxo-row-valor--despesa,
.fluxo-dia-liquido--neg { color: var(--fin-despesa-fg); }

.conv-td-mobile-meta { display: none; }

.fin-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin-bottom: 18px;
}

.fin-toolbar-top,
.fin-toolbar-bottom {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.fin-toolbar-top {
  justify-content: flex-start;
}

.fin-toolbar-bottom {
  justify-content: flex-start;
}

.fin-toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.fin-nav-mes {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.fin-nav-mes .btn-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-hairline-strong);
  background: var(--bg-card);
  box-shadow: 0 1px 2px rgba(11, 15, 32, 0.04);
  color: var(--text-muted);
}

.fin-nav-mes .btn-icon:hover {
  color: var(--text);
  border-color: var(--accent-tint-3);
  background: var(--accent-tint-1);
}

.fin-mes-label {
  min-width: 92px;
  text-align: center;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--text-ink);
}

.fin-search-wrap {
  min-width: 360px;
  max-width: 540px;
}

.fin-search-wrap .pac-search {
  height: 44px;
}

.fin-search-wrap,
.fin-status-pills,
.fin-btn-new {
  flex-shrink: 0;
}

.fin-btn-new {
  margin-left: auto;
}

/* Botão "Exportar planilha" (aba Fluxo de caixa) — empurra pra direita, alinhado
   ao padrão do "Nova despesa". */
.fin-btn-export {
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* Modal de exportação: opções de período (rádios grandes) + seletor livre. */
.export-modal-intro {
  margin: 0 0 var(--space-4);
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.5;
}
.export-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.export-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-solid);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.export-opt:hover { background: var(--accent-tint-1); }
.export-opt:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-tint-2);
}
.export-opt input { accent-color: var(--accent); flex: none; }
.export-opt-txt { display: flex; flex-direction: column; gap: 1px; }
.export-opt-txt strong { font-size: 14px; color: var(--text-ink); }
.export-opt-txt small { font-size: 12px; color: var(--text-muted); }
.export-livre {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
  flex-wrap: wrap;
}
.export-livre[hidden] { display: none; }
.export-sel-grp { display: inline-flex; gap: 6px; }
.export-livre-sep { color: var(--text-muted); font-size: 13px; }

.fin-status-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.fin-spill {
  min-width: 0;
  min-height: 32px;
  border-radius: var(--radius-pill);
  border-color: var(--border-hairline-strong);
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-muted);
  box-shadow: none;
  padding: 0 12px;
  font-size: var(--size-12);
}

.fin-spill-active {
  background: var(--accent-tint-1);
  border-color: var(--accent-tint-3);
  color: var(--accent);
}

/* Fix: override visual removido — botão usa o padrão .btn-primary (36px, radius-md), igual aos demais "Novo X" do sistema. Mantém-se apenas as regras de layout (flex-shrink + margin-left:auto) acima e os overrides mobile. */

.fin-kpis {
  background: var(--bg-card);
}

.fin-summary {
  background: var(--bg-card);
  border-top: 1px solid var(--border-hairline-strong);
}

.fin-summary-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 12px;
  padding: 4px 0 0;
  border-bottom: 1px solid var(--border-hairline-strong);
}

.fin-summary-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.fin-kpi {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 18px 16px;
}

.fin-kpi + .fin-kpi {
  border-left: 1px solid var(--border-hairline);
}

.fin-kpi-label {
  font-size: var(--size-12);
  font-weight: 500;
  color: var(--text-meta);
  letter-spacing: -0.01em;
}

.fin-kpi-valor {
  font-size: clamp(1.45rem, 1.05rem + 0.9vw, 1.95rem);
  font-weight: 420;
  letter-spacing: -0.045em;
  line-height: 1.08;
  color: var(--text-ink);
  min-width: 0;
  overflow-wrap: anywhere;
}

.fin-kpi-sub {
  font-size: 11px;
  color: var(--text-meta);
}

.fin-summary-toggle {
  align-self: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(106, 131, 255, 0.34);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--text-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
  flex-shrink: 0;
}

.fin-summary-toggle:hover {
  background: var(--accent-tint-1);
  border-color: color-mix(in srgb, var(--accent) 48%, transparent);
}

.fin-summary-expanded .fin-summary-toggle {
  transform: rotate(180deg);
}

@keyframes fin-summary-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fin-summary-expanded .fin-summary-expanded-head,
.fin-summary-expanded .fin-summary-expanded-layout,
.fin-summary-expanded .fin-summary-panels {
  animation: fin-summary-reveal 200ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.fin-summary-expanded-head {
  display: flex;
  justify-content: flex-end;
  padding: 8px 0 6px;
}

.fin-summary-expanded-layout {
  display: grid;
  grid-template-columns: minmax(200px, 0.62fr) minmax(0, 1.06fr) minmax(0, 0.74fr);
  align-items: stretch;
  border-bottom: 1px solid var(--border-hairline);
}

.fin-summary-focus {
  padding: 20px 18px 20px 6px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-right: 1px solid var(--border-hairline);
}

.fin-summary-focus-kicker {
  font-size: 13px;
  font-weight: 500;
  color: rgb(82, 84, 99);
}

.fin-summary-focus-value {
  font-size: clamp(1.75rem, 1.32rem + 0.7vw, 2.3rem);
  font-weight: 420;
  letter-spacing: -0.055em;
  line-height: 1.02;
  color: var(--text-ink);
}

.fin-summary-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

.fin-summary-stat {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}

.fin-summary-stat-dot {
  width: 4px;
  height: 22px;
  border-radius: 999px;
  display: inline-block;
}

.fin-summary-stat-dot-liquida { background: #176748; }
.fin-summary-stat-dot-total { background: #E5367A; }
.fin-summary-stat-dot-pendente { background: #D17A1C; }
.fin-summary-stat-dot-despesa { background: #A54C61; }

.fin-summary-stat-label {
  font-size: 13px;
  color: rgb(82, 84, 99);
}

.fin-summary-stat-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-ink);
  text-align: right;
}

.fin-summary-panels {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 0;
}

.fin-summary-panel {
  padding: 14px 16px 16px;
}

.fin-summary-panel + .fin-summary-panel {
  border-left: 1px solid var(--border-hairline);
}

.fin-summary-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.fin-summary-panel-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-meta);
}

.fin-summary-legend {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.fin-summary-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: rgba(42, 44, 63, 0.88);
}

.fin-summary-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.fin-summary-dot-recebido { background: #16825D; }
.fin-summary-dot-pendente { background: #D17A1C; }
.fin-summary-dot-despesa { background: #A54C61; }

.fin-line-chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fin-line-chart svg {
  width: 100%;
  height: 176px;
  display: block;
}

.fin-line-chart-guide,
.fin-line-chart-point {
  opacity: 0;
  transition: opacity 140ms ease;
}

.fin-line-chart-guide.is-active,
.fin-line-chart-point.is-active {
  opacity: 1;
}

.fin-line-chart-hotspot {
  cursor: crosshair;
}

.fin-line-chart-axis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: rgba(112, 112, 125, 0.9);
}

.fin-breakdown-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fin-breakdown-focus {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.fin-breakdown-focus-label {
  font-size: 13px;
  font-weight: 500;
  color: rgb(82, 84, 99);
}

.fin-breakdown-focus-value {
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.05em;
  font-weight: 430;
  color: var(--text-ink);
}

.fin-breakdown-focus-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: rgba(82, 84, 99, 0.9);
}

.fin-breakdown-chart {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
  min-height: 138px;
}

.fin-breakdown-bar-item {
  border: none;
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: rgba(82, 84, 99, 0.94);
}

.fin-breakdown-bar-shell {
  width: 100%;
  height: 110px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.fin-breakdown-bar-fill {
  width: 24px;
  height: var(--fin-break-height);
  border-radius: 1px 1px 0 0;
  background: linear-gradient(180deg, rgba(23, 103, 72, 0.14), rgba(23, 103, 72, 0.5));
  border-top: 3px solid #176748;
  transition: transform 140ms ease, opacity 140ms ease;
}

.fin-breakdown-bar-item.is-active .fin-breakdown-bar-fill,
.fin-breakdown-bar-item:hover .fin-breakdown-bar-fill {
  transform: translateY(-2px);
  opacity: 1;
}

.fin-breakdown-bar-caption {
  font-size: 12px;
  white-space: nowrap;
}

.fin-breakdown-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fin-breakdown-copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.fin-breakdown-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fin-breakdown-value {
  font-size: 13px;
  color: rgba(42, 44, 63, 0.76);
  white-space: nowrap;
}

.fin-breakdown-bar {
  display: block;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(112, 115, 147, 0.08);
  overflow: hidden;
}

.fin-breakdown-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.fin-breakdown-fill-receita {
  background: linear-gradient(90deg, rgba(22, 130, 93, 0.82), rgba(22, 130, 93, 0.28));
}

.fin-breakdown-fill-despesa {
  background: linear-gradient(90deg, rgba(165, 76, 97, 0.82), rgba(165, 76, 97, 0.28));
}

.fin-summary-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
}

.fin-summary-empty-inline {
  padding: 8px 0 0;
  text-align: left;
}

.fin-summary-loading .fin-summary-metric {
  min-height: 102px;
  border-radius: 22px;
}

.fin-summary-loading .fin-summary-toggle {
  width: 56px;
  height: 56px;
  border-radius: 999px;
}

.fin-list {
  min-width: 0;
  background: #FFFFFF;
}

/* .fin-table — apenas extras especificos. Estilo base (width, font, padding,
   borders, hover, selected) compartilhado em .ws-table/.pac-table/.fin-table
   no bloco principal de tabelas (~linha 2298). */
.fin-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.fin-td-nome {
  font-weight: 500;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Ícone discreto de despesa fixa (recorrência), ao lado da descrição */
.fin-fixa-icon {
  color: var(--text-meta);
  opacity: 0.62;
  vertical-align: -1px;
  flex-shrink: 0;
}
/* Sub-linha (data/serviço ou categoria/data): só no mobile */
.fin-td-sub--mobile { display: none; }
.pes-cell-sub--mobile { display: none; }

.fin-td-date,
.fin-td-serv {
  color: rgba(112, 112, 125, 0.92);
}

.fin-td-date {
  white-space: nowrap;
}

.fin-td-valor {
  font-weight: 520;
  white-space: nowrap;
  letter-spacing: -0.02em;
}

.fin-valor-despesa {
  color: #A54C61;
}

.fin-td-action {
  width: 92px;
  text-align: right;
}

.fin-action-group {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.fin-edit-icon {
  opacity: 0.28;
  transition: opacity 150ms ease;
}

.fin-tr-click:hover .fin-edit-icon,
.fin-tr-selected .fin-edit-icon {
  opacity: 0.92;
}

.btn-icon.fin-action-btn {
  color: rgba(112, 112, 125, 0.86);
  opacity: 0.54;
  transition: opacity 150ms ease, color 150ms ease, background 150ms ease;
}

.fin-tr-click:hover .btn-icon.fin-action-btn,
.fin-tr-selected .btn-icon.fin-action-btn {
  opacity: 1;
}

.btn-icon.fin-action-btn:hover {
  color: var(--accent);
  background: rgba(82, 102, 235, 0.06);
  opacity: 1;
}

.fin-status-wrap-inline {
  position: relative;
  display: inline-flex;
}

.fin-status-btn {
  cursor: pointer;
  transition: filter 140ms ease, transform 140ms ease;
}

.fin-status-btn:hover {
  filter: brightness(0.98);
}

.fin-status-pop {
  top: calc(100% + 6px);
  left: 0;
  min-width: 132px;
}

.fin-status-pop .action-pop-item {
  gap: 10px;
}

.fin-status-pop-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: 0 0 8px;
}

.fin-status-pop-dot-pendente {
  background: var(--s-pendente);
}

.fin-status-pop-dot-paga {
  background: var(--s-paga);
}

.fin-status-pop-dot-cancelada {
  background: var(--s-cancelada);
}

.fin-nf-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  background: var(--s-atendida-bg);
  color: var(--s-atendida);
  border-color: var(--s-atendida-border);
}

.fin-nf-enviada {
  background: var(--s-confirmada-bg);
  color: var(--s-confirmada);
  border-color: var(--s-paga-border);
}

.fin-pagination-wrap {
  padding: 18px 0 24px;
  border-top: 1px solid rgba(112, 115, 147, 0.08);
  background: #FFFFFF;
}

.fin-drawer {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: min(420px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1002;
  transform: translateX(110%);
  transition: transform 180ms ease, opacity 160ms ease;
}

.fin-shell.fin-shell-has-drawer .fin-drawer {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.fin-drawer-shell,
.fin-drawer-empty {
  background: #FFFFFF;
  border: 1px solid rgba(112, 115, 147, 0.14);
  border-radius: 28px;
  box-shadow: 0 0 2px rgba(175, 178, 206, 0.44), 0 10px 24px rgba(11, 15, 32, 0.05);
}

.fin-drawer-empty {
  min-height: 260px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  color: var(--text-muted);
}

.fin-drawer-empty-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(112, 112, 125, 0.86);
}

.fin-drawer-shell {
  padding: 26px 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  height: auto;
  max-height: calc(100vh - 32px);
  overflow: auto;
}
#fin-drawer .fin-drawer-shell {
  --drawer-pill-margin-y: 0px;
  --drawer-pill-margin-x: 0px;
  /* 22px alinha o header com o drawer Pessoal→Financeiro (mesma família
     fin-drawer-shell, mas via .drawer-panel) e com os de Paciente (20px).
     Antes era 30px — o único drawer da categoria que destoava. */
  --drawer-head-pad-x: 22px;
  /* Espelha o Pessoal→Financeiro no eixo Y: o shell base traz padding-top 26px
     e o header não o cancela (só margin-inline), então o respiro acima do
     "COBRANÇA" somava 26 + pad-y. Zera o topo do shell e fixa o pad-y do header
     em 22px — mesmo respiro dos demais drawers da categoria. */
  padding-top: 0;
  --drawer-head-pad-y: 22px;
}
.fin-drawer-shell > .drawer-head {
  /* Header financeiro usa a largura cheia do card; o padding próprio
     alinha os botões com o respiro visual do topo. */
  margin-inline: -26px;
  padding: var(--drawer-head-pad-y) var(--drawer-head-pad-x) 22px;
}
.fin-drawer-shell > .fin-drawer-footer-actions {
  /* Mesmo padrão do header: cancela o padding do shell pra o footer
     ficar colado nas bordas, igual ao padrão do drawer de Pacientes. */
  margin-inline: -26px;
  margin-bottom: -30px;
  margin-top: auto;
}

.fin-drawer-kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(112, 112, 125, 0.8);
  margin-bottom: 8px;
}

.fin-drawer-title {
  margin: 0;
  font-size: 30px;
  line-height: 1.08;
  font-weight: 420;
  letter-spacing: -0.04em;
  color: #222539;
}


.fin-drawer-close:hover {
  background: rgba(82, 102, 235, 0.04);
}

.fin-drawer-hero {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fin-drawer-amount {
  font-size: clamp(2rem, 1.6rem + 1vw, 3rem);
  line-height: 1;
  font-weight: 430;
  letter-spacing: -0.055em;
  color: #222539;
}

.fin-drawer-amount-despesa {
  color: #A54C61;
}

.fin-drawer-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.fin-drawer-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(112, 115, 147, 0.14);
  background: rgba(246, 247, 251, 0.9);
  font-size: 12px;
  font-weight: 500;
  color: rgba(42, 44, 63, 0.82);
}

.fin-drawer-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.fin-drawer-actions-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}


.fin-drawer-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(112, 115, 147, 0.14);
  background: #FFFFFF;
  color: rgba(42, 44, 63, 0.82);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.fin-drawer-icon-btn:hover {
  background: rgba(82, 102, 235, 0.05);
  border-color: rgba(82, 102, 235, 0.2);
  color: var(--accent);
}

.fin-drawer-icon-btn-primary {
  background: #1F325A;
  border-color: #1F325A;
  color: #FFFFFF;
}

.fin-drawer-icon-btn-primary:hover {
  background: #263D6D;
  border-color: #263D6D;
  color: #FFFFFF;
}

.fin-drawer-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(112, 115, 147, 0.12);
  padding-top: 8px;
}

.fin-drawer-section-form {
  gap: 14px;
  padding-top: 16px;
}

.fin-drawer-meta-note {
  font-size: 12px;
  color: rgba(112, 112, 125, 0.9);
}

.fin-drawer-field {
  gap: 6px;
}

.fin-drawer-field-label {
  color: var(--text-meta);
}

.fin-drawer-field input,
.fin-drawer-field select {
  min-height: 42px;
  border-radius: 14px;
  border-color: rgba(112, 115, 147, 0.16);
  background: #FFFFFF;
  box-shadow: none;
}

.fin-drawer-static {
  min-height: 42px;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid rgba(112, 115, 147, 0.14);
  background: rgba(246, 247, 251, 0.72);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-ink);
}

.fin-drawer-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(112, 115, 147, 0.08);
}

.fin-drawer-row:last-child {
  border-bottom: none;
}

.fin-drawer-row-label {
  font-size: 13px;
  color: var(--text-meta);
}

.fin-drawer-row-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-ink);
  text-align: right;
}

.ws-drawer-backdrop,
.pac-detail-backdrop,
.fin-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 32, 0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.ws-drawer-backdrop-visible,
.pac-detail-backdrop-visible,
.fin-drawer-backdrop-visible {
  opacity: 1;
  pointer-events: auto;
  z-index: 1001;
}

@media (max-width: 1180px) {
  .fin-toolbar {
    gap: 12px;
  }

  .fin-toolbar-top,
  .fin-toolbar-bottom {
    align-items: stretch;
  }

  .fin-summary-expanded-layout {
    grid-template-columns: 1fr;
  }

  .fin-summary-focus,
  .fin-summary-panel {
    border-right: none;
    border-left: none;
  }

  .fin-summary-expanded-layout > * + * {
    border-top: 1px solid var(--border-hairline);
  }
}

@media (max-width: 768px) {
  .fin-summary-strip {
    grid-template-columns: 1fr;
    padding: 12px 12px 0;
  }

  /* KPIs continuam em 3 colunas (Faturado | Pendente | Receita líquida)
     mas mais compactos. Mantém visão de strip horizontal no mobile. */
  .fin-summary-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fin-kpi {
    padding: 10px 8px;
  }
  .fin-kpi-label {
    font-size: 10px;
  }
  .fin-kpi-valor {
    font-size: 14px;
  }
  .fin-kpi-sub {
    display: none;
  }

  .fin-kpi + .fin-kpi {
    border-left: 1px solid var(--border-hairline);
    border-top: none;
  }

  .fin-summary-toggle {
    justify-self: flex-end;
    margin: 0 4px 12px 0;
  }

  .fin-summary-panels {
    grid-template-columns: 1fr;
  }

  .fin-summary-expanded-head {
    padding: 8px 12px 4px;
  }

  .fin-summary-expanded-layout {
    grid-template-columns: 1fr;
  }

  .fin-summary-focus {
    padding: 18px 16px;
    border-right: none;
  }

  .fin-summary-panel + .fin-summary-panel {
    border-left: none;
    border-top: 1px solid var(--border-hairline);
  }

  .fin-search-wrap {
    min-width: min(100%, 240px);
    width: 100%;
    max-width: none;
  }

  .fin-status-pills {
    width: 100%;
  }

  .fin-btn-new {
    width: 100%;
    justify-content: center;
    margin-left: 0;
  }

  .fin-table thead th,
  .fin-table td,
  .fin-pagination-wrap {
    padding-left: 18px;
    padding-right: 18px;
  }

  /* Fluxo de caixa: mesma redução lateral das tabelas irmãs (28px come a
     largura útil em 375px do Chrome Android). */
  .fluxo-dia-head { padding-left: 18px; padding-right: 18px; }
  .fluxo-row { padding-left: 18px; padding-right: 18px; }

  .fin-td-serv {
    display: none;
  }

  .fin-drawer {
    right: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }

  .fin-breakdown-chart {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fin-drawer-actions {
    grid-template-columns: 1fr;
  }

  .fin-drawer-actions-icons {
    display: flex;
    flex-wrap: wrap;
  }
}

/* ============================================================
   Configurações
   ============================================================ */

.cfg-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 1480px;
  margin: 0 auto;
  padding-bottom: 40px;
}

.view--configuracoes,
.view--medico-configuracoes {
  background: var(--bg-card);
}

.cfg-toolbar {
  gap: 0;
}

.cfg-toolbar-row {
  justify-content: space-between;
}

.cfg-tabs-scroll {
  width: 100%;
  border-bottom: 1px solid rgba(27,43,75,0.08);
}

.cfg-tabs {
  width: 100%;
  flex-wrap: wrap;
}

.cfg-tab {
  white-space: nowrap;
}

.cfg-tabs-scroll .tab-active::after {
  bottom: -1px;
}

.cfg-body { flex: 1; min-height: 0; }
.cfg-loading { padding: var(--space-10); text-align: center; color: var(--text-muted); font-size: var(--size-sm); }

/* ============================================================
   Configurações — sidebar interna (4 grupos colapsáveis)
   Substitui as 9 abas horizontais. Mantém .cfg-tab antigo
   intacto para não quebrar medico-configuracoes que ainda usa.
   ============================================================ */

/* #view normalmente tem padding 20px 64px 32px (shell global). Em
   Configurações da Bruna a sidebar interna precisa sangrar — zera o
   padding horizontal e deixa 24px à esquerda como respiro. Padding-right
   interno mora no .cfg-content pra não colar tabela na borda direita.
   Médico usa .view--medico-configuracoes (classe separada) e herda o
   padding padrão do .view sem sobrescrita. */
.view.view--configuracoes {
  padding-left: 24px;
  padding-right: 0;
}

.cfg-wrap--sidebar {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 0;
  max-width: none;
  margin: 0;
  min-height: calc(100vh - 88px);
  padding-bottom: 0;
}

.cfg-sidebar {
  border-right: 1px solid var(--home-line);
  padding: 16px 8px 24px 0;
  background: transparent;
  align-self: stretch;
}

.cfg-sidebar-group + .cfg-sidebar-group {
  margin-top: 2px;
}

.cfg-sidebar-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 12px;
  background: transparent;
  border: 0;
  color: var(--home-text-muted);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 8px;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}

.cfg-sidebar-group-header:hover {
  background: var(--sidebar-item-hover);
  color: var(--home-text);
}

.cfg-sidebar-group-header:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.cfg-sidebar-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--home-text-soft);
  transition: transform 0.18s ease;
}

.cfg-sidebar-chevron svg {
  width: 12px;
  height: 12px;
}

.cfg-sidebar-group.is-open .cfg-sidebar-chevron {
  transform: rotate(90deg);
  color: var(--home-text);
}

.cfg-sidebar-group-label {
  flex: 1;
}

.cfg-sidebar-group-items {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.22s ease;
}

.cfg-sidebar-group.is-open .cfg-sidebar-group-items {
  /* suficiente pros 4 itens de Sistema (4 × ~32px + padding) */
  max-height: 240px;
}

.cfg-sidebar-item {
  display: block;
  width: 100%;
  padding: 10px 12px 10px 28px;
  background: transparent;
  border: 0;
  color: var(--home-text);
  text-align: left;
  font-size: var(--size-sm);
  font-weight: var(--weight-regular);
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.12s ease, color 0.12s ease;
}

.cfg-sidebar-item:hover {
  background: var(--sidebar-item-hover);
}

.cfg-sidebar-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.cfg-sidebar-item.is-active {
  background: var(--sidebar-item-active);
  color: var(--home-text-strong);
  font-weight: var(--weight-semibold);
}

.cfg-content {
  min-width: 0;
  overflow-x: auto;
  padding: 24px 32px;
}

/* Conteúdo de formulários não esparrama em viewports gigantes. Tabelas
   ignoram (são por natureza largas). */
.cfg-content .cfg-section-wrap {
  max-width: 1100px;
}

/* Tabelas dentro da Configurações precisam rolar quando a sidebar
   consome largura. Sobrescreve overflow-x do .ws-table-shell antigo
   só neste escopo. */
.cfg-content .ws-table-shell {
  overflow-x: auto;
}

.cfg-content-mobile-header {
  display: none;
}

/* ============================================================
   Mobile (≤767px) — full-screen list → tela do item
   ============================================================ */

@media (max-width: 767px) {
  .view.view--configuracoes {
    padding-left: 0;
    padding-right: 0;
  }

  .cfg-wrap--sidebar {
    grid-template-columns: 1fr;
    min-height: calc(100vh - 72px);
  }

  .cfg-sidebar {
    border-right: 0;
    padding: 12px 12px env(safe-area-inset-bottom, 16px);
  }

  .cfg-content {
    display: none;
    padding: 0;
  }

  /* Padding interno do conteúdo da aba mora no #cfg-body, NÃO no
     .cfg-content — senão o header sticky (.cfg-content-mobile-header)
     ficaria indentado e o sticky cobriria só parte da largura. */
  #cfg-body {
    padding: 12px 16px env(safe-area-inset-bottom, 16px);
  }

  .cfg-wrap--sidebar.is-showing-content .cfg-sidebar {
    display: none;
  }

  .cfg-wrap--sidebar.is-showing-content .cfg-content {
    display: flex;
    flex-direction: column;
  }

  .cfg-content-mobile-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--home-line);
    background: var(--home-surface-strong);
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .cfg-content-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--home-text);
    border-radius: 8px;
  }

  .cfg-content-back:hover {
    background: var(--sidebar-item-hover);
  }

  .cfg-content-mobile-title {
    font-size: var(--size-sm);
    font-weight: var(--weight-semibold);
    color: var(--home-text);
  }
}

/* Section wrap */
.cfg-section-wrap { display: flex; flex-direction: column; gap: var(--space-6); }
.cfg-section { display: flex; flex-direction: column; gap: var(--space-3); }
.cfg-section-title { font-size: var(--size-sm); font-weight: var(--weight-semibold); color: var(--text); letter-spacing: -0.01em; }
.cfg-section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.cfg-section-h2 { font-size: 17px; font-weight: var(--weight-semibold); color: var(--home-text-strong); }
.cfg-section-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.cfg-empty-text { font-size: var(--size-sm); color: var(--text-muted); padding: var(--space-3) 0; }
.cfg-footer-actions {
  padding: var(--space-3) 16px var(--space-4);
  border-top: 1px solid var(--home-line-faint);
  display: flex;
  justify-content: flex-end;
}
.cfg-actions-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.cfg-table-shell {
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  overflow: auto;
}
.cfg-pane-card {
  background: var(--bg-card);
  border: 1px solid rgba(52,44,36,0.05);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  gap: var(--space-4);
}
/* Toggle switch (ui-switch) */
.ui-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
}
.ui-switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.ui-switch-track {
  position: relative;
  width: 48px;
  height: 26px;
  border-radius: 13px;
  background: rgba(113,123,155,0.18);
  transition: background 200ms;
  flex-shrink: 0;
}
.ui-switch input:checked ~ .ui-switch-track {
  background: var(--accent);
}
.ui-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0,0,0,0.20);
  transition: transform 200ms;
}
.ui-switch input:checked ~ .ui-switch-track .ui-switch-thumb {
  transform: translateX(22px);
}
.ui-switch-label {
  font-size: 14px;
  color: var(--home-text);
}

/* Variante alinhada ao grid de form (texto à esquerda, switch à direita,
   altura igual ao input padrão de field) */
.field-inline-switch {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.ui-switch-aligned {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  padding: 0 var(--space-3);
}

.ui-switch-text {
  font-size: var(--size-sm);
  color: var(--text-ink);
  font-weight: var(--weight-medium);
}

/* ============================================================
   Editor de disponibilidade do médico (faixas por dia)
   Usado em: Configurações > Médicos (modal e drawer) + Onboarding
   ============================================================ */

.disp-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.disp-editor-day {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: var(--space-2);
  align-items: start;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-soft);
}

.disp-editor-day:first-child {
  border-top: none;
  padding-top: 0;
}

.disp-editor-day-label {
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  color: var(--text-ink);
  padding-top: 8px;
}

.disp-editor-day-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

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

.disp-editor-faixas:empty { display: none; }

.disp-editor-faixa {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.disp-editor-faixa input[type="time"] {
  width: 92px;
  height: 32px;
  padding: 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--size-sm);
}

.disp-editor-faixa input[type="time"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.disp-editor-as {
  font-size: var(--size-sm);
  color: var(--text-muted);
}

.disp-editor-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--text-xmuted);
  font-size: 18px;
  line-height: 1;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.disp-editor-remove:hover {
  background: rgba(220, 38, 38, 0.08);
  color: #DC2626;
}

.disp-editor-add {
  align-self: flex-start;
  padding: 6px var(--space-3);
  border: 1px dashed var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--size-sm);
  font-family: var(--font);
  cursor: pointer;
}

.disp-editor-add:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}

/* Seção colapsável (usada no modal de novo médico) */
.cfg-section-collapsible {
  margin-top: var(--space-5);
  border-top: 1px solid var(--border-soft);
  padding-top: var(--space-4);
}

.cfg-section-collapsible > summary {
  cursor: pointer;
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-ink);
  padding: 0;
  list-style: none;
}

.cfg-section-collapsible > summary::-webkit-details-marker { display: none; }

.cfg-section-collapsible > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: var(--space-2);
  color: var(--text-muted);
  transition: transform 150ms;
  font-size: var(--size-xs);
}

.cfg-section-collapsible[open] > summary::before {
  transform: rotate(90deg);
}

.cfg-section-hint {
  font-size: var(--size-xs);
  font-weight: var(--weight-regular);
  color: var(--text-muted);
  margin-left: var(--space-2);
}

.cfg-section-body {
  margin-top: var(--space-3);
}

/* Slots disponíveis na agenda — cor do médico com alpha 6% (mais transparente
   que o avatar 9.4%, deixando linhas da grade visíveis). Cor real é setada
   inline no markup pra não acoplar ao DOCTOR_COLORS no CSS. */
.ag-slot--disponivel {
  /* fallback caso style inline falhe */
  background: rgba(44, 74, 124, 0.06);
}

/* Relatórios — bloco neutro (substitui .cfg-wa-card com shadow de KPI) */
.cfg-rel-bloco {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  overflow: hidden;
  margin-top: var(--space-5);
}
.cfg-rel-bloco:first-child { margin-top: 0; }
.cfg-rel-bloco-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-soft);
  gap: var(--space-3);
}
.cfg-rel-bloco-header--simple {
  justify-content: flex-start;
}
.cfg-rel-auto-status {
  font-size: 12px;
  margin-top: 3px;
}
.cfg-rel-auto-status--on  { color: var(--s-confirmada); }
.cfg-rel-auto-status--off { color: var(--text-muted); }
.cfg-rel-auto-status--warn { color: var(--warning); }

/* Relatórios — corpo do card */
.cfg-rel-dia-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
}
.cfg-rel-auto-head {
  display: flex;
  align-items: center;
  gap: 4px;
}
.cfg-divider--spaced {
  margin: 8px 0;
}
.cfg-rel-dia-wrap {
  width: 44px;
  flex-shrink: 0;
  overflow: hidden;
}
.cfg-rel-dia-input {
  width: 100%;
  padding: 3px 6px;
  font-size: 13px;
  font-family: var(--font);
  color: var(--home-text-strong);
  background: var(--home-hover);
  border: 1px solid var(--home-line-soft);
  border-radius: 6px;
  text-align: center;
  box-sizing: border-box;
}
.cfg-rel-dia-input:focus { outline: none; border-color: var(--home-line); background: var(--home-surface); }
.cfg-rel-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 14px 16px;
}
.cfg-rel-checks-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.cfg-rel-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-3);
}
/* Card do médico (Configurações › Comunicações): só Data inicial e Data final
   — não há seletor de médico, ele gera o relatório dele. Sem isto, os dois
   campos ficariam em 2/3 da largura com um vão à direita. */
.cfg-rel-form--2col {
  grid-template-columns: 1fr 1fr;
}
.cfg-rel-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.cfg-rel-pills .filter-pill-active {
  background: var(--accent-tint-2);
  border-color: var(--accent-tint-3);
}
/* Pill estático (envio automático — não clicável) */
.cfg-rel-pill {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: var(--weight-medium);
  color: var(--home-text);
  background: var(--home-hover);
  border: 1px solid var(--home-line-soft);
}

/* Toggle sm para linhas de tabela */
.ui-switch-sm .ui-switch-track {
  width: 36px;
  height: 20px;
  border-radius: 10px;
}
.ui-switch-sm .ui-switch-thumb {
  width: 14px;
  height: 14px;
  top: 3px;
  left: 3px;
}
.ui-switch-sm input:checked ~ .ui-switch-track .ui-switch-thumb {
  transform: translateX(16px);
}

/* Médicos layout */
.cfg-med-head {
  align-items: center;
}

.cfg-med-search-wrap {
  min-width: min(100%, 300px);
  max-width: 620px;
}

.cfg-med-table-shell {
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}

/* Agrupa filter-pills + tabela/lista com gap menor que o do .cfg-section-wrap,
   pra linha de filtros ficar visualmente ligada ao conteúdo que filtra. */
.cfg-list-group { display: flex; flex-direction: column; gap: var(--space-3); }
.cfg-list-group .cfg-conv-list { margin-top: 0; }

/* ——— Convênios ——— */
.cfg-conv-list,
.cfg-rp-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }

.cfg-conv-card,
.cfg-rp-card {
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-4);
  align-items: center;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
.cfg-conv-card:hover,
.cfg-rp-card:hover { border-color: var(--border); }
.cfg-conv-card--inativo { opacity: 0.55; }

.cfg-conv-card-nome,
.cfg-rp-card-nome { color: var(--text-ink); font-weight: var(--weight-medium); }
.cfg-conv-card-sub,
.cfg-rp-card-sub  { color: var(--text-muted); font-size: var(--size-xs); margin-top: 2px; }

.cfg-conv-card-stats {
  display: flex;
  gap: var(--space-5);
  color: var(--text-muted);
  font-size: var(--size-xs);
  text-align: right;
}
.cfg-conv-stat strong {
  display: block;
  color: var(--text-ink);
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
}

.cfg-conv-empty {
  text-align: center;
  padding: var(--space-8);
  background: var(--bg-card);
  border: 1px dashed var(--border-hairline);
  border-radius: var(--radius-lg);
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

/* Tabs dentro do drawer de convênio */
.cfg-conv-tabs,
.cfg-rp-tabs {
  display: flex;
  gap: 28px;
  padding: 0 var(--drawer-head-pad-x);
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-card);
}

/* Footer unificado: destructive à esquerda, ações à direita */
.cfg-conv-footer,
.cfg-rp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--drawer-footer-pad-top) var(--drawer-footer-pad-x) var(--drawer-footer-pad-bot);
  border-top: 1px solid var(--border-soft);
}
.cfg-conv-footer-destr,
.cfg-rp-footer-destr {
  background: transparent;
  border: 0;
  font-size: var(--drawer-destructive-font);
  font-weight: var(--drawer-destructive-weight);
  color: var(--text-ink);
  padding: var(--drawer-destructive-pad-y) var(--drawer-destructive-pad-x);
  border-radius: var(--drawer-destructive-radius);
  cursor: pointer;
  transition: background var(--duration-pop) ease;
}
.cfg-conv-footer-destr:hover { background: var(--drawer-destructive-bg-hover); }
.cfg-conv-footer-actions,
.cfg-rp-footer-actions { display: flex; gap: var(--space-2); }

/* Planos */
.cfg-conv-planos-header {
  display: grid;
  grid-template-columns: 1fr 140px 44px;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--size-xs);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border-hairline);
}
.cfg-conv-plano-row,
.cfg-rp-row {
  display: grid;
  grid-template-columns: 1fr 140px 44px;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-hairline);
  align-items: center;
}

/* Variáveis do template */
.cfg-conv-vars {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.cfg-conv-var-chip {
  padding: 3px 10px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  font-size: var(--size-xs);
  font-family: 'SF Mono', 'Menlo', monospace;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 120ms, color 120ms;
}
.cfg-conv-var-chip:hover { border-color: var(--accent); color: var(--accent); }

/* Textarea do template */
.cfg-conv-textarea {
  width: 100%;
  min-height: 180px;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-hairline);
  background: var(--bg-card);
  font-size: var(--size-sm);
  font-family: 'SF Mono', 'Menlo', monospace;
  line-height: 1.6;
  color: var(--text-ink);
  resize: vertical;
  box-sizing: border-box;
}

.cfg-med-table td {
  vertical-align: middle;
}

.cfg-med-row {
  cursor: pointer;
}

.cfg-med-avatar {
  background: var(--avatar-soft-bg);
  color: var(--avatar-soft-fg);
}

.cfg-med-drawer {
  opacity: 0;
  pointer-events: none;
  transform: translateX(110%);
  transition: transform 180ms ease, opacity 160ms ease;
}

.cfg-med-drawer.cfg-med-drawer-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}


.cfg-med-drawer-empty {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  padding: var(--space-6);
}

.cfg-add-btn {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--size-sm);
  cursor: pointer;
  transition: all 150ms;
  margin-top: auto;
}
.cfg-add-btn:hover { border-color: var(--accent); color: var(--accent); }
.cfg-add-btn-inline { margin-top: 0; }

/* Serviços table */
.cfg-servicos-table { width: 100%; border-collapse: collapse; font-size: var(--size-sm); table-layout: fixed; }
.cfg-servicos-table th { padding: var(--space-2); text-align: left; font-size: 11px; font-weight: var(--weight-medium); color: var(--text-muted); letter-spacing: 0.01em; border-bottom: 1px solid var(--border); }
.cfg-servicos-table td { padding: var(--space-2); border-bottom: 1px solid var(--border); vertical-align: middle; }
.cfg-servicos-table input, .cfg-servicos-table select { width: 100%; box-sizing: border-box; }
.cfg-servicos-table colgroup col:nth-child(1) { width: auto; }
.cfg-servicos-table colgroup col:nth-child(2) { width: 110px; }
.cfg-servicos-table colgroup col:nth-child(3) { width: 100px; }
.cfg-servicos-table colgroup col:nth-child(4) { width: 36px; }
/* Cadastro do médico (views/medicos/cadastro): um card por seção, empilhados.
   Serve a aba Cadastro da ficha e a drawer do lápis da lista. */
.med-cad-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.drawer-body .med-cad-form { padding-top: var(--space-4); }
.med-cad-card-title { margin: 0; }
.med-cad-card .cfg-wa-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.cfg-srv-nome  { min-width: 160px; }
.cfg-srv-valor { text-align: right; }
.cfg-srv-del { color: var(--text-xmuted); }
.cfg-srv-del:hover { color: var(--s-cancelada); }

/* Aba Cadastro da ficha do médico: onboarding, banner, formulário e respostas. */
.med-cad-aba {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.med-cad-aba > [data-slot]:empty { display: none; }
.med-cad-aba .med-revisao-banner { margin: 0; }
/* Banner com ação à direita (Revisar); a regra base é frase corrida sem flex. */
.med-revisao-banner--acao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.med-cad-respostas {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.med-cad-respostas .med-onb-respostas-head { flex-wrap: wrap; }
/* Demo: o fieldset desabilita tudo e não pode desenhar moldura. */
.med-cad-somente-leitura {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* Banner de proposta pendente de alteração do médico */
/* Frase corrida, NÃO flex. Era `display:flex; justify-content:space-between` com
   três nós soltos (texto + <strong> da data + texto): o space-between empurrava
   cada um pra um canto e a data ficava ilhada no meio da faixa, com buracos dos
   dois lados. Nenhum uso do banner tem ação à direita — é só texto. */
.med-revisao-banner {
  background: var(--warning-bg);
  border: 1px solid rgba(154,108,45,0.25);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin: 0 0 12px;
  font-size: var(--size-sm);
  color: var(--warning);
  line-height: 1.5;
}

/* Configurações do médico: vigente e proposta são estados visuais distintos. */
.med-proposta-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  padding: 16px;
  margin-bottom: 12px;
}
/* Status + ação de descarte agrupados à direita do head (o head é flex
   space-between; agrupar evita que o 3º nó esparrame). O botão é um ícone
   discreto de lixeira: cinza em repouso, vermelho no hover. */
.med-proposta-head-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.med-proposta-cancelar {
  width: 28px;
  height: 28px;
  color: var(--text-muted);
}
.med-proposta-cancelar:hover {
  color: var(--s-cancelada);
  background: rgba(0,0,0,0.05);
}
.med-proposta-card--vigente { border-left: 3px solid var(--s-paga); }
.med-proposta-card--pendente {
  border-color: rgba(154,108,45,0.3);
  background: var(--warning-bg);
}
.med-proposta-card--rejeitada {
  border-color: rgba(220,38,38,0.22);
  background: rgba(220,38,38,0.04);
}
.med-proposta-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.med-proposta-card-head h3 {
  margin: 0;
  color: var(--text-ink);
  font-size: 15px;
  font-weight: var(--weight-semibold);
}
.med-proposta-card-head p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 12px;
}
.med-proposta-status {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: var(--weight-semibold);
}
.med-proposta-status--vigente { color: var(--s-paga); background: var(--s-paga-bg); }
.med-proposta-status--pendente { color: var(--warning); background: rgba(154,108,45,0.12); }
.med-proposta-status--rejeitada { color: var(--error); background: rgba(220,38,38,0.09); }
.med-proposta-current-grid,
.med-proposta-diffs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
  margin: 14px 0 0;
}
.med-proposta-current-grid > div,
.med-proposta-diff-row {
  min-width: 0;
}
.med-proposta-current-grid dt,
.med-proposta-diff-row dt {
  color: var(--text-muted);
  font-size: 11px;
}
.med-proposta-current-grid dd {
  margin: 2px 0 0;
  color: var(--text-ink);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.med-proposta-diff-row dd {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.med-proposta-diff-row strong { color: var(--text-ink); }
.med-proposta-from { text-decoration: line-through; text-decoration-thickness: 1px; }
.med-proposta-no-diff,
.med-proposta-rejection {
  margin: 14px 0 0;
  color: var(--text-cool);
  font-size: 13px;
}
.med-proposta-rejection strong { color: var(--text-ink); }

@media (max-width: 600px) {
  .med-proposta-card-head { gap: 10px; }
  .med-proposta-current-grid,
  .med-proposta-diffs { grid-template-columns: 1fr; }
}

/* Badge LGPD na coluna Termos da tabela de médicos */
.cfg-med-lgpd {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: var(--weight-medium);
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.cfg-med-lgpd--ok {
  background: var(--s-confirmada-bg);
  color: var(--s-confirmada);
}
.cfg-med-lgpd--pendente {
  background: var(--warning-bg);
  color: var(--warning);
}

/* Dias de atendimento */
.cfg-dias-wrap {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.cfg-dia-pill {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
}
.cfg-dia-active { background: var(--surface-tint); border-color: rgba(123,108,168,0.20); color: var(--accent); box-shadow: none; }

/* Acesso */
.cfg-acesso-actions { display: flex; gap: var(--space-2); flex-wrap: nowrap; justify-content: flex-end; }
/* A coluna de ações encolhe ao conteúdo (width:1% é a técnica de "shrink-to-fit" em
   table-layout auto) e não quebra: com a coluna "Acesso" a mais, os botões empilhavam
   em duas linhas e inflavam a altura da linha inteira. */
.cfg-acesso-table td:last-child { width: 1%; white-space: nowrap; }
/* E-mail cede a largura que a coluna "Acesso" passou a ocupar (era a célula mais larga
   da tabela). Trunca com reticências; o valor inteiro fica no title. */
.cfg-acesso-td-email {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cfg-access-head { align-items: center; }
.cfg-access-search-wrap { min-width: min(100%, 300px); max-width: 620px; }

/* WhatsApp / NF */
.cfg-wa-vars {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--home-line-faint);
  background: var(--bg-subtle);
}
.cfg-vars-label { font-size: 11px; font-weight: var(--weight-medium); color: var(--home-text-muted); letter-spacing: 0.01em; }
.cfg-var-pill {
  min-height: 26px;
}
.cfg-var-pill--off {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.cfg-wa-templates { display: flex; flex-direction: column; gap: var(--space-4); }
.cfg-rel-table-scroll { max-height: 420px; overflow-y: auto; }
.cfg-rel-body--scroll { max-height: 560px; overflow-y: auto; }
.cfg-wa-card {
  background: linear-gradient(180deg, var(--home-surface-strong) 0%, var(--home-surface) 100%);
  border: 1px solid var(--home-line-soft);
  border-radius: 16px;
  box-shadow: var(--home-shadow-card);
  overflow: hidden;
}
.cfg-wa-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--home-line-faint);
}
.cfg-wa-card-label { font-size: 14px; font-weight: var(--weight-medium); color: var(--home-text-strong); }
.cfg-wa-card-hint  { font-size: 12px; color: var(--home-text-muted); }
.cfg-wa-textarea {
  width: 100%; padding: 12px 16px;
  border: none; resize: vertical;
  font-size: 14px; color: var(--home-text-strong);
  background: transparent; font-family: var(--font);
  line-height: 1.6;
  box-sizing: border-box;
  min-height: 80px;
}
.cfg-wa-textarea:focus { outline: none; }
.cfg-wa-card--textarea:focus-within {
  border-color: var(--accent);
  box-shadow: var(--home-shadow-card), 0 0 0 3px oklch(from var(--accent) l c h / 0.12);
}

/* cfg-wa-card layout helpers */
.cfg-wa-card-grid {
  padding: 18px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.cfg-wa-card-grid__full { grid-column: 1 / -1; }
.cfg-wa-card-body { padding: 14px 24px 18px; }

/* Wrapper vertical da aba ativa da ficha do médico (D2/D5) — cada aba
   (Documentos, Acesso, Cadastro, Mensalidades) entra dentro de
   #med-ficha-panel, que já carrega esta classe (views/medicos/ficha/shell.js).
   Com um filho só, o gap não faz efeito; o padding-bottom sempre faz. */
.med-tab-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-bottom: var(--space-2);
}

.med-acesso-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}
@media (max-width: 1100px) {
  .med-acesso-grid { grid-template-columns: 1fr; }
}

/* Aba Visão geral: KPIs locais (Home fica em 3). */
.fin-summary-metrics.med-ov-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.fin-summary-metrics.med-ov-metrics--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 768px) {
  .fin-summary-metrics.med-ov-metrics,
  .fin-summary-metrics.med-ov-metrics--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Aba Visão geral: hero + área temporal + grade de sinais. */
.med-tab-panel button.fin-kpi {
  background: none;
  border-width: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.med-tab-panel .fin-kpi + button.fin-kpi {
  border-left: 1px solid var(--border-hairline);
}
.med-tab-panel button.fin-kpi:hover { background: var(--hover-subtle); }
.med-uso-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.med-uso-delta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
  font-size: var(--size-12);
  color: var(--text-meta);
}
.fin-line-chart.med-uso-chart { color: var(--accent); gap: var(--space-2); }
.med-uso-chart .fin-line-chart-axis { color: var(--text-meta); }
.med-uso-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-4) var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-hairline);
}
.med-uso-tile { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.med-uso-tile-label {
  font-size: var(--size-12);
  color: var(--text-meta);
  letter-spacing: -0.01em;
}
.med-uso-tile-valor {
  font-size: var(--size-lg);
  font-weight: var(--weight-regular);
  letter-spacing: -0.03em;
  color: var(--text-ink);
  line-height: 1.1;
}
.med-acesso-card {
  display: flex;
  flex-direction: column;
}
.med-acesso-card .cfg-wa-card-header {
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: baseline;
}
.med-acesso-card .cfg-wa-card-label { min-width: 0; }
.med-acesso-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
}
.med-acesso-card-body .cfg-actions-row { margin-top: auto; }
.med-dados {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.med-dado {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.med-dado-label {
  font-size: var(--size-12);
  color: var(--text-meta);
}
.med-dado-valor {
  font-size: var(--size-sm);
  color: var(--text-ink);
  overflow-wrap: anywhere;
}
.med-acesso-vazio { margin: 0; }
.med-google-erro {
  color: var(--error);
  font-size: var(--size-12);
  overflow-wrap: anywhere;
}
.med-break-all { word-break: break-all; }

/* Superfície mínima do WhatsApp (fatia 2, S06) na aba Acesso. O grid da aba é
   de três colunas; este card ocupa a linha inteira porque reúne conexão,
   catálogo e o compositor de teste. */
.med-acesso-card--full { grid-column: 1 / -1; }
@media (max-width: 1100px) {
  .med-acesso-card--full { grid-column: auto; }
}
.med-wa-passos,
.med-wa-templates,
.med-wa-tentativas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.med-wa-passo,
.med-wa-template,
.med-wa-tentativa {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--size-sm);
  color: var(--text-ink);
}
.med-wa-andamento { margin-top: var(--space-3); }
.med-wa-alerta {
  color: var(--error);
  font-size: var(--size-12);
  overflow-wrap: anywhere;
  margin: 0;
}
.med-wa-compositor {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.med-wa-compositor--bloqueado { gap: var(--space-2); }
.med-wa-tabs {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.med-wa-tab {
  border: 1px solid var(--border-solid);
  background: transparent;
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-4);
  font-size: var(--size-12);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  cursor: pointer;
  min-height: 32px;
}
.med-wa-tab--ativa {
  border-color: var(--text-ink);
  color: var(--text-ink);
  background: var(--surface-tint);
}
.med-wa-tab:disabled { opacity: 0.45; cursor: not-allowed; }
.med-wa-campos {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.med-wa-params {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-3);
  align-items: center;
}
@media (max-width: 767px) {
  .med-wa-params { grid-template-columns: 1fr; align-items: stretch; }
}
.med-wa-resultado {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
}

/* cfg-footer-actions alinhado à esquerda (export) */
.cfg-footer-actions--start { justify-content: flex-start; gap: var(--space-3); }

/* Exportar — grupo de botões dentro do card (sem border-top do footer padrão) */
.exp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: 14px 24px 18px;
}
/* Divisor limpo: separa Pacientes (não datado) do bloco de período abaixo */
.exp-divider {
  height: 1px;
  margin: 4px 24px 8px;
  background: var(--home-line-soft);
}

/* Linha de categoria de despesa */
.med-cat-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) 0;
}
.med-cat-nome { flex: 1; }

/* Lista de categorias — padding menor no bottom (botão add logo abaixo) */
.cfg-cat-list { padding-bottom: var(--space-1); }

/* Btn add dentro de card (margem lateral alinhada ao padding do card) */
.cfg-add-btn-card { margin: 0 24px 18px; }

/* Ícone inline em btn-secondary */
.btn-icon-left { margin-right: 6px; vertical-align: -2px; }

/* Cfg divider */
.cfg-divider {
  border: none;
  border-top: 1px solid var(--home-line-faint);
  margin: 0;
}

/* NF vars */
.cfg-nf-vars { display: flex; flex-direction: column; }
.cfg-nf-vars-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: 8px 0;
}
.cfg-nf-vars-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.cfg-nf-vars-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Espaçamento entre seções via CSS — sem inline style */
.cfg-nf-section + .cfg-nf-section { margin-top: var(--space-8); }

/* NF textarea — container neutro (sem shadow de KPI) */
.cfg-nf-edit-wrap {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  overflow: hidden;
}
.cfg-nf-edit-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px oklch(from var(--accent) l c h / 0.12);
}
.cfg-nf-textarea {
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  font-family: var(--font);
  line-height: 1.6;
  color: var(--home-text-strong);
  background: transparent;
  border: none;
  padding: 12px 16px;
  resize: vertical;
  min-height: 80px;
}
.cfg-nf-textarea:focus { outline: none; }

/* NF preview */
.cfg-nf-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.cfg-nf-preview-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-subtle);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cfg-nf-preview-label {
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 16px 6px;
  border-bottom: 1px solid var(--border-soft);
}
.cfg-nf-preview-box {
  flex: 1;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--home-text);
  line-height: 1.7;
  white-space: pre-wrap;
  min-height: 150px;
}

/* Audit log — toolbar de filtro */
.cfg-log-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.cfg-log-filtro-sel {
  width: auto;
  max-width: 240px;
}

/* Audit log — loading state */
.cfg-log-loading {
  text-align: center;
  color: var(--text-muted);
  padding: 32px 16px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.cfg-log-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border-soft);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: cfg-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes cfg-spin { to { transform: rotate(360deg); } }

.cfg-log-erro {
  flex-direction: column;
  gap: var(--space-3) !important;
}

/* Audit log — badges de ação */
.cfg-log-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
}
.cfg-log-badge--insert { background: var(--log-insert-bg); color: var(--log-insert); }
.cfg-log-badge--update { background: var(--log-update-bg); color: var(--log-update); }
.cfg-log-badge--delete { background: var(--log-delete-bg); color: var(--log-delete); }
.cfg-log-row:hover { background: var(--row-hover); cursor: pointer; }

/* Audit log — modal diff */
.cfg-log-modal-meta { margin-bottom: var(--space-3); }
.cfg-log-diff-wrap { overflow-x: auto; }
.cfg-log-diff-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cfg-log-diff-table thead th { text-align: left; padding: 6px 10px; font-weight: var(--weight-medium); color: var(--home-text-muted); border-bottom: 1px solid var(--home-line-faint); }
.cfg-log-diff-table tbody td { padding: 6px 10px; border-bottom: 1px solid var(--home-line-faint); vertical-align: top; }
.cfg-log-diff-key { font-weight: var(--weight-medium); color: var(--home-text); white-space: nowrap; }
.cfg-log-diff-old { color: var(--log-delete); text-decoration: line-through; opacity: 0.7; }
.cfg-log-diff-new { color: var(--log-insert); }
/* Background de linha alterada: alpha mais leve que --log-update-bg (10%) — 4% é suficiente como tint de diff */
.cfg-log-diff-changed { background: rgba(234,179,8,0.04); }

/* Dados / Exportar */
.cfg-export-medico-field {
  margin-bottom: 0;
}
.cfg-export-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cfg-export-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: var(--space-4);
  border-bottom: 1px solid var(--border-soft);
}
.cfg-export-row:last-child {
  border-bottom: none;
}
.cfg-export-row-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cfg-export-row-label {
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--text-ink);
}
.cfg-export-row-hint {
  font-size: 12px;
  color: var(--text-muted);
}

/* Minha conta */
.cfg-conta-two-col {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}
.cfg-conta-col-left {
  padding-top: 4px;
}
.cfg-conta-col-divider {
  width: 1px;
  background: var(--home-line-soft);
  margin: 16px 0;
}
.cfg-conta-col-right {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
}
.cfg-conta-col-right .cfg-rel-bloco-header {
  padding: 12px 16px;
  border-bottom: none;
  background: none;
  margin-bottom: 0;
}
.cfg-conta-col-right .field {
  padding: 0 16px;
}
.cfg-conta-col-footer {
  display: flex;
  justify-content: flex-end;
  padding: 12px 16px 16px;
  margin-top: auto;
}
.cfg-conta-nome-field {
  padding: 0 16px 16px;
}
.cfg-conta-avatar-block {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 20px 16px 16px;
}
.cfg-conta-avatar-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cfg-conta-avatar {
  width: 56px; height: 56px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--accent-light);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--size-lg); font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
}
.cfg-conta-pessoal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-3);
  padding: 0 16px;
}
.cfg-report-toggle-inline {
  align-self: end;
  min-height: 44px;
  justify-content: space-between;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

@media (max-width: 980px) {
  .cfg-med-head {
    align-items: stretch;
  }

  .cfg-med-search-wrap {
    max-width: none;
    width: 100%;
  }

  .cfg-access-head {
    align-items: stretch;
  }

  .cfg-access-search-wrap {
    max-width: none;
    width: 100%;
  }

}

@media (max-width: 768px) {
  .cfg-wrap {
    padding-bottom: 24px;
  }

  .cfg-med-table thead th,
  .cfg-med-table td {
    padding-left: 18px;
    padding-right: 18px;
  }

  .cfg-table-shell .ws-table {
    min-width: 720px;
  }

  .cfg-med-drawer {
    right: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }

  .cfg-pane-card {
    padding: var(--space-4);
  }

  .cfg-conta-head {
    align-items: flex-start;
  }
}

/* ============================================================
   Pessoal
   ============================================================ */
.pes-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 1160px;
}

.pes-detail-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 1160px;
}

.pes-card {
  background: var(--bg-card);
  border: 1px solid rgba(52,44,36,0.05);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.pes-global-hint {
  font-size: 11px;
  color: var(--text-muted);
  padding: 4px 0 var(--space-3);
  letter-spacing: 0.01em;
}

.pes-config-missing-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--accent);
  font-size: inherit;
  font-family: inherit;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 2px;
}
.pes-config-missing-link:hover { text-decoration-style: solid; }

.pes-history-pag-pendente {
  font-size: var(--size-xs);
  color: var(--text-muted);
  font-style: italic;
}

.pes-section-eyebrow {
  display: inline-block;
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.pes-section-title,
.pes-detail-name {
  font-size: var(--size-xl);
  font-weight: var(--weight-semibold);
  color: var(--text);
  letter-spacing: -0.02em;
}

.pes-section-desc,
.pes-detail-sub {
  color: var(--text-muted);
  font-size: var(--size-xs);
}

.pes-config-label {
  font-size: 12px;
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  color: var(--text-muted);
}

.pes-medico-cell { max-width: 220px; }

.pes-medico-main {
  font-weight: var(--weight-medium);
}

.pes-medico-sub,
.pes-history-meta,
.pes-config-global,
.pes-config-missing {
  font-size: var(--size-xs);
  color: var(--text-muted);
}

.pes-status-badge { border-color: transparent; }
.pes-status-badge--em_dia          { background: var(--s-paga-bg);      color: var(--s-paga); }
.pes-status-badge--atrasado        { background: var(--s-cancelada-bg); color: var(--s-cancelada); }
.pes-status-badge--vencem_em_breve { background: var(--s-pendente-bg);  color: var(--s-pendente); }
.pes-status-badge--sem_config,
.pes-status-badge--inativo         { background: rgba(0,0,0,0.06);      color: var(--text-muted); }

/* ── Breadcrumb de volta ── */
.pes-detail-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pes-breadcrumb-label {
  font-size: var(--size-sm);
  color: var(--text-muted);
}

/* ── Header card ── */
.pes-detail-header-card {
  padding: var(--space-5);
}

.pes-detail-header-main {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.pes-detail-header-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
}

.pes-detail-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.pes-detail-name {
  font-size: 18px;
  font-weight: var(--weight-semibold);
  color: var(--text);
  letter-spacing: -0.02em;
  margin: 0;
}

.pes-detail-sub {
  color: var(--text-muted);
  font-size: var(--size-xs);
}

/* ── Section head ── */
.pes-section-head,
.pes-inline-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.pes-section-head--no-title { justify-content: flex-end; }

.pes-section-title {
  font-size: var(--size-base);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  margin: 0;
}

/* ── Config strip (modo visualização) ── */
.pes-config-effective-strip {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.pes-config-effective-valor {
  font-size: var(--size-xl);
  font-weight: var(--weight-semibold);
  color: var(--text);
  letter-spacing: -0.03em;
}

.pes-config-effective-dot {
  color: var(--text-muted);
  opacity: 0.4;
}

.pes-config-effective-meta {
  font-size: var(--size-sm);
  color: var(--text-muted);
}

.pes-config-overrides {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.pes-config-override-chip {
  font-size: var(--size-xs);
  background: var(--accent-light);
  color: var(--accent);
  border-radius: var(--radius-pill);
  padding: 2px var(--space-2);
}

/* ── Config editor ── */
.pes-config-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.pes-config-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.pes-config-label {
  font-size: var(--size-xs);
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  color: var(--text-muted);
}

.pes-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid rgba(52,44,36,0.05);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.78);
  color: var(--text);
  font-size: var(--size-sm);
}

.pes-checkbox input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

/* ── Histórico de mensalidades ── */
.pes-history-section {
  margin-top: var(--space-5);
}

.pes-history-shell {
  margin-top: var(--space-2);
}

.pes-history-competencia {
  font-weight: var(--weight-medium);
  color: var(--text);
}

.pes-history-meta {
  font-size: var(--size-xs);
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
}

.pes-history-tr td {
  vertical-align: middle;
}

.pes-status-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.pes-status-cell .pes-history-meta {
  display: inline;
}

/* ── Draft row (nova mensalidade) ── */
.pes-history-draft-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--accent-tint-3);
  border-radius: var(--radius-md);
  background: var(--accent-tint-1);
  margin-bottom: var(--space-2);
}

.pes-history-draft-fields {
  display: flex;
  gap: var(--space-3);
  flex: 1;
  flex-wrap: wrap;
}

.pes-draft-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 100px;
}

.pes-draft-label {
  font-size: var(--size-xs);
  color: var(--text-muted);
  font-weight: var(--weight-medium);
}

.pes-draft-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  padding-bottom: 2px;
}

.pes-draft-save {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.pes-draft-save:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

/* ── Inputs inline na tabela ── */
.pes-row-input,
.pes-row-select {
  width: 100%;
}

.pes-competencia-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.pes-competencia-grid-modal {
  grid-template-columns: minmax(0, 1.45fr) minmax(120px, 0.55fr);
}

/* ── Modal sem título (só X no header) ── */
.modal-body--no-header-title ~ * { display: none; }
.modal:has(.modal-body--no-header-title) .modal-title { display: none; }
.modal:has(.modal-body--no-header-title) .modal-header {
  padding-bottom: 0;
  justify-content: flex-end;
}
.modal:has(.modal-body--no-header-title) .modal-body {
  padding-top: var(--space-3);
}

/* ── Config drawer — toggle row e botão discreto ── */
.pes-cfg-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pes-cfg-hero-row {
  padding-bottom: 4px;
}

.pes-cfg-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  margin-inline: -20px;
  margin-bottom: -30px;
  border-top: 1px solid var(--border-soft);
}
.pes-cfg-save-btn {
  border-radius: 999px;
  height: 32px;
  padding: 0 18px;
  font-size: var(--size-sm);
}

.pes-cfg-status-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--size-sm);
  color: var(--s-cancelada);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 150ms;
}
.pes-cfg-status-btn:hover {
  opacity: 1;
}

/* ── Modal de configuração do cliente pessoal ── */
.pes-cfg-modal .pac-detail-value-row {
  gap: var(--space-4);
}

.pes-cfg-modal .pac-detail-value-row input {
  width: 120px;
  text-align: right;
  border: 1px solid rgba(112,115,147,0.18);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  font-size: var(--size-sm);
  background: #fff;
}

.pes-cfg-modal .pac-detail-value-row input::placeholder {
  color: var(--text-muted);
}

.pes-cfg-switch {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

.pes-cfg-switch-label {
  font-size: var(--size-sm);
  color: var(--text-muted);
}

.pes-cfg-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-hairline);
}

/* ── Responsive ── */
@media (max-width: 980px) {
  .pes-global-grid,
  .pes-kpis,
  .pes-config-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .pes-section-head {
    align-items: flex-start;
  }

  .pes-global-grid,
  .pes-kpis,
  .pes-config-grid {
    grid-template-columns: 1fr;
  }

  .pes-history-draft-fields {
    flex-direction: column;
  }

  .pes-history-shell {
    overflow-x: auto;
  }
}

/* ============================================================
   Ficha do Paciente
   ============================================================ */
.ficha-wrap {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 1240px;
}


.ficha-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Identidade (topo da coluna esquerda) */
.fp-identity {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fp-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--accent-light);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.fp-identity-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fp-aviso-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: rgba(236,72,153,0.12);
  color: #be185d;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  transition: background 150ms;
}
.fp-aviso-badge:hover {
  background: rgba(236,72,153,0.22);
}

.fp-aviso-tooltip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 6px);
  background: #1f1f1f;
  color: #fff;
  font-size: var(--size-xs);
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: var(--radius-md);
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms;
  z-index: 200;
}
.fp-aviso-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1f1f1f;
}
.fp-aviso-badge {
  position: relative;
}
.fp-aviso-badge.fp-aviso-open .fp-aviso-tooltip {
  opacity: 1;
}

.fp-nome {
  font-size: 18px;
  font-weight: var(--weight-semibold);
  color: var(--text-ink);
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.fp-medico-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
}

.fp-status-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Badge "NF" discreto na meta line da ficha — mostra que paciente emite
   nota fiscal. Cor cinza-azul (--pend-nf) compartilhada com pendências de
   NF, mantém coerência visual no app. */
.fp-nf-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(112, 115, 147, 0.18);
  background: var(--pend-nf-bg);
  color: var(--pend-nf);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.3px;
}

/* Chip "Emite NF" no drawer view do paciente — variante visual do
   .pac-detail-chip alinhada com a paleta de NF. */
.pac-detail-chip-nf {
  background: var(--pend-nf-bg) !important;
  color: var(--pend-nf) !important;
  border-color: rgba(79, 84, 110, 0.18) !important;
}

.fp-pend {
  margin-top: 2px;
}



.fp-proxima {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(27,43,75,0.04);
  border-radius: var(--radius-md);
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
}
.fp-proxima svg { flex-shrink: 0; color: var(--text-muted); }
.fp-proxima strong { font-weight: var(--weight-semibold); color: var(--text); }
.fp-proxima-vencido { background: var(--warning-bg); color: var(--warning); }
.fp-proxima-vencido svg { color: var(--warning); }
.fp-proxima-link {
  cursor: pointer;
  border: none;
  text-align: left;
}
.fp-proxima-link:hover {
  background: var(--accent-tint-1);
  border-color: var(--accent-tint-3);
}
.fp-proxima-link:hover svg { color: var(--accent); }
.fp-retorno-vencido { font-size: 11px; font-weight: var(--weight-medium); color: var(--s-falta); }


.ficha-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px 0 10px;
  justify-content: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: transparent;
  font-size: 12px;
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font);
  transition: background 120ms, color 120ms;
}
.ficha-back-btn:hover {
  background: var(--accent-tint-1);
  color: var(--text);
}

/* Topbar da ficha (breadcrumb + título + ação) */
.ficha-topbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Header operacional da ficha */
.ficha-header-surface {
  background: linear-gradient(180deg, var(--home-surface-strong) 0%, var(--home-surface) 100%);
  border: 1px solid var(--home-line-soft);
  border-radius: 16px;
  box-shadow: var(--home-shadow-card);
  padding: var(--space-4) var(--space-5);
}


.ficha-header-main {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.fp-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.fp-proxima-wrap {
  margin-left: auto;
  flex-shrink: 0;
  border-top: none;
  padding-top: 0;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ficha-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  margin-left: auto;
}

.ficha-header-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.ficha-header-icon-btn:hover {
  background: var(--accent-tint-1);
  color: var(--text);
}

/* Timeline da ficha */
.ficha-timeline-shell {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Filtros da timeline — pills + divider (mesmo padrão de Pacientes).
   Aparece só quando há ≥ 2 categorias com conteúdo. */
.ficha-timeline-filters {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}
.ficha-timeline-filters .filter-pill {
  min-height: 32px;
  padding: 0 12px;
  font-size: 12px;
}
.ficha-timeline-filters .filter-pill-active {
  background: var(--accent-tint-2);
  border-color: var(--accent-tint-3);
}

.ficha-timeline-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.ficha-timeline-filters {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.ficha-timeline-filter {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: transparent;
  font-size: var(--size-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
  font-family: var(--font);
}
.ficha-timeline-filter:hover { background: var(--accent-tint-1); color: var(--text); }
.ficha-timeline-filter--active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.ficha-timeline-filter--active:hover { background: var(--accent); color: #fff; }

.ficha-timeline-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-8) 0;
  color: var(--text-muted);
}
.ficha-timeline-empty-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: rgba(27,43,75,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.ficha-timeline-empty-copy {
  font-size: var(--size-sm);
  color: var(--text-muted);
}

.ficha-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.ficha-timeline-group-header {
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-3);
}

.ficha-timeline-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ficha-timeline-entry {
  padding: var(--space-4) var(--space-5);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--home-surface-strong) 0%, var(--home-surface) 100%);
  border: 1px solid var(--home-line-soft);
  box-shadow: var(--home-shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ficha-timeline-entry-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.ficha-timeline-entry-actions-hover {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  opacity: 0;
  transition: opacity 120ms;
}
.ficha-timeline-entry:hover .ficha-timeline-entry-actions-hover { opacity: 1; }

.ficha-timeline-del {
  background: none;
  border: none;
  padding: 3px;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
  transition: color 120ms, background 120ms;
}
.ficha-timeline-del:hover { color: #DC2626; background: rgba(220,38,38,0.07); }

.ficha-timeline-action-btn {
  background: none;
  border: none;
  padding: 3px;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
  transition: color 120ms, background 120ms;
}
.ficha-timeline-action-btn:hover { color: var(--accent); background: var(--accent-tint-1); }

.ficha-timeline-time {
  font-size: var(--size-sm);
  color: var(--text-muted);
  white-space: nowrap;
}

.ficha-timeline-kind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  border: none;
  padding: 0;
  font-family: inherit;
}

.ficha-timeline-kind--btn {
  cursor: pointer;
  transition: opacity 120ms;
}
.ficha-timeline-kind--btn:hover { opacity: 0.75; }

.ficha-timeline-summary {
  font-size: var(--size-base);
  font-weight: var(--weight-medium);
  color: var(--text);
}

.ficha-timeline-note {
  font-size: var(--size-sm);
  color: var(--text-muted);
  white-space: pre-wrap;
}

.ficha-timeline-entry-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-1);
}

.ficha-timeline-link {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--size-xs);
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ficha-timeline-link:hover { color: var(--accent); }

.ficha-timeline-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}
.ficha-timeline-editor.hidden { display: none; }

.ficha-timeline-textarea {
  width: 100%;
  resize: vertical;
  font-family: var(--font);
  font-size: var(--size-sm);
}

.ficha-timeline-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.ficha-timeline-shortcut {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--size-sm);
  color: var(--text-muted);
  cursor: pointer;
}
.ficha-timeline-shortcut input { margin-top: 2px; flex-shrink: 0; }

/* ───── Timeline agregada por atendimento (2026-04-24) ───────────────── */

.ficha-timeline-agg {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.ficha-timeline-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ficha-timeline-section-title {
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}
.ficha-timeline-section--collapsible > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}
.ficha-timeline-section--collapsible > summary::-webkit-details-marker { display: none; }
.ficha-timeline-section--collapsible > summary::before {
  content: '▸';
  font-size: 10px;
  color: var(--text-muted);
  transition: transform 120ms;
}
.ficha-timeline-section--collapsible[open] > summary::before { transform: rotate(90deg); }
.ficha-timeline-count {
  background: var(--surface-tint);
  color: var(--text-cool);
  font-size: var(--size-xs);
  font-weight: var(--weight-medium);
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  letter-spacing: 0;
  text-transform: none;
}

.ficha-timeline-atd {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ficha-timeline-atd-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.ficha-timeline-atd-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ficha-timeline-atd-date {
  font-size: var(--size-sm);
  color: var(--text-muted);
  font-weight: var(--weight-medium);
}
.ficha-timeline-atd-servico {
  font-size: var(--size-md);
  font-weight: var(--weight-semibold);
  color: var(--text-ink);
}
.ficha-timeline-atd-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.ficha-timeline-atd-sub {
  font-size: var(--size-xs);
  color: var(--text-muted);
}
.ficha-timeline-atd-empty {
  color: var(--text-xmuted);
  font-size: var(--size-sm);
  font-style: italic;
  padding: var(--space-2) 0 0;
}

.ficha-timeline-atd-linhas,
.ficha-timeline-dados-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--border-soft);
  padding-top: var(--space-3);
}

.ficha-timeline-linha {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 0;
  font-size: var(--size-sm);
  color: var(--text);
}
.ficha-timeline-linha-time {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-size: var(--size-xs);
  white-space: nowrap;
}
.ficha-timeline-linha-kind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ficha-timeline-linha-kind--empty { background: transparent; }
.ficha-timeline-linha-resumo {
  flex: 1;
  min-width: 0;
}
.ficha-timeline-linha-del {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-xmuted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms, background 120ms, color 120ms;
}
.ficha-timeline-linha:hover .ficha-timeline-linha-del { opacity: 1; }
.ficha-timeline-linha-del:hover { color: #DC2626; background: rgba(220,38,38,0.07); }

/* Grupo de ações da linha (olho + apagar) */
.ficha-timeline-linha-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

/* Botão "olho" — compartilhar evento com o médico. Desktop: só no hover.
   Revelado (--on): SEMPRE visível (indicador do que o médico vê). */
.ficha-timeline-eye {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-xmuted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms, background 120ms, color 120ms;
}
.ficha-timeline-linha:hover .ficha-timeline-eye,
.ficha-timeline-entry:hover .ficha-timeline-eye { opacity: 1; }
.ficha-timeline-eye:hover { background: var(--surface-tint-hover); color: var(--text); }
.ficha-timeline-eye--on {
  opacity: 1;                          /* revelado: sempre visível */
  color: var(--patient-status-lead);   /* mesmo azul dos chips de confirmação */
}
@media (max-width: 767px) {
  /* Sem hover no touch: olho sempre visível pra Bruna poder togglar */
  .ficha-timeline-eye { opacity: 1; }
}

/* Timeline enxuta do médico (modal read-only) — lista cronológica plana */
.med-tl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.med-tl-item {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: start;
  gap: var(--space-3);
  padding: 10px 4px;
  font-size: var(--size-sm);
  color: var(--text);
  border-bottom: 1px solid var(--border-soft);
}
.med-tl-item:last-child { border-bottom: none; }
.med-tl-date {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-size: var(--size-xs);
  white-space: nowrap;
  min-width: 46px;
  padding-top: 4px;                    /* alinha com a 1ª linha do texto */
}
.med-tl-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 3px;
}
.med-tl-obs {
  color: var(--text-muted);
  font-size: var(--size-xs);
  line-height: 1.4;
  white-space: pre-wrap;               /* preserva quebras da nota da Bruna */
}
.med-tl-kind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
}
.med-tl-kind--empty { background: var(--bg-subtle); }
.med-tl-resumo { min-width: 0; }
.med-tl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 32px 16px;
  color: var(--text-muted);
}
.med-tl-empty-icon { color: var(--text-xmuted); margin-bottom: 4px; }
.med-tl-empty strong { color: var(--text); font-weight: 600; }
.med-tl-empty span { font-size: var(--size-sm); }

.ficha-header-loading {
  padding: 0;
  color: var(--text-cool);
  font-size: var(--size-sm);
}


.ficha-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  font-size: 13px;
  color: var(--text-muted);
}

.ficha-meta-dot {
  color: var(--text-xmuted);
  font-size: 11px;
}

.ficha-pend-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.pend-chip {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 3px;
}

.pend-chip svg { flex-shrink: 0; }

/* Variantes de pend-chip por tipo dentro do trigger da ficha
   (header.fp-pend). Substitui inline style hardcoded que estava
   no JS. Escopo restrito ao trigger pra não afetar outras views
   onde .pend-chip-- também aparece com semântica visual diferente
   (Pendências usa SVG inline-color em vez de background do chip). */
.ficha-pend-trigger .pend-chip--confirmar,
.ficha-pend-trigger .pend-chip--cobranca,
.ficha-pend-trigger .pend-chip--nf,
.ficha-pend-trigger .pend-chip--retorno,
.ficha-pend-trigger .pend-chip--falta {
  width: auto;
  min-width: 26px;
  padding: 0 7px;
}
.ficha-pend-trigger .pend-chip--confirmar { background: var(--patient-status-lead-bg); color: var(--patient-status-lead); }
.ficha-pend-trigger .pend-chip--cobranca  { background: var(--pend-cobranca-bg);       color: var(--pend-cobranca); }
.ficha-pend-trigger .pend-chip--nf        { background: var(--pend-nf-bg);             color: var(--pend-nf); }
.ficha-pend-trigger .pend-chip--retorno   { background: var(--pend-retorno-bg);        color: var(--pend-retorno); }
.ficha-pend-trigger .pend-chip--falta     { background: var(--pend-falta-bg);          color: var(--pend-falta); }
.ficha-pend-trigger .pend-chip-count {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: currentColor;
}

.pend-cell-icon {
  width: 32px;
  padding: 0 4px 0 0 !important;
  vertical-align: middle !important;
  text-align: center;
}
.pend-cell-paciente-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pend-open-ficha {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pend-open-ficha:hover { color: var(--accent); text-decoration: underline; }
.pend-cell-inline-meta {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}


/* Tabs bar */
.ficha-tabs-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 2px;
  border-bottom: 1px solid rgba(27,43,75,0.08);
  background: var(--bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  margin-bottom: 20px;
  position: relative;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: 0 var(--space-4);
  padding-top: var(--space-2);
}

#med-tab-action { margin-bottom: var(--space-2); }

/* ============================================================
   Tabs de linha com underline — padrão do sistema
   Usar .tabs + .tab + .tab-active em qualquer view
   ============================================================ */
.tabs {
  display: flex;
  gap: 28px;
  background: transparent;
  padding: 0;
}

.tab {
  padding: 10px 0;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--text-cool);
  cursor: pointer;
  font-family: var(--font);
  transition: color 150ms;
  white-space: nowrap;
  border-radius: 0;
  position: relative;
}

.tab:hover {
  color: var(--text-ink);
  background: transparent;
}

.tab-active {
  color: var(--text-ink);
  font-weight: var(--weight-semibold);
  background: transparent;
  box-shadow: none;
}

.tab-active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(123,108,168,0.40);
  border-radius: 2px 2px 0 0;
}

.pend-main-tabs {
  border-bottom: 1px solid rgba(27,43,75,0.08);
  margin-bottom: 20px;
}

/* Aliases da ficha — mantidos para compatibilidade */
.ficha-tabs { display: flex; gap: 28px; background: transparent; padding: 0; }
.ficha-tab { padding: 10px 0; border: none; background: transparent; font-size: 14px; font-weight: var(--weight-medium); color: var(--text-cool); cursor: pointer; font-family: var(--font); transition: color 150ms; white-space: nowrap; border-radius: 0; position: relative; }
.ficha-tab:hover { color: var(--text-ink); background: transparent; }
.ficha-tab-active { color: var(--text-ink); font-weight: var(--weight-semibold); background: transparent; box-shadow: none; }
.ficha-tab-active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: rgba(123,108,168,0.40); border-radius: 2px 2px 0 0; }

#ficha-tab-action {
  padding-right: 0;
  display: flex;
  align-items: flex-end;
}

#ficha-tab-action.ficha-tab-action-has-cta {
  padding-bottom: 8px;
}


/* Tab content */
.ficha-tab-content {
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  min-height: 0;
}

/* Tabela de consultas e cobranças */

.ficha-td-main {
  display: block;
  font-weight: var(--weight-medium);
  color: var(--text-ink);
}

.ficha-td-sub {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 1px;
}

/* Sub-linha de Cobranças (Valor + NF) só aparece no mobile */
.ficha-td-sub--mobile { display: none; }

/* Sub-linha do histórico de mensalidades do médico só no mobile */
.pes-history-sub--mobile { display: none; }

/* Sub-linha de Config Médicos só no mobile */
.cfg-med-sub--mobile { display: none; }

/* Sub-linha de Config Acesso só no mobile */
.cfg-acesso-sub--mobile { display: none; }

/* Coluna "Acesso" (último login). Quem já entrou é texto sóbrio — badge fica só
   nos estados que pedem ação da Bruna (Sem conta / Nunca acessou). */
.cfg-acesso-login-txt {
  color: var(--text-cool);
  font-size: var(--size-sm);
  white-space: nowrap;
}

/* Sub-linha de Config Relatórios só no mobile */
.cfg-rel-sub--mobile { display: none; }

/* Sub-linha de Histórico só no mobile */
.cfg-log-sub--mobile { display: none; }

/* Sub-linha de Pacientes do médico só no mobile */
.med-pac-sub--mobile { display: none; }

/* Toolbar da view médico-pacientes: busca com largura máxima contida
   (sem o botão "Novo paciente", a barra esticava pra largura total). */
.med-pac-search-wrap {
  max-width: 420px;
}

/* Avatar dos pacientes herda o accent sage no tema médico */
body.theme-medico .pac-row-avatar {
  background: color-mix(in srgb, var(--teal) 10%, transparent);
  color: var(--teal);
}

/* Kebab de ações em Config Acesso — só aparece no mobile */
.cfg-acesso-kebab { display: none; position: relative; }
.cfg-acesso-kebab > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--text-muted);
}
.cfg-acesso-kebab > summary::-webkit-details-marker { display: none; }
.cfg-acesso-kebab > summary:hover,
.cfg-acesso-kebab[open] > summary {
  background: rgba(112,115,147,0.08);
  color: var(--text-ink);
}
.cfg-acesso-kebab-menu {
  /* position é setado via JS no toggle (fixed) pra não ser cortado por overflow.
     Fallback absolute pra caso JS não rode. */
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  background: #FFFFFF;
  border: 1px solid rgba(112,115,147,0.14);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(11,15,32,0.08);
  min-width: 180px;
  padding: 4px;
  z-index: 1300;
  display: flex;
  flex-direction: column;
}
.cfg-acesso-kebab-item {
  border: none;
  background: transparent;
  text-align: left;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text-ink);
  cursor: pointer;
  border-radius: 8px;
}
.cfg-acesso-kebab-item:hover {
  background: rgba(112,115,147,0.06);
}

.cfg-acesso-senha-aviso {
  font-size: 13px;
  color: var(--warning);
  margin: 0 0 var(--space-4);
}
.cfg-acesso-senha-wrap {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.cfg-acesso-senha-input {
  flex: 1;
  font-family: var(--font-mono, monospace);
  font-size: 15px;
  letter-spacing: 0.04em;
  background: var(--bg-subtle);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text-ink);
  outline: none;
}
.cfg-acesso-senha-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: var(--space-3) 0 0;
}

.ficha-td-valor-num { font-weight: var(--weight-semibold); }

.ficha-td-data { white-space: nowrap; }
.ficha-td-actions { white-space: nowrap; vertical-align: middle; }
.ficha-td-nf { white-space: nowrap; }

.ficha-actions-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}

.ficha-actions-wrap .row-action-btn svg { display: block; }

/* Badge de status clicável (cobranças) */
.ficha-cob-status {
  cursor: pointer;
  border: none;
  font-family: var(--font);
  font-size: 12px;
  font-weight: var(--weight-medium);
  padding: 0 8px;
  min-height: 24px;
  border-radius: var(--radius-pill);
}

.ficha-nf-link {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border: none;
  border-radius: var(--radius-pill);
  background: rgba(124,107,200,0.08);
  color: #6f5ec0;
  font-size: 12px;
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.ficha-nf-link:hover {
  text-decoration: none;
  background: rgba(124,107,200,0.12);
  color: #6859b2;
}

/* Dropdown de mais opções */
.ficha-dropdown-wrap { position: relative; }
.ficha-dd-excluir { color: #c85e66; }
.ficha-dd-excluir:hover { background: rgba(209,106,106,0.08); }

/* Empty state da aba */
.ficha-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: var(--space-8) var(--space-6);
  color: var(--text-cool);
  font-size: 14px;
  background: rgba(255,255,255,0.58);
  border: 1px dashed rgba(123,108,168,0.16);
  border-radius: 18px;
}

/* AUD-2: nota de histórico truncado (limit defensivo da ficha) */
.ficha-historico-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) 0 var(--space-1);
  font-size: 12.5px;
  color: var(--text-muted);
}
.ficha-historico-note .btn-ghost {
  background: transparent;
  border: 0;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.12s ease;
}
.ficha-historico-note .btn-ghost:hover {
  background: var(--home-accent-soft);
}
.ficha-historico-note .btn-ghost:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.ficha-historico-note .btn-ghost:disabled {
  color: var(--text-muted);
  cursor: default;
}

/* Aba Cadastro */
.ficha-cadastro {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ficha-form-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--space-5);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.ficha-cadastro .form-section-title {
  margin: 0 0 var(--space-4);
}

.ficha-cadastro textarea {
  min-height: 96px;
}

.ficha-servicos-table {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ficha-servico-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.ficha-servico-row:last-child { border-bottom: none; }

.ficha-servico-name {
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  color: var(--text);
}

.ficha-servico-default {
  margin-top: 4px;
  font-size: var(--size-xs);
  color: var(--text-muted);
}

.ficha-servico-field {
  min-width: 170px;
}

.ficha-cadastro-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  margin-top: var(--space-1);
}

/* WhatsApp button na ficha — sem cor especial */
.ficha-wa-btn { color: var(--text-muted); }


/* Status inline de agendamento */
.ficha-status-ag-btn {
  cursor: pointer;
  border: none;
  font-family: var(--font);
}
.ficha-status-ag-pop {
  left: 0;
  right: auto;
  min-width: 140px;
}
.action-pop-item-active {
  font-weight: var(--weight-semibold);
  color: var(--accent);
}

/* Responsive */
@media (max-width: 640px) {
  .ficha-wrap { gap: var(--space-4); }
  .ficha-tabs-bar { flex-direction: row; align-items: center; gap: 10px; }
  .ficha-tabs,
  .med-detail-tabs-bar .tabs { flex: 1 1 auto; overflow-x: auto; gap: 16px; min-width: 0; }
  #ficha-tab-action,
  #med-tab-action { width: auto; padding: 0; flex: 0 0 auto; margin-left: auto; }
  #ficha-tab-action.ficha-tab-action-has-cta { padding-bottom: 0; }
  #ficha-tab-action .btn-primary:not(#pes-new-mensalidade):not(#ficha-novo-ag):not(#ficha-nova-cob):not(#ficha-nova-entrada):not(#cfg-novo-medico):not(#med-mens-nova),
  #med-tab-action .btn-primary:not(#pes-new-mensalidade):not(#ficha-novo-ag):not(#ficha-nova-cob):not(#ficha-nova-entrada):not(#cfg-novo-medico):not(#med-mens-nova) {
    width: auto;
    justify-content: center;
  }
  .ficha-servico-row { flex-direction: column; align-items: stretch; }
  .ficha-servico-field { min-width: 0; }
}

.btn-sm { height: 28px; padding: 0 var(--space-3); font-size: var(--size-xs); }

/* ============================================================
   Pacientes — grupos por médico (master-detail)
   ============================================================ */

/* Lista de pacientes (sem tabela) */
.pac-list {
  display: flex;
  flex-direction: column;
}
.pac-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--space-6);
  cursor: pointer;
  position: relative;
  transition: background 140ms ease;
  gap: var(--space-4);
  min-height: 72px;
}
.pac-row:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--space-6);
  right: var(--space-6);
  height: 1px;
  background: rgba(123,108,168,0.08);
}
.pac-row:hover { background: rgba(124,107,200,0.04); }
/* Layout 2 colunas — card único com divisor */
.pac-col-lista {
  display: flex;
  flex-direction: column;
  border-right: 0 solid var(--border);
  overflow: hidden;
  min-height: 0;
  height: 100%;
  transition: border-right-width 220ms ease;
}
.pac-col-lista .pac-medico-header {
  border-radius: 0;
  flex-shrink: 0;
}
.pac-col-lista .pac-list {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.pac-col-painel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.50));
  opacity: 0;
  transition: opacity 180ms ease 40ms;
}
.pac-painel-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-10);
  flex: 1;
  color: var(--text-muted);
  font-size: var(--size-sm);
}
.pac-painel-loading {
  padding: var(--space-6);
  font-size: var(--size-sm);
  color: var(--text-cool);
}
.pac-painel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--space-5) 16px;
  border-bottom: 1px solid rgba(123,108,168,0.08);
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.82));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 5;
  flex-shrink: 0;
}
.pac-painel-nome {
  font-size: var(--size-base);
  font-weight: var(--weight-semibold);
  color: var(--text-ink);
  margin-bottom: 2px;
}
.pac-painel-link {
  font-size: var(--size-xs);
  color: var(--text-cool);
  text-decoration: none;
}
.pac-painel-link:hover { color: var(--text-ink); }
.pac-painel-body {
  padding: var(--space-3) var(--space-5) var(--space-5);
  overflow-y: auto;
}
.pac-painel-body-edicao {
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  padding: var(--space-3) var(--space-5) var(--space-5);
}
.pac-painel-footer {
  padding: var(--space-3) var(--space-5) var(--space-4);
  border-top: 1px solid rgba(123,108,168,0.08);
  display: flex;
  justify-content: flex-end;
}
.pac-row-active {
  background: rgba(124,107,200,0.07) !important;
}
.pac-row-chevron {
  color: var(--text-xmuted);
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-2px);
  transition: opacity 140ms ease, transform 140ms ease;
}
.pac-row:hover .pac-row-chevron,
.pac-row-active .pac-row-chevron {
  opacity: 1;
  transform: translateX(0);
}

/* Modo leitura do painel */
.pac-leitura {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.pac-leitura-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-5);
}
.pac-leitura-col {
  display: flex;
  flex-direction: column;
}
.pac-leitura-linha {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 14px 0;
  font-size: var(--size-base);
  color: var(--text-ink);
  border-bottom: 1px solid rgba(123,108,168,0.08);
}
.pac-leitura-linha:last-child { border-bottom: none; }
.pac-leitura-vazio {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px 0;
  font-size: var(--size-base);
  color: var(--text-xmuted);
  border-bottom: 1px solid rgba(123,108,168,0.08);
}
.pac-leitura-vazio:last-child { border-bottom: none; }
.pac-ic {
  color: var(--text-xmuted);
  flex-shrink: 0;
  margin-top: 3px;
}
.pac-leitura-obs {
  font-size: var(--size-sm);
  color: var(--text-cool);
  padding: var(--space-4);
  border: 1px solid rgba(123,108,168,0.08);
  border-radius: 14px;
  background: rgba(255,255,255,0.56);
  white-space: pre-wrap;
}

/* Botão excluir na linha */
.pac-del-btn {
  opacity: 0;
  transform: translateX(-2px);
  transition: opacity 120ms ease, transform 120ms ease;
  color: var(--text-muted);
}
.pac-del-btn:hover { color: #DC2626; }
.pac-row:hover .pac-del-btn {
  opacity: 1;
  transform: translateX(0);
}

/* ============================================================
   Pacientes — container único com médico (modo filtrado)
   ============================================================ */
.pac-filtro-card {
  padding: 0;
  overflow: hidden;
}
.pac-medico-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.82));
  border-bottom: 1px solid rgba(123,108,168,0.08);
  padding: var(--space-6) var(--space-6);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.pac-medico-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.pac-medico-header-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pac-medico-header-nome {
  font-size: var(--size-md);
  font-weight: var(--weight-semibold);
  color: var(--text-ink);
}
.pac-medico-header-sub {
  font-size: var(--size-sm);
  color: var(--text-cool);
}
.pac-medico-header-prefs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pac-status-badge {
  height: 20px;
  padding: 0 7px;
  border: 1px solid transparent;
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  line-height: 1;
}

.pac-status-lead {
  background: var(--patient-status-lead-bg);
  border-color: var(--patient-status-lead-border);
  color: var(--patient-status-lead);
}

.pac-status-ativo {
  background: var(--patient-status-active-bg);
  border-color: var(--patient-status-active-border);
  color: var(--patient-status-active);
}

.pac-status-inativo {
  background: var(--patient-status-inactive-bg);
  border-color: var(--patient-status-inactive-border);
  color: var(--patient-status-inactive);
}

/* ── Agenda Pessoal (pag-*) ──────────────────────────────────────────────── */

/* Tab bar — Financeiro | Agenda | Tarefas */
.pes-tab-bar {
  padding: 12px 20px 2px;
  border-bottom: 1px solid rgba(27,43,75,0.08);
  margin-bottom: 0;
  flex-shrink: 0;
}
.pes-tab-bar .tabs {
  padding-bottom: 0;
}
.pes-tab-bar .tab-active::after {
  bottom: -3px;
}

.pes-tab-bar + #pes-tab-content .fin-wrap {
  padding-top: 18px;
}

/* Quando a aba Agenda está ativa, o #view vira flex column para que
   #pes-tab-content (flex:1) preencha toda a altura restante */
.view--pessoal-agenda {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0;
}

/* ── Tarefas Pessoal (ptk-*) ─────────────────────────────────────────────── */
.ptk-wrap {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  gap: 0;
  padding: 22px 0 0;
}

/* ── Nav bar (tab bar) ─────────────────────────── */
.ptk-nav {
  border-radius: 14px;
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(113,123,155,0.14);
  padding: 0 16px;
}

.ptk-nav-inner {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ptk-tabs-scroll {
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.ptk-tabs-scroll::-webkit-scrollbar { display: none; }

.ptk-tabs {
  width: max-content;
  gap: 24px;
}

.ptk-tab {
  font-size: 13.5px;
}

.ptk-tab-list {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ptk-tab-count {
  font-size: 10.5px;
  font-weight: var(--weight-medium);
  color: var(--text-xmuted);
  background: rgba(113,123,155,0.12);
  border-radius: 999px;
  padding: 1px 6px;
  line-height: 1.6;
  transition: background 150ms, color 150ms;
}

.tab-active .ptk-tab-count {
  background: rgba(123,108,168,0.15);
  color: rgba(123,108,168,0.9);
}

.ptk-tab-divider {
  width: 1px;
  height: 16px;
  background: rgba(113,123,155,0.2);
  flex-shrink: 0;
  align-self: center;
}

.ptk-nav-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding-left: 8px;
  border-left: 1px solid rgba(113,123,155,0.14);
}

.ptk-main-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: var(--weight-semibold);
  color: var(--text);
}


.ptk-link-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 12.5px;
  cursor: pointer;
  border-radius: 8px;
  padding: 6px 8px;
}

.ptk-link-btn:hover {
  background: rgba(107,118,146,0.12);
  color: var(--text);
}

.ptk-icon-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 8px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ptk-icon-btn:hover {
  background: rgba(98,107,139,0.12);
  color: var(--text);
}

.ptk-icon-btn svg {
  width: 14px;
  height: 14px;
}

/* ── Sidebar estilo Lembretes ──────────────────────── */
.ptk-sidebar {
  width: 278px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 6px 18px 24px 4px;
  overflow-y: auto;
  border-right: 1px solid rgba(113,123,155,0.09);
  border-radius: 0;
  background: rgba(255,255,255,0.84);
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.48);
  align-self: stretch;
}

.ptk-sidebar-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ptk-sidebar-group--smart {
  gap: 4px;
}

.ptk-sidebar-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 0 10px 0 12px;
}

.ptk-sidebar-group-icon {
  width: 24px;
  height: 24px;
  color: rgba(27,43,75,0.58);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ptk-sidebar-group-icon svg {
  width: 22px;
  height: 22px;
}

.ptk-sidebar-group-title {
  font-size: 15px;
  font-weight: 650;
  color: rgba(27,43,75,0.88);
  letter-spacing: -0.02em;
}


.ptk-smart-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ptk-sidebar-item {
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
}

.ptk-list-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Cada lista (div clicável) */
.ptk-list-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 38px;
  padding: 0 12px;
  text-align: left;
  border-radius: 14px;
  transition: background 120ms, box-shadow 120ms, transform 120ms;
  position: relative;
  cursor: pointer;
  border: none;
  background: transparent;
  box-sizing: border-box;
}

.ptk-list-btn[draggable="true"] { cursor: grab; }
.ptk-list-btn[draggable="true"]:active { cursor: grabbing; }
.ptk-list-btn:hover { background: rgba(113,123,155,0.08); }
.ptk-list-btn--active {
  background: rgba(113,123,155,0.13);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    0 1px 0 rgba(191,201,216,0.12);
}

.ptk-list-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(69, 87, 110, 0.86);
  opacity: 1;
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}
.ptk-list-icon-wrap svg {
  width: 14px;
  height: 14px;
  stroke-width: 2;
  color: var(--list-icon-color, #6b7280);
}

.ptk-list-name {
  font-size: 15px;
  color: rgba(27,43,75,0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* Wrapper que mantém contador e "..." no mesmo slot fixo à direita */
.ptk-list-end {
  position: relative;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ptk-list-count {
  font-size: 13px;
  color: var(--text-muted);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 120ms;
  pointer-events: none;
}
.ptk-list-btn:hover .ptk-list-count { opacity: 0; }

/* Botão "..." de edição — ocupa o mesmo slot, aparece no hover */
.ptk-list-edit {
  border: none;
  background: transparent;
  color: var(--text-xmuted);
  cursor: pointer;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  flex-shrink: 0;
  transition: opacity 120ms, background 120ms;
  position: absolute;
  inset: 0;
}
.ptk-list-btn:hover .ptk-list-edit { opacity: 1; }
.ptk-list-edit:hover { background: rgba(113,123,155,0.15); color: var(--text); }

/* Popover de menu da lista (Editar / Excluir) */
.ptk-list-pop {
  background: #fff;
  border: 1px solid rgba(113,123,155,0.18);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(27,43,75,0.13), 0 1px 4px rgba(27,43,75,0.07);
  padding: 4px;
  min-width: 148px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ptk-list-pop-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: none;
  background: transparent;
  border-radius: 7px;
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background 100ms;
}
.ptk-list-pop-item:hover { background: rgba(113,123,155,0.1); }
.ptk-list-pop-item--danger { color: var(--error); }
.ptk-list-pop-item--danger:hover { background: rgba(208,48,48,0.08); }

/* "Adicionar lista" fixo no rodapé da sidebar */
.ptk-lists-add-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: auto;
  padding: 12px 12px 2px;
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: opacity 150ms;
}
.ptk-lists-add-footer:hover { opacity: 0.75; }
.ptk-lists-add-footer svg { flex-shrink: 0; }

/* ── Modal nova/editar lista ────────────────────────── */
.ptk-list-modal-body { overflow: visible; }

.ptk-list-modal-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 4px 0 8px;
  width: 100%;
}

.ptk-list-modal-preview {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 180ms;
}
.ptk-list-modal-preview-icon { color: #fff; }
.ptk-list-modal-preview-icon svg {
  width: 26px;
  height: 26px;
  stroke-width: 1.8;
}

.ptk-list-modal-colors {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: center;
}
.ptk-modal-color {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 120ms, transform 120ms;
}
.ptk-modal-color--active,
.ptk-modal-color:hover {
  border-color: rgba(0,0,0,0.25);
  transform: scale(1.15);
}

.ptk-list-modal-icons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.ptk-modal-icon-btn {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1.5px solid var(--border-soft);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.ptk-modal-icon-btn svg { width: 15px; height: 15px; }
.ptk-modal-icon-btn--active,
.ptk-modal-icon-btn:hover {
  background: rgba(123,108,168,0.10);
  border-color: rgba(123,108,168,0.40);
  color: var(--text);
}

.ptk-list-modal-input {
  width: 100%;
  height: 40px;
  border-radius: 10px;
  border: 1.5px solid var(--border-soft);
  padding: 0 14px;
  font-size: 14px;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  outline: none;
  transition: border-color 150ms;
  box-sizing: border-box;
}
.ptk-list-modal-input:focus { border-color: rgba(123,108,168,0.50); }

.ptk-list-modal-delete {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: var(--error);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 0;
  font-family: var(--font);
}
.ptk-list-modal-delete:hover { opacity: 0.75; }

/* ── Main card ─────────────────────────────────────── */
.ptk-main {
  flex: 1;
  min-width: 0;
  padding: 10px 18px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  min-height: 0;
  align-self: stretch;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ptk-main-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px 18px 2px;
  border-bottom: 1px solid rgba(113,123,155,0.10);
  margin-bottom: 12px;
}

.ptk-main-title {
  margin: 0;
  font-size: 22px;
  font-weight: 730;
  color: var(--text);
  letter-spacing: -0.45px;
}

.ptk-main-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ptk-sync-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
  padding: 5px 7px;
  border-radius: 999px;
}
.ptk-sync-status:hover { background: rgba(113,123,155,0.08); }
.ptk-sync-status > span { width: 7px; height: 7px; border-radius: 50%; background: var(--text-xmuted); }
.ptk-sync-status--synced > span { background: var(--toast-success); }
.ptk-sync-status--error { color: var(--error); }
.ptk-sync-status--error > span { background: var(--error); }

.ptk-head-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 13.5px;
  cursor: pointer;
  border-radius: 999px;
  padding: 8px 12px;
  transition: background 120ms, color 120ms;
}

.ptk-head-btn:hover {
  background: rgba(107,118,146,0.08);
  color: var(--text);
}

.ptk-head-btn--primary {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(27,43,75,0.08);
  color: var(--text);
  font-weight: 600;
}

.ptk-head-btn--primary:hover {
  background: rgba(27,43,75,0.12);
}

/* ── Nova tarefa inline ─────────────────────────────── */
.ptk-task-row--add {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 8px 12px 6px;
}
.ptk-task-add-input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  font-size: 15px;
  color: var(--text);
  outline: none !important;
  box-shadow: none !important;
  height: auto !important;
  padding: 0 !important;
  width: auto !important;
  font-family: var(--font);
}
.ptk-task-add-input::placeholder { color: var(--text-xmuted); }

/* ── Content / Task list ────────────────────────────── */
.ptk-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Seção */
.ptk-section {
  display: flex;
  flex-direction: column;
  background: transparent;
}
.ptk-section + .ptk-section {
  border-top: 1.5px solid rgba(113,123,155,0.18);
  margin-top: 6px;
}


.ptk-task-list {
  display: flex;
  flex-direction: column;
}

/* Task item */
.ptk-task {
  border-bottom: 1px solid rgba(113,123,155,0.08);
  border-radius: 12px;
  transition: background 140ms, box-shadow 140ms, border-color 140ms;
}

.ptk-task:last-child {
  border-bottom: none;
}

.ptk-task--done {
  opacity: 0.55;
}

.ptk-task.is-drop {
  background: rgba(43,101,255,0.04);
}

.ptk-task:hover {
  background: rgba(247,247,249,0.72);
}

.ptk-task-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 8px 12px 6px;
  min-height: 50px;
}

.ptk-task-body {
  flex: 1;
  min-width: 0;
}

.ptk-task-title {
  font-size: 15px;
  color: var(--text);
  line-height: 1.35;
}

.ptk-task-title--done {
  color: var(--text-xmuted);
  text-decoration: line-through;
}

.ptk-task-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.ptk-meta-item {
  font-size: 11px;
  color: var(--text-muted);
}

.ptk-meta-flag {
  color: var(--warning);
  display: flex;
  align-items: center;
}

.ptk-meta-overdue {
  color: var(--error);
}

.ptk-meta-recurrence { color: var(--accent); }
.ptk-check--series { cursor: default; border-style: dashed; opacity: 0.72; }
.ptk-dpop-series-hint {
  color: var(--text-muted);
  font-size: 11.5px;
  padding: 0 2px 6px;
}
.ptk-dpop-scope-row { margin-bottom: 6px; }
.ptk-dpop-recurrence-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ptk-dpop-recurrence-actions .btn-secondary,
.ptk-dpop-recurrence-actions .btn-ghost { font-size: 12px; padding: 5px 8px; }

/* Checkbox circular — hitbox expandido para touch (36px) via ::before */
.ptk-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(113,123,155,0.35);
  background: rgba(255,255,255,0.96);
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms, border-color 150ms;
  color: transparent;
  position: relative;
}
.ptk-check::before {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 50%;
}

.ptk-check:hover {
  border-color: rgba(113,123,155,0.6);
}

.ptk-check--done {
  background: var(--toast-success);
  border-color: var(--toast-success);
  color: #fff;
}

.ptk-check--done svg {
  width: 11px;
  height: 11px;
}

.ptk-check--sm {
  width: 16px;
  height: 16px;
}

.ptk-check--sm svg {
  width: 9px;
  height: 9px;
}

/* Botões de ação inline (aparecem no hover) */
.ptk-task-actions-inline {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity 120ms;
}

.ptk-task:hover .ptk-task-actions-inline {
  opacity: 1;
}

.ptk-action-btn {
  border: none;
  background: transparent;
  color: var(--text-xmuted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  transition: background 120ms, color 120ms;
}

.ptk-action-btn:hover {
  background: rgba(113,123,155,0.10);
  color: var(--text-muted);
}

.ptk-action-btn--flagged {
  color: var(--warning);
}

.ptk-action-btn--delete:hover {
  background: rgba(239,68,68,0.08);
  color: var(--error);
}

/* ── Subtarefas ──────────────────────────────────────── */
.ptk-subtask-list {
  padding: 0 8px 8px 34px;
  display: flex;
  flex-direction: column;
}

.ptk-task--child {
  border-bottom: none;
  border-radius: 8px;
}

.ptk-task--child .ptk-task-row {
  padding: 7px 6px 7px 4px;
  min-height: 36px;
}

.ptk-task--child .ptk-check {
  width: 15px;
  height: 15px;
  min-width: 15px;
  border-radius: 50%;
}

.ptk-task--child .ptk-task-title {
  font-size: 13.5px;
}

/* Botão + subtarefa — oculto, aparece no hover da tarefa pai */
.ptk-action-btn--add-child {
  opacity: 0;
  transition: opacity 120ms, background 120ms, color 120ms;
}
.ptk-task:hover .ptk-action-btn--add-child {
  opacity: 1;
}

/* Contador filhos na meta */
.ptk-meta-children {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Row de adição de subtarefa */
.ptk-task-row--add-child {
  padding: 6px 6px 6px 4px;
}
.ptk-task-row--add-child .ptk-check {
  width: 15px;
  height: 15px;
  min-width: 15px;
  border-radius: 50%;
  pointer-events: none;
}
.ptk-task-row--add-child .ptk-task-add-input {
  font-size: 13.5px;
}

.ptk-section-empty {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-xmuted);
  font-size: 12px;
  padding: 14px 4px;
}

/* ── Seções colapsáveis ──────────────────────────────── */
.ptk-section-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 14px 8px 6px 2px;
}
.ptk-section-head:hover .ptk-section-menu-btn { opacity: 1; }

.ptk-section-chevron-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px;
  color: var(--text-xmuted);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ptk-section-chevron {
  transition: transform 160ms;
}
.ptk-section--collapsed .ptk-section-chevron { transform: rotate(-90deg); }

.ptk-section-name-input {
  flex: 1;
  background: transparent;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  height: auto;
  width: auto;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  cursor: text;
  padding: 2px 0 !important;
  min-width: 0;
}
.ptk-section-name-input:focus,
.ptk-section-name-input:focus-visible {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: rgba(113,123,155,0.05);
}
.ptk-section-name-input--ghost {
  color: var(--text-xmuted);
  font-weight: 500;
  letter-spacing: normal;
}
.ptk-section-name-input--ghost:focus,
.ptk-section-name-input--ghost:focus-visible {
  color: var(--text);
  font-weight: 650;
  letter-spacing: 0.02em;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.ptk-section-count {
  font-size: 11px;
  color: var(--text-muted);
  background: rgba(113,123,155,0.10);
  border-radius: 999px;
  padding: 1px 6px;
  flex-shrink: 0;
}

.ptk-section-menu-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-xmuted);
  width: 22px; height: 22px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 120ms, background 120ms;
  flex-shrink: 0;
  padding: 0;
}
.ptk-section-menu-btn:hover { background: rgba(113,123,155,0.10); opacity: 1 !important; }

.ptk-section--collapsed .ptk-task-list { display: none; }

/* Ghost row — nova tarefa fantasma no final de cada seção */
.ptk-ghost-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 6px;
  cursor: text;
}
.ptk-ghost-row:hover .ptk-ghost-label { color: var(--text-muted); }
.ptk-check--ghost {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px dashed rgba(113,123,155,0.25);
  flex-shrink: 0;
}
.ptk-ghost-label {
  font-size: 14px;
  color: var(--text-muted);
  transition: color 120ms;
  user-select: none;
}

/* ── Botão ⓘ de detalhes (hover na row) ─────────────── */
.ptk-task-info-btn {
  border: none;
  background: transparent;
  color: var(--text-xmuted);
  cursor: pointer;
  width: 24px; height: 24px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 120ms, color 120ms, background 120ms;
  flex-shrink: 0;
  padding: 0;
  font-size: 14px;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
}
.ptk-task:hover .ptk-task-info-btn { opacity: 1; }
.ptk-task-info-btn:hover { background: rgba(113,123,155,0.10); color: var(--text-muted); }

/* ── Ações inline — visíveis em touch (hover não existe em Android) ── */
@media (hover: none) {
  .ptk-task-actions-inline { opacity: 1; }
  .ptk-task-info-btn { opacity: 1; }
  .ptk-action-btn--add-child { opacity: 1; }
  .ptk-section-menu-btn { opacity: 1; }
}

/* ── Inline edit do título ───────────────────────────── */
.ptk-task-title-input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  font-size: 15px;
  color: var(--text);
  outline: none !important;
  box-shadow: none !important;
  height: auto !important;
  padding: 0 !important;
  width: auto !important;
  font-family: var(--font);
  min-width: 0;
}
.ptk-task-title-input:focus-visible {
  background: rgba(113,123,155,0.06) !important;
  border-radius: 4px;
}

/* ── Drag & drop ────────────────────────────────────── */
.ptk-drop-indicator {
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  margin: 1px 0;
  pointer-events: none;
}

.ptk-drop-list-target {
  background: rgba(59,130,246,0.10) !important;
  border-radius: 6px;
  outline: 1.5px solid rgba(59,130,246,0.35);
  outline-offset: -1px;
}

/* ── Busca ──────────────────────────────────────────── */
.ptk-search-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
  max-width: 28px;
  transition: max-width 250ms cubic-bezier(0.4,0,0.2,1);
}
.ptk-search-wrap--open {
  max-width: 220px;
}
.ptk-search-input {
  flex: 1;
  min-width: 0;
  width: 160px;
  border: none !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: 13.5px;
  color: var(--text);
  font-family: var(--font);
  padding: 0 6px 0 2px !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms;
}
.ptk-search-wrap--open .ptk-search-input {
  opacity: 1;
  pointer-events: auto;
}
.ptk-search-input:focus-visible { outline: none !important; background: rgba(113,123,155,0.06) !important; border-radius: 4px; }
.ptk-search-input::placeholder { color: var(--text-xmuted); }
.ptk-search-toggle {
  flex-shrink: 0;
}
.ptk-search-icon       { display: block; }
.ptk-search-close-icon { display: none;  }
.ptk-search-wrap--open .ptk-search-icon       { display: none;  }
.ptk-search-wrap--open .ptk-search-close-icon { display: block; }

/* ── Botões icon-only do header ─────────────────────── */
.ptk-head-icon-btn {
  border: none;
  background: transparent;
  color: var(--text-xmuted);
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms, color 120ms;
  flex-shrink: 0;
  padding: 0;
}
.ptk-head-icon-btn:hover { background: rgba(113,123,155,0.10); color: var(--text); }

/* ── Balão de detalhes da tarefa ─────────────────────── */
.ptk-detail-pop {
  position: fixed;
  z-index: 9500;
  isolation: isolate;
  width: 320px;
  background: rgba(248,248,252,0.68);
  backdrop-filter: blur(48px) saturate(180%);
  -webkit-backdrop-filter: blur(48px) saturate(180%);
  border: 0.5px solid rgba(255,255,255,0.75);
  border-radius: 20px;
  box-shadow:
    0 20px 48px rgba(0,0,0,0.12),
    0 4px 12px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.5);
  animation: ag-pop-in 180ms cubic-bezier(0.32, 0.72, 0, 1);
}
.ptk-detail-pop-arrow {
  position: absolute;
  width: 12px; height: 12px;
  background: rgba(248,248,252,0.9);
  border: 0.5px solid rgba(255,255,255,0.75);
  transform: rotate(45deg);
  z-index: -1;
}
.ptk-detail-pop-arrow--left  { left: -6px;  border-right: none;  border-top: none; }
.ptk-detail-pop-arrow--right { right: -6px; border-left: none;   border-bottom: none; }
.ptk-detail-pop-arrow--top   { top: -6px;   border-bottom: none; border-right: none; }
.ptk-detail-pop-inner {
  padding: 14px 14px 10px;
  display: flex; flex-direction: column; gap: 0;
}
.ptk-detail-pop-header {
  display: flex; align-items: flex-start; gap: 8px;
  margin-bottom: 10px;
  padding-left: 6px;
}
.ptk-detail-pop-close {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border: none; background: rgba(0,0,0,0.08);
  border-radius: 50%; cursor: pointer;
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  padding: 0; transition: background 0.15s; margin-left: auto;
}
.ptk-detail-pop-close:hover  { background: rgba(0,0,0,0.13); }
.ptk-detail-pop-close:active { background: rgba(0,0,0,0.18); transform: scale(0.93); }
.ptk-detail-pop-title {
  flex: 1; min-width: 0;
  font-size: 15px; font-weight: 600;
  letter-spacing: -0.24px;
  padding: 0 !important; background: transparent !important;
  border: none !important; box-shadow: none !important; outline: none !important;
  -webkit-appearance: none; color: var(--text); width: 100% !important;
  font-family: var(--font);
}
.ptk-detail-pop-title::placeholder { color: var(--text-muted); font-weight: 400; }
.ptk-detail-pop-rows {
  display: flex; flex-direction: column; gap: 0;
  background: rgba(0,0,0,0.03);
  border: 0.5px solid rgba(0,0,0,0.07);
  border-radius: 12px; overflow: hidden; margin-bottom: 8px;
}
.ptk-detail-pop-desc {
  padding: 0 14px 10px 20px;
  margin-bottom: 8px;
}
.ptk-detail-pop-desc textarea {
  width: 100%; resize: none; font-size: 13px; color: var(--text);
  background: transparent !important; border: none !important;
  outline: none !important; box-shadow: none !important;
  appearance: none; -webkit-appearance: none;
  padding: 0 !important; overflow: hidden;
  line-height: 1.4; min-height: 20px;
  font-family: var(--font);
}
.ptk-detail-pop-desc textarea::placeholder { color: var(--text-xmuted); }
.ptk-dpop-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 14px; min-height: 44px;
  border-bottom: 0.5px solid rgba(0,0,0,0.07);
}
.ptk-dpop-row:last-child { border-bottom: none; }
.ptk-detail-pop-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 6px 4px 2px;
  border-top: 0.5px solid rgba(0,0,0,0.07);
  margin-top: 4px;
}
.ptk-dpop-delete-btn {
  display: flex; align-items: center; gap: 5px;
  border: none; background: transparent;
  color: var(--text-xmuted); font-size: 12px;
  cursor: pointer; border-radius: 7px;
  padding: 5px 8px;
  transition: background 120ms, color 120ms;
}
.ptk-dpop-delete-btn:hover {
  background: rgba(239,68,68,0.08);
  color: var(--error);
}
.ptk-dpop-lbl {
  font-size: 13px; color: var(--text-muted);
  font-weight: 400; flex-shrink: 0;
}
.ptk-dpop-val {
  font-size: 13px; color: var(--accent);
  font-weight: 400; background: none; border: none;
  padding: 0; cursor: pointer;
  text-align: right; white-space: nowrap;
  font-family: var(--font);
}
.ptk-dpop-val:active { opacity: 0.6; }
.ptk-dpop-select {
  font-size: 13px; color: var(--accent);
  background: none; border: none; outline: none;
  padding: 0 2px 0 0; cursor: pointer;
  text-align: right; direction: rtl;
  font-family: var(--font);
  margin-left: auto;
}
/* Largura com folga: o shadow DOM do input date/time centraliza e clipa dos
   DOIS lados quando o conteúdo (dd/mm/aaaa + ícone do picker) não cabe —
   116px/76px eram justos e cortavam dígitos conforme motor/zoom/fonte. */
.ptk-dpop-date-wrap {
  width: 140px; height: 32px; flex-shrink: 0;
  overflow: hidden; border: none; border-radius: 8px;
  background: rgba(0,0,0,0.05);
}
.ptk-dpop-time-wrap {
  width: 88px; height: 32px; flex-shrink: 0;
  overflow: hidden; border: none; border-radius: 8px;
  background: rgba(0,0,0,0.05);
}
.ptk-dpop-field-date,
.ptk-dpop-field-time {
  width: 100% !important; font-size: 12px;
  padding: 0 4px; height: 44px !important; margin-top: -5px;
  box-sizing: border-box; border: none !important; border-radius: 0;
  background: transparent !important; box-shadow: none !important;
  color: var(--text); cursor: pointer; display: block; outline: none;
}
.ptk-dpop-field-date[hidden],
.ptk-dpop-field-time[hidden] { display: none !important; }
.ptk-dpop-field-date::-webkit-date-and-time-value,
.ptk-dpop-field-time::-webkit-date-and-time-value { text-align: center; }
.ptk-dpop-field-date::-webkit-datetime-edit,
.ptk-dpop-field-time::-webkit-datetime-edit {
  display: flex; align-items: center; justify-content: center; min-height: 32px;
}

#pes-tab-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Shell e toolbar — espelha ag-wrap/ag-toolbar */
.pag-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 12px;
  padding-top: 16px;
}
.pag-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: 0 20px;
}
.pag-nav { display: flex; align-items: center; gap: 4px; }
.pag-nav-pill {
  width: 28px; height: 28px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(214,220,229,0.92);
  background: rgba(255,255,255,0.82);
  color: var(--accent);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 140ms, border-color 140ms;
  flex-shrink: 0;
}
.pag-nav-pill:hover { background: rgba(246,248,252,0.88); border-color: rgba(204,211,222,0.96); }
.pag-hoje-btn {
  height: 28px; padding: 0 12px;
  border: 1px solid rgba(214,220,229,0.92);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.82);
  font-size: 13px; font-weight: var(--weight-medium);
  color: var(--text-muted); cursor: pointer;
  transition: color 140ms, opacity 150ms, background 140ms, border-color 140ms;
}
.pag-hoje-btn:hover {
  color: var(--text);
  background: rgba(246,248,252,0.88);
  border-color: rgba(204,211,222,0.96);
}
.pag-hoje-btn:disabled,
.pag-hoje-btn-disabled {
  color: var(--text-xmuted);
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
  box-shadow: none;
}
.pag-periodo {
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--text);
  letter-spacing: -0.015em;
  white-space: nowrap;
  line-height: 1.2;
  margin: 0 2px;
}
/* Label clicável → mini-calendário. Caret ▾ via ::after (triângulo CSS). */
.pag-periodo-clickable {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  border-radius: 8px;
  padding: 3px 8px;
  transition: background 120ms ease;
}
.pag-periodo-clickable::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 6px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-muted);
}
.pag-periodo-clickable:hover {
  background: var(--accent-tint-1);
}
.pag-periodo-clickable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.pag-toolbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pag-view-toggle {
  display: flex; gap: 2px; padding: 3px;
  background: rgba(27, 43, 75, 0.05);
  border-radius: var(--radius-sm);
}
.pag-view-btn {
  min-height: 26px; padding: 2px 9px;
  border: none; background: transparent;
  border-radius: 7px;
  font-size: 12px; font-weight: var(--weight-medium);
  color: var(--text-muted); cursor: pointer;
  font-family: var(--font);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.pag-view-btn:hover { color: var(--text); }
.pag-view-btn-active {
  background: #FFFFFF;
  color: var(--text-ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.pag-cat-config-btn {
  width: 28px; height: 28px;
  border: 1px solid rgba(214,220,229,0.92);
  border-radius: 9px;
  color: var(--accent);
  background: rgba(255,255,255,0.82);
}
.pag-cat-config-btn:hover { background: rgba(246,248,252,0.88); }
.pag-google-sync-btn.is-synced {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
}
.pag-google-sync-btn.is-synced:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
}

/* Google Calendar — configuração com estado primeiro e detalhes progressivos. */
.pag-google-config {
  gap: var(--space-4);
  color: var(--text);
}

.pag-google-status-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid rgba(42, 62, 102, 0.12);
  border-radius: var(--radius-lg);
  background: rgba(42, 62, 102, 0.045);
}

.pag-google-status-card.is-active {
  border-color: rgba(47, 115, 93, 0.18);
  background: rgba(47, 115, 93, 0.06);
}

.pag-google-status-heading {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
}

.pag-google-status-icon {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(42, 62, 102, 0.09);
  flex: none;
}

.pag-google-status-card.is-active .pag-google-status-icon {
  background: #2f735d;
  box-shadow: 0 0 0 4px rgba(47, 115, 93, 0.1);
}

.pag-google-status-card h3,
.pag-google-section-heading h3 {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--weight-semibold);
}

.pag-google-status-card p,
.pag-google-section-heading p {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.pag-google-primary-action {
  flex: none;
  min-height: 40px;
}

.pag-google-calendars {
  padding: 0 var(--space-1);
}

.pag-google-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.pag-google-calendar-list,
.pag-google-source-list,
.pag-google-rule-list,
.pag-google-preview-classes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pag-google-calendar-list {
  border-top: 1px solid var(--border-soft);
}

.pag-google-calendar-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 52px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-soft);
}

.pag-google-calendar-dot,
.pag-google-rule-dot {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(27, 43, 75, 0.14);
  border-radius: 50%;
  background: var(--pag-google-calendar-color);
  flex: none;
}

.pag-google-rule-dot {
  width: 14px;
  height: 14px;
  background: var(--pag-google-rule-color);
}

.pag-google-calendar-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pag-google-calendar-copy strong {
  color: var(--text);
  font-size: 14px;
  font-weight: var(--weight-medium);
}

.pag-google-calendar-copy span {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pag-google-calendar-state,
.pag-google-disclosure-state {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(42, 62, 102, 0.07);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.pag-google-disclosure-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pag-google-disclosure-state::after {
  content: '›';
  font-size: 16px;
  line-height: 1;
}

.pag-google-disclosure[open] > summary .pag-google-disclosure-state::after {
  transform: rotate(90deg);
}

.pag-google-calendar-state.is-ready {
  background: rgba(47, 115, 93, 0.09);
  color: #285f4e;
}

.pag-google-calendar-state.is-warning {
  background: var(--s-falta-bg);
  color: var(--s-falta);
}

.pag-google-disclosure {
  overflow: clip;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: #fff;
}

.pag-google-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 58px;
  padding: 12px var(--space-4);
  cursor: pointer;
  list-style: none;
}

.pag-google-disclosure > summary::-webkit-details-marker {
  display: none;
}

.pag-google-disclosure > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius-md);
}

.pag-google-disclosure > summary > span:first-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pag-google-disclosure > summary strong {
  color: var(--text);
  font-size: 14px;
  font-weight: var(--weight-medium);
}

.pag-google-disclosure > summary small {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.pag-google-disclosure[open] > summary {
  border-bottom: 1px solid var(--border-soft);
  background: rgba(246, 248, 252, 0.7);
}

.pag-google-disclosure-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
}

.pag-google-disclosure:not([open]) > .pag-google-disclosure-body {
  display: none;
}

.pag-google-section-lead {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
}

.pag-google-section-lead strong {
  color: var(--text);
  font-size: 14px;
  font-weight: var(--weight-medium);
}

.pag-google-section-lead span,
.pag-google-help,
.pag-google-source > p,
.pag-google-preview-summary,
.pag-google-cutover-dry-run,
.pag-google-warning,
.pag-google-account-email {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.pag-google-source-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pag-google-source {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
}

.pag-google-source-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pag-google-source-heading strong {
  color: var(--text);
  font-size: 13px;
  font-weight: var(--weight-medium);
}

.pag-google-source-heading span {
  color: var(--text-muted);
  font-size: 11px;
}

.pag-google-source > p {
  margin-top: 2px;
}

.pag-google-rule-list {
  margin-top: var(--space-2);
}

.pag-google-rule-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(150px, 200px);
  align-items: center;
  gap: var(--space-2);
  padding: 5px 0;
  color: var(--text-muted);
  font-size: 13px;
}

.pag-google-rule-row.is-readonly {
  grid-template-columns: auto minmax(0, 1fr);
}

.pag-google-rule-row select {
  width: 100%;
}

.pag-google-examples {
  grid-column: 2 / -1;
  color: var(--text-muted);
  font-size: 12px;
}

.pag-google-examples summary {
  cursor: pointer;
}

.pag-google-examples ul {
  margin: 6px 0 0 18px;
  padding: 0;
}

.pag-google-preview-summary,
.pag-google-cutover-dry-run {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: rgba(42, 62, 102, 0.045);
}

.pag-google-preview-summary p,
.pag-google-cutover-dry-run p {
  margin: 0;
}

.pag-google-preview-summary p + p,
.pag-google-cutover-dry-run p + p {
  margin-top: var(--space-2);
}

.pag-google-preview-summary strong,
.pag-google-preview-summary strong + span {
  display: block;
}

.pag-google-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pag-google-action-row:empty {
  display: none;
}

.pag-google-account-email {
  overflow-wrap: anywhere;
}

.pag-google-warning {
  color: var(--s-falta);
}

@media (max-width: 600px) {
  .pag-google-status-card {
    align-items: stretch;
    flex-direction: column;
  }

  .pag-google-primary-action,
  .pag-google-action-row > button {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  .pag-google-calendar-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .pag-google-calendar-state {
    grid-column: 2;
    justify-self: start;
  }

  .pag-google-disclosure > summary {
    align-items: flex-start;
  }

  .pag-google-disclosure-state {
    white-space: normal;
  }

  .pag-google-rule-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .pag-google-rule-row select,
  .pag-google-examples {
    grid-column: 2 / -1;
  }
}

.pag-quick-add {
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 12px 0 10px;
  border-radius: 9px;
  border: 1px solid rgba(214,220,229,0.92);
  background: rgba(255,255,255,0.82);
  color: var(--text);
  font-family: var(--font);
  cursor: pointer;
  transition: background 140ms, color 140ms, border-color 140ms;
}
.pag-quick-add:hover {
  background: rgba(246,248,252,0.88);
  border-color: rgba(204,211,222,0.96);
  color: var(--text-ink);
}
.pag-quick-add svg { color: var(--text-muted); }
.pag-quick-add:hover svg { color: var(--text); }
.pag-quick-add-label {
  font-size: 13px; font-weight: var(--weight-medium); line-height: 1;
}
@media (max-width: 767px) {
  .pag-quick-add-label { display: none; }
  .pag-quick-add { padding: 0; width: 28px; justify-content: center; gap: 0; }
}

/* Calendar container — sangra as bordas laterais do padding do #view */
.pag-calendar-wrap {
  flex: 1; min-height: 0;
  overflow: hidden;
  width: calc(100% + 128px);
  margin-left: -64px;
  margin-right: -64px;
}
.pag-calendar {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative; /* âncora do .cal-empty-overlay */
}

/* Dica de "nada agendado" sobreposta à grade (Dia/Semana/Mês pessoal e Dia
   clínica). A grade fica renderizada por baixo — pointer-events:none deixa o
   dblclick-criar passar; só o card interno recebe clique (botão). */
.cal-empty-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
  z-index: 5;
}
.cal-empty-overlay .empty-state {
  /* Fix: o card cobria vários dias do mês e interceptava o clique que deveria
     abrir a vista diária. Só controles reais do card recebem pointer events. */
  pointer-events: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 28px 32px;
  max-width: 380px;
}
.cal-empty-overlay .empty-state :is(button, a, input, select, textarea) {
  pointer-events: auto;
}

/* ── Vista Dia — layout com painel de tarefas ── */
.pag-dia-layout {
  display: flex;
  gap: 0;
  height: 100%;
  min-height: 0;
}
.pag-dia-wrap {
  display: flex; flex-direction: column;
  height: 100%; min-height: 0;
  flex: 1 1 0;
  min-width: 0;
}
.pag-dia-grid { flex: 1; overflow-y: auto; overflow-x: hidden; position: relative; }

/* Painel lateral de tarefas */
.pag-dia-tasks {
  /* Feature: 320px fixo (era 50%) — devolve o foco ao calendário na vista Dia. */
  width: 320px;
  flex-shrink: 0;
  border-left: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
}
.pag-dt-head {
  display: flex; align-items: center; gap: 8px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(228,232,239,0.7);
  flex-shrink: 0;
}
.pag-dt-label {
  font-size: 20px; font-weight: var(--weight-bold);
  color: var(--text-strong);
  flex: 1; letter-spacing: -0.02em;
}
.pag-dt-count {
  font-size: 11px; font-weight: var(--weight-semibold);
  background: rgba(27,43,75,0.08); color: var(--text-muted);
  border-radius: 8px; padding: 2px 7px;
}
.pag-dt-add-icon {
  width: 26px; height: 26px; border-radius: 50%;
  border: none; background: rgba(113,123,155,0.08);
  color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 120ms, color 120ms;
}
.pag-dt-add-icon:hover { background: var(--accent-light); color: var(--accent); }
.pag-dt-list {
  flex: 1; overflow-y: auto;
  padding: 4px 0;
}
.pag-dia-tasks .ptk-task { padding-inline: 8px; }
.pag-dia-tasks .ptk-task-row { padding-left: 14px; }
.pag-dt-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-10);
  color: var(--text-muted);
  font-size: var(--size-base);
  text-align: center;
}
/* Itens — espelha hw-task do widget */
.pag-dt-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 18px;
  cursor: pointer;
  transition: background 100ms;
}
.pag-dt-item:hover { background: rgba(27,43,75,0.03); }
.pag-dt-item--done { opacity: 0.45; }
.pag-dt-item--done .pag-dt-title { text-decoration: line-through; }
.pag-dt-check {
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: 50%; border: 1.5px solid rgba(113,123,155,0.28);
  background: transparent; cursor: pointer; padding: 0;
  color: transparent;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 140ms, background 140ms, color 140ms;
}
.pag-dt-check:hover { border-color: #1A7A4A; color: #1A7A4A; }
.pag-dt-check--done { background: var(--accent); border-color: var(--accent); color: #fff; }
.pag-dt-title {
  flex: 1;
  font-size: 14px; line-height: 1.4;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pag-dt-meta {
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
}
.pag-dt-flag { color: #F59E0B; display: flex; align-items: center; }
.pag-dt-due { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.pag-dt-due--overdue { color: #E03131; }
.pag-dt-done-group { opacity: 0.6; }
.pag-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  min-height: 50px;
  border-bottom: 1px solid var(--border-soft);
  position: relative;
}
.pag-time-label {
  font-size: 12px;
  color: rgba(107,114,128,0.92);
  padding: 10px 12px 0 0;
  display: flex; align-items: flex-start; justify-content: flex-end;
  border-right: 1px solid var(--border-soft);
  user-select: none;
  letter-spacing: -0.01em;
}
.pag-cell {
  position: relative;
  min-height: 50px;
  padding: 4px 5px;
  overflow: visible;
  cursor: pointer;
  transition: background 100ms;
}
.pag-cell:hover { background: transparent; }
.pag-cell.pag-drop-hover,
.pag-mes-cell.pag-drop-hover {
  background: var(--accent-soft);
}

/* ── Vista Semana ── */
.pag-semana-wrap {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0;
  min-width: 0;
}
.pag-header {
  display: grid;
  grid-template-columns: 72px repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--border-soft);
  background: transparent;
  flex-shrink: 0;
  position: sticky; top: 0; z-index: 2;
}
.pag-time-gutter {
  border-right: 1px solid var(--border-soft);
  background: transparent;
}
.pag-col-header {
  padding: 8px 8px 9px;
  text-align: center;
  border-right: 1px solid var(--border-soft);
}
.pag-col-header[data-day-jump] { cursor: pointer; }
.pag-col-header[data-day-jump]:hover { background: var(--hover-subtle); }
.pag-col-header:last-child { border-right: none; }
.pag-col-hoje { background: rgba(246,248,252,0.78); }
.pag-dow {
  display: inline;
  font-size: 12px; color: var(--text-muted);
  letter-spacing: 0.01em; line-height: 1;
}
.pag-day-num {
  display: inline;
  font-size: 13px; font-weight: 560;
  color: var(--text);
}
.pag-day-hoje {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px;
  padding: 0 6px; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-weight: 620; font-size: 12px;
}
.pag-body {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  position: relative; background: transparent;
}
.pag-body .pag-row {
  grid-template-columns: 72px repeat(7, minmax(0, 1fr));
}
.pag-body .pag-cell {
  border-right: 1px solid var(--border-soft);
}
.pag-body .pag-cell:last-child { border-right: none; }

/* ── Vista Mês ── */
/* Agenda pessoal — view mês: copiada de .ag-mes-* (médico) */
.pag-mes-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: transparent;
}

.pag-mes-header {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--border-soft);
  background: transparent;
}

.pag-mes-dow {
  padding: 14px 12px;
  font-size: 12px;
  font-weight: 560;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0.01em;
  text-align: center;
  border-right: 1px solid var(--border-soft);
}
.pag-mes-dow:last-child { border-right: none; }

.pag-mes-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  align-content: start;
  background: transparent;
}

.pag-mes-cell {
  min-width: 0;
  min-height: 150px;
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: 10px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: background 0.1s;
  text-align: left;
  background: transparent;
}

.pag-mes-cell:hover { box-shadow: inset 0 0 0 9999px var(--hover-subtle); }

.pag-mes-cell:nth-child(7n) { border-right: none; }

.pag-mes-cell-vazia {
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-tint);
  cursor: default;
}

.pag-mes-cell.pag-mes-hoje {
  background: rgba(246, 248, 252, 0.68);
}

.pag-mes-cell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 28px;
}

.pag-mes-cell-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
}

.pag-mes-dia-num {
  font-size: 13px;
  font-weight: 560;
  color: var(--text-muted);
  line-height: 1;
  padding: 0;
  align-self: flex-start;
}

.pag-mes-dia-hoje {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  font-weight: 620;
  font-size: 12px;
}

.pag-mes-mais {
  font-size: 11px;
  color: var(--text-muted);
  padding: 2px 0 0;
  cursor: pointer;
  margin-top: auto;
  align-self: flex-start;
}

.pag-mes-mais:hover { color: var(--accent); }

/* ── Chips dia/semana — espelha ag-event ── */
.pag-chip {
  position: absolute;
  left: 2px; right: 2px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  padding: 3px 6px;
  font-size: var(--size-xs);
  line-height: 1.3;
  text-align: left;
  overflow: hidden;
  display: flex; flex-direction: column;
  gap: 1px;
  min-height: 0;
  z-index: 2;
  box-sizing: border-box;
  transition: filter 100ms;
}
.pag-chip--compact {
  padding: 0 5px;
  gap: 0;
}
.pag-chip--compact .pag-chip-titulo {
  font-size: 10px;
  line-height: 1;
}
.pag-chip--compact .pag-chip-cat { display: none; }
.pag-chip--micro .pag-chip-titulo { opacity: 0; }
.pag-chip:hover { filter: brightness(0.95); }
.pag-chip-titulo {
  font-weight: var(--weight-semibold);
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; justify-content: space-between; gap: 3px;
}
.pag-chip-cat { color: var(--text-muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pag-chip-rec { display: inline-flex; align-items: center; opacity: 0.7; flex-shrink: 0; }

/* Resize vertical (desktop, Dia/Semana). A área de 8px facilita acertar a
   borda; a mudança visual continua discreta e não compete com o conteúdo. */
.pag-chip-resize-handle {
  position: absolute;
  left: 0;
  right: 0;
  height: 8px;
  cursor: ns-resize;
  z-index: 3;
  touch-action: none;
}
.pag-chip-resize-handle::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 100ms;
}
.pag-chip-resize-top { top: 0; }
.pag-chip-resize-bottom { bottom: 0; }
.pag-chip-resize-top::after { top: 2px; }
.pag-chip-resize-bottom::after { bottom: 2px; }
.pag-chip:hover .pag-chip-resize-handle::after,
.pag-chip:focus-visible .pag-chip-resize-handle::after,
.pag-chip.is-resizing .pag-chip-resize-handle::after { opacity: 0.35; }
.pag-chip.is-resizing { filter: brightness(0.93); }

/* Linha e horário-alvo compartilhados por drag e resize. `top`, `left` e
   `width` vêm do mesmo cálculo de snap usado na persistência. */
.pag-gesture-guide-line {
  position: absolute;
  display: none;
  height: 0;
  border-top: 1px dashed var(--accent);
  pointer-events: none;
  z-index: var(--z-dropdown);
}
.pag-gesture-guide-pill {
  position: absolute;
  left: 8px;
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
  transform: translateY(-50%);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
  pointer-events: none;
  z-index: var(--z-dropdown);
}
@media (pointer: coarse) {
  .pag-chip-resize-handle { display: none; }
}

/* Chips do mês — espelha ag-mes-chip */
.pag-mes-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 2px 5px 2px 0; border-radius: 5px;
  font-size: 11px; font-weight: var(--weight-medium);
  cursor: pointer; overflow: hidden; white-space: nowrap;
  min-height: 22px; background: transparent; color: var(--text);
}
.pag-mes-chip-bar { width: 3px; align-self: stretch; border-radius: 2px 0 0 2px; flex-shrink: 0; }
.pag-mes-chip-titulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; white-space: nowrap; }
.pag-mes-chip-hora { font-size: 10px; color: var(--text-muted); flex-shrink: 0; }
.pag-mes-chip:hover { background: rgba(27,43,75,0.04); }

/* Cores dos chips — paleta pastel exclusiva da Agenda Pessoal */
/* Dia/Semana: fundo pastel + borda esquerda */
.pag-ev-agendada   { background: var(--pag-cat1-bg); border-left: 3px solid var(--pag-cat1); color: var(--pag-cat1); }
.pag-ev-confirmada { background: var(--pag-cat2-bg); border-left: 3px solid var(--pag-cat2); color: var(--pag-cat2); }
.pag-ev-atendida   { background: var(--pag-cat3-bg); border-left: 3px solid var(--pag-cat3); color: var(--pag-cat3); }
.pag-ev-falta      { background: var(--pag-cat4-bg); border-left: 3px solid var(--pag-cat4); color: var(--pag-cat4); }
.pag-ev-cancelada  { background: var(--pag-cat5-bg); border-left: 3px solid var(--pag-cat5); color: var(--pag-cat5); }
/* Mês: fundo transparente, cor na bar */
.pag-mes-chip.pag-ev-agendada   { background: transparent; border-left: none; color: var(--text); }
.pag-mes-chip.pag-ev-confirmada { background: transparent; border-left: none; color: var(--text); }
.pag-mes-chip.pag-ev-atendida   { background: transparent; border-left: none; color: var(--text); }
.pag-mes-chip.pag-ev-falta      { background: transparent; border-left: none; color: var(--text); }
.pag-mes-chip.pag-ev-cancelada  { background: transparent; border-left: none; color: var(--text); }
.pag-mes-chip.pag-ev-agendada   .pag-mes-chip-bar { background: var(--pag-cat1); }
.pag-mes-chip.pag-ev-confirmada .pag-mes-chip-bar { background: var(--pag-cat2); }
.pag-mes-chip.pag-ev-atendida   .pag-mes-chip-bar { background: var(--pag-cat3); }
.pag-mes-chip.pag-ev-falta      .pag-mes-chip-bar { background: var(--pag-cat4); }
.pag-mes-chip.pag-ev-cancelada  .pag-mes-chip-bar { background: var(--pag-cat5); }

/* Estado selecionado — fundo sólido da categoria */
.pag-chip-selected.pag-ev-agendada   { background: var(--pag-cat1-sel) !important; color: #fff !important; border-left-color: transparent !important; filter: none; }
.pag-chip-selected.pag-ev-confirmada { background: var(--pag-cat2-sel) !important; color: #fff !important; border-left-color: transparent !important; filter: none; }
.pag-chip-selected.pag-ev-atendida   { background: var(--pag-cat3-sel) !important; color: #fff !important; border-left-color: transparent !important; filter: none; }
.pag-chip-selected.pag-ev-falta      { background: var(--pag-cat4-sel) !important; color: #fff !important; border-left-color: transparent !important; filter: none; }
.pag-chip-selected.pag-ev-cancelada  { background: var(--pag-cat5-sel) !important; color: #fff !important; border-left-color: transparent !important; filter: none; }
.pag-chip-selected .pag-chip-titulo,
.pag-chip-selected .pag-chip-cat     { color: #fff !important; }

/* Dot de legenda */
.pag-legend-dot {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.pag-legend-dot.pag-ev-agendada   { background: var(--pag-cat1); }
.pag-legend-dot.pag-ev-confirmada { background: var(--pag-cat2); }
.pag-legend-dot.pag-ev-atendida   { background: var(--pag-cat3); }
.pag-legend-dot.pag-ev-falta      { background: var(--pag-cat4); }
.pag-legend-dot.pag-ev-cancelada  { background: var(--pag-cat5); }

/* Legenda — details/summary colapsável, espelha ag-legend-collapsible */
.pag-legend-collapsible {
  flex-shrink: 0;
  padding: 4px 20px 8px;
}
.pag-legend-summary {
  display: inline-block;
  font-size: var(--size-xs);
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
  list-style: none;
}
.pag-legend-summary::-webkit-details-marker { display: none; }
.pag-legend-summary::before {
  content: '▸ ';
  font-size: 9px;
  color: var(--text-xmuted);
  transition: transform 120ms;
  display: inline-block;
}
.pag-legend-collapsible[open] .pag-legend-summary::before { content: '▾ '; }
.pag-legend-summary:hover { color: var(--text); }
.pag-legend {
  display: flex; flex-wrap: wrap; gap: 12px;
  padding: 8px 0 0;
  font-size: 12px;
  flex-shrink: 0;
}
.pag-legend-item { display: flex; align-items: center; gap: 6px; }
.pag-legend-label { color: var(--text-muted); font-size: var(--size-xs); }

/* Painel de tarefas — colapsa quando vazio */
.pag-dia-tasks--empty {
  width: 0 !important;
  overflow: hidden !important;
  border-left: none !important;
}

/* Linha de hora atual — espelha ag-now-line */
.pag-now-line {
  position: absolute;
  height: 2px;
  background: var(--pag-cat1);
  opacity: 0.7;
  pointer-events: none;
  z-index: 20;
  transition: top 1s linear;
}
.pag-now-line::before {
  content: '';
  position: absolute;
  left: -4px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pag-cat1);
  opacity: 1;
  z-index: 21;
}

/* ── Balão de detalhes — espelha ag-detail-pop ── */
.pag-detail-pop {
  position: fixed;
  z-index: 9500;
  isolation: isolate;
  width: 400px;
  background: rgba(248,248,252,0.68);
  backdrop-filter: blur(48px) saturate(180%);
  -webkit-backdrop-filter: blur(48px) saturate(180%);
  border: 0.5px solid rgba(255,255,255,0.75);
  border-radius: 20px;
  box-shadow:
    0 20px 48px rgba(0,0,0,0.12),
    0 4px 12px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.5);
  animation: ag-pop-in 180ms cubic-bezier(0.32, 0.72, 0, 1);
}
.pag-detail-pop-arrow {
  position: absolute;
  width: 12px; height: 12px;
  background: rgba(248,248,252,0.9);
  border: 0.5px solid rgba(255,255,255,0.75);
  transform: rotate(45deg);
  z-index: -1;
}
.pag-detail-pop-arrow--left  { left: -6px;  border-right: none;  border-top: none;    }
.pag-detail-pop-arrow--right { right: -6px; border-left: none;   border-bottom: none; }
.pag-detail-pop-arrow--top   { top: -6px;   border-bottom: none; border-right: none;  }
.pag-detail-pop-inner {
  padding: 14px 14px 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.pag-detail-pop-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.pag-detail-pop-close {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border: none; background: rgba(0,0,0,0.08);
  border-radius: 50%; cursor: pointer;
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  padding: 0; transition: background 0.15s; margin-left: auto;
}
.pag-detail-pop-close:hover  { background: rgba(0,0,0,0.13); }
.pag-detail-pop-close:active { background: rgba(0,0,0,0.18); transform: scale(0.93); }
.pag-detail-pop-meta {
  display: flex; flex-direction: column; gap: 0;
  background: rgba(0,0,0,0.03);
  border: 0.5px solid rgba(0,0,0,0.07);
  border-radius: 12px; overflow: hidden; margin-bottom: 8px;
}
.pag-dpop-datetime-row, .pag-dpop-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 14px; min-height: 44px;
  border-bottom: 0.5px solid rgba(0,0,0,0.07);
}
.pag-dpop-row { border-bottom: none; }
.pag-dpop-dt-lbl {
  font-size: 13px; color: var(--text-muted);
  font-weight: 400; width: 58px; flex-shrink: 0;
}
.pag-dpop-dt-group { display: flex; align-items: center; gap: 6px; }
.pag-detail-pop-rows {
  display: flex; flex-direction: column; gap: 0;
  background: rgba(0,0,0,0.03);
  border: 0.5px solid rgba(0,0,0,0.07);
  border-radius: 12px; overflow: hidden; margin-bottom: 8px;
}
.pag-detail-pop-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 14px; min-height: 44px;
  border-bottom: 0.5px solid rgba(0,0,0,0.07);
}
.pag-detail-pop-row:last-child { border-bottom: none; }
.pag-detail-pop-row--obs { align-items: center; min-height: 44px; height: auto; }
.pag-detail-pop-row--obs > .pag-dpop-field-obs { width: 100%; max-width: none; }
.pag-detail-pop-lbl {
  font-size: 13px; color: var(--text-muted);
  font-weight: 400; flex-shrink: 0;
}
.pag-detail-pop-row > .pag-dpop-value-btn,
.pag-detail-pop-row > .pag-dpop-field-obs { width: 178px; max-width: 178px; margin-left: auto; }
.pag-detail-pop-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 8px; border-top: 0.5px solid rgba(0,0,0,0.07);
}
.pag-detail-pop-footer-right { display: flex; align-items: center; gap: 4px; }

/* Campos do balão — espelha ag-chip-body-field */
.pag-dpop-field { width: auto !important; }
.pag-dpop-field-title {
  flex: 1; min-width: 0;
  font-size: 15px; font-weight: 600;
  letter-spacing: -0.24px;
  padding: 0 !important; background: transparent !important;
  border: none !important; box-shadow: none !important; outline: none !important;
  -webkit-appearance: none; color: var(--text); width: 100% !important;
}
.pag-dpop-field-title::placeholder { color: var(--text-muted); font-weight: 400; }
.pag-dpop-date-wrap {
  width: 130px; height: 32px; flex-shrink: 0;
  overflow: hidden; border: none; border-radius: 8px;
  background: rgba(0,0,0,0.05);
  display: flex; align-items: center;
}
.pag-dpop-time-wrap {
  width: 100px; height: 32px; flex-shrink: 0;
  overflow: visible; border: none; border-radius: 8px;
  background: rgba(0,0,0,0.05);
  display: flex; align-items: center;
}
.pag-dpop-field-date,
.pag-dpop-field-time {
  width: 100% !important; font-size: 12px;
  padding: 0 4px; height: 32px !important; margin-top: 0;
  box-sizing: border-box; border: none !important; border-radius: 0;
  background: transparent !important; box-shadow: none !important;
  color: var(--text); cursor: pointer; display: block; outline: none;
  line-height: 32px;
}
.pag-dpop-field-date::-webkit-date-and-time-value,
.pag-dpop-field-time::-webkit-date-and-time-value { text-align: center; }
.pag-dpop-field-date::-webkit-datetime-edit,
.pag-dpop-field-time::-webkit-datetime-edit {
  display: flex; align-items: center; justify-content: center; height: 32px; min-height: 0;
}
.pag-dpop-field-obs {
  flex: 1; min-width: 0; resize: none; font-size: 13px; color: var(--text);
  background: transparent !important; border: none !important;
  outline: none !important; box-shadow: none !important;
  appearance: none; -webkit-appearance: none;
  padding: 0 !important; overflow: hidden;
  transition: height 160ms ease; line-height: 1.4; height: 20px; min-height: 20px;
}
.pag-dpop-value-btn {
  font-size: 13px; color: var(--accent);
  font-weight: 400; background: none; border: none;
  padding: 0; cursor: pointer;
  text-align: right; white-space: nowrap;
}
.pag-dpop-value-btn:active { opacity: 0.6; }
.pag-dpop-cat-btn {
  display: flex; align-items: center; gap: 6px;
  justify-content: flex-end;
}

@media (max-width: 640px) {
  .pag-body .pag-row { grid-template-columns: 40px repeat(7, minmax(80px, 1fr)); }
  .pag-header { grid-template-columns: 40px repeat(7, minmax(80px, 1fr)); }
  .ptk-wrap {
    flex-direction: column;
    padding: 12px;
  }
  .ptk-sidebar {
    width: auto;
    align-self: auto;
  }
}

/* ============================================================
   Drawer (componente único, bottom-right)
   Usado via openDrawer() em components/drawer.js
   ============================================================ */

.drawer-sheet {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding: var(--drawer-offset);
  pointer-events: none;
}
.drawer-sheet > * { pointer-events: auto; }

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: var(--overlay-backdrop);
  backdrop-filter: blur(var(--overlay-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--overlay-backdrop-blur));
  border: none;
  cursor: pointer;
  animation: drawer-fade-in 180ms ease-out both;
}

.drawer-panel {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-hairline-strong);
  border-radius: var(--drawer-radius);
  box-shadow: 0 0 2px rgba(175,178,206,0.44), 0 10px 24px rgba(11,15,32,0.05);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - calc(var(--drawer-offset) * 2));
  width: 100%;
  overflow: hidden;
  animation: drawer-pop-in var(--duration-pop) var(--easing-pop) both;
  /* Tokens de padding do header — sobrescrevem o :root mobile (14px) */
  --drawer-head-pad-y: 14px;
  --drawer-head-pad-x: 16px;
  --drawer-pill-margin-y: 0px;
  --drawer-pill-margin-x: 0px;
}

.drawer-panel--sm { max-width: var(--drawer-width-sm); }
.drawer-panel--md { max-width: var(--drawer-width-md); }
.drawer-panel--lg { max-width: var(--drawer-width-lg); }

.drawer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Scrollbar escondida — drawer cresce até max-height do panel; quando
     passa, scroll funciona mas sem chrome visível. Mantém estética calma
     do projeto. */
  scrollbar-width: none;
}
.drawer-body::-webkit-scrollbar {
  display: none;
}

.drawer-footer {
  flex-shrink: 0;
  background: var(--bg-card);
}

/* ===== Padrão de botões dos drawers (Apple-like) ===== */

.drawer-head {
  display: flex;
  align-items: flex-start;
  gap: var(--drawer-pill-gap);
  padding: var(--drawer-head-pad-y) var(--drawer-head-pad-x);
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
  background: var(--bg-card);
  /* Sticky no topo do .drawer-body — não rola junto com o conteúdo.
     z-index acima do conteúdo que passa por trás. */
  position: sticky;
  top: 0;
  z-index: 2;
}
.drawer-head-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
  padding: 2px 6px 0;
}
.drawer-head-actions {
  display: flex;
  align-items: center;
  gap: var(--drawer-pill-gap);
  flex-shrink: 0;
}

.drawer-pill {
  width: var(--drawer-pill-size);
  height: var(--drawer-pill-size);
  border-radius: var(--drawer-pill-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--drawer-pill-border);
  color: var(--text-ink);
  cursor: pointer;
  transition: background var(--duration-pop) ease, border-color var(--duration-pop) ease, transform 80ms ease;
  padding: 0;
  flex-shrink: 0;
  align-self: flex-start;
  /* Compensa o padding do painel para grudar na borda do border-radius */
  margin-top: var(--drawer-pill-margin-y);
}
.drawer-head > .drawer-pill:first-child {
  margin-left: var(--drawer-pill-margin-x);
}
.drawer-head > .drawer-pill:last-child {
  margin-right: var(--drawer-pill-margin-x);
}
.drawer-pill:hover {
  background: var(--drawer-pill-bg-hover);
  border-color: var(--drawer-pill-border-h);
}
.drawer-pill:active { transform: scale(0.96); }
.drawer-pill svg { display: block; }

.drawer-footer-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--drawer-footer-action-gap);
  padding: var(--drawer-footer-pad-top) var(--drawer-footer-pad-x) var(--drawer-footer-pad-bot);
  border-top: 1px solid var(--border-soft);
  background: var(--bg-card);
  flex-shrink: 0;
}
.drawer-footer-action {
  width: var(--drawer-footer-action-size);
  height: var(--drawer-footer-action-size);
  border-radius: var(--drawer-pill-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--text-ink);
  cursor: pointer;
  transition: color var(--duration-pop) ease, opacity var(--duration-pop) ease;
  padding: 0;
}
.drawer-footer-action:hover {
  background: transparent;
  opacity: 0.68;
}
.drawer-footer-action svg { display: block; }

/* Variante labeled: ícone + texto pra ações de navegação claras */
.drawer-footer-action--labeled {
  width: auto;
  padding: 0 16px;
  gap: 8px;
  font-size: 13px;
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.drawer-footer-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--drawer-footer-pad-top) var(--drawer-footer-pad-x) var(--drawer-footer-pad-bot);
  border-top: 1px solid var(--border-soft);
  background: var(--bg-card);
  flex-shrink: 0;
}

.drawer-footer-destructive {
  display: flex;
  justify-content: center;
  padding: var(--drawer-footer-pad-top) var(--drawer-footer-pad-x) var(--drawer-footer-pad-bot);
  border-top: 1px solid var(--border-soft);
  background: var(--bg-card);
  flex-shrink: 0;
}
.drawer-footer-destructive button {
  background: transparent;
  border: 0;
  color: var(--text-ink);
  font-size: var(--drawer-destructive-font);
  font-weight: var(--drawer-destructive-weight);
  padding: var(--drawer-destructive-pad-y) var(--drawer-destructive-pad-x);
  border-radius: var(--drawer-destructive-radius);
  cursor: pointer;
  transition: background var(--duration-pop) ease;
}
.drawer-footer-destructive button:hover {
  background: var(--drawer-destructive-bg-hover);
}

@keyframes drawer-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes drawer-pop-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.drawer-sheet--closing .drawer-backdrop {
  animation: drawer-fade-out 160ms ease-in both;
}
.drawer-sheet--closing .drawer-panel {
  animation: drawer-pop-out 160ms ease-in both;
}
@keyframes drawer-fade-out {
  to { opacity: 0; }
}
@keyframes drawer-pop-out {
  to { opacity: 0; transform: translateY(8px); }
}

/* Mobile: bottom sheet — vem de baixo, cobre largura, gruda no fundo sem vão */
@media (max-width: 767px) {
  .drawer-sheet {
    align-items: flex-end;
    justify-content: stretch;
    padding: 0;
  }
  .drawer-panel,
  .drawer-panel--sm,
  .drawer-panel--md,
  .drawer-panel--lg {
    max-width: 100%;
    width: 100%;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 90vh;
    /* Cobre até a borda inferior da tela (safe area pro home indicator) */
    padding-bottom: env(safe-area-inset-bottom, 0);
    /* Vem de baixo com animação visível, não scale-fade */
    animation: drawer-slide-up 260ms cubic-bezier(0.32, 0.72, 0, 1) both;
  }
  .drawer-sheet--closing .drawer-panel {
    animation: drawer-slide-down 220ms cubic-bezier(0.32, 0, 0.67, 0) both;
  }

  /* Drawer legado do Financeiro (#fin-drawer) vira bottom sheet também */
  .fin-drawer {
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    transform: translateY(100%) !important;
    transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1), opacity 160ms ease !important;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .fin-shell.fin-shell-has-drawer .fin-drawer {
    transform: translateY(0) !important;
  }
  /* Shell interno encosta nas bordas, sem border-radius próprio */
  .fin-drawer .fin-drawer-shell {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    border: 0;
    box-shadow: none;
    max-height: 90vh;
  }
}

@keyframes drawer-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes drawer-slide-down {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}

/* ============================================================
   Subaba Documentos do médico
   ============================================================ */

.med-doc-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.med-doc-error {
  padding: var(--space-5);
  color: var(--text-muted);
  font-size: var(--size-sm);
  text-align: center;
}

.med-doc-error { color: var(--error); }

.med-doc-upload-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.med-doc-upload-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.med-doc-upload-label {
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}

.med-doc-upload-select {
  flex: 1;
  height: 36px;
  padding: 0 var(--space-3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: var(--size-sm);
  font-family: var(--font);
}

.med-doc-upload-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.med-doc-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-tint);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.med-doc-dropzone:hover,
.med-doc-dropzone:focus-visible {
  border-color: var(--accent);
  background: var(--surface-tint-hover);
  outline: none;
}

.med-doc-dropzone--active {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent);
}

.med-doc-dropzone--loading { opacity: 0.6; pointer-events: none; }

.med-doc-dropzone-icon { color: var(--text-cool); }

.med-doc-dropzone-text {
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
}

.med-doc-dropzone-hint {
  font-size: var(--size-xs);
  color: var(--text-xmuted);
}

.med-doc-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
}

.med-doc-grupos {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

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

.med-doc-grupo-titulo {
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

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

.med-doc-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.med-doc-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--surface-tint);
  color: var(--text-cool);
}

.med-doc-item-info { flex: 1; min-width: 0; }

.med-doc-item-nome {
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.med-doc-item-meta {
  font-size: var(--size-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

.med-doc-item-actions {
  display: flex;
  gap: var(--space-1);
  flex-shrink: 0;
}

.med-doc-item-delete:hover {
  color: var(--error);
  background: rgba(220, 38, 38, 0.08);
}

/* ============================================================
   Subaba Onboarding do médico (área admin)
   ============================================================ */

.med-onb-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.med-onb-error {
  padding: var(--space-5);
  color: var(--text-muted);
  font-size: var(--size-sm);
  text-align: center;
}

.med-onb-error { color: var(--error); }

.med-onb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-5);
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.med-onb-empty-text {
  font-size: var(--size-md);
  font-weight: var(--weight-medium);
  color: var(--text);
  margin: 0;
}

.med-onb-empty-hint {
  font-size: var(--size-sm);
  color: var(--text-muted);
  max-width: 480px;
  margin: 0;
}

.med-onb-empty .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.med-onb-token-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.med-onb-token-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.med-onb-token-status {
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: var(--accent-light);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.med-onb-token-expira {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--size-xs);
  color: var(--text-muted);
}

.med-onb-token-url {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: var(--size-sm);
  color: var(--text);
  background: var(--bg-input);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  word-break: break-all;
  user-select: all;
}

.med-onb-token-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.med-onb-token-actions .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.med-onb-cancelar-btn:hover {
  color: var(--error);
  border-color: var(--error);
}

.med-onb-respostas-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}

.med-onb-respostas-title {
  font-size: var(--size-md);
  font-weight: var(--weight-semibold);
  color: var(--text);
  margin: 0;
}

.med-onb-respostas-meta {
  font-size: var(--size-xs);
  color: var(--text-muted);
  margin: 4px 0 0 0;
}

.med-onb-secao {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.med-onb-secao-titulo {
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.med-onb-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
}

.med-onb-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.med-onb-field-label {
  font-size: var(--size-xs);
  color: var(--text-muted);
  font-weight: var(--weight-medium);
}

.med-onb-field-value {
  font-size: var(--size-sm);
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.med-onb-field-value--vazio {
  color: var(--text-xmuted);
  font-style: italic;
}

.med-onb-respostas-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Modal "Importar para cadastro" */

.med-onb-imp-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.med-onb-imp-intro {
  font-size: var(--size-sm);
  color: var(--text-muted);
  margin: 0;
}

.med-onb-imp-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.med-onb-imp-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.med-onb-imp-row input[type="checkbox"]:disabled + .med-onb-imp-info {
  opacity: 0.5;
}

.med-onb-imp-row--igual {
  background: var(--surface-tint);
}

.med-onb-imp-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.med-onb-imp-label {
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
}

.med-onb-imp-diff {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--size-xs);
  flex-wrap: wrap;
}

.med-onb-imp-atual {
  color: var(--text-muted);
  text-decoration: line-through;
}

.med-onb-imp-arrow {
  color: var(--text-xmuted);
}

.med-onb-imp-novo {
  color: var(--accent);
  font-weight: var(--weight-medium);
}

/* ============================================================
   Tab bar dentro do detalhe do médico (Mensalidades | Documentos | Onboarding)
   ============================================================ */

.med-detail-tabs {
  margin: var(--space-5) 0 var(--space-4);
  border-bottom: 1px solid var(--border-soft);
}

/* ============================================================
   Página standalone — onboarding.html
   ============================================================ */

.onb-page-body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}

.onb-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.onb-page-header {
  display: flex;
  align-items: center;
  padding: var(--space-4) var(--space-6);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-soft);
}

.onb-page-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.onb-page-brand-name {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--size-md);
  color: var(--accent);
}

.onb-content {
  flex: 1;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
}

.onb-loading {
  text-align: center;
  padding: var(--space-10) var(--space-5);
  color: var(--text-muted);
}

.onb-error-card,
.onb-success-card {
  padding: var(--space-8) var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.onb-error-title,
.onb-success-title {
  font-size: var(--size-lg);
  font-weight: var(--weight-semibold);
  color: var(--text);
  margin: 0 0 var(--space-2) 0;
}

.onb-error-text,
.onb-success-text {
  font-size: var(--size-base);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

.onb-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.onb-form-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-soft);
}

.onb-form-title {
  font-size: var(--size-xl);
  font-weight: var(--weight-semibold);
  color: var(--text);
  margin: 0;
}

.onb-form-subtitle {
  font-size: var(--size-sm);
  color: var(--text-muted);
  margin: 0;
}

.onb-required-mark {
  color: var(--error);
  margin-left: 2px;
}

.onb-secao {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.onb-secao-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.onb-secao-titulo {
  font-size: var(--size-md);
  font-weight: var(--weight-semibold);
  color: var(--text);
  margin: 0;
}

.onb-secao-sub {
  font-size: var(--size-sm);
  color: var(--text-muted);
  margin: 0;
}

.onb-secao-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

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

.onb-field-label {
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  color: var(--text-ink);
}

.onb-input,
.onb-textarea,
.onb-select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: var(--size-base);
  font-family: var(--font);
  box-sizing: border-box;
}

.onb-textarea {
  resize: vertical;
  min-height: 72px;
  line-height: 1.5;
}

.onb-input:focus,
.onb-textarea:focus,
.onb-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.onb-field--error .onb-input,
.onb-field--error .onb-textarea,
.onb-field--error .onb-select,
.onb-field--error .onb-bool-group,
.onb-field--error .onb-multi-group {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.onb-bool-group,
.onb-multi-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.onb-bool-opt,
.onb-multi-opt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--size-sm);
  color: var(--text-ink);
  cursor: pointer;
}

/* Pills D/S/T/Q/Q/S/S */
.onb-weekday-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.onb-weekday-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg);
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  color: var(--text-ink);
  cursor: pointer;
  user-select: none;
}

.onb-weekday-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.onb-weekday-pill:has(input:checked) {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
}

.onb-weekday-pill:hover { border-color: var(--accent); }

/* Input numérico com unidade ao lado */
.onb-input-with-unit {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.onb-input-with-unit .onb-input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  flex: 1;
  min-width: 0;
}

.onb-input-unit {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-3);
  background: var(--surface-tint);
  border: 1px solid var(--border);
  border-left: none;
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  font-size: var(--size-sm);
  color: var(--text-muted);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.onb-field-hint {
  font-size: var(--size-xs);
  color: var(--text-muted);
  line-height: 1.4;
}

.onb-form-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
}

.onb-form-error {
  padding: var(--space-3);
  background: rgba(220, 38, 38, 0.08);
  color: var(--error);
  border-radius: var(--radius-md);
  font-size: var(--size-sm);
}

.onb-submit-btn {
  align-self: flex-end;
  min-width: 160px;
}

@media (max-width: 640px) {
  .onb-content { padding: var(--space-4) var(--space-3); }
  .onb-secao { padding: var(--space-4); }
  .onb-submit-btn { width: 100%; }
}

/* ============================================================
   Solicitar Retorno — página pública por médico (mobile-first)
   ============================================================ */
/* a seleção de texto é uma superfície que o browser pinta de azul-sistema e
   que não pertence a design system nenhum — vem da paleta como o resto. */
.ret-page-body ::selection {
  background: var(--accent-tint-3);
  color: var(--text);
}

.ret-page-body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}

.ret-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.ret-page-header {
  display: flex;
  align-items: center;
  padding: var(--space-4) var(--space-6);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-soft);
}

.ret-page-brand { display: flex; align-items: center; gap: var(--space-2); }
.ret-page-brand-name {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--size-md);
  color: var(--accent);
}

.ret-content {
  flex: 1;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
  /* a coluna estica até o fim da tela para o CTA poder descer até lá */
  display: flex;
  flex-direction: column;
}

.ret-loading { text-align: center; padding: var(--space-10) var(--space-5); color: var(--text-muted); }

/* estados (erro / sucesso) */
.ret-state {
  padding: var(--space-8) var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
}
/* Ícone de estado: disco suave com o SVG stroke centralizado. A cor do estado
   (verde de sucesso / vermelho de erro) vem do modificador via currentColor. */
.ret-state-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.ret-state-icon svg { width: 28px; height: 28px; }
.ret-state--ok .ret-state-icon    { background: var(--s-paga-bg); color: var(--s-paga); }
.ret-state--error .ret-state-icon { background: rgba(220, 38, 38, 0.08); color: var(--error); }
.ret-state-title { font-size: var(--size-lg); font-weight: var(--weight-semibold); color: var(--text); margin: 0 0 var(--space-2) 0; }
.ret-state-desc { font-size: var(--size-base); color: var(--text-muted); margin: 0; }

/* form */
.ret-form { display: flex; flex-direction: column; gap: var(--space-5); flex: 1; }
/* Tracking do SF Pro é calibrado POR TAMANHO: negativo em 17pt, positivo em
   títulos de 22pt. Sem isso o texto fica sutilmente solto em relação ao nativo.
   Valores da tabela de Text Styles do HIG. */
.ret-form-title {
  letter-spacing: 0.35px; /* Title 2 — 22pt */
  font-family: var(--font-display);
  font-size: var(--size-xl);
  font-weight: var(--weight-semibold);
  color: var(--text);
  margin: 0;
}
.ret-field { display: flex; flex-direction: column; gap: var(--space-2); }
.ret-label { font-size: var(--size-sm); font-weight: var(--weight-semibold); color: var(--text); }

.ret-campo,
.ret-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-3) var(--space-4);
  font-family: inherit;
  color: var(--text);
  /* preenchido, sem borda — mesmo tratamento das linhas e opções, e o mesmo do
     .input-pill do design system. A borda fica 1.5px TRANSPARENTE em vez de 0:
     ela é quem marca o foco, e sem reserva de espaço o campo saltaria ao focar. */
  background: var(--bg-subtle);
  border: 1.5px solid transparent;
  /* 14px é o raio de campo do sistema em contexto de formulário (o mesmo de
     .pac-detail-form); --radius-lg (12px) inventava um terceiro valor. */
  border-radius: 14px;
  transition: background 120ms ease-out, border-color 120ms;
}
.ret-campo { min-height: 48px; }
/* ⚠️ especificidade: a regra global `input[type="text"], select, textarea` (0-1-1)
   vence `.ret-campo` (0-1-0) e reimpõe --radius-sm. Qualificar pelo elemento
   empata em 0-1-1 e ganha por vir depois — sem isso o raio abaixo é ignorado
   EM SILÊNCIO (o CSS "aplica" e nada muda). */
input.ret-campo,
select.ret-campo,
textarea.ret-textarea {
  letter-spacing: -0.41px; /* Body — 17pt */
  border-radius: 14px;
  /* 17px: abaixo de 16px o iOS dá zoom sozinho ao focar o campo */
  font-size: var(--size-md);
  background: var(--bg-subtle);
  border: 1.5px solid transparent;
}
/* a seta nativa do select vem com a moldura do SO junto e brigaria com o
   preenchimento — desenhada aqui, na cor dos outros secundários. */
select.ret-campo {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23636A77' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: calc(var(--space-4) * 2 + 12px);
}
/* contraste: o ::placeholder global usa --text-xmuted = 2,54:1, abaixo do
   mínimo de 4,5:1. --text-muted dá 4,83:1. (O global segue como está: é
   defeito do app inteiro, fora do escopo desta página.) */
.ret-campo::placeholder,
.ret-textarea::placeholder { color: var(--text-muted-fill); }
/* Foco: borda accent + ring em TODO campo (indicação de foco é requisito de
   acessibilidade, não decoração). :focus-visible, não :focus — o sistema não
   mostra ring em clique de mouse (DESIGN.md › Focus rings).
   O fundo NÃO muda no foco: em qualquer campo o claro fica preso na tela até
   se clicar fora, e lê como "algo ainda em edição" mesmo depois de pronto.
   Borda + ring bastam para marcar onde está o foco. */
.ret-campo:focus-visible,
.ret-textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}
.ret-textarea { resize: vertical; min-height: 72px; }

/* botão de concluir do sheet: afirmativo, não neutro como o X de descartar */
.modal-close--check { color: var(--accent); }

/* ── linhas-resumo: a página é uma lista, cada linha abre um sheet ──
   Uma caixa por controle, preenchida e sem borda: linha branca com borda dentro
   de um cartão com borda é elevação declarada duas vezes (ghost card), e o
   aninhamento pesa mais que a altura que ele economiza. */
.ret-grupo { display: flex; flex-direction: column; gap: var(--space-3); }
.ret-linha {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 56px;
  letter-spacing: -0.41px; /* Body — 17pt */
  padding: var(--space-3) var(--space-4);
  background: var(--bg-subtle);
  border: 0;
  border-radius: 14px;
  font-family: inherit;
  font-size: var(--size-md);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms ease-out, transform 100ms cubic-bezier(0.32,0.72,0,1);
}
.ret-linha:active { background: var(--hover-subtle); transform: scale(0.99); }
.ret-linha-rotulo { flex: 0 0 auto; }
.ret-linha-valor {
  flex: 1 1 auto;
  text-align: right;
  color: var(--text-muted-fill);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* o valor escolhido é a informação da linha: ganha peso e cor cheia */
.ret-linha-valor.is-preenchido { color: var(--text); font-weight: var(--weight-medium); }
.ret-linha-chevron { flex: 0 0 auto; color: var(--text-muted-fill); display: flex; }

/* ── opções de escolha única dentro dos sheets ── */
.ret-opcoes { display: flex; flex-direction: column; gap: var(--space-2); }
.ret-opcao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: 56px;
  letter-spacing: -0.41px; /* Body — 17pt */
  padding: var(--space-3) var(--space-4);
  background: var(--bg-subtle);
  border: 1.5px solid transparent;
  border-radius: 14px;
  font-family: inherit;
  font-size: var(--size-md);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms ease-out, border-color 120ms, transform 100ms cubic-bezier(0.32,0.72,0,1);
}
.ret-opcao:active { background: var(--hover-subtle); transform: scale(0.99); }
/* escolhida: fundo + borda + marca. Status nunca se comunica só por cor. */
.ret-opcao[aria-selected="true"] {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: var(--weight-semibold);
}
.ret-opcao-marca { flex: 0 0 auto; color: var(--accent); opacity: 0; display: flex; }
.ret-opcao[aria-selected="true"] .ret-opcao-marca { opacity: 1; }

.ret-busca-res { margin-top: var(--space-3); }
.ret-busca-msg { margin: 0; padding: var(--space-4) 0; color: var(--text-muted); font-size: var(--size-base); }

/* switch iOS (track 51x31, thumb 27) sobre checkbox nativo — teclado e label
   associado de graça. Cor "on" é --accent, não o verde do iOS: a identidade
   deste sistema é o azul-marinho, e trocá-la aqui destoaria do resto do app. */
.ret-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 48px; /* a LINHA é o alvo de toque; o track sozinho tem 31px */
  margin-bottom: var(--space-3);
  cursor: pointer;
  font-size: var(--size-md);
}
.ret-switch {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 51px;
  height: 31px;
  margin: 0;
  border: 0;
  border-radius: 100px;
  background: var(--border);
  position: relative;
  cursor: pointer;
  transition: background 200ms ease-out;
}
.ret-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15), 0 1px 1px rgba(0,0,0,0.16);
  transition: transform 200ms cubic-bezier(0.32, 0.72, 0, 1);
}
.ret-switch:checked { background: var(--accent); }
.ret-switch:checked::after { transform: translateX(20px); }
.ret-switch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* recorrência — campos revelados pelo toggle Não/Sim.
   ⚠️ o [hidden] PRECISA vir depois do display:flex, senão o flex vence a regra
   do UA e os campos aparecem com o toggle em "Não". */
.ret-rec-campos {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.ret-rec-campos[hidden] { display: none; }

.ret-rec-row { display: flex; align-items: center; gap: var(--space-2); }
.ret-rec-prefix {
  /* largura FIXA (não auto): "A cada" é mais largo que "Por", e sem isso as duas
     linhas saem com as colunas desencontradas. */
  flex: 0 0 68px;
  font-size: var(--size-md);
  color: var(--text-muted-fill);
}
/* 44px é o piso de toque do HIG; a fonte fica em 17px porque abaixo de 16px o
   iOS dá zoom sozinho ao focar o campo. */
.ret-rec-row .ret-campo { min-height: 44px; padding: var(--space-2) var(--space-3); }
.ret-rec-row select.ret-campo {
  background-position: right var(--space-3) center;
  padding-right: calc(var(--space-3) + var(--space-4) + 12px);
}
.ret-rec-num { flex: 0 0 62px; min-width: 0; text-align: center; }
/* o [hidden] tem que vencer o flex, como em .ret-rec-campos */
.ret-rec-num[hidden] { display: none; }
.ret-rec-sel { flex: 1 1 auto; min-width: 0; }

/* calendário mensal — seleção por SEMANA (linha inteira acende) */
.ret-week {
  border: 1px solid var(--border);
  /* 10px num bloco de ~500px é 2% de arredondamento: lê como retângulo puro.
     Raio de CONTAINER, não de controle. */
  border-radius: var(--radius-xl);
  padding: var(--space-2);
  background: var(--bg-card);
}
.ret-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.ret-cal-month { font-size: var(--size-md); font-weight: var(--weight-semibold); color: var(--text); }
.ret-cal-nav {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--size-lg);
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.ret-cal-nav:active { background: var(--accent-light); }

.ret-cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 2px;
}
.ret-cal-dow-cell {
  text-align: center;
  /* 11px é o mínimo ABSOLUTO do HIG (caption2) — usá-lo onde não é necessário
     só torna a página mais difícil de ler no celular. */
  font-size: var(--size-12);
  font-weight: var(--weight-medium);
  /* --text-xmuted dava 2,54:1 aqui. Não é componente desabilitado (isento):
     é rótulo de coluna permanente, então vale o mínimo de 4,5:1. */
  color: var(--text-muted);
  text-transform: uppercase;
}

.ret-cal-weeks { display: flex; flex-direction: column; gap: 2px; }
/* Cada semana é UM botão: grid de 7 dias, a linha inteira é o alvo. */
.ret-cal-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: center;
  width: 100%;
  padding: 2px;
  background: transparent;
  border: 1.5px solid transparent;
  /* concêntrico com .ret-week: r_interno = r_externo − padding do container
     (16 − 8). Raio igual ao do pai em superfícies aninhadas cria tensão visual. */
  border-radius: calc(var(--radius-xl) - var(--space-2));
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms, border-color 120ms, transform 100ms;
}
.ret-cal-week:active:not(:disabled) { transform: scale(0.985); }

@media (prefers-reduced-motion: reduce) {
  .ret-linha,
  .ret-opcao,
  .ret-cal-week,
  .ret-submit-btn,
  .ret-switch,
  .ret-switch::after { transition: none; }
  .ret-linha:active,
  .ret-opcao:active,
  .ret-cal-week:active:not(:disabled),
  .ret-submit-btn:active { transform: none; }
}
.ret-cal-week:hover:not(:disabled) { background: var(--accent-light); }
.ret-cal-week.is-selected {
  background: var(--accent-light);
  border-color: var(--accent);
}
.ret-cal-week:disabled { cursor: default; opacity: 0.4; }

.ret-cal-day,
.ret-cal-empty {
  /* era aspect-ratio: 1 — a altura da linha virava refém da LARGURA da tela
     (70px num viewport largo, para exibir texto de 13px). min-height desacopla
     as duas: a linha inteira segue sendo o alvo e fica acima dos 44px de toque. */
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--size-base);
  /* dígito de largura fixa: sem isso "1" é mais estreito que "8" e as colunas
     do calendário desalinham opticamente a cada mês. */
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.ret-cal-day.is-today { color: var(--accent); font-weight: var(--weight-semibold); }
.ret-cal-week.is-selected .ret-cal-day { color: var(--accent); font-weight: var(--weight-semibold); }
.ret-cal-week:disabled .ret-cal-day { color: var(--text-xmuted); }

.ret-cal-selected {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-soft);
  font-size: var(--size-base);
  color: var(--text-muted);
  text-align: center;
}
.ret-cal-selected strong { color: var(--accent); }

/* erro de validação do form */
.ret-form-error {
  padding: var(--space-3);
  font-size: var(--size-sm);
  color: var(--error);
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid var(--error);
  border-radius: var(--radius-md);
}

/* barra de envio — sticky com safe-area no mobile */
/* `sticky; bottom:0` só gruda quando o conteúdo ROLA — e a página agora cabe
   numa tela. `margin-top: auto` empurra o CTA pro fim mesmo sem rolagem, que é
   a zona do polegar (HIG: ação primária na metade inferior). Quando o conteúdo
   passa da tela, o sticky do @media assume. */
.ret-submit-bar { display: flex; margin-top: auto; }
.ret-submit-btn {
  width: 100%;
  min-height: 48px;
  /* .btn-primary global é botão de tabela (36px / --size-sm): herdado aqui, o
     CTA da página ficava com a MENOR fonte da tela, abaixo das pills que ele
     deveria dominar. Sobrescrito no escopo local — o global não muda. */
  font-size: var(--size-md);
  letter-spacing: -0.41px; /* Headline — 17pt */
  border-radius: var(--radius-pill);
  -webkit-tap-highlight-color: transparent;
  transition: opacity 150ms, transform 100ms;
}
.ret-submit-btn:active { transform: scale(0.98); }

@media (max-width: 640px) {
  /* 16px de margem lateral: o HIG pede que o conteúdo respeite as margens do
     sistema, e o CTA herda isso em vez de encostar na borda. */
  .ret-content { padding: var(--space-4) var(--space-4) 0; }
  .ret-submit-bar {
    position: sticky;
    bottom: 0;
    /* ⚠️ `auto` no topo, não 0: o shorthand `margin: 0 ...` zerava o
       `margin-top: auto` da regra base e o CTA voltava a flutuar no meio da
       tela quando a página cabia sem rolagem — que é o caso desde que ela
       virou lista. */
    margin: auto calc(-1 * var(--space-4)) 0;
    padding: var(--space-3) var(--space-4) calc(env(safe-area-inset-bottom) + var(--space-3));
    background: linear-gradient(180deg, transparent, var(--bg) 40%);
  }
}

/* ============================================================
   Agenda — view dia filtrada (split grade + pendências)
   Restaurado de b691b7a (app.20260406.css historico)
   ============================================================ */
.ag-dia-layout {
  display: flex;
  gap: 0;
  height: 100%;
  min-height: 0;
}
.ag-dia-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 50%;
  min-width: 0;
  height: 100%;
  min-height: 0;
}
.ag-dia-pend {
  width: 50%;
  flex-shrink: 0;
  border-left: 1px solid var(--border-soft);
  background: #fff;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ag-dp-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(228,232,239,0.7);
  flex-shrink: 0;
}
.ag-dp-label {
  font-size: 20px;
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  letter-spacing: -0.02em;
  flex: 1;
}
.ag-dp-count {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  background: rgba(27,43,75,0.08);
  color: var(--text-muted);
  border-radius: 8px;
  padding: 2px 7px;
}
.ag-dp-table-shell {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.ag-dp-table {
  table-layout: fixed;
}
.ag-dp-row td {
  padding-top: 14px;
  padding-bottom: 14px;
  vertical-align: middle;
}
.ag-dp-main {
  width: auto;
}
.ag-dp-paciente-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ag-dp-open-ficha {
  font-size: 15px;
  font-weight: var(--weight-semibold);
}
.ag-dp-main-label {
  font-size: 12px;
  color: var(--text-muted);
}
.ag-dp-sub {
  font-size: 12px;
  color: var(--text-xmuted);
}
.ag-dp-actions {
  width: 100px;
  white-space: nowrap;
  text-align: right;
  padding-right: var(--space-3);
}
.ag-dp-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: var(--text-muted);
  font-size: 14px;
  text-align: center;
}
.ag-dia-header {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  border-bottom: 1px solid var(--border-soft);
  background: transparent;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 2;
}
.ag-dia-grid {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  background: transparent;
}
.ag-dia-row {
  grid-template-columns: 72px minmax(0, 1fr);
}
.ag-dia-cell {
  border-right: none;
}
.ag-dia-event {
  left: 8px;
  right: 8px;
}
.cfg-conta-two-col {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
}
.cfg-conta-col-left {
  padding: 10px 0 18px;
}
.cfg-conta-col-divider {
  width: 1px;
  background: var(--home-line-soft);
  margin: 22px 0;
}
.cfg-conta-col-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 10px 0 18px;
}
.cfg-conta-col-right .cfg-wa-card-header {
  padding: 0 16px 2px;
  border-bottom: none;
}
.cfg-conta-field {
  gap: 8px;
  padding: 0 16px;
}
.cfg-conta-field-main {
  padding-bottom: 8px;
}
.cfg-conta-field label {
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--home-text-soft);
}
.cfg-conta-field input {
  min-height: 42px;
}
.cfg-conta-col-footer {
  display: flex;
  justify-content: flex-end;
  padding: 6px 20px 0;
  margin-top: auto;
}
.cfg-conta-col-footer .btn-primary,
.cfg-conta-footer-actions .btn-primary {
  min-width: 100px;
}
.cfg-conta-avatar-block {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 16px 20px 18px;
}
.cfg-conta-avatar-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cfg-conta-avatar {
  width: 56px; height: 56px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--accent-light);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--size-lg); font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
}
.cfg-conta-pessoal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 18px 20px 10px;
  align-items: end;
}
.cfg-conta-field--dia input {
  max-width: 100%;
}
.cfg-conta-footer-actions {
  padding: 6px 20px 20px;
}
.ficha-table-row {
  position: relative;
  cursor: pointer;
}
.ficha-table-row td {
  transition: background 140ms ease, border-color 140ms ease;
}
.ficha-table-row:hover {
  background: var(--row-hover);
}
.pag-dia-layout {
  display: flex;
  gap: 0;
  height: 100%;
  min-height: 0;
}
.pag-dia-wrap {
  display: flex; flex-direction: column;
  height: 100%; min-height: 0;
  flex: 1 1 0;
  min-width: 0;
}
.pag-dia-header {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  border-bottom: 1px solid var(--border-soft);
  background: transparent;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 2;
}
.pag-dia-grid { flex: 1; overflow-y: auto; overflow-x: hidden; }

/* Painel lateral de tarefas */
.pag-dia-tasks {
  /* Feature: 320px fixo (era 50%) — regra duplicada; a última no arquivo vence. */
  width: 320px;
  flex-shrink: 0;
  border-left: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
}
.pag-dia-tasks .ptk-task { padding-inline: 8px; }
.pag-dia-tasks .ptk-task-row { padding-left: 14px; }
.pag-dt-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-10);
  color: var(--text-muted);
  font-size: var(--size-base);
  text-align: center;
}
.pag-now-line-label {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 56px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--pag-cat1);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
  opacity: 1;
  z-index: 22;
}

/* Responsive dia — grid-template-columns e layout vertical */
@media (max-width: 780px) {
  .ag-dia-header,
  .ag-dia-row {
    grid-template-columns: 56px minmax(0, 1fr);
  }
  .ag-dia-event {
    left: 4px;
    right: 4px;
  }
  .ag-dia-layout {
    flex-direction: column;
  }
  .ag-dia-pend {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--border-soft);
    min-height: 260px;
  }
}


/* ============================================================
   LGPD — onboarding público (seção + modal de leitura) + chip ficha + badge configurações
   ============================================================ */

.onb-secao-lgpd .onb-secao-fields {
  gap: var(--space-3);
}

.onb-lgpd-opt {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--size-sm);
  line-height: 1.5;
  color: var(--text-strong);
  transition: border-color 0.15s, background 0.15s;
}

.onb-lgpd-opt:hover {
  border-color: var(--border);
}

.onb-lgpd-opt input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
}

.onb-field--error .onb-lgpd-opt {
  border-color: var(--error);
  background: rgba(220, 38, 38, 0.04);
}

.onb-lgpd-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

.onb-lgpd-link:hover {
  color: var(--accent-dark);
}

/* Modal de leitura do termo (overlay próprio do onboarding público) */
.onb-termo-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-4);
}

.onb-termo-card {
  background: var(--bg);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 720px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.onb-termo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-soft);
}

.onb-termo-title {
  margin: 0;
  font-size: var(--size-lg);
  font-weight: 600;
  color: var(--text-strong);
}

.onb-termo-close {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}

.onb-termo-close:hover {
  background: var(--bg-soft);
  color: var(--text-strong);
}

.onb-termo-modal {
  overflow-y: auto;
  padding: var(--space-5);
  flex: 1 1 auto;
}

.onb-termo-version {
  font-size: var(--size-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.onb-termo-body h2 {
  font-size: var(--size-md);
  font-weight: 600;
  margin: 0 0 var(--space-3);
  color: var(--text-strong);
}

.onb-termo-body h3 {
  font-size: var(--size-sm);
  font-weight: 600;
  margin: var(--space-4) 0 var(--space-2);
  color: var(--text-strong);
}

.onb-termo-body p {
  margin: 0 0 var(--space-2);
  font-size: var(--size-sm);
  line-height: 1.6;
  color: var(--text);
}

.onb-termo-body ul {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-4);
}

.onb-termo-body li {
  font-size: var(--size-sm);
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 4px;
}

.onb-termo-body hr {
  border: none;
  border-top: 1px solid var(--border-soft);
  margin: var(--space-4) 0;
}

.onb-termo-footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-soft);
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 640px) {
  .onb-termo-card { max-height: 92vh; }
  .onb-termo-modal { padding: var(--space-4); }
}

/* Chip LGPD na ficha do paciente */
.fp-lgpd-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--size-xs);
  font-weight: 500;
  background: rgba(34, 197, 94, 0.12);
  color: rgb(21, 128, 61);
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.fp-lgpd-badge--pendente {
  background: rgba(245, 158, 11, 0.12);
  color: rgb(180, 83, 9);
  border-color: rgba(245, 158, 11, 0.25);
}

/* Variante CTA: termo pendente vira botão clicável. Hover sutil.
   Reusa o visual de badge (font/padding) pra integrar com os outros
   badges do grupo — o clique vira affordance via cursor + hover bg. */
.fp-lgpd-badge--cta {
  font-family: inherit;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.fp-lgpd-badge--cta:hover {
  background: rgba(245, 158, 11, 0.20);
  border-color: rgba(245, 158, 11, 0.40);
}

/* Badge LGPD na lista de médicos (Configurações) */
.cfg-medico-lgpd {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--size-xs);
  font-weight: 500;
}

.cfg-medico-lgpd--ok {
  background: rgba(34, 197, 94, 0.12);
  color: rgb(21, 128, 61);
}

.cfg-medico-lgpd--pendente {
  background: rgba(245, 158, 11, 0.12);
  color: rgb(180, 83, 9);
}

/* LGPD — checkbox no modal de novo paciente */
.lgpd-paciente-aceite {
  margin-top: var(--space-2);
}

.lgpd-paciente-opt {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--size-sm);
  line-height: 1.5;
  color: var(--text-strong);
}

.lgpd-paciente-opt:hover {
  border-color: var(--border);
}

.lgpd-paciente-opt input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
}

.lgpd-paciente-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

.lgpd-paciente-link:hover {
  color: var(--accent-dark);
}

/* LGPD — modal de leitura do termo (dentro do modal stack do app) */
.lgpd-modal-body {
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--space-2) 0;
}

.lgpd-modal-version {
  font-size: var(--size-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lgpd-modal-content h2 {
  font-size: var(--size-md);
  font-weight: 600;
  margin: 0 0 var(--space-3);
  color: var(--text-strong);
}

.lgpd-modal-content h3 {
  font-size: var(--size-sm);
  font-weight: 600;
  margin: var(--space-4) 0 var(--space-2);
  color: var(--text-strong);
}

.lgpd-modal-content p {
  margin: 0 0 var(--space-2);
  font-size: var(--size-sm);
  line-height: 1.6;
  color: var(--text);
}

.lgpd-modal-content ul {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-4);
}

.lgpd-modal-content li {
  font-size: var(--size-sm);
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 4px;
}

.lgpd-modal-content hr {
  border: none;
  border-top: 1px solid var(--border-soft);
  margin: var(--space-4) 0;
}

/* ============================================================
   Suporte (aba de documentos legais do médico) — lista clicável
   ============================================================ */

/* Documentos: grupos com subtítulo de seção + lista, sem moldura de card
   (padrão iOS Settings). Substitui 3 cfg-wa-card empilhados. */
.sup-docs {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.sup-group-label {
  font-size: var(--size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 var(--space-2);
  padding-left: var(--space-1);
}

.sup-list {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.sup-doc-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: none;
  border: none;
  border-top: 1px solid var(--border-soft);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  color: var(--text);
  transition: background-color 0.12s ease;
}

.sup-doc-row:first-child {
  border-top: none;
}

.sup-doc-row:hover {
  background: var(--bg-subtle);
}

.sup-doc-row:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

.sup-doc-icon {
  flex: none;
  color: var(--accent);
}

.sup-doc-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.sup-doc-title {
  font-size: var(--size-sm);
  font-weight: 600;
  color: var(--text);
}

.sup-doc-desc {
  font-size: var(--size-xs);
  line-height: 1.5;
  color: var(--text-muted);
}

.sup-doc-chev {
  flex: none;
  color: var(--text-muted);
}

/* Form "Fale com o suporte" (4º card da aba). Padding horizontal 24px pra alinhar
   com o header do card (.cfg-wa-card-header também usa 24px). */
.sup-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 20px 24px 24px;
}

.sup-form textarea {
  resize: vertical;
  min-height: 96px;
}

.sup-form-hint {
  font-size: var(--size-xs);
  color: var(--text-muted);
  min-height: 1em;
}

.sup-form-actions {
  display: flex;
  justify-content: flex-end;
}

/* Estado de sucesso do form (substitui o form após envio) */
.sup-sucesso {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
}

.sup-sucesso-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--toast-success) 14%, transparent);
  color: var(--toast-success);
  margin-bottom: var(--space-1);
}

.sup-sucesso-titulo {
  font-size: var(--size-md);
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.sup-sucesso-prazo {
  font-size: var(--size-sm);
  color: var(--text-muted);
  margin: 0 0 var(--space-3);
}

/* Documento legal renderizado no modal (plano de incidentes) */
.doc-legal-meta {
  font-size: var(--size-xs);
  line-height: 1.7;
  color: var(--text-muted);
  padding: var(--space-3);
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  margin: 0 0 var(--space-4);
}

.doc-legal .doc-callout {
  padding: var(--space-3);
  background: var(--bg-subtle);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  margin: var(--space-3) 0;
}

.doc-table-scroll {
  overflow-x: auto;
  margin: 0 0 var(--space-3);
  -webkit-overflow-scrolling: touch;
}

.doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--size-xs);
}

.doc-table th,
.doc-table td {
  text-align: left;
  padding: var(--space-2);
  border: 1px solid var(--border-soft);
  vertical-align: top;
  line-height: 1.5;
}

.doc-table th {
  background: var(--bg-subtle);
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
}

/* ============================================================
   Termo de Consentimento — seção reutilizável (paciente + médico)
   ============================================================ */

.termo-section {
  /* Sem moldura externa — segue o ritmo dos demais blocos do drawer/modal. */
}

.termo-section-head {
  margin-bottom: var(--space-2);
}

.termo-section-title {
  margin: 0;
  font-size: var(--size-sm);
  font-weight: 500;
  color: var(--text);
}

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

.termo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--size-xs);
  font-weight: 500;
  width: max-content;
}

.termo-badge--ok {
  background: rgba(34, 197, 94, 0.12);
  color: rgb(21, 128, 61);
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.termo-badge--pendente {
  background: rgba(245, 158, 11, 0.12);
  color: rgb(180, 83, 9);
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.termo-link {
  display: inline;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
  text-align: left;
}

.termo-link:hover {
  color: var(--accent-dark);
}

.termo-links-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--size-xs);
}

.termo-links-sep {
  color: var(--text-muted);
}

.termo-aceite-opt {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--size-sm);
  line-height: 1.5;
  color: var(--text-strong);
  transition: border-color 0.15s;
}

.termo-aceite-opt:hover {
  border-color: var(--border);
}

.termo-aceite-opt input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
}

.termo-reacceite-aviso {
  font-size: var(--size-xs);
  color: rgb(180, 83, 9);
  background: rgba(245, 158, 11, 0.08);
  border-left: 3px solid rgb(245, 158, 11);
  padding: 6px var(--space-2);
  border-radius: var(--radius-sm);
}

/* ────────────────────────────────────────────────────────────
   Feature C — Pacientes Pendentes (Cadastrados | Pendentes)
   ──────────────────────────────────────────────────────────── */

.pac-tab-bar {
  padding: 4px 0 0;
  border-bottom: 1px solid rgba(27, 43, 75, 0.08);
  margin-bottom: 12px;
}

.pac-tab-bar .tab {
  display: inline-flex;
  align-items: center;
}

.pac-tab-bar .tab-active::after {
  bottom: -1px;
  left: 0;
  right: auto;
  width: 100%;
}

.pac-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 9px;
  background: var(--accent);
  color: white;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.pac-tab-badge[hidden] {
  display: none;
}

.pac-status-pend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--size-xs);
  font-weight: var(--weight-medium);
  line-height: 1;
  white-space: nowrap;
}

.pac-status-pend--pendente_envio {
  background: rgba(148, 163, 184, 0.18);
  color: rgb(71, 85, 105);
}
.pac-status-pend--enviado {
  background: rgba(59, 130, 246, 0.14);
  color: rgb(29, 78, 216);
}
.pac-status-pend--preenchido {
  background: rgba(245, 158, 11, 0.16);
  color: rgb(176, 81, 9); /* era rgb(180,83,9) (4.43:1) → 4.61:1 WCAG AA (R4) */
}

/* Botão WhatsApp em modo "reenviar" (status='enviado') — tom mais discreto
   pra distinguir de primeira-vez (status='pendente_envio'). */
.pac-pend-wa--resend {
  opacity: 0.65;
}
.pac-pend-wa--resend:hover { opacity: 1; }

/* Todas as linhas pendentes são clicáveis (qualquer status abre drawer
   no modo apropriado — view ou edit). Mantém o cursor pointer geral. */
.pac-pend-row,
.pac-pend-card {
  cursor: pointer;
}

.pac-pend-row .pac-cell-nome-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-direction: row;
  flex-wrap: nowrap;
}

.pac-pend-popover {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(113, 123, 155, 0.18);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  padding: 4px;
  min-width: 180px;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   Convênio — selo discreto ao lado do nome do paciente
   Feature: docs/plans/2026-05-01-convenio-alice.md
   ============================================================ */
.badge-convenio {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  margin-left: 8px;
  border-radius: 4px;
  background: rgba(132, 126, 120, 0.07);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.005em;
  vertical-align: middle;
  white-space: nowrap;
}

.badge-pro-bono {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  margin-left: 8px;
  border-radius: 4px;
  background: rgba(180, 130, 70, 0.10);
  color: rgba(140, 95, 45, 0.95);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.005em;
  vertical-align: middle;
  white-space: nowrap;
}



/* ============================================================
   medico-home (F2) — overrides mínimos sobre o design system
   Cards/headers/KPIs vêm de .home-card, .ws-card-*, .fin-summary-*,
   .fin-kpi*, .hw-ag-*, .status-badge*, .empty-state.
   ============================================================ */

.medico-home-wrap {
  padding: var(--space-5) var(--space-6);
  max-width: 1400px;
  margin: 0 auto;
}

.medico-home-kpis-shell {
  margin-bottom: var(--space-5);
}

/* Sem divisores horizontais no header de KPIs do médico (no Financeiro eles
   separam a strip do filtro/tabela; aqui ficam soltos no topo da view). */
.medico-home-kpis-shell .fin-summary { border-top: none; }
.medico-home-kpis-shell .fin-summary-strip { border-bottom: none; }

/* Strip de KPIs do médico: 3 métricas (Receita / Despesas / Resultado).
   O contador de "Hoje" virou badge no header da grade da sidebar. */
.medico-home-kpis-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 760px) {
  /* KPIs empilham em 1 coluna — 3 lado a lado cortavam valores monetários. */
  .medico-home-kpis-metrics {
    grid-template-columns: 1fr;
  }
  .medico-home-kpis-shell .fin-kpi {
    padding: 14px 16px;
    gap: 4px;
  }
  .medico-home-kpis-shell .fin-kpi-label {
    font-size: 12px;
  }
  .medico-home-kpis-shell .fin-kpi-valor {
    font-size: 18px;
  }
  .medico-home-kpis-shell .fin-kpi-sub {
    display: none;
  }
  /* Empilhado: divisória horizontal entre os KPIs, sem verticais. */
  .medico-home-kpis-shell .fin-kpi + .fin-kpi {
    border-left: none;
    border-top: 1px solid rgba(112, 115, 147, 0.1);
  }
  /* Padding lateral mais enxuto pra ganhar largura */
  .medico-home-wrap {
    padding: 16px 12px;
  }
}

/* Grid de 2 colunas: coluna principal (KPIs → Receitas → Solicitações) +
   sidebar de 320px (agenda estilo Fantastical). Usa SÓ .medico-home-grid
   (não herda .home-grid), então o guard :not(.medico-home-grid) do responsivo
   da Bruna nunca colide. */
.medico-home-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-template-areas:
    "kpis         side"
    "receitas     side"
    "solicitacoes side";
  grid-template-rows: auto auto 1fr;
  gap: 12px 48px;
  align-items: start;
  position: relative;
}
/* Divisor vertical entre a coluna principal e a sidebar, igual à Home da Bruna.
   Na fronteira: largura da sidebar (320) + metade do gap (24). */
.medico-home-grid::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 0;
  right: calc(320px + 24px);
  width: 1px;
  background: var(--home-line-soft);
}
#med-home-kpis          { grid-area: kpis; }
#med-home-card-receitas { grid-area: receitas; margin-top: 12px; }
/* Card próprio (igual Receitas) + respiro maior entre os dois cards da coluna. */
#med-home-sec-handoff   { grid-area: solicitacoes; margin-top: 28px; min-height: 0; }
/* Card é o board 2 colunas compacto; o board aplica o próprio padding. */
#med-home-sec-handoff .home-card-body {
  padding: 0;
  overflow-y: visible;
}
.medico-home-side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (max-width: 760px) {
  .medico-home-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "kpis"
      "receitas"
      "solicitacoes"
      "side";
    gap: 12px 0;
  }
  /* Sem divisor no mobile (colunas empilham). */
  .medico-home-grid::before { display: none; }
}

/* medico-home — Card Receitas: padding do body + progress bar
   (só o que não tem equivalente direto na Bruna) */
#med-home-card-receitas .home-card-body {
  overflow-y: visible;
}

/* Sobrescreve o min-height: 336px de .home-card pra Receitas pegar altura natural. */
#med-home-card-receitas {
  min-height: 0;
}

/* Mini-calendário inline da sidebar (entre o header e a lista do dia) */
.med-home-agenda-cal {
  margin: 4px 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--home-line-soft);
}

/* Badge de contagem "· N" no título de Solicitações */
.med-hoje-badge {
  color: var(--home-text-muted);
  font-weight: var(--weight-medium);
}
.med-hoje-badge[hidden] { display: none; }

#med-home-receitas-body { padding: 22px 24px 24px; }

/* Barra de progresso (recebido + pendente + a gerar contra a meta) */
.med-rec-progress {
  display: flex;
  height: 18px;
  border-radius: 9px;
  overflow: hidden;
  background: rgba(112, 115, 147, 0.10);
  margin: 4px 0 22px;
}

.med-rec-progress-recebido { background: var(--s-paga); }
/* Pendente = verde escuro do mês ativo do gráfico (--accent → --teal no tema médico) */
.med-rec-progress-pendente { background: var(--accent); }
.med-rec-progress-agerar   { background: rgba(112, 115, 147, 0.30); }

/* Sub-KPIs em strip (mesmo padrão de .fin-summary-metrics, com 3 colunas) */
.med-rec-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: var(--space-4);
}

.med-rec-subkpi .fin-kpi-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
}

.med-rec-subkpi-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.med-rec-subkpi-dot--recebido { background: var(--s-paga); }
.med-rec-subkpi-dot--pendente { background: var(--accent); }
.med-rec-subkpi-dot--agerar   { background: rgba(112, 115, 147, 0.40); }

/* Fix: valores R$ 1.300,00 etc se sobrepunham quando 3 sub-KPIs disputam
   a largura do card. Reduz fonte e adiciona padding lateral pra dar
   respiro entre as divisórias. */
.med-rec-subkpi .fin-kpi-valor {
  font-size: clamp(1.05rem, 0.85rem + 0.55vw, 1.45rem);
}
.med-rec-subkpi {
  padding: 14px 12px 16px;
}

.med-rec-subkpi + .med-rec-subkpi {
  border-left: none;
}

/* Faixa Total Gerado em destaque */
.med-rec-total {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(112, 115, 147, 0.06);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.med-rec-total-label {
  flex: 1;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--home-text-muted);
}

.med-rec-total-valor {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--weight-medium);
  color: var(--home-text-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.med-rec-total-pct {
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  border: none;
  appearance: none;
  -webkit-appearance: none;
  background: var(--s-paga-bg);
  color: var(--s-paga);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  font-family: inherit;
  cursor: default;
}

/* Previsão (meta editável em pill) */
.med-rec-previsao {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.med-rec-previsao-label {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--home-text-muted);
}

.med-rec-previsao-pill {
  width: 140px;
  height: 36px;
  box-sizing: border-box;
  padding: 0 18px;
  text-align: center;
  border-radius: var(--radius-pill);
  background: rgba(112, 115, 147, 0.06);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--home-text-strong);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 140ms, border-color 140ms;
}

.med-rec-previsao-pill:hover {
  background: rgba(112, 115, 147, 0.12);
  border-color: var(--home-line-faint);
}

.med-rec-previsao-pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Fix: input troca a pill no clique e precisa ter dimensões idênticas.
   Especificidade input[type=text].classe (0,0,2,1) vence a regra global
   input[type=text],…,textarea (0,0,1,1) que tinha width:100%/height:38px.
   Replica tokens da pill aqui pra não depender de cascata frágil. */
input[type="text"].med-rec-previsao-input {
  width: 140px;
  height: 36px;
  box-sizing: border-box;
  padding: 0 18px;
  text-align: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent);
  background: white;
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--weight-medium);
  line-height: 1;
  color: var(--home-text-strong);
  font-variant-numeric: tabular-nums;
  outline: none;
  cursor: text;
}

/* ============================================================
   medico-agenda — popover "Conectar ao calendário"
   ============================================================ */
.webcal-popover {
  width: 360px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  padding: 18px 18px 16px;
  z-index: 1100;
  animation: fadeInDown 180ms ease-out both;
}

.webcal-popover-title {
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--text);
  margin-bottom: 10px;
}

/* URL + copiar (ação principal): campo larga + botão-ícone quadrado. */
.webcal-popover-url-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
  margin-bottom: 8px;
}

input.webcal-popover-url {
  flex: 1;
  height: 36px;
  padding: 0 10px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  color: var(--text-muted);
  min-width: 0;
}
input.webcal-popover-url:focus {
  outline: none;
  border-color: var(--accent);
}

.webcal-popover-copy {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  cursor: pointer;
  transition: opacity 120ms;
}
.webcal-popover-copy:hover { opacity: 0.9; }

/* Dica de uso (1 linha) + atalho "Abrir no Google" como link inline discreto. */
.webcal-popover-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 12px;
}

/* Cada app (Google/Apple/Outlook) é um link inline na frase — clicar assina
   o feed no calendário correspondente. */
.webcal-popover-app {
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: var(--weight-medium);
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
}
.webcal-popover-app:hover:not(:disabled) { text-decoration: underline; }
.webcal-popover-app:disabled { color: var(--text-muted); cursor: default; }

.webcal-popover-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
  font-size: 12px;
  color: var(--text-xmuted);
}
/* Sem rotação registrada (token original): foot só com "Gerar novo link". */
.webcal-popover-rotated:empty { display: none; }

.webcal-popover-link {
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: var(--weight-medium);
  color: var(--accent);
  cursor: pointer;
}
.webcal-popover-link:hover { text-decoration: underline; }

/* medico-home — Widget de Solicitações (handoff)
   Reusa .hw-task / .hw-check / .hw-due / .hw-empty da sidebar da Bruna. */
.med-handoff-item { align-items: flex-start; }
.med-handoff-main { flex: 1; min-width: 0; }
.med-handoff-top {
  display: flex;
  gap: 6px;
  align-items: baseline;
  flex-wrap: wrap;
}
/* Título do item = paciente (a categoria vive no header do grupo desde a 089). */
.med-handoff-pac {
  font-weight: var(--weight-semibold);
  font-size: 13px;
  color: var(--text);
}
.med-handoff-desc {
  font-size: 12px;
  color: var(--home-text-muted);
  margin-top: 2px;
  line-height: 1.35;
}
/* Meta do item: prazo (badge hw-due) em cima, data de criação embaixo (pedido
   da Bruna 2026-07-01: ver criação + prazo). */
.med-handoff-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.med-handoff-criada {
  font-size: 10.5px;
  color: var(--home-text-soft);
  white-space: nowrap;
}
/* "avisado 12/07/2026" — segundo item da meta, só na visão da Bruna (o médico
   não recebe temAviso). Mesmos tokens da data de criação: é informação de
   apoio, não deve competir com o prazo. */
.med-handoff-avisado {
  font-size: 10.5px;
  color: var(--home-text-soft);
  white-space: nowrap;
}

/* ── Inbox de solicitações: header (ícone) ── */
/* Body herda padding:0 do .ws-card-body; o topo ganha respiro via .handoff-grupo-head,
   mas o fim encostava na borda quando a lista rola. Simetriza topo/base. */
#med-home-handoff-body { padding: 6px 0 10px; }
.handoff-title { display: inline-flex; align-items: center; gap: 7px; }
.handoff-title-ico {
  display: inline-flex;
  color: var(--accent);
}

/* ── Grupos por categoria ── */
.handoff-grupo + .handoff-grupo { margin-top: 10px; }
.handoff-grupo-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 4px 5px;
}
.handoff-grupo-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--home-text-soft);
}
.handoff-grupo-dot--inbox {
  background: transparent;
  border: 1.5px dashed var(--home-text-soft);
}
.handoff-grupo-nome {
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--home-text-muted);
  letter-spacing: 0.01em;
}
.handoff-grupo-count {
  font-size: 11px;
  color: var(--home-text-soft);
  font-variant-numeric: tabular-nums;
}

/* Header de grupo colapsável (aba da Bruna): o header inteiro é o alvo de
   clique/teclado. Reseta o <button> e alarga a hit-area pra confortável. */
.handoff-grupo-head--btn {
  width: 100%;
  background: transparent;
  border: none;
  padding: 7px 6px;
  font: inherit;
  cursor: pointer;
  border-radius: 8px;
  text-align: left;
  transition: background 100ms;
}
.handoff-grupo-head--btn:hover { background: var(--home-hover); }
.handoff-grupo-head--btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-tint-3);
}
/* Caret gira 90° ao abrir (só transform, respeita reduced-motion global). */
.handoff-grupo-caret {
  font-size: 15px;
  line-height: 1;
  color: var(--home-text-soft);
  flex: none;
  transition: transform 140ms cubic-bezier(0.32, 0.72, 0, 1);
}
.handoff-grupo-caret.is-open { transform: rotate(90deg); }

/* ── Item: flag (estrela) + menu (⋯) ── */
.med-handoff-item .med-handoff-flag,
.med-handoff-item .med-handoff-menu {
  background: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  border-radius: 6px;
  color: var(--home-text-soft);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 120ms, color 120ms, background 120ms;
}
.med-handoff-menu { font-size: 16px; line-height: 1; width: 24px; height: 24px; }
/* flag sinalizada fica sempre visível (âmbar); demais aparecem no hover */
/* Estrela de "sinalizado": âmbar dourado fixo (convenção universal de favorito),
   não o token de status --s-agendada (que é azul-lavanda neste tema). */
.med-handoff-flag.is-on { opacity: 1; color: #F5A623; }
.med-handoff-item:hover .med-handoff-flag,
.med-handoff-item:hover .med-handoff-menu,
.med-handoff-item:focus-within .med-handoff-flag,
.med-handoff-item:focus-within .med-handoff-menu { opacity: 1; }
.med-handoff-flag:hover { color: #F5A623; background: var(--accent-tint-3); }
.med-handoff-menu:hover { color: var(--text); background: var(--accent-tint-3); }
.med-handoff-flag:focus-visible,
.med-handoff-menu:focus-visible { outline: none; opacity: 1; box-shadow: 0 0 0 2px var(--accent-tint-3); }
@media (hover: none), (pointer: coarse) {
  .med-handoff-item .med-handoff-menu {
    opacity: 1;
    width: 44px;
    height: 44px;
    margin: -10px -8px -10px 0;
  }
}
.med-handoff-item.is-arq { opacity: 0.6; }
.med-handoff-item.is-deeplink {
  background: var(--accent-tint-2);
  box-shadow: inset 3px 0 0 var(--accent);
}

.handoff-readonly-hero {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.handoff-readonly-desc .fin-drawer-row-value {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ── Toggle "ver arquivadas" ── */
.handoff-arq-toggle {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 7px 4px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--home-line-soft);
  font: inherit;
  font-size: 12px;
  color: var(--home-text-muted);
  cursor: pointer;
  text-align: left;
}
.handoff-arq-toggle:hover { color: var(--accent); }
.handoff-grupo--arq { margin-top: 4px; }

/* ── Popover de ações por item ── */
.handoff-menu {
  min-width: 200px;
  max-width: calc(100vw - 24px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0,0,0,0.14), 0 2px 6px rgba(0,0,0,0.06);
  padding: 6px;
  z-index: 1200;
  animation: fadeInDown 160ms ease-out both;
}
.handoff-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.handoff-menu-item:hover { background: var(--accent-tint-3); }
.handoff-menu-item:focus-visible { outline: none; background: var(--accent-tint-3); }
/* Menu de ações por item do board (⋯): container + variante destrutiva. */
.handoff-item-menu { min-width: 180px; max-width: calc(100vw - 24px); padding: 6px; }
.handoff-menu-danger { color: var(--error); }
.handoff-menu-danger .handoff-menu-ico { color: var(--error); }
.handoff-menu-danger:hover { background: color-mix(in srgb, var(--error) 10%, transparent); }
.handoff-menu-ico {
  display: inline-flex;
  color: var(--home-text-muted);
  flex: none;
}
.handoff-menu-ico.is-on { color: #F5A623; }
.handoff-menu-label { flex: 1; min-width: 0; }
.handoff-menu-divider {
  height: 1px;
  background: var(--home-line-soft);
  margin: 4px 6px;
}
.handoff-menu-done .handoff-menu-ico { color: var(--s-confirmada, #34c759); }

/* ── Board 2 colunas das Solicitações (handoff) — compartilhado Bruna/médico ──
   Esquerda: pastas (Inbox/Hoje/Próximo/Sinalizadas/Arquivadas). Direita:
   seletor de tag + lista da pasta×tag. */
.hs2 {
  display: grid;
  grid-template-columns: 212px 1fr;
  max-width: 920px;
  margin: 16px 20px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
/* Coluna esquerda — pastas */
.hs2-nav {
  border-right: 1px solid var(--border-soft);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hs2-fold {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--text-ink);
  cursor: pointer;
  text-align: left;
  transition: background 100ms, color 100ms;
}
.hs2-fold:hover { background: var(--hover-subtle); }
.hs2-fold.is-active { background: var(--accent-tint-2); color: var(--accent); }
.hs2-fold:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-tint-3); }
.hs2-fold-ico { display: inline-flex; color: var(--text-cool); flex: none; }
.hs2-fold.is-active .hs2-fold-ico { color: var(--accent); }
.hs2-fold-nome { flex: 1; min-width: 0; }
.hs2-fold-n {
  font-size: 12px;
  color: var(--text-xmuted);
  font-variant-numeric: tabular-nums;
}
.hs2-fold.is-active .hs2-fold-n { color: var(--accent); }
/* Coluna direita — conteúdo */
.hs2-main { padding: 14px 16px 18px; min-width: 0; }
.hs2-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
/* Seletor de tag (pílula + chevron → dropdown) */
.hs2-tagsel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 6px 10px 6px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--text-ink);
  transition: background 100ms;
}
.hs2-tagsel:hover { background: var(--hover-subtle); }
.hs2-tagsel:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-tint-3); }
.hs2-tagsel-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs2-tagsel-chev { display: inline-flex; color: var(--text-cool); flex: none; }
.hs2-tagsel-ico { display: inline-flex; color: var(--text-cool); flex: none; }
/* "Ver mais N" */
.hs2-vermais {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 9px 22px;
  background: transparent;
  border: none;
  font: inherit;
  font-size: 12px;
  color: var(--home-text-muted);
  cursor: pointer;
  text-align: left;
}
.hs2-vermais:hover { color: var(--accent); }
.hs2-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 22px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}
/* Ícone da pasta uniformizado: tamanho e cor iguais p/ os 5 (cada svg tem
   tamanho/stroke nativo distinto — iconClock não é paramétrico). */
.hs2-vazio-ico { display: inline-flex; color: var(--text-xmuted); }
.hs2-vazio-ico svg {
  width: 30px;
  height: 30px;
  stroke: currentColor;
}
.hs2-vazio-msg { display: block; }
/* Dropdown de seleção de tag (reusa .action-pop) */
.hs2-tagpop { min-width: 180px; max-width: calc(100vw - 24px); padding: 6px; }
.hs2-tagpop-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.hs2-tagpop-item:hover { background: var(--accent-tint-3); }
.hs2-tagpop-item.is-active { font-weight: var(--weight-semibold); }
.hs2-tagpop-item:focus-visible { outline: none; background: var(--accent-tint-3); }
/* Mobile: empilha (pastas viram uma linha rolável no topo). */
@media (max-width: 767px) {
  .hs2 { grid-template-columns: 1fr; margin: 12px; }
  .hs2-nav {
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--border-soft);
    scrollbar-width: none;
  }
  .hs2-nav::-webkit-scrollbar { display: none; }
  .hs2-fold { flex: none; }
}

/* ── Aba Solicitações em Pendências (handoff, lado da Bruna) ── */
/* Toolbar (Tags / Nova solicitação) acima do board 2 colunas. */
.pend-hs-toolbar-wrap { max-width: 920px; margin: 16px 20px 0; }
.pend-hs-toolbar-wrap .pend-hs-toolbar { margin-bottom: 0; }
.pend-hs-toolbar-wrap + .hs2 { margin-top: 12px; }

/* ── Layout largura-de-aba (aba Solicitações da Bruna E do médico) ──
   REGRA: NÃO zerar o padding do #view — o título/subtabs/toolbar vivem nele e
   precisam do respiro lateral (64px desktop). Só o BOARD sangra, via margin
   negativa que compensa esse padding e alcança a borda. O .hs2 base é reusado
   pelos widgets da Home — só sobrescrever aqui dentro. A view do médico
   (.view--medico-solicitacoes) renderiza o board direto, sem toolbar-wrap. */
.view--pend-solicitacoes .pend-hs-toolbar-wrap { max-width: none; margin: 4px 0 0; }
.view--pend-solicitacoes .hs2,
.view--medico-solicitacoes .hs2 {
  max-width: none;
  /* -64px de cada lado = padding lateral do #view → board vai até a borda */
  margin: 12px -64px 24px;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  /* 220 (pastas) + 64 (sangria esquerda restaurada no padding do nav) */
  grid-template-columns: 284px minmax(0, 1fr);
  min-height: calc(100vh - 220px);
}
.view--pend-solicitacoes .hs2-nav,
.view--medico-solicitacoes .hs2-nav {
  border-right: 1px solid var(--home-line);
  /* 64px à esquerda realinha o texto das pastas com o título/tabs acima */
  padding: 4px 20px 24px 64px;
  align-self: stretch;
}
.view--pend-solicitacoes .hs2-fold,
.view--medico-solicitacoes .hs2-fold { padding: 9px 12px; }
.view--pend-solicitacoes .hs2-main,
.view--medico-solicitacoes .hs2-main { padding: 0 64px 18px 24px; }
/* Médico: faixa de escopo + board são o conteúdo da view — respiro no topo. */
.view--medico-solicitacoes #med-sol-wrap { margin-top: 4px; }
/* Recebidas | Enviadas: reusa o segmento da Bruna; o board logo abaixo já traz
   o próprio margin-top, então o do segmento sairia dobrado. */
.view--medico-solicitacoes .med-sol-escopo .pend-hs-segmento { margin-bottom: 0; }
.med-sol-deeplink-error {
  max-width: 720px;
  margin: 16px 24px 0;
}
@media (max-width: 767px) {
  /* Mobile: #view tem padding lateral menor; empilha as pastas, sem margin negativa grande. */
  .view--pend-solicitacoes .hs2,
  .view--medico-solicitacoes .hs2 {
    grid-template-columns: 1fr;
    margin: 12px 0;
    min-height: 0;
  }
  .view--pend-solicitacoes .hs2-nav,
  .view--medico-solicitacoes .hs2-nav {
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--home-line);
    padding: 8px 0;
  }
  .view--pend-solicitacoes .hs2-main,
  .view--medico-solicitacoes .hs2-main { padding: 12px 0; }
}
.pend-hs-wrap { max-width: 760px; padding: 16px 20px 24px; }
.pend-hs-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 14px;
}
/* Botões discretos: gerenciar-tags (só ícone) + Nova (ícone + label). */
.pend-hs-tagbtn,
.pend-hs-newbtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  font: inherit;
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--text-ink);
  cursor: pointer;
  transition: background 100ms, border-color 100ms;
}
.pend-hs-tagbtn:hover,
.pend-hs-newbtn:hover { background: var(--hover-subtle); border-color: var(--home-line); }
.pend-hs-tagbtn:focus-visible,
.pend-hs-newbtn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-tint-3); }
.pend-hs-tagbtn { width: 34px; justify-content: center; padding: 0; color: var(--text-cool); }
.pend-hs-tagbtn:hover { color: var(--text-ink); }
.pend-hs-newbtn { padding: 0 13px; }
.pend-hs-newbtn svg { color: var(--text-cool); flex: none; }
/* Faixa do topo: escopo (Minhas/Médicos) à esquerda, ações à direita. */
.pend-hs-headrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.pend-hs-headrow .pend-hs-segmento { margin-bottom: 0; }
.pend-hs-headrow .pend-hs-toolbar { margin-bottom: 0; }
/* Filtro segmentado de direção (Tudo / Dos médicos / Minhas). Pílula única
   com o segmento ativo em accent-tint, espelha a família filter-pill. */
.pend-hs-segmento {
  display: inline-flex;
  max-width: 100%;
  gap: 2px;
  padding: 3px;
  margin-bottom: 16px;
  background: var(--home-hover);
  border-radius: var(--radius-md);
  /* Mobile estreito: rola dentro de si em vez de estourar a largura da view. */
  overflow-x: auto;
  scrollbar-width: none;
}
.pend-hs-segmento::-webkit-scrollbar { display: none; }
.pend-hs-seg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: none;
  border-radius: 7px;
  font: inherit;
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--home-text-muted);
  cursor: pointer;
  white-space: nowrap;
  flex: none;
  transition: background 120ms, color 120ms;
}
.pend-hs-seg:hover { color: var(--home-text); }
.pend-hs-seg.is-active {
  background: var(--bg-card);
  color: var(--home-text);
  box-shadow: var(--shadow-sm);
}
.pend-hs-seg:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-tint-3); }
.pend-hs-seg-n {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--home-text-soft);
}
.pend-hs-seg.is-active .pend-hs-seg-n { color: var(--home-text-muted); }
.pend-hs-item { cursor: pointer; }
.pend-hs-sub {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  font-size: 11px;
  color: var(--home-text-soft);
}
/* ── Widget Solicitações da Home (Bruna): resumo, não lista ──
   O body herda padding:0 do .ws-card-body; o resumo aplica o seu próprio. */
/* Widget = board 2 colunas compacto. O board (.hs2) traz seu próprio layout;
   aqui só o empty state e ajustes finos do board dentro do card estreito. */
.home-hs-vazio {
  padding: 28px 22px;
  text-align: center;
  font-size: 13px;
  color: var(--home-text-soft);
}
/* Dentro do card da Home o board NÃO é uma moldura própria (nada de card dentro
   de card): sem border/shadow/margin, largura cheia, coluna de pastas mais
   estreita. Só a linha divisória entre as duas colunas fica. */
.home-card--hs .hs2,
#med-home-sec-handoff .hs2 {
  grid-template-columns: 168px 1fr;
  max-width: none;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
/* Mobile: o widget colapsa igual à aba — as pastas viram linha rolável no topo
   (o .hs2-nav já herda flex-direction:row da media base) e a lista ocupa a
   largura cheia. Sem isso a regra 168px+1fr acima (mais específica que a media
   base) mantinha 2 colunas espremidas, as pastas sumiam e os nomes truncavam.
   O .hs2-fold base é width:100% (pensado pra coluna vertical); no eixo row isso
   faz cada pasta ocupar a linha toda e só a 1ª caber — reseta pra width:auto
   (pílula) pra as 5 pastas ficarem na linha rolável. */
@media (max-width: 767px) {
  .home-card--hs .hs2,
  #med-home-sec-handoff .hs2 { grid-template-columns: 1fr; }
  .home-card--hs .hs2-fold,
  #med-home-sec-handoff .hs2-fold { width: auto; flex: none; }
}
/* Card estreito: o prazo é redundante (a pasta já diz Hoje/Próximo) e apertaria
   o nome. Esconde a meta no widget; a data completa está na aba. */
.home-card--hs .hs2 .med-handoff-meta,
#med-home-sec-handoff .hs2 .med-handoff-meta { display: none; }
/* Nome em uma linha (com reticências) no card estreito; completo fica na aba. */
.home-card--hs .hs2 .med-handoff-pac,
#med-home-sec-handoff .hs2 .med-handoff-pac {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-card--hs .hs2 .med-handoff-top,
#med-home-sec-handoff .hs2 .med-handoff-top { flex-wrap: nowrap; }
.pend-hs-cat { display: inline-flex; align-items: center; gap: 5px; }
.pend-hs-status {
  font-size: 11px;
  color: var(--home-text-soft);
}
.pend-hs-reopen {
  background: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--home-text-soft);
  border-radius: 6px;
  flex: none;
  font-size: 15px;
  line-height: 1;
  width: 24px; height: 24px;
}
.pend-hs-reopen:hover { color: var(--accent); background: var(--accent-tint-3); }
.pend-hs-reopen:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-tint-3); }

/* ── Modal de categorias do handoff (restaurado do pré-089 para a UI da Bruna) ── */
.hcat-list { display: flex; flex-direction: column; gap: 2px; }
.hcat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 10px;
  transition: background 100ms;
}
.hcat-row:hover { background: var(--hover-subtle); }
/* Dot clicável (abre o popover de cor). Anel no hover. */
.hcat-dot {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  padding: 0;
  flex: none;
  transition: border-color 120ms;
}
.hcat-dot:hover { border-color: var(--home-line); }
.hcat-dot:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-tint-3); }
.hcat-dot-fill { width: 16px; height: 16px; border-radius: 50%; }
/* Nome protagonista: sem caixa até o foco. */
.hcat-nome {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  color: var(--text-ink);
  background: transparent;
}
.hcat-nome:hover { background: var(--bg-subtle); }
.hcat-nome:focus { outline: none; border-color: var(--accent-tint-3); background: var(--bg-card); box-shadow: 0 0 0 3px var(--accent-tint-1); }
.hcat-del {
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--home-text-soft);
  border-radius: 6px;
  flex: none;
  display: inline-flex;
  opacity: 0;
  transition: opacity 100ms, color 100ms, background 100ms;
}
.hcat-row:hover .hcat-del { opacity: 1; }
.hcat-del:hover { color: var(--s-cancelada, #ff3b30); background: var(--accent-tint-3); }
.hcat-del:focus-visible { outline: none; opacity: 1; box-shadow: 0 0 0 2px var(--accent-tint-3); }
/* Popover de cor (4×2). Reusa .action-pop; z acima do modal (9710). */
.hcat-corpop {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 10px;
  z-index: 9800;
}
.hcat-corpick {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 80ms;
}
.hcat-corpick:hover { transform: scale(1.12); }
.hcat-corpick.is-sel { border-color: var(--text-ink); }
.hcat-corpick:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-tint-3); }
/* "Nova tag": botão tracejado leve (afordância de adicionar). .btn-ghost não
   existe no projeto — estilo próprio aqui. */
.hcat-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius-md);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--accent);
  cursor: pointer;
  transition: background 100ms, border-color 100ms;
}
.hcat-add svg { flex: none; }
.hcat-add:hover { background: var(--accent-tint-1); border-color: var(--accent-tint-3); border-style: solid; }
.hcat-add:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-tint-3); }

/* Chip de sinalizar no rodapé do modal Nova solicitação (à esquerda). */
.hs-flag-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  font: inherit;
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--text-cool);
  cursor: pointer;
  transition: background 100ms, border-color 100ms, color 100ms;
}
.hs-flag-chip .hs-flag-ico { display: inline-flex; }
.hs-flag-chip:hover { background: var(--hover-subtle); color: var(--text-ink); }
.hs-flag-chip.is-on {
  color: #B8860B;
  border-color: rgba(224,168,0,0.4);
  background: rgba(224,168,0,0.08);
}
.hs-flag-chip.is-on .hs-flag-ico { color: #E0A800; }
.hs-flag-chip:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-tint-3); }

/* ── Aba Google em Pendências (fila do pull do Google Sync, Fase 3) ── */
.pend-tab-count {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  margin-left: 4px;
  border-radius: 9px;
  background: var(--accent-tint-3);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}
.pend-tab-partial {
  display: inline-block;
  margin-left: 4px;
  color: var(--warning);
  font-size: 11px;
  font-weight: var(--weight-semibold);
}
.pend-google-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 760px;
  padding: 16px 20px 24px;
}
/* Filtros da fila: reusa .filter-pill / .pac-filter-badge / .pac-filter-divider
   (componente de Pacientes, tokenizado). Só o container ganha padding próprio. */
.pend-google-filters {
  max-width: 760px;
  padding: 14px 20px 0;
}
.pend-google-vazio-filtro {
  font-size: 12px;
  color: var(--home-text-soft);
  padding: 8px 4px;
  margin: 0;
}
.pend-google-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}
.pend-google-item.is-selected {
  border-color: var(--accent);
  background: var(--accent-tint-3);
}
.pend-google-check {
  display: flex;
  align-items: center;
  flex: none;
  cursor: pointer;
}
.pend-google-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
.pend-google-item-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.pend-google-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* A classificação de calendário misto depende do título original completo. */
.pend-google-item.is-review .pend-google-item-title {
  white-space: normal;
  overflow-wrap: anywhere;
}
/* O chip da sugestão mora na 2ª linha, não ao lado do título: disputando espaço
   com o texto solto do Google (o título de um evento costuma vir "Nome
   Sobrenome" + CPF colados), o nome do paciente truncava — e é justamente ele
   que decide o clique. */
.pend-google-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--home-text-soft);
}
.pend-google-item-meta code {
  font-size: 10px;
  background: var(--accent-tint-3);
  padding: 1px 4px;
  border-radius: 4px;
}
.pend-google-item-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}
/* Ação primária da linha: vincular ganha a cor de acento (repouso). */
.pend-google-act-vincular { color: var(--accent); }
.pend-google-act-vincular:hover {
  background: var(--accent-tint-2);
  color: var(--accent);
}
/* Sugestão do pull: quem é o paciente provável. Verde do sistema (--home-success
   sobre o pastel --s-paga-bg) = "pronto pra confirmar", distinto do acento, que
   é ação. O ✓ da linha aceita em 1 clique. */
.pend-google-sugestao {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: none;
  padding: 1px 6px 1px 4px;
  border-radius: 999px;
  background: var(--s-paga-bg);
  color: var(--home-success);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.pend-google-act-aceitar { color: var(--home-success); }
.pend-google-act-aceitar:hover {
  background: var(--s-paga-bg);
  color: var(--home-success);
}
/* "Selecionar todas" fica na ponta da linha de filtros, sem competir com as pills. */
.pend-google-selall { margin-left: auto; }
.pend-google-hint {
  font-size: 11px;
  color: var(--home-text-soft);
  max-width: 200px;
  text-align: right;
  flex: none;
}
.gp-vincular { display: flex; flex-direction: column; gap: 10px; }
.gp-vincular-evento {
  font-size: 12px;
  color: var(--home-text-soft);
  margin: 0;
}
.gp-vincular-lista {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
}
.gp-vincular-opcao {
  padding: 9px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.gp-vincular-opcao:hover { background: var(--accent-tint-3); }
.gp-vincular-opcao:focus-visible { outline: none; background: var(--accent-tint-3); }
.gp-vincular-vazio {
  font-size: 12px;
  color: var(--home-text-soft);
  padding: 8px 4px;
  margin: 0;
}
@media (max-width: 767px) {
  .pend-google-filters { padding: 12px 16px 0; }
  .pend-google-list { padding: 12px 16px 24px; }
  /* Ícones compactos cabem em linha única no mobile — sem quebra pra baixo.
     O hint da série incompatível quebra pra linha própria. */
  .pend-google-item { flex-wrap: wrap; }
  .pend-google-hint {
    order: 3;
    flex-basis: 100%;
    text-align: left;
    max-width: none;
  }
}

/* ============================================================
   Aprovações — hub de decisões da secretária (aba de Pendências)
   Sidebar interna de categorias (molde .cfg-sidebar, classes próprias) + corpo.
   ============================================================ */
.apr-wrap {
  display: grid;
  grid-template-columns: 232px 1fr;
  min-height: 440px;
}
.apr-side {
  border-right: 1px solid var(--home-line);
  padding: 14px 10px 24px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.apr-cat {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}
.apr-cat:hover { background: var(--sidebar-item-hover); }
.apr-cat:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.apr-cat.is-active { background: var(--bg-card); box-shadow: var(--shadow-shell); }
.apr-cat-ico {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--accent-tint-2);
  color: var(--accent);
}
.apr-cat-ico svg { width: 16px; height: 16px; }
.apr-cat-body { min-width: 0; flex: 1; }
.apr-cat-title {
  display: block;
  font-size: 13.5px;
  font-weight: var(--weight-semibold);
  color: var(--text-ink);
}
.apr-cat-sub {
  display: block;
  font-size: 11.5px;
  color: var(--text-cool);
  margin-top: 2px;
}
.apr-cat-count {
  font-size: 12px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--accent-tint-2);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.apr-cat-count--warn { background: var(--warning-bg); color: var(--warning); }
.apr-cat-count--error { background: var(--warning-bg); color: var(--warning); }

.apr-body { padding: 22px 26px; min-width: 0; }
.apr-cat-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.apr-cat-head h3 {
  font-size: 17px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  margin: 0;
}
.apr-cat-n {
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--text-cool);
  font-variant-numeric: tabular-nums;
}
/* Linhas reusam o molde .pend-group de Pendências. Só a variante estática do
   head (sem chevron/cursor de expandir — a linha do hub não colapsa). */
.pend-group-head--static { cursor: default; }
.pend-group-head--static:hover { background: transparent; }
.apr-arrow { color: var(--accent); font-weight: var(--weight-semibold); }
.apr-sub-alerta { color: var(--error); font-weight: var(--weight-semibold); }

@media (max-width: 767px) {
  .apr-wrap { grid-template-columns: 1fr; }
  .apr-side {
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--home-line);
    padding: 12px 16px;
  }
  .apr-cat { flex: none; min-width: 200px; }
  .apr-body { padding: 18px 16px 24px; }
}

/* medico-home — Empty state "Sem consultas hoje" */
.med-hoje-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 24px;
  height: 100%;
  min-height: 220px;
  text-align: center;
}

.med-hoje-empty-icon {
  color: var(--home-text-muted);
  opacity: 0.5;
}

.med-hoje-empty-title {
  font-size: 14px;
  color: var(--home-text-muted);
  margin: 0;
}

.med-hoje-empty-link {
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--accent);
  text-decoration: none;
}
.med-hoje-empty-link:hover { text-decoration: underline; }

/* Mini chart 12m do Receitas */
.med-rec-chart-wrap {
  margin-top: var(--space-4);
  height: 100px;
}

/* medico-financeiro — sinaliza saldo/variação positivo/negativo no KPI.
   Usa os tokens de texto AA (não o pastel --s-paga, que falha AA em texto
   pequeno como a % de variação; ver .fluxo-row-valor). */
.med-fin-kpi-positivo { color: var(--fin-receita-fg); }
.med-fin-kpi-negativo { color: var(--fin-despesa-fg); }
.med-fin-kpi-neutro { color: var(--text-meta); }

/* medico-financeiro — KPI strip sem toggle expansível */
.med-fin-summary--notoggle .fin-summary-strip { padding-right: var(--space-4); }
.med-fin-summary--notoggle .fin-summary-toggle { display: none; }

/* ============================================================
   medico-agenda (F2) — overrides mínimos sobre o design system
   ============================================================ */

/* Balão do médico mais enxuto (Bruna usa 400px porque tem inputs editáveis). */
.med-ag-pop {
  width: 320px;
}

/* Alinha header (nome+X) com o conteúdo das rows internas, que ficam recuadas
   em 14px (.ag-detail-pop-row padding). Sem isso, X e nome ficam colados na
   borda enquanto label/value das rows respiram. */
.med-ag-pop .ag-detail-pop-header {
  padding: 0 14px;
  margin-bottom: 14px;
}

/* Título do balão (nome do paciente + data/hora) */
.med-ag-pop-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.med-ag-pop-title strong {
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--text-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.med-ag-pop-title span {
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Chip de bloqueio (médico marcou indisponibilidade) — bloco único cinza
   sólido, sem border-left, encostado nas bordas da célula. Usado em Dia e
   Semana, com altura proporcional ao intervalo (igual RAE). */
.ag-bloqueio-chip {
  /* Cinza opaco (não rgba) — cobre as linhas da grade por baixo. */
  background: #ECEDF1;
  border-left: none;
  color: var(--text-muted);
  cursor: pointer;
  /* Sobrepõe left/right do .ag-event pra encostar nas bordas da célula */
  left: 0;
  right: 0;
  border-radius: 0;
}

.ag-bloqueio-chip .ag-ev-nome,
.ag-bloqueio-chip .ag-ev-serv {
  color: var(--text-muted);
}

/* Grade Dia em "solo" — sem painel lateral de pendências */
.ag-dia-wrap--solo {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

/* medico-agenda — empty state "Nenhuma consulta neste dia" */
.med-ag-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 24px;
  color: var(--text-muted);
  font-size: 13px;
  opacity: 0.7;
}

/* ============================================================
   Onboarding tour (coach marks) — components/tour.js
   Overlay + spotlight + balão ancorado. z-index 9750: acima de
   modal-stack (9710), abaixo de toast (9999).
   ============================================================ */
.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 9750;
  pointer-events: none;   /* só o balão recebe clique; overlay não bloqueia */
}

/* Recorte que escurece todo o resto via box-shadow gigante (padrão coach mark).
   pointer-events:none deixa o elemento destacado ainda clicável por baixo. */
.tour-spotlight {
  position: fixed;
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 9999px rgba(20, 24, 34, 0.55);
  pointer-events: none;
  transition: top 0.28s cubic-bezier(0.32, 0.72, 0, 1),
              left 0.28s cubic-bezier(0.32, 0.72, 0, 1),
              width 0.28s cubic-bezier(0.32, 0.72, 0, 1),
              height 0.28s cubic-bezier(0.32, 0.72, 0, 1),
              opacity 0.2s ease;
}

.tour-overlay--no-motion .tour-spotlight { transition: opacity 0.15s ease; }

.tour-balloon {
  position: fixed;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: tour-balloon-in 0.26s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes tour-balloon-in {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.tour-overlay--no-motion .tour-balloon { animation: none; }

.tour-balloon-inner { padding: 18px 18px 16px; }

.tour-balloon-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.tour-balloon-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-xmuted);
  letter-spacing: 0.02em;
}

.tour-balloon-skip {
  background: none;
  border: none;
  padding: 4px 6px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.tour-balloon-skip:hover { color: var(--text-ink); background: var(--accent-tint-1); }

.tour-balloon-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 650;
  color: var(--text-ink);
  line-height: 1.3;
}

.tour-balloon-body {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.tour-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.tour-btn-next { min-width: 96px; }

/* Avançar como ícone (seta) — mais leve que texto. Quadrado 36px, espelha
   .btn-secondary--icon que o Voltar já usa. */
.tour-btn-next--icon {
  min-width: 0;
  width: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Biquinho — 10px, 4 lados (espelha ag-detail-pop-arrow). */
.tour-balloon-arrow {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  transform: rotate(45deg);
}
.tour-balloon-arrow--top    { top: -8px;    border-right: none;  border-bottom: none; }
.tour-balloon-arrow--bottom { bottom: -8px; border-left: none;   border-top: none; }
.tour-balloon-arrow--left   { left: -8px;   border-top: none;    border-right: none; }
.tour-balloon-arrow--right  { right: -8px;  border-bottom: none; border-left: none; }

/* Mobile: balão vira bottom-sheet fixo, spotlight some. */
@media (max-width: 767px) {
  .tour-spotlight { opacity: 0 !important; }
  .tour-balloon {
    top: auto !important;
    left: 16px !important;
    right: 16px !important;
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    width: auto;
    max-width: none;
  }
  .tour-balloon-arrow { display: none !important; }
}
/* Disclosure contextual antes do OAuth Google Calendar. */
.google-oauth-disclosure {
  color: var(--text-muted);
  font-size: var(--size-sm);
  line-height: 1.55;
}

.google-oauth-disclosure p {
  margin: 0 0 var(--space-4);
}

.google-oauth-disclosure strong {
  color: var(--text);
  font-weight: var(--weight-semibold);
}

.google-oauth-disclosure ul {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
}

.google-oauth-disclosure li + li {
  margin-top: var(--space-2);
}

.google-oauth-disclosure-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-soft);
}

.google-oauth-disclosure-links a {
  color: var(--accent);
  font-weight: var(--weight-medium);
  text-underline-offset: 3px;
}


/* ── Repasse (módulo administrativo) — nota de estado do serviço ──────────
   As regras de lista/card/tabs/footer são COMPARTILHADAS com .cfg-conv-*
   (mesmo bloco, seletor duplo) — nada de estilo duplicado. Só a nota é nova. */
.cfg-rp-nota {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-hairline);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: var(--size-sm);
}
.cfg-rp-nota strong { color: var(--text-ink); font-weight: var(--weight-medium); }
.cfg-rp-pct {
  width: 84px;
  text-align: right;
}
/* O sub da linha é uma SEGUNDA linha, não continuação: como <span> herdaria
   display inline e o texto emendava no nome. */
.cfg-rp-card-sub { display: block; }
/* Respiro entre a lista e o bloco de adicionar — sem isso o "Adicionar médico"
   encosta na última linha e parece pertencer a ela. */
.cfg-rp-add { margin-top: var(--space-5); }
/* `.pac-detail-body` nasce com padding-top 0 porque nos drawers de convênio e
   paciente são as ABAS que ocupam esse espaço. Os drawers de repasse abrem sem
   abas (provedor novo) ou sem aba nenhuma (serviço), então o primeiro campo
   colava no divisor do cabeçalho. */
.ws-drawer-shell-compact .cfg-rp-body { padding-top: var(--space-6); }

/* ── Repasse: linhas de lista dentro do drawer ─────────────────────────── */
/* Campo editável inline na linha: mesma altura da linha, sem virar "caixa"
   dentro da caixa. Espelha as linhas de plano do convênio. */
.cfg-rp-inline {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  font-size: var(--size-sm);
  color: var(--text-ink);
}
.cfg-rp-inline:hover { border-color: var(--border-soft); }
.cfg-rp-inline:focus { border-color: var(--border); background: var(--bg-card); }
.cfg-rp-inline::placeholder { color: var(--text-xmuted); }

/* Estado do serviço: texto, não pastilha colorida — status por palavra, e a cor
   só reforça. */
.cfg-rp-estado {
  font-size: var(--size-xs);
  color: var(--text-muted);
  white-space: nowrap;
}
.cfg-rp-estado--ativo { color: var(--accent); font-weight: var(--weight-medium); }

/* A linha que leva a outro lugar mostra que leva. Grid próprio: o estado é
   texto curto e o chevron é minúsculo, então a coluna de 140px herdada da linha
   de plano roubava largura do nome e quebrava "Atendimento hospitalar" em duas
   linhas. */
.cfg-rp-row--link { cursor: pointer; grid-template-columns: 1fr auto 20px; }
.cfg-rp-row--link:hover { background: var(--hover-subtle); }
.cfg-rp-chevron { color: var(--text-xmuted); display: inline-flex; justify-content: flex-end; }

/* Ações do formulário recolhido de serviço. */
.cfg-rp-form-acoes {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* Campos dentro de `.pac-detail-form` herdam 14px, enquanto a aba Dados e as
   linhas de convênio ficam em 6px — medido, não suposto. Um mesmo drawer com
   dois raios é o tipo de detalhe que faz a tela parecer montada por duas mãos. */
.cfg-rp-body .field input,
.cfg-rp-body .field select,
.cfg-rp-body .field textarea { border-radius: var(--radius-sm); }

/* Nota do rodapé nas abas que salvam sozinhas. */
.cfg-rp-footer-nota { font-size: var(--size-xs); color: var(--text-muted); }

/* Serviço de repasse: form-sheet com navegação por assunto. Escopo local para
   preservar as métricas dos drawers de provedor e mapeamento. */
.rps-drawer {
  height: min(820px, calc(100dvh - var(--drawer-offset) * 2));
}
.rps-drawer .rps-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-card);
}
.rps-drawer .drawer-head {
  position: static;
}
.rps-drawer .ws-drawer-title {
  margin: 0;
  overflow-wrap: anywhere;
}
.rps-help {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--size-14);
  line-height: 1.5;
  text-wrap: pretty;
}
.rps-tabs button:focus-visible, .rps-help-trigger:focus-visible,
.rps-drawer .cfg-rp-row--link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
/* A rolagem pertence à drawer; limitar este corpo corta o padding inferior. */
.rps-drawer .cfg-rp-body { max-height: none; padding: var(--space-6); }
.rps-drawer #rps-config { gap: 0; }
.rps-section { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.rps-section + .rps-section {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-soft);
}
.rps-section h3 {
  margin: 0;
  color: var(--text-ink);
  font-size: var(--size-md);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}
.rps-section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.rps-heading-help { display: flex; align-items: center; gap: var(--space-1); }
.rps-drawer .rps-help-trigger { width: 40px; height: 40px; color: var(--text-muted); }
.rps-drawer .rps-help-trigger[aria-expanded="true"] { color: var(--accent); background: var(--accent-tint-2); }
.rps-drawer .field { min-width: 0; gap: var(--space-2); }
.rps-drawer .field label, .rps-drawer .ui-switch-text { font-size: var(--size-base); }
.rps-drawer .field input, .rps-drawer .field select, .rps-drawer .cfg-rp-pct,
.rps-drawer #rps-prazos-desde {
  min-width: 0;
  height: 44px;
  font-size: 16px;
  border-radius: var(--radius-sm);
}
.rps-drawer input::placeholder { color: var(--text-muted); }
.rps-drawer .ui-switch { padding: var(--space-2) 0; min-height: 44px; }
.rps-drawer .ui-switch input:focus-visible + .ui-switch-track { outline: 2px solid var(--accent); outline-offset: 3px; }
.rps-days { display: flex; gap: var(--space-3); }
.rps-days .field { flex: 1; }
.rps-drawer .cfg-rp-list { margin-top: 0; gap: 0; }
.rps-drawer .cfg-rp-row {
  grid-template-columns: minmax(0, 1fr) auto 40px;
  gap: var(--space-3);
  padding-block: var(--space-3);
}
.rps-drawer .cfg-rp-row > div { min-width: 0; }
.rps-drawer .cfg-rp-row:last-child { border-bottom: 0; }
.rps-drawer .cfg-rp-row--link { grid-template-columns: minmax(0, 1fr) auto 20px; }
.rps-file-summary { display: flex; align-items: flex-start; gap: var(--space-3); }
.rps-file-icon { display: flex; flex: 0 0 24px; padding-top: 2px; color: var(--text-muted); }
.rps-file-copy { min-width: 0; }
.rps-file-state { justify-self: start; }
.rps-file-state.status-badge { min-height: 26px; font-size: var(--size-14); color: var(--fin-receita-fg); }
.rps-drawer .cfg-rp-card-nome { font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.rps-drawer .cfg-rp-card-sub, .rps-drawer .cfg-rp-estado,
.rps-drawer .cfg-empty-text, .rps-drawer .cfg-rp-aviso-cadastro { font-size: var(--size-14); line-height: 1.5; }
.rps-drawer .cfg-empty-text { margin: 0; padding-block: var(--space-3); }
.rps-drawer .cfg-rp-row .btn-icon { width: 40px; height: 40px; }
.rps-drawer .rps-medico-row { grid-template-columns: minmax(0, 1fr) 40px; }
.rps-drawer .rps-medico-row--rateio { grid-template-columns: minmax(0, 1fr) 80px 40px; }
.rps-drawer .cfg-rp-pct { width: 100%; }
.help-popover {
  --help-arrow-x: 50%;
  position: fixed;
  inset: auto;
  margin: 0;
  width: min(360px, calc(100vw - 24px));
  overflow: visible;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  color: var(--text-ink);
  box-shadow: 0 4px 8px rgba(17, 24, 39, 0.12);
  font-size: var(--size-14);
  line-height: 1.5;
  text-wrap: pretty;
}
.help-popover::after {
  content: '';
  position: absolute;
  left: var(--help-arrow-x);
  width: 12px;
  height: 12px;
  background: var(--bg-card);
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
}
.help-popover[data-placement="top"]::after { bottom: -7px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.help-popover[data-placement="bottom"]::after { top: -7px; border-left: 1px solid var(--border); border-top: 1px solid var(--border); }
.help-popover-content {
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-5);
  border-radius: inherit;
}
.help-popover-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.help-popover h4 { margin: 0; font-size: var(--size-base); font-weight: var(--weight-semibold); }
.help-popover .btn-icon { flex-shrink: 0; }
.help-popover dl { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.help-popover dt { font-weight: var(--weight-semibold); }
.help-popover dd { margin: var(--space-1) 0 0; }
.help-popover dd + dd { margin-top: var(--space-2); }
.rps-agenda-link { width: fit-content; color: var(--accent); font-size: var(--size-14); }
.rps-drawer .rps-footer { padding: var(--space-4) var(--space-6); gap: var(--space-3); flex-wrap: wrap; }
.rps-footer-actions { display: flex; align-items: center; gap: var(--space-1); }
.rps-drawer .btn-primary, .rps-drawer .btn-secondary, .rps-drawer .btn-danger-ghost { min-height: 44px; font-size: var(--size-base); }
.rps-footer button { padding-inline: var(--space-3); white-space: nowrap; }
.rps-drawer #rps-salvar { margin-left: auto; }
.rps-drawer #rps-autosave { margin-left: auto; }
.rps-drawer .cfg-add-btn { min-height: 44px; font-size: var(--size-base); align-self: flex-start; }

@media (max-width: 767px) {
  .rps-drawer .cfg-rp-body { padding: var(--space-5); }
  .rps-drawer .rps-footer { padding: var(--space-4) var(--space-5) max(var(--space-4), env(safe-area-inset-bottom)); }
  .rps-drawer .form-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .rps-drawer .cfg-rp-row--link { grid-template-columns: minmax(0, 1fr) 20px; }
  .rps-drawer .cfg-rp-row--link .rps-file-state { grid-column: 1; grid-row: 2; margin-left: calc(24px + var(--space-3)); }
  .rps-drawer .cfg-rp-row--link .cfg-rp-chevron { grid-column: 2; grid-row: 1 / span 2; }
  .rps-drawer .cfg-rp-row--link { row-gap: var(--space-1); }
  .rps-days { flex-wrap: wrap; }
  .rps-days .field { flex-basis: 100px; }
}

@media (max-width: 359px) {
  .rps-drawer #rps-salvar { width: 100%; margin-left: 0; }
  .rps-drawer #rps-autosave { width: 100%; margin-left: 0; }
}

/* Coluna que o mapeamento espera e o arquivo não trouxe. */
.cfg-rp-aviso { color: var(--text-ink); }

/* Mapeamento de documento: arquivo, associações e regras têm espaços próprios. */
.rpm-drawer {
  max-width: 600px;
  height: min(820px, calc(100dvh - var(--drawer-offset) * 2));
}
.rpm-header { position: sticky; top: 0; z-index: 2; background: var(--bg-card); }
.rpm-drawer .drawer-head { position: static; }
.rpm-drawer .ws-drawer-title { margin: 0; overflow-wrap: anywhere; }
.rpm-help { margin: 0; font-size: var(--size-14); line-height: 1.5; color: var(--text-muted); text-wrap: pretty; overflow-wrap: anywhere; }
.rpm-tabs button:focus-visible, .rpm-other-fields > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); }
.rpm-drawer .cfg-rp-body { max-height: none; padding: var(--space-6); }
.rpm-section { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.rpm-section + .rpm-section { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--border-soft); }
.rpm-section h3 { margin: 0; font-size: var(--size-md); line-height: 1.3; font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.rpm-section-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.rpm-file { display: flex; align-items: flex-start; gap: var(--space-3); }
.rpm-file > div { min-width: 0; }
.rpm-file h3 + p { margin-top: var(--space-1); }
.rpm-file-icon { display: inline-flex; flex-shrink: 0; color: var(--text-muted); }
.rpm-section > .btn-secondary { align-self: flex-start; }
.rpm-drawer .field { min-width: 0; gap: var(--space-2); }
.rpm-drawer .field label { font-size: var(--size-base); }
.rpm-drawer select, .rpm-drawer input[type="text"], .rpm-drawer input[type="number"], .rpm-drawer textarea {
  width: 100%; min-width: 0; height: 44px; font-size: 16px; border-radius: var(--radius-sm);
}
.rpm-drawer textarea { height: auto; line-height: 1.5; }
.rpm-drawer .cfg-section-desc, .rpm-drawer .cfg-empty-text { margin: 0; font-size: var(--size-14); line-height: 1.5; }
.rpm-fields { min-width: 0; }
.rpm-essential, .rpm-extra { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: start; gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid var(--border-soft); }
.rpm-essential:first-child { padding-top: 0; }
.rpm-essential:last-child, .rpm-extra:last-child { border-bottom: 0; padding-bottom: 0; }
.rpm-field-name { font-size: 16px; line-height: 1.4; font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.rpm-essential > .rpm-field-name { padding-top: 10px; }
.rpm-source { min-width: 0; }
.rpm-field-options { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.rpm-check { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding-block: var(--space-1); font-size: var(--size-14); line-height: 1.4; color: var(--text-muted); cursor: pointer; }
.rpm-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.rpm-check:has(input:disabled) { cursor: default; opacity: .6; }
.rpm-sample { margin: var(--space-2) 0 0; font-size: var(--size-14); line-height: 1.5; color: var(--text-muted); overflow-wrap: anywhere; }
.rpm-notice { margin: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--accent-tint-1); font-size: var(--size-14); line-height: 1.5; color: var(--text-ink); overflow-wrap: anywhere; }
.rpm-source .rpm-notice { margin-top: var(--space-2); }
.rpm-other-fields { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--border-soft); }
.rpm-other-fields > summary { min-height: 44px; font-size: var(--size-md); line-height: 1.5; font-weight: var(--weight-semibold); cursor: pointer; }
.rpm-other-fields > summary .rpm-help { margin-left: var(--space-2); font-weight: var(--weight-regular); }
.rpm-other-fields > .rpm-help { margin-bottom: var(--space-3); }
.rpm-extra > .rpm-field-name { padding-top: 8px; }
.rpm-extra-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.rpm-extra .field label { font-size: var(--size-14); color: var(--text-muted); }
.rpm-extra-remove { display: flex; justify-content: flex-end; }
.rpm-extra-remove .btn-icon { width: 40px; height: 40px; }
.rpm-check input { flex-shrink: 0; }
.rpm-drawer .cfg-rp-list { margin: 0; }
.rpm-drawer .cfg-rp-row { grid-template-columns: minmax(0, 1fr) 40px; gap: var(--space-3); padding-block: var(--space-3); }
.rpm-drawer .cfg-rp-row > div { min-width: 0; }
.rpm-drawer .cfg-rp-card-nome { font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.rpm-drawer .cfg-rp-card-sub { font-size: var(--size-14); line-height: 1.5; overflow-wrap: anywhere; }
.rpm-drawer .cfg-rp-row .btn-icon { width: 40px; height: 40px; }
.rpm-drawer .cfg-add-btn { align-self: flex-start; min-height: 44px; font-size: var(--size-base); }
.rpm-drawer .btn-primary, .rpm-drawer .btn-secondary { min-height: 44px; font-size: var(--size-base); }
.rpm-drawer .rpm-footer { padding: var(--space-4) var(--space-6); gap: var(--space-2) var(--space-3); flex-wrap: wrap; }
.rpm-footer #rpm-save-status:not(:empty) { flex-basis: 100%; }
.rpm-footer #rpm-save-status:empty { display: none; }
.rpm-tutorial { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; color: var(--accent); font-size: var(--size-base); text-decoration: none; }
.rpm-tutorial:hover { text-decoration: underline; text-underline-offset: 3px; }
.rpm-tutorial:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); }
.rpm-footer #rpm-salvar { margin-left: auto; white-space: nowrap; }

@media (max-width: 767px) {
  .rpm-drawer { max-width: 100%; }
  .rpm-drawer .cfg-rp-body { padding: var(--space-5); }
  .rpm-drawer .rpm-footer { padding: var(--space-4) var(--space-5) max(var(--space-4), env(safe-area-inset-bottom)); }
}
@media (max-width: 479px) {
  .rpm-essential, .rpm-extra { grid-template-columns: 108px minmax(0, 1fr); gap: var(--space-3); }
  .rpm-footer { flex-wrap: wrap; }
}

@media (max-width: 359px) {
  .rpm-essential, .rpm-extra { grid-template-columns: 92px minmax(0, 1fr); }
}

/* ════════════════════════════════════════════════════════════
   Administrativo — repasse (Cardiointensiva)
   ════════════════════════════════════════════════════════════
   A área reusa `.ws-toolbar`, `.tabs`/`.tab`, `.ws-table` e `statusBadge()`.
   O que vive aqui é só o que não existia: alinhamento de números na tabela,
   a linha rótulo+valor dos drawers e o ano ao lado do seletor de mês. */

.adm-toolbar .ws-toolbar-row { align-items: center; }
.adm-acoes { margin-left: auto; }
.adm-acoes:has(.adm-preparar-foto) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.adm-preparar-foto { text-decoration: none; white-space: nowrap; }

/* CG-05/06/07 — Cirurgias segue a composição plana das demais listas:
   abas sublinhadas, busca + ação, filtros e a tabela compartilhada. */
.view--cirurgias { background: var(--bg-card); }
.cir-wrap {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding-bottom: 40px;
}
.cir-page-toolbar { gap: var(--space-5); }
.cir-toolbar {
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: var(--space-4);
}
.cir-new { display: inline-flex; flex-shrink: 0; align-items: center; gap: var(--space-2); }
.cir-search-wrap { max-width: 720px; }
.cir-filter-row {
  gap: var(--space-2);
  padding-bottom: 22px;
}
.cir-mode {
  display: flex;
  gap: var(--space-1);
}
.cir-mode-btn {
  min-height: 32px;
  padding-inline: 12px;
}
.cir-mode-btn:focus-visible,
.cir-filter-control:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.cir-filter-control {
  flex: 0 0 auto;
  width: auto;
  height: 32px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--surface-tint-border);
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  color: var(--text-cool);
  font: inherit;
  font-size: var(--size-12);
  box-shadow: none;
}
.cir-filter-status { width: 190px; }
.cir-filter-hospital { width: 180px; }
.cir-filter-periodo { width: 170px; }
.cir-filter-hospital::placeholder { color: var(--text-cool); opacity: 1; }
.cir-clear { min-height: 32px; padding: 0 10px; white-space: nowrap; }
.cir-content { min-height: 282px; }
.cir-loading { display: grid; gap: 1px; padding: 1px 0; }
.cir-skeleton-row { height: 62px; border-radius: 0; }
.cir-table { table-layout: fixed; }
.cir-table th:nth-child(1) { width: 31%; }
.cir-table th:nth-child(2) { width: 20%; }
.cir-table th:nth-child(3) { width: 17%; }
.cir-table th:nth-child(4) { width: 17%; }
.cir-table th:nth-child(5) { width: 15%; }
.cir-row { cursor: pointer; transition: background 120ms ease; }
.cir-row:hover { background: var(--row-hover); }
.cir-row:focus-visible {
  position: relative;
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.cir-cell-main,
.cir-cell-date { min-width: 0; }
.cir-patient,
.cir-procedure,
.cir-date-main,
.cir-date-meta { display: block; }
.cir-patient { color: var(--text-ink); font-weight: var(--weight-medium); }
.cir-procedure,
.cir-date-meta {
  margin-top: 5px;
  color: var(--text-meta);
  font-size: var(--size-12);
  line-height: 1.35;
}
.cir-procedure,
.cir-cell-hospital,
.cir-cell-medico { overflow-wrap: anywhere; }
.cir-cell-hospital,
.cir-cell-medico { color: var(--text-meta) !important; font-size: var(--size-sm) !important; }
.cir-date-main { white-space: nowrap; }
.cir-date-missing { color: var(--text-meta); font-size: var(--size-sm); }
.cir-cell-status { white-space: nowrap; }
.cir-mobile-label { display: none; }
.cir-pagination { padding: 16px 0 20px; }
.cir-content > .empty-state { min-height: 282px; }

.cir-drawer-shell {
  min-height: min(720px, calc(100vh - 32px));
  --drawer-head-pad-y: 22px;
  --drawer-head-pad-x: 22px;
}
.cir-drawer-shell .ws-drawer-title { margin: 0; }
.cir-form {
  display: flex;
  flex-direction: column;
  padding: 0 26px 32px;
}
.cir-form-section {
  display: grid;
  gap: 14px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border-soft);
}
.cir-form-section:last-of-type { border-bottom: 0; padding-bottom: 10px; }
.cir-form-section h3 {
  margin: 0 0 2px;
  color: var(--text-meta);
  font-size: var(--size-12);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cir-form-field {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
  color: var(--text-ink);
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
}
.cir-form-field small {
  color: var(--text-meta);
  font-size: var(--size-12);
  font-weight: var(--weight-regular);
}
.cir-form-field b { color: var(--error); font-weight: inherit; }
.cir-form-field :is(input, select, textarea) {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-ink);
  font: inherit;
  font-weight: var(--weight-regular);
}
.cir-form-field :is(input, select) { min-height: 44px; padding: 0 12px; }
.cir-form-field textarea { min-height: 92px; padding: 11px 12px; line-height: 1.45; resize: vertical; }
.cir-form-field :is(input, select, textarea):focus-visible {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.cir-form-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
.cir-form-field-wide { max-width: calc(50% - 6px); }
.cir-field-help { color: var(--text-meta); font-size: var(--size-12); font-weight: var(--weight-regular); }
.cir-patient-search { position: relative; }
.cir-patient-options {
  position: absolute;
  z-index: 4;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: none;
  max-height: 220px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  box-shadow: var(--shadow-md);
}
.cir-patient-options.is-open { display: grid; }
.cir-patient-option {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  border-radius: calc(var(--radius-md) - 3px);
  background: transparent;
  color: var(--text-ink);
  font: inherit;
  font-size: var(--size-sm);
  text-align: left;
  cursor: pointer;
}
.cir-patient-option:hover,
.cir-patient-option:focus-visible { background: var(--home-hover); }
.cir-patient-empty { padding: 10px; color: var(--text-meta); font-size: var(--size-12); font-weight: var(--weight-regular); }
.cir-patient-linked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 7px 10px;
  border-radius: var(--radius-md);
  background: var(--accent-light);
  color: var(--accent);
  font-size: var(--size-12);
  font-weight: var(--weight-medium);
}
.cir-patient-linked[hidden] { display: none; }
.cir-patient-linked button {
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.cir-form-error {
  margin-top: 14px;
  padding: 11px 12px;
  border-radius: var(--radius-md);
  background: rgba(220, 38, 38, 0.06);
  color: var(--error);
  font-size: var(--size-sm);
  line-height: 1.4;
}
.cir-form-error[hidden] { display: none; }
.cir-drawer-footer { gap: var(--space-2); }
.cir-remove { margin-right: auto; }
.cir-remove:focus-visible,
.cir-history :is(button, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.cir-history-section { min-width: 0; }
.cir-history { min-width: 0; }
.cir-history-loading {
  display: grid;
  gap: 10px;
}
.cir-history-loading .skeleton {
  display: block;
  height: 72px;
  border-radius: var(--radius-md);
}
.cir-history-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cir-history-item {
  position: relative;
  margin-left: 5px;
  padding: 0 0 20px 21px;
  border-left: 1px solid var(--border-soft);
}
.cir-history-item:last-child { padding-bottom: 2px; }
.cir-history-item::before {
  content: '';
  position: absolute;
  top: 5px;
  left: -4px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--bg-card);
}
.cir-history-heading {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.cir-history-heading strong {
  color: var(--text-ink);
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
}
.cir-history-heading > span,
.cir-history-meta {
  color: var(--text-meta);
  font-size: var(--size-12);
}
.cir-history-heading > span { white-space: nowrap; }
.cir-history-meta { margin: 4px 0 0; }
.cir-history-deltas {
  display: grid;
  gap: 9px;
  margin: 12px 0 0;
}
.cir-history-deltas > div {
  display: grid;
  gap: 3px;
}
.cir-history-deltas dt {
  color: var(--text-meta);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cir-history-deltas dd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  margin: 0;
  color: var(--text-ink);
  font-size: var(--size-12);
  line-height: 1.45;
}
.cir-history-deltas dd span { overflow-wrap: anywhere; }
.cir-history-deltas dd b { color: var(--text-meta); font-weight: var(--weight-regular); }
.cir-history-empty { margin: 0; color: var(--text-meta); font-size: var(--size-sm); }
.cir-history-more,
.cir-history-error .btn-ghost {
  min-height: 38px;
  margin-top: 14px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-ink);
  font: inherit;
  font-size: var(--size-12);
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.cir-history-more:disabled { cursor: wait; opacity: 0.55; }
.cir-history-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--radius-md);
  background: rgba(220, 38, 38, 0.06);
  color: var(--error);
  font-size: var(--size-12);
}
.cir-history-error .btn-ghost { flex-shrink: 0; margin-top: 0; color: inherit; }

@media (max-width: 767px) {
  .adm-tabs { gap: 24px; }
  .cir-page-toolbar { gap: var(--space-4); }
  .cir-toolbar {
    align-items: stretch;
    gap: var(--space-2);
  }
  .cir-search-wrap {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
  }
  .cir-new {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    justify-content: center;
    align-self: center;
    flex: 0 0 44px;
  }
  .cir-new-label { display: none; }
  .cir-filter-row { margin-bottom: 12px; padding-bottom: 4px; }
  .cir-mode { flex: 0 0 auto; }
  .cir-filter-control { flex: 0 0 auto; }
  .cir-filter-status { width: 184px; }
  .cir-filter-hospital { width: 168px; }
  .cir-filter-periodo { width: 164px; }
  .cir-table thead { display: none; }
  .cir-table,
  .cir-table tbody { display: block; width: 100%; }
  .cir-table tr.cir-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main status"
      "hospital hospital"
      "date medico";
    gap: 10px 14px;
    min-height: 104px;
    padding: 14px 12px;
    border-bottom: 1px solid var(--border-hairline);
  }
  .cir-table tr.cir-row:last-child { border-bottom: 0; }
  .cir-table .cir-row td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    line-height: 1.35;
  }
  .cir-cell-main { grid-area: main; }
  .cir-cell-status { grid-area: status; }
  .cir-cell-hospital { grid-area: hospital; }
  .cir-cell-date { grid-area: date; }
  .cir-cell-medico { grid-area: medico; }
  .cir-cell-status { align-self: start; }
  .cir-mobile-label {
    display: block;
    margin-bottom: 3px;
    color: var(--text-meta);
    font-size: 10px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .cir-pagination { padding: 14px 0 18px; }
  .cir-drawer-shell { min-height: auto; }
  .cir-form { padding-inline: 20px; }
  .cir-drawer-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding-inline: 16px;
  }
  .cir-drawer-footer :is(.btn-primary, .btn-secondary) { min-height: 44px; }
  .cir-remove { grid-column: 1 / -1; justify-self: start; min-height: 40px; margin-right: 0; }
}

@media (max-width: 380px) {
  .cir-table tr.cir-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "main main"
      "status status"
      "hospital hospital"
      "date medico";
  }
  .cir-cell-status { justify-self: start; }
  .cir-form-pair { grid-template-columns: minmax(0, 1fr); }
  .cir-form-field-wide { max-width: none; }
  .cir-drawer-footer { grid-template-columns: minmax(0, 1fr); }
  .cir-drawer-footer [data-cir-save] { order: 1; }
  .cir-drawer-footer [data-cir-cancel] { order: 2; }
  .cir-drawer-footer [data-cir-remove] { order: 3; grid-column: auto; justify-self: center; }
  .cir-drawer-footer :is(.btn-primary, .btn-secondary) { width: 100%; }
  .cir-history-heading { align-items: flex-start; flex-direction: column; gap: 2px; }
  .cir-history-deltas dd { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cir-history-deltas dd b { transform: rotate(90deg); transform-origin: center; width: fit-content; }
  .cir-history-error { align-items: stretch; flex-direction: column; }
}

/* Mês + ano no mesmo rótulo: aqui a competência é chave (o relatório é de um
   mês específico), então o ano não pode ficar como enfeite ao lado. */
.adm-toolbar .fin-mes-label { min-width: 150px; }

/* As abas herdam o `gap: 28px` de `.tabs`; aqui só a régua inferior e o respiro
   que separa a barra do conteúdo. */
.adm-tabs {
  overflow-x: auto;
  min-width: 0;
  margin-top: var(--space-3);
  border-bottom: 1px solid var(--border-hairline);
}

.adm-carregando { padding: var(--space-6) var(--space-8); }

/* Números de dinheiro alinhados à direita e tabulares — a coluna é lida em
   varredura vertical, e dígito de largura variável desalinha a vírgula. */
/* ⚠️ SEM `table-layout: fixed`. Com ele, as larguras que davam ar à primeira
   coluna espremiam as de dinheiro e o navegador quebrava "R$ 42.457,95" em três
   linhas. O auto-layout distribui bem desde que se diga duas coisas: a coluna
   de texto tem piso, e número não quebra.
   ⚠️ Tudo por CLASSE de coluna, nunca por `nth-child`: as duas tabelas da área
   têm ordens diferentes, e a regra posicional escondia o header de uma coluna
   deixando a célula da outra — header e conteúdo desalinhados no mobile. */
.adm-table .adm-c-prov, .adm-table .adm-c-medico { min-width: 200px; }
.adm-table .adm-c-comp { min-width: 136px; }
.adm-table .adm-c-resumo { min-width: 220px; }
.adm-rel-table-shell { overflow-x: auto; }
.adm-rel-table-shell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.adm-rel-table .adm-c-medico { min-width: 150px; }
.adm-rel-table .adm-c-prov { min-width: 130px; }
.adm-rel-table .adm-c-comp { min-width: 120px; }
.adm-rel-table .adm-c-resumo { min-width: 180px; }
.adm-rel-table thead th, .adm-rel-table td {
  padding-right: var(--space-3);
  padding-left: var(--space-3);
}
.adm-table .adm-c-serv { min-width: 150px; }
.adm-table .adm-c-itens, .adm-table .adm-c-bruto,
.adm-table .adm-c-liquido, .adm-table .adm-c-comp, .adm-table .adm-c-fin,
.adm-table .adm-c-sit, .adm-table .adm-c-envio { white-space: nowrap; }

/* A coluna de ações encolhe ao conteúdo (`width: 1%` + nowrap é o truque
   clássico de tabela) — sem isso ela herda uma fatia larga, os ícones vão para
   a borda direita e o último fica cortado. */
.adm-table .adm-c-acoes { width: 1%; white-space: nowrap; }
/* Duas linhas preservam as quatro ações com texto sem alargar a tabela. */
.adm-rel-actions {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: flex-end;
  gap: var(--space-1) var(--space-2);
}
.adm-rel-action {
  min-height: 32px;
  padding: var(--space-1) 4px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--accent);
  font-size: var(--size-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.adm-rel-action:hover:not(:disabled) { border-color: var(--border-soft); background: var(--hover-subtle); }
.adm-rel-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.adm-rel-action:disabled { color: var(--text-xmuted); cursor: not-allowed; }
.adm-rel-action[aria-busy="true"] { color: var(--text-muted); }

.adm-th-num, .adm-td-num { text-align: right; font-variant-numeric: tabular-nums; }
.adm-td-liquido { color: var(--text-ink); font-weight: var(--weight-medium); }
.adm-td-aviso { color: var(--s-pendente, var(--text-muted)); font-weight: var(--weight-medium); }
.adm-td-sub { display: none; }
.adm-c-resumo .adm-td-sub {
  display: block;
  margin-top: 2px;
  color: var(--text-xmuted);
  font-size: var(--size-12);
  white-space: nowrap;
}
.adm-c-resumo .adm-rel-totais {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Linha de composição do repasse (drawer e prévia): rótulo + dinheiro.
   ⚠️ Não reusa `.cfg-rp-row` (1fr 140px 44px): ali a última coluna é do
   botão-ícone, e o valor jogado nela quebra em duas linhas e vaza do drawer. */
.adm-linha {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-hairline);
}
.adm-linha:last-child { border-bottom: none; }
.adm-lote-valor {
  color: var(--text-ink);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* O número que a operadora abre o drawer para ver. Um só — hierarquia é ter um
   valor que ganha, não seis do mesmo tamanho. */
.adm-destaque {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-hairline);
}
.adm-destaque-rotulo { font-size: var(--size-sm); color: var(--text-muted); }
.adm-destaque-valor {
  font-family: var(--font-display);
  font-size: var(--size-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.adm-composicao { margin-top: var(--space-2); }
.adm-linha-nota { display: block; font-size: var(--size-xs); color: var(--text-xmuted); margin-top: 1px; }
.adm-resumo-erro { margin: 0 0 var(--space-4); }

.adm-medico-bloco {
  margin-top: var(--space-5);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-hairline);
}
.adm-medico-total { border-bottom: none; padding-top: var(--space-3); }
.adm-medico-total .adm-lote-valor { color: var(--accent); font-size: var(--size-md); }

/* Repasse direto — mesma folha de Configurações, com leitura por assunto.
   Escopo local: a página de conferência mantém sua composição própria. */
.adm-direto-drawer {
  max-width: 600px;
  height: min(820px, calc(100dvh - var(--drawer-offset) * 2));
}
.adm-direto-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-card);
}
.adm-direto-header .drawer-head { position: static; }
.adm-direto-header .ws-drawer-title { margin: 0; overflow-wrap: anywhere; }
.adm-direto-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.adm-direto-meta .status-badge { height: 20px; font-size: var(--size-xs); }
.adm-direto-drawer [hidden] { display: none; }
.adm-direto-drawer .cfg-rp-body { max-height: none; padding: var(--space-6); }
.adm-direto-section + .adm-direto-section {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-soft);
}
.adm-direto-section-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  color: var(--text-ink);
  font-size: var(--size-md);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
}
.adm-direto-section-title > span { color: var(--text-muted); font-size: var(--size-sm); font-weight: var(--weight-regular); }
.adm-direto-note {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--size-14);
  line-height: 1.5;
  text-wrap: pretty;
}
.adm-direto-drawer .adm-linha { grid-template-columns: minmax(0, 1fr) auto; padding-block: 10px; }
.adm-direto-drawer .adm-linha .cfg-rp-card-sub { font-size: var(--size-14); line-height: 1.5; }
.adm-direto-drawer .adm-lote-valor { font-size: var(--size-base); white-space: nowrap; }
.adm-direto-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding-top: var(--space-4);
  color: var(--accent);
  font-size: var(--size-base);
  font-weight: var(--weight-semibold);
}
.adm-direto-total strong {
  font-size: var(--size-xl);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.adm-direto-documento { margin-top: var(--space-4); }
.adm-direto-documento .adm-linha { padding: var(--space-3); border-radius: var(--radius-sm); background: var(--bg-subtle); }
.adm-direto-documento .adm-lote-valor { font-size: var(--size-14); }
.adm-direto-documento .adm-linha-nota { color: inherit; font-size: var(--size-sm); margin-top: var(--space-1); }
.adm-direto-composicao { margin-top: var(--space-2); }
.adm-direto-composicao > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  color: var(--text-muted);
  font-size: var(--size-14);
}
.adm-direto-medicos { margin-top: var(--space-3); }
.adm-direto-medico + .adm-direto-medico { border-top: 1px solid var(--border-soft); }
.adm-direto-medico > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 14px;
  align-items: center;
  gap: var(--space-3);
  min-height: 60px;
  padding-block: var(--space-3);
  color: var(--text-ink);
}
.adm-direto-medico-nome { font-size: var(--size-base); font-weight: var(--weight-medium); line-height: 1.45; overflow-wrap: anywhere; }
.adm-direto-medico-nome > span { display: block; margin-top: 2px; color: var(--text-muted); font-size: var(--size-sm); font-weight: var(--weight-regular); }
.adm-direto-medico > summary > svg { color: var(--text-muted); }
.adm-direto-medico-calculo { padding: 0 var(--space-3) var(--space-3); background: var(--bg-subtle); border-radius: var(--radius-sm); }
.adm-direto-medico-calculo .adm-medico-total .adm-lote-valor { font-size: var(--size-base); }
.adm-direto-medico-calculo .cfg-rp-card-nome { font-size: var(--size-14); }
.adm-direto-documento .cfg-rp-card-sub,
.adm-direto-medico-calculo .adm-linha .cfg-rp-card-sub { color: color-mix(in srgb, var(--text-muted) 88%, var(--text-ink)); }
.adm-direto-drawer summary { list-style: none; cursor: pointer; border-radius: var(--radius-sm); }
.adm-direto-drawer summary::-webkit-details-marker { display: none; }
.adm-direto-drawer summary:hover { background: var(--hover-subtle); }
.adm-direto-drawer summary > svg { flex-shrink: 0; transition: transform 180ms ease-out; }
.adm-direto-drawer details[open] > summary > svg { transform: rotate(90deg); }
.adm-direto-drawer summary:focus-visible,
.adm-direto-drawer [role="tab"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.adm-direto-drawer .cfg-rp-footer-nota { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-size: var(--size-sm); }
.adm-direto-drawer .cfg-rp-footer { flex-wrap: wrap; }
.adm-direto-drawer .cfg-rp-footer-actions { margin-left: auto; }
.adm-direto-drawer .cfg-rp-footer [data-excluir-selecionadas] { white-space: nowrap; }
.adm-direto-drawer [role="tabpanel"] > .form-section-title { display: none; }
.adm-direto-drawer .cfg-rp-row { grid-template-columns: minmax(0, 1fr) auto 36px; gap: var(--space-3); }
.adm-direto-drawer .cfg-rp-row > div { min-width: 0; overflow-wrap: anywhere; }
.adm-direto-drawer .cfg-rp-row .cfg-rp-card-sub,
.adm-direto-drawer .cfg-empty-text { font-size: var(--size-14); line-height: 1.5; }
.adm-direto-drawer [data-remocao-controles] .cfg-section-desc { font-size: var(--size-sm); }
.adm-direto-drawer input[type="search"] {
  width: 100%;
  min-height: 44px;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-ink);
  font-size: var(--size-base);
  appearance: none;
}
.adm-direto-drawer input[type="search"]::placeholder { color: var(--text-muted); }
.adm-direto-drawer input[type="search"]:focus-visible { border-color: var(--accent); }
.adm-direto-list-toolbar { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-2); }
.adm-direto-search { position: relative; }
.adm-direto-search > svg { position: absolute; top: 14px; left: 12px; color: var(--text-muted); pointer-events: none; }
.adm-direto-search input[type="search"] { padding-left: 36px; }
.adm-direto-select-all { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; width: fit-content; color: var(--text-muted); font-size: var(--size-14); cursor: pointer; }
.adm-direto-select-all input { margin: 0; }
.adm-direto-drawer #adm-det-itens { gap: 0; margin-top: 0; }
.adm-direto-item { min-width: 0; border-bottom: 1px solid var(--border-soft); }
.adm-direto-item:last-child { border-bottom: 0; }
.adm-direto-item > .cfg-rp-row { border: 0; padding-block: var(--space-4); }
.adm-direto-drawer .adm-direto-item > .cfg-rp-row { grid-template-columns: minmax(0, 1fr) minmax(112px, auto); }
.adm-direto-item-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--space-1); }
.adm-direto-medico-trigger,
.adm-direto-value-trigger {
  appearance: none;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.adm-direto-medico-trigger { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; min-height: 28px; padding: 2px 4px; margin: -2px -4px; text-align: left; }
.adm-direto-medico-trigger > svg { flex-shrink: 0; transform: rotate(90deg); }
.adm-direto-value-trigger { min-height: 36px; padding: 4px 6px; margin-right: -6px; text-align: right; color: var(--text-ink); font-size: var(--size-base); }
.adm-direto-medico-trigger:hover,
.adm-direto-value-trigger:hover { background: var(--hover-subtle); }
.adm-direto-medico-trigger:focus-visible,
.adm-direto-value-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.adm-direto-value-form {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 4px;
  width: 124px;
  min-height: 36px;
  padding: 0 6px;
  margin-right: -6px;
  border-radius: var(--radius-sm);
  outline: 1px solid var(--accent);
  background: var(--bg-card);
  color: var(--text-ink);
  font-size: var(--size-base);
  font-variant-numeric: tabular-nums;
}
.adm-direto-value-form input {
  appearance: textfield;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: right;
}
.adm-direto-value-form input::-webkit-inner-spin-button,
.adm-direto-value-form input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.adm-direto-item [aria-busy="true"] { opacity: 0.65; }
.adm-direto-medico-pop {
  position: fixed;
  inset: auto;
  margin: 0;
  width: max-content;
  max-width: min(320px, calc(100vw - 24px));
  overflow-y: auto;
  box-shadow: none;
}
.adm-direto-medico-pop:popover-open { display: block; }
.adm-direto-medico-pop .action-pop-item { justify-content: space-between; min-height: 40px; gap: var(--space-4); color: var(--text-ink); font-size: var(--size-14); white-space: normal; }
.adm-direto-medico-pop .action-pop-item[aria-checked="true"] { color: var(--accent); background: var(--accent-light); }
.adm-direto-medico-pop .action-pop-item > svg { flex-shrink: 0; }
.adm-direto-medico-pop .action-pop-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.adm-direto-item-feedback { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); padding-bottom: var(--space-3); }
.adm-direto-item-error { flex-basis: 100%; margin: 0; font-size: var(--size-sm); line-height: 1.5; color: color-mix(in srgb, var(--error) 85%, var(--text-ink)); }
@media (max-width: 767px) {
  .adm-direto-drawer { max-width: 100%; }
}
@media (max-width: 480px) {
  .adm-direto-drawer .cfg-rp-body { padding: var(--space-5); }
  .adm-direto-medico > summary { column-gap: var(--space-2); }
  .adm-direto-documento .adm-linha { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .adm-direto-documento .adm-lote-valor { text-align: left; }
  .adm-direto-total { flex-wrap: wrap; }
  .adm-direto-drawer .cfg-rp-footer { gap: var(--space-3); }
  .adm-direto-drawer .cfg-rp-footer-nota { max-width: 42%; }
}
@media (prefers-reduced-motion: reduce) {
  .adm-direto-drawer summary > svg { transition: none; }
}

/* Importação: origem, leitura e revisão na mesma folha. */
.adm-import-overlay .modal {
  max-width: 760px;
  max-height: calc(100dvh - 48px);
  border-radius: 16px;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease-out;
}
.adm-import-overlay .modal-header {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 4px;
  padding: 28px 32px 24px;
  border-bottom: 1px solid var(--border-hairline-strong);
}
.adm-import-overlay .modal-title {
  grid-column: 2;
  font-family: var(--font);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-ink);
  text-wrap: balance;
}
.adm-import-overlay .modal-close {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: start;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-ink);
  box-shadow: none;
}
.adm-imp-contexto { grid-column: 2; margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.adm-import-body { padding: 24px 32px 28px; overscroll-behavior: contain; }
.adm-import-body .field label { color: var(--text-ink); font-size: 14px; font-weight: 500; margin-bottom: 8px; }
.adm-import-body :is(input:not([type="checkbox"]), select) { min-width: 0; width: 100%; height: 44px; border-radius: 6px; border: 1px solid var(--border); padding: 0 12px; color: var(--text-ink); background-color: var(--bg-card); font-size: 16px; }
.adm-import-body :is(input, select)::placeholder { color: var(--text-muted); }
.adm-import-body :is(button, summary, input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.adm-import-body .cfg-section-desc { margin: 10px 0 0; color: var(--text-muted); font-size: 14px; line-height: 1.5; text-wrap: pretty; }
.adm-import-body .cfg-rp-aviso { color: color-mix(in srgb, var(--warning) 72%, var(--text-ink)); }
.adm-imp-origem { margin: 0 0 20px; color: var(--text-ink); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.adm-import-overlay .modal-footer {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px 24px;
  background: var(--bg-card);
  border-top: 1px solid var(--border-hairline-strong);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.adm-import-overlay .modal-footer > button { width: auto; min-height: 44px; font-size: 15px; }
.adm-import-overlay #adm-imp-cancel { padding: 10px 12px; border: 0; border-radius: 6px; color: var(--text-muted); background: transparent; font-family: var(--font); cursor: pointer; }
.adm-import-overlay #adm-imp-cancel:hover { color: var(--text-ink); background: var(--bg-subtle); }
.adm-import-overlay #adm-imp-ok { min-width: 140px; }

.adm-imp-metodos { display: flex; gap: 4px; margin: 24px 0 20px; padding: 4px; background: var(--bg-subtle); border-radius: 8px; }
.adm-imp-metodo { flex: 1; min-width: 0; min-height: 40px; padding: 8px; border: 0; border-radius: 5px; color: var(--text-muted-fill); background: transparent; font: 500 14px var(--font); cursor: pointer; transition: background 160ms ease, color 160ms ease; }
.adm-imp-metodo:hover { color: var(--text-ink); }
.adm-imp-metodo.is-active { background: var(--bg-card); color: var(--text-ink); box-shadow: 0 1px 4px rgb(20 30 50 / 8%); }
.adm-imp-metodo:disabled { cursor: wait; }
.adm-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; width: 100%; min-height: 184px; padding: 28px 24px; border: 1px dashed var(--border); border-radius: 12px; background: var(--bg-subtle); color: var(--text-muted-fill); font-family: var(--font); cursor: pointer; text-align: center; transition: border-color 160ms ease, background 160ms ease; }
.adm-drop > svg { flex: 0 0 auto; width: 28px; height: 28px; color: var(--accent); }
.adm-drop-conteudo { display: flex; min-width: 0; flex-direction: column; gap: 6px; }
.adm-drop-titulo { color: var(--text-ink); font-size: 16px; line-height: 1.4; font-weight: 500; overflow-wrap: anywhere; }
.adm-drop-sub { color: var(--text-muted-fill); font-size: 14px; line-height: 1.5; }
.adm-drop:hover, .adm-drop--ativo { border-color: var(--accent); background: var(--accent-tint-1); }
.adm-drop:disabled { cursor: wait; }
.adm-drop-processo { font-size: 14px; line-height: 1.5; color: var(--accent); }
.adm-drop-trocar { flex-shrink: 0; color: var(--accent); font-size: 14px; font-weight: 500; }
.adm-drop--carregado { flex-direction: row; justify-content: flex-start; gap: 14px; min-height: 0; padding: 12px 16px; border-style: solid; border-color: var(--border-hairline-strong); border-radius: 8px; text-align: left; }
.adm-drop--carregado .adm-drop-conteudo { flex: 1; }
.adm-drop--carregado .adm-drop-titulo { font-size: 15px; }
.adm-drop--carregado .adm-drop-sub { font-size: 13px; }
.adm-drop--carregado[aria-busy="true"] { flex-wrap: wrap; }
.adm-drop--carregado .adm-drop-processo { flex-basis: 100%; }
.adm-imp-leitura-nota { margin: 12px auto 0; max-width: 60ch; color: var(--text-muted); font-size: 13px; line-height: 1.5; text-align: center; }

.adm-imp-resumo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0 16px; }
.adm-imp-resumo-label { font-size: 15px; font-weight: 500; color: var(--text-ink); }
.adm-imp-resumo-detalhe { margin: 5px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.adm-imp-resumo-valor { max-width: 55%; color: var(--text-ink); font-size: 20px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.adm-imp-faltas { color: color-mix(in srgb, var(--warning) 72%, var(--text-ink)); }
.adm-imp-documento { margin-top: 12px; border-block: 1px solid var(--border-hairline-strong); }
.adm-imp-documento > summary, .adm-imp-documentos > summary { display: flex; align-items: center; gap: 10px; padding: 15px 0; color: var(--text-ink); font-size: 14px; cursor: pointer; list-style: none; }
.adm-imp-documento > summary::-webkit-details-marker, .adm-imp-documentos > summary::-webkit-details-marker { display: none; }
.adm-imp-documento > summary::before, .adm-imp-documentos > summary::before { content: ''; width: 6px; height: 6px; flex-shrink: 0; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); transition: transform 160ms ease; }
.adm-imp-documento[open] > summary::before, .adm-imp-documentos[open] > summary::before { transform: rotate(135deg); }
.adm-opcional { margin-left: auto; color: var(--text-muted); font-size: 13px; font-weight: 400; }
.adm-imp-doc-form { padding: 4px 0 20px; }
.adm-imp-documentos { margin-top: 8px; }
.adm-imp-documentos ul { list-style: none; padding: 0; margin: 0 0 16px; }
.adm-imp-documentos li { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-top: 1px solid var(--border-hairline); font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.adm-imp-documentos li strong { color: var(--text-ink); font-weight: 500; }

.adm-imp-previa-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 26px 0 12px; }
.adm-imp-previa-titulo { margin: 0; color: var(--text-ink); font-size: 17px; font-weight: 600; }
#adm-imp-contagem { margin-left: 6px; color: var(--text-muted); font-size: 14px; font-weight: 400; }
.adm-imp-vazia { padding: 28px 16px; margin: 0; color: var(--text-muted); font-size: 14px; text-align: center; line-height: 1.5; }
.adm-imp-lista { border-top: 1px solid var(--border-hairline-strong); }
.adm-imp-lista:empty { border: 0; }
.adm-imp-linha { margin: 0; border: 0; border-bottom: 1px solid var(--border-hairline-strong); background: var(--bg-card); }
.adm-imp-linha-resumo { display: grid; grid-template-columns: 10px 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 72px; padding: 12px 4px; cursor: pointer; list-style: none; }
.adm-imp-linha-resumo::-webkit-details-marker { display: none; }
.adm-imp-linha-resumo::before { content: ''; width: 6px; height: 6px; border-top: 1px solid var(--text-muted); border-right: 1px solid var(--text-muted); transform: rotate(45deg); transition: transform 160ms ease; }
.adm-imp-linha[open] > .adm-imp-linha-resumo::before { transform: rotate(135deg); }
.adm-imp-linha-resumo:hover { background: var(--row-hover); }
.adm-imp-linha-num { color: var(--text-muted); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.adm-imp-linha-identidade { min-width: 0; }
.adm-imp-linha-titulo { display: block; color: var(--text-ink); font-size: 15px; font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; }
.adm-imp-linha-data, .adm-imp-linha-estado { display: block; margin-top: 3px; color: var(--text-muted); font-size: 13px; line-height: 1.45; }
.adm-imp-linha-estado:empty, .adm-imp-linha-data:empty { display: none; }
.adm-imp-linha-estado { color: color-mix(in srgb, var(--warning) 72%, var(--text-ink)); }
.adm-imp-linha--rateio-geral .adm-imp-linha-estado { color: var(--accent); }
.adm-imp-linha--invalida .adm-imp-linha-titulo { color: var(--error); }
.adm-imp-linha-valor { color: var(--text-ink); font-size: 15px; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.adm-imp-linha-corpo { padding: 12px 0 20px 44px; }
.adm-imp-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.adm-imp-campo { min-width: 0; }
.adm-imp-campo label { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px; row-gap: 2px; min-width: 0; margin-bottom: 8px; color: var(--text-ink); font-size: 14px; font-weight: 500; }
.adm-imp-chave { margin-left: auto; color: var(--text-muted); font-size: 12px; font-weight: 400; }
.adm-imp-campo :is(input, select)[aria-invalid="true"] { border-color: var(--error); }
.adm-imp-linha-erro { margin: 12px 0 0; color: var(--error); font-size: 13px; line-height: 1.5; }
.adm-imp-linha-acoes { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.adm-imp-presenca { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: var(--text-ink); font-size: 14px; cursor: pointer; }
.adm-imp-presenca input { width: 16px; height: 16px; accent-color: var(--accent); }
.adm-imp-excluir { margin-left: auto; min-height: 40px; padding: 8px 0 8px 12px; border: 0; background: transparent; color: var(--error); font-size: 14px; }
.adm-imp-manual-lista { border: 0; }
.adm-imp-manual-corpo { padding: 12px 0 20px; }
.adm-imp-manual-linha .adm-imp-linha-resumo { min-height: 64px; }
.adm-imp-manual-linha[open] > .adm-imp-linha-resumo { margin-bottom: 4px; }
.adm-imp-manual-remover { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); cursor: pointer; }
.adm-imp-manual-remover:hover { background: var(--bg-subtle); color: var(--error); }
.adm-imp-manual-linha .adm-imp-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.adm-imp-manual-linha .adm-imp-campo:is([data-destino="paciente"], [data-destino="medico"], [data-destino="descricao"]) { grid-column: 1 / -1; }
.adm-imp-obrigatorio { color: var(--text-muted); font-size: 12px; }
.adm-imp-manual-extras { margin-top: 12px; }
.adm-imp-manual-extras > summary { display: flex; align-items: center; gap: 8px; min-height: 40px; color: var(--text-muted); font-size: 14px; cursor: pointer; list-style: none; }
.adm-imp-manual-extras > summary::-webkit-details-marker { display: none; }
.adm-imp-manual-extras > summary::before { content: '+'; font-size: 18px; font-weight: 400; }
.adm-imp-manual-extras[open] > summary::before { content: '−'; }
.adm-imp-manual-extras .adm-imp-campos { margin-top: 8px; }
.adm-imp-manual-acoes { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.adm-imp-manual-concluir { margin-left: auto; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 6px; background: var(--bg-subtle); color: var(--accent); font: 500 14px var(--font); cursor: pointer; }
.adm-imp-manual-concluir:hover { background: var(--accent-tint-1); }
.adm-imp-manual-adicoes { display: flex; align-items: stretch; gap: 12px; margin-top: 20px; }
.adm-imp-manual-adicionar { display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 6px; color: var(--accent); background: transparent; font: 500 14px var(--font); cursor: pointer; }
.adm-imp-manual-adicionar > svg { flex-shrink: 0; }
.adm-imp-manual-adicionar:hover { background: var(--bg-subtle); border-color: var(--accent); }
.adm-imp-manual-lote-abrir { flex-shrink: 0; min-height: 44px; padding: 8px 4px; border: 0; border-radius: 6px; color: var(--accent); background: transparent; font: 500 14px var(--font); cursor: pointer; }
.adm-imp-manual-lote-abrir:hover { text-decoration: underline; text-underline-offset: 3px; }
.adm-imp-lote-form { margin-top: 20px; }
.adm-imp-lote-form h3 { margin: 0; color: var(--text-ink); font-size: 17px; font-weight: 600; }
.adm-imp-lote-comuns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; margin: 24px 0 20px; }
.adm-imp-lote-comuns > :only-child { grid-column: 1 / -1; }
.adm-imp-lote-form textarea { width: 100%; min-height: 128px; padding: 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--text-ink); font: 16px/1.5 var(--font); resize: vertical; }
.adm-imp-lote-acoes { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.adm-imp-lote-acoes .btn-secondary { min-height: 44px; font-size: 14px; }
.adm-imp-manual-total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 24px; color: var(--text-muted); font-size: 14px; }
.adm-imp-manual-total strong { color: var(--text-ink); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.adm-imp-manual .adm-imp-documento { margin-top: 20px; border-bottom: 0; }
.adm-imp-manual .adm-imp-documento > summary { padding-bottom: 0; color: var(--text-muted); }
.adm-imp-manual .adm-imp-documento[open] > summary { padding-bottom: 15px; }
.adm-import-overlay [hidden] { display: none !important; }
@media (max-width: 767px) {
  .adm-import-overlay .modal { max-height: calc(100dvh - 16px); border-radius: 16px 16px 0 0; }
  .adm-import-overlay .modal::before { display: none; }
  .adm-import-overlay .modal-header { padding: 24px 24px 20px; }
  .adm-import-overlay .modal-title { font-size: 22px; }
  .adm-import-body { padding: 20px 24px 24px; }
  .adm-import-overlay .modal-footer { padding: 16px 24px calc(20px + env(safe-area-inset-bottom)); }
}
@media (max-width: 480px) {
  .adm-import-overlay .modal-header { padding: 20px; column-gap: 12px; }
  .adm-import-overlay .modal-title { font-size: 21px; }
  .adm-import-body { padding: 20px; }
  .adm-import-overlay .modal-footer { padding-inline: 20px; gap: 8px; }
  .adm-import-overlay #adm-imp-ok { min-width: 0; padding-inline: 14px; font-size: 14px; }
  .adm-import-overlay #adm-imp-cancel { padding-inline: 8px; font-size: 14px; }
  .adm-imp-metodo { font-size: 13px; }
  .adm-drop { min-height: 176px; padding: 24px 16px; }
  .adm-drop--carregado { min-height: 0; padding: 12px; gap: 10px; flex-wrap: wrap; }
  .adm-drop--carregado .adm-drop-conteudo { flex-basis: calc(100% - 40px); }
  .adm-drop--carregado .adm-drop-trocar { margin-left: 38px; }
  .adm-imp-resumo { align-items: start; gap: 12px; }
  .adm-imp-resumo-valor { font-size: 18px; }
  .adm-imp-linha-resumo { grid-template-columns: 8px 18px minmax(0, 1fr) auto; gap: 8px; }
  .adm-imp-linha-corpo { padding-left: 0; }
  .adm-imp-campos, .adm-imp-doc-form .form-grid-2 { grid-template-columns: 1fr; }
  .adm-imp-manual-remover { width: 44px; height: 44px; }
  .adm-imp-manual-adicoes { gap: 10px; }
  .adm-imp-manual-adicoes button { padding-inline: 6px; font-size: 13px; }
  .adm-imp-lote-comuns { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .adm-import-overlay .modal, .adm-imp-metodo, .adm-drop,
  .adm-imp-linha-resumo::before, .adm-imp-documento > summary::before,
  .adm-imp-documentos > summary::before { transition: none; }
}

.adm-rel-cancelar:not(:disabled):hover { color: var(--error); }

@media (max-width: 767px) {
  /* A tabela vira LISTA DENSA, no mesmo padrão da de Cobranças: o cabeçalho
     some, a linha vira flex e o que era coluna de apoio desce como subtítulo.
     ⚠️ Sem isto, `table-layout: fixed` com largura percentual espreme a coluna
     do nome e o navegador quebra "Rafael" letra a letra. */
  .adm-table, .adm-table tbody { display: block; width: 100%; }
  .adm-table thead { display: none; }
  .adm-table tr {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 10px var(--space-4);
    min-height: 56px;
    border-bottom: 1px solid var(--border-hairline);
  }
  .adm-table tr:last-child { border-bottom: none; }
  .adm-table td { padding: 0; border: none; }

  /* A primeira coluna manda: ocupa o resto e trunca com reticências. */
  .adm-table .adm-c-prov, .adm-table .adm-c-medico {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow-wrap: normal;
  }
  .adm-td-titulo { display: block; }
  .adm-table .adm-c-prov > *, .adm-table .adm-c-medico > * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .adm-td-sub {
    display: block;
    font-size: var(--size-12);
    line-height: 1.25;
    color: var(--text-meta);
  }

  .adm-table .adm-c-liquido, .adm-table .adm-c-sit, .adm-table .adm-c-acoes {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
  }
  /* Fora: o que já está no subtítulo ou é detalhe de conferência. */
  .adm-table .adm-c-serv,
  .adm-table .adm-c-itens,
  .adm-table .adm-c-bruto,
  .adm-table .adm-c-prov ~ .adm-c-prov { display: none; }
  /* Na tabela de relatórios o provedor vira subtítulo do médico. */
  .adm-table .adm-c-medico ~ .adm-c-prov { display: none; }

  /* A fila tem três estados independentes e quatro ações; comprimi-los na
     mesma linha apagaria rótulos e foco. Cada relatório vira um cartão denso,
     ainda dentro da mesma tabela sem duplicar markup. */
  .adm-table .adm-tr-rel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: var(--space-3);
    min-height: 0;
    padding: var(--space-4);
  }
  .adm-tr-rel .adm-c-comp,
  .adm-tr-rel .adm-c-medico,
  .adm-tr-rel .adm-c-resumo,
  .adm-tr-rel .adm-c-acoes { grid-column: 1 / -1; }
  .adm-tr-rel .adm-c-comp {
    display: block;
    min-width: 0;
    color: var(--text-muted);
    font-size: var(--size-xs);
  }
  .adm-tr-rel .adm-c-medico { display: flex; }
  .adm-tr-rel .adm-c-resumo {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3) 0;
    border-top: 1px solid var(--border-hairline);
    border-bottom: 1px solid var(--border-hairline);
  }
  .adm-tr-rel .adm-c-fin,
  .adm-tr-rel .adm-c-sit,
  .adm-tr-rel .adm-c-envio {
    display: flex;
    width: auto;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }
  .adm-tr-rel .adm-c-fin::before,
  .adm-tr-rel .adm-c-sit::before,
  .adm-tr-rel .adm-c-envio::before {
    content: attr(data-label);
    color: var(--text-xmuted);
    font-size: var(--size-12);
  }
  .adm-tr-rel .adm-c-acoes { width: auto; white-space: normal; }
  .adm-rel-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; }
  .adm-rel-action { min-height: 36px; }

  .adm-toolbar .ws-toolbar-row { flex-wrap: wrap; gap: var(--space-3); }
  .adm-acoes { margin-left: 0; width: 100%; }
  .adm-acoes .btn-primary { width: 100%; }
  .adm-acoes:has(.adm-preparar-foto) > :is(.btn-primary, .adm-preparar-foto) { flex: 1 1 auto; width: auto; min-height: 44px; white-space: nowrap; }
}

/* ════════════════════════════════════════════════════════════
   Página pública do relatório de repasse (/relatorio-repasse.html)
   ════════════════════════════════════════════════════════════ */

.rel-print-btn { margin-left: auto; }

/* O documento tem uma única margem, independente do formulário de retorno. */
.rel-content {
  flex: 1;
  width: 100%;
  min-width: 0;
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 32px;
}
.rel-content > .rel-doc { width: 100%; padding: 0; }

.rel-doc {
  max-width: 900px;
  margin: 0 auto;
  padding: 52px 64px;
  background: #fff;
  color: #1E2435;
  font-size: 15px;
  line-height: 1.55;
}

/* Shell neutro extraído do relatório mensal. O HTML é compartilhado por
   domain/relatorio-shell.js; aqui ficam os mesmos estilos para a página pública. */
.rel-shell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 2.5px solid #1B2A4A;
  margin-bottom: 36px;
}
.rel-shell-brand { display: flex; align-items: center; gap: 10px; line-height: 1; }
.rel-shell-brand-name {
  font-family: -apple-system, "SF Pro Display", BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #4C4F69;
  line-height: 1;
  position: relative;
  top: -1px;
}
.rel-shell-meta { text-align: right; }
.rel-shell-title {
  font-size: 18px;
  font-weight: 700;
  color: #1B2A4A;
  letter-spacing: -0.01em;
}
.rel-shell-sub { font-size: 13px; color: #717B92; margin-top: 4px; }
.rel-shell-foot {
  margin-top: 48px;
  padding-top: 18px;
  border-top: 1px solid #E8ECF4;
  font-size: 12px;
  color: #98A2B6;
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

/* Compatibilidade com snapshots públicos anteriores. */
.rel-doc-head { margin-bottom: var(--space-6); }
.rel-doc-head h1 {
  font-family: var(--font-display);
  font-size: var(--size-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
}
.rel-doc-contexto { color: var(--text-muted); margin-top: var(--space-1); }

.rel-section { margin-bottom: 40px; }
.rel-section-title {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #1B2A4A;
  background: #F3F5FA;
  border-left: 4px solid #1B2A4A;
  padding: 9px 16px;
  margin: 0 0 16px;
  break-after: avoid;
  page-break-after: avoid;
}
.rel-section-desc {
  color: #717B92;
  font-size: 13px;
  margin: -6px 0 16px;
}

.rel-resumo-financeiro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.rel-resumo-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid #E8ECF4;
  border-radius: 10px;
  padding: 20px;
  color: #717B92;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.rel-resumo-item--liquido {
  border-color: #1B2A4A;
  background: #F9FAFB;
}

.rel-total {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
  margin-bottom: var(--space-5);
}
.rel-total-rotulo { font-size: var(--size-sm); color: var(--text-muted); }
.rel-total-valor {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.03em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.rel-resumo-valor-liquido {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.03em;
  color: #1B2A4A;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

.rel-grupos { display: flex; flex-direction: column; gap: 16px; }
.rel-grupo {
  border: 1px solid #E8ECF4;
  border-radius: 10px;
  overflow: clip;
  background: #fff;
}
.rel-grupo-resumo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  cursor: pointer;
  color: #1B2A4A;
  background: #F9FAFB;
  list-style-position: outside;
  break-after: avoid;
  page-break-after: avoid;
}
.rel-grupo-resumo:focus-visible {
  outline: 3px solid color-mix(in srgb, #1B2A4A 25%, transparent);
  outline-offset: -3px;
}
.rel-grupo-identidade { display: flex; flex-direction: column; min-width: 0; }
.rel-grupo-identidade strong { font-size: 14px; }
.rel-grupo-identidade span { font-size: 12px; color: #717B92; margin-top: 2px; }
.rel-grupo-acao { color: #717B92; font-size: 12px; white-space: nowrap; }
.rel-grupo[open] .rel-grupo-acao::before { content: "Recolher · "; }
.rel-grupo:not([open]) .rel-grupo-acao::before { content: "Abrir · "; }
.rel-grupo-corpo { border-top: 1px solid #E8ECF4; }
.rel-tabela-wrap { overflow-x: auto; }
.rel-tabela-financeira { width: 100%; border-collapse: collapse; }
.rel-tabela-financeira thead { background: #F3F5FA; }
.rel-tabela-financeira th {
  padding: 10px 14px;
  border-bottom: 1px solid #E8ECF4;
  color: #717B92;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-align: left;
  text-transform: uppercase;
}
.rel-tabela-financeira td {
  padding: 10px 14px;
  border-bottom: 1px solid #F0F3F8;
  color: #31384A;
  font-size: 14px;
  vertical-align: top;
}
.rel-tabela-financeira tr:last-child td { border-bottom: 0; }
.rel-tabela-financeira th:first-child,
.rel-tabela-financeira td:first-child { width: 148px; }
.rel-tabela-financeira th:last-child,
.rel-tabela-financeira td:last-child { width: 150px; }
.rel-etapa { color: #717B92; font-size: 12px; }
.rel-linha-descricao { display: block; }
.rel-linha-parametros {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 5px 0 0;
  color: #717B92;
  font-size: 11px;
}
.rel-linha-parametros div { display: inline-flex; gap: 4px; }
.rel-linha-parametros dt { font-weight: 700; }
.rel-linha-parametros dd { margin: 0; }
.rel-linha-formula {
  margin: 4px 0 0;
  color: #717B92;
  font-size: 11px;
  line-height: 1.4;
}
.rel-linha-formula span { font-weight: 700; }
.rel-valor {
  text-align: right !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rel-linha-financeira { break-inside: avoid; page-break-inside: avoid; }
.rel-linha-financeira--subtotal {
  break-inside: avoid;
  page-break-inside: avoid;
  font-weight: 700;
  background: #F9FAFB;
}
.rel-linha-financeira--subtotal td { color: #1B2A4A; }

.rel-observacoes p {
  border-left: 2px solid #E8ECF4;
  padding-left: 16px;
  color: #4C4F69;
  white-space: pre-wrap;
}

/* Linhas compactas antigas seguem válidas na área autenticada do médico. */
.rel-linhas { border-top: 1px solid var(--border-hairline); }
.rel-linha {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-hairline);
}
.rel-linha b { font-variant-numeric: tabular-nums; }
.rel-linha--sub { color: var(--text-muted); }
.rel-linha:last-child { border-bottom: none; }

.rel-doc-pe {
  margin-top: var(--space-6);
  color: var(--text-muted);
  font-size: var(--size-xs);
}

.rel-erro { max-width: 480px; margin: var(--space-8) auto; text-align: center; }
.rel-erro h1 { font-size: var(--size-lg); margin-bottom: var(--space-2); }
.rel-erro p { color: var(--text-muted); }

@media (max-width: 767px) {
  .rel-content { padding: 24px 16px; }
  .rel-doc { padding: 28px 16px; }
  .rel-shell-head { align-items: flex-start; gap: 16px; margin-bottom: 28px; }
  .rel-shell-meta { text-align: left; }
  .rel-shell-brand-name { display: none; }
  .rel-resumo-financeiro { grid-template-columns: 1fr; }
  .rel-resumo-valor-liquido { font-size: 28px; }
  .rel-grupo-resumo { align-items: flex-start; }
  .rel-grupo-acao { font-size: 0; }
  .rel-grupo-acao::after { content: "▾"; font-size: 14px; }
  .rel-grupo:not([open]) .rel-grupo-acao::after { content: "▸"; }
  .rel-tabela-financeira th:first-child,
  .rel-tabela-financeira td:first-child { width: auto; }
  .rel-linha-parametros { flex-direction: column; gap: 2px; }
  .rel-shell-foot { flex-direction: column; gap: 4px; }
}

@media print {
  .ret-page-header, .rel-print-btn, .toast-container { display: none !important; }
  .rel-content { max-width: none; padding: 0; }
  .rel-doc { max-width: none; padding: 0; }
  .rel-doc, .rel-doc * {
    color: #111 !important;
    box-shadow: none !important;
  }
  .rel-shell-head, .rel-section-title, .rel-resumo-item--liquido {
    border-color: #111;
  }
  .rel-section-title, .rel-resumo-item, .rel-grupo-resumo,
  .rel-tabela-financeira thead, .rel-linha-financeira--subtotal {
    background: #fff !important;
  }
  .rel-section-title { break-after: avoid; page-break-after: avoid; }
  .rel-section-desc { break-after: avoid; page-break-after: avoid; }
  .rel-grupo { display: block; break-inside: avoid; page-break-inside: avoid; }
  .rel-grupo-resumo { break-after: avoid; page-break-after: avoid; cursor: default; }
  .rel-grupo-acao { display: none; }
  .rel-grupo-corpo,
  .rel-grupo:not([open]) > .rel-grupo-corpo { display: block !important; }
  .rel-tabela-wrap { overflow: visible; }
  .rel-tabela-financeira thead { display: table-header-group; }
  .rel-tabela-financeira tr { break-inside: avoid; page-break-inside: avoid; }
  .rel-shell-foot { break-inside: avoid; page-break-inside: avoid; }
  @page { margin: 16mm 14mm; size: A4; }
}

/* ═══════════════════════════════════════════════════════════════
   Home do médico administrativo (Etapa 11)
   Barra de PROPORÇÃO do repasse: quanto do bruto sobra pra ele.
   Empilhada em CSS, não Chart.js — a lib é a única dependência via
   script global do projeto e entraria no boot para desenhar de três a
   seis segmentos. Horizontal também lê melhor no celular.
   ═══════════════════════════════════════════════════════════════ */

.mha-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.mha-competencia { font-weight: 600; }
.mha-competencia .cfg-rp-card-sub { display: block; font-weight: 400; }
/* O número que ele confere contra o depósito é o maior da tela. */
.mha-liquido {
  font-size: 1.5rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--accent);
}

.mha-barra {
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--accent-tint-1);
  margin-bottom: var(--space-3);
}
.mha-seg { display: block; height: 100%; min-width: 2px; }
/* A parte dele é a cor cheia; as deduções descem em opacidade — o olho lê a
   proporção antes de ler qualquer número. */
.mha-seg--liquido { background: var(--accent); }
.mha-seg--deducao { background: var(--accent); }
.mha-seg--d1 { opacity: 0.42; }
.mha-seg--d2 { opacity: 0.30; }
.mha-seg--d3 { opacity: 0.20; }

.mha-legenda { list-style: none; margin: 0; padding: 0; }
.mha-legenda-item {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 0;
}
.mha-legenda-item + .mha-legenda-item { border-top: 1px solid var(--accent-tint-1); }
.mha-chip { width: 10px; height: 10px; border-radius: 3px; background: var(--accent); }
.mha-legenda-rotulo { color: var(--text-secondary, var(--text-muted)); }
.mha-legenda-valor { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mha-bruto {
  margin: var(--space-3) 0 0;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.mha-hist-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 8px 0;
}
.mha-hist-item + .mha-hist-item { border-top: 1px solid var(--accent-tint-1); }
.mha-hist-valor { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }

/* ⚠️ Nesta Home a faixa de KPIs é mais estreita que a do Financeiro (divide a
   linha com a coluna lateral), e sem isto o navegador quebra "R$ 25.125,68" em
   duas linhas — o mesmo defeito que fez `table-layout: fixed` sair da tabela da
   área administrativa. */
/* ⚠️ Três valores de repasse não cabem na strip desta Home como cabem os do
   clínico (lá são R$ 0,00 e R$ 1.850,00; aqui, R$ 25.125,68 três vezes). Sem
   ajuste o navegador quebra "R$ 25.125,68" em duas linhas.
   A saída NÃO é alargar a coluna: `minmax(min-content, 1fr)` faz a strip
   transbordar o grid e invadir a coluna lateral — medido. Reduzir o corpo do
   número resolve dentro do espaço que existe.

   ⚠️ Escopado em `--adm`, NUNCA em `.medico-home-kpis-shell` puro: essa classe
   também é o shell da Home CLÍNICA (medico-home/page.js), onde os valores são
   uma ordem de grandeza menores e cabem no `clamp()` da regra base. Sem o
   modificador, este ajuste — que só a Home administrativa pede — derruba os
   KPIs dos médicos reais de ~23–31px para 16px no desktop. */
@media (min-width: 768px) {
  .medico-home-kpis-shell--adm .fin-kpi-valor {
    white-space: nowrap;
    font-size: 16px;
  }
}

/* ── Prévia do repasse na área do médico (Etapa 11a, migration 173) ────────
   O aviso de estimado. Fica ACIMA dos números, não abaixo: quem lê a faixa de
   KPIs lê o valor primeiro, e um rótulo depois do número chega tarde para quem
   já anotou o total. Discreto de propósito — quem carrega o estado linha a
   linha é o badge; isto é o guarda-chuva do agregado. */
.rpm-aviso-estimado {
  margin: 0 0 var(--space-2);
  font-size: var(--size-sm);
  color: var(--text-muted);
}

/* Badge + valor na mesma coluna direita da linha, alinhados pela base do
   número. `.adm-linha` é grid `1fr auto`: o fim é uma célula só. */
.rpm-linha-fim {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  justify-content: flex-end;
}

/* No celular — onde ele confere o repasse contra o depósito — o badge desce
   para debaixo do valor em vez de espremer os dois: "R$ 25.125,68" e
   "Parcial · estimado" lado a lado não cabem em 360px. */
@media (max-width: 767px) {
  .rpm-linha-fim {
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
  }
}

/* ── Fila da aba Conferências (Etapa 6, tela em 2026-08-20) ───────────────
   O dinheiro que o provedor NÃO pagou, somado, acima da tabela. É o achado
   que paga a conta do módulo (`so_lado_2`), e dentro de uma célula da tabela
   ele se lê como mais um número entre outros. Só aparece quando é > 0 — um
   "R$ 0,00" fixo aqui viraria ruído que ela aprende a ignorar, e aí o dia em
   que houver valor não vai chamar atenção nenhuma. */
.adm-conf-destaque {
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--surface-tint);
  color: var(--text-muted);
  font-size: var(--size-sm);
}
.adm-conf-destaque strong {
  color: var(--accent);
  font-size: var(--size-md);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* ── T11: comparação nominal, cobertura e agrupamento ─────────────────── */
.adm-conf-denominador {
  margin: var(--space-2) 0 var(--space-3);
  color: var(--text-muted);
  font-size: var(--size-sm);
  line-height: 1.45;
}
.adm-conf-denominador strong { color: var(--text-ink); font-weight: var(--weight-semibold); }
.adm-conf-lados {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.adm-conf-lado { min-width: 0; }
.adm-conf-lado h4 {
  margin: 0 0 var(--space-2);
  color: var(--text-muted);
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.adm-conf-linhas { display: flex; flex-direction: column; gap: var(--space-2); }
.adm-conf-linha {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-hairline);
  border-left: 3px solid var(--success, var(--accent));
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}
.adm-conf-linha-info { min-width: 0; }
.adm-conf-linha-info > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-conf-linha-valor { white-space: nowrap; font-variant-numeric: tabular-nums; }
.adm-conf-linha-estado {
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-size: var(--size-xs);
  font-weight: var(--weight-medium);
}
.adm-conf-linha--aguardando,
.adm-conf-linha--fora_periodo { border-left-color: var(--text-xmuted); background: var(--bg-subtle); }
.adm-conf-linha--nao_contavel { border-left-color: var(--warning); background: var(--warning-bg); }
.adm-conf-linha--nao_veio,
.adm-conf-linha--sem_registro,
.adm-conf-linha--divergente { border-left-color: var(--error); background: var(--error-bg, var(--bg-subtle)); }
.adm-conf-grupos { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.adm-conf-grupo {
  min-width: 0;
  border: 1px solid var(--border-hairline-strong);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  overflow: clip;
}
.adm-conf-grupo > summary {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  color: var(--text-ink);
  cursor: pointer;
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
}
.adm-conf-grupo > summary > :last-child { color: var(--text-muted); font-size: var(--size-xs); font-weight: var(--weight-regular); }
.adm-conf-grupo > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.adm-conf-grupo > .adm-conf-lados { margin: 0; padding: var(--space-3); border-top: 1px solid var(--border-hairline); }
.adm-conf-grupo:not([open]) > .adm-conf-lados { display: none; }
.adm-conf-divergencias-titulo { margin-top: var(--space-5); }
.cfg-rp-aviso-cadastro {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-3);
  font-size: var(--size-xs);
  line-height: 1.45;
}

/* Conferência: documentos lado a lado, detalhes sob demanda e conclusão. */
.view:has(> .adm-conf-page) {
  --conf-footer-outset: 64px;
  padding-bottom: 0;
}
.adm-conf-page {
  container: adm-conferencia / inline-size;
  width: min(100%, 1480px);
  min-width: 0;
  margin: 0 auto;
}
.adm-conf-page-nav { margin-bottom: var(--space-5); }
.adm-conf-page-header { margin-bottom: var(--space-5); }
.adm-conf-page-heading { flex: 1; min-width: 0; }
.adm-conf-page-heading h1 { font-size: 22px; font-weight: var(--weight-bold); line-height: 1.25; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.adm-conf-page-heading p { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
/* Foco de navegação no título, sem aparência de campo editável. */
.adm-conf-page-heading h1:focus-visible { outline: none; box-shadow: none; }
.adm-conf-page-back { position: relative; }
.adm-conf-page-back::before { content: ''; position: absolute; width: 44px; height: 44px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.adm-conf-page-back > svg { stroke-width: 2.5; }
.adm-conf-page :is(.btn-secondary, .btn-primary) { font-weight: 600; }
.adm-conf-page-header .status-badge { color: var(--accent); }
.adm-conf-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; margin-bottom: var(--space-4); }
.adm-conf-select-toggle { grid-column: 2; grid-row: 1; justify-self: end; }
.adm-conf-delete { grid-column: 2; grid-row: 2; justify-self: end; }
.adm-conf-page [hidden] { display: none; }
.adm-conf-search { min-width: 0; }
.adm-conf-search > .ws-search-icon { display: flex; }
.adm-conf-split { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); }
.adm-conf-split::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 50%; width: 1px; background: var(--border); pointer-events: none; }
.adm-conf-pane { min-width: 0; }
.adm-conf-pane-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border-bottom: 1px solid var(--border-hairline); }
.adm-conf-pane-header h2 { margin: 0 0 4px; font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; font-weight: var(--weight-semibold); color: var(--text-ink); }
.adm-conf-pane-kicker { font-size: 12px; color: var(--text-muted); }
.adm-conf-pane-header .btn-secondary { gap: 6px; flex: none; }
.adm-conf-pane-header .btn-secondary > span { font-size: 20px; line-height: 1; font-weight: 400; }
.adm-conf-pane-list { height: clamp(240px, calc(100dvh - 480px), 560px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.adm-conf-column-labels { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.adm-conf-document-table td { padding: 12px; vertical-align: top; }
.adm-conf-document-table .adm-conf-item-check { width: 28px; padding-right: 0; }
.adm-conf-document-table .adm-conf-item-editable-cell { width: 44%; }
.adm-conf-item:hover { background: var(--row-hover); }
.adm-conf-item[aria-busy="true"] { opacity: 0.65; }
.adm-conf-item-info { min-width: 100px; }
.adm-conf-item-editables { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
.adm-conf-item-medico { display: block; width: max-content; max-width: 100%; color: #506582; font-size: 13px; line-height: 1.5; text-align: end; overflow-wrap: anywhere; }
.adm-conf-item-medico .adm-direto-medico-trigger { width: max-content; padding-inline: 0; margin: 0; text-align: end; justify-content: flex-end; }
.adm-conf-name-edit { background: transparent; border: 0; padding: 0; font-family: inherit; text-align: left; cursor: pointer; }
.adm-conf-name-edit:hover { text-decoration: underline; text-underline-offset: 3px; }
.adm-conf-item .adm-direto-item-feedback { flex-basis: 100%; padding: 0; }
.adm-conf-item-name { display: flex; align-items: center; min-height: 36px; color: var(--text-ink); font-size: 15px; line-height: 1.4; font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.adm-conf-item-meta { display: flex; align-items: center; min-height: 28px; font-size: 13px; line-height: 1.5; color: var(--text-muted); overflow-wrap: anywhere; }
.adm-conf-item-state { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--text-muted); font-size: 12px; font-weight: 600; line-height: 1.5; }
.adm-conf-item-state > svg { flex: none; }
.adm-conf-item-state.is-warning { color: #875511; }
.adm-conf-item-value { color: var(--text-ink); font-size: 15px; font-weight: var(--weight-semibold); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.adm-conf-check { display: grid; place-items: center; align-self: stretch; min-width: 28px; }
.adm-conf-pane-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 240px; padding: 24px; text-align: center; }
.adm-conf-pane-empty strong { font-size: 15px; font-weight: var(--weight-medium); color: var(--text-ink); }
.adm-conf-pane-empty p { max-width: 32ch; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.adm-conf-selection { grid-column: 1; grid-row: 2; font-size: 13px; color: var(--text-muted); }
.adm-conf-selection label { display: flex; align-items: center; gap: 8px; min-height: 36px; color: var(--text-ink); }
.adm-conf-support { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin: 12px 0 0 60px; }
.adm-conf-support-trigger { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; font: inherit; text-align: start; cursor: pointer; }
.adm-conf-support-trigger:hover { background: var(--hover-subtle); }
.adm-conf-support-trigger strong { color: var(--text-ink); font-size: 14px; font-weight: 600; }
.adm-conf-support-note { color: var(--text-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.adm-conf-support-trigger > svg { flex: none; color: var(--text-muted); }
.adm-conf-support-icon { display: grid; place-items: center; width: 20px; height: 20px; flex: none; color: var(--text-muted); }
.adm-conf-support-trigger.has-pending .adm-conf-support-icon { color: #875511; }
.adm-conf-support-trigger.has-pending .adm-conf-support-note { padding: 2px 8px; border-radius: 4px; background: #fff1dc; color: #875511; }
[data-conf-apoio="financeiro"] .adm-conf-support-icon { color: #356052; }
.adm-conf-conclusion { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; margin: 8px calc(-1 * var(--conf-footer-outset, 0px)) 0; padding: 8px var(--conf-footer-outset, 0px) max(8px, env(safe-area-inset-bottom)); border-top: 1px solid #c6cfdb; background: var(--bg-card); z-index: var(--z-sticky, 10); }
.adm-conf-support-drawer [data-conf-exportar] { white-space: normal; }
.adm-conf-support-drawer .adm-direto-total { padding: 16px; margin-top: 14px; border-radius: 8px; background: #edf4f1; color: #2d5748; }
.adm-conf-support-drawer .adm-direto-total strong { font-size: 30px; font-weight: 650; }
.adm-conf-support-drawer .ws-drawer-title { font-weight: 650; letter-spacing: -0.025em; }
.adm-conf-support-drawer .cfg-rp-card-nome { font-weight: 600; }
.adm-conf-support-drawer .adm-lote-valor { font-weight: 600; }
.adm-conf-descontos > .form-section-title { margin-top: 0; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-ink); }
.adm-conf-support-drawer .adm-conf-page-history strong { font-size: 14px; font-weight: 500; }
.adm-conf-conclusion-text { flex: 1; min-width: 180px; color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.adm-conf-conclusion-actions button { min-height: 36px; padding-inline: 18px; font-size: 14px; }
.adm-conf-conclusion-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.adm-conf-page button:focus-visible,
.adm-conf-page summary:focus-visible,
.adm-conf-pane-list:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.adm-exportacao-body { display: flex; flex-direction: column; gap: var(--space-4); }
.adm-exportacao-body > .cfg-section-desc { margin: 0; }
.adm-conf-page-docs { display: flex; flex-direction: column; margin-bottom: var(--space-3); }
.adm-conf-page-doc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-hairline);
}
.adm-conf-page-doc:first-child { padding-top: 0; }
.adm-conf-page-doc:last-child { border-bottom: none; }
.adm-conf-page-doc strong,
.adm-conf-page-doc span { display: block; }
.adm-conf-page-doc strong { color: var(--text-ink); font-size: var(--size-sm); }
.adm-conf-page-doc span { color: var(--text-muted); font-size: var(--size-xs); line-height: 1.45; }
.adm-conf-page-doc > span { white-space: nowrap; }
.adm-conf-page-history { margin: 0; padding: 0; list-style: none; }
.adm-conf-page-history li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-hairline);
}
.adm-conf-page-history li:last-child { border-bottom: none; }
.adm-conf-page-history li > div { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.adm-conf-page-history li > span { grid-column: 1; color: var(--text-muted); font-size: var(--size-xs); }
.adm-conf-page-history time { grid-column: 2; grid-row: 1 / span 2; color: var(--text-muted); font-size: var(--size-xs); white-space: nowrap; }
.adm-conf-drawer-resumo { display: flex; flex-direction: column; gap: var(--space-3); }
.adm-conf-drawer-resumo .adm-linhas { margin-top: var(--space-1); }
.adm-conf-drawer-atalho { width: 100%; margin-top: var(--space-2); }

/* Considera a largura que sobra depois da sidebar, além do viewport. */
@container adm-conferencia (max-width: 680px) {
  .adm-conf-page-header { padding: var(--space-4); }
  .adm-conf-page-header .ficha-header-main { flex-direction: row; gap: 12px; }
  .adm-conf-page-heading h1 { font-size: 20px; }
  .adm-conf-toolbar { column-gap: 8px; }
  .adm-conf-split { grid-template-columns: minmax(0, 1fr); }
  .adm-conf-split::before { display: none; }
  .adm-conf-pane-list { height: auto; min-height: 180px; max-height: 440px; }
  .adm-conf-support { gap: 4px; margin-left: 0; }
  .adm-conf-support-trigger { gap: 6px; padding-inline: 6px; }
  .adm-conf-support-trigger strong { font-size: 13px; }
  .adm-conf-support :is(.adm-conf-support-icon, .adm-conf-support-note, .adm-conf-support-long) { display: none; }
  .adm-conf-support-trigger.has-pending { color: #875511; background: #fff6e8; }
  .adm-conf-conclusion { gap: 8px; }
  .adm-conf-conclusion-text { min-width: 0; flex-basis: 100%; }
  .adm-conf-conclusion-actions { width: 100%; }
  .adm-conf-conclusion-actions button { flex: 1; min-height: 44px; white-space: normal; }
}

@container adm-conferencia (max-width: 360px) {
  .adm-conf-support-trigger > svg { display: none; }
}

@media (max-width: 767px) {
  .view:has(> .adm-conf-page) { --conf-footer-outset: 16px; }
  .adm-conf-lados { grid-template-columns: minmax(0, 1fr); }
  .adm-conf-grupo > summary { align-items: flex-start; flex-direction: column; gap: 2px; }
  .adm-conf-linha { padding-inline: var(--space-2); }
  .adm-conf-pane-empty { min-height: 180px; padding: 16px; }
  .adm-conf-search input { font-size: 16px; }
  .adm-conf-item-name, .adm-conf-item-meta { min-height: 44px; }
  .adm-conf-item :is(.adm-direto-value-trigger, .adm-direto-medico-trigger) { min-height: 44px; }
  .adm-conf-page-doc,
  .adm-conf-page-history li { grid-template-columns: minmax(0, 1fr); }
  .adm-conf-page-doc > span,
  .adm-conf-page-history time { grid-column: 1; grid-row: auto; white-space: normal; }
  .adm-conf-selection label { align-items: flex-start; font-size: 12px; line-height: 1.4; }
  .adm-conf-selection input { flex: none; margin-top: 3px; }
}

/* T14: prazos operacionais, competência explícita e leitura compacta no celular. */
.adm-prazos { padding-block: var(--space-4); }
.adm-prazos-toolbar { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 16px; }
.adm-prazos h2 { font-size: 18px; margin: 0 0 6px; }
.adm-prazos h3 { font-size: 14px; margin: 0 0 4px; }
.adm-prazos p { margin: 0; font-size: 13px; color: var(--text-muted); }
.adm-prazos-filtro { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 13px; margin-bottom: 12px; }
.adm-prazos-filtro select { width: auto; min-width: 180px; max-width: 100%; }
[data-prazo-referencia] { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
.adm-prazo { display: grid; grid-template-columns: minmax(140px,1fr) minmax(180px,1.5fr) auto auto; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.adm-prazo-contexto { display: grid; gap: 5px; font-size: 13px; }
.adm-prazo-contexto span { font-size: 12px; color: var(--text-muted); }
.adm-prazo-data { display: grid; gap: 5px; font-size: 13px; }
.adm-prazo-status { font-size: 12px; }
.adm-prazo-status--vencido { color: var(--error); font-weight: 600; }
.adm-prazo-status--hoje { font-weight: 600; }
.adm-prazos-avisos { padding: 20px 0; font-size: 13px; }
.adm-prazos-avisos ul { padding-left: 20px; }
@media (max-width: 640px) {
  .adm-prazos-toolbar { flex-wrap: wrap; }
  .adm-prazo { grid-template-columns: minmax(0,1fr) auto; gap: 12px; }
  .adm-prazo-contexto, .adm-prazo > div:nth-child(2) { grid-column: 1 / -1; }
  .adm-prazo-contexto strong { overflow-wrap: anywhere; }
}

/* Prazos de repasse: dia inteiro, na coluna do médico correspondente. */
.ag-admin-day-row, .ag-admin-week-row, .ag-admin-grade-row {
  display: grid;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-hairline);
}
.ag-admin-day-row { grid-template-columns: 72px minmax(0, 1fr); }
.ag-admin-week-row { grid-template-columns: 72px repeat(7, minmax(0, 1fr)); }
.ag-admin-grade-row { min-width: var(--ag-grade-min-width); width: 100%; }
.ag-admin-gutter { padding: 8px 4px; font-size: 10px; color: var(--text-muted); text-align: center; }
.ag-admin-cell { min-width: 0; padding: 4px; border-left: 1px solid var(--border-hairline); }
.ag-admin-event {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-bottom: 3px;
  padding: 5px 7px;
  border-radius: 4px;
  border-left: 3px solid var(--ag-admin-color);
  background: var(--ag-admin-bg);
  color: var(--ag-admin-text);
  text-align: left;
  line-height: 1.35;
  cursor: default;
}
.ag-admin-event:last-child { margin-bottom: 0; }
.ag-admin-title { font-size: 11px; font-weight: 600; overflow-wrap: anywhere; }
.ag-admin-context { font-size: 10px; overflow-wrap: anywhere; }
.ag-admin-dot, .ag-minical-dot--administrativo { background: var(--ag-admin-color); }
.ag-mes-cell .ag-admin-event { padding: 3px 5px; }
.ag-mes-cell .ag-admin-title, .ag-mes-cell .ag-admin-context {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ag-admin-error { padding: 12px; font-size: 12px; }
@media (max-width: 767px) {
  .ag-admin-day-row { grid-template-columns: 56px minmax(0, 1fr); }
  .ag-admin-week-row { min-width: 756px; width: 100%; grid-template-columns: 56px repeat(7, minmax(100px, 1fr)); }
  .ag-mes-cell .ag-admin-context { display: none; }
}

/* ============================================================
   Médicos - lista (#medicos)
   Mockup: docs/mockups/gestao-medicos/mock-lista.css (aprovado 15/09).
   ============================================================ */
.med-lista-toolbar { justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
#med-abaixo > .ws-filter-row { margin-bottom: var(--space-3); }
.med-lista-filter-count { margin-left: auto; font-size: var(--size-12); white-space: nowrap; }
.med-lista-table-shell { overflow-x: auto; }
.med-lista-esp { flex: 1 1 100%; font-size: var(--size-12); color: var(--text-meta); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.med-lista-td-acesso { white-space: nowrap; }
.med-lista-table td.med-lista-td-acoes { width: 1%; white-space: nowrap; }
.med-lista-table--readonly th:last-child,
.med-lista-table--readonly td.med-lista-td-acoes { display: none; }

@media (max-width: 767px) {
  #med-novo {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    flex: 0 0 36px !important;
    font-size: 0;
    gap: 0;
  }
  #med-novo span { display: none; }
}

@media (max-width: 767px) {
  .med-lista-table thead { display: none; }
  .med-lista-table,
  .med-lista-table tbody { display: block; width: 100%; }
  .med-lista-table tr.med-lista-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-hairline);
    cursor: pointer;
  }
  .med-lista-table tr.med-lista-row:last-child { border-bottom: none; }
  .med-lista-table tr.med-lista-row:active { background: var(--row-hover); }
  .med-lista-row .med-lista-td-nome { display: flex; flex: 1 1 auto; min-width: 0; padding: 0; border: none; }
  .med-lista-row .med-lista-esp,
  .med-lista-row .med-lista-td-status,
  .med-lista-row .med-lista-td-acesso,
  .med-lista-row .med-lista-td-mensal { display: none; }
  .med-lista-table td.med-lista-td-acoes { display: none; }
}

/* ============================================================
   Médicos - modal Novo médico (passo 1: seção Financeiro; passo 2: link de
   onboarding). Mockup: docs/mockups/gestao-medicos/mock-lista.css (15/09).
   ============================================================ */
.cfg-section-collapsible.med-nm-fin-section { margin-top: var(--space-5); }

.med-nm-onboarding-link {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  border: 1px solid var(--border-hairline);
  font-size: var(--size-12);
  color: var(--text-ink);
  word-break: break-all;
  white-space: normal;
}