@import url("fonts.css");

:root {
  --cream: #f3f2ec;
  --cream-deep: #e8e7e0;
  --olive: #aea883;
  --olive-deep: #787660;
  /* tom pessoal: lavanda suave, complementar aos verdes da paleta (05/10/2026) */
  --lavanda: #9d8fb0;
  --lavanda-deep: #6e5f84;
  --sage: #99a597;
  --teal: #475d59;
  --teal-deep: #35473f;
  /* moldura da recepção (Elsa, Ângela): Marsala da Pantone (18-1438, cor do ano de 2015)
     no lugar do verde da barra (27/10/2026; marrom café e Ultra Violet vieram antes) */
  --marsala: #955251;
  --marsala-rgb: 149, 82, 81;
  /* tons derivados para a paleta da recepção: verde escuro → marsala escuro, verde claro → marsala claro */
  --marsala-escuro: #6e3b3a;
  --marsala-escuro-rgb: 110, 59, 58;
  --marsala-claro: #c9a19e;
  --marsala-claro-rgb: 201, 161, 158;

  --bg: var(--cream);
  --surface: #ffffff;
  --surface-muted: #faf9f5;
  --border: #e2e0d5;
  --text: #2c342f;
  --text-muted: #726f60;
  --text-soft: #96937f;

  --primary: var(--teal);
  --primary-hover: var(--teal-deep);
  --accent: var(--olive);
  --accent-deep: var(--olive-deep);
  --success: #4f7a5b;
  --success-bg: #e7efe4;
  --warn: #a97a35;
  --warn-bg: #f6ecd9;
  --danger: #a34c3a;
  --linha-agora: #d63a3a;       /* linha da hora atual na agenda */
  --danger-bg: #f5e5e0;

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgba(var(--text-rgb), 0.04), 0 6px 20px rgba(var(--text-rgb), 0.05);
  --shadow-sm: 0 1px 2px rgba(var(--text-rgb), 0.06);

  --font-display: "Sedra", Georgia, serif;
  --font-body: "Stara", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Escala de fontes (combinada em 02/10, fechada em 14/10/2026): 9 · 9,5 ·
     10 · 11 · 13 · 16 · 26. Números grandes em Sedra (17–28) e glifos
     (setas ›, alças ⠿, "R$") ficam fora da escala. */
  --fs-micro: 9px;
  --fs-pequeno: 10px;     /* rótulos, campos, texto secundário */
  --fs-base: 11px;        /* texto corrido, tabelas, menus, mensagens */
  --fs-destaque: 13px;    /* subtítulo de página, nome em destaque */
  --fs-h2: 16px;
  --fs-h1: 26px;
  /* tamanho único de todas as etiquetas (badges, status, pills, botões pequenos) */
  --font-tag: 9.5px;
  --peso-tag: 500;

  /* ---- Tokens nomeados em 13/10/2026 (fase 1 do plano de consistência):
     valores que já se repetiam soltos pelo arquivo, agora com nome. ---- */
  /* "branco quente": texto/ícone sobre fundo escuro (sidebar, vidros escuros, botões) */
  --text-claro: #fdfcf9;
  --text-claro-rgb: 253, 252, 249;
  /* bases RGB pra transparências (rgba(var(--x-rgb), alfa)) */
  --text-rgb: 44, 52, 47;        /* = --text */
  --teal-deep-rgb: 53, 71, 63;   /* = --teal-deep: vidro verde (sidebar, Home, hover) */
  --teal-rgb: 71, 93, 89;        /* = --teal */
  --sage-rgb: 153, 165, 151;     /* = --sage */
  /* selo "Em acompanhamento" fica verde em qualquer paleta (combina com o bloco
     verde de acompanhamento da agenda; resolvido aqui, a paleta da recepção não troca) */
  --selo-acomp-fundo: var(--sage);
  --selo-acomp-borda: var(--teal);
  --sombra-rgb: 20, 26, 22;      /* sombra/véu mais escuro (sidebar, gaveta do celular) */
  /* contorno padrão de campo e caixas leves sobre o vidro */
  --borda-campo: 0.2px solid rgba(255, 255, 255, 0.5);
  /* sombras */
  --shadow-card: 0 12px 28px rgba(var(--text-rgb), 0.12), 0 2px 8px rgba(var(--text-rgb), 0.06);
  --shadow-card-hover: 0 16px 34px rgba(var(--text-rgb), 0.16), 0 3px 10px rgba(var(--text-rgb), 0.08);
  --shadow-stat: 0 6px 16px rgba(var(--text-rgb), 0.08), 0 1px 4px rgba(var(--text-rgb), 0.05);
  --shadow-painel: 0 12px 28px rgba(var(--text-rgb), 0.18), 0 2px 8px rgba(var(--text-rgb), 0.08);
  --shadow-flutuante: 0 16px 40px rgba(var(--sombra-rgb), 0.28), 0 4px 14px rgba(var(--sombra-rgb), 0.16);
  /* bases RGB das cores de estado */
  --success-rgb: 79, 122, 91;    /* = --success */
  --danger-rgb: 163, 76, 58;     /* = --danger */
  /* verde claro: "Checado" na checagem, linha "recebido" dos gráficos, ✓ do plano */
  --success-claro: #5f9a6b;
  /* cores de marca de terceiros */
  --whatsapp: #25d366;
  --whatsapp-hover: #1da851;
  /* feriado/data festiva na agenda (bordô, só aqui) */
  --feriado: #80202c;
  --feriado-rgb: 128, 32, 44;
  --cartao-itau: #EC7000;
  --cartao-sisprime: #00305F;
  --cartao-unicred: #00553A;

  /* Controles segmentados (e o mini Ativo/Inativo, Dia/Semana/Mês/Ano da
     agenda): trilho e opção marcada em vidro escuro, texto claro. Fixos no
     tema desde 14/10/2026 — saíram da tela Aparência (não faziam efeito). */
  --segmented-fill-rgb: 44, 52, 47; --segmented-fill-opacity: 82%;
  --segmented-border-rgb: 255, 255, 255; --segmented-border-opacity: 14%; --segmented-border-width: 1px;
  --segmented-fill-text: var(--text-claro);
  --segmented-trilho: rgba(var(--text-rgb), 0.42);
  --segmented-texto-inativo: rgba(var(--text-claro-rgb), 0.72);
  /* Botões contornados/ícone: borda na cor do próprio texto (ver .icon-btn,
     .btn.secondary, .btn.outline); fixos desde 14/10/2026, como acima. */
  --btn-outline-border-rgb: 255, 255, 255; --btn-outline-border-opacity: 30%; --btn-outline-border-width: 0px;
  /* pílula Enterprise/Personnel: creme translúcido */
  --cream-rgb: 243, 242, 236;

  /* Vidro líquido no estilo do iOS 27 (19/10/2026 — ver o bloco no fim do arquivo) */
  /* aro de luz: vem do alto à esquerda e volta embaixo à direita */
  --vidro-aro-claro: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.4) 16%,
    rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 0.3) 86%, rgba(255, 255, 255, 0.7) 100%);
  --vidro-aro-escuro: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.16) 16%,
    rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 0.1) 86%, rgba(255, 255, 255, 0.3) 100%);
  /* luz por dentro: filete no alto, luz que volta embaixo, brilho fraco nas bordas */
  --vidro-luz-claro: inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 0 -1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 16px rgba(255, 255, 255, 0.14);
  --vidro-luz-escuro: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 20px rgba(255, 255, 255, 0.05);
  /* o vidro clareia um pouco no alto */
  --vidro-degrade-claro: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 30%,
    rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.07) 100%);
  /* desfoque que também iguala o brilho do que está atrás (ver item 3 no fim do arquivo) */
  --vidro-uniforme: contrast(0.8) brightness(1.08);
  /* movimento com mola: passa um pouco do ponto e assenta */
  --mola: cubic-bezier(0.34, 1.4, 0.64, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font-body);
  background-color: var(--bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  color: var(--text);
  font-size: var(--fs-base); /* texto base (escala combinada com o usuário em 02/10) */
  line-height: 1.5;
}

/* Papel de parede é só decoração de tela — não gasta tinta nem atrapalha
   leitura em nenhuma impressão/exportação (Ctrl+P de qualquer página). */
@media print {
  body { background: #fff !important; background-image: none !important; }
}

/* Faixa fixa no topo, invisível na prática (8px) — existe só pra Safari 26+
   copiar essa cor pro cromo do navegador (barra de abas/endereço). Safari
   parou de usar a tag <meta name="theme-color">; agora ele copia a cor de um
   elemento fixed encostado no topo da página. */
.aparencia-safari-strip {
  position: fixed; top: 0; left: 0; width: 100%; height: 8px; z-index: 9999; pointer-events: none;
}

/* ---------- Breadcrumb (caminho até a página atual, no topo do conteúdo) ---------- */

.breadcrumb {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: var(--fs-base); color: var(--text-soft); margin-bottom: 14px;
}
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--primary); text-decoration: underline; }
.breadcrumb-sep { color: var(--text-soft); }
.breadcrumb-atual { color: var(--text); font-weight: 600; }

@media print {
  .breadcrumb { display: none !important; }
}

/* ---------- Sidebar (inspirado no Conta Azul) ---------- */

.sidebar {
  /* top 45px: logo abaixo da pílula Enterprise/Personnel (.workspace-topo) */
  position: fixed; top: 45px; left: 16px; bottom: 16px; width: 232px;
  isolation: isolate;
  overflow: hidden;
  /* borda da Aparência com pouco mais da metade da força: o aro de luz (::after, no fim do arquivo) faz o contorno */
  border: var(--sidebar-border-width, 1px) solid rgba(var(--sidebar-border-rgb), calc(var(--sidebar-border-opacity, 30%) * 0.55));
  /* 24 = raio dos itens (12) + espaço até a borda (12): cantos concêntricos */
  border-radius: 24px;
  box-shadow: var(--shadow-flutuante);
  color: var(--text-claro);
  display: flex; flex-direction: column;
  padding: 18px 12px;
  z-index: 40;
  transition: width 0.18s ease;
}
.sidebar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(var(--teal-deep-rgb), var(--sidebar-opacity, 86%));
  backdrop-filter: blur(var(--sidebar-blur, 20px)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--sidebar-blur, 20px)) saturate(140%);
}


/* Mesmo .segmented/.segmented-opt usado no resto do sistema (ver linha
   ~642) — só o necessário pra caber no fundo escuro da sidebar: largura
   igual à do menu abaixo (sem margem horizontal própria, herda o padding
   do .sidebar) e cor do texto não-selecionado (var(--text-muted) do
   sistema é escura demais aqui). O selecionado já sai branco/vidro sozinho
   (--segmented-fill-rgb é 255,255,255 por padrão) — só ajusta o texto pra
   --text (escuro) ficar legível em cima do preenchimento branco. */
.sidebar-workspace-switch { width: 100%; margin: 0; }
/* Enterprise/Personnel numa pílula própria, fora da barra e logo acima dela:
   21px de altura, conteúdo centralizado. Cores invertidas em relação ao
   segmentado padrão — o fundo é o claro (vidro) e a opção ativa é o verde da
   barra; o texto troca junto (escuro no claro, creme no verde) pra manter o
   contraste. A barra começa logo abaixo, sem sobreposição. */
.workspace-topo {
  position: fixed; top: 16px; left: 16px; width: 232px; height: 21px; z-index: 41; isolation: isolate;
  box-sizing: border-box; padding: 2px; border-radius: 999px; display: flex; align-items: center;
  transition: width 0.18s ease;
  border: 1px solid rgba(var(--teal-deep-rgb), 0.18);
  /* cápsula: filete de luz no alto e sombra bem difusa */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(var(--sombra-rgb), 0.08), 0 8px 20px rgba(var(--sombra-rgb), 0.10);
}
.workspace-topo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 60%), rgba(var(--cream-rgb), 0.82);
  backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
}
.workspace-topo .sidebar-workspace-switch { width: 100%; height: 100%; margin: 0; padding: 0; border: none; gap: 2px; align-items: stretch; }
.workspace-topo .sidebar-workspace-switch .segmented-opt {
  height: 100%; padding: 0 8px; font-size: var(--fs-micro); line-height: 1;
  color: var(--text); text-transform: uppercase; letter-spacing: 0.04em;
}
.workspace-topo .sidebar-workspace-switch .segmented-opt:has(input:checked) { color: var(--text-claro); }
.workspace-topo .segmented-thumb,
.workspace-topo .segmented:not(.segmented-tem-thumb) .segmented-opt:has(input:checked) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 70%), rgba(var(--teal-deep-rgb), 0.94); border: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 2px 6px rgba(var(--sombra-rgb), 0.22);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.workspace-topo .workspace-switch-icone svg { width: 11px; height: 11px; }
html.sidebar-recolhida .workspace-topo { width: 104px; }
.sidebar-workspace-switch .segmented-opt {
  color: rgba(var(--text-claro-rgb), 0.65);
  text-transform: uppercase; letter-spacing: 0.04em;
  gap: 6px;
}
.sidebar-workspace-switch .segmented-opt:has(input:checked) { color: var(--text); }
/* Ícone só some no rótulo largo (ver sidebar colapsada em
   @media max-width:980px, mais abaixo) — os dois convivem no DOM o tempo
   todo, só troca quem fica visível, sem precisar de JS nem duplicar o
   formulário. */
.workspace-switch-icone { display: none; }
.workspace-switch-icone svg { width: 15px; height: 15px; display: block; }

/* Paleta da recepção (Elsa, Ângela): os verdes do Gestion viram marsala —
   barra e vidros escuros em marsala, verde escuro (botões, destaques, links)
   em marsala escuro, verde claro (sálvia) em marsala claro. Ficam como estão
   as cores com significado: sucesso/aviso/perigo (selos "paga", "aguardando",
   "vencido") e o verde dos blocos de acompanhamento da agenda. */
.perfil-recepcao {
  --teal-deep-rgb: var(--marsala-rgb);
  --teal: var(--marsala-escuro);
  --teal-deep: var(--marsala-escuro);
  --sage: var(--marsala-claro);
  --teal-rgb: var(--marsala-escuro-rgb);
  --sage-rgb: var(--marsala-claro-rgb);
  --primary: var(--marsala-escuro);
  --primary-hover: color-mix(in srgb, var(--marsala-escuro) 80%, var(--text));
  --btn-fill-rgb: var(--marsala-escuro-rgb);
  --destaque-fill-rgb: var(--marsala-escuro-rgb);
  --vidro-escuro-tabela: rgba(var(--marsala-escuro-rgb), 0.42);
  /* controles segmentados: opção marcada e trilho no marsala escuro (no Gestion, verde quase preto) */
  --segmented-fill-rgb: var(--marsala-escuro-rgb);
  --segmented-trilho: rgba(var(--marsala-escuro-rgb), 0.55);
}
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }

.sidebar-link {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px; border-radius: var(--radius);
  color: rgba(var(--text-claro-rgb), 0.75); text-decoration: none;
  font-size: 11px; font-weight: 500;
  background: none; border: none; width: 100%; text-align: left; cursor: pointer;
  font-family: inherit;
}
.sidebar-link:hover { background: rgba(var(--text-claro-rgb), 0.08); color: var(--text-claro); }
.sidebar-link.active { background: rgba(var(--text-claro-rgb), 0.14); color: var(--text-claro); }
.sidebar-icon { display: flex; flex-shrink: 0; opacity: 0.9; }
.sidebar-icon svg { width: 14px; height: 14px; }
.sidebar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sidebar-chevron { margin-left: auto; font-size: 12px; transition: transform 0.15s; opacity: 0.6; }
.sidebar-group.open > .sidebar-group-toggle .sidebar-chevron { transform: rotate(90deg); }
.sidebar-subnav { display: none; flex-direction: column; padding-left: 35px; margin: 2px 0 6px; }
/* Submenu aberto num verde um pouco mais claro que a barra, pra destacar o grupo */
.sidebar-group.open > .sidebar-subnav {
  display: flex;
  background: rgba(var(--text-claro-rgb), 0.09); border-radius: var(--radius); margin: 2px 0 6px; padding-top: 4px; padding-bottom: 4px;
}
.sidebar-group-nested.open > .sidebar-subnav { background: rgba(var(--text-claro-rgb), 0.07); margin: 2px 4px 4px; }
.sidebar-subnav a {
  color: rgba(var(--text-claro-rgb), 0.62); text-decoration: none; font-size: 10px;
  padding: 6px 10px; border-radius: var(--radius-sm); white-space: nowrap;
}
.sidebar-subnav a:hover { background: rgba(var(--text-claro-rgb), 0.08); color: var(--text-claro); }
.sidebar-subnav a.active { color: var(--text-claro); background: rgba(var(--text-claro-rgb), 0.1); }

/* Um submenu dentro de um submenu (ex: Financeiro > Contas > A pagar/A
   receber) — mesmo mecanismo de abrir/fechar do nível de cima (.sidebar-group
   genérico), só com recuo e fonte menores pra marcar a profundidade. */
.sidebar-subnav-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: none; cursor: pointer; font-family: inherit; text-align: left;
  color: rgba(var(--text-claro-rgb), 0.62); font-size: 10px;
  padding: 6px 10px; border-radius: var(--radius-sm);
}
.sidebar-subnav-toggle:hover { background: rgba(var(--text-claro-rgb), 0.08); color: var(--text-claro); }
.sidebar-subnav-toggle.active { color: var(--text-claro); background: rgba(var(--text-claro-rgb), 0.1); }
.sidebar-subnav-toggle .sidebar-chevron { font-size: 11px; }
/* 35px: o recuo de 14px era anulado mais abaixo no arquivo; mantém o que já aparece */
.sidebar-subnav-nested { padding-left: 35px; margin: 0; }
.sidebar-subnav-nested a { font-size: 10px; padding: 5px 10px; }

.sidebar-footer { border-top: 1px solid rgba(var(--text-claro-rgb), 0.12); padding-top: 10px; margin-top: 10px; }
.sidebar-user {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; font-size: 11px; color: rgba(var(--text-claro-rgb), 0.55);
}
.sidebar-user a { color: rgba(var(--text-claro-rgb), 0.55); display: flex; }
.sidebar-user a:hover { color: var(--text-claro); }
.sidebar-user svg { width: 14px; height: 14px; }

/* ---------- Layout ---------- */

.main { margin-left: 264px; animation: main-fade-in 0.22s ease; transition: margin-left 0.18s ease; }
@keyframes main-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Troca de workspace (Enterprise/Personal): tanto o conteúdo (.main) quanto
   a lista de menus da barra lateral (.sidebar-nav, que troca inteira de um
   workspace pro outro) deslizam junto, pro mesmo lado, cada um por 100% da
   própria largura — como o carrossel de foto do celular: a tela inteira
   sai andando pro lado escolhido (ver .saindo-* abaixo e sidebar.js) e a
   nova já nasce encostada do lado oposto, entrando no lugar (sem fade —
   só o movimento, igual o gesto de arrastar fotos). Dá a sensação de uma
   tela só se movendo de um lado pro outro, mesmo sendo duas cargas de
   página separadas (a direção atravessa o reload via sessionStorage, lida
   inline no topo do <body> em base.html antes de .main/.sidebar-nav
   existirem). Quem recorta o deslize é .sidebar (overflow:hidden) pra
   .sidebar-nav, e body (overflow-x:hidden) pra .main — sem isso os 100%
   de translateX abririam uma barra de rolagem horizontal por baixo. */
.main.saindo, .sidebar-nav.saindo { transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
.main.saindo-esquerda, .sidebar-nav.saindo-esquerda { transform: translateX(-100%); }
.main.saindo-direita, .sidebar-nav.saindo-direita { transform: translateX(100%); }
html.entrando-da-direita .main, html.entrando-da-direita .sidebar-nav { animation: entra-da-direita 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
html.entrando-da-esquerda .main, html.entrando-da-esquerda .sidebar-nav { animation: entra-da-esquerda 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes entra-da-direita { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes entra-da-esquerda { from { transform: translateX(-100%); } to { transform: translateX(0); } }

.container { max-width: 1440px; margin: 0 auto; padding: 32px 32px 64px; }

/* ---------- Responsividade (zoom do navegador / telas menores) ---------- */

/* Barra sempre estreita (classe sidebar-recolhida, posta no <head> por
   _tema_cabecalho.html): sem ícones, só os nomes, em fonte menor e
   centralizados. */
/* logo sempre centralizado */
.sidebar-brand { display: flex; justify-content: center; padding: 12px 2px 18px; }
.sidebar-brand img { height: 28px; width: auto; display: block; }

html.sidebar-recolhida .sidebar { width: 104px; padding: 18px 6px; }
html.sidebar-recolhida .sidebar-brand { padding: 12px 2px 18px; }
html.sidebar-recolhida .sidebar-icon, html.sidebar-recolhida .sidebar-chevron { display: none; }
html.sidebar-recolhida .sidebar-link { justify-content: center; padding: 8px 4px; gap: 0; text-align: center; }
html.sidebar-recolhida .sidebar-label { font-size: 11px; white-space: normal; text-align: center; line-height: 1.25; }
html.sidebar-recolhida .sidebar-user { justify-content: center; }
html.sidebar-recolhida .sidebar-user .sidebar-label { display: none; }
html.sidebar-recolhida .sidebar-subnav { padding-left: 0; }
html.sidebar-recolhida .sidebar-subnav a,
html.sidebar-recolhida .sidebar-subnav-toggle,
html.sidebar-recolhida .sidebar-subnav-nested a { font-size: 10px; text-align: center; padding: 5px 2px; white-space: normal; }
html.sidebar-recolhida .sidebar-subnav-toggle { justify-content: center; }
html.sidebar-recolhida .sidebar-subnav-nested { padding-left: 0; }
html.sidebar-recolhida .main { margin-left: 136px; }
/* Enterprise/Personal vira ícone: o rótulo por extenso não cabe na barra estreita */
html.sidebar-recolhida .sidebar-workspace-switch .segmented-opt { padding: 0 4px; }
html.sidebar-recolhida .workspace-switch-icone { display: block; }
html.sidebar-recolhida .workspace-switch-label { display: none; }

@media (max-width: 980px) {
  .container { padding: 24px 16px 48px; }
}

.page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 22px;
  gap: 16px;
  flex-wrap: wrap;
}
.page-header h1 { margin: 0; }
.page-header .subtitle { color: var(--text-muted); font-size: var(--fs-destaque); margin-top: 4px; }

h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: var(--text);
}
h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  margin: 0 0 14px;
  color: var(--text);
}
h2.secao-espacada { margin-top: 28px; }

/* seção que expande/recolhe — tanto um <h2> solto dentro de um form maior
   quanto o cabeçalho de um .card inteiro (Puxar de plano padrão etc.) */
.secao-colapsavel-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: none; padding: 0; margin: 0 0 14px; cursor: pointer;
  font-family: var(--font-display); font-size: 16px; font-weight: 500; color: var(--text);
  text-align: left;
}
.secao-colapsavel-toggle:hover { color: var(--primary); }
.secao-colapsavel-chevron { margin-left: auto; font-size: 15px; color: var(--text-muted); transition: transform 0.15s; }
.secao-colapsavel.aberto .secao-colapsavel-chevron { transform: rotate(90deg); }
.secao-colapsavel-corpo { display: none; }
.secao-colapsavel.aberto .secao-colapsavel-corpo { display: block; }
/* Borda visível mesmo fechado — dá mais hierarquia pra seção, sem o peso
   inteiro de um .card (sem sombra, padding mais enxuto). */
.secao-colapsavel {
  border: var(--borda-campo); border-radius: var(--radius);
  padding: 16px 20px; margin-bottom: 20px;
}
.secao-colapsavel.secao-espacada { margin-top: 28px; }

/* cartão que expande/recolhe (<details class="card card-recolhivel">, painel do app da paciente) */
.card-recolhivel > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.card-recolhivel > summary::-webkit-details-marker { display: none; }
.card-recolhivel > summary h2 { margin: 0; }
.card-recolhivel > summary::after { content: "›"; margin-left: auto; font-size: 18px; color: var(--text-muted); transition: transform 0.15s; }
.card-recolhivel[open] > summary::after { transform: rotate(90deg); }
.card-recolhivel[open] > summary { margin-bottom: 14px; }

/* Mesmo preenchimento (sem borda) do bloco de "Valor tributável" — pra uma
   seção fixa (sem toggle) que só precisa se destacar do resto do
   formulário com um fundo, não com contorno. */
.secao-preenchida {
  position: relative; isolation: isolate;
  padding: 14px 18px; border: 0; border-radius: var(--radius); margin-bottom: 20px;
}
.secao-preenchida::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(var(--card-fill-rgb), var(--card-fill-opacity, 0%));
  backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
}

/* Borda dos cards com pouco mais da metade da força escolhida na Aparência:
   o aro de luz (bloco "Vidro líquido" no fim do arquivo) faz o contorno. */
/* Efeito "vidro líquido" (fundo translúcido + blur) em todo card do site —
   flutuante por cima do --bg creme em vez de um bloco opaco chapado. */
/* O vidro (fundo + blur + blend) mora num ::before separado, atrás do
   conteúdo — assim mix-blend-mode/opacidade só afetam o fundo, nunca o
   texto por cima (que continua com blend normal e cor 100% opaca). */
.card {
  position: relative;
  isolation: isolate;
  border: var(--card-border-width, 1px) solid rgba(var(--card-border-rgb), calc(var(--card-border-opacity, 55%) * 0.55));
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.15s ease;
  color: var(--card-fill-text, var(--text));
}
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(var(--card-fill-rgb), var(--card-fill-opacity, 0%));
  backdrop-filter: blur(var(--glass-blur, 16px)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(160%);
}
.card:hover { box-shadow: var(--shadow-card-hover); }

/* Mesmo texto automaticamente legível (preto/branco, calculado em
   ConfiguracaoAparencia._cor_texto_sobre) nos outros containers que usam o
   mesmo preenchimento de "cards comuns". */
.kanban-card, .formset-row, .subitem-linha, .condicao-outro-card,
.kit-itens-cabecalho, .plano-totais, .resumo-grupo, .kanban-col, .secao-preenchida {
  color: var(--card-fill-text, var(--text));
}
/* Texto secundário (.muted) dentro desses containers — mesma cor
   automática do texto principal, só que suavizada com opacidade (igual já
   era feito no card de destaque). Sem isso ele ficava preso na cor cinza
   fixa de --text-muted, que já foi vista sumindo em cima de fundo escuro. */
.card .muted, .stat-card .muted, .kanban-card .muted, .formset-row .muted,
.subitem-linha .muted, .condicao-outro-card .muted, .kit-itens-cabecalho .muted,
.plano-totais .muted, .resumo-grupo .muted, .kanban-col .muted, .secao-preenchida .muted {
  color: var(--card-fill-text, var(--text-muted));
  opacity: 0.65;
}

/* backdrop-filter imprime de forma inconsistente entre navegadores — força
   opaco na hora de imprimir/exportar pra PDF via Ctrl+P. */
@media print {
  .card, .stat-card, .kanban-card, .formset-row, .subitem-linha,
  .condicao-outro-card, .kit-itens-cabecalho, .plano-totais, .resumo-grupo, .kanban-col, .secao-preenchida {
    background: var(--surface) !important;
    box-shadow: none !important;
    border-color: var(--border) !important;
  }
  .card::before, .stat-card::before, .kanban-card::before, .formset-row::before, .subitem-linha::before,
  .condicao-outro-card::before, .kit-itens-cabecalho::before, .plano-totais::before, .resumo-grupo::before,
  .kanban-col::before, .secao-preenchida::before {
    display: none !important;
  }
}

/* ---------- Dialog (janelinha) ---------- */

dialog.dialog {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  max-width: 420px;
  width: calc(100% - 32px);
  background: var(--surface);
  color: var(--text);
}
dialog.dialog::backdrop { background: rgba(var(--text-rgb), 0.35); }
dialog.dialog h3 { margin: 0 0 4px; }
/* Erro dentro da caixinha. NÃO usar ul.errorlist aqui: o form_erros.js trata
   qualquer ul.errorlist com filho como erro de validação da página e abre o
   aviso "Tem campo com erro" — mesmo com a caixinha fechada. */
.erro-dialogo { margin: 8px 0 0; color: var(--danger); font-size: var(--fs-base); font-weight: 500; }
/* Campo dentro da caixa branca: o contorno branco padrão (feito pro fundo
   de vidro) some aqui — ex: caixinha de baixa com valor pago. */
dialog.dialog input[type="text"], dialog.dialog input[type="number"], dialog.dialog input[type="date"] {
  border-color: var(--border); background: var(--surface-muted);
}

/* ---------- Tables ---------- */

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
/* divisórias das linhas na mesma cor/opacidade da borda do card */
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid rgba(var(--card-border-rgb), var(--card-border-opacity, 55%)); }
th {
  color: var(--primary); /* mesma cor do nome dos produtos (links das células) */
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  vertical-align: top;
}
tbody tr:last-child td { border-bottom: none; }
td a { color: var(--primary); font-weight: 500; text-decoration: none; }
td a:hover { text-decoration: underline; }

.nowrap, td.nowrap, th.nowrap { white-space: nowrap; }
th.center, td.center { text-align: center; }
td.col-acoes, th.col-acoes {
  text-align: center; white-space: nowrap;
  display: table-cell; width: 1%;
}
td.col-acoes .icon-btn + .icon-btn, td.col-acoes form { margin-left: 2px; }
.row-drag-handle {
  display: inline-block; margin-right: 6px; color: var(--text-muted); font-size: 14px;
  line-height: 1; vertical-align: middle; user-select: none; cursor: grab;
}
.row-drag-handle:active { cursor: grabbing; }
tr.arrastando-linha, .kit-item-linha.arrastando-linha, .kit-itens-card.arrastando-linha, .item-plano-row.arrastando-linha { opacity: 0.4; }
/* Só a cor do texto — nunca o fundo/preenchimento — pra registro inativo
   continuar legível (badges/botões mantêm sua própria cor, mais específica). */
tr.linha-inativa > td { color: var(--text-muted); }

/* Tabela de Despesas — muita linha (parcelada virou uma linha por parcela),
   fonte e entrelinha mais compactas que o padrão do site pra não esticar a
   página; tamanho pareado com --font-tag, o mesmo token que os badges já
   usam, em vez de um valor novo solto. */
table[data-cols-key="despesas"] th,
table[data-cols-key="despesas"] td { font-size: var(--font-tag); padding: 5px 10px; }

/* Cada seção de "Agrupar por" vira um card expandir/recolher — mesmo
   vidro/sombra de .card, só com o padding concentrado no <summary>
   (cabeçalho clicável: título à esquerda, subtotal à direita) pra a
   tabela dentro poder ocupar a largura toda sem respiro extra. */
.despesa-grupo-card {
  position: relative;
  isolation: isolate;
  border: var(--card-border-width, 1px) solid rgba(var(--card-border-rgb), calc(var(--card-border-opacity, 55%) * 0.55));
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.despesa-grupo-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(var(--card-fill-rgb), var(--card-fill-opacity, 0%));
  backdrop-filter: blur(var(--glass-blur, 16px)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(160%);
}
.despesa-grupo-card summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; cursor: pointer; list-style: none;
  color: var(--card-fill-text, var(--text));
}
.despesa-grupo-card summary::-webkit-details-marker { display: none; }
.despesa-grupo-card summary::before {
  content: "›"; display: inline-block; margin-right: 10px;
  transition: transform 0.15s ease; font-size: 16px; color: var(--text-soft);
}
.despesa-grupo-card[open] summary::before { transform: rotate(90deg); }
.despesa-grupo-titulo { font-weight: 600; margin-right: auto; }
.despesa-grupo-valor { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.despesa-grupo-card[open] summary { border-bottom: 1px solid var(--border); }

/* Lista de Kits — linhas divisórias horizontais entre as linhas, branco
   sólido (em vez do bege padrão de --border). */
table[data-cols-key="kits"] th,
table[data-cols-key="kits"] td {
  border-bottom: 1px solid #fff;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(var(--btn-fill-rgb), var(--btn-fill-opacity, 100%));
  color: var(--btn-fill-text, var(--text-claro));
  text-decoration: none;
  font-size: 9.5px;
  font-weight: 500;
  border: var(--btn-border-width, 1.5px) solid rgba(var(--btn-border-rgb), var(--btn-border-opacity, 40%));
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
  line-height: 1.2;
}
.btn:hover { background: rgba(var(--btn-fill-rgb), var(--btn-fill-opacity, 100%)); filter: brightness(0.92); }
.btn:active { transform: scale(0.98); }
.btn.secondary { background: transparent; color: var(--primary); border: var(--btn-outline-border-width, 1.5px) solid rgba(var(--btn-outline-border-rgb), var(--btn-outline-border-opacity, 50%)); }
.btn.secondary:hover { background: rgba(255, 255, 255, 0.2); border-color: var(--primary); }
.btn.warn { background: var(--warn); color: var(--text-claro); }
.btn.danger { background: transparent; color: var(--danger); border: 1.5px solid rgba(var(--danger-rgb), 0.3); }
.btn.danger:hover { background: var(--danger-bg); }
.btn.small { padding: 5px 12px; font-size: var(--font-tag); }
/* Mesma altura do controlador segmentado (compacto) que fica ao lado. */
.btn-compacto { padding: 1.55px 16px; }
/* Aqui o controlador não fica "ao lado", fica na linha de cima do card —
   sem o contexto mais compacto de .item-plano-row (padding 1.2px), então
   precisa de um pouco mais de padding vertical pra bater a mesma altura. */
#itens-composicao-container + .btn-compacto { padding: 3.55px 16px; margin-bottom: 18px; }

/* ---------- Badges ---------- */

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--font-tag);
  font-weight: var(--peso-tag);
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: transparent;
  border: 1px solid transparent;
  line-height: 1.5;
}
.badge.ok { color: #fff; background: var(--primary); border-color: var(--primary); } /* verde da paleta (o mesmo dos botões), não o --success */
.badge.warn { color: #fff; background: var(--warn); border-color: var(--warn); }
.badge.danger { color: #fff; background: var(--danger); border-color: var(--danger); }
span.badge.muted { color: var(--text-muted); border-color: var(--border); font-size: var(--font-tag); }
/* etiqueta dentro de título: centro na altura do texto, não na linha de base (26/10) */
:is(h1, h2, h3) .badge { vertical-align: middle; position: relative; top: -1px; }

.tags-wrap { display: flex; flex-wrap: wrap; gap: 5px; }

.kit-resumo-itens { display: flex; flex-direction: column; gap: 1px; font-size: var(--font-tag); }
.kit-resumo-item-titulo {
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
  font-size: var(--fs-pequeno); color: var(--text-muted); margin-top: 8px;
}
.kit-resumo-item-titulo:first-child { margin-top: 0; }
.kit-resumo-categoria { font-weight: 600; color: var(--text); margin-top: 4px; }
.kit-resumo-categoria:first-child { margin-top: 0; }
.kit-resumo-linha { color: var(--text-muted); }
.kit-resumo-insumo { padding-left: 14px; }
.kit-resumo-seta { display: inline-block; margin-right: 4px; color: var(--text-muted); opacity: 0.7; }

/* ---------- Status: lista suspensa (troca rápida) ---------- */

.status-select {
  border: none;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: var(--font-tag);
  font-weight: var(--peso-tag);
  letter-spacing: 0.02em;
  font-family: inherit;
  white-space: nowrap;
  max-width: 100%;
  cursor: pointer;
}
td .status-select { min-width: 118px; }
.status-select.ok { background: var(--success-bg); color: var(--success); }
.status-select.warn { background: var(--warn-bg); color: var(--warn); }
.status-select.danger { background: var(--danger-bg); color: var(--danger); }
select.status-select.muted { background: var(--cream-deep); color: var(--text-muted); font-size: var(--font-tag); }

/* ---------- Forms ---------- */

form p { margin: 0 0 16px; }
label {
  display: block;
  font-size: var(--fs-pequeno);
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
input, select, textarea, .rselect-trigger {
  width: 100%;
  padding: 10px 12px;
  border: var(--borda-campo);
  border-radius: var(--radius-sm);
  font-size: var(--fs-pequeno);
  font-family: inherit;
  background: transparent;
  color: var(--text);
  transition: border-color 0.15s;
}
/* Sem isso, o placeholder fica quase do mesmo jeito que o texto digitado de
   verdade — menor e num cinza mais claro deixa claro, de cara, que aquilo
   ainda não foi preenchido. */
input::placeholder, textarea::placeholder {
  color: var(--text-soft);
  font-size: var(--fs-pequeno);
  opacity: 1;
}
select:not(.status-select), .rselect-trigger {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23726f60'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
input:focus, select:focus, textarea:focus, .rselect-trigger:focus {
  outline: none;
  border-color: var(--primary);
}
/* Seleção de texto (campos e página): verde da paleta com texto claro. Sem
   isso valia o realce do sistema, que no Mac (cor de destaque grafite, ou
   janela sem foco) fica um cinza quase da cor do campo — o texto selecionado
   "sumia" (23/10). */
::selection { background: var(--primary); color: var(--text-claro); }
::-moz-selection { background: var(--primary); color: var(--text-claro); }

/* ---------- Select customizado (lista suspensa rica) ----------
   Todo <select> do sistema (exceto .status-select, que já tem visual
   próprio de etiqueta colorida) ganha um "trigger" que imita o select
   nativo fechado (mesmo visual acima) + um painel próprio com fundo vidro
   líquido, mais espaçamento entre itens, e — quando a opção é um
   Produto/Associação/Procedimento — duas linhas (nome+etiqueta e
   descrição). O <select> de verdade continua no DOM, funcional (é ele que
   vai no POST e que todo o JS existente lê/edita), só visualmente
   escondido — nunca com display:none, porque isso zeraria offsetParent e
   quebraria a detecção de "aba inativa" usada noutro lugar (ver
   initDescricaoAlvo em selects.js). Ver initSelectRico em selects.js. */
.rselect { position: relative; width: 100%; }
.rselect-select-real {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.rselect-trigger {
  text-align: left; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rselect-trigger:disabled { cursor: not-allowed; opacity: 0.6; }
.rselect.aberto .rselect-trigger { border-color: var(--primary); }
.rselect-painel {
  /* fixed (não absolute) de propósito — um <select> pode estar dentro de
     um .card ou outro container com overflow:hidden (cantos arredondados
     do vidro líquido), que cortaria um painel absolute que ultrapassasse a
     borda. position:fixed escapa disso; left/top/width vêm inline, calculados
     em cima do trigger na hora de abrir (ver posicionarPainel em selects.js).
     O blur mora só aqui, no quadro — SEM overflow/rolagem neste elemento.
     A rolagem é da .rselect-painel-lista (filha, sem blur próprio); a lista
     mistura backdrop-filter com overflow:auto no mesmo elemento fazia o
     vidro sumir ao abrir/rolar em alguns navegadores. */
  display: none;
  position: fixed; z-index: 250;
  isolation: isolate;
  border: var(--borda-campo);
  border-radius: var(--radius);
  box-shadow: var(--shadow-painel);
  padding: 8px;
}
/* Vidro ESCURO de propósito (pedido explícito), em DUAS camadas — não uma
   só. backdrop-filter (o blur) e mix-blend-mode (o escurecimento) no MESMO
   pseudo-elemento não é confiável em todo navegador (o blur simplesmente
   parava de aparecer, mix-blend-mode força seu próprio contexto de
   composição e alguns motores derrubam o backdrop-filter junto). Por isso:
   ::before só borra (sem cor, sem blend — só backdrop-filter), ::after só
   escurece por cima do resultado já borrado (mix-blend-mode: multiply,
   sem backdrop-filter próprio). Texto por cima continua em blend normal. */
.rselect-painel::before {
  content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit;
  backdrop-filter: blur(6px) saturate(160%);
  -webkit-backdrop-filter: blur(6px) saturate(160%);
}
.rselect-painel::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(var(--teal-deep-rgb), 0.58);
  mix-blend-mode: multiply;
}
.rselect-painel-lista { max-height: 320px; overflow-y: auto; }
/* campo de pesquisa no alto do painel (select com data-pesquisavel) */
.rselect-busca {
  width: 100%; box-sizing: border-box; margin: 0 0 6px; padding: 8px 10px; border-radius: var(--radius-sm);
  border: 1px solid rgba(var(--text-claro-rgb), 0.28); background: rgba(var(--text-claro-rgb), 0.1);
  color: var(--text-claro); font-size: var(--fs-pequeno);
}
.rselect-busca::placeholder { color: rgba(var(--text-claro-rgb), 0.6); }
.rselect-busca:focus { outline: none; border-color: rgba(var(--text-claro-rgb), 0.6); }
.rselect-opcao[hidden], .rselect-busca[hidden] { display: none; }
/* Não ".rselect.aberto .rselect-painel" (descendente) — o painel migra pra
   filho direto do body enquanto aberto (ver moverPainelParaBody em
   selects.js), então essa relação de DOM deixa de existir nesse momento. */
.rselect-painel.aberto { display: block; }
.rselect-opcao {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px; margin: 2px 0; border-radius: var(--radius-sm);
  cursor: pointer; color: var(--text-claro);
}
.rselect-opcao:hover, .rselect-opcao.destacada { background: rgba(var(--text-claro-rgb), 0.12); }
.rselect-opcao.selecionada .rselect-opcao-texto,
.rselect-opcao.selecionada .rselect-opcao-linha1 { font-weight: 600; }
.rselect-opcao-texto { font-size: 10px; }
.rselect-opcao-linha1 {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  text-transform: uppercase; font-size: 10px; letter-spacing: 0.02em;
}
.rselect-opcao-linha1 .badge { text-transform: none; }
.rselect-opcao-separador { color: rgba(var(--text-claro-rgb), 0.45); }
.rselect-opcao-linha2 {
  font-size: 10px; color: rgba(var(--text-claro-rgb), 0.7); font-style: italic;
  white-space: pre-line; word-break: break-word; line-height: 1.55;
}
/* fornecedor: mesmo preenchimento translúcido das vias, mantendo a borda na cor dele */
.rselect-opcao-linha1 .badge-fornecedor { background: rgba(var(--text-claro-rgb), 0.16); color: var(--text-claro); }
.rselect-opcao-linha1 .badge-via {
  background: rgba(var(--text-claro-rgb), 0.16); border-color: rgba(var(--text-claro-rgb), 0.35); color: var(--text-claro);
  font-size: 9px; padding: 1px 6px; letter-spacing: 0.04em;
}
.rselect-opcao-vazia .rselect-opcao-texto { color: rgba(var(--text-claro-rgb), 0.45); }
.rselect-opcao-acao .rselect-opcao-texto { color: var(--text-claro); font-weight: 600; }
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  width: 16px; height: 16px; padding: 0; flex-shrink: 0;
  border: 1.5px solid var(--success); border-radius: 4px; background: transparent;
  cursor: pointer; position: relative; vertical-align: middle;
}
input[type="checkbox"]:checked { background: var(--success); border-color: var(--success); }
input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 4px; top: 0px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
input[readonly], input[disabled] { background: var(--surface-muted); color: var(--text-muted); cursor: default; }

.helptext, form p > span.helptext {
  display: block;
  font-size: 11px;
  font-style: italic;
  font-weight: 400;
  color: var(--text-soft);
  text-transform: none;
  letter-spacing: normal;
  margin-top: 4px;
}
ul.errorlist {
  list-style: none; margin: 4px 0 0; padding: 0;
  color: var(--danger); font-size: var(--fs-base); font-weight: 500;
}
/* Realce temporário do campo/linha com erro ao recarregar (ver form_erros.js) */
.campo-com-erro-destaque {
  outline: 2px solid var(--danger); outline-offset: 3px; border-radius: var(--radius-sm);
  transition: outline-color 3s ease;
}

/* ---------- Messages ---------- */

.messages { list-style: none; padding: 0; margin: 0 0 20px; }
.messages li {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  font-size: var(--fs-base);
  font-weight: 500;
}
.messages li.success { background: var(--success-bg); color: var(--success); }
.messages li.info { background: color-mix(in srgb, var(--primary) 10%, #fff); color: var(--primary); }
.messages li.warning { background: var(--warn-bg); color: var(--warn); }
.messages li.error { background: var(--danger-bg); color: var(--danger); }

/* Aviso de rascunho recuperável (autosave local, ver orcamento_autosave.js) */
.autosave-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--warn-bg); color: var(--warn); border-radius: var(--radius-sm);
  padding: 12px 16px; margin-bottom: 16px; font-size: var(--fs-base); font-weight: 500;
}
.autosave-banner .btn.small { font-size: var(--font-tag); padding: 6px 12px; }

/* ---------- Misc ---------- */

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  /* 21,4 px de diâmetro (o ícone acompanha); o .primary preenchido é maior */
  width: 21.4px; height: 21.4px; border-radius: 999px;
  border: var(--btn-outline-border-width, 1.5px) solid rgba(var(--btn-outline-border-rgb), var(--btn-outline-border-opacity, 50%)); background: transparent;
  color: var(--text-muted); font-size: 10px; font-weight: 700; cursor: pointer;
  text-decoration: none; line-height: 1;
}
.icon-btn:hover { background: rgba(var(--btn-outline-border-rgb), 0.2); border-color: var(--primary); color: var(--primary); }
.icon-btn.ok { color: var(--success); border-color: rgba(var(--success-rgb), 0.35); }
.icon-btn.ok:hover { background: var(--success-bg); }
.icon-btn.danger { color: var(--danger); border-color: rgba(var(--danger-rgb), 0.3); }
.icon-btn.danger:hover { background: var(--danger-bg); }
.icon-btn.primary {
  background: rgba(var(--btn-fill-rgb), var(--btn-fill-opacity, 100%));
  border-color: rgba(var(--btn-border-rgb), var(--btn-border-opacity, 40%)); color: var(--btn-fill-text, var(--text-claro));
  border-width: var(--btn-border-width, 1.5px);
  width: 36px; height: 36px; font-size: 14px;
}
.icon-btn.primary:hover { filter: brightness(0.92); border-color: rgba(var(--btn-border-rgb), var(--btn-border-opacity, 40%)); }

/* ---------- Agenda: filtro por paciente ---------- */

.filtro-paciente { position: relative; }
.filtro-paciente-toggle { position: relative; }
.filtro-paciente-toggle .filtro-paciente-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--primary); color: #fff; border-radius: 999px;
  font-size: 9.5px; font-weight: 600; min-width: 15px; height: 15px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.filtro-paciente.ativo .filtro-paciente-toggle { border-color: var(--primary); color: var(--primary); }
.filtro-paciente-painel {
  display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 30;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); min-width: 240px; padding: 10px;
}
.filtro-paciente.aberto .filtro-paciente-painel { display: block; }
.filtro-paciente-lista { max-height: 260px; overflow-y: auto; margin-bottom: 8px; }
.filtro-paciente-lista label {
  display: flex; align-items: center; gap: 8px; text-transform: none;
  font-weight: 400; font-size: var(--fs-base); color: var(--text); padding: 5px 4px;
  margin-bottom: 0; border-radius: var(--radius-sm); cursor: pointer;
}
.filtro-paciente-lista label:hover { background: var(--surface-muted); }
.filtro-paciente-lista input[type="checkbox"] { margin: 0; }
.filtro-paciente-acoes { display: flex; gap: 8px; border-top: 1px solid var(--border); padding-top: 8px; }

/* ---------- Dropdown de múltipla escolha (interesse etc.) ---------- */

.dropdown-multiselect { position: relative; }
.dropdown-multiselect-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 10px 12px; border: var(--borda-campo); border-radius: var(--radius-sm);
  background: transparent; color: var(--text); font-size: 10px; font-family: inherit;
  cursor: pointer; text-align: left;
}
.dropdown-multiselect-toggle .chevron { color: var(--text-soft); font-size: 11px; }
.dropdown-multiselect-painel {
  /* fixed (não absolute) de propósito — mesmo motivo do .rselect-painel:
     um container ancestral com overflow:hidden (cantos do vidro líquido)
     cortava o painel quando ele ultrapassava a borda, e o z-index baixo
     (30) perdia pra qualquer coisa mais nova por cima. left/top/width vêm
     inline, calculados em cima do toggle na hora de abrir (ver
     posicionarPainelMultiselect em selects.js). */
  display: none; position: fixed; z-index: 250;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 8px;
}
/* Não ".dropdown-multiselect.aberto .dropdown-multiselect-painel"
   (descendente) — mesmo motivo do .rselect-painel.aberto acima: o painel
   migra pra filho direto do body enquanto aberto. */
.dropdown-multiselect-painel.aberto { display: block; }
.dropdown-multiselect-lista { max-height: 220px; overflow-y: auto; margin-bottom: 6px; }
.dropdown-multiselect-lista > div { margin: 0; }
.dropdown-multiselect-lista label {
  display: flex; align-items: center; gap: 8px; text-transform: none;
  font-weight: 400; font-size: var(--fs-base); color: var(--text); padding: 5px 6px;
  margin-bottom: 0; border-radius: var(--radius-sm); cursor: pointer;
}
.dropdown-multiselect-lista label:hover { background: var(--surface-muted); }
.dropdown-multiselect-lista input[type="checkbox"] { margin: 0; }
.dropdown-multiselect-criar {
  display: block; width: 100%; text-align: left; padding: 7px 6px;
  background: none; border: none; border-top: 1px solid var(--border);
  color: var(--primary); font-size: var(--fs-base); font-weight: 500; cursor: pointer; font-family: inherit;
}
.dropdown-multiselect-criar:hover { background: var(--surface-muted); }

/* Ícone "i" pra texto explicativo que, em vez de ocupar espaço fixo no
   layout (como .helptext), só aparece ao passar o mouse ou clicar — pensado
   pra virar o padrão do sistema pra esse tipo de texto. */
.info-tip-wrap { position: relative; display: inline-flex; vertical-align: middle; }
/* "i" ao lado de um rótulo de opção (caixinha + texto): a linha vira flex e o
   "i" fica no centro do texto — a margem de baixo do rótulo o empurrava pra baixo (27/10) */
:is(p, div, li):has(> .rotulo-opcao + .info-tip-wrap) { display: flex; align-items: center; gap: 2px; }
/* qualquer rótulo com "i" logo depois: sem a margem de baixo, que deslocava o "i" */
label:has(+ .info-tip-wrap) { margin-bottom: 0; }
.info-tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; border: none; padding: 0;
  background: var(--cream-deep); color: var(--text-muted);
  font-size: 10px; font-weight: 700; font-style: normal; font-family: inherit;
  cursor: pointer; margin-left: 4px; vertical-align: middle;
}
.info-tip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.info-tip-bubble {
  display: none; position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  z-index: 30; width: max-content; max-width: 240px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding: 8px 10px;
  font-size: var(--fs-base); font-weight: 400; font-style: normal; text-transform: none;
  color: var(--text); text-align: left; line-height: 1.4;
}
.info-tip-wrap:hover .info-tip-bubble,
.info-tip-wrap.aberto .info-tip-bubble,
.info-tip:focus-visible + .info-tip-bubble { display: block; }

/* Variante menor do "i" — usada nas opções segmentadas do item de
   orçamento (Tributação/Cortesia/No show/Delimitar área), onde o botão
   fica ENTRE o nome e o controlador, não depois dele. */
.info-tip.micro { width: 12px; height: 12px; font-size: 8px; margin-left: 0; }

/* Linha de opções segmentadas do item de orçamento (Tributação, Cortesia,
   No show, Delimitar área) — sempre nome → "i" → controlador, nessa ordem. */
.item-linha-alca { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.item-opcoes-linha { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.item-opcao-segmentada {
  display: flex; align-items: center; gap: 8px;
  border: var(--borda-campo); border-radius: var(--radius-sm); padding: 6px 10px;
}
.item-opcao-segmentada > label { text-transform: none; font-weight: 500; color: var(--text); font-size: 10px; }
/* nota fiscal Isenta: a Tributação dos itens fica congelada em "Não" (orcamento_itens.js) */
[data-nf-isenta] .item-opcao-segmentada:has(input[name$="-tributado"]) .segmented { opacity: 0.55; cursor: not-allowed; }
[data-nf-isenta] .item-opcao-segmentada:has(input[name$="-tributado"]) .segmented * { cursor: not-allowed; }
.item-opcao-segmentada { position: relative; }
.tributacao-aviso-isento {
  position: absolute; z-index: 5; left: 0; top: calc(100% + 6px); width: max-content; max-width: 260px;
  padding: 8px 10px; border-radius: var(--radius-sm); background: var(--text); color: var(--bg, #fff);
  font-size: 10px; line-height: 1.4; box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

.zero { color: var(--text-soft); opacity: 0.45; }

.money-wrap { position: relative; }
.money-wrap .money-prefix {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: 14px; font-weight: 600; pointer-events: none;
}
.money-wrap input[data-money] { padding-left: 34px; text-align: right; }
/* Campo de valor que pode virar percentual (ver tabela_preco_form.js) — em
   vez de um widget diferente por tipo, reaproveita o mesmo .money-wrap e só
   troca o prefixo "R$" por um sufixo "%". */
.money-wrap .money-suffix {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: 14px; font-weight: 600; pointer-events: none; display: none;
}
.money-wrap.percentual .money-prefix { display: none; }
.money-wrap.percentual .money-suffix { display: block; }
.money-wrap.percentual input[data-money] { padding-left: 12px; padding-right: 30px; }

.back-link {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--text-muted); text-decoration: none; font-size: var(--fs-base); font-weight: 600;
  margin-bottom: 14px;
}
.back-link:hover { color: var(--primary); }

.muted { color: var(--text-muted); font-size: var(--fs-base); }
.row { display: flex; gap: 10px; align-items: center; }

.cor-amostra { display: inline-block; width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--border); }

/* ---------- Paleta de cores (Procedimento) ---------- */
.campo-cor { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; margin: 18px 0; }
.campo-cor label { margin-bottom: 0; white-space: nowrap; }
.paleta-cores-swatches { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.paleta-cores-swatch {
  flex: none; width: 21px; height: 21px; border-radius: 5px; border: 2px solid transparent;
  cursor: pointer; padding: 0;
}
.paleta-cores-swatch.selecionado { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--text); }
.paleta-cores-custom {
  flex: none; position: relative; width: 21px; height: 21px; border-radius: 5px;
  border: 1.5px dashed var(--border); background: var(--surface-muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden;
}
.paleta-cores-input-color {
  position: absolute; inset: 0; width: 100%; height: 100%; border: none; padding: 0;
  cursor: pointer; opacity: 0;
}
.paleta-cores-custom-icone {
  position: relative; pointer-events: none; font-size: 13px; line-height: 1;
  font-weight: 600; color: var(--text-muted);
}

/* ---------- Controlador segmentado (Entrada/Saída, Produto/Kit/Procedimento...) ---------- */

.segmented {
  position: relative;
  display: inline-flex; align-items: stretch; background: transparent; border-radius: 999px;
  border: var(--segmented-border-width, 1.5px) solid rgba(var(--segmented-border-rgb), var(--segmented-border-opacity, 50%));
  padding: 3px; gap: 2px; margin-bottom: 16px;
}
.segmented.bloco { display: flex; }
.segmented.bloco .segmented-opt { flex: 1; }
/* Altura/fonte únicas pra todo controlador segmentado do sistema, do maior
   ao menor contexto — mesmo tamanho do seletor de tipo (Produto/Kit/
   Procedimento) no item do orçamento, que é a referência. Cada opção estica
   pra altura cheia da trilha (align-items:stretch acima) e centraliza seu
   próprio texto nos dois eixos — assim o contorno de foco, que envolve a
   caixa da opção, sai com a mesma altura da trilha e já centralizado. */
.segmented-opt {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  padding: 2.4px 7.2px; margin: 0; border-radius: 999px;
  font-size: 9px; font-weight: 500; color: var(--text-muted); cursor: pointer;
  text-align: center; flex: none; white-space: nowrap; text-transform: none;
  transition: color 0.2s ease;
}
.segmented-opt input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.segmented-opt:has(input:checked) {
  background: rgba(var(--segmented-fill-rgb), var(--segmented-fill-opacity, 60%));
  backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
  border: var(--segmented-border-width, 1.5px) solid rgba(var(--segmented-border-rgb), var(--segmented-border-opacity, 50%));
  color: var(--segmented-fill-text, var(--text)); box-shadow: var(--shadow-sm);
}
.segmented-opt:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Fundo que desliza até a opção ativada (ver segmented.js) — um elemento só,
   com posição/tamanho medidos em JS a partir da opção marcada, em vez do
   preenchimento nascer/sumir instantâneo em cada opção. Quando o JS entra
   em cena a opção marcada fica com fundo transparente (some a duplicação),
   sobra só a cor do texto trocando; sem JS, a regra acima continua valendo
   sozinha — a troca só perde a animação, não o estado visual. */
.segmented-thumb {
  position: absolute; top: 0; left: 0; border-radius: 999px; z-index: 0; pointer-events: none;
  background: rgba(var(--segmented-fill-rgb), var(--segmented-fill-opacity, 60%));
  backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
  border: var(--segmented-border-width, 1.5px) solid rgba(var(--segmented-border-rgb), var(--segmented-border-opacity, 50%));
  box-shadow: var(--shadow-sm); opacity: 0;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.15s ease;
}
.segmented.segmented-tem-thumb .segmented-opt:has(input:checked) {
  background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-color: transparent; box-shadow: none;
}
/* Sim/Não em todo o sistema (segmented.js marca thumb-sim/thumb-nao):
   Sim = verde (--success), Não = terracota (--danger); texto claro nos dois */
.segmented-thumb.thumb-sim { background: var(--success); border-color: var(--success); }
.segmented-thumb.thumb-nao { background: var(--danger); border-color: var(--danger); }
.segmented.segmented-tem-thumb .segmented-opt.opt-sim:has(input:checked), .segmented.seg-simnao .segmented-opt.opt-sim, .segmented .segmented-opt.opt-sim { color: var(--text-claro); font-weight: 600; }
.segmented.segmented-tem-thumb .segmented-opt.opt-nao:has(input:checked), .segmented.seg-simnao .segmented-opt.opt-nao, .segmented .segmented-opt.opt-nao { color: var(--text-claro); font-weight: 600; }

.segmented.compacto { padding: 2px; gap: 1px; margin-bottom: 10px; }

.segmented.micro { padding: 1px; gap: 1px; margin-bottom: 0; background: transparent; border: var(--segmented-border-width, 1.5px) solid rgba(var(--segmented-border-rgb), var(--segmented-border-opacity, 50%)); }

/* ---------- Detalhamento manual de pagamento "Outro" (linha a linha) ---------- */

.condicao-outro-card {
  position: relative; isolation: isolate;
  margin: 4px 0 14px; padding: 10px 12px; border: var(--card-border-width, 1px) dashed rgba(var(--card-border-rgb), var(--card-border-opacity, 55%));
  border-radius: var(--radius);
}
.condicao-outro-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(var(--card-fill-rgb), var(--card-fill-opacity, 0%));
  backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
}
.condicao-outro-linha {
  display: grid; grid-template-columns: 1fr 1fr 1.2fr auto; gap: 8px; align-items: center;
  margin-bottom: 6px;
}
.condicao-outro-linha input, .condicao-outro-linha select { margin: 0; }
.condicao-outro-add { font-size: var(--font-tag); padding: 5px 12px; }
.condicao-outro-aviso { margin: 6px 0 0; font-size: var(--fs-base); color: var(--success, var(--text-muted)); }
.condicao-outro-aviso.condicao-outro-aviso-erro { color: var(--danger); }
@media (max-width: 640px) {
  .condicao-outro-linha { grid-template-columns: 1fr 1fr; }
  .condicao-outro-linha .condicao-outro-remover { grid-column: 1 / -1; justify-self: end; }
}

/* ---------- Ativos do kit (produto tipo Kit) — quantidade + nome, linhas dinâmicas ---------- */
.campo-ativos-kit { margin-bottom: 16px; }
.ativo-kit-linhas { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.ativo-kit-linha { display: grid; grid-template-columns: 80px 1fr auto; gap: 8px; align-items: center; }
.ativo-kit-linha input { margin: 0; }
.ativo-kit-remover { line-height: 1; }
.campo-ativos-kit .helptext { display: block; margin-top: 6px; }

/* ---------- Campo de valor que pode ser R$ ou % (ex: desconto) ---------- */

.money-percent-wrap { position: relative; display: block; }
.money-percent-wrap .segmented.micro {
  position: absolute; left: 4px; top: 50%; transform: translateY(-50%); z-index: 1;
}
.money-percent-wrap input.money-percent-input { padding-left: 64px; text-align: right; }

/* ---------- Lista de caixas de seleção (permite marcar uma ou mais opções) ---------- */

.checkbox-lista { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 16px; }
.checkbox-opt {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-base); font-weight: 500; color: var(--text); cursor: pointer;
}
.checkbox-lista input[type="checkbox"] { margin: 0; }

/* ---------- Confirmação de recebimento (lançamento de lotes) ---------- */

.recebimento-item-card { margin-bottom: 14px; }
.recebimento-item-cabecalho { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.recebimento-item-cabecalho h3 { font-family: var(--font-display); font-size: 15px; font-weight: 500; margin: 0; }
.recebimento-lote-linha { position: relative; padding: 10px 40px 10px 0; border-top: 1px solid var(--border); }
.recebimento-lote-linha:first-child { border-top: none; padding-top: 0; }
.recebimento-remover-linha { position: absolute; top: 10px; right: 0; }
.recebimento-soma { margin: 10px 0 0; font-size: var(--fs-base); font-weight: 600; color: var(--text-muted); }
.recebimento-soma-ok { color: var(--success); }
.recebimento-soma-erro { color: var(--danger); }

.item-plano-row .excluir-item { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.item-plano-row .excluir-item label { display: inline; text-transform: none; font-weight: 500; color: var(--danger); margin: 0; }
.item-plano-row .excluir-item input { width: auto; }

/* botão de excluir item — ícone pequeno no canto superior direito do card */
.formset-row { position: relative; isolation: isolate; z-index: 1; }
.item-excluir-btn { position: absolute; top: 8px; right: 12px; } /* centro na altura do 1º rótulo do card (ex: "Produto") */
.item-excluir-oculto { display: none; }
.formset-row.marcado-exclusao { opacity: 0.4; }
.formset-row.marcado-exclusao .item-excluir-btn { background: var(--danger); border-color: var(--danger); color: #fff; }

/* Excluir um item recolhe o card até a primeira linha (cabeçalho), sem
   apagar os campos escondidos — desfazer a exclusão mostra tudo de volta. */
.formset-row.item-plano-row.marcado-exclusao .item-linha-principal,
.formset-row.item-plano-row.marcado-exclusao .subitens-container,
.formset-row.item-plano-row.marcado-exclusao .semanas-meses,
.formset-row.item-plano-row.marcado-exclusao > p { display: none !important; }
.formset-row.item-plano-row.marcado-exclusao .item-cabecalho-linha { margin-bottom: 0; }
.formset-row.item-plano-row.marcado-exclusao .item-salvar-modelo-btn { display: none; }

/* botão de congelar item — mesmo canto do excluir, um espaço à esquerda dele */
.item-congelar-btn { position: absolute; top: 8px; right: 44px; z-index: 3; } /* mesma altura da lixeira */
.item-congelar-oculto { display: none; }
.item-congelar-btn.ativo { background: var(--primary); border-color: var(--primary); color: #fff; }
/* plano do paciente: mesmo card, sem o que só o orçamento grava (ver _item_orcamento_row.html) */
.item-plano-row .oculto-no-plano { display: none !important; }

/* Congelar deixa o card "travado" (opacidade reduzida) e some com tudo que
   vem depois de Semanas — mas, diferente de excluir, mantém a linha
   principal/subitens/semanas visíveis: o item continua ali, só para de
   entrar nos totais do orçamento (ver totaisBrutosDaLinha em orcamento_itens.js
   e OrcamentoItem.custo_total/valor_total_bruto no model). */
.formset-row.item-plano-row.item-congelado { opacity: 0.55; }
.formset-row.item-plano-row.item-congelado .item-opcoes-linha,
.formset-row.item-plano-row.item-congelado .campo-areas-procedimento,
.formset-row.item-plano-row.item-congelado .campo-observacao-item { display: none !important; }
.campo-observacao-item { margin-top: 12px; max-width: 560px; }
.campo-observacao-item input { width: 100%; font-size: var(--fs-pequeno); }

/* ---------- Linha principal do item (quantidade + alvo + custo + valor) ---------- */
.item-linha-principal { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.item-linha-principal .campo-quantidade { width: 80px; flex: none; }
.item-linha-principal .campo-alvo { flex: 1 1 220px; min-width: 180px; }
.item-linha-principal .campo-alvo p { margin: 0; }
.item-linha-principal .campo-alvo .campo-descricao-item { margin-top: 12px; }
/* Dose (produto fracionável): ao lado do produto, que encolhe pra caber */
.item-linha-principal .campo-dose { flex: 0 0 150px; }
.item-linha-principal .campo-via { flex: 0 0 120px; }
/* mesma Dose no subitem, e "Sessões" no fim quando ela aparece */
.subitem-campos .campo-dose { flex: 0 0 150px; }
.subitem-campos .campo-dose[hidden] { display: none; }
.subitem-campos .campo-dose .item-dose-input { margin-top: 6px; }
.subitem-campos .campo-dose .item-dose-input[hidden] { display: none; }
.subitem-linha.com-dose .subitem-campos .campo-quantidade { order: 10; }
/* Injetável (com Dose): "Sessões" vai pro fim da linha, depois do Valor —
   quase sempre fica em 1. A descrição do produto continua quebrando a linha
   depois de tudo. */
.item-plano-row.com-dose .item-linha-principal .campo-quantidade { order: 10; }
.item-plano-row.com-dose .item-linha-principal .campo-quantidade-descricao { order: 20; }
.item-linha-principal .campo-via[hidden] { display: none; }
.item-linha-principal .campo-dose .item-dose-input { margin-top: 6px; }
.item-linha-principal .campo-dose[hidden] { display: none; }
.item-linha-principal .campo-dose .item-dose-input[hidden] { display: none; }
.item-linha-principal .campo-custo,
.item-linha-principal .campo-valor { width: 150px; flex: none; }
/* "Valor unitário" travado (desconto de tabela/cortesia) usa o mesmo campo
   readonly do resto do site — mas o fundo esbranquiçado padrão
   (var(--surface-muted)) chapa feio dentro do card já translúcido do item.
   Mantém a cor de texto mais clara (ainda lê como "travado"), só tira o
   preenchimento. */
.item-linha-principal .campo-custo input[readonly],
.item-linha-principal .campo-valor input[readonly] { background: transparent; }
/* Descrição do produto/kit escolhido (ver selects.js) — só aparece quando
   existe, ocupando a linha inteira (quebra o flex-wrap sozinha, depois de
   Custo/Valor) pra caber um texto mais comprido sem espremer contra os
   80px da Quantidade. Quebra em quantas linhas precisar — o texto inteiro
   importa mais aqui do que caber numa linha só. min-width:0 evita que uma
   palavra megar comprida (sem espaço pra quebrar) vire o tamanho mínimo
   do item flex e estique o card inteiro. */
.campo-quantidade-descricao {
  flex: 1 1 100%; min-width: 0; margin: 2px 0 0; font-size: 11px; font-style: italic;
  white-space: normal; word-break: break-word;
}

/* Item do orçamento: grade com lugar fixo pra cada campo, igual em todos os
   cards (com ou sem Dose) — o flex-wrap mandava Valor/Sessões pra baixo
   só nos cards de injetável e desalinhava dos outros. Card largo: uma
   linha (Item · Via · Dose · Custo · Valor · Qtd/Sessões). Card estreito:
   Item e Dose em cima; Custo, Valor e Qtd/Sessões embaixo, nas mesmas
   colunas em todos os cards. */
.item-plano-row { container-type: inline-size; }
.item-linha-principal.linha-grade {
  display: grid; column-gap: 12px; row-gap: 8px; align-items: start;
  /* via e dose em colunas "auto": escondidas, somem e o Item ocupa o lugar */
  grid-template-columns: [alvo] minmax(0, 1fr) [via] auto [dose] auto [custo] 150px [valor] 150px [qtd] 80px;
}
.linha-grade > .campo-alvo { grid-column: alvo; grid-row: 1; min-width: 0; }
.linha-grade > .campo-via { grid-column: via; grid-row: 1; }
.linha-grade > .campo-dose { grid-column: dose; grid-row: 1; }
.linha-grade > .campo-custo { grid-column: custo; grid-row: 1; width: auto; }
.linha-grade > .campo-valor { grid-column: valor; grid-row: 1; width: auto; }
.linha-grade > .campo-quantidade { grid-column: qtd; grid-row: 1; width: auto; }
.linha-grade > .campo-centro-custo-item { grid-column: 1 / -1; grid-row: 2; }
.linha-grade > .campo-quantidade-descricao { grid-column: 1 / -1; grid-row: 3; }
.linha-grade > .campo-via { width: 120px; }
.linha-grade > .campo-dose { width: 150px; }
@container (max-width: 900px) {
  .item-linha-principal.linha-grade { grid-template-columns: [c1] 150px [c2] 150px [c3] 150px [c4] minmax(0, 1fr); }
  .linha-grade > .campo-alvo { grid-column: 1 / -1; grid-row: 1; }
  .linha-grade:has(> .campo-dose:not([hidden])) > .campo-alvo,
  .linha-grade:has(> .campo-via:not([hidden])) > .campo-alvo { grid-column: 1 / 4; }
  .linha-grade:has(> .campo-dose:not([hidden])):has(> .campo-via:not([hidden])) > .campo-alvo { grid-column: 1 / 3; }
  .linha-grade > .campo-dose { grid-column: 4; grid-row: 1; width: auto; }
  .linha-grade > .campo-via { grid-column: 4; grid-row: 1; width: auto; }
  .linha-grade:has(> .campo-dose:not([hidden])) > .campo-via { grid-column: 3; }
  .linha-grade > .campo-custo { grid-column: 1; grid-row: 2; }
  .linha-grade > .campo-valor { grid-column: 2; grid-row: 2; }
  .linha-grade > .campo-quantidade { grid-column: 3; grid-row: 2; max-width: 110px; }
  .linha-grade > .campo-centro-custo-item { grid-row: 3; }
  .linha-grade > .campo-quantidade-descricao { grid-row: 4; }
}

.btn-link-subitem {
  display: block; margin-top: 6px; padding: 0; border: none; background: none;
  color: var(--text-muted); font-size: 11px; font-weight: 500; cursor: pointer;
  white-space: nowrap; text-decoration: underline; text-underline-offset: 2px;
}
.btn-link-subitem:hover { color: var(--primary); }

/* ---------- Subitem (linha extra de quantidade/custo/valor dentro do mesmo item) ---------- */
/* Cortesia: o valor do item (e o dos subitens) fica zerado e travado — o campo some. Só visual: o
   orcamento_itens.js segue zerando e guardando o valor anterior para quando a cortesia é desmarcada. */
.item-plano-row:has(input[name$="-cortesia"][value="SIM"]:checked) .campo-valor { display: none; }
/* ...e a Quantidade ocupa o lugar do Valor, sem deixar buraco na linha (card largo e estreito) */
.item-plano-row:has(input[name$="-cortesia"][value="SIM"]:checked) .item-linha-principal.linha-grade {
  grid-template-columns: [alvo] minmax(0, 1fr) [via] auto [dose] auto [custo] 150px [qtd] 80px;
}
@container (max-width: 900px) {
  .item-plano-row:has(input[name$="-cortesia"][value="SIM"]:checked) .item-linha-principal.linha-grade {
    grid-template-columns: [c1] 150px [c2] 150px [c3] 150px [c4] minmax(0, 1fr);
  }
  .item-plano-row:has(input[name$="-cortesia"][value="SIM"]:checked) .linha-grade > .campo-quantidade { grid-column: 2; }
}
/* Venda rápida: "Modelo" na 1ª linha do card, à esquerda da lixeira — preenche o card com um item modelo */
.item-modelo-menu { position: absolute; top: 6px; right: 48px; z-index: 4; }
.item-modelo-itens {
  display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 240px; max-height: 280px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px;
}
.item-modelo-menu.aberto .item-modelo-itens { display: block; }
.item-modelo-itens button {
  display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: none;
  text-align: left; color: var(--text); cursor: pointer;
}
.item-modelo-itens button:hover { background: var(--surface-muted); }
.formset-row.marcado-exclusao .item-modelo-menu { display: none; }
/* "+ Subitem": mesmo botão do "+ Novo item", no canto direito do card, abaixo dos subitens */
.item-subitem-acao { display: flex; justify-content: flex-end; margin: 4px 0 8px; }
.subitens-container:not(:empty) { margin: 4px 0 8px; display: flex; flex-direction: column; gap: 8px; }
.subitem-linha {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: 8px;
  margin-left: 1.5cm; padding: 10px 12px;
  border: var(--card-border-width, 1px) dashed rgba(var(--card-border-rgb), var(--card-border-opacity, 55%)); border-radius: var(--radius);
}
.subitem-linha::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(var(--card-fill-rgb), var(--card-fill-opacity, 0%));
  backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
}
.subitem-topo { display: flex; align-items: center; gap: 10px; }
.subitem-titulo { flex: none; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }
.subitem-topo .subitem-remover-btn { margin-left: auto; }
.subitem-campos { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.subitem-linha .campo-quantidade { width: 80px; flex: none; }
.subitem-linha .campo-alvo-subitem { flex: 1 1 180px; min-width: 160px; }
.subitem-linha .campo-custo,
.subitem-linha .campo-valor { width: 150px; flex: none; }
@media (max-width: 640px) {
  .subitem-linha { margin-left: 24px; }
}

.item-linha-principal .campo-centro-custo-item { flex: 1 1 160px; min-width: 150px; }
.item-linha-principal .campo-custo-kit-item { width: 150px; flex: none; }
.item-linha-principal .campo-custo-kit-item label {
  display: block; font-size: var(--fs-pequeno); font-weight: 600; color: var(--text-muted);
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.03em;
}
.item-linha-principal .campo-custo-kit-item .item-total-preview {
  margin-top: 0; text-align: left; font-weight: 700; font-size: var(--fs-destaque); color: var(--text);
  padding: 10px 0;
}

/* ---------- Itens do kit: cards de item, cada um com um ou mais subitens ---------- */
/* Subitem da associação com o mesmo desenho do item do orçamento: rótulo em
   cada campo, Custo/Valor em caixa "R$" (travada — vem do cadastro) com o
   total embaixo, Sessões no fim. Grade com lugar fixo pra cada campo, então
   um campo escondido (dose de quem não é injetável) deixa a coluna vazia
   em vez de desalinhar dos outros subitens. Card estreito (@container):
   Item e Dose em cima; Custo, Valor e Qtd/Sessões embaixo. */
.kit-itens-card { padding: 0; overflow: hidden; margin-bottom: 14px; container-type: inline-size; }
.kit-itens-cabecalho {
  position: relative; isolation: isolate; display: flex; align-items: center; gap: 12px; padding: 10px 18px;
  border-bottom: var(--card-border-width, 1px) solid rgba(var(--card-border-rgb), var(--card-border-opacity, 55%));
  font-size: var(--fs-pequeno); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em;
}
.kit-itens-cabecalho::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(var(--card-fill-rgb), var(--card-fill-opacity, 0%));
  backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
}
.kit-itens-cabecalho .kit-itens-titulo { flex: 1; }
.kit-itens-cabecalho .kit-itens-coadm {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer;
  font-size: var(--fs-base); font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text);
}
.kit-itens-cabecalho .kit-itens-acoes { display: flex; align-items: center; gap: 4px; }
.kit-itens-duplicar-item, .kit-itens-excluir-item { flex: none; }
.kit-item-linha .kit-item-drag-handle,
.kit-itens-cabecalho .kit-itens-drag-handle { flex: none; margin-right: 0; }
.kit-item-linha {
  display: grid; column-gap: 12px; row-gap: 10px; align-items: start; padding: 14px 18px;
  /* via e dose em colunas "auto": escondidas, somem e o Item ocupa o lugar */
  grid-template-columns: [produto] minmax(0, 1fr) [via] auto [dose] auto [custo] 150px [valor] 150px [qtd] 90px [acoes] 56px;
  border-bottom: 1px solid var(--border);
}
.kit-item-linha:last-child { border-bottom: none; }
.kit-item-linha .segmented.compacto { grid-column: 1 / -1; grid-row: 1; }
.kit-item-linha .campo-alvo { grid-column: produto; grid-row: 2; min-width: 0; }
.kit-item-linha .kit-item-col-dose { grid-column: dose; grid-row: 2; width: 150px; }
.kit-item-linha .kit-item-col-custo { grid-column: custo; grid-row: 2; }
.kit-item-linha .kit-item-col-valor-un { grid-column: valor; grid-row: 2; }
.kit-item-linha .kit-item-col-quantidade { grid-column: qtd; grid-row: 2; }
.kit-item-linha .kit-item-acoes {
  grid-column: acoes; grid-row: 2; display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding-top: 28px;
}
/* Via (só produto com mais de uma): ao lado do item, que encolhe pra caber */
.kit-item-linha .kit-item-col-via { grid-column: via; grid-row: 2; width: 120px; }
.kit-item-linha .kit-item-col-via[hidden], .kit-item-linha .kit-item-col-dose[hidden] { display: none; }
.kit-item-linha > .campo-quantidade-descricao { grid-column: produto / acoes; grid-row: 4; }
.kit-item-linha > .errorlist { grid-column: 1 / -1; grid-row: 5; }
.kit-item-linha .campo-alvo p { margin: 0; }
.kit-item-linha select, .kit-item-linha input[type="text"] { width: 100%; min-width: 0; }
.kit-item-linha .kit-item-col-dose .item-dose-input { margin-top: 6px; }
.kit-item-linha .kit-item-col-dose .item-dose-input[hidden] { display: none; }
.kit-item-linha .kit-preco-auto, .kit-item-linha .kit-preco-livre { display: block; }
.kit-item-linha .kit-preco-auto[hidden], .kit-item-linha .kit-preco-livre[hidden] { display: none; }
.kit-item-linha input.kit-preco-caixa { padding-left: 34px; text-align: right; background: transparent; cursor: default; }
.kit-item-linha .item-total-preview:empty { display: none; }
.kit-item-linha .item-excluir-btn { position: static; flex: none; }

@container (max-width: 860px) {
  .kit-item-linha { grid-template-columns: [c1] 150px [c2] 150px [c3] 150px [c4] minmax(0, 1fr); }
  /* Item ocupa a linha toda; Dose e/ou Via entram à direita e ele encolhe */
  .kit-item-linha .campo-alvo { grid-column: 1 / -1; }
  .kit-item-linha:has(> .kit-item-col-dose:not([hidden])) .campo-alvo,
  .kit-item-linha:has(> .kit-item-col-via:not([hidden])) .campo-alvo { grid-column: 1 / 4; }
  .kit-item-linha:has(> .kit-item-col-dose:not([hidden])):has(> .kit-item-col-via:not([hidden])) .campo-alvo { grid-column: 1 / 3; }
  .kit-item-linha .kit-item-col-dose { grid-column: 4; width: auto; }
  .kit-item-linha .kit-item-col-via { grid-column: 4; width: auto; }
  .kit-item-linha:has(> .kit-item-col-dose:not([hidden])) .kit-item-col-via { grid-column: 3; }
  .kit-item-linha .kit-item-col-custo { grid-column: 1; grid-row: 3; }
  .kit-item-linha .kit-item-col-valor-un { grid-column: 2; grid-row: 3; }
  .kit-item-linha .kit-item-col-quantidade { grid-column: 3; grid-row: 3; max-width: 110px; }
  .kit-item-linha .kit-item-acoes { grid-column: 4; grid-row: 3; }
  .kit-item-linha > .campo-quantidade-descricao { grid-column: 1 / -1; grid-row: 5; }
  .kit-item-linha > .errorlist { grid-row: 6; }
}
.item-total-preview {
  display: block; margin-top: 4px; font-size: var(--fs-base); color: var(--text-muted); text-align: center;
}
.item-total-preview.destaque { font-weight: 700; font-size: var(--fs-destaque); color: var(--text); }

/* ---------- Semanas agrupadas em cards de mês ---------- */
.semanas-meses { margin-top: 10px; margin-bottom: 16px; }
.semanas-cabecalho { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.semanas-titulo {
  display: block; font-size: 10px; font-weight: 600; color: var(--text-muted);
  margin-bottom: 0; text-transform: uppercase; letter-spacing: 0.03em;
}
.semanas-cabecalho .btn-link-subitem { display: inline; margin-top: 0; font-size: var(--fs-pequeno); text-transform: none; letter-spacing: normal; }
.semanas-meses-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.mes-card {
  border: var(--borda-campo); border-radius: var(--radius-sm);
  padding: 6px 8px 8px; background: transparent;
}
.mes-card-titulo { display: block; font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 5px; }
.mes-card-semanas { display: flex; gap: 4px; }
.semana-opt {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 26px; border-radius: 6px; border: var(--borda-campo);
  font-size: 10px; font-weight: 500; color: var(--text-muted); cursor: pointer;
  text-transform: none; margin: 0; padding: 0; position: relative; background: transparent;
}
.semana-opt input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.semana-opt:has(input:checked) { background: var(--primary); border-color: var(--primary); color: #fff; }

/* mini-controlador Ativo/Inativo direto na tabela */
.mini-toggle, .agenda-views {
  background: var(--segmented-trilho);
  backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
}
.mini-toggle {
  display: inline-flex; border: var(--segmented-border-width, 1.5px) solid rgba(var(--segmented-border-rgb), var(--segmented-border-opacity, 50%));
  border-radius: 999px; padding: 2px; gap: 2px;
}
.mini-toggle-opt {
  border: none; background: none; padding: 3px 10px; border-radius: 999px;
  font-size: var(--font-tag); font-weight: var(--peso-tag); color: var(--segmented-texto-inativo);
  cursor: pointer; font-family: inherit;
}
.mini-toggle-opt.active {
  background: rgba(var(--segmented-fill-rgb), var(--segmented-fill-opacity, 60%));
  backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
  color: var(--segmented-fill-text, var(--text)); box-shadow: var(--shadow-sm);
}

/* resumo do protocolo: matriz semana x item */
.resumo-protocolo-wrap { overflow-x: auto; }
.resumo-protocolo { border-collapse: collapse; font-size: var(--fs-base); }
.resumo-protocolo th, .resumo-protocolo td { border: 1px solid var(--border); padding: 5px 7px; text-align: center; white-space: nowrap; }
.resumo-protocolo th { background: var(--surface-muted); color: var(--text-soft); font-weight: 600; }
.resumo-protocolo td:first-child, .resumo-protocolo th:first-child { text-align: left; position: sticky; left: 0; background: var(--surface); }
.resumo-protocolo td.marcado { background: var(--success-bg); color: var(--success); font-weight: 700; }
.resumo-protocolo-total td { font-weight: 700; background: var(--surface-muted); }

/* Mesma tabela, sem nenhum preenchimento de cor (fundo do cabeçalho, da
   coluna fixa, das células marcadas e da linha de total todos
   transparentes) — só as bordas continuam marcando a grade. */
.resumo-protocolo.sem-preenchimento th,
.resumo-protocolo.sem-preenchimento td:first-child,
.resumo-protocolo.sem-preenchimento th:first-child,
.resumo-protocolo.sem-preenchimento td.marcado,
.resumo-protocolo.sem-preenchimento .resumo-protocolo-total td { background: transparent; }
.resumo-protocolo.sem-preenchimento td.marcado { color: var(--success); font-weight: 700; }

/* Resumo do orçamento — vidro ESCURO (pedido explícito, mais contraste que
   o "sem-preenchimento" transparente acima). O vidro (fundo+blur) mora no
   wrap (div), não na <table> — <table>/<td> têm regras de fundo/pseudo-
   elemento inconsistentes entre navegadores; um <div> ancestor é seguro.
   Bordas internas brancas translúcidas, texto claro (mesma convenção
   var(--text-claro)/rgba(var(--text-claro-rgb), x%) já usada no painel escuro do rselect e na
   sidebar). A 1ª coluna (sticky, pra não sumir atrás do scroll horizontal)
   precisa de um fundo OPACO — um vidro translúcido ali deixaria as células
   que passam por baixo aparecendo por cima do texto. */
.resumo-protocolo-wrap.vidro-escuro { position: relative; isolation: isolate; border-radius: var(--radius-sm); }
.resumo-protocolo-wrap.vidro-escuro::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(20, 20, 18, 0.85);
  backdrop-filter: blur(var(--glass-blur, 16px)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(160%);
}
.resumo-protocolo.vidro-escuro th,
.resumo-protocolo.vidro-escuro td { border: var(--borda-campo); background: transparent; color: var(--text-claro); }
.resumo-protocolo.vidro-escuro th { color: rgba(var(--text-claro-rgb), 0.75); }
.resumo-protocolo.vidro-escuro td:first-child,
.resumo-protocolo.vidro-escuro th:first-child { background: rgb(31, 33, 30); }
.resumo-protocolo.vidro-escuro td.marcado { background: rgba(var(--success-rgb), 0.45); color: #d7f0dd; font-weight: 700; }
.resumo-protocolo.vidro-escuro .resumo-protocolo-total td { background: rgba(255, 255, 255, 0.08); font-weight: 700; }

/* resumo de totais (custo/valor) do plano e do protocolo */
.plano-totais {
  position: relative; isolation: isolate;
  display: flex; flex-wrap: wrap; gap: 24px; margin: 4px 0 20px;
  padding: 14px 18px; border: 0; border-radius: var(--radius);
}
.plano-totais::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(var(--card-fill-rgb), var(--card-fill-opacity, 0%));
  backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
}
/* título do card de totais (ex: "Tabela avulso"/"Tabela plano" no kit) —
   força a própria linha, no topo, alinhado à esquerda como o resto do card */
.plano-totais-titulo {
  flex: 1 0 100%; margin: 0; font-size: var(--fs-h2); font-weight: 600; color: var(--text); text-align: left;
}
.plano-totais > div, .plano-totais .repasse-grid-item { display: flex; flex-direction: column; gap: 2px; }
#orcamento-repasse-colaboradores, #sim-saida-colaboradores { display: contents; }
.plano-totais strong { font-family: var(--font-display); font-size: 19px; color: var(--text); }
.plano-totais-com-desconto { display: block; font-size: var(--fs-base); color: var(--success); font-weight: 600; margin-top: 2px; }

/* "Valor tributável" (dentro do card de Emissão de nota fiscal) — rótulo e
   valor lado a lado, os dois centralizados verticalmente, valor à direita. */
.plano-totais-fiscal { align-items: center; }
.plano-totais-fiscal > div {
  flex-direction: row; align-items: center; justify-content: space-between;
  width: 100%; gap: 12px;
}

/* Card de totais (custo/valor do orçamento) em destaque — mesmo tratamento
   visual do .stat-card.destaque: preenchimento cheio e texto que se ajusta
   sozinho (preto/branco) conforme a cor escolhida em Aparência do site. */
.plano-totais.plano-totais-destaque {
  border: var(--destaque-border-width, 1.5px) solid rgba(var(--destaque-border-rgb), var(--destaque-border-opacity, 40%));
}
.plano-totais.plano-totais-destaque::before {
  background: rgba(var(--destaque-fill-rgb), var(--destaque-fill-opacity, 60%));
}
.plano-totais.plano-totais-destaque .muted,
.plano-totais.plano-totais-destaque strong {
  color: var(--destaque-fill-text, var(--text-claro));
}
.plano-totais.plano-totais-destaque .muted { opacity: 0.7; }
.plano-totais.plano-totais-destaque .plano-totais-com-desconto { color: var(--destaque-fill-text, var(--text-claro)); opacity: 0.85; }

.alerta-prejuizo {
  margin: -12px 0 20px; padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--danger-bg); color: var(--danger); font-size: var(--fs-base); font-weight: 600;
}

.repasses-grid { gap: 18px 28px; }
.repasses-grid strong { font-size: 15px; }
.repasses-grid strong.destaque { color: var(--primary); font-size: 17px; }

/* resumo do repasse separado por grupo (faturamento / custo-lucro / repasses)
   em vez de um card só acumulando tudo junto */
.resumo-grupos { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; margin: 4px 0 20px; }
.resumo-grupo {
  position: relative; isolation: isolate;
  flex: 1 1 220px;
  border: var(--card-border-width, 1px) solid rgba(var(--card-border-rgb), var(--card-border-opacity, 55%)); border-radius: var(--radius);
  padding: 12px 18px 14px;
}
.resumo-grupo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(var(--card-fill-rgb), var(--card-fill-opacity, 0%));
  backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
}
.resumo-grupo-titulo {
  font-size: var(--fs-pequeno); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700;
  color: var(--text-soft); margin: 0 0 10px;
}
.resumo-grupo-itens { display: flex; flex-wrap: wrap; gap: 16px 28px; }
.resumo-grupo-itens > div, .resumo-grupo-itens .repasse-grid-item { display: flex; flex-direction: column; gap: 2px; }
.resumo-grupo-itens strong { font-family: var(--font-display); font-size: 17px; color: var(--text); }
.resumo-grupo-itens strong.destaque { color: var(--primary); font-size: 19px; }
.resumo-grupo.repasses { border-color: var(--primary); border-width: 2px; }

.card.inativa { opacity: 0.6; }

.categoria-toggle {
  display: flex; align-items: center; gap: 8px;
  background: transparent; border: 0; padding: 0; margin: 0;
  font: inherit; text-align: left; cursor: pointer; color: inherit;
}
.categoria-toggle h2 { margin: 0; }
.categoria-chevron { display: inline-block; font-size: 15px; opacity: 0.6; transition: transform 0.15s; }
.categoria-card.aberto .categoria-chevron { transform: rotate(90deg); }
.categoria-body { display: none; margin-top: 16px; }
.categoria-card.aberto .categoria-body { display: block; }

/* ---------- Linha do tempo de pacientes ativos (forest plot) ---------- */
.tl-grid { display: grid; position: relative; min-width: 900px; }
/* Reserva espaço acima da grade só pra caber a etiqueta de "hoje" (que sai
   flutuando pra cima da linha do tempo) sem ser cortada pelo overflow do
   table-wrap — overflow-x:auto sozinho já implica clip vertical também
   (regra do CSS: overflow-x diferente de visible converte overflow-y
   ausente em auto), mas o clipping respeita a borda do padding, não a do
   conteúdo, então a etiqueta cabe aqui dentro. */
.tl-table-wrap { padding-top: 22px; }
.tl-cabecalho {
  display: flex; align-items: center; padding: 0 8px 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--text-soft); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.tl-cabecalho.tl-rotulo { padding-left: 2px; align-items: flex-start; z-index: 3; }
.tl-rotulo {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 6px 10px 6px 2px; border-bottom: 1px solid var(--border);
  overflow: hidden;
  position: sticky; left: 0; z-index: 2;
}
.tl-rotulo strong { font-size: var(--fs-base); color: var(--text); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.tl-rotulo small { font-size: var(--fs-pequeno); color: var(--text-soft); }
.tl-track { border-bottom: 1px solid var(--border); }
/* margin-left (calculado em linha_do_tempo_pacientes_ativos, a partir do
   dia da semana de hoje) empurra a linha pro ponto exato dentro da coluna —
   sem isso ela sempre caía na borda esquerda (início da semana), colada na
   coluna anterior e parecendo marcar a semana errada. width:0 porque só a
   borda importa; o resto da caixa pode ultrapassar a coluna sem problema
   (não tem preenchimento nem recebe clique). */
.tl-linha-hoje { width: 0; border-left: 1.5px dashed var(--danger); pointer-events: none; z-index: 1; }
.tl-cabecalho.tl-hoje { color: var(--danger); font-weight: 700; }
/* Etiqueta com a data exata de hoje, flutuando bem em cima da linha — sem
   ela, o deslocamento (margin-left calculado a partir do dia da semana)
   fica pequeno demais pra enxergar numa coluna de ~35px e a linha parece
   sempre colada na borda esquerda (semana anterior), mesmo estando no dia
   certo dentro da semana certa. */
.tl-hoje-etiqueta {
  justify-self: start; align-self: start; pointer-events: none; z-index: 4;
  font-size: 9.5px; font-weight: 700; color: var(--text-claro); background: var(--danger);
  padding: 1px 5px; border-radius: 999px; white-space: nowrap;
  transform: translate(-50%, -130%);
  font-variant-numeric: tabular-nums;
}
.tl-barra {
  align-self: center; margin: 10px 3px; border-radius: 999px;
  background: var(--primary); color: #fff; text-decoration: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 500; letter-spacing: 0.01em;
  padding: 0 10px; white-space: nowrap; overflow: hidden;
  box-shadow: var(--shadow-sm); transition: background-color 0.15s ease;
}
.tl-barra:hover { background: var(--primary-hover); }
.tl-barra span { overflow: hidden; text-overflow: ellipsis; }

/* linha do tempo em dias (pacientes_ativos_timeline.html) */
.tl-grid.tl-dias { min-width: 0; }
/* nomes numa coluna à parte (fora da rolagem), sem fundo; só os dias rolam */
.tl-dias-lado { display: flex; align-items: flex-start; }
.tl-dias-lado .tl-nomes { flex: 0 0 200px; }
.tl-dias-lado #tlRolagem { flex: 1 1 auto; min-width: 0; }
.tl-dias .tl-rotulo { position: static; background: none; }
.tl-semana { font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-soft); padding: 0 4px;
  border-left: 1px solid var(--border); white-space: nowrap; overflow: hidden; display: flex; align-items: center; }
.tl-dia { font-size: 9.5px; color: var(--text-soft); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--border); }
.tl-dia.fds { color: var(--text-muted); background: rgba(var(--sage-rgb), 0.12); }
.tl-dia.tl-hoje { color: #fff; background: var(--danger); border-radius: 4px; font-weight: 700; }
.tl-linha-hoje-dia { justify-self: center; }
.tl-rotulo a { color: inherit; text-decoration: none; }
.tl-barra-fina { margin: 0; height: 6px; padding: 0; align-self: center; border-radius: 999px; background: rgba(var(--teal-rgb), 0.35); box-shadow: none; }
.tl-barra-fina:hover { background: rgba(var(--teal-rgb), 0.55); }
.tl-ponto { position: relative; z-index: 2; justify-self: center; align-self: center; width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--primary); background: var(--surface); display: inline-block; }
.tl-ponto.feito { background: var(--primary); }
.tl-ponto.checkin, .tl-ponto.checkout { width: 12px; height: 12px; border-color: var(--olive-deep); }
.tl-ponto.checkin.feito, .tl-ponto.checkout.feito { background: var(--olive); }
.tl-ponto.checkout { border-radius: 3px; }
.tl-ponto.faltou { border-color: var(--danger); background: var(--danger); }
.tl-leg { display: inline-flex; align-items: center; gap: 4px; margin: 0 6px; }
.tl-leg .tl-ponto { vertical-align: middle; }

/* ---------- Régua de percentual (repasses) ---------- */

.repasse-slider-row { margin-bottom: 22px; }
.repasse-slider-row:last-child { margin-bottom: 0; }
.repasse-slider-cabecalho { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.repasse-slider-cabecalho label { text-transform: uppercase; font-size: var(--fs-pequeno); letter-spacing: 0.03em; color: var(--text-muted); font-weight: 600; }
.repasse-slider-cabecalho output {
  font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--primary);
  min-width: 52px; text-align: right;
}

input.repasse-slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px;
  background: repeating-linear-gradient(
    to right, var(--border) 0, var(--border) 1.5px, var(--cream-deep) 1.5px, var(--cream-deep) calc(10% - 1.5px)
  );
  outline: none; cursor: pointer; margin: 0;
}
input.repasse-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--primary); border: 3px solid var(--surface); box-shadow: var(--shadow-sm); cursor: grab;
}
input.repasse-slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--primary);
  border: 3px solid var(--surface); box-shadow: var(--shadow-sm); cursor: grab;
}
input.repasse-slider:active::-webkit-slider-thumb { cursor: grabbing; }
input.repasse-slider:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

.repasse-lucas .helptext { display: block; margin-top: 8px; }
.repasse-base-toggle { margin-top: 12px; margin-bottom: 0; display: inline-flex; }

.repasses-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .repasses-layout { grid-template-columns: 1fr; } }

/* ---------- Home: cards flutuantes, tipo widget ----------
   Colunas de verdade (não grid de linhas): um card mais curto libera espaço
   logo abaixo pro próximo, em vez de travar tudo numa grade de altura igual
   ao maior card da linha. O vidro líquido em si é o .card global — aqui só
   o que é específico da Home (colunas, arrastar, o botão-link do canto). */
.home-grid { column-count: 2; column-gap: 20px; }
.home-grid .card.home-card { break-inside: avoid; transition: box-shadow 0.15s ease, transform 0.15s ease; }
/* Safari ignora o break-inside em bloco com vidro (backdrop-filter): partia
   o último card entre as duas colunas (um pedaço preso embaixo da esquerda)
   e empurrava a margem pro topo da outra coluna. Como inline-block de
   largura total o card vira indivisível — mesmo visual, sem quebra. */
/* Mosaico calculado em home_cards.js (substitui as colunas CSS acima, que o
   Safari quebra com cards de vidro): cada card posicionado por transform na
   coluna mais curta; ao reordenar, os cards deslizam pro lugar novo. */
.home-grid.home-grid-mosaico { column-count: initial; position: relative; }
.home-grid.home-grid-mosaico > .card.home-card {
  position: absolute; top: 0; left: 0; margin: 0; box-sizing: border-box; will-change: transform;
}
.home-grid.home-grid-mosaico.home-grid-pronto > .card.home-card {
  transition: transform 0.28s cubic-bezier(.2, .8, .2, 1), box-shadow 0.15s ease;
}
/* o card arrastado segue o mouse sem atraso, por cima de todos */
.home-grid.home-grid-mosaico > .card.home-card.arrastando { transition: box-shadow 0.15s ease; z-index: 50; cursor: grabbing; }
.home-card-titulo { cursor: grab; user-select: none; padding-right: 34px; }
.home-card-titulo:active { cursor: grabbing; }
/* "↗" sem borda, preenchimento mais escuro, só aparece com o mouse dentro do card */
.home-card-link {
  position: absolute; top: 16px; right: 16px; isolation: isolate;
  border: none !important; background: rgba(var(--teal-deep-rgb), .14); color: var(--text);
  opacity: 0; transition: opacity .15s ease, background-color .15s ease;
}
.home-card-link::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(var(--card-fill-rgb), var(--card-fill-opacity, 0%));
}
.home-grid .card.home-card.arrastando {
  box-shadow: 0 22px 44px rgba(var(--text-rgb), 0.22), 0 6px 14px rgba(var(--text-rgb), 0.1);
  opacity: 0.94;
}
@media (max-width: 900px) { .home-grid { column-count: 1; } }

@media (max-width: 640px) {
  .form-grid-5 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .form-grid-6 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* card "condição especial" — calculadora de desconto ao vivo, não é salva */
.condicao-especial {
  border: var(--borda-campo); border-radius: var(--radius); padding: 12px 18px;
  margin: 4px 0 14px; background: transparent;
}
.condicao-especial-toggle { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.condicao-especial-toggle .segmented { margin-bottom: 0; }
.condicao-especial-label { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.condicao-especial-campos { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.condicao-especial-campos .segmented { margin-bottom: 0; }
.condicao-especial-campo-valor { display: flex; align-items: center; gap: 6px; }
.condicao-especial-prefixo { font-size: var(--fs-base); font-weight: 600; color: var(--text-muted); }
.condicao-especial-input { width: 100px; }

/* campo opcional que revela um select na mesma linha quando ativado
   (Tecnologia, Execução própria/terceirizada). */
.campo-toggle-linha { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.campo-toggle-linha-espacada { margin-bottom: 18px; }
.campo-toggle-linha-label { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.campo-toggle-linha .segmented { margin-bottom: 0; }
.campo-toggle-linha-revela { flex: 1 1 240px; min-width: 200px; }

/* formulários largos em colunas, pra não virar uma coluna infinita */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 18px; }
.form-grid textarea { min-height: 70px; }
.form-grid-5 { grid-template-columns: repeat(5, minmax(140px, 1fr)); }
.form-grid-6 { grid-template-columns: repeat(6, minmax(110px, 1fr)); }
/* Uma linha de 4 campos que sempre fica junta, mesmo se o form-grid de fora
   só couber 2-3 colunas nessa largura — span 1/-1 pra ocupar a linha
   inteira, e a própria grade interna força as 4 colunas. */
.form-grid-linha-3 { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 0 18px; }

/* descrição do produto ocupa o espaço vazio ao lado do estoque mínimo, mas
   começa do mesmo tamanho dos outros campos da linha — só cresce se a
   pessoa arrastar a alça de expandir */
.campo-descricao-produto textarea { min-height: 0; height: 42.5px; resize: vertical; }

/* descrição do kit fica ao lado do nome, com a mesma altura — só cresce se
   a pessoa arrastar a alça de expandir */
.campo-descricao-kit textarea { min-height: 0; height: 42.5px; resize: vertical; }

/* custo por unidade de saída e custo médio são campos automáticos (só leitura)
   — sem borda nem preenchimento, pra ficar visualmente claro que não são preenchíveis */
#preview-custo-saida, #preview-custo-medio { border-color: transparent; background: transparent; }

/* botão "+ Novo" com opções (compra x pedido de compra) */
.novo-menu { position: relative; }
.novo-menu-itens {
  display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); min-width: 290px; padding: 6px;
}
.novo-menu.aberto .novo-menu-itens { display: block; }
.novo-menu-itens a {
  display: block; padding: 9px 12px; border-radius: var(--radius-sm);
  color: var(--text); text-decoration: none; font-size: var(--fs-base);
}
.novo-menu-itens a:hover { background: var(--surface-muted); }

/* menu de "três pontinhos" (kebab) — genérico, usado na Checagem e reaproveitável depois */
.kebab-menu { position: relative; display: inline-block; }
.kebab-menu-itens {
  display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 30;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); min-width: 180px; padding: 6px;
}
.kebab-menu.aberto .kebab-menu-itens { display: block; }
.kebab-menu-itens a, .kebab-menu-itens button.kebab-item-btn {
  display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font: inherit; padding: 8px 12px; border-radius: var(--radius-sm);
  color: var(--text); text-decoration: none; font-size: var(--fs-base); white-space: nowrap;
}
.kebab-menu-itens a:hover, .kebab-menu-itens button.kebab-item-btn:hover { background: var(--surface-muted); }
.kebab-menu-itens a.danger, .kebab-menu-itens button.danger { color: var(--danger); }

/* abas contadoras do histórico de compras */
.filtro-tabs {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  border: var(--card-border-width, 1px) solid rgba(var(--card-border-rgb), calc(var(--card-border-opacity, 55%) * 0.55)); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 20px;
  color: var(--card-fill-text, var(--text));
}
.filtro-tabs::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(var(--card-fill-rgb), var(--card-fill-opacity, 0%));
  backdrop-filter: blur(var(--glass-blur, 16px)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(160%);
}
.filtro-tab {
  display: block; padding: 14px 16px; text-align: center; text-decoration: none;
  color: var(--card-fill-text, var(--text)); font-weight: 500;
  border-right: 1px solid rgba(var(--card-border-rgb), var(--card-border-opacity, 55%));
  border-bottom: 2.5px solid transparent;
}
.filtro-tab:last-child { border-right: none; }
.filtro-tab:hover { background: rgba(255, 255, 255, 0.1); }
.filtro-tab.active { border-bottom-color: var(--primary); background: rgba(255, 255, 255, 0.16); color: var(--primary); }
.filtro-tab-label { display: block; font-size: var(--fs-pequeno); color: var(--card-fill-text, var(--text-muted)); opacity: 0.75; }
.filtro-tab-qtd { display: block; font-family: var(--font-display); font-size: 22px; color: var(--card-fill-text, var(--text)); margin-top: 2px; }
.filtro-tab.active .filtro-tab-qtd { color: var(--primary); }
.formset-row {
  border: var(--card-border-width, 1px) solid rgba(var(--card-border-rgb), var(--card-border-opacity, 55%));
  border-radius: var(--radius);
  padding: 10px 16px;
  margin-bottom: 8px;
}
.formset-row::before {
  /* sem blur/saturate de propósito: com opacidade 0 (padrão), o
     backdrop-filter sozinho já dava uma cara de "preenchido" ao borrar o
     papel de parede atrás — o card de item deve poder ficar mesmo sem
     nenhum preenchimento visual quando a opacidade estiver zerada. */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(var(--card-fill-rgb), var(--card-fill-opacity, 0%));
}
.formset-row p { margin-bottom: 10px; }
.formset-row .segmented.compacto { margin-bottom: 6px; }

/* Cabeçalho do item (botão de salvar como modelo + seletor de tipo
   Ativo/Kit/Procedimento/Item Livre) na mesma linha, alinhados ao centro. */
.item-cabecalho-linha { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.item-cabecalho-linha .segmented.compacto { margin-bottom: 0; }
.item-plano-row > .segmented.compacto,
.subitem-linha .segmented.compacto { padding: 1.2px; gap: 0.6px; }
.empty-state {
  padding: 28px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-base);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.stat-card {
  position: relative;
  isolation: isolate;
  border: var(--card-border-width, 1px) solid rgba(var(--card-border-rgb), calc(var(--card-border-opacity, 55%) * 0.55));
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-stat);
  transition: transform .18s ease, box-shadow .18s ease;
}
.stat-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(var(--card-fill-rgb), var(--card-fill-opacity, 0%));
  backdrop-filter: blur(var(--glass-blur, 16px)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(160%);
}
/* Destaque também em vidro — verde translúcido em vez do teal chapado. */
.stat-card.destaque {
  border-color: rgba(var(--destaque-border-rgb), calc(var(--destaque-border-opacity, 40%) * 0.55));
  border-width: var(--destaque-border-width, 1.5px);
}
.stat-card.destaque::before {
  background: rgba(var(--destaque-fill-rgb), var(--destaque-fill-opacity, 60%));
}
.stat-card.destaque .value { color: var(--destaque-fill-text, var(--text-claro)); }
.stat-card.destaque .label { color: var(--destaque-fill-text, var(--text-claro)); opacity: 0.7; }
.stat-card.destaque .muted { color: var(--destaque-fill-text, var(--text-claro)); opacity: 0.6; }
.stat-card .value { font-family: var(--font-display); font-size: 28px; color: var(--card-fill-text, var(--text)); }
.stat-card .label { font-size: var(--fs-pequeno); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }

/* ---------- Gráficos (dashboard pessoal) ---------- */

.grafico-card { grid-column: span 1; }
.grafico-legenda { display: flex; gap: 16px; margin-bottom: 10px; }
.grafico-legenda-item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-base); color: var(--text-muted); }
.grafico-legenda-cor { width: 10px; height: 10px; border-radius: 999px; display: inline-block; }
.grafico-svg { width: 100%; height: auto; display: block; overflow: visible; }
.grafico-linha-zero { stroke: var(--border); stroke-width: 1; }
.grafico-linha { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.grafico-ponto { stroke: var(--card-fill-text, var(--text)); stroke-width: 0; cursor: pointer; }
.grafico-ponto:hover, .grafico-ponto:focus { r: 6; outline: none; }
.grafico-eixo-x { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: var(--text-muted); }

.grafico-barras-h { display: flex; flex-direction: column; gap: 10px; }
.grafico-barra-h-linha { display: grid; grid-template-columns: 130px 1fr 90px; align-items: center; gap: 10px; }
.grafico-barra-h-label { font-size: var(--fs-base); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grafico-barra-h-trilha { background: rgba(0,0,0,0.08); border-radius: 999px; height: 10px; overflow: hidden; }
.grafico-barra-h-fill { background: var(--primary); height: 100%; border-radius: 999px; min-width: 3px; }
.grafico-barra-h-valor { font-size: var(--fs-base); color: var(--text); text-align: right; white-space: nowrap; }

.grafico-tooltip {
  position: fixed; z-index: 200; pointer-events: none;
  background: var(--teal); color: var(--text-claro); border-radius: var(--radius-sm);
  padding: 6px 10px; font-size: var(--fs-base); box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  display: none; white-space: nowrap;
}
.grafico-tooltip strong { font-weight: 700; }
.grafico-tooltip .grafico-tooltip-label { opacity: 0.75; margin-right: 6px; display: block; margin-bottom: 3px; }

/* ---------- Column customization ---------- */

.cols-toolbar { position: relative; display: flex; justify-content: flex-end; margin-bottom: 8px; }
/* Quando um filtro (ex: categoria) é realocado pra dentro do .cols-toolbar
   (ver categoria_filtro.js) — some do canto e passa a dividir a linha com
   o botão de colunas, um de cada lado. */
.cols-toolbar.com-filtro { justify-content: space-between; align-items: center; }
.cols-toolbar .categoria-filtro-toolbar { margin-bottom: 0; }
/* Escondido pelo filtro de categoria — !important pra sempre vencer o
   display inline que o filtro de coluna (tables.js) também mexe na mesma
   linha; uma linha só fica visível quando os dois filtros concordam. */
tr.categoria-oculta { display: none !important; }
.cols-panel {
  position: absolute; top: 32px; right: 0; z-index: 20;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding: 10px 12px; min-width: 220px;
}
.cols-panel-row {
  display: flex; align-items: center; gap: 8px; padding: 5px 4px; font-size: var(--fs-base);
  border-radius: 6px; cursor: grab;
}
.cols-panel-row label { display: flex; align-items: center; gap: 6px; text-transform: none; font-weight: 500; color: var(--text); margin: 0; flex: 1; }

.cols-drag-handle { color: var(--text-muted); font-size: 14px; line-height: 1; user-select: none; cursor: grab; }
.cols-panel-row.arrastando { opacity: 0.4; }
.cols-panel-row.drag-sobre { background: var(--cream-deep); box-shadow: inset 0 2px 0 var(--primary); }

/* ---------- filtro por coluna (checklist de valores) ---------- */
.col-filtro-wrap { position: relative; display: inline-block; margin-left: 5px; vertical-align: middle; }
.col-filtro-btn {
  border: none; background: none; cursor: pointer; padding: 0 2px;
  font-size: 10px; color: inherit; line-height: 1;
}
.col-filtro-btn:hover { color: var(--text); }
.col-filtro-btn.ativo { color: var(--primary); }
.col-filtro-drop {
  position: fixed; z-index: 30;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding: 10px; width: 220px;
  text-transform: none; font-weight: 400; letter-spacing: normal;
}
/* Calendário padrão do Gestion (calendario_painel.js): todo campo de data
   ou de mês abre este painel no lugar do calendário do navegador (26/10).
   Qualquer calendário novo usa este — não criar outro. */
.calendario-painel { position: fixed; z-index: 60; width: 248px; padding: 12px; font-size: var(--fs-base); transform-origin: top left; }
.calendario-painel.de-mes { width: 232px; }
.calendario-painel-topo { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 10px; }
.calendario-painel-titulo {
  font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500; color: var(--text);
  background: none; border: none; padding: 2px 8px; border-radius: 999px;
}
.calendario-painel-titulo.clicavel { cursor: pointer; }
.calendario-painel-titulo.clicavel:hover { background: var(--surface-muted); }
.calendario-painel-seta {
  width: 28px; height: 28px; flex: none; border-radius: 50%; border: none; cursor: pointer;
  background: var(--surface-muted); color: var(--text); font-size: 16px; line-height: 1;
}
.calendario-painel-seta:hover { background: var(--cream-deep); }
.calendario-painel-grade { display: grid; gap: 2px; }
.calendario-painel-grade.meses { grid-template-columns: repeat(3, 1fr); gap: 4px; }
.calendario-painel-grade.dias { grid-template-columns: repeat(7, 1fr); }
.calendario-painel-semana { text-align: center; font-size: var(--fs-pequeno); color: var(--text-soft); padding: 2px 0 4px; }
.calendario-painel-item {
  padding: 7px 0; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  background: transparent; color: var(--text); font: inherit; text-align: center; font-variant-numeric: tabular-nums;
}
.calendario-painel-grade.meses .calendario-painel-item { padding: 8px 0; }
.calendario-painel-item.fora { color: var(--text-soft); }
.calendario-painel-item:hover:not(:disabled) { background: var(--surface-muted); }
.calendario-painel-item.hoje { border-color: var(--border); }
.calendario-painel-item.ativo { background: var(--text-claro); color: var(--teal-deep); font-weight: 600; }
.calendario-painel-item:disabled { opacity: 0.3; cursor: default; }
.calendario-painel-item:focus-visible, .calendario-painel-seta:focus-visible, .calendario-painel-titulo:focus-visible {
  outline: 2px solid var(--text-claro); outline-offset: 1px;
}
.calendario-painel-rodape { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
input:is([type="date"], [type="month"]) { cursor: pointer; }
.col-filtro-busca {
  width: 100%; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px;
  font-size: var(--fs-pequeno); background: var(--surface-muted); color: var(--text); margin-bottom: 8px;
}
.col-filtro-busca:focus { outline: 2px solid var(--primary); outline-offset: 0; }
.col-filtro-acoes { display: flex; justify-content: space-between; margin-bottom: 6px; }
.link-btn {
  border: none; background: none; padding: 0; cursor: pointer;
  font-size: var(--fs-base); color: var(--primary); text-decoration: underline;
}
.col-filtro-lista { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.col-filtro-item {
  display: flex; align-items: center; gap: 7px; font-size: var(--fs-base); font-weight: 400;
  color: var(--text); padding: 3px 2px; border-radius: 5px; cursor: pointer;
}
.col-filtro-item:hover { background: var(--surface-muted); }
.col-filtro-item input[type="checkbox"] { flex-shrink: 0; }
.col-filtro-rodape { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); text-align: right; }
.col-filtro-secao-titulo {
  font-size: var(--fs-pequeno); font-weight: 700; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.03em; margin-bottom: 6px;
}
.col-filtro-divisor { border: none; border-top: 1px solid var(--border); margin: 10px 0; }

/* ---------- Week-of-plan pill ---------- */
.pill-semana {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  background: var(--cream-deep); color: var(--olive-deep); font-size: var(--font-tag); font-weight: var(--peso-tag);
}

/* ---------- Agenda: cabeçalho e navegação ---------- */

.agenda-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; flex-wrap: wrap; gap: 12px;
}
.agenda-nav { display: flex; align-items: center; gap: 8px; }
.agenda-nav .agenda-title { font-family: var(--font-display); font-size: 20px; min-width: 190px; }
.agenda-views {
  display: flex; gap: 4px; border: var(--segmented-border-width, 1.5px) solid rgba(var(--segmented-border-rgb), var(--segmented-border-opacity, 50%));
  border-radius: 999px; padding: 3px;
}
.agenda-views a {
  padding: 6px 14px; border-radius: 999px; font-size: var(--font-tag); font-weight: var(--peso-tag);
  color: var(--segmented-texto-inativo); text-decoration: none;
}
.agenda-views a.active {
  background: rgba(var(--segmented-fill-rgb), var(--segmented-fill-opacity, 60%));
  backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
  color: var(--segmented-fill-text, var(--text)); box-shadow: var(--shadow-sm);
}

/* ---------- Agenda: "Programação" (tela própria de censo do dia, imprimível) ---------- */

.programacao-header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.programacao-date-input {
  width: auto; padding: 7px 10px; font-size: var(--fs-pequeno);
}
.programacao-subtitulo { margin: 2px 0 16px; }
.programacao-titulo-impressao { display: none; }

.programacao-lista { display: flex; flex-direction: column; }
.programacao-linha { border-bottom: 1px solid var(--border); }
.programacao-linha:last-child { border-bottom: none; }
.programacao-linha-cabecalho {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: none; padding: 13px 4px; margin: 0; cursor: pointer;
  font-family: inherit; text-align: left;
}
.programacao-linha-cabecalho:hover { background: var(--surface-muted); }
.programacao-chevron { flex: none; font-size: 15px; color: var(--text-muted); transition: transform 0.15s; }
.programacao-linha.aberto .programacao-chevron { transform: rotate(90deg); }
.programacao-hora { flex: none; width: 48px; font-weight: 700; color: var(--text); }
.programacao-nome { flex: none; font-weight: 600; color: var(--text); }
.programacao-itens-resumo {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-muted); font-size: var(--fs-base); text-align: right;
}
.programacao-linha-detalhe { display: none; padding: 2px 4px 16px 64px; }
.programacao-linha.aberto .programacao-linha-detalhe { display: block; }
.programacao-detalhe-grid { display: flex; flex-wrap: wrap; gap: 20px; }
.programacao-detalhe-grid > div { min-width: 140px; }
.programacao-itens-detalhe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }

/* ---------- Checagem clínica ---------- */

.checagem-date-input { width: auto; padding: 7px 10px; font-size: var(--fs-pequeno); }

.checagem-col-hora { flex: none; width: 44px; font-weight: 700; color: var(--text); }

/* uma linha por visita (paciente+horário), expandida por padrão — cada
   Agendamento gerado pelo plano (um por produto) cai na mesma visita.
   O cabeçalho é um <div>, não um <button>, porque o "Checar tudo" mora
   dentro dele como um form próprio (não dá pra aninhar form em button) —
   só a área chevron+hora+nome+resumo (.checagem-visita-toggle) é clicável
   pra abrir/fechar. */
.checagem-lista { display: flex; flex-direction: column; }
/* card de checagens pendentes (dias passados sem checar), embaixo da checagem do dia */
.card.card-pendentes { border: 1.5px solid var(--danger); }
.card-pendentes h2 .badge { vertical-align: middle; margin-left: 6px; }
.checagem-pendente-dia { font-size: var(--fs-base); font-weight: 600; color: var(--danger); margin: 18px 0 4px; text-transform: none; }
.checagem-pendente-dia:first-of-type { margin-top: 8px; }
.checagem-visita { border-bottom: 1px solid var(--border); }
.checagem-visita:last-child { border-bottom: none; }
.checagem-visita-cabecalho {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  padding: 13px 4px; margin: 0;
}
.checagem-visita-toggle {
  display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px 12px; flex: 1; min-width: 0;
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  font-family: inherit; text-align: left;
}
.checagem-visita-toggle:hover .checagem-visita-nome { color: var(--primary); }
.checagem-visita-chevron {
  flex: none; font-size: 15px; color: var(--text-muted); transition: transform 0.15s; line-height: 1.4;
}
.checagem-visita.aberto .checagem-visita-chevron { transform: rotate(90deg); }
.checagem-visita-nome { flex: none; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; line-height: 1.4; }
.checagem-visita-resumo {
  flex: 1 1 260px; min-width: 200px; align-self: center;
  color: var(--text-muted); font-size: 9px; line-height: 1.4;
}
.checagem-visita-checar-tudo { flex: none; }
.checagem-visita-detalhe { display: none; padding: 0 4px 14px 3cm; }
.checagem-visita.aberto .checagem-visita-detalhe { display: block; }

/* itens dentro da visita — recuados, compactos, fonte menor (é só pra
   checar, o destaque já foi dado na linha da visita) */
.checagem-sub-linha { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: var(--fs-base); }
.checagem-sub-alvo { flex: 1; min-width: 0; }
.checagem-sub-alvo .helptext { display: block; font-size: var(--font-tag); margin-top: 1px; }
.checagem-sub-acoes { flex: none; display: flex; align-items: center; gap: 6px; margin-left: auto; }

/* botão "Checar" — sem preenchimento, borda na cor que seria o preenchimento */
.btn.outline { background: transparent; color: var(--primary); border: var(--btn-outline-border-width, 1.5px) solid rgba(var(--btn-outline-border-rgb), var(--btn-outline-border-opacity, 50%)); }
.btn.outline:hover { background: var(--primary); color: #fff; }

@media print {
  .sidebar, .workspace-topo, .programacao-header { display: none !important; }
  .main, .container { margin: 0 !important; padding: 0 !important; }
  .programacao-card {
    box-shadow: none !important; border: none !important; padding: 0 !important; margin: 0 !important;
  }
  .programacao-titulo-impressao { display: block; }
  .programacao-chevron { display: none !important; }
  .programacao-linha-cabecalho { cursor: default; padding-left: 0; padding-right: 0; }
  .programacao-linha-detalhe { display: block !important; padding-left: 0; }
  .programacao-itens-resumo { display: none; }
  body { background: #fff !important; }
  @page { margin: 1.6cm; }
}

@media print {
  .agenda-header { display: none !important; }
  .checagem-visita-detalhe { display: block !important; }
  .checagem-visita-chevron { display: none !important; }
  .checagem-visita-toggle { cursor: default; }
  .checagem-visita-resumo { display: none; }
  .checagem-visita-checar-tudo, .checagem-visita-ver-plano, .checagem-sub-acoes { display: none !important; }
}

/* ---------- Agenda: grade horária (dia/semana) ---------- */

.agenda-grid-wrap {
  display: flex; overflow: hidden;
  background: rgba(var(--card-fill-rgb), var(--card-fill-opacity, 0%));
  backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
  border: var(--card-border-width, 1px) solid rgba(var(--card-border-rgb), var(--card-border-opacity, 55%)); border-radius: var(--radius);
}
.agenda-hours {
  width: 52px; flex-shrink: 0; border-right: 1px solid #fff;
}
.agenda-hour-label {
  height: var(--px-hora, 56px); font-size: 11px; color: var(--text-soft);
  padding: 4px 6px 0 0; text-align: right; box-sizing: border-box;
  border-bottom: 1px dashed #fff;
}
.agenda-day-col { flex: 1; position: relative; border-right: 1px solid #fff; }
.agenda-day-col:last-child { border-right: none; }
.agenda-hour-row {
  height: var(--px-hora, 56px); border-bottom: 1px dashed #fff; box-sizing: border-box;
}
/* Cabeçalho do dia e o espaço em cima da coluna de horas com a MESMA altura
   (fixa) — senão as linhas tracejadas das horas descolam das da grade */
.agenda-hours-topo { height: var(--agenda-cabecalho, 64px); border-bottom: 1px solid #fff; box-sizing: border-box; }
.agenda-day-header {
  height: var(--agenda-cabecalho, 64px); box-sizing: border-box; overflow: hidden;
  padding: 10px 8px; text-align: center; border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  background: rgba(var(--card-fill-rgb), var(--card-fill-opacity, 0%));
}
.agenda-day-header:last-child { border-right: none; }
.agenda-day-header .dow { font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.agenda-day-header .dnum { font-family: var(--font-display); font-size: 18px; }
.agenda-day-header.hoje .dnum {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff;
}

/* Linha da hora atual: fina, vermelha, com bolinha na ponta; não captura cliques */
.agenda-linha-agora {
  position: absolute; left: 0; right: 0; height: 0; z-index: 6; pointer-events: none;
  border-top: 2px solid var(--linha-agora);
}
.agenda-linha-agora::before {
  content: ""; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--linha-agora);
}

.agenda-bloco {
  position: absolute; border-radius: var(--radius-sm);
  /* horários sobrepostos lado a lado (--col/--cols vêm de _lado_a_lado) */
  left: calc(4px + (100% - 8px) * var(--col, 0) / var(--cols, 1));
  right: auto; width: calc((100% - 8px) / var(--cols, 1) - 2px);
  padding: 4px 8px; overflow: hidden; text-decoration: none; display: block;
  border-left: 3px solid; font-size: var(--fs-base); line-height: 1.3;
  backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
  box-shadow: var(--shadow-sm);
  cursor: grab;
  user-select: none;
  transition: box-shadow 0.1s;
}
.agenda-bloco .nome {
  font-weight: 700; color: var(--text); display: block;
  font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agenda-bloco .hora { font-size: var(--fs-pequeno); color: var(--text-muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-bloco.faltou { opacity: 0.55; text-decoration: line-through; }
/* feriado/data festiva: no cabeçalho do dia e no bloco de atendimento de plano */
.agenda-feriado { display: block; font-size: 9px; font-weight: 600; color: var(--warn); text-transform: none; letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
span.agenda-feriado { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--warn-bg); font-size: 10px; vertical-align: middle; }
.agenda-bloco.em-feriado { box-shadow: 0 0 0 1.5px var(--warn), var(--shadow-sm); }
.agenda-bloco-feriado { color: var(--warn); }
/* dia de feriado/data festiva: fundo bordô translúcido (vidro), sutil */
.agenda-track.dia-feriado, .agenda-mes-dia.dia-feriado, .agenda-day-header.dia-feriado {
  background-color: rgba(var(--feriado-rgb), 0.07);
  backdrop-filter: blur(6px) saturate(140%); -webkit-backdrop-filter: blur(6px) saturate(140%);
}
.agenda-track.dia-feriado { box-shadow: inset 0 0 0 1px rgba(var(--feriado-rgb), 0.16); }
.agenda-day-header.dia-feriado .agenda-feriado, .agenda-mes-dia.dia-feriado .agenda-feriado, span.agenda-feriado { color: var(--feriado); }
span.agenda-feriado { background: rgba(var(--feriado-rgb), 0.09); }
.agenda-mes-pill.em-feriado { box-shadow: inset 0 0 0 1.5px var(--warn); }
.agenda-bloco.em-conflito { box-shadow: 0 0 0 1px rgba(var(--danger-rgb), 0.45), var(--shadow-sm); }
.agenda-bloco.arrastando {
  cursor: grabbing; opacity: 0.95; box-shadow: 0 12px 30px rgba(var(--text-rgb), 0.3);
  pointer-events: none; transition: none;
}
.agenda-bloco.arrasto-origem { opacity: 0.35; }
.agenda-arrasto-copia {
  position: fixed; z-index: 3000; pointer-events: none; background: var(--surface);
  border-radius: var(--radius-sm); box-shadow: 0 12px 30px rgba(var(--text-rgb), 0.3);
}
.agenda-arrasto-copia .agenda-bloco.arrastando { box-shadow: none; }
/* o horário para onde o card está indo, colado no card que acompanha o mouse */
.agenda-arrasto-etiqueta {
  position: fixed; z-index: 3001; pointer-events: none; padding: 3px 10px; border-radius: 999px;
  background: var(--primary); color: var(--surface); font-size: var(--fs-pequeno); font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: var(--shadow-sm);
}
.agenda-track.arraste-sobre { background: var(--surface-muted); }
/* prévia do arraste: onde o card vai entrar, com o horário de destino */
.agenda-fantasma {
  position: absolute; left: 4px; right: 4px; z-index: 5; pointer-events: none;
  border: 2px dashed var(--primary); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.agenda-fantasma-hora {
  position: absolute; top: 2px; left: 4px; padding: 1px 6px; border-radius: 999px;
  background: var(--primary); color: var(--surface); font-size: var(--fs-pequeno); font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* balão com a programação do dia todo daquele paciente, ao passar o mouse */
.agenda-bloco-balao {
  display: none; position: absolute; z-index: 60; left: 50%; top: calc(100% + 6px);
  transform: translateX(-50%);
  min-width: 200px; max-width: 260px; text-align: left; cursor: default;
  background: rgba(var(--card-fill-rgb), var(--card-fill-opacity, 0%));
  backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
  border: var(--card-border-width, 1px) solid rgba(var(--card-border-rgb), var(--card-border-opacity, 55%)); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding: 10px 12px; white-space: normal;
}
/* O balão dentro do bloco é só a fonte (o bloco tem overflow:hidden e
   cortava ele): o agenda_visita.js copia pra um balão flutuante no body. */
.agenda-popover {
  display: block; position: fixed; transform: none; z-index: 1200;
  pointer-events: none; min-width: 220px; width: max-content; max-width: min(520px, calc(100vw - 16px));
  background: var(--surface);
}
.agenda-popover[hidden] { display: none; }
.agenda-bloco-balao-horas { display: flex; gap: 16px; margin-bottom: 10px; }
.agenda-bloco-balao-horas span { display: flex; flex-direction: column; font-size: var(--fs-destaque); font-weight: 700; color: var(--text); }
.agenda-bloco-balao-horas small { font-size: 10px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.agenda-bloco-balao-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.agenda-bloco.confirmada { box-shadow: inset 0 0 0 1px var(--success), var(--shadow-sm); }
dialog.dialog-visita { max-width: 460px; }
dialog.dialog-visita input[type="time"], dialog.dialog-visita textarea { border-color: var(--border); background: var(--surface-muted); }
.visita-itens { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.visita-itens li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-muted); font-size: var(--fs-base); }
.agenda-bloco-balao .visita-itens-balao li { display: flex; align-items: center; gap: 8px; }
.visita-item-bolinha { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; align-self: flex-start; margin-top: 0.35em; }
.visita-item-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.visita-item-sub { font-size: 0.88em; color: var(--text-muted); padding-left: 2px; }
.agenda-popover .visita-item-sub { white-space: nowrap; }
.visita-item-texto { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
/* no balão, procedimento e tecnologia na mesma linha — o balão cresce */
.agenda-popover .visita-item-texto { flex-wrap: nowrap; white-space: nowrap; }
.visita-item-minutos { align-self: flex-start; flex: 0 0 auto; font-size: var(--fs-base); white-space: nowrap; }
/* etiqueta da altura da bolinha (10px) */
.visita-item-texto .badge-tecnologia { font-size: var(--fs-micro); line-height: 10px; padding: 1px 6px; font-weight: 600; }
/* bolinhas dos procedimentos direto no bloco da agenda */
/* bolinhas dos procedimentos: na linha do nome, logo depois dele */
.agenda-bloco .nome-com-bolinhas { display: flex; align-items: center; gap: 5px; }
.agenda-bloco .nome-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.agenda-bloco-bolinhas { display: flex; flex-shrink: 0; gap: 3px; }
/* a paciente anotou no diário do Portal ALLURE® desde o checkpoint anterior */
.agenda-bloco-diario { display: inline-flex; flex-shrink: 0; margin-right: 4px; color: var(--accent-deep); }
.agenda-bloco-diario svg { width: 12px; height: 12px; }
.agenda-bloco-bolinha { display: block; width: 8px; height: 8px; border-radius: 50%; }
.agenda-bloco-balao-nome { display: block; font-size: var(--fs-destaque); font-weight: 700; color: var(--text); margin-bottom: 1px; }
.agenda-bloco-balao-data { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 8px; text-transform: capitalize; }
.agenda-bloco-balao ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.agenda-bloco-balao li { font-size: var(--fs-base); color: var(--text); line-height: 1.4; }
.agenda-bloco-balao li.atual { font-weight: 700; }
.agenda-bloco-balao li .hora { font-weight: 700; color: var(--text-muted); margin-right: 6px; font-size: var(--fs-base); }

/* Cor do bloco na agenda: paciente em acompanhamento (plano ativo) = verde
   claro; SEM plano ativo (paciente avulso ou lead) = bege médio da paleta
   (oliva), sempre (06/10/2026); compromisso pessoal = lavanda. Só tons da
   paleta. */
.balao-acompanhamento { background: color-mix(in srgb, var(--success) 15%, transparent); border-color: color-mix(in srgb, var(--success) 55%, var(--sage)); }
.balao-novo { background: color-mix(in srgb, var(--olive) 42%, transparent); border-color: var(--olive-deep); }
.balao-pessoal { background: color-mix(in srgb, var(--lavanda) 26%, transparent); border-color: var(--lavanda-deep); }
.balao-pessoal .nome { font-style: italic; }
/* filtro "qual agenda" — bolinha com a cor de cada uma */
.agenda-ver a::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.agenda-ver-ambas::before { background: linear-gradient(90deg, var(--success) 50%, var(--lavanda-deep) 50%); }
.agenda-ver-empresarial::before { background: var(--success); }
.agenda-ver-pessoal::before { background: var(--lavanda-deep); }

/* ---------- Agenda: mês ---------- */

.agenda-mes-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); overflow: hidden;
  background: rgba(var(--card-fill-rgb), var(--card-fill-opacity, 0%));
  backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
  border: var(--card-border-width, 1px) solid rgba(var(--card-border-rgb), var(--card-border-opacity, 55%)); border-radius: var(--radius);
}
.agenda-mes-dow {
  padding: 8px; text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase;
  color: var(--text-muted); border-bottom: 1px solid #fff;
}
.agenda-mes-dia {
  min-height: 96px; border-right: 1px solid #fff; border-bottom: 1px solid #fff;
  padding: 6px; font-size: var(--fs-base); vertical-align: top;
}
.agenda-mes-dia.fora-do-mes { background: rgba(255, 255, 255, 0.3); color: var(--text-soft); }
.agenda-mes-dia .num {
  font-weight: 700; text-decoration: none; color: var(--text); display: inline-block; margin-bottom: 4px;
}
.agenda-mes-dia.hoje .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 11px;
}
.agenda-mes-pill {
  display: block; font-size: var(--fs-pequeno); padding: 1px 6px; border-radius: 6px; margin-bottom: 2px;
  text-decoration: none; color: var(--text); border-left: 2px solid; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Agenda: ano ---------- */

.agenda-ano-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.agenda-ano-mes {
  background: rgba(var(--card-fill-rgb), var(--card-fill-opacity, 0%));
  backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
  border: var(--card-border-width, 1px) solid rgba(var(--card-border-rgb), var(--card-border-opacity, 55%)); border-radius: var(--radius); padding: 12px;
}
.agenda-ano-mes h3 { font-family: var(--font-display); font-size: 14px; margin: 0 0 8px; text-align: center; }
.agenda-ano-mini { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; font-size: 10px; text-align: center; }
.agenda-ano-mini .dow { color: var(--text-soft); font-weight: 700; }
.agenda-ano-mini a { text-decoration: none; color: var(--text-muted); padding: 3px 0; border-radius: 4px; }
.agenda-ano-mini a.fora { color: var(--text-soft); opacity: 0.4; }
.agenda-ano-mini a.tem-evento { background: var(--sage); color: #fff; font-weight: 700; }
.agenda-ano-mini a.hoje { border: 1.5px solid var(--primary); font-weight: 700; }

/* ---------- Agenda: tarefas de prospecção ---------- */

tr.tarefa-concluida { opacity: 0.5; text-decoration: line-through; }

.tarefas-prospeccao-toggle {
  display: flex; align-items: center; gap: 8px; background: none; border: none; padding: 0;
  cursor: pointer; font: inherit; text-align: left; color: inherit;
}
.tarefas-prospeccao-chevron {
  font-size: 15px; color: var(--text-muted); display: inline-block;
  transition: transform 0.15s; transform: rotate(90deg);
}
.tarefas-prospeccao-card.recolhido .tarefas-prospeccao-chevron { transform: rotate(0deg); }
.tarefas-prospeccao-card.recolhido .tarefas-prospeccao-corpo { display: none; }
.tarefas-filtro { margin-bottom: 0; }
.tarefas-prospeccao-card[data-filtro="prospeccao"] tr[data-tipo-tarefa="fiscal"],
.tarefas-prospeccao-card[data-filtro="prospeccao"] tr[data-tipo-tarefa="recebimento"],
.tarefas-prospeccao-card[data-filtro="prospeccao"] tr[data-tipo-tarefa="confirmacao"] { display: none; }
.tarefas-prospeccao-card[data-filtro="fiscal"] tr[data-tipo-tarefa="prospeccao"],
.tarefas-prospeccao-card[data-filtro="fiscal"] tr[data-tipo-tarefa="recebimento"],
.tarefas-prospeccao-card[data-filtro="fiscal"] tr[data-tipo-tarefa="confirmacao"] { display: none; }
.tarefas-prospeccao-card[data-filtro="recebimento"] tr[data-tipo-tarefa="prospeccao"],
.tarefas-prospeccao-card[data-filtro="recebimento"] tr[data-tipo-tarefa="fiscal"],
.tarefas-prospeccao-card[data-filtro="recebimento"] tr[data-tipo-tarefa="confirmacao"] { display: none; }
.tarefas-prospeccao-card[data-filtro="confirmacao"] tr[data-tipo-tarefa="prospeccao"],
.tarefas-prospeccao-card[data-filtro="confirmacao"] tr[data-tipo-tarefa="fiscal"],
.tarefas-prospeccao-card[data-filtro="confirmacao"] tr[data-tipo-tarefa="recebimento"] { display: none; }

/* ---------- Vendas: tarefas de nota fiscal ---------- */

.tarefas-nf-toggle {
  display: flex; align-items: center; gap: 8px; background: none; border: none; padding: 0;
  cursor: pointer; font: inherit; text-align: left; color: inherit;
}
.tarefas-nf-chevron {
  font-size: 15px; color: var(--text-muted); display: inline-block;
  transition: transform 0.15s; transform: rotate(90deg);
}
.tarefas-nf-card.recolhido .tarefas-nf-chevron { transform: rotate(0deg); }
.tarefas-nf-card.recolhido .tarefas-nf-corpo { display: none; }

/* ---------- CRM: Kanban ---------- */

.kanban-board {
  display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr));
  gap: 14px; overflow-x: auto; align-items: start;
}
.kanban-col {
  position: relative; isolation: isolate;
  border: var(--card-border-width, 1px) solid rgba(var(--card-border-rgb), var(--card-border-opacity, 55%)); border-radius: var(--radius);
  display: flex; flex-direction: column; min-width: 220px;
}
.kanban-col::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(var(--card-fill-rgb), var(--card-fill-opacity, 0%));
  backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
}
.kanban-col-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; font-weight: 700; font-size: var(--fs-base); border-bottom: 1px solid var(--border);
}
.kanban-col-count {
  background: var(--cream-deep); color: var(--text-muted); border-radius: 999px;
  padding: 1px 8px; font-size: var(--font-tag); font-weight: var(--peso-tag);
}
.kanban-col-body { padding: 10px; display: flex; flex-direction: column; gap: 10px; min-height: 60px; }
.kanban-col-body.arraste-sobre { background: var(--cream-deep); border-radius: var(--radius-sm); }
.kanban-vazio { text-align: center; color: var(--text-soft); font-size: var(--fs-base); padding: 14px 4px; }
.kanban-card {
  position: relative;
  isolation: isolate;
  border: var(--card-border-width, 1px) solid rgba(var(--card-border-rgb), var(--card-border-opacity, 55%)); border-radius: var(--radius-sm);
  padding: 10px 12px; box-shadow: var(--shadow-stat);
  cursor: grab; font-size: var(--fs-base);
}
.kanban-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(var(--card-fill-rgb), var(--card-fill-opacity, 0%));
  backdrop-filter: blur(var(--glass-blur, 16px)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(160%);
}
.kanban-card.arrastando { opacity: 0.4; }
.kanban-card .status-select { display: block; width: 100%; text-align: left; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; }
.kanban-card-nome a { font-weight: 700; color: var(--text); text-decoration: none; }
.kanban-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.kanban-card-valor { margin-top: 6px; font-weight: 700; color: var(--success); font-size: var(--fs-base); }
.kanban-card-actions { display: flex; gap: 6px; margin-top: 8px; }

/* ---------- Blend mode "multiplicar" no vidro (indicadores + sidebar) ----------
   Em vez da mistura alfa normal (interpola com o que está atrás), multiplica
   os canais de cor — tende a escurecer sobre áreas escuras do papel de
   parede, efeito mais dramático/contrastado. Só no ::before (a camada de
   fundo, isolada via `isolation: isolate` no elemento pai) — o texto e
   ícones continuam em blend normal, com contraste cheio por cima. */
/* Só quem ainda tem cor de fundo de verdade (destaque + sidebar) — os
   cards comuns viraram vidro sem preenchimento, então não há o que
   multiplicar neles. */
.stat-card::before, .sidebar::before {
  mix-blend-mode: multiply;
}

/* Barra de edição em lote (Despesas): presa no rodapé enquanto a lista rola. */
.lote-barra { position: sticky; bottom: 12px; z-index: 5; border-left: 3px solid var(--primary); box-shadow: 0 6px 24px rgba(0, 0, 0, .18); }
.lote-barra select { width: auto; min-width: 160px; }

/* ---------- Janela de edição por cima da lista (dialogo_formulario.js) ---------- */
dialog.dialogo-formulario {
  width: min(900px, 96vw); height: min(90vh, 1000px); max-height: 90vh;
  max-width: none; padding: 0; overflow: hidden; position: fixed;
}
dialog.dialogo-formulario iframe { width: 100%; height: 100%; border: 0; display: block; }
/* enquanto a página de dentro carrega e é medida, a janela não aparece (abre direto, já pronta) */
dialog.dialogo-formulario.carregando, dialog.dialogo-formulario.carregando::backdrop { opacity: 0; }
.dialogo-formulario-fechar {
  position: absolute; top: 10px; right: 12px; z-index: 2; line-height: 1;
}
@media (max-width: 700px) {
  dialog.dialogo-formulario { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; border-radius: 0; }
}
/* A página de dentro da janela: sem barra lateral, trilha nem "← Voltar". */
body.em-dialogo { background-image: none; }
body.em-dialogo .main { margin-left: 0; animation: none; }
body.em-dialogo .container { padding-top: 18px; }
body.em-dialogo .back-link { display: none; }
/* O cartão único da página vira a própria janela: sem moldura, fundo,
   sombra nem largura máxima — senão aparece um cartão dentro da janela.
   Página com vários cartões (seções) também perde a moldura: as seções
   ficam separadas só por uma linha fina. */
body.em-dialogo .container { padding: 26px 30px 40px; }
body.em-dialogo .container:not(:has(> .card ~ .card)) > .card {
  border: 0; box-shadow: none; padding: 0; margin-bottom: 0; max-width: none !important; background: none;
}
body.em-dialogo .container:not(:has(> .card ~ .card)) > .card::before { display: none; }
body.em-dialogo .container > .card {
  border: 0; box-shadow: none; padding: 0; max-width: none !important; background: none; border-radius: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.em-dialogo .container > .card::before { display: none; }
body.em-dialogo .container > .card + .card { border-top: 1px solid var(--border); padding-top: 22px; margin-top: 22px; }

/* ---------- Modelo de página de documento: miniatura A4 ao vivo ---------- */
.perfil-doc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.perfil-doc-folha-wrap { position: sticky; top: 16px; }
.perfil-doc-folha {
  position: relative; width: 100%; aspect-ratio: 210 / 297; background: #fff center / 100% 100% no-repeat;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18); border-radius: 2px; overflow: hidden;
}
.perfil-doc-area {
  position: absolute; border: 1.5px dashed var(--danger); background: color-mix(in srgb, var(--danger) 6%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.perfil-doc-area span { font-size: 11px; color: var(--danger); letter-spacing: 0.04em; text-transform: uppercase; }
.perfil-doc-rodape { position: absolute; background: rgba(0, 0, 0, 0.22); }
.perfil-doc-veu { position: absolute; inset: 0; background: #fff; pointer-events: none; }
@media (max-width: 760px) {
  .perfil-doc-layout { grid-template-columns: 1fr; }
  .perfil-doc-folha-wrap { position: static; max-width: 300px; margin: 0 auto; }
}

/* ---------- Checagem: registro da aplicação (lote, local, áreas) ---------- */
details.checagem-registro { display: inline-block; position: relative; }
/* .card isola a camada (isolation) — a janelinha aberta ficava por baixo do
   card seguinte (ex.: Checagem retroativa na checagem da paciente). O card
   que tem uma janelinha aberta sobe por cima dos outros. */
.card:has(details.checagem-registro[open]), .card:has(.kebab-menu.aberto), .card:has(.item-modelo-menu.aberto) { z-index: 50; }
details.checagem-registro > summary { list-style: none; cursor: pointer; display: inline-flex; }
details.checagem-registro > summary::-webkit-details-marker { display: none; }
.checagem-registro-form {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 300px; max-width: calc(100vw - 24px);
  display: flex; flex-direction: column; gap: 8px; padding: 14px;
  background: var(--surface); border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
}
.checagem-registro-form label { margin: 0; }
.checagem-registro-form > button { margin-top: 6px; align-self: flex-end; }
.checagem-locais { flex-wrap: wrap; }
.checagem-areas { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.checagem-area { display: inline-flex; align-items: center; gap: 6px; text-transform: none; font-weight: 500; }

/* Marca de furação na miniatura: filete no meio da borda esquerda (14,85 de 29,7 cm). */
.perfil-doc-furacao { position: absolute; left: 1.2%; top: 50%; width: 3.3%; border-top: 1.5px solid #555; }
.perfil-doc-furacao[hidden] { display: none; }

/* Botão do WhatsApp (confirmação de consulta): verde da marca */
.icon-btn.icon-whatsapp {
  color: var(--whatsapp);
  /* no meio do texto ("Consulta amanhã, 17:30 ○"): da altura da linha e
     centralizado nela, em vez de ficar na linha de base e subir */
  vertical-align: middle; margin: -0.25em 0 -0.15em 4px;
}
.icon-btn.icon-whatsapp:hover { color: var(--whatsapp-hover); }

/* Prévia de documento (PDF) numa janela por cima da tela — ver previa_pdf.js. */
dialog.dialogo-previa-pdf {
  width: min(1000px, 96vw); height: 92vh; max-height: 92vh; max-width: none;
  padding: 0; overflow: hidden; display: none; flex-direction: column;
}
dialog.dialogo-previa-pdf[open] { display: flex; }
.dialogo-previa-barra { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.dialogo-previa-titulo { margin-right: auto; font-size: var(--fs-base); font-weight: 600; color: var(--text-muted); letter-spacing: .03em; }
dialog.dialogo-previa-pdf iframe { flex: 1; width: 100%; border: 0; display: block; background: #525659; }
dialog.dialogo-margem { max-width: 380px; }
.dialogo-margem-opcoes { display: flex; flex-direction: column; gap: 8px; }
.dialogo-margem-secao { margin: 18px 0 8px; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.dialogo-margem-opcoes .btn { border: 1px solid var(--border); background: var(--surface-muted); width: 100%; justify-content: center; flex-direction: column; gap: 2px; height: auto; padding-top: 10px; padding-bottom: 10px; }
.dialogo-margem-opcoes .btn small { font-weight: 400; font-size: 11px; color: var(--text-muted); }
@media (max-width: 700px) {
  dialog.dialogo-previa-pdf { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
}

/* Lotes a identificar (saldo provisório da implantação) */
.lotes-provisorios-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.lote-provisorio { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-muted); text-decoration: none; color: var(--text); font-size: var(--fs-base); }
.lote-provisorio:hover { border-color: var(--warn); }
.lote-provisorio .muted { font-size: var(--fs-pequeno); }
table.lote-identificar td { padding: 4px; }
table.lote-identificar input { width: 100%; border: 1px solid var(--border); background: var(--surface-muted); }

/* Checagem: itens da visita separados em Procedimentos / Injetáveis / Insumos */
.checagem-grupo-titulo {
  margin: 14px 0 2px -40px; font-size: var(--fs-pequeno); font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.checagem-visita-detalhe .checagem-grupo-titulo:first-child { margin-top: 4px; }
/* Insumos: recolhidos por padrão, só um título discreto com a contagem */
.checagem-grupo-recolhivel > summary.checagem-grupo-titulo {
  cursor: pointer; list-style: none; display: block; width: fit-content;
}
.checagem-grupo-recolhivel > summary.checagem-grupo-titulo::-webkit-details-marker { display: none; }
.checagem-grupo-recolhivel > summary.checagem-grupo-titulo::before {
  content: "▸"; display: inline-block; margin-right: 6px; transition: transform .15s;
}
.checagem-grupo-recolhivel[open] > summary.checagem-grupo-titulo::before { transform: rotate(90deg); }
.checagem-grupo-qtd { font-weight: 400; text-transform: none; letter-spacing: 0; }
@media (max-width: 700px) { .checagem-grupo-titulo { margin-left: 0; } }
.checagem-seringa-titulo { margin: 8px 0 0 -0.5cm; font-size: 11px; font-weight: 600; color: var(--text); }
.checagem-sub-linha.checagem-isolada { margin-left: -0.5cm; }
.checagem-seringa-subtitulo { margin: 6px 0 0; font-size: 10.5px; font-weight: 600; color: var(--text-muted); }
.checagem-sub-linha.checagem-nivel2 { margin-left: 0.5cm; }
.checagem-adm-rotulo { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--text-soft); }
@media (max-width: 700px) { .checagem-sub-linha.checagem-nivel2 { margin-left: 0.3cm; } }
@media (max-width: 700px) { .checagem-sub-linha.checagem-isolada { margin-left: 0; } }
@media (max-width: 700px) { .checagem-seringa-titulo { margin-left: 0; } }
.checagem-ordem { font-weight: 600; color: var(--text-muted); }
/* pH do lote só nos injetáveis (obrigatório no recebimento) */
.recebimento-item-card:not([data-ph-obrigatorio]) .campo-ph { display: none; }
.checagem-check-ok { display: inline-flex; vertical-align: -2px; margin-right: 3px; color: var(--success); }
.checagem-check-ok svg { width: 11px; height: 11px; stroke-width: 2.4; }

/* atalho de período (link) no mesmo segmentado: o ativo fica destacado */
a.segmented-opt { text-decoration: none; }
.segmented a.segmented-opt.on {
  background: rgba(var(--segmented-fill-rgb), var(--segmented-fill-opacity, 60%));
  border: var(--segmented-border-width, 1.5px) solid rgba(var(--segmented-border-rgb), var(--segmented-border-opacity, 50%));
  color: var(--segmented-fill-text, var(--text)); box-shadow: var(--shadow-sm);
}

/* Compras: cotação/pedido como cartão com linha do tempo (pedido → previsão) */
/* --compra-cor: a cor da faixa lateral — a bolinha do caminhão usa a mesma */
.compra-tl { --compra-cor: var(--primary); padding: 16px 18px; margin-bottom: 12px; border-left: 4px solid var(--compra-cor); }
.compra-tl-paciente, .compra-tl-misto { --compra-cor: var(--olive-deep); }
.compra-tl-atrasado { --compra-cor: var(--danger); }
.compra-tl-cancelada { opacity: 0.55; }
.compra-tl-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.compra-tl-topo .badge { margin-left: 6px; }
.compra-tl-acoes { display: flex; align-items: center; gap: 6px; }
.compra-tl-itens { margin: 10px 0 4px; display: flex; flex-wrap: wrap; gap: 6px; }
.badge.compra-tl-tag-paciente { background: color-mix(in srgb, var(--olive-deep) 16%, transparent); border-color: color-mix(in srgb, var(--olive-deep) 50%, transparent); color: var(--olive-deep); }
.compra-tl-linha { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.compra-tl-data { font-size: var(--fs-base); color: var(--text-muted); white-space: nowrap; }
/* trilho: o trecho que falta é a mesma cor do cartão, clara e translúcida; o percorrido, a cor cheia */
.compra-tl-trilho { position: relative; flex: 1; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--compra-cor) 13%, transparent); }
/* o trecho já percorrido tem a cor do cartão (a mesma da faixa lateral e da bolinha) */
.compra-tl-feito { height: 100%; border-radius: 999px; background: color-mix(in srgb, var(--compra-cor) 55%, transparent); }
.compra-tl-caminhao {
  position: absolute; top: 50%; transform: translate(-50%, -50%); width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--compra-cor); color: #fff; line-height: 0;
}
.compra-tl-caminhao svg { width: 13px; height: 13px; stroke-width: 2; }
.compra-tl-status { margin: 8px 0 0; font-size: var(--fs-base); color: var(--text-muted); }
.compra-tl-atrasado .compra-tl-status { color: var(--danger); font-weight: 600; }
.encomendas-a-enviar { padding: 6px 18px; }
.encomenda-linha { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.encomenda-linha:last-child { border-bottom: none; }
.encomenda-icone { color: var(--olive-deep); line-height: 0; }
.encomenda-texto { flex: 1; display: flex; flex-direction: column; }
.encomenda-texto .muted { font-size: var(--fs-pequeno); }
/* botão redondo: fundo verde do WhatsApp, ícone branco; sem número cadastrado, cinza */
.compra-tl-whatsapp {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0;
  border-radius: 50%; background: var(--whatsapp); color: #fff; vertical-align: middle; margin-left: 4px; border: none;
}
.compra-tl-whatsapp:hover { background: var(--whatsapp-hover); color: #fff; }
.compra-tl-whatsapp svg { width: 14px; height: 14px; }
.compra-tl-whatsapp.sem-numero { background: var(--text-muted); opacity: 0.45; }

/* Paciente com pendência no cadastro (o que falta pra nota fiscal): mesmo vermelho dos atrasos em Compras */
.paciente-pendente { color: var(--danger); }
.aviso-pendencia-paciente {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; padding: 12px 16px;
  border: 1px solid rgba(var(--danger-rgb), 0.35); border-left: 4px solid var(--danger); border-radius: var(--radius);
  background: rgba(var(--danger-rgb), 0.06); color: var(--danger); font-size: var(--fs-base);
}
.aviso-pendencia-paciente .btn { margin-left: auto; }

/* Botões sem preenchimento (ícone redondo, secundário, contornado): sempre
   uma borda fina na cor do próprio ícone/texto — sem ela não parecem botão.
   Mínimo de 1px mesmo que a Aparência esteja com espessura 0. */
.icon-btn:not(.primary):not(.compra-tl-whatsapp),
.btn.secondary, .btn.outline {
  border-width: max(1px, var(--btn-outline-border-width, 1px));
  border-style: solid;
  border-color: color-mix(in srgb, currentColor 38%, transparent);
}
.icon-btn:not(.primary):not(.compra-tl-whatsapp):hover, .btn.secondary:hover, .btn.outline:hover { border-color: currentColor; }

/* Ícone dos botões redondos sem preenchimento */
.icon-btn:not(.primary) svg { width: 11px; height: 11px; }
.compra-tl-whatsapp { width: 21.4px; height: 21.4px; }
.compra-tl-whatsapp svg { width: 12px; height: 12px; }


/* Checagem: "linha de registro" (executado/utilizado e checado por…) à direita da coluna do item */
.checagem-linha-registro { text-align: right; }

/* Plano e semana no balão da agenda, numa linha própria abaixo da data (sem
   o capitalize da data: "ALLURE® Alo · Semana 2 de 24") */
.agenda-bloco-balao-plano { display: block; font-size: 11px; color: var(--text); margin: -4px 0 8px; }

/* Rótulo e controle segmentado lado a lado, centrados na vertical (ex: Cortesia no agendamento) */
.campo-linha-segmentado { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.campo-linha-segmentado > label { margin: 0; }
.campo-linha-segmentado > .segmented { margin: 0; }

/* Botão de texto na altura padrão dos botões de ícone (21,4px) — ex: "Checagem ↗" e "+ Agendamento" no topo da Agenda */
.btn.btn-21 { height: 21.4px; padding: 0 10px; font-size: 11px; line-height: 1; box-sizing: border-box; white-space: nowrap; }

/* Campos de preencher/selecionar com vidro escuro discreto (pedido 02/10):
   um véu verde-escuro leve. background-color (não "background") pra não
   apagar a setinha dos selects. Sem backdrop-filter desde 14/10/2026: um
   desfoque por campo pesava no celular (orçamento tem dezenas de campos). */
:root { --vidro-escuro-tabela: rgba(38, 52, 46, 0.42); --campo-vidro: rgba(var(--text-rgb), 0.07); --campo-vidro-foco: rgba(var(--text-rgb), 0.11); }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="color"]):not([readonly]):not([disabled]),
select:not(.status-select), textarea, .rselect-trigger, .dropdown-multiselect-toggle {
  background-color: var(--campo-vidro);
}
input:not([type="checkbox"]):not([type="radio"]):not([readonly]):focus, select:not(.status-select):focus, textarea:focus,
.rselect-trigger:focus, .rselect.aberto .rselect-trigger {
  background-color: var(--campo-vidro-foco);
}
/* o desfoque (backdrop-filter) põe o campo numa camada própria, que passava
   por cima dos botões soltos no canto dos cards (lixeira etc.) */
.item-excluir-btn, .formset-row > .icon-btn { z-index: 3; }
/* mesmo motivo: "R$" / "%" desenhados por cima do campo de valor */
.money-wrap .money-prefix, .money-wrap .money-suffix { z-index: 2; }

/* Cabeçalho de tabela acompanhando a rolagem (cabecalho_fixo.js): ganha um
   fundo de vidro claro pra as linhas não aparecerem por trás dos títulos */
tr.cabecalho-fixo-ativo > th { position: relative; z-index: 5; }
/* O vidro é UMA peça só atrás da linha inteira (e outra atrás da coluna
   inteira) — não uma por célula: assim o desfoque passa livre de uma célula
   pra outra (o vermelho de uma etiqueta se espalha pras vizinhas, como num
   vidro de verdade). Posicionadas por cabecalho_fixo.js. */
.table-wrap { position: relative; }
.vidro-tabela {
  position: absolute; pointer-events: none; display: none;
  background-color: var(--vidro-escuro-tabela);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
.vidro-tabela.ativo { display: block; }
.vidro-tabela-cabecalho { z-index: 4; box-shadow: 0 1px 0 rgba(var(--card-border-rgb), var(--card-border-opacity, 55%)); }
.vidro-tabela-coluna { z-index: 1; box-shadow: 1px 0 0 rgba(var(--card-border-rgb), var(--card-border-opacity, 55%)); }
/* canto (cabeçalho × primeira coluna): cobre os títulos que passam por baixo do "Produto" */
.vidro-tabela-canto { z-index: 6; }

/* célula em destaque (ex: nome do produto e Disponível no Estoque) */
td.td-negrito, td.td-negrito a { font-weight: 700; }

/* Primeira coluna da tabela presa à esquerda na rolagem lateral (o
   .table-wrap é quem rola). O vidro (.vidro-tabela-coluna) só entra quando
   a tabela de fato rolou (.rolou-lado, posto por cabecalho_fixo.js) —
   parada, a coluna fica igual às outras. */
.table-wrap th:first-child, .table-wrap td:first-child { position: sticky; left: 0; z-index: 2; }
tr.cabecalho-fixo-ativo > th:first-child { z-index: 7; }
/* várias colunas fixas (data-colunas-fixas, tables.js põe o "left" de cada) */
.table-wrap th.col-fixa, .table-wrap td.col-fixa { position: sticky; z-index: 2; }
tr.cabecalho-fixo-ativo > th.col-fixa { z-index: 7; }
.table-wrap.rolou-lado td.col-fixa, .table-wrap.rolou-lado td.col-fixa a { color: var(--text-claro); }
/* a barra de filtro/colunas que fica dentro do .table-wrap não rola de lado com a tabela */
.table-wrap > .cols-toolbar { position: sticky; left: 0; z-index: 3; }
/* cabeçalho no vidro escuro: títulos e filtros claros */
tr.cabecalho-fixo-ativo > th, tr.cabecalho-fixo-ativo > th .col-filtro-btn { color: var(--text-claro); }
/* primeira coluna no vidro escuro (rolagem lateral): texto e links claros */
.table-wrap.rolou-lado td:first-child, .table-wrap.rolou-lado td:first-child a { color: var(--text-claro); }

/* Estoque: necessidade em 30 dias ≥ 80% do disponível — linha no vermelho
   do caminhão das compras atrasadas (--danger) */
tr.linha-alerta-30 > td { background-color: color-mix(in srgb, var(--danger) 22%, transparent); }

/* ---------- Home: card Metas do mês (barras + gráfico do mês) ---------- */
.metas-linhas { display: flex; flex-direction: column; gap: 14px; margin: 6px 0 16px; }
.meta-linha-topo, .meta-linha-rodape { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.meta-linha-rotulo { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--primary); font-weight: 600; }
.meta-linha-valores { font-size: 11px; color: var(--text); }
.meta-linha-rodape { font-size: 10px; color: var(--text-muted); margin-top: 4px; }
.meta-barra { position: relative; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 13%, transparent); overflow: hidden; margin-top: 5px; }
.meta-barra-feito { position: relative; height: 100%; border-radius: 999px; background: var(--primary); transition: width 0.6s ease; }
.meta-linha.batida .meta-barra-feito { background: var(--success); }
.meta-grafico svg { width: 100%; height: auto; display: block; overflow: visible; }
.meta-grade { stroke: rgba(var(--card-border-rgb), var(--card-border-opacity, 55%)); stroke-width: 1; }
.meta-eixo { font-size: 14px; fill: var(--text-soft); font-family: var(--font-body); }
.meta-area { fill: url(#graf-area-fria) !important; stroke: none; }
.meta-vendido { fill: none; stroke: url(#graf-fria) !important; stroke-width: 2.8; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.meta-hoje { fill: var(--primary); stroke: #fff; stroke-width: 1.5; }
.meta-ritmo { fill: none; stroke: var(--text-soft); stroke-width: 1.2; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.meta-alvo { stroke: var(--accent-deep); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.meta-minimo { stroke: var(--danger); stroke-width: 1.4; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.meta-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 10px; color: var(--text-muted); margin-top: 8px; }
.meta-legenda i { display: inline-block; width: 14px; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: 6px; }
.meta-legenda .leg-vendido { border-color: var(--primary); }
.meta-legenda .leg-ritmo { border-top: 1.5px dashed var(--text-soft); }
.meta-legenda .leg-alvo { border-color: var(--accent-deep); }
.meta-legenda .leg-minimo { border-top: 2px dotted var(--danger); }
.meta-barra-previsto { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: color-mix(in srgb, var(--primary) 35%, transparent); }

/* Stat de alerta (ex: Pedir agora/Pedir em breve no Estoque): a borda na
   cor do alerta sempre (.stat-borda-*); o vidro colorido e o rótulo só com
   valor > 0 (.stat-alerta-*) — vermelho da paleta (--danger) ou âmbar (--warn) */
.stat-card.stat-alerta-danger, .stat-card.stat-borda-danger { border-color: var(--danger); }
.stat-card.stat-alerta-danger::before { background: color-mix(in srgb, var(--danger) 14%, transparent); }
.stat-card.stat-alerta-warn, .stat-card.stat-borda-warn { border-color: var(--warn); }
.stat-card.stat-alerta-warn::before { background: color-mix(in srgb, var(--warn) 12%, transparent); }
.stat-card.stat-alerta-danger .label { color: var(--danger); }
.stat-card.stat-alerta-warn .label { color: var(--warn); }

/* Estoque: produto com pedido de compra ainda não recebido */
.badge.transito { color: #fff; background: var(--warn); border-color: var(--warn); }

/* Condições de pagamento (orçamento/plano): um card só, cada condição uma
   linha dele separada por um filete — "+ Nova condição" acrescenta linha,
   não abre outro card */
#condicoes-container:has(> .condicao-pagamento-row) {
  position: relative; isolation: isolate;
  border: var(--card-border-width, 1px) solid rgba(var(--card-border-rgb), var(--card-border-opacity, 55%));
  border-radius: var(--radius); margin-bottom: 8px;
}
#condicoes-container:has(> .condicao-pagamento-row)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(var(--card-fill-rgb), var(--card-fill-opacity, 0%));
}
#condicoes-container > .condicao-pagamento-row { border: 0; border-radius: 0; margin: 0; padding: 12px 16px; }
#condicoes-container > .condicao-pagamento-row::before { display: none; }
#condicoes-container > .condicao-pagamento-row + .condicao-pagamento-row {
  border-top: 1px solid rgba(var(--card-border-rgb), var(--card-border-opacity, 55%));
}

/* Orçamento › Distribuição: cascata igual ao RESUMO FINANCEIRO do extrato */
.distribuicao-cascata { width: 100%; border-collapse: collapse; margin-top: 8px; }
.distribuicao-cascata td { padding: 7px 4px; font-size: 11px; border-bottom: 1px solid rgba(var(--card-border-rgb), var(--card-border-opacity, 55%)); }
.distribuicao-cascata td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.distribuicao-cascata tr.sub td { color: var(--danger); padding-left: 16px; } /* tudo que é (−) desconto, em vermelho */
.distribuicao-cascata tr.sub td:last-child { padding-left: 4px; }
.distribuicao-cascata tr.forte td { font-weight: 700; }
.distribuicao-cascata tr.destaque td { font-weight: 700; color: var(--primary); text-transform: none; background: color-mix(in srgb, var(--primary) 8%, transparent); }
.distribuicao-cascata .dist-margem { font-weight: 400; color: var(--text-muted); font-size: 10px; }

/* ⋮ no canto superior direito de uma seção colapsável (ex: Comissionamento
   dentro da Distribuição do orçamento), à esquerda da setinha */
.secao-com-menu { position: relative; }
.secao-menu-canto { position: absolute; top: 16px; right: 58px; z-index: 5; } /* à esquerda da setinha, sem encostar */
.kebab-comissionamento { min-width: 260px; padding: 12px 14px; }
.kebab-comissionamento .kebab-titulo { font-family: var(--font-display); font-size: 14px; margin: 0 0 4px; }
.kebab-comissionamento .kebab-ajuda { font-size: 10px; margin: 0 0 10px; }
.kebab-comissionamento .checkbox-lista { display: flex; flex-direction: column; gap: 8px; }
/* 3º nível: detalhe do custo (por centro de custo), recuado sob o custo */
.distribuicao-cascata tr.sub3 td { color: color-mix(in srgb, var(--danger) 70%, var(--text-muted)); font-size: 10px; padding: 4px 4px 4px 32px; }
.distribuicao-cascata tr.sub3 td:last-child { padding-left: 4px; }
/* 4º nível: componentes de cada item (associação, composição, subitens) */
.distribuicao-cascata tr.sub4 td { color: color-mix(in srgb, var(--danger) 50%, var(--text-muted)); font-size: 9.5px; padding: 2px 4px 2px 48px; border-bottom: none; }
.distribuicao-cascata tr.sub4 td:last-child { padding-left: 4px; }
/* 5º nível: componentes de um subitem (ex: insumos da administração) */
.distribuicao-cascata tr.sub5 td { color: color-mix(in srgb, var(--danger) 35%, var(--text-soft)); font-size: 9px; padding: 1px 4px 1px 64px; border-bottom: none; }
.distribuicao-cascata tr.sub5 td:last-child { padding-left: 4px; }
.distribuicao-cascata .dist-qtd { opacity: 0.75; }

/* Janela de confirmação do sistema (confirmar_envio.js) */
dialog.dialog-confirmar-envio { max-width: 440px; }
.dialog-confirmar-envio-msg { white-space: pre-line; font-size: var(--fs-base); line-height: 1.55; margin: 0; }

/* Compras: etiqueta de status do card (Pedido de compra, Cotação…) só com a
   borda colorida — texto na mesma cor, sem preenchimento */
.compra-tl-topo .badge.warn { background: transparent; color: var(--warn); border-color: var(--warn); }
.compra-tl-topo .badge.ok { background: transparent; color: var(--primary); border-color: var(--primary); }
.compra-tl-topo .badge.danger { background: transparent; color: var(--danger); border-color: var(--danger); }

/* "Aprovada em" ao lado do Fechar venda avulsa: a data real da venda */
.data-aprovacao-avulsa { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-base); color: var(--text-muted); font-weight: normal; margin: 0; }
.data-aprovacao-avulsa input[type="date"] { width: auto; margin: 0; padding: 6px 8px; }

/* ---------- Dashboard do gestor (estoque/dashboard.py) ---------- */
.dash-cabecalho { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.dash-cabecalho .muted { margin: 2px 0 0; }
.dash-mes { display: flex; align-items: center; gap: 8px; }
.dash-mes .icon-btn { font-size: 18px; line-height: 1; text-decoration: none; }
.dash-mes-rotulo { position: relative; font-family: var(--font-display); font-size: 18px; padding: 4px 10px; cursor: pointer; min-width: 170px; text-align: center; white-space: nowrap; }
.dash-mes-rotulo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.dash-mes-rotulo input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.dash-hoje { margin-left: 4px; }

/* 6 números: 3 + 3, ou uma linha só em tela larga (nunca 4 + 2) */
.dash-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.dash-kpi { margin: 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.dash-kpi-rotulo { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--primary); font-weight: 600; }
.dash-kpi-valor { font-family: var(--font-display); font-size: 24px; font-weight: 400; line-height: 1.15; white-space: nowrap; }
.dash-kpi-valor.negativo, .dash-destaque.negativo, .dash-proximo-saldo.negativo { color: var(--danger); }
.dash-kpi-rodape { font-size: 10px; color: var(--text-muted); }
.dash-var { font-weight: 600; }
.dash-var.bom { color: var(--success); }
.dash-var.ruim { color: var(--danger); }

.dash-card { min-width: 0; }
.dash-card h2 { margin: 0; }
.dash-card-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.dash-destaque { font-family: var(--font-display); font-size: 20px; }
.dash-grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.dash-grade-2 > .card { margin-bottom: 20px; }
@media (max-width: 1000px) { .dash-grade-2 { grid-template-columns: 1fr; gap: 0; } }

.dash-svg { width: 100%; height: auto; display: block; overflow: visible; }
.dash-grafico-rolagem { overflow-x: auto; }
@media (max-width: 640px) { .dash-svg-largo { min-width: 640px; } }
.dash-grade { stroke: rgba(var(--card-border-rgb), var(--card-border-opacity, 55%)); stroke-width: 1; }
.dash-eixo { font-size: 12px; fill: var(--text-soft); font-family: var(--font-body); }
.dash-eixo.escolhido { fill: var(--text); font-weight: 700; }
.dash-faixa { fill: transparent; transition: fill 0.15s; }
a:hover .dash-faixa { fill: color-mix(in srgb, var(--primary) 6%, transparent); }
.dash-faixa.escolhida { fill: color-mix(in srgb, var(--primary) 10%, transparent); }
.dash-barra-vendido { fill: color-mix(in srgb, var(--sage) 40%, transparent); }
.dash-barra-faturamento { fill: url(#graf-barra-fria); }
.dash-linha-saidas { fill: none; stroke: url(#graf-quente) !important; stroke-width: 2.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dash-ponto-saidas { fill: var(--danger); stroke: #fff; stroke-width: 1.5; cursor: pointer; }
.dash-linha-meta { stroke: var(--accent-deep); stroke-width: 1.4; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.dash-linha-equilibrio { stroke: var(--danger); stroke-width: 1.4; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.dash-linha-ritmo { fill: none; stroke: var(--text-soft); stroke-width: 1.2; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.dash-area-vendido { fill: url(#graf-area-fria) !important; }
.dash-linha-vendido { fill: none; stroke: url(#graf-fria) !important; stroke-width: 2.8; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dash-linha-faturamento { fill: none; stroke: var(--primary); stroke-width: 2.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dash-ponto-invisivel { fill: transparent; cursor: pointer; }
.dash-ponto-invisivel:hover { fill: color-mix(in srgb, var(--accent-deep) 35%, transparent); }
.dash-ponto-hoje { fill: var(--accent-deep); stroke: #fff; stroke-width: 1.5; }
.dash-linha-zero { stroke: var(--text-soft); stroke-width: 1; }
.dash-conector { stroke: var(--text-soft); stroke-width: 1; stroke-dasharray: 2 2; }
.dash-cascata-total { fill: var(--primary); }
.dash-cascata-sai { fill: color-mix(in srgb, var(--danger) 70%, transparent); }
.dash-cascata-resultado { fill: var(--success); }
.dash-cascata-negativo { fill: var(--danger); }
.dash-cascata-valor { font-size: 11px; fill: var(--text-muted); font-family: var(--font-body); }
.dash-cascata-rotulo { font-size: 10.5px; }
rect.grafico-ponto:hover { filter: brightness(1.12); }

.dash-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 10px; color: var(--text-muted); margin-top: 8px; }
.dash-card-topo .dash-legenda { margin-top: 0; }
.dash-legenda i { display: inline-block; vertical-align: middle; margin-right: 6px; }
.dash-legenda .leg-barra { width: 10px; height: 10px; border-radius: 3px; }
.dash-legenda .leg-linha { width: 16px; height: 0; border-top: 2px solid; }
.leg-vendido { background: color-mix(in srgb, var(--accent) 75%, transparent); }
.leg-faturamento { background: var(--primary); }
.leg-faturamento-claro { background: color-mix(in srgb, var(--primary) 30%, transparent); }
.leg-lucro { background: var(--success); }
.leg-saidas-b { background: color-mix(in srgb, var(--danger) 70%, transparent); }
.dash-legenda .leg-saidas { border-color: var(--danger); }
.dash-legenda .leg-meta { border-top: 2px dashed var(--accent-deep); }
.dash-legenda .leg-equilibrio { border-top: 2px dotted var(--danger); }
.dash-legenda .leg-ritmo { border-top: 1.5px dashed var(--text-soft); }
.dash-legenda .leg-vendido-l { border-color: var(--accent-deep); }
.dash-legenda .leg-faturamento-l { border-color: var(--primary); }
.dash-nota { font-size: 10px; color: var(--text-muted); margin: 10px 0 0; }
.dash-sub-nota { margin-top: -6px; }

.dash-barras-meta { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.dash-barra-meta-topo { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; }
.dash-barra-meta-topo span:first-child { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--primary); font-weight: 600; }
.dash-feito-equilibrio { background: var(--danger); }
.dash-barra-meta.batida .dash-feito-equilibrio { background: var(--success); }

.dash-lista-barras { display: flex; flex-direction: column; gap: 14px; }
.dash-lb-topo { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; }
.dash-lb-nome { font-weight: 600; }
.dash-lb-barra { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 10%, transparent); margin: 5px 0 4px; overflow: hidden; }
.dash-lb-barra > div { height: 100%; border-radius: 999px; background: var(--primary); transition: width 0.6s ease; }
.dash-lb-empilhada > div { background: color-mix(in srgb, var(--primary) 30%, transparent); }
.dash-lb-lucro { height: 100%; background: var(--success); border-radius: 999px; }
.dash-lb-rodape { font-size: 10px; color: var(--text-muted); }

.dash-mini-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; margin-bottom: 16px; }
.dash-mini-kpis > div { display: flex; flex-direction: column; padding: 10px 12px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--primary) 7%, transparent); }
.dash-mini-kpis strong { font-family: var(--font-display); font-size: 20px; font-weight: 400; }
.dash-mini-kpis span { font-size: 10px; color: var(--text-muted); }
.dash-mini-kpis .alerta { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.dash-sub { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--primary); font-weight: 600; margin: 0 0 8px; }
.dash-renovar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dash-renovar li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 11px; }
.dash-renovar li a { font-weight: 600; color: var(--text); text-decoration: none; }
.dash-renovar .badge { margin-left: auto; }

.dash-proximos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: end; margin-top: 8px; }
.dash-proximo { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dash-proximo-barras { height: 150px; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 6px; border-bottom: 1px solid rgba(var(--card-border-rgb), var(--card-border-opacity, 55%)); }
.dash-pb { width: 28%; max-width: 38px; min-height: 2px; border-radius: 4px 4px 0 0; transition: height 0.6s ease; }
.dash-pb-f { background: var(--primary); }
.dash-pb-s { background: color-mix(in srgb, var(--danger) 70%, transparent); }
.dash-proximo-mes { font-size: 11px; color: var(--text-muted); }
.dash-proximo-saldo { font-size: var(--fs-base); font-weight: 600; color: var(--success); }
.dash-renovar li a:hover { color: var(--primary); text-decoration: underline; }
/* gráficos dos cards de meia largura: o viewBox de 600 encolhe ~pela metade */
.dash-grade-2 .dash-eixo { font-size: 18px; }
.dash-grade-2 .dash-cascata-rotulo { font-size: 17px; }
.dash-grade-2 .dash-cascata-valor { font-size: 17px; }
@media (max-width: 640px) {
  .dash-cabecalho { align-items: flex-start; }
  .dash-mes { width: 100%; justify-content: space-between; }
  .dash-mes-rotulo { font-size: 15px; min-width: 0; flex: 1; }
  .dash-kpis { gap: 10px; }
  .dash-kpi { padding: 12px 14px; }
  .dash-proximos { gap: 8px; }
}
@media (max-width: 640px) { .dash-kpi-valor { font-size: 17px; } }
@media (min-width: 1400px) { .dash-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 640px) { .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Etiqueta só com a borda (ex: coluna Tipo das tarefas): texto na cor da
   borda, sem preenchimento */
.badge.badge-borda { background: transparent; }
.badge.badge-borda.ok { color: var(--primary); border-color: var(--primary); }
.badge.badge-borda.warn { color: var(--warn); border-color: var(--warn); }
.badge.badge-borda.danger { color: var(--danger); border-color: var(--danger); }
.badge.badge-borda.muted { color: var(--text-muted); border-color: var(--text-soft); }
.lead-secao-cadastro { margin: 26px 0 4px; font-size: var(--fs-destaque); }
.lead-secao-cadastro-ajuda { display: block; margin-bottom: 16px; }
.meta-recebido { fill: none; stroke: var(--success-claro); stroke-width: 2.8; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.meta-linha-falta { white-space: nowrap; }
.meta-linha-rodape > span:first-child { min-width: 0; }

/* Subcard com "+" no canto (card Financeiro da Home): abre o detalhe de
   onde vem o número e passa a ocupar a linha inteira do grid */
.stat-mais {
  position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 999px;
  border: none !important; background: rgba(var(--teal-deep-rgb), .16); color: var(--text);
  opacity: 0; transition: opacity .15s ease;  /* aparece com o mouse no subcard (ver .stat-expansivel) */
  font-size: 14px; line-height: 1; padding: 0; cursor: pointer; display: grid; place-items: center;
}
.stat-mais:hover { opacity: 1; }
.stat-card.destaque .stat-mais { color: var(--destaque-fill-text, var(--text-claro)); background: rgba(255, 255, 255, .18); }
.stat-card.stat-expansivel.aberto { grid-column: 1 / -1; }
.stat-detalhe { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(var(--card-border-rgb), var(--card-border-opacity, 55%)); font-size: 11px; }
.stat-card.destaque .stat-detalhe { border-top-color: rgba(255, 255, 255, 0.25); }
.stat-detalhe ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.stat-detalhe li { display: grid; grid-template-columns: 1fr auto; gap: 1px 10px; align-items: baseline; }
.stat-detalhe li a { color: inherit; text-decoration: none; font-weight: 600; }
.stat-detalhe li a:hover { text-decoration: underline; }
.stat-detalhe li b { grid-column: 2; grid-row: 1; white-space: nowrap; }
.stat-detalhe-meta, .stat-detalhe-origem { grid-column: 1 / -1; opacity: 0.7; font-size: 10px; }
.stat-detalhe p { margin: 0; opacity: 0.7; }
.stat-detalhe-link { display: inline-block; margin-top: 10px; color: inherit; font-size: 10px; }
/* detalhe dentro do subcard verde (destaque): letra clara */
.stat-card.destaque .stat-detalhe, .stat-card.destaque .stat-detalhe a { color: var(--destaque-fill-text, var(--text-claro)); }
/* Resultado do mês (Home): linhas curvas, mais destacadas; tracejado do
   recebido previsto; faixa de cada dia mostra os valores no hover */
.meta-previsto { fill: none; stroke: var(--success-claro); stroke-width: 2; stroke-dasharray: 5 4; opacity: 0.85; vector-effect: non-scaling-stroke; }
.meta-hoje-rec { fill: var(--success-claro); stroke: #fff; stroke-width: 1.5; }
.meta-dia { fill: transparent; cursor: crosshair; }
.meta-dia:hover { fill: color-mix(in srgb, var(--primary) 9%, transparent); }
.meta-legenda .leg-recebido { border-color: var(--success-claro); }
.meta-legenda .leg-previsto { border-top: 2px dashed var(--success-claro); }

/* ---------- Home: card A receber ---------- */
.receber-atrasado { color: var(--danger); font-weight: 600; }
.receber-barras { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: end; margin-top: 10px; }
.receber-coluna { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0; border-radius: var(--radius-sm); }
.receber-coluna:hover { background: color-mix(in srgb, var(--primary) 7%, transparent); }
.receber-barra-trilho { height: 110px; width: 60%; max-width: 34px; display: flex; align-items: flex-end; }
.receber-barra { width: 100%; min-height: 2px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--success-claro), var(--primary)); transition: height 0.6s ease; }
.receber-coluna:first-child .receber-barra { background: linear-gradient(180deg, var(--warn), color-mix(in srgb, var(--warn) 70%, var(--primary))); }
.receber-valor { font-size: 10px; color: var(--text-muted); min-height: 13px; }
.receber-mes { font-size: 10px; color: var(--text-muted); }
.receber-depois { font-size: 10px; margin: 4px 0 0; text-align: right; }
.receber-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 11px; }
.receber-lista li { display: grid; grid-template-columns: 42px 1fr auto; gap: 8px; align-items: baseline; }
.receber-lista li a { color: var(--text); text-decoration: none; }
.receber-lista li a:hover { text-decoration: underline; }
.receber-data { color: var(--text-muted); }
.receber-lista li.atrasado .receber-data, .receber-lista li.atrasado b { color: var(--danger); }

/* Teto de gasto (Home pessoal): a barra muda de cor pela faixa — e o texto
   ao lado ("faltam"/"passou") diz a mesma coisa, nunca só a cor. */
.teto-linha.teto-ok .grafico-barra-h-fill { background: var(--success); }
.teto-linha.teto-atencao .grafico-barra-h-fill { background: var(--warn); }
.teto-linha.teto-estourou .grafico-barra-h-fill { background: var(--danger); }
.teto-linha.teto-estourou .grafico-barra-h-valor { color: var(--danger); font-weight: 600; }
.grafico-barra-h-linha.teto-linha { grid-template-columns: 130px 1fr 125px; }

/* Home pessoal: cards em colunas CSS sem o mosaico do Enterprise — sem
   isso o navegador parte um card entre as duas colunas (o vidro com
   backdrop-filter faz o break-inside ser ignorado); inline-block de largura
   total deixa o card indivisível. Valores grandes (R$ 196.084,00) encolhem
   com a largura do card em vez de vazar pra fora ou quebrar o "R$". */
.home-grid-pessoal > .card { display: inline-block; width: 100%; break-inside: avoid; vertical-align: top; }
.home-grid-pessoal .stat-card { container-type: inline-size; padding: 16px 14px; }
.home-grid-pessoal .stat-card .value { white-space: nowrap; font-size: clamp(15px, 14cqi, 28px); }

/* caixinha de seleção dentro de uma célula com texto (Despesas: Data):
   centralizadas entre si, sem empurrar a linha de base do texto pra baixo */
.celula-com-caixa { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.celula-com-caixa > input[type="checkbox"] { width: auto; margin: 0; }

/* Despesas: soma do mês entre os filtros e a lista */
.despesa-totais { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: baseline; margin-bottom: 16px; padding: 12px 18px; }
.despesa-totais-item { display: flex; flex-direction: column; gap: 2px; }
.despesa-totais-item .valor { font-size: 16px; font-weight: 600; white-space: nowrap; }
.despesa-totais-item .rotulo { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }

/* Despesas: cartão como etiqueta na cor do banco */
.badge.tag-cartao { color: #fff; border: none; }
.badge.tag-cartao-itau { background: var(--cartao-itau); }      /* laranja Itaú */
.badge.tag-cartao-sisprime { background: var(--cartao-sisprime); }  /* azul Sisprime */
.badge.tag-cartao-unicred { background: var(--cartao-unicred); }   /* verde Unicred */
/* card de um banco (ex.: fatura no Reembolso da clínica): faixa à esquerda na cor do banco */
.card-banco { border-left: 4px solid var(--cor-banco, var(--border)); }
.card-banco-itau { --cor-banco: var(--cartao-itau); }
.card-banco-sisprime { --cor-banco: var(--cartao-sisprime); }
.card-banco-unicred { --cor-banco: var(--cartao-unicred); }
/* a etiqueta do banco sai da própria faixa lateral, como uma lingueta:
   colada à esquerda, todas do mesmo comprimento, texto alinhado à direita (26/10) */
.card-banco { --card-pad-x: 24px; }
.card-banco h2 .tag-cartao {
  box-sizing: border-box; width: 96px; margin-left: calc(-1 * var(--card-pad-x)); margin-right: 10px;
  padding: 5px 12px 5px 0; text-align: right; font-size: 11px; line-height: 1.4;
  border-radius: 0 999px 999px 0; top: 0;
}
@media (max-width: 760px) { .card-banco { --card-pad-x: 14px; } }

/* Despesas: caixinhas da edição em lote só com o botão "Edição em lote" ligado */
body:not(.modo-lote) .celula-com-caixa > .lote-check,
body:not(.modo-lote) .celula-com-caixa > .lote-todas { display: none; }

/* Cabeçalho de tabela descendo junto com a rolagem, feito pelo navegador
   (animation-timeline) — cabecalho_fixo.js só põe as variáveis de onde
   começa (--cab-ini), onde termina (--cab-fim) e quanto anda (--cab-d). */
@keyframes cabecalho-desce { from { transform: translateY(0); } to { transform: translateY(var(--cab-d, 0px)); } }
tr.cabecalho-suave > th,
.vidro-tabela-cabecalho.suave,
.vidro-tabela-canto.suave {
  animation: cabecalho-desce linear both;
  animation-timeline: scroll(root block);
  animation-range: var(--cab-ini, 0px) var(--cab-fim, 1px);
  will-change: transform;
}

/* Despesas: modo de edição (lápis flutuante no canto inferior esquerdo) */
.botao-edicao-flutuante {
  position: fixed; left: 24px; bottom: 24px; z-index: 30;
  width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--primary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18); opacity: .75; transition: opacity .15s, background .15s;
}
.botao-edicao-flutuante:hover { opacity: 1; }
.botao-edicao-flutuante svg { width: 16px; height: 16px; }
body.modo-edicao .botao-edicao-flutuante { background: var(--primary); color: #fff; opacity: 1; }
body.modo-edicao table[data-cols-key="despesas"] td[data-campo] { cursor: text; outline: 1px dashed transparent; outline-offset: -3px; }
body.modo-edicao table[data-cols-key="despesas"] td[data-campo]:hover { outline-color: color-mix(in srgb, var(--primary) 55%, transparent); border-radius: 6px; }
td.editando { padding: 3px 4px !important; }
.campo-edicao-celula { width: 100%; min-width: 110px; font-size: 10px; padding: 4px 6px; }
td.salvando { opacity: .5; }
td.salvo { background: color-mix(in srgb, var(--success) 18%, transparent); transition: background 1s; }

/* Balanço (Personnel): gastos rotineiros com teto */
.rotineiros-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.rotineiro-card { border: 1px solid rgba(var(--card-border-rgb), var(--card-border-opacity, 55%)); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rotineiro-topo { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rotineiro-nome { font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rotineiro-teto { font-size: 9.5px; color: var(--text-muted); white-space: nowrap; text-decoration: none; border-bottom: 1px dotted currentColor; }
.rotineiro-valor { font-size: 16px; font-weight: 600; white-space: nowrap; }
.rotineiro-rosca { width: 96px; height: 96px; }
.rosca-trilha { fill: none; stroke: rgba(var(--card-border-rgb), .9); stroke-width: 3.2; }
.rosca-arco { fill: none; stroke-width: 3.2; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; stroke: var(--success); }
.rotineiro-atencao .rosca-arco { stroke: var(--warn); }
.rotineiro-estourou .rosca-arco { stroke: var(--danger); }
.rosca-texto { font-size: 7px; font-weight: 600; fill: var(--text); }
.rotineiro-rodape { width: 100%; display: flex; justify-content: space-between; gap: 8px; font-size: 9.5px; flex-wrap: wrap; }
.rotineiro-passou { color: var(--danger); font-weight: 600; }

.rotineiro-barras { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.rotineiro-barra-linha { display: grid; grid-template-columns: 140px 1fr 150px; gap: 12px; align-items: center; }
.rotineiro-barra-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rotineiro-barra-trilha { position: relative; height: 14px; }
.rotineiro-barra-teto { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: rgba(var(--card-border-rgb), .9); }
.rotineiro-barra-gasto { position: absolute; top: 3px; bottom: 3px; left: 0; border-radius: 4px; background: var(--success); }
.rotineiro-barra-gasto.rotineiro-atencao { background: var(--warn); }
.rotineiro-barra-gasto.rotineiro-estourou { background: var(--danger); }
.rotineiro-barra-media { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--text); border-radius: 1px; }
.rotineiro-barra-valores { text-align: right; white-space: nowrap; }
.rotineiro-legenda-teto { background: rgba(var(--card-border-rgb), .9); }
.rotineiro-legenda-media { width: 2px !important; background: var(--text); }
@media (max-width: 640px) { .rotineiro-barra-linha { grid-template-columns: 90px 1fr; } .rotineiro-barra-valores { grid-column: 1 / -1; text-align: left; } }

/* Balanço anual */
.balanco-tabela tr.balanco-selecionado > td { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.balanco-tabela tr.balanco-futuro > td { font-style: italic; }
.balanco-tabela tr.balanco-total > td { font-weight: 700; border-top: 2px solid rgba(var(--card-border-rgb), 1); }
.balanco-negativo { color: var(--danger); }
.balanco-positivo { color: var(--success); }

/* tabelinha simples dentro de card (Home pessoal: Júnior) */
table.tabela-compacta { width: 100%; border-collapse: collapse; }
table.tabela-compacta td { padding: 6px 4px; border-bottom: 1px solid rgba(var(--card-border-rgb), var(--card-border-opacity, 55%)); }
table.tabela-compacta tr:last-child td { border-bottom: none; }
/* Home pessoal (mosaico): valor grande numa linha, encolhendo com o card */
.home-pessoal-cards .stat-card { container-type: inline-size; padding: 16px 14px; }
.home-pessoal-cards .stat-card .value { white-space: nowrap; font-size: clamp(15px, 14cqi, 28px); }

/* ---------- Gráficos no estilo de 05/10/2026 ----------
   Curvas suaves com gradiente ao longo da linha, área que esmaece, marcadores
   com haste até o eixo e rótulo; roscas segmentadas em tracinhos. Gradientes
   em _graficos_defs.html (base.html). */
.rosca-seg { display: block; }
.rosca-seg-vazio { fill: none; stroke: color-mix(in srgb, var(--text-muted) 55%, transparent); stroke-width: .7; }
.rosca-seg-centro { font-size: 15px; font-weight: 300; fill: var(--text); letter-spacing: .02em; }
.graf-linha { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.graf-linha.fria { stroke: url(#graf-fria); }
.graf-linha.quente { stroke: url(#graf-quente); }
.graf-linha.sol { stroke: url(#graf-sol); }
.graf-area { stroke: none; }
.graf-area.fria { fill: url(#graf-area-fria); }
.graf-area.quente { fill: url(#graf-area-quente); }
.graf-area.sol { fill: url(#graf-area-sol); }
.graf-grade { stroke: rgba(var(--card-border-rgb), .9); stroke-width: 1; vector-effect: non-scaling-stroke; }
.graf-haste { stroke: color-mix(in srgb, var(--text) 45%, transparent); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.graf-marca { fill: var(--surface, #fff); stroke: color-mix(in srgb, var(--text) 55%, transparent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.graf-rotulo { font-size: 11px; fill: var(--text-muted); }
.graf-rotulo b, .graf-rotulo-forte { fill: var(--text); font-weight: 600; }
/* colunas iguais ocupando a largura toda do card, cada rosca centrada na sua */
.rosca-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); justify-items: center; gap: 18px 6px; }
.rosca-item { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 96px; }
.rosca-item-titulo { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; color: var(--primary); text-align: center; }
.rosca-item-sub { font-size: 9.5px; color: var(--text-muted); text-align: center; }
.rosca-grade-3 { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 8px; }
.rosca-grade-3 .rosca-item { min-width: 0; flex: 1; }
/* "+" dos subcards só aparece com o mouse em cima (ou aberto / foco pelo teclado);
   em tela de toque, sempre visível */
.stat-expansivel { position: relative; }
.stat-expansivel:hover .stat-mais, .stat-mais:focus-visible, .stat-expansivel.aberto .stat-mais { opacity: .75; }
.stat-expansivel .stat-mais:hover { opacity: 1; }
@media (hover: none) { .stat-mais { opacity: .7; } }

/* Home em grade de 4 colunas (home_cards.js): cada card pede N colunas e
   quantas linhas de 4px precisa; dense encaixa os menores nos vãos */
.home-grid.home-grid-4 {
  display: grid; column-count: initial; position: relative;
  grid-template-columns: repeat(var(--home-cols, 4), minmax(0, 1fr));
  grid-auto-rows: 4px; column-gap: 20px; row-gap: 0; grid-auto-flow: row dense;
}
.home-grid.home-grid-4 > .card.home-card { align-self: start; margin: 0; position: relative; transform: none; width: auto; min-width: 0; }
.home-grid.home-grid-4 > .card.home-card.altura-fixa { overflow: auto; }
.home-grid.home-grid-4 > .card.home-card.arrastando { opacity: .55; cursor: grabbing; box-shadow: 0 12px 30px rgba(var(--text-rgb), .18); }
.home-grid.home-grid-4 > .card.home-card.redimensionando { outline: 2px dashed color-mix(in srgb, var(--primary) 50%, transparent); outline-offset: 2px; }
.home-card-redim {
  position: absolute; right: 7px; bottom: 7px; width: 13px; height: 13px; cursor: nwse-resize; opacity: 0;
  border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); border-bottom-right-radius: 3px;
  transition: opacity .15s ease; z-index: 3;
}
.home-card:hover .home-card-redim, .home-card.redimensionando .home-card-redim { opacity: .65; }
@media (hover: none) { .home-card-redim { display: none; } }

/* ---------- 05/10/2026: interação e vidro fumê ---------- */
/* linha vertical que segue o mouse (crosshair.js) + balão com várias linhas */
.graf-cruzamento { stroke: color-mix(in srgb, var(--text) 55%, transparent); stroke-width: 1.2; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.grafico-tooltip .grafico-tooltip-linha { display: flex; justify-content: space-between; gap: 14px; white-space: nowrap; }

/* lista do "+" rola dentro do subcard em vez de cortar em 10 */
.stat-detalhe-rolagem { max-height: 260px; overflow-y: auto; padding-right: 6px; overscroll-behavior: contain; }

/* subcards: ao passar o mouse escurecem, crescem um pouco e ganham sombra (os dois workspaces) */
.stat-card::before { transition: background-color .18s ease; }
.stat-card:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 14px 30px rgba(var(--text-rgb), .18), 0 3px 8px rgba(var(--text-rgb), .08); z-index: 2; }
.stat-card:not(.destaque):hover::before { background: rgba(var(--teal-deep-rgb), .10); }
.stat-card.destaque:hover::before { filter: brightness(.9); }
.stat-card.stat-expansivel.aberto:hover { transform: none; }

/* "↗" dos cards da Home: aparece com o mouse dentro do card */
.home-card:hover .home-card-link, .home-card-link:focus-visible { opacity: 1; }
.home-card-link:hover { background: rgba(var(--teal-deep-rgb), .26); }
@media (hover: none) { .home-card-link { opacity: 1; } }

/* vidro fumê nos cards da Home (os dois workspaces), com tons da paleta alternando */
.home-grid > .card.home-card::before {
  background: var(--vidro-degrade-claro), linear-gradient(160deg, rgba(var(--teal-deep-rgb), .17), rgba(var(--teal-deep-rgb), .09));
  backdrop-filter: blur(calc(var(--glass-blur, 16px) + 6px)) saturate(150%) contrast(0.8) brightness(1.04);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur, 16px) + 6px)) saturate(150%) contrast(0.8) brightness(1.04);
}
.home-grid > .card.home-card:nth-child(3n+2)::before { background: var(--vidro-degrade-claro), linear-gradient(160deg, rgba(120, 118, 96, .17), rgba(120, 118, 96, .08)); }
.home-grid > .card.home-card:nth-child(3n)::before { background: var(--vidro-degrade-claro), linear-gradient(160deg, rgba(153, 165, 151, .22), rgba(153, 165, 151, .10)); }

/* conteúdo acompanha o tamanho do card (Home redimensionável) */
.home-grid > .card.home-card { container-type: inline-size; }
@container (max-width: 290px) {
  .stat-grid { grid-template-columns: 1fr; }
  .rosca-grade-3 { flex-wrap: wrap; justify-content: center; }
  .grafico-barra-h-linha.teto-linha { grid-template-columns: 90px 1fr; }
}
@container (min-width: 760px) {
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}
/* saldo negativo em vermelho (no card escuro, tom claro do vermelho da paleta) */
.stat-card .value.valor-negativo { color: var(--danger); }
.stat-card.destaque .value.valor-negativo { color: color-mix(in srgb, var(--danger) 45%, var(--text-claro)); }
/* card de altura definida pelo usuário: não rola; só rola se um "+" aberto não couber */
.home-grid.home-grid-4 > .card.home-card.altura-fixa { overflow: hidden; }
.home-grid.home-grid-4 > .card.home-card.altura-fixa:has(.stat-expansivel.aberto) { overflow-y: auto; }

/* Categorias de despesa: cards compactos, subcategorias como etiquetas */
.categoria-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.categoria-card-compacto { margin: 0; padding: 16px 18px; }
.categoria-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.categoria-titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; }
.categoria-titulo h2 { margin: 0; font-size: 16px; }
.sub-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.sub-etiqueta {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px;
  background: rgba(var(--teal-deep-rgb), .10); color: var(--text); font-size: 10px; text-decoration: none;
  transition: background-color .15s ease, transform .15s ease;
}
.sub-etiqueta:hover { background: rgba(var(--teal-deep-rgb), .22); transform: translateY(-1px); }
.sub-etiqueta b { font-weight: 600; color: var(--text-muted); }
.sub-etiqueta-nova { background: transparent; border: 1px dashed rgba(var(--teal-deep-rgb), .35); color: var(--text-muted); }

/* vidro vermelho: vencido > 0 e saldo negativo */
.stat-card.vidro-vermelho::before { background: color-mix(in srgb, var(--danger) 22%, transparent) !important; }
.stat-card.destaque.vidro-vermelho::before { background: color-mix(in srgb, var(--danger) 70%, var(--teal-deep)) !important; }
.stat-card.destaque.vidro-vermelho .value.valor-negativo { color: var(--text-claro); }
.stat-card.vidro-vermelho:not(.destaque) .value { color: var(--danger); }

/* subcard sendo arrastado dentro do card */
.home-grid .stat-card { cursor: grab; }
.home-grid .stat-card.sub-arrastando { opacity: .6; cursor: grabbing; transform: scale(1.03); box-shadow: 0 16px 34px rgba(var(--text-rgb), .22); }
/* rótulos dos subcards da Home menores (05/10) — cabem no card estreito */
.home-grid .stat-card .label { font-size: 9.5px; line-height: 1.45; letter-spacing: .03em; }
/* subcards de um mesmo card com o mesmo tamanho (todas as linhas da altura
   da maior); com um "+" aberto, volta ao automático pra não esticar os outros */
.home-grid .stat-grid { grid-auto-rows: 1fr; align-items: stretch; }
.home-grid .stat-grid:has(.stat-expansivel.aberto) { grid-auto-rows: auto; }
/* card Investimentos: rosca | composição em cima, 3 subcards iguais embaixo */
/* rosca e Total nas mesmas 2 colunas (e mesmo espaçamento) dos subcards de baixo */
.inv-topo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; margin-bottom: 14px; }
.inv-rosca { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.inv-total > .stat-card { display: flex; flex-direction: column; justify-content: center; }
.inv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; }
.inv-total { grid-template-columns: 1fr; margin-bottom: 0; grid-auto-rows: 1fr; height: 100%; }
@container (max-width: 290px) { .inv-topo { grid-template-columns: 1fr; justify-items: stretch; } .inv-rosca { justify-self: center; } .inv-stats { grid-template-columns: 1fr; } }
/* medida ao vivo enquanto redimensiona (colunas · altura em degraus de 40 px) */
.home-card.redimensionando[data-medida]::after {
  content: attr(data-medida); position: absolute; right: 26px; bottom: 6px; z-index: 4;
  font-size: 9.5px; letter-spacing: .03em; padding: 3px 8px; border-radius: 999px;
  background: var(--teal-deep); color: var(--text-claro);
}

/* Guia de alinhamento ao redimensionar cards da Home (ajuste magnético) */
.home-guia { position: fixed; height: 0; border-top: 2px dashed var(--warn); margin-top: -1px; pointer-events: none; z-index: 50; opacity: 0; transition: opacity .12s; }
.home-guia.visivel { opacity: .9; }

/* Eixo Y em HTML (fora do SVG): o texto não encolhe junto com o gráfico */
.grafico-com-eixo { position: relative; padding-left: 46px; }
.grafico-eixo-y { position: absolute; left: 0; top: 0; bottom: 0; width: 40px; }
.grafico-eixo-y span { position: absolute; right: 0; transform: translateY(-50%); font-size: 10px; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.grafico-eixo-x-recuo { margin-left: 46px; }
.graf-area.receita-escura { fill: url(#graf-area-escura); }

/* Card "Próximos 6 meses" (Home pessoal) */
.proj-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 0; }
@container (max-width: 290px) { .proj-stats { grid-template-columns: 1fr; } }
.proj-barras { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 10px 0 16px; }
.proj-mes { display: flex; flex-direction: column; align-items: center; gap: 6px; border-radius: var(--radius); padding: 6px 0; cursor: default; transition: background .15s; }
.proj-mes:hover, .proj-mes:focus-visible { background: color-mix(in srgb, var(--primary) 8%, transparent); outline: none; }
.proj-colunas { height: 140px; width: 100%; display: flex; justify-content: center; align-items: flex-end; gap: 4px; }
.proj-col { width: 14px; border-radius: 4px 4px 2px 2px; }
.proj-entra { background: var(--teal); }
.proj-sai { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; }
.proj-lancado { background: var(--danger); border-radius: 2px; }
.proj-teto { background: var(--olive); border-radius: 4px 4px 2px 2px; }
.proj-nome { font-size: 10px; color: var(--text-muted); }
.grafico-tooltip .proj-balao-linha { display: flex; justify-content: space-between; gap: 14px; font-variant-numeric: tabular-nums; }

/* Cabeçalho da Home: saudação + dia e hora em letra pequena logo abaixo */
.home-cabecalho h1 { margin-bottom: 2px; }
.home-relogio { font-size: 11px; color: var(--text-muted); letter-spacing: .02em; min-height: 1.4em; }

/* Agenda fixa no topo da barra (compartilhada entre os workspaces) */
.sidebar-divisor { height: 1px; margin: 6px 14px 8px; background: rgba(var(--text-claro-rgb), 0.18); }
dialog.dialogo-escopo { max-width: 360px; }
.dialogo-escopo h3 { margin: 0 0 6px; }
.dialogo-escopo-opcoes { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.dialogo-escopo-opcoes .btn { width: 100%; justify-content: center; }

/* ---------- Celular: barra lateral vira gaveta (ver sidebar.js) ----------
   No iPhone a barra recolhida ainda tomava ~25% da largura. Até 760px ela
   fica escondida à esquerda; um botão redondo flutuante no canto inferior
   esquerdo abre por cima de tudo (fecha sozinha em 5 s sem uso). */
.menu-flutuante, .menu-veu { display: none; }
@media (max-width: 760px) {
  .main, html.sidebar-recolhida .main { margin-left: 0; }
  .container { padding: 16px 14px 88px; }
  .sidebar, .workspace-topo {
    transform: translateX(calc(-100% - 24px));
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }
  .sidebar { z-index: 70; touch-action: pan-y; top: calc(45px + env(safe-area-inset-top)); bottom: calc(84px + env(safe-area-inset-bottom)); }
  .workspace-topo { z-index: 71; top: calc(16px + env(safe-area-inset-top)); }
  html.menu-aberto .sidebar, html.menu-aberto .workspace-topo { transform: none; }
  html.menu-arrastando .sidebar, html.menu-arrastando .workspace-topo { transition: none; }

  .menu-veu {
    display: block; position: fixed; inset: 0; z-index: 65;
    background: rgba(var(--sombra-rgb), 0.26);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
  }
  html.menu-aberto .menu-veu { opacity: 1; pointer-events: auto; }

  .menu-flutuante {
    display: flex; align-items: center; justify-content: center;
    position: fixed; z-index: 75;
    left: 16px; bottom: calc(18px + env(safe-area-inset-bottom));
    width: 46px; height: 46px; padding: 0; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 65%), rgba(var(--teal-deep-rgb), 0.86);
    backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 -1px 0 rgba(255, 255, 255, 0.08),
      0 10px 24px rgba(var(--sombra-rgb), 0.24), 0 2px 6px rgba(var(--sombra-rgb), 0.14);
    color: var(--text-claro); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, background 0.2s ease;
  }
  .menu-flutuante:active { transform: scale(0.92); }
  .menu-flutuante svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .menu-flutuante-x { display: none; }
  html.menu-aberto .menu-flutuante-linhas { display: none; }
  html.menu-aberto .menu-flutuante-x { display: inline; }
}
@media print { .menu-flutuante, .menu-veu { display: none !important; } }

/* ---------- Celular: ajustes gerais (varredura de 05/10/2026) ---------- */
@media (max-width: 760px) {
  /* abaixo de 16px o iPhone dá zoom na página ao tocar no campo */
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px; }
  input::placeholder, textarea::placeholder { font-size: 16px; }

  h1 { font-size: 22px; }
  .page-header { margin-bottom: 16px; gap: 10px; }
  .card { padding: 16px 14px; margin-bottom: 14px; }

  /* controles segmentados largos (filtros da Agenda, do CRM...) rolam de lado em vez de vazar */
  .segmented { max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .segmented::-webkit-scrollbar { display: none; }
  .segmented-opt { flex: none; }

  /* linhas de botões/filtros quebram em vez de empurrar a página */
  .row { flex-wrap: wrap; }

  /* coluna fixa da tabela só faz sentido com espaço de sobra */
  .table-wrap th.col-fixa, .table-wrap td.col-fixa { position: static; }

  .subitem-linha { margin-left: 12px; }

  /* indicadores (CRM, Vendas, Financeiro...): menores, pra caber mais na tela */
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
  .stat-card { padding: 12px 14px; }
  .stat-card .value { font-size: 22px; }

  /* Listas: tabela larga demais vira uma pilha de cartões (sidebar.js marca
     .tabela-cartoes e copia o título da coluna pra cada célula). */
  table.tabela-cartoes, table.tabela-cartoes tbody, table.tabela-cartoes tr, table.tabela-cartoes td { display: block; width: auto; }
  table.tabela-cartoes thead, table.tabela-cartoes tr.tabela-cartoes-cabecalho { display: none; }
  table.tabela-cartoes tfoot { display: block; }
  table.tabela-cartoes tr { padding: 10px 2px; border-bottom: 1px solid rgba(var(--card-border-rgb), var(--card-border-opacity, 55%)); }
  table.tabela-cartoes tr:last-child { border-bottom: 0; }
  table.tabela-cartoes td {
    display: flex; align-items: baseline; justify-content: flex-end; flex-wrap: wrap; gap: 6px 12px;
    padding: 3px 0; border: 0; text-align: right; white-space: normal; min-height: 0;
  }
  table.tabela-cartoes td[data-rotulo]::before {
    content: attr(data-rotulo); flex: none; max-width: 45%; text-align: left; margin-right: auto;
    font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted);
  }
  table.tabela-cartoes td:first-child { justify-content: flex-start; text-align: left; font-weight: 600; font-size: var(--fs-destaque); }
  table.tabela-cartoes td:first-child::before { display: none; }
  table.tabela-cartoes td:empty { display: none; }
  table.tabela-cartoes td input[type=text] { width: auto; max-width: 55%; text-align: right; }
  table.tabela-cartoes td[colspan] { display: block; text-align: left; }
  table.tabela-cartoes td[colspan]::before { display: none; }
}

/* Item do orçamento em cartão bem estreito (celular): um campo por linha,
   Custo e Valor lado a lado. */
@container (max-width: 480px) {
  .item-linha-principal.linha-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .linha-grade > * { grid-column: 1 / -1 !important; grid-row: auto !important; max-width: none !important; }
  .linha-grade > .campo-custo { grid-column: 1 !important; }
  .linha-grade > .campo-valor { grid-column: 2 !important; }
}

/* Orçamento de aditivo a um plano em andamento */
.aviso-aditivo {
  margin: -4px 0 16px; padding: 12px 16px; border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
  background: color-mix(in srgb, var(--primary) 8%, transparent); font-size: 11px; line-height: 1.6;
}

/* Componentes de um kit (recebimento e "Ativos do lote"): linhas que se
   ajustam à largura — na janela estreita o nome sobe e os 4 campos ficam
   embaixo, todos visíveis (antes a tabela cortava a coluna do pH). */
.ativos-grade { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 4px; }
.ativo-linha { display: grid; grid-template-columns: minmax(160px, 2fr) 1.2fr 1fr 1fr 0.8fr; gap: 8px; align-items: center; }
.ativo-linha label { display: block; margin: 0; }
.ativo-linha label > span { display: none; }
.ativo-linha input { width: 100%; min-width: 0; }
.ativo-cabecalho { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--primary); font-weight: 600; }
.ativo-nome { font-weight: 600; font-size: 11px; }
@media (max-width: 640px) {
  .ativo-cabecalho { display: none; }
  .ativo-linha { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-bottom: 10px; border-bottom: 1px solid rgba(var(--card-border-rgb), var(--card-border-opacity, 55%)); }
  .ativo-nome { grid-column: 1 / -1; }
  .ativo-linha label > span { display: block; font-size: 9.5px; color: var(--text-muted); margin-bottom: 2px; text-transform: uppercase; letter-spacing: .04em; }
}

/* Caixinha da visita: os outros agendamentos da pessoa, discretos */
/* Portal: foto que a paciente pôs no app */
.foto-paciente { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 10px; }
/* Portal: documento que parece ser de outra pessoa (conferência de receita/exame) */
.alerta-identidade { border: 2px solid var(--danger); }
.alerta-identidade h2 { color: var(--danger); }
.visita-diario { margin: -6px 0 14px; padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--surface-muted); border-radius: 8px; font-size: var(--fs-pequeno); }
.visita-diario summary { cursor: pointer; font-weight: 500; margin-bottom: 6px; }
.visita-diario p { margin: 0 0 8px; }
.visita-outros { margin: -6px 0 14px; font-size: var(--fs-pequeno); color: var(--text-muted); }
.visita-outros summary { cursor: pointer; list-style: none; }
.visita-outros summary::before { content: "›"; display: inline-block; margin-right: 5px; transition: transform .15s; }
/* "Mover só este": tirar um procedimento da visita (ver _agenda_visita_dialogo.html) */
.visita-separar { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.visita-separar-titulo { margin: 0 0 8px; font-size: var(--fs-pequeno); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); }
.visita-separar-item { margin-bottom: 8px; font-size: 11px; }
.visita-separar-item summary { cursor: pointer; }
.visita-separar-item form { margin: 10px 0 6px; }
.visita-outros[open] summary::before { transform: rotate(90deg); }
.visita-outros ul { list-style: none; margin: 6px 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 3px; max-height: 140px; overflow-y: auto; }
.visita-outros b { color: var(--text); font-weight: 600; margin-right: 4px; }

/* Botão "+" flutuante (canto inferior direito, em toda tela): venda rápida e novo orçamento */
.acao-rapida { position: fixed; right: 24px; bottom: 24px; z-index: 74; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.acao-rapida-botao {
  display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 65%), rgba(var(--teal-deep-rgb), 0.86);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 10px 24px rgba(var(--sombra-rgb), 0.24), 0 2px 6px rgba(var(--sombra-rgb), 0.14);
  color: var(--text-claro); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, background 0.2s ease;
}
.acao-rapida-botao:hover { transform: scale(1.06); }
.acao-rapida-botao:active { transform: scale(0.94); }
.acao-rapida-botao svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform 0.2s ease; }
.acao-rapida.aberto .acao-rapida-botao svg { transform: rotate(45deg); }
.acao-rapida-itens {
  display: flex; flex-direction: column; min-width: 170px; padding: 6px; border-radius: var(--radius);
  background: var(--surface); box-shadow: 0 10px 28px rgba(var(--sombra-rgb), 0.22), 0 2px 6px rgba(var(--sombra-rgb), 0.12);
}
.acao-rapida-itens[hidden] { display: none; }
.acao-rapida-itens a { padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; white-space: nowrap; }
.acao-rapida-itens a:hover, .acao-rapida-itens a:focus-visible { background: var(--surface-muted); }
@media (max-width: 760px) { .acao-rapida { right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); } }
@media print { .acao-rapida { display: none !important; } }

/* Pré-visualização no Mac (banco de teste): faixa + botão Publicar, mesmo preenchimento listrado */
.faixa-ambiente-teste {
  position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 9999;
  display: flex; gap: 18px; align-items: center; padding: 8px 8px 8px 24px; border-radius: 999px;
  background: repeating-linear-gradient(135deg, var(--danger), var(--danger) 12px, color-mix(in srgb, var(--danger) 85%, #000) 12px, color-mix(in srgb, var(--danger) 85%, #000) 24px);
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
.faixa-ambiente-teste form { margin: 0; }
.faixa-ambiente-teste span, .faixa-ambiente-teste button {
  color: #fff; font: 700 11px/1.4 var(--font-body); letter-spacing: .1em; white-space: nowrap;
}
.faixa-ambiente-teste button {
  display: inline-block; padding: 8px 18px; border-radius: 999px; border: 1px solid #000;
  background: #111; cursor: pointer;
}
.faixa-ambiente-teste button:hover { filter: brightness(1.4); }

/* Bloqueio da agenda empresarial: hachurado cinza-oliva, atrás das visitas */
.balao-bloqueio {
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--olive-deep) 16%, transparent) 0 6px, color-mix(in srgb, var(--olive-deep) 6%, transparent) 6px 12px);
  border-color: var(--olive-deep); cursor: pointer; z-index: 0;
}
.balao-bloqueio .nome { color: var(--olive-deep); font-weight: 600; }
.agenda-mes-pill.balao-bloqueio { color: var(--olive-deep); }
/* Item modelo: total de custo/valor alinhado à esquerda, junto do rótulo */
#item-modelo-form .item-total-preview { text-align: left; }

/* ---------- Patrimônio: barrinha de % depreciado ---------- */
.bem-barra {
  display: inline-block; width: 56px; height: 6px; border-radius: 999px;
  background: var(--border); overflow: hidden; vertical-align: middle; margin-right: 6px;
}
.bem-barra > span { display: block; height: 100%; background: var(--olive); border-radius: 999px; }

/* Busca rápida em tabelas/listas (busca_tabelas.js) */
.oculta-busca { display: none !important; }
.busca-tabela { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.busca-tabela input[type="search"] { width: 240px; max-width: 100%; }
.busca-tabela-contador { font-size: 10px; white-space: nowrap; }
.busca-tabela-vazio { padding: 12px 4px; }
.cols-toolbar.com-busca { justify-content: space-between; align-items: center; }
.cols-toolbar.com-busca .busca-tabela { margin-bottom: 0; }
@media (max-width: 600px) { .busca-tabela input[type="search"] { width: 100%; font-size: 16px; } }
.busca-tabela input[type="search"] {
  border-radius: 999px;
  padding: 7px 14px 7px 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232c342f' stroke-opacity='.55' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 14px;
}

/* Controle segmentado: opção marcada em vidro escuro, texto claro (variáveis no :root). */
.segmented .segmented-thumb {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 2px 6px rgba(var(--sombra-rgb), 0.22);
}
.segmented .segmented-opt:has(input:checked) { color: var(--text-claro); }
/* Trilho também em vidro escuro (mais leve); opções inativas em texto claro esmaecido. */
.segmented:not(.sidebar-workspace-switch) {
  background: var(--segmented-trilho);
  backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%);
  border-color: rgba(255, 255, 255, 0.10);
}
.segmented:not(.sidebar-workspace-switch) .segmented-opt { color: var(--segmented-texto-inativo); }
.segmented:not(.sidebar-workspace-switch) .segmented-opt:has(input:checked) { color: var(--text-claro); }
/* Sim/Não (segmented.js marca seg-simnao): trilho sem preenchimento, só a borda */
.segmented.seg-simnao:not(.sidebar-workspace-switch) {
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-color: var(--text-soft);
}
.segmented.seg-simnao:not(.sidebar-workspace-switch) .segmented-opt { color: var(--text-muted); }

/* Home no celular: nada vaza para fora do card. */
.home-grid > .card.home-card { min-width: 0; }
.home-card .stat-card { min-width: 0; overflow-wrap: anywhere; }
.home-card .stat-card .value { font-size: clamp(18px, 5.2vw, 28px); white-space: nowrap; }
.home-card .stat-card .label { font-size: 10px; overflow-wrap: normal; word-break: normal; hyphens: auto; }
@media (max-width: 600px) {
  .meta-linha-topo, .meta-linha-rodape { flex-wrap: wrap; }
  .meta-linha-valores { text-align: left; }
  .rosca-grade-3 { gap: 4px; }
  .rosca-grade-3 .rosca-seg { width: 64px; height: 64px; }
  .rosca-item-titulo { font-size: 9px; }
  .home-card .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-card .stat-card .value { font-size: clamp(16px, 5.4vw, 24px); }
}

/* Home · Checagem do dia: paciente e itens a checar */
.checagem-home-lista { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.checagem-home-quem { display: flex; gap: 10px; align-items: baseline; }
.checagem-home-lista ul { list-style: none; margin: 4px 0 0 52px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.checagem-home-lista ul li.pendente { color: var(--text); }
.checagem-home-lista ul li.insumos { color: var(--text-muted); }
.checagem-home-lista ul li.checado { color: var(--text-muted); text-decoration: line-through; }

/* Plano: agenda agrupada por visita, com checagem por item */
.agenda-plano-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.agenda-plano-itens li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.agenda-plano-item-nome { font-weight: 500; }
.agenda-plano-itens .badge { font-size: var(--font-tag, 9px); }

/* Checagem: filtro por paciente e cabeçalho de dia na checagem do paciente */
.agenda-header .checagem-filtro-paciente { width: auto; min-width: 200px; max-width: 280px; }
a.link-discreto { color: inherit; text-decoration: none; }
a.link-discreto:hover { text-decoration: underline; }
/* Verde da checagem: item "Checado" e visita "Integralmente checado" — o
   mesmo tom, mais baixo que o verde vivo de antes (var(--whatsapp)) */
.badge.checado, .badge.checado-integral { color: #fff; background: var(--success-claro); border-color: var(--success-claro); }
/* Botão de documento em PDF com o nome (lista de orçamentos: Plano, Extrato) */
.btn-pdf { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.btn-pdf svg { flex: none; }
/* "Ajustar" um item já checado: mexe num registro feito — vermelho, sem preenchimento */
.btn.secondary.checagem-ajustar { color: var(--danger); border-color: var(--danger); background: transparent; }
.btn.secondary.checagem-ajustar:hover { background: var(--danger-bg); }
.agenda-plano-grupo { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 600; margin: 6px 0 2px; }
.agenda-plano-grupo:first-child { margin-top: 0; }
.agenda-plano-check { color: var(--success-claro); font-weight: 700; font-size: 13px; line-height: 1; }
.agenda-plano-celula { text-align: left; width: 100%; }

/* Plano: recuos — grupo › item › detalhes (nome e resultado na 1ª linha, detalhes embaixo) */
.agenda-plano-celula .agenda-plano-grupo { margin-left: 0; }
.agenda-plano-celula .agenda-plano-itens { padding-left: 14px; gap: 6px; }
.agenda-plano-celula .agenda-plano-itens li { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 0 8px; }
.agenda-plano-celula .agenda-plano-itens li > .agenda-plano-item-nome { grid-column: 1; grid-row: 1; }
.agenda-plano-celula .agenda-plano-itens li > .agenda-plano-check,
.agenda-plano-celula .agenda-plano-itens li > .badge { grid-column: 2; grid-row: 1; justify-self: start; }
.agenda-plano-celula .agenda-plano-itens li > .muted { grid-column: 1 / -1; grid-row: 2; padding-left: 14px; font-size: 10px; }
.agenda-plano-celula .agenda-plano-itens li > .muted:empty { display: none; }

/* Alça de arrastar para reordenar (reordenar.js) */
.alca-arrastar { cursor: grab; color: var(--text-muted); font-size: 12px; letter-spacing: -2px; user-select: none; touch-action: none; padding: 2px 4px; line-height: 1; }
.alca-arrastar:active { cursor: grabbing; }
.arrastando-ordem { opacity: .6; outline: 1px dashed var(--border); }

/* sininho de notificações (barra lateral) e a janela */
.sidebar-notificacoes .sidebar-icon { position: relative; }
.sidebar-notif-num { position: absolute; top: -6px; right: -8px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: var(--fs-micro); font-weight: 700; line-height: 14px; text-align: center; }
.notif-lista { list-style: none; margin: 0; padding: 0; }
.notif-lista li { border-bottom: 1px solid var(--border); }
.notif-lista li:last-child { border-bottom: none; }
.notif-lista a { display: block; padding: 8px 2px; color: var(--text); text-decoration: none; }
.notif-lista a:hover { color: var(--primary); }

/* ---------- Painéis flutuantes: um estilo só (14/10/2026) ----------
   Menus (⋮, "+ Novo"), painel de colunas e filtros, listas suspensas,
   balão da agenda, "i" explicativo, tooltip dos gráficos e a janelinha de
   registro da checagem usam o mesmo vidro escuro da lista suspensa
   (.rselect-painel), um pouco mais fechado: o painel abre por cima de
   texto (não só do papel de parede), então precisa esconder o que está
   atrás. ::before só borra, ::after só pinta — os dois no mesmo
   pseudo-elemento derrubavam o blur em alguns navegadores.
   Dentro do painel os tokens de texto/superfície viram as versões claras,
   então o conteúdo (rótulos, .muted, campos, linhas) se ajusta sozinho. */
.kebab-menu-itens, .novo-menu-itens, .cols-panel, .col-filtro-drop, .filtro-paciente-painel,
.dropdown-multiselect-painel, .info-tip-bubble, .agenda-bloco-balao, .agenda-popover,
.checagem-registro-form, .grafico-tooltip, .calendario-painel {
  --text: var(--text-claro);
  --text-muted: rgba(var(--text-claro-rgb), 0.72);
  --text-soft: rgba(var(--text-claro-rgb), 0.5);
  --surface-muted: rgba(var(--text-claro-rgb), 0.1);
  --cream-deep: rgba(var(--text-claro-rgb), 0.16);
  --border: rgba(var(--text-claro-rgb), 0.16);
  --card-fill-text: var(--text-claro);
  isolation: isolate;
  color: var(--text);
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: var(--borda-campo);
  border-radius: var(--radius);
  box-shadow: var(--shadow-painel);
}
.kebab-menu-itens::before, .novo-menu-itens::before, .cols-panel::before, .col-filtro-drop::before,
.filtro-paciente-painel::before, .dropdown-multiselect-painel::before, .info-tip-bubble::before,
.agenda-bloco-balao::before, .checagem-registro-form::before, .grafico-tooltip::before, .calendario-painel::before {
  content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; pointer-events: none;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}
.kebab-menu-itens::after, .novo-menu-itens::after, .cols-panel::after, .col-filtro-drop::after,
.filtro-paciente-painel::after, .dropdown-multiselect-painel::after, .info-tip-bubble::after,
.agenda-bloco-balao::after, .checagem-registro-form::after, .grafico-tooltip::after, .calendario-painel::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: rgba(var(--teal-deep-rgb), 0.88);
}
/* links e ações dentro do painel: claros (o verde da marca some no fundo escuro) */
.kebab-menu-itens a, .novo-menu-itens a, .col-filtro-drop .link-btn, .calendario-painel .link-btn,
.dropdown-multiselect-criar, .filtro-paciente-painel a, .agenda-bloco-balao a { color: var(--text-claro); }
.kebab-menu-itens .btn.secondary, .kebab-menu-itens .btn.outline, .filtro-paciente-painel .btn.secondary,
.col-filtro-drop .btn.secondary, .cols-panel .btn.secondary, .checagem-registro-form .btn.secondary { color: var(--text-claro); }
.kebab-menu-itens a.danger { color: color-mix(in srgb, var(--danger) 45%, var(--text-claro)); }
/* caixinha de seleção desmarcada: contorno claro pra aparecer no escuro */
.cols-panel input[type="checkbox"]:not(:checked), .col-filtro-drop input[type="checkbox"]:not(:checked),
.filtro-paciente-painel input[type="checkbox"]:not(:checked), .dropdown-multiselect-painel input[type="checkbox"]:not(:checked),
.kebab-menu-itens input[type="checkbox"]:not(:checked), .checagem-registro-form input[type="checkbox"]:not(:checked) {
  border-color: rgba(var(--text-claro-rgb), 0.55);
}

/* ---------- Utilitários (14/10/2026) ----------
   Substituem os style="…" que mais se repetiam nos templates. Levam
   !important de propósito: o estilo inline que eles substituem ganhava de
   qualquer regra do arquivo, e assim continua igual. Usar só pra ajuste de
   espaçamento/alinhamento pontual — visual de componente mora no componente. */
.u-m-0 { margin: 0 !important; }
.u-mt-0 { margin-top: 0 !important; }
.u-mt-2 { margin-top: 2px !important; }
.u-mt-4 { margin-top: 4px !important; }
.u-mt-8 { margin-top: 8px !important; }
.u-mt-10 { margin-top: 10px !important; }
.u-mt-12 { margin-top: 12px !important; }
.u-mt-14 { margin-top: 14px !important; }
.u-mt-16 { margin-top: 16px !important; }
.u-mt-18 { margin-top: 18px !important; }
.u-mt-20 { margin-top: 20px !important; }
.u-block { display: block !important; }
.u-mt-n4 { margin-top: -4px !important; }
.u-mt-n6 { margin-top: -6px !important; }
.u-mt-n8 { margin-top: -8px !important; }   /* texto logo abaixo de um título (h2/h3) */
.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-12 { margin-bottom: 12px !important; }
.u-mb-14 { margin-bottom: 14px !important; }
.u-mb-16 { margin-bottom: 16px !important; }
.u-gap-6 { gap: 6px !important; }
.u-gap-8 { gap: 8px !important; }
.u-gap-12 { gap: 12px !important; }
.u-gap-16 { gap: 16px !important; }
.u-wrap { flex-wrap: wrap !important; align-items: center; }
.u-wrap { flex-wrap: wrap !important; }
.u-items-end { align-items: flex-end !important; }
.u-items-center { align-items: center !important; }
.u-justify-end { justify-content: flex-end !important; }
.u-flex-1 { flex: 1 !important; }
.u-minw-140 { min-width: 140px !important; }
.u-w-auto { width: auto !important; }
.u-mw-420 { max-width: 420px !important; }
.u-mw-480 { max-width: 480px !important; }
.u-mw-520 { max-width: 520px !important; }
.u-mw-560 { max-width: 560px !important; }
.u-mw-620 { max-width: 620px !important; }
.u-mw-640 { max-width: 640px !important; }
.u-grid-2 { grid-template-columns: 1fr 1fr !important; }
.u-fs-base { font-size: var(--fs-base) !important; }
.u-cor-danger { color: var(--danger) !important; }
.u-cor-success { color: var(--success) !important; }
.u-cor-warn { color: var(--warn) !important; }
/* rodapé de ações (Voltar · Confirmar), alinhado à direita */
.linha-acoes { justify-content: flex-end !important; gap: 8px !important; margin-top: 16px !important; }
/* linha de filtros que quebra e alinha pela base dos campos */
.linha-filtros { flex-wrap: wrap !important; gap: 14px !important; align-items: flex-end !important; }
/* tudo na linha de filtros centrado na altura de um campo (37px): o
   segmentado (26px) e os botões ficavam presos embaixo, fora do centro (26/10) */
.linha-filtros { --altura-campo-filtro: 37px; }
/* Nova/editar receita: origem | natureza, data | vencimento, e os 4 valores numa linha (27/10) */
.receita-form-grade { grid-template-columns: 1fr 1fr; }
.receita-form-valores { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 560px) { .receita-form-valores { grid-template-columns: 1fr 1fr; } }
.linha-filtros .segmented { margin-block: calc((var(--altura-campo-filtro) - 26px) / 2); }
.linha-filtros > .row:not(:has(> label)) { min-height: var(--altura-campo-filtro); align-items: center; }
/* caixinha + texto lado a lado, texto normal (não rótulo em caixa alta) */
.rotulo-opcao { display: inline-flex !important; align-items: center !important; gap: 8px !important; text-transform: none !important; font-weight: 500 !important; color: var(--text) !important; }
.rotulo-opcao[hidden] { display: none !important; }

/* insumo repetido agrupado na checagem: os itens separados ficam num "ver separados" discreto */
.checagem-insumo-separados > summary { cursor: pointer; font-size: 10px; color: var(--text-soft); margin: -2px 0 6px; list-style: none; }
.checagem-insumo-separados > summary::-webkit-details-marker { display: none; }
.checagem-insumo-separados[open] { padding-left: 14px; border-left: 2px solid var(--border); margin-bottom: 8px; }

/* cadastro único lead/paciente: o * só nos obrigatórios da aba escolhida */
#cadastro-form .marca-obrig { display: none; }
#cadastro-form[data-tipo="paciente"] .obrig-paciente .marca-obrig,
#cadastro-form[data-tipo="lead"] .obrig-lead .marca-obrig { display: inline; }

/* ícone do Instagram ao lado do nome do lead: abre o perfil numa aba nova */
.link-instagram { display: inline-flex; vertical-align: middle; margin-left: 6px; color: var(--accent-deep); }
.link-instagram:hover { color: var(--primary); }
.link-instagram svg { width: 14px; height: 14px; }

/* perfil de atendimento (D/I/C/S): sigla no CRM, orientação na ficha */
.badge.perfil-badge { background: transparent; color: var(--accent-deep); border: 1px solid var(--accent); font-weight: 600; }
.perfil-conduzir { margin-top: 6px; }
ul.lista-perfis { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }

/* ---------- Vidro líquido no estilo do iOS 27 (19/10/2026) ----------
   Medido no kit de interface da Apple (o vidro do teclado e as capturas
   @3x), usado só como referência: nenhum arquivo da Apple entra aqui. O
   que deixa o vidro "líquido" é a luz nas bordas, não mais transparência.
   Nada aqui acrescenta desfoque: só aro de luz, degradês, sombras
   internas e movimento. Tokens --vidro-* e --mola no :root. Ajustes no
   próprio componente: borda da .sidebar/.card/.stat-card/.despesa-grupo-card/
   .filtro-tabs com ~metade da força da Aparência (o aro faz o contorno),
   raio 24 da .sidebar, cards da Home, .workspace-topo, .segmented-thumb e
   .menu-flutuante. Os ::before do .stat-card e da .sidebar usam multiply,
   que apaga branco — por isso eles ficam só com o aro. */

/* 1. Aro de luz: moldura de 1px desenhada no ::after, recortada por máscara
   (só a borda aparece). O card em redimensionamento usa o ::after pra
   mostrar a medida. */
:is(.card:not(.redimensionando), .stat-card, .despesa-grupo-card, .condicao-outro-card, .subitem-linha,
  .kit-itens-cabecalho, .plano-totais, .resumo-grupo, .filtro-tabs, .kanban-col, .kanban-card, .sidebar)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  padding: 1px; background: var(--vidro-aro-claro);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
:is(.stat-card.destaque, .sidebar)::after { background: var(--vidro-aro-escuro); }
/* card que vira a própria janela (diálogo) não tem vidro nem borda */
body.em-dialogo .container > .card::after { display: none; }
/* luz por dentro (a .secao-preenchida não tem borda de propósito: só a luz, sem aro) */
:is(.card, .despesa-grupo-card, .secao-preenchida, .condicao-outro-card, .subitem-linha, .kit-itens-cabecalho,
  .plano-totais, .resumo-grupo, .filtro-tabs, .kanban-col, .kanban-card)::before { box-shadow: var(--vidro-luz-claro); }
.resumo-protocolo-wrap.vidro-escuro::before { box-shadow: var(--vidro-luz-escuro); }
.kebab-menu-itens::after, .novo-menu-itens::after, .cols-panel::after, .col-filtro-drop::after,
.filtro-paciente-painel::after, .dropdown-multiselect-painel::after, .info-tip-bubble::after,
.agenda-bloco-balao::after, .checagem-registro-form::after, .grafico-tooltip::after, .calendario-painel::after { box-shadow: var(--vidro-luz-escuro); }

/* 2. Degradê interno: o vidro claro clareia um pouco no alto */
:is(.card, .despesa-grupo-card, .secao-preenchida, .condicao-outro-card, .subitem-linha, .kit-itens-cabecalho,
  .plano-totais, .resumo-grupo, .filtro-tabs, .kanban-col, .kanban-card)::before { background-image: var(--vidro-degrade-claro); }

/* 3. Brilho uniforme: o desfoque também comprime o contraste do que está
   atrás (os desenhos do papel de parede somem por trás do texto) e mantém
   a cor — o equivalente do modo "luminosidade" da Apple, que testado aqui
   tirava o verde da marca. */
:is(.card, .stat-card:not(.destaque), .despesa-grupo-card, .secao-preenchida)::before {
  backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%) var(--vidro-uniforme);
  -webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(150%) var(--vidro-uniforme);
}

/* 5. Cápsulas: opção marcada com brilho no alto, trilho levemente rebaixado */
.mini-toggle-opt.active, .agenda-views a.active {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 2px 6px rgba(var(--sombra-rgb), 0.22);
}
.segmented:not(.sidebar-workspace-switch):not(.seg-simnao), .mini-toggle, .agenda-views {
  box-shadow: inset 0 1px 2px rgba(var(--sombra-rgb), 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.16);
}
/* botões preenchidos */
.btn:not(.secondary):not(.outline):not(.danger), .icon-btn.primary {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 65%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 2px rgba(var(--sombra-rgb), 0.14), 0 6px 14px rgba(var(--sombra-rgb), 0.10);
}
/* contornados e redondos: vidro claro leve no lugar do vazio (no :hover
   valem os fundos de cada um, definidos lá em cima) */
:is(.btn.secondary, .btn.outline, .icon-btn:not(.primary):not(.compra-tl-whatsapp)) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 2px rgba(var(--sombra-rgb), 0.06), 0 4px 12px rgba(var(--sombra-rgb), 0.06);
}
:is(.btn.secondary, .btn.outline, .icon-btn:not(.primary):not(.compra-tl-whatsapp)):not(:hover) {
  background-color: rgba(255, 255, 255, 0.16);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 70%);
}
/* dentro dos painéis escuros e da barra lateral: sem o fundo claro */
:is(.kebab-menu-itens, .novo-menu-itens, .cols-panel, .col-filtro-drop, .filtro-paciente-painel,
  .checagem-registro-form, .sidebar) :is(.btn.secondary, .btn.outline, .icon-btn:not(.primary)) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
:is(.kebab-menu-itens, .novo-menu-itens, .cols-panel, .col-filtro-drop, .filtro-paciente-painel,
  .checagem-registro-form, .sidebar) :is(.btn.secondary, .btn.outline, .icon-btn:not(.primary)):not(:hover) {
  background-color: rgba(255, 255, 255, 0.06); background-image: none;
}

/* 6. Movimento com mola (some para quem pediu menos movimento no aparelho) */
@media (prefers-reduced-motion: no-preference) {
  /* a opção do segmentado desliza e assenta com um leve "quique" */
  .segmented-thumb {
    transition: transform 0.5s var(--mola), width 0.5s var(--mola), height 0.5s var(--mola), opacity 0.15s ease;
  }
  /* botões afundam ao toque e voltam com mola */
  :is(.btn, .icon-btn, .menu-flutuante, .segmented-opt, .mini-toggle-opt) {
    transition: background 0.15s, filter 0.15s, color 0.2s ease, border-color 0.15s, transform 0.42s var(--mola);
  }
  :is(.btn, .icon-btn, .segmented-opt, .mini-toggle-opt):active { transform: scale(0.94); transition-duration: 0.08s; }
  .menu-flutuante:active { transform: scale(0.88); transition-duration: 0.08s; }
  /* menus e listas surgem crescendo a partir do botão */
  .kebab-menu-itens, .novo-menu-itens, .rselect-painel, .cols-panel, .col-filtro-drop,
  .filtro-paciente-painel, .dropdown-multiselect-painel, .calendario-painel {
    animation: vidro-surgir 0.34s var(--mola);
    transform-origin: top right;
  }
  .rselect-painel { transform-origin: top center; }
}
@keyframes vidro-surgir {
  from { opacity: 0; scale: 0.92; translate: 0 -6px; }
}

/* impressão: sem aro nem luz (o vidro já vira fundo opaco lá em cima) */
@media print {
  :is(.card, .stat-card, .despesa-grupo-card, .condicao-outro-card, .subitem-linha, .kit-itens-cabecalho,
    .plano-totais, .resumo-grupo, .filtro-tabs, .kanban-col, .kanban-card)::after { display: none !important; }
  :is(.btn, .icon-btn) { box-shadow: none !important; background-image: none !important; }
}

/* Temperatura da geladeira (relatório do registrador) */
.temp-aviso { border-left: 3px solid var(--warn); }
.temp-aviso.grave { border-left-color: var(--danger); }
.temp-eixo-x { position: relative; height: 16px; margin: 4px 0 0 46px; font-size: 10px; color: var(--text-muted); }
.temp-eixo-x span { position: absolute; transform: translateX(-50%); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .temp-eixo-x span:nth-child(even) { display: none; } }

/* CRM: configurar etapas e motivos — uma linha editável por etapa */
.crm-lista { display: flex; flex-direction: column; }
.crm-linha { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--border); }
.crm-nome { flex: 1 1 220px; min-width: 180px; }
.crm-ordem { width: 72px; }
.crm-uso { min-width: 64px; }
.crm-ativa { display: flex; align-items: center; gap: 6px; text-transform: none; }

/* menu App: aparelhos que recebem avisos (lista curta, sem marcador) */
.avisos-aparelhos { list-style: none; padding: 0; margin-left: 0; }

/* agenda: a paciente confirmou que vem (app ou WhatsApp) — não é comparecimento */
.agenda-bloco-presenca { flex: none; margin-left: 4px; font-size: 0.85em; font-weight: 600; color: var(--primary); }

/* painel "Faltou — reagendar?" da caixinha da visita (agenda_visita.js) */
.visita-faltou { margin: 16px 0 0; padding: 14px 16px; border: var(--borda-campo); border-radius: var(--radius); }
.visita-faltou[hidden] { display: none; }

/* ---------- menu Tarefas (kanban por setor / lista) ---------- */
.tarefas-board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 14px; align-items: start; }
.tarefas-col { background: rgba(var(--card-fill-rgb), 0.35); border: var(--borda-campo); border-radius: var(--radius); padding: 10px; min-height: 160px; }
.tarefas-col-header { display: flex; justify-content: space-between; align-items: center; margin: 2px 4px 10px; font-weight: 600; }
.tarefas-col-body { display: flex; flex-direction: column; gap: 8px; min-height: 80px; }
.tarefas-col-body.arraste-sobre { outline: 2px dashed var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); }
.tarefa-cartao { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; cursor: grab; }
.tarefa-cartao.arrastando { opacity: 0.5; }
.tarefa-cartao.prio-urgente { border-left-color: var(--danger); }
.tarefa-cartao.prio-alta { border-left-color: var(--warn); }
.tarefa-cartao.prio-baixa { opacity: 0.8; }
.tarefa-cartao-topo { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-micro); color: var(--text-muted); margin-bottom: 4px; }
.tarefa-cartao-titulo { font-weight: 500; }
.tarefa-cartao-quem { color: var(--text-muted); font-size: var(--fs-pequeno); }
.tarefa-cartao-acoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.tarefa-cartao-acoes form { display: inline; }
.tarefas-vazio { color: var(--text-muted); font-size: var(--fs-pequeno); padding: 8px 4px; }
@media (max-width: 980px) { .tarefas-board { grid-template-columns: 1fr; } }
/* bolinha vermelha ao lado do nome do menu (a barra mostra só os nomes) */
.sidebar-link:has(.sidebar-bolinha-link) { position: relative; }
.sidebar-bolinha-link { top: 3px; right: 4px; }

/* menu App: preferências de aviso de quem não tem celular ativado (não valem ainda) */
.prefs-sem-aparelho { opacity: 0.5; }


/* WhatsApp Business: só o ícone, pequeno, no fim da barra (antes de Notificações) */
.sidebar-whatsapp { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0 auto 6px;
  border-radius: 50%; color: rgba(var(--text-claro-rgb), 0.75); text-decoration: none; }
.sidebar-whatsapp:hover { color: var(--text-claro); background: rgba(var(--text-claro-rgb), 0.1); }
.sidebar-whatsapp svg { width: 17px; height: 17px; }

/* Painel de Controle → Mensagens de WhatsApp: texto ao lado da prévia */
.msg-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.msg-previa { white-space: pre-wrap; font-size: 11px; line-height: 1.5; padding: 10px 12px; border-radius: 12px;
  background: rgba(var(--text-claro-rgb), 0.06); border: 1px solid var(--border); min-height: 120px; }
@media (max-width: 760px) { .msg-grade { grid-template-columns: 1fr; } }

/* escolher a variação (ponteira) de um procedimento na própria Checagem */
.checagem-variacao { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.checagem-variacao select { width: auto; min-width: 160px; }

/* formulário de um botão só dentro de uma linha de texto (ex.: "Ciente" no sininho) */
.u-inline { display: inline; margin-left: 8px; }

/* ---------- Mapa do sistema ---------- */
.mapa-svg-wrap { overflow-x: auto; }
.mapa-svg { width: 100%; min-width: 760px; height: auto; display: block; }
.mapa-legenda { font-size: 10px; letter-spacing: 0.16em; fill: var(--text-muted); }
.mapa-texto { font-size: 13px; font-weight: 500; fill: var(--text); }
.mapa-titulo { font-size: 14px; font-weight: 600; fill: var(--text); }
.mapa-sub { font-size: 11px; fill: var(--text-muted); }
.mapa-ator { fill: var(--surface-muted); stroke: var(--border); }
.mapa-dominio rect { fill: var(--surface); stroke: var(--primary); stroke-width: 1.5; }
.mapa-dominio-gestion rect { fill: var(--surface-muted); stroke-width: 2.5; }
.mapa-banco, .mapa-caixa { fill: var(--surface-muted); stroke: var(--border); }
.mapa-externo rect { fill: none; stroke: var(--border); stroke-dasharray: 5 4; }
.mapa-linha { stroke: var(--text-muted); stroke-width: 1.4; fill: none; }
.mapa-tracejada { stroke-dasharray: 5 4; }
.mapa-seta { fill: var(--text-muted); }
.mapa-dominios { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.mapa-dominio-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.mapa-dominio-card h3 { margin: 0 0 4px; }
.mapa-end { margin: 0 0 8px; font-weight: 500; }
.mapa-paginas { margin: 6px 0; padding-left: 18px; }
.mapa-paginas li { margin: 3px 0; }
.mapa-arvores { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.mapa-arvore, .mapa-arvore ul { list-style: none; margin: 0; padding-left: 16px; }
.mapa-arvore { padding-left: 0; }
.mapa-arvore li { margin: 3px 0; }
.mapa-grupo { font-weight: 600; }

/* ---------- Recepção (perfil Secretárias, estoque.perfis): selos, legenda e tela Hoje ---------- */
/* bolinha do selo: cheia = pago, meia = só a taxa, vazia = sem link; cores da paleta */
.selo-bolinha {
  display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid transparent; vertical-align: -1px; margin-right: 6px;
}
.agenda-bloco .selo-bolinha { margin: 0 4px 0 0; }
.selo-bolinha.selo-aguardando { background: var(--warn); border-color: var(--warn); }
.selo-bolinha.selo-paga { background: linear-gradient(90deg, var(--success) 50%, transparent 50%); border-color: var(--success); }
.selo-bolinha.selo-quitada { background: var(--success); border-color: var(--success); }
.selo-bolinha.selo-vencida { background: var(--danger); border-color: var(--danger); }
.selo-bolinha.selo-sem_taxa { background: transparent; border-color: var(--text-soft); }
.selo-bolinha.selo-acompanhamento, .selo-bolinha.selo-cortesia { background: var(--selo-acomp-fundo); border-color: var(--selo-acomp-borda); }
.selo-recepcao {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
  font-size: var(--font-tag); font-weight: var(--peso-tag); border: 1px solid var(--border);
  background: var(--surface-muted); color: var(--text);
}
.selo-recepcao.selo-aguardando { border-color: var(--warn); color: var(--warn); background: var(--warn-bg); }
.selo-recepcao.selo-paga, .selo-recepcao.selo-quitada { border-color: var(--success); color: var(--success); background: var(--success-bg); }
.selo-recepcao.selo-vencida { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
.selo-recepcao.selo-acompanhamento, .selo-recepcao.selo-cortesia { border-color: var(--selo-acomp-borda); color: var(--selo-acomp-borda); }

.legenda-selos {
  flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  margin: 0 0 16px; padding: 8px 12px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 55%, transparent); border: 1px solid var(--border);
  font-size: var(--font-tag); color: var(--text-muted);
}
.legenda-selos > span { display: inline-flex; align-items: center; }
.legenda-selos-titulo { font-weight: 600; color: var(--text); text-transform: uppercase; letter-spacing: .06em; }
.legenda-bloco { display: inline-block; width: 16px; height: 11px; margin-right: 6px; border-radius: 2px; border-left: 3px solid; }
.legenda-bloco.balao-novo { background: color-mix(in srgb, var(--olive) 70%, transparent); }
.legenda-bloco.balao-acompanhamento { background: color-mix(in srgb, var(--success) 35%, transparent); }
.legenda-bloco.balao-pessoal { background: color-mix(in srgb, var(--lavanda) 55%, transparent); }
.agenda-header .legenda-selos { margin: 0; order: 99; }
.balao-ocupado { cursor: default; }
.balao-ocupado .nome { font-style: normal; color: var(--lavanda-deep); }

.hoje-cabecalho { align-items: flex-end; }
.hoje-secao { margin: 28px 0 12px; }
.hoje-secao .muted { font-size: 13px; font-weight: 400; }
/* título da seção com um botão ao lado (Enviar confirmações agora) */
.hoje-secao-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 28px 0 12px; }
.hoje-secao-topo .hoje-secao { margin: 0; }
.hoje-ocupado { margin: -6px 0 12px; }
.hoje-aviso {
  margin: 0 0 16px; padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn);
}
.hoje-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.hoje-cartao { margin: 0; border-left: 4px solid; display: flex; flex-direction: column; gap: 10px; }
.hoje-cartao.balao-acompanhamento { border-left-color: var(--success); }
.hoje-cartao.balao-novo, .hoje-cartao.balao-primeira, .hoje-cartao.balao-avulso { border-left-color: var(--olive-deep); }
.hoje-cartao-chegou { opacity: .78; }
.hoje-cartao-faltou { opacity: .6; }
.hoje-cartao-topo { display: flex; align-items: flex-start; gap: 12px; }
.hoje-hora { font-family: var(--font-display); font-size: 20px; line-height: 1.1; min-width: 52px; }
.hoje-quem { flex: 1; min-width: 0; }
.hoje-quem > a { font-weight: 600; font-size: 13px; color: var(--text); text-decoration: none; }
.hoje-quem > a:hover { text-decoration: underline; }
.hoje-itens { color: var(--text-muted); margin-top: 2px; }
.hoje-cartao-selos { display: flex; flex-wrap: wrap; gap: 6px; }
.hoje-detalhes { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.hoje-falta { color: var(--warn); }
.hoje-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; }
.hoje-acoes form { display: inline-flex; margin: 0; }
.hoje-receber { gap: 6px; }
.hoje-receber select { width: auto; min-width: 0; max-width: 170px; padding-top: 4px; padding-bottom: 4px; }
.hoje-receber .btn { white-space: nowrap; }
.hoje-lista { padding-top: 6px; padding-bottom: 6px; }
.hoje-linha {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.hoje-linha:last-child { border-bottom: none; }
.hoje-linha .hoje-acoes { margin-top: 0; }
.hoje-caixa ul { margin: 8px 0; padding-left: 18px; }
@media (max-width: 760px) {
  .hoje-cartoes { grid-template-columns: 1fr; }
  .hoje-cabecalho { align-items: flex-start; }
}
/* cancelar consulta e histórico (fase 3 da recepção) */
.cancelar-consulta { margin-top: 16px; }
.cancelar-consulta > summary { cursor: pointer; color: var(--danger); font-size: var(--font-tag); font-weight: 600; }
.cancelar-consulta form { margin-top: 10px; padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--danger-bg); background: color-mix(in srgb, var(--danger-bg) 45%, transparent); }
.visita-historico { margin-top: 16px; }
.visita-historico > summary { cursor: pointer; color: var(--text-muted); font-size: var(--font-tag); font-weight: 600; }
.visita-historico ul, .hoje-historico { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; color: var(--text-muted); }
.hoje-historico { margin: 0; font-size: var(--font-tag); }
.hoje-cartao .cancelar-consulta { margin-top: 0; }
.hoje-linha-cancelar { flex-basis: 100%; }

/* Cobranças passadas pelo Dr. Lucas para a recepção (cartões na tela Hoje) e caixa do dia */
.cobranca-aviso { margin: -4px 0 12px; }
.cobranca-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 8px; }
.cobranca-cartao { margin: 0; border-left: 3px solid var(--warn); }
.cobranca-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cobranca-valor { font-size: 16px; font-weight: 700; white-space: nowrap; }
.cobranca-itens, .cobranca-pedido { margin: 4px 0 0; }
.cobranca-receber { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; }
.cobranca-receber select { width: auto; min-width: 0; max-width: 170px; padding-top: 4px; padding-bottom: 4px; }
.cobranca-receber .btn { white-space: nowrap; }
.cobranca-nova { animation: cobranca-chegou 2.4s ease-out; }
@keyframes cobranca-chegou { from { box-shadow: 0 0 0 3px var(--warn); } to { box-shadow: 0 0 0 0 transparent; } }
.caixa-tabela { width: 100%; border-collapse: collapse; }
.caixa-tabela th, .caixa-tabela td { padding: 6px 0; text-align: left; border-bottom: 1px solid var(--border); }
.caixa-tabela .num { text-align: right; }
.caixa-tabela tfoot th { border-bottom: none; font-size: 16px; }
.caixa-fechar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.caixa-fechar input { flex: 1 1 260px; }
@media print { .cobranca-receber, .caixa-fechar { display: none; } }
.hoje-linha-cancelar .cancelar-consulta { margin-top: 0; }
/* notas fiscais (fase 4 da recepção) */
.nf-cartao { border-left-color: var(--olive-deep); }
.nf-cartao.nf-atrasada { border-left-color: var(--danger); }
.nf-nome { font-size: 13px; }
.nf-dados { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; }
.nf-dados dt { color: var(--text-muted); font-size: var(--font-tag); text-transform: uppercase; letter-spacing: .05em; padding-top: 2px; }
.nf-dados dd { margin: 0; overflow-wrap: anywhere; }
.nf-copiar {
  border: 1px solid var(--border); background: var(--surface-muted); color: var(--text-muted);
  border-radius: 999px; padding: 0 8px; font-size: var(--font-tag); cursor: pointer; margin-left: 4px;
}
.nf-copiar:hover { color: var(--text); border-color: var(--text-soft); }
.nf-emitir input { width: auto; flex: 1; min-width: 120px; }
/* dica de primeira vez da recepção (dicas.js) */
.dica-recepcao {
  display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 10px 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--olive); background: color-mix(in srgb, var(--olive) 18%, var(--surface));
}
.dica-recepcao[hidden] { display: none; }
.dica-recepcao p { margin: 0; flex: 1; }
.dica-recepcao-icone { font-size: 16px; }
/* guia da recepção (/ajuda/), cabe numa folha A4 impressa */
.guia { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.guia-largo { grid-column: 1 / -1; }
.guia-bloco { margin: 0; }
.guia-bloco h2 { margin: 0 0 10px; }
.guia-passos, .guia-lista { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.guia-nota { margin: 10px 0 0; }
.guia .legenda-selos { margin: 0; }
@media print {
  .sidebar, .workspace-topo, .guia-sem-impressao, .faixa-ambiente-teste, .faixa-treino, .aparencia-safari-strip, .breadcrumb, .messages, .dica-recepcao { display: none !important; }
  .main, .main * { animation: none !important; transition: none !important; }
  .main { opacity: 1 !important; transform: none !important; }
  .guia, .guia-cabecalho { color: var(--text); }
  .main { margin: 0 !important; padding: 0 !important; }
  .guia { grid-template-columns: 1fr 1fr; gap: 8px; font-size: 9.5px; }
  .guia-bloco { padding: 10px 12px !important; box-shadow: none !important; break-inside: avoid; }
  .guia-cabecalho { margin-bottom: 8px; }
}
/* faixa do modo treino (clinica/settings_treino.py) */
.faixa-treino {
  position: sticky; top: 0; z-index: 50; padding: 6px 14px; text-align: center;
  background: var(--warn); color: #fff; font-size: var(--font-tag); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
/* jornada da paciente (/ajuda/jornada/) */
.jornada-palavras { margin-bottom: 18px; }
.jornada-glossario { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.jornada-glossario dt { font-weight: 700; }
.jornada-glossario dd { margin: 0; }
.jornada { list-style: none; margin: 0; padding: 0; position: relative; }
.jornada::before { content: ""; position: absolute; left: 17px; top: 10px; bottom: 10px; width: 2px; background: var(--border); }
.jornada-passo { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 14px; margin: 0 0 14px; }
.jornada-numero {
  position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 17px; color: #fff; background: var(--text-soft);
}
.jornada-ambar .jornada-numero { background: var(--warn); }
.jornada-verde .jornada-numero { background: var(--success); }
.jornada-cartao { margin: 0; }
.jornada-cartao h2 { margin: 0 0 8px; }
.jornada-o-que, .jornada-nota { margin: 8px 0 0; }
.jornada-nota { color: var(--text-muted); font-style: italic; }
.jornada-voce { margin-top: 10px; padding: 8px 12px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--olive) 16%, var(--surface)); border-left: 3px solid var(--olive-deep); }
.jornada-alerta { margin-top: 10px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--warn-bg); border-left: 3px solid var(--warn); }
.jornada-alerta .guia-lista { margin-top: 6px; }
.jornada-auto { color: var(--success); font-weight: 600; }
.jornada-etapa { margin: 10px 0 0; color: var(--text-muted); font-size: var(--font-tag); text-transform: uppercase; letter-spacing: .05em; }
.jornada-etapa .badge { text-transform: none; letter-spacing: 0; }
.jornada-perdida { margin-top: 4px; }
.jornada-motivos { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
@media print {
  .jornada-passo, .jornada-palavras, .jornada-perdida { break-inside: avoid; }
  .jornada-cartao, .jornada-palavras, .jornada-perdida { padding: 10px 14px !important; box-shadow: none !important; font-size: 9.5px; }
}
.nf-emitir { display: grid; gap: 8px; margin-top: auto; }
.nf-arquivo { display: grid; gap: 4px; font-size: var(--font-tag); text-transform: none; letter-spacing: 0; }
.nf-arquivo input[type=file] { font-size: var(--font-tag); }
/* arquivo do documento da clínica: botão "Escolher arquivo" no mesmo desenho dos botões secundários */
.campo-arquivo input[type=file] { font-size: var(--fs-pequeno); color: var(--text-muted); }
.campo-arquivo input[type=file]::file-selector-button {
  margin-right: 10px; padding: 3px 14px; border: 1px solid color-mix(in srgb, var(--primary) 38%, transparent); border-radius: 999px;
  background: rgba(255, 255, 255, 0.16); color: var(--primary); font: 500 var(--font-tag) var(--font-body); cursor: pointer;
}

.nf-conferencia { margin-top: auto; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--danger-bg); border-left: 3px solid var(--danger); }
.nf-conferencia ul { margin: 6px 0; padding-left: 18px; }
/* links úteis */
.links-uteis-texto { flex: 1; min-width: 240px; }
.links-uteis-url { font-size: var(--font-tag); color: var(--text-soft); overflow-wrap: anywhere; margin-top: 2px; }
/* lead rápido */
.lead-rapido { max-width: 560px; }
.lead-rapido-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.lead-rapido-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-muted); cursor: pointer;
  font-size: var(--font-tag); text-transform: none; letter-spacing: 0; margin: 0;
}
.lead-rapido-chip:has(input:checked) { border-color: var(--teal); background: color-mix(in srgb, var(--sage) 30%, var(--surface)); color: var(--teal-deep); }
.lead-rapido-chip input { margin: 0; width: auto; }

/* Notas fiscais em kanban (_nf_kanban.html): 4 colunas, sem arrastar */
.nf-kanban { grid-template-columns: repeat(4, minmax(200px, 1fr)); }
.nf-kanban .kanban-col { min-width: 0; }
.nf-kanban .kanban-card { cursor: default; display: grid; gap: 6px; }
.nf-kanban .nf-atrasada { border-left: 3px solid var(--danger); }
.nf-kanban-linha { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.nf-kanban-detalhes summary { cursor: pointer; color: var(--primary); font-weight: 500; margin-top: 4px; }
.nf-kanban-detalhes[open] summary { margin-bottom: 10px; }
.nf-kanban-detalhes .nf-emitir { margin-top: 12px; }
/* cancelar na Receita (_nf_cancelar.html) */
.nf-cancelar { margin-top: 10px; }
.nf-cancelar summary { cursor: pointer; color: var(--danger); font-weight: 500; }
.nf-cancelar[open] summary { margin-bottom: 10px; }
.nf-cancelar textarea { width: 100%; }
.nf-cancelar form > p:last-of-type { margin-bottom: 16px; }
.nf-cancelada { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.nf-kanban .nf-conferencia { margin-top: 4px; }
.nf-kanban-email .btn { margin-top: 4px; }
@media (max-width: 760px) { .nf-kanban { grid-template-columns: 1fr; } }
/* coluna estreita: rótulo em cima, dado embaixo */
.nf-kanban .nf-dados { grid-template-columns: 1fr; gap: 0; }
.nf-kanban .nf-dados dt { margin-top: 8px; }
.nf-kanban .nf-dados dt:first-child { margin-top: 0; }

/* Notas fiscais em lista (notas_fiscais.html): agrupadas pelo dia de emissão, uma linha por nota que abre */
.nf-dia { margin-bottom: 20px; }
.nf-dia-titulo { font-size: var(--fs-destaque); font-weight: 500; margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
.nf-lista { padding: 0; }
.nf-linha + .nf-linha { border-top: 1px solid var(--border); }
.nf-linha summary {
  display: grid; grid-template-columns: minmax(160px, 1.2fr) minmax(0, 2fr) 90px 130px; align-items: center; gap: 12px;
  padding: 12px 16px; cursor: pointer; list-style: none;
}
.nf-linha summary::-webkit-details-marker { display: none; }
.nf-linha summary:hover { background: rgba(var(--text-rgb), 0.04); }
.nf-linha.nf-atrasada summary { box-shadow: inset 3px 0 0 var(--danger); }
.nf-linha-servico { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-linha-valor { white-space: nowrap; }
.nf-linha-abrir { color: var(--primary); font-weight: 500; }
.nf-linha-abrir::after { content: " ›"; }
.nf-linha[open] .nf-linha-abrir::after { content: " ⌄"; }
.nf-linha-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 4px 16px 16px; }
.nf-linha-acao { display: flex; flex-direction: column; }
@media (max-width: 760px) {
  .nf-linha summary { grid-template-columns: 1fr auto; }
  .nf-linha-servico { grid-column: 1 / -1; grid-row: 2; }
  .nf-linha-corpo { grid-template-columns: 1fr; }
}
.nf-linha-valor { text-align: right; }
.nf-linha summary > :last-child { justify-self: end; }
.nfse-simples-conta { margin: 4px 0 16px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; }
.nfse-simples-conta p { margin: 0 0 6px; }
.nfse-simples-meses { width: auto; margin-top: 6px; }
.nfse-simples-meses th, .nfse-simples-meses td { padding: 2px 8px; text-align: right; }