/*
 * Pulso — Design System
 * Tokens e componentes fiéis ao /mockup (ver CLAUDE.md).
 * Organizado em: 1) tokens  2) base  3) layout  4) componentes  5) utilitários
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ============================================================= 1) TOKENS === */
:root {
  /* Marca (teal/petróleo) */
  --brand-50:#EAF3F2; --brand-100:#CFE4E2; --brand-200:#A0C9C6; --brand-300:#6FADA8;
  --brand-400:#3D8F88; --brand-500:#116466; --brand-600:#0F4C5C; --brand-700:#0C3B48;
  --brand-800:#092A34; --brand-900:#061A20;

  /* Texto */
  --ink:#1A1D1F; --ink-soft:#4B5358; --ink-faint:#8A9297;

  /* Superfícies */
  --surface:#FFFFFF; --surface-muted:#F7F8FA; --surface-border:#E7EBEE;

  /* Status (cada um com fundo) */
  --status-receber:#2B6CB0;  --status-receber-bg:#E9F1FB;
  --status-recebido:#1F8A5C; --status-recebido-bg:#E7F6EE;
  --status-atrasado:#C05621; --status-atrasado-bg:#FCEEE3;
  --status-glosado:#7C3AED;  --status-glosado-bg:#F1EAFD;

  /* Raios */
  --radius:8px; --radius-xl:14px; --radius-2xl:18px; --radius-full:9999px;

  /* Sombras */
  --shadow-card:0 1px 2px rgba(15,76,92,.06), 0 4px 16px rgba(15,76,92,.06);
  --shadow-pop:0 12px 32px rgba(9,42,52,.18);

  /* Layout */
  --sidebar-w:256px; --topbar-h:64px;
}

/* =============================================================== 2) BASE === */
*, *::before, *::after { box-sizing:border-box; }
[hidden] { display:none !important; } /* garante que o atributo hidden vença regras de layout (.form-row etc.) */
html, body { height:100%; }
body {
  margin:0;
  background:var(--surface-muted);
  color:var(--ink);
  font-family:'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
h1,h2,h3,h4,p { margin:0; }
.tabular { font-variant-numeric:tabular-nums; }

::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background:#C7D2D6; border-radius:8px; }
::-webkit-scrollbar-track { background:transparent; }

/* ============================================================= 3) LAYOUT === */
.app-shell { display:flex; min-height:100vh; }

.app-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.app-content { padding:24px; }
@media (min-width:640px){ .app-content { padding:24px 32px; } }

/* Sidebar */
.sidebar {
  position:sticky; top:0; align-self:flex-start;
  width:var(--sidebar-w); height:100vh; flex-shrink:0;
  display:flex; flex-direction:column;
  background:var(--surface); border-right:1px solid var(--surface-border);
}
/* O menu não deve ganhar barra de rolagem: item escondido é item que ninguém
   encontra. Em vez de degraus fixos, os espaços acompanham a altura da janela
   (clamp + vh), então ele se ajusta sozinho a qualquer tela, zoom do navegador
   ou escala do Windows. */
.sidebar__brand {
  display:flex; align-items:center; height:clamp(48px, 8vh, var(--topbar-h));
  padding:0 20px; border-bottom:1px solid var(--surface-border);
  transition:opacity .15s;
}
.sidebar__brand:hover { opacity:.75; }
.sidebar__nav {
  flex:1; display:flex; flex-direction:column; overflow-y:auto;
  padding:clamp(8px, 1.6vh, 16px) 12px;
  gap:clamp(6px, 1.8vh, 18px);
}
/* Grupos do menu: cada bloco junta telas do mesmo assunto. */
.sidebar__group { display:flex; flex-direction:column; gap:clamp(1px, 0.35vh, 3px); }
.sidebar__group-title {
  font-size:10px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-faint); padding:0 12px; margin:0 0 clamp(1px, 0.45vh, 4px);
}
.sidebar__footer { padding:clamp(8px, 1.6vh, 16px) 12px; border-top:1px solid var(--surface-border); }

.nav-link {
  display:flex; align-items:center; gap:12px;
  padding:clamp(4px, 1vh, 10px) 12px; border-radius:var(--radius);
  font-size:14px; font-weight:500; color:var(--ink-soft);
  transition:background-color .15s, color .15s;
}
.nav-link:hover { background:var(--surface-muted); color:var(--ink); }
.nav-link--active { background:var(--brand-50); color:var(--brand-700); }
.nav-link .icon { flex-shrink:0; }
/* Item de um módulo que não está no plano: visível, porém apagado, com cadeado
   à direita. Leva para a página que apresenta o módulo. */
.nav-link--locked { color:var(--ink-faint); }
.nav-link--locked .icon { opacity:.55; }
.nav-link--locked:hover { color:var(--ink-soft); }
.nav-link__lock { margin-left:auto; display:inline-flex; opacity:.6; }
.is-collapsed .nav-link__lock { display:none; }
.nav-link--toggle { width:100%; border:0; background:transparent; cursor:pointer; color:var(--ink-faint); font-family:inherit; text-align:left; }
.nav-link--toggle:hover { background:var(--surface-muted); color:var(--ink); }
.nav-link--toggle .icon { transition:transform .2s; }

/* Sidebar recolhida (só ícones) */
.sidebar { transition:width .2s ease; }
.sidebar__brand .logo-mark { display:none; }
.is-collapsed .sidebar { width:76px; }
.is-collapsed .sidebar__brand { justify-content:center; padding:0; }
.is-collapsed .sidebar__brand .logo-full { display:none; }
.is-collapsed .sidebar__brand .logo-mark { display:block; }
.is-collapsed .sidebar__nav, .is-collapsed .sidebar__footer { padding-left:12px; padding-right:12px; }
.is-collapsed .nav-link { justify-content:center; }
.is-collapsed .nav-link span { display:none; }
/* Recolhida: os títulos dos grupos virariam texto cortado, então saem de cena
   e a separação passa a ser feita por um traço. */
.is-collapsed .sidebar__nav { gap:10px; }
.is-collapsed .sidebar__group-title { display:none; }
.is-collapsed .sidebar__group + .sidebar__group { border-top:1px solid var(--surface-border); padding-top:10px; }

/* Telas muito baixas (notebook com escala do Windows em 125%, zoom alto):
   os títulos dos grupos saem e a separação vira um traço, para todos os itens
   continuarem visíveis sem rolagem. */
/* Em tela baixa os títulos dos grupos ficam menores em vez de sumirem: eles
   dão sentido ao menu, então é o espaçamento que cede primeiro. */
@media (max-height: 700px) {
  .nav-link { font-size:13.5px; }
  .sidebar__group-title { font-size:9px; letter-spacing:.07em; margin-bottom:0; line-height:1.3; }
}
@media (max-height: 600px) {
  .sidebar__nav { gap:6px; }
  .sidebar__group-title { padding-left:10px; }
  .nav-link { padding-top:4px; padding-bottom:4px; gap:10px; }
}
.is-collapsed .nav-link--toggle .icon { transform:rotate(180deg); }

/* Topbar */
.topbar {
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:12px;
  height:var(--topbar-h); padding:0 16px;
  background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--surface-border);
}
@media (min-width:640px){ .topbar { padding:0 24px; } }
.topbar__menu { display:inline-flex; }
.topbar__search { position:relative; flex:1; max-width:28rem; display:none; }
@media (min-width:640px){ .topbar__search { display:block; } }
.topbar__search .icon {
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:var(--ink-faint); pointer-events:none;
}
.topbar__actions { margin-left:auto; display:flex; align-items:center; gap:8px; }
.topbar__user {
  display:flex; align-items:center; gap:8px;
  padding:6px 10px 6px 6px; border:0; background:transparent;
  border-radius:var(--radius); cursor:pointer;
}
.topbar__user:hover { background:var(--surface-muted); }
.topbar__user-name { font-size:14px; font-weight:500; color:var(--ink); }
@media (max-width:639px){ .topbar__user-name { display:none; } }

/* Menus suspensos do topo (sino e usuário) */
.tb-menu { position:relative; display:inline-flex; }
.tb-pop { position:absolute; right:0; top:calc(100% + 8px); z-index:40; background:var(--surface); border:1px solid var(--surface-border); border-radius:var(--radius-xl); box-shadow:var(--shadow-pop); overflow:hidden; }
.tb-pop--notifs { width:20rem; }
.tb-pop--user { width:15rem; padding:6px; }
.tb-pop__head { padding:12px 16px; border-bottom:1px solid var(--surface-border); font-size:14px; font-weight:600; color:var(--ink); }
.tb-pop__body { max-height:20rem; overflow-y:auto; }
.tb-pop__empty { padding:24px 16px; text-align:center; font-size:14px; color:var(--ink-faint); }
.tb-notif { display:flex; gap:10px; padding:12px 16px; border-bottom:1px solid var(--surface-border); text-decoration:none; color:inherit; transition:background-color .15s; }
.tb-notif:last-child { border-bottom:0; }
.tb-notif:hover { background:var(--surface-muted); }
.tb-notif__dot { margin-top:5px; height:8px; width:8px; flex-shrink:0; border-radius:var(--radius-full); }
.tb-notif__dot--warn { background:var(--status-atrasado); }
.tb-notif__dot--info { background:var(--status-receber); }
.tb-notif__title { font-size:14px; font-weight:500; color:var(--ink); }
.tb-notif__sub { font-size:12px; color:var(--ink-faint); }
.tb-pop__user { padding:8px 12px; }
.tb-pop__name { font-size:14px; font-weight:500; color:var(--ink); }
.tb-pop__email { font-size:12px; color:var(--ink-faint); overflow:hidden; text-overflow:ellipsis; }
.tb-pop__sep { height:1px; background:var(--surface-border); margin:6px 0; }
.tb-item { display:flex; width:100%; align-items:center; gap:10px; padding:8px 12px; border-radius:var(--radius); font-size:14px; color:var(--ink-soft); background:transparent; border:0; cursor:pointer; font-family:inherit; text-align:left; }
.tb-item:hover { background:var(--surface-muted); color:var(--ink); }
.tb-item--danger { color:var(--status-atrasado); }
.tb-item--danger:hover { background:var(--status-atrasado-bg); color:var(--status-atrasado); }
.tb-pop--user form { margin:0; display:block; }

/* Destaque temporário de uma seção (ao chegar por "Meu perfil") */
.card--destaque { animation:card-destaque 2.4s ease-out 1; scroll-margin-top:80px; }
@keyframes card-destaque {
  0%, 12% { box-shadow:0 0 0 3px var(--brand-400); border-color:var(--brand-400); }
  100%    { box-shadow:0 0 0 0 rgba(0,0,0,0); }
}

/* Menu lateral no celular (drawer + backdrop) */
.mobile-nav-backdrop { display:none; }
@media (max-width:767px){
  .sidebar { position:fixed; left:0; top:0; z-index:60; width:var(--sidebar-w); transform:translateX(-100%); box-shadow:var(--shadow-pop); }
  .mobile-nav-open .sidebar { transform:translateX(0); }
  .mobile-nav-backdrop { position:fixed; inset:0; z-index:55; background:rgba(9,42,52,.45); }
  .mobile-nav-open .mobile-nav-backdrop { display:block; }
  /* No celular o drawer aparece sempre completo, mesmo se recolhido no desktop */
  .is-collapsed .sidebar { width:var(--sidebar-w); }
  .is-collapsed .sidebar__brand { justify-content:flex-start; padding:0 20px; }
  .is-collapsed .sidebar__brand .logo-full { display:block; }
  .is-collapsed .sidebar__brand .logo-mark { display:none; }
  .is-collapsed .nav-link { justify-content:flex-start; }
  .is-collapsed .nav-link span { display:inline; }
  .is-collapsed .nav-link--toggle .icon { transform:none; }
}

.avatar {
  display:inline-flex; align-items:center; justify-content:center;
  height:32px; width:32px; border-radius:var(--radius-full);
  background:var(--brand-100); color:var(--brand-700);
  font-size:12px; font-weight:600;
}

/* ========================================================= 4) COMPONENTES === */

/* --- Botões --- */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--radius); font-family:inherit; font-weight:500; line-height:1; cursor:pointer;
  border:1px solid transparent; transition:background-color .15s, color .15s;
  white-space:nowrap;
}
.btn:disabled { cursor:not-allowed; }
.btn .icon { flex-shrink:0; }
/* tamanhos */
.btn--md { font-size:14px; padding:10px 16px; gap:8px; }
.btn--sm { font-size:12px; padding:6px 12px; gap:6px; }
/* variantes */
.btn--primary { background:var(--brand-600); color:#fff; }
.btn--primary:hover { background:var(--brand-700); }
.btn--primary:active { background:var(--brand-800); }
.btn--primary:disabled { background:var(--brand-200); }
.btn--secondary { background:var(--surface); color:var(--ink); border-color:var(--surface-border); }
.btn--secondary:hover { background:var(--surface-muted); }
.btn--secondary:active { background:var(--surface-border); }
.btn--ghost { background:transparent; color:var(--ink-soft); }
.btn--ghost:hover { background:var(--surface-muted); }
.btn--danger { background:var(--surface); color:#DC2626; border-color:#FECACA; }
.btn--danger:hover { background:#FEF2F2; }

/* botão só-ícone (topbar) */
.icon-btn {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:10px; border:0; background:transparent; color:var(--ink-soft);
  border-radius:var(--radius); cursor:pointer;
}
.icon-btn:hover { background:var(--surface-muted); }
.icon-btn__badge {
  position:absolute; top:6px; right:6px;
  min-width:16px; height:16px; padding:0 4px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--status-atrasado); color:#fff;
  font-size:10px; font-weight:600; border-radius:var(--radius-full);
}

/* --- Inputs / formulários --- */
.form-row { display:block; margin-bottom:16px; }
.form-label { display:block; margin-bottom:6px; font-size:12px; font-weight:500; color:var(--ink-soft); }
.input {
  width:100%; border:1px solid var(--surface-border); background:var(--surface);
  border-radius:var(--radius); padding:10px 12px;
  font-size:14px; color:var(--ink); font-family:inherit;
}
.input::placeholder { color:var(--ink-faint); }
.input:focus { outline:none; border-color:var(--brand-400); box-shadow:0 0 0 2px var(--brand-100); }
select.input { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A9297' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; }
/* input de busca da topbar */
.input--search { background:var(--surface-muted); padding-left:36px; }
.input--search:focus { background:var(--surface); }

/* Dropdown de resultados da busca global (topo) */
.search-pop {
  position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:45;
  background:var(--surface); border:1px solid var(--surface-border);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-pop);
  max-height:26rem; overflow-y:auto; padding:6px;
}
.search-group + .search-group { border-top:1px solid var(--surface-border); margin-top:4px; padding-top:4px; }
.search-group__label {
  font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-faint); padding:8px 10px 4px;
}
.search-item {
  display:block; padding:8px 10px; border-radius:var(--radius);
  color:inherit; text-decoration:none;
}
.search-item:hover { background:var(--surface-muted); }
.search-item__title { display:block; font-size:14px; font-weight:500; color:var(--ink); }
.search-item__sub { display:block; font-size:12px; color:var(--ink-faint); margin-top:1px; }
.search-empty { padding:18px 12px; text-align:center; font-size:13px; color:var(--ink-faint); }
/* Página completa de resultados reutiliza a mesma lista */
.search-page .search-group__label { padding-left:0; padding-right:0; }
.search-page .search-item { padding-left:0; padding-right:0; }
.search-page .search-item:hover { background:transparent; color:var(--brand-700); }

/* --- Cards --- */
.card {
  background:var(--surface); border:1px solid var(--surface-border);
  border-radius:var(--radius-2xl); box-shadow:var(--shadow-card); padding:20px;
}
.card--tight { padding:16px; }
.card__header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; }
.card__title { font-size:16px; font-weight:600; color:var(--ink); }
.card__subtitle { margin-top:2px; font-size:12px; color:var(--ink-faint); }

/* KPI dentro de card */
.stat__label { font-size:11px; font-weight:500; color:var(--ink-faint); }
.stat__value { margin-top:4px; font-size:20px; font-weight:600; color:var(--ink); }
.stat__value--brand { color:var(--brand-700); }

/* --- Badges --- */
.badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:var(--radius-full);
  font-size:12px; font-weight:500; border:1px solid transparent;
}
.badge--neutral { background:var(--surface-muted); color:var(--ink-soft); border-color:var(--surface-border); }
.badge--brand   { background:var(--brand-50); color:var(--brand-700); border-color:var(--brand-100); }
.badge--warn    { background:var(--status-atrasado-bg); color:var(--status-atrasado); }
.badge--success { background:var(--status-recebido-bg); color:var(--status-recebido); }
.badge--danger  { background:var(--status-glosado-bg); color:var(--status-glosado); }

.status-badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:var(--radius-full);
  font-size:12px; font-weight:500;
}
.status-badge__dot { height:6px; width:6px; border-radius:var(--radius-full); background:currentColor; }
.status-badge--a_receber { color:var(--status-receber); background:var(--status-receber-bg); }
.status-badge--recebido  { color:var(--status-recebido); background:var(--status-recebido-bg); }
.status-badge--atrasado  { color:var(--status-atrasado); background:var(--status-atrasado-bg); }
.status-badge--glosado   { color:var(--status-glosado); background:var(--status-glosado-bg); }

/* ========================================================= 5) UTILITÁRIOS === */
.page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.page-title { font-size:22px; font-weight:600; color:var(--ink); }
.page-subtitle { margin-top:4px; font-size:14px; color:var(--ink-faint); }

.grid { display:grid; gap:12px; }
.grid--kpis { grid-template-columns:repeat(2, 1fr); }
@media (min-width:1024px){ .grid--kpis { grid-template-columns:repeat(4, 1fr); } }
.grid--2 { grid-template-columns:1fr; gap:20px; }
@media (min-width:1024px){ .grid--2 { grid-template-columns:1fr 1fr; } }

.stack { display:flex; flex-direction:column; gap:12px; }
.row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mt-4 { margin-top:16px; }
.text-muted { color:var(--ink-faint); font-size:12px; }

.btn--block { width:100%; }
.flash-stack { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.flash { padding:10px 14px; border-radius:var(--radius); font-size:13px; font-weight:500; }
.flash--alert { background:var(--status-atrasado-bg); color:var(--status-atrasado); }
.flash--notice { background:var(--status-recebido-bg); color:var(--status-recebido); }
.link-brand { color:var(--brand-600); font-weight:500; }
.link-brand:hover { color:var(--brand-700); }
.form-error { margin-bottom:16px; font-size:12px; font-weight:500; color:var(--status-atrasado); }

/* =============================================================== LOGIN / AUTH === */
.auth { display:flex; min-height:100vh; background:var(--surface-muted); }

/* Painel esquerdo (marketing) — some abaixo de 1024px, como no mockup (lg:flex) */
.auth__aside { display:none; }
@media (min-width:1024px){
  .auth__aside {
    position:relative; display:flex; flex-direction:column; justify-content:center;
    width:42%; padding:40px; overflow:hidden; color:var(--ink);
    border-right:1px solid var(--surface-border);
    background:linear-gradient(to bottom right, var(--brand-50), #fff, var(--surface-muted));
  }
}
.auth__circle { position:absolute; border-radius:var(--radius-full); }
.auth__circle--1 { right:-96px; top:-96px; height:288px; width:288px; background:rgba(160,201,198,.45); }
.auth__circle--2 { bottom:0; left:0; height:384px; width:384px; transform:translate(-33%,33%); background:rgba(160,201,198,.40); }

.auth__logo { position:relative; display:flex; justify-content:center; }
.auth__logo img { height:144px; width:auto; }

.auth__marketing { position:relative; margin-top:40px; }
.auth__headline { max-width:24rem; font-size:26px; font-weight:600; line-height:1.2; letter-spacing:-.01em; color:var(--ink); }
.auth__subtitle { max-width:24rem; margin-top:12px; font-size:14px; color:var(--ink-soft); }
.auth__bullets { margin-top:32px; display:flex; flex-direction:column; gap:12px; }
.auth__bullet { display:flex; align-items:center; gap:12px; font-size:14px; color:var(--ink-soft); }
.auth__bullet-icon {
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  height:32px; width:32px; border-radius:var(--radius-full);
  background:var(--brand-50); color:var(--brand-600);
}
.auth__footer { position:absolute; bottom:32px; left:40px; font-size:12px; color:var(--ink-faint); }

/* Painel direito (formulário) */
.auth__panel { flex:1; display:flex; align-items:center; justify-content:center; padding:24px; }
@media (min-width:640px){ .auth__panel { padding:40px; } }
.auth__form { width:100%; max-width:24rem; }
.auth__form form { margin-top:32px; }
.auth__title { font-size:24px; font-weight:600; color:var(--ink); }
.auth__lead { margin-top:6px; font-size:14px; color:var(--ink-faint); }
.auth__forgot { display:flex; justify-content:flex-end; margin-bottom:20px; font-size:12px; }
.auth__foot { margin-top:32px; text-align:center; font-size:14px; color:var(--ink-faint); }

.auth-divider { display:flex; align-items:center; gap:12px; margin:20px 0; font-size:12px; color:var(--ink-faint); }
.auth-divider::before, .auth-divider::after { content:""; flex:1; height:1px; background:var(--surface-border); }
.auth-social { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
/* button_to gera um <form> em volta; display:contents faz o grid tratar o botão direto */
.auth-social > form { display:contents; }

/* ============================================================ CONFIGURAÇÕES === */
.settings { max-width:56rem; margin:0 auto; }
.settings__stack { display:flex; flex-direction:column; gap:20px; }
.field-grid { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:640px){ .field-grid { grid-template-columns:1fr 1fr; } }

/* Interruptor (toggle) */
.icon-btn--sm { padding:8px; }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:4px 0; }
.setting-row form { margin:0; }
.setting-row__title { font-size:14px; color:var(--ink); }
.setting-row__desc { margin-top:2px; font-size:12px; color:var(--ink-faint); }
/* Celular: empilha (texto em cima, controle/botões embaixo) para o texto não espremer */
@media (max-width:767px){ .setting-row { flex-direction:column; align-items:stretch; gap:10px; } }
.divider-top { border-top:1px solid var(--surface-border); margin-top:12px; padding-top:16px; }

.toggle { position:relative; height:24px; width:44px; flex-shrink:0; padding:0; border:0; border-radius:var(--radius-full); background:var(--surface-border); cursor:pointer; transition:background-color .15s; }
.toggle--on { background:var(--brand-600); }
.toggle__knob { position:absolute; top:2px; left:2px; height:20px; width:20px; border-radius:var(--radius-full); background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform .15s; }
.toggle--on .toggle__knob { transform:translateX(20px); }

/* Item de lista (local de trabalho / colega) */
.list-item { display:flex; align-items:center; gap:12px; border:1px solid var(--surface-border); border-radius:var(--radius-xl); padding:12px 16px; }
.list-item + .list-item { margin-top:10px; }
.list-item__body { min-width:0; flex:1; }
.list-item__title { font-size:14px; font-weight:500; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.list-item__sub { font-size:12px; color:var(--ink-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.list-item__avatar { flex-shrink:0; display:flex; align-items:center; justify-content:center; height:36px; width:36px; border-radius:var(--radius-full); color:#fff; }
.list-item__avatar--brand { background:var(--brand-50); color:var(--brand-700); font-size:11px; font-weight:600; }
.icon-btn--danger:hover { background:var(--status-atrasado-bg); color:var(--status-atrasado); }

/* Chips de convênio */
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.chip { display:inline-flex; align-items:center; gap:6px; border-radius:var(--radius-full); background:var(--surface-muted); padding:6px 12px; font-size:12px; font-weight:500; color:var(--ink-soft); }
.chip form { margin:0; display:flex; }
.chip__remove { border:0; background:transparent; color:var(--ink-faint); padding:0; cursor:pointer; opacity:.6; display:flex; }
.chip__remove:hover { opacity:1; }

/* Seletor de dias / opções (pills) */
.pill-group { display:flex; flex-wrap:wrap; gap:8px; }
.pill-group form { margin:0; }
.pill { border:1px solid var(--surface-border); border-radius:var(--radius); padding:6px 12px; font-size:12px; font-weight:500; color:var(--ink-soft); background:var(--surface); cursor:pointer; transition:background-color .15s, border-color .15s; }
.pill:hover { background:var(--surface-muted); }
.pill--active { border-color:var(--brand-400); background:var(--brand-50); color:var(--brand-700); }

.input-prefix { position:relative; }
.input-prefix > span { position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:12px; font-weight:500; color:var(--ink-faint); pointer-events:none; }
.input-prefix .input { padding-left:36px; }

/* ================================================================ AGENDA === */
.agenda { max-width:80rem; margin:0 auto; }
.agenda__stack > * + * { margin-top:20px; }

/* Cartões de destaque (banner de lançamento, link de trocas) */
.notice-card { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--surface-border); border-radius:var(--radius-2xl); background:var(--surface); box-shadow:var(--shadow-card); padding:14px 16px; }
.notice-card--warn { border-color:var(--status-atrasado-bg); background:color-mix(in srgb, var(--status-atrasado-bg) 45%, white); box-shadow:none; }
.notice-card__icon { display:flex; align-items:center; justify-content:center; height:36px; width:36px; border-radius:var(--radius-full); flex-shrink:0; }
.notice-card__icon--brand { background:var(--brand-50); color:var(--brand-600); }
.notice-card__icon--warn { background:var(--status-atrasado-bg); color:var(--status-atrasado); }
.notice-card__link { font-family:ui-monospace, monospace; font-size:12px; color:var(--brand-600); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Alertas da escala */
.alert-box { border:1px solid var(--status-atrasado-bg); background:color-mix(in srgb, var(--status-atrasado-bg) 30%, white); border-radius:var(--radius-2xl); padding:12px 16px; }
.alert-box__head { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--status-atrasado); margin-bottom:8px; }
.alert-box__item { display:flex; align-items:flex-start; gap:8px; font-size:12px; color:var(--ink-soft); padding:2px 0; }
.alert-box__dot { margin-top:5px; height:6px; width:6px; flex-shrink:0; border-radius:var(--radius-full); background:var(--status-atrasado); }
.alert-box__item--link { border-radius:var(--radius); padding:6px 8px; margin:0 -8px; transition:background-color .12s; }
.alert-box__item--link:hover { background:color-mix(in srgb, var(--status-atrasado-bg) 45%, white); }
.alert-box__go { color:var(--status-atrasado); flex-shrink:0; align-self:center; }

/* Trocas recebidas */
.inbox { border:1px solid var(--brand-100); background:color-mix(in srgb, var(--brand-50) 40%, white); border-radius:var(--radius-2xl); padding:14px 16px; }

/* Toolbar do calendário */
.cal-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--surface-border); background:var(--surface); border-radius:var(--radius-2xl); box-shadow:var(--shadow-card); padding:12px; }
.cal-nav { display:flex; align-items:center; gap:8px; }
.cal-nav__btn { display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent; color:var(--ink-soft); border-radius:var(--radius); padding:8px; cursor:pointer; }
.cal-nav__btn:hover { background:var(--surface-muted); }
.cal-nav__label { min-width:160px; text-align:center; font-size:14px; font-weight:600; color:var(--ink); }
.cal-today { margin-left:4px; border:1px solid var(--surface-border); border-radius:var(--radius); padding:6px 12px; font-size:12px; font-weight:500; color:var(--ink-soft); background:var(--surface); }
.cal-today:hover { background:var(--surface-muted); }
.cal-filter { border:1px solid var(--surface-border); background:var(--surface); border-radius:var(--radius); padding:6px 28px 6px 12px; font-size:12px; font-weight:500; color:var(--ink-soft); appearance:none; 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='%238A9297' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 8px center; }
.seg { display:inline-flex; border:1px solid var(--surface-border); border-radius:var(--radius); padding:2px; }
.seg__item { border-radius:6px; padding:6px 12px; font-size:12px; font-weight:500; color:var(--ink-soft); }
.seg__item:hover { background:var(--surface-muted); }
.seg__item--active { background:var(--brand-600); color:#fff; }
.seg__item--active:hover { background:var(--brand-600); }

/* Legenda de locais */
.legend { display:flex; flex-wrap:wrap; gap:12px; }
.legend__item { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-soft); }
.legend__dot { height:8px; width:8px; border-radius:var(--radius-full); }

/* Calendário — mês */
.cal-month { overflow:hidden; border:1px solid var(--surface-border); border-radius:var(--radius-2xl); background:var(--surface); box-shadow:var(--shadow-card); }
.cal-weekdays { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border-bottom:1px solid var(--surface-border); background:color-mix(in srgb, var(--surface-muted) 60%, white); }
.cal-weekdays > div { padding:10px 8px; text-align:center; font-size:12px; font-weight:600; color:var(--ink-faint); }
.cal-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.cal-cell { position:relative; min-height:128px; border-bottom:1px solid var(--surface-border); border-right:1px solid var(--surface-border); padding:6px; }
.cal-cell__add { position:absolute; inset:0; z-index:0; }
.cal-cell__add:hover { background:color-mix(in srgb, var(--surface-muted) 60%, transparent); }
.cal-cell--out { background:color-mix(in srgb, var(--surface-muted) 40%, white); }
.cal-daynum { position:relative; z-index:1; display:inline-flex; height:24px; width:24px; align-items:center; justify-content:center; border-radius:var(--radius-full); font-size:12px; font-weight:500; color:var(--ink); margin-bottom:4px; }
.cal-daynum--out { color:var(--ink-faint); }
.cal-daynum--today { background:var(--brand-600); color:#fff; }
.cal-pills { position:relative; z-index:1; display:flex; flex-direction:column; gap:4px; }

/* Evento no calendário: cartão claro na cor do local, com tipo, nome e horário.
   A cor vem por --ev-cor (cor do local), definida no próprio elemento. */
.cal-ev-card {
  display:flex; align-items:flex-start; gap:6px; min-width:0;
  border-radius:7px; padding:5px 7px;
  background:color-mix(in srgb, var(--ev-cor) 9%, white);
  border:1px solid color-mix(in srgb, var(--ev-cor) 22%, white);
  transition:background-color .15s, border-color .15s;
}
.cal-ev-card:hover { background:color-mix(in srgb, var(--ev-cor) 16%, white); border-color:color-mix(in srgb, var(--ev-cor) 40%, white); }
.cal-ev-card__icon { color:var(--ev-cor); flex-shrink:0; display:flex; margin-top:1px; }
.cal-ev-card__txt { display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.cal-ev-card__txt > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-ev-card__tipo { font-size:10.5px; font-weight:600; color:color-mix(in srgb, var(--ev-cor) 78%, black); }
.cal-ev-card__nome { font-size:11px; font-weight:500; color:var(--ink); }
.cal-ev-card__hora { font-size:10px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.cal-ev-card--conflict { border-color:#ef4444; box-shadow:0 0 0 1px #ef4444; }
.cal-ev-card--swapped { opacity:.55; }
.cal-ev-card--swapped .cal-ev-card__nome { text-decoration:line-through; }
@media (max-width:560px) {
  .cal-ev-card { padding:4px 5px; gap:4px; }
  .cal-ev-card__hora { display:none; }
  .cal-ev-card__icon { display:none; }
}
.cal-pill { display:flex; align-items:flex-start; gap:4px; border-radius:5px; padding:3px 6px; font-size:11px; font-weight:500; color:#fff; overflow:hidden; }
.cal-pill span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-pill__txt { display:flex; flex-direction:column; min-width:0; line-height:1.2; }
.cal-pill__name { font-weight:600; }
.cal-pill__time { font-size:9px; opacity:.9; font-weight:500; }
@media (max-width:560px){ .cal-pill__time { display:none; } .cal-pill__name { font-size:9px; } }
.cal-pill--conflict { box-shadow:0 0 0 2px #ef4444; }
.cal-pill--swapped { opacity:.5; text-decoration:line-through; }
.cal-more { position:relative; z-index:1; padding:0 6px; font-size:10px; font-weight:500; color:var(--ink-faint); }

/* Mês em telas pequenas: células mais baixas e pills compactos (cabem sem rolar de lado) */
@media (max-width:560px){
  .cal-cell { min-height:74px; padding:4px 3px; }
  .cal-daynum { height:20px; width:20px; font-size:11px; margin-bottom:3px; }
  .cal-pills { gap:3px; }
  .cal-pill { padding:1px 4px; font-size:9px; gap:3px; border-radius:3px; }
  .cal-weekdays > div { padding:8px 2px; font-size:10px; }
}

/* Calendário — semana */
.cal-week { display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:640px){ .cal-week { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .cal-week { grid-template-columns:repeat(7,1fr); } }
.cal-day { border:1px solid var(--surface-border); border-radius:var(--radius-2xl); background:var(--surface); box-shadow:var(--shadow-card); padding:16px; }
.cal-day--today { border-color:var(--brand-300); box-shadow:0 0 0 1px var(--brand-100); }
.cal-day__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.cal-day__weekday { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-faint); }
.cal-day__num { display:flex; height:24px; width:24px; align-items:center; justify-content:center; border-radius:var(--radius-full); font-size:12px; font-weight:600; color:var(--ink); }
.cal-day__num--today { background:var(--brand-600); color:#fff; }
.cal-day__empty { display:block; width:100%; text-align:center; border:1px dashed var(--surface-border); border-radius:var(--radius); padding:16px 0; font-size:12px; color:var(--ink-faint); }
.cal-day__empty:hover { background:var(--surface-muted); }
.cal-ev { display:block; width:100%; text-align:left; border:1px solid var(--surface-border); border-radius:var(--radius); padding:8px 10px; }
.cal-ev + .cal-ev { margin-top:8px; }
.cal-ev:hover { background:var(--surface-muted); }
.cal-ev__top { display:flex; align-items:center; gap:6px; }
.cal-ev__dot { height:6px; width:6px; border-radius:var(--radius-full); }
.cal-ev__time { font-size:12px; font-weight:600; color:var(--ink); }
.cal-ev__title { margin-top:4px; font-size:12px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Detalhe do evento (dentro do modal) */
.ev-info { display:flex; flex-direction:column; gap:12px; border-radius:var(--radius-xl); background:var(--surface-muted); padding:16px; margin-bottom:16px; }
.ev-info__row { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink); }
.ev-info__row .icon { color:var(--ink-faint); }
.ev-launch { display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--brand-100); background:color-mix(in srgb, var(--brand-50) 40%, white); border-radius:var(--radius-xl); padding:12px 16px; margin-bottom:16px; }

/* =============================================================== PRODUÇÃO === */
.prod { max-width:80rem; margin:0 auto; }
.prod__stack > * + * { margin-top:20px; }
.prod-kpis { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:640px){ .prod-kpis { grid-template-columns:1fr 1fr; } }
@media (min-width:1200px){ .prod-kpis { grid-template-columns:repeat(4,1fr); } }

.kpi__head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.kpi__label { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:500; color:var(--ink-faint); min-width:0; }
.kpi__icon { display:flex; align-items:center; justify-content:center; height:30px; width:30px; border-radius:var(--radius); flex-shrink:0; }
.kpi__value { margin-top:10px; font-size:22px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.kpi__sub { margin-top:2px; font-size:12px; color:var(--ink-faint); }
.delta { display:inline-flex; align-items:center; gap:2px; border-radius:var(--radius-full); padding:2px 6px; font-size:11px; font-weight:600; white-space:nowrap; }
.delta--up { background:var(--status-recebido-bg); color:var(--status-recebido); }
.delta--down { background:var(--status-atrasado-bg); color:var(--status-atrasado); }

.microbar { display:flex; height:6px; width:100%; overflow:hidden; border-radius:var(--radius-full); background:var(--surface-muted); margin-top:8px; }
.microbar > span { display:block; height:100%; }
.kpi-legend { margin-top:8px; display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; }
.kpi-legend__item { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--ink-soft); min-width:0; }
.kpi-legend__dot { height:6px; width:6px; border-radius:var(--radius-full); flex-shrink:0; }
.kpi-legend__val { margin-left:auto; font-weight:600; color:var(--ink); }

.hbar { display:flex; align-items:center; gap:8px; font-size:11px; margin-top:6px; }
.hbar__label { width:64px; flex-shrink:0; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hbar__track { flex:1; height:6px; overflow:hidden; border-radius:var(--radius-full); background:var(--surface-muted); }
.hbar__fill { display:block; height:100%; border-radius:var(--radius-full); }
.hbar__val { width:60px; flex-shrink:0; text-align:right; font-weight:600; color:var(--ink); }
.hbar__label--alert, .hbar__val--alert { color:var(--status-atrasado); }

.spark { display:block; height:36px; width:100%; }
.kpi__spark-label { margin-top:12px; font-size:11px; color:var(--ink-faint); }
.spark-wrap { position:relative; margin-top:8px; }
.kpi__spark-label + .spark-wrap { margin-top:4px; }
.spark-cursor { position:absolute; top:0; bottom:0; width:0; border-left:1px dashed var(--ink-faint); pointer-events:none; }
.spark-tip { position:absolute; bottom:calc(100% + 5px); transform:translateX(-50%); background:var(--ink); color:#fff; font-size:11px; line-height:1; padding:4px 7px; border-radius:6px; white-space:nowrap; pointer-events:none; z-index:6; box-shadow:var(--shadow-pop); }

.meta__bar { height:12px; width:100%; overflow:hidden; border-radius:var(--radius-full); background:var(--surface-muted); margin:8px 0; }
.meta__fill { height:100%; border-radius:var(--radius-full); background:var(--brand-500); transition:width .4s; }
.meta__fill--done { background:var(--status-recebido); }
.meta__foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; font-size:12px; }

.compo-bar { display:flex; height:10px; width:100%; overflow:hidden; border-radius:var(--radius-full); background:var(--surface-muted); }
.compo-bar > span { display:block; height:100%; }

.xray { overflow-x:auto; }
.xray__inner { min-width:680px; }
.xray__head, .xray__row { display:grid; grid-template-columns:1.6fr 70px 110px 110px 200px; gap:16px; align-items:center; }
.xray__head { border-bottom:1px solid var(--surface-border); padding-bottom:8px; font-size:12px; font-weight:600; color:var(--ink-faint); }
.xray__row { padding:10px 0; border-bottom:1px solid var(--surface-border); font-size:14px; }
.xray__row:last-child { border-bottom:0; }

.filters__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (min-width:768px){ .filters__grid { grid-template-columns:2fr 1fr 1fr 1fr 1fr; } }
.filter-field > span { display:block; margin-bottom:4px; font-size:11px; font-weight:500; color:var(--ink-faint); }
.filter-input { height:36px; width:100%; border:1px solid var(--surface-border); border-radius:var(--radius); background:var(--surface); padding:0 12px; font-size:12px; font-weight:500; color:var(--ink-soft); }
.filter-input:focus { outline:none; border-color:var(--brand-400); box-shadow:0 0 0 2px var(--brand-100); }

.prod-controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.prod-controls__group { display:flex; align-items:center; gap:8px; }
.prod-controls__label { font-size:12px; font-weight:500; color:var(--ink-faint); }
.tabs { display:inline-flex; flex-wrap:wrap; border:1px solid var(--surface-border); border-radius:var(--radius); background:var(--surface); padding:2px; }
.tab { display:inline-flex; align-items:center; gap:6px; border-radius:6px; padding:6px 12px; font-size:12px; font-weight:500; color:var(--ink-soft); }
.tab:hover { background:var(--surface-muted); }
.tab--active { background:var(--brand-600); color:#fff; }
.tab__count { opacity:.7; }

.prod-list { overflow:hidden; }
.prod-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; width:100%; padding:10px 16px; text-align:left; }
.prod-row:hover { background:color-mix(in srgb, var(--surface-muted) 60%, transparent); }
.prod-row + .prod-row { border-top:1px solid var(--surface-border); }
.prod-row__who { display:flex; align-items:center; gap:10px; min-width:0; flex:1 1 140px; }
.prod-row__avatar { display:flex; align-items:center; justify-content:center; height:28px; width:28px; border-radius:var(--radius-full); font-size:10px; font-weight:600; flex-shrink:0; background:var(--brand-50); color:var(--brand-700); }
.prod-row__avatar--plantao { background:var(--status-atrasado-bg); color:var(--status-atrasado); }
.prod-row__name { min-width:0; font-weight:500; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prod-row__name--muted { color:var(--ink-faint); }
.prod-row__proc { min-width:0; flex:1 1 140px; }
.prod-row__proc-name { display:block; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prod-row__meta { font-size:11px; color:var(--ink-faint); }
.prod-row__wp { display:none; align-items:center; gap:6px; font-size:12px; color:var(--ink-soft); width:140px; flex-shrink:0; }
.prod-row__wp > span:last-child { min-width:0; }
@media (min-width:1024px){ .prod-row__wp { display:flex; } }
.prod-row__pay { display:none; width:160px; flex-shrink:0; min-width:0; }
@media (min-width:640px){ .prod-row__pay { display:block; } }
.prod-row__value { width:96px; flex-shrink:0; text-align:right; font-weight:600; color:var(--ink); }
.prod-row__status { width:110px; flex-shrink:0; display:flex; justify-content:flex-end; }

.group-card { overflow:hidden; }
.group-head { display:flex; align-items:center; gap:12px; width:100%; padding:12px 16px; text-align:left; border-bottom:1px solid var(--surface-border); background:color-mix(in srgb, var(--surface-muted) 50%, white); }
.group-head__title { display:block; font-size:14px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.group-head__sub { display:block; font-size:11px; color:var(--ink-faint); }
.group-head__total { margin-left:auto; text-align:right; flex-shrink:0; }
/* Celular: total desce para uma linha abaixo (não sobrepõe a data) */
@media (max-width:767px){
  .group-head { flex-wrap:wrap; align-items:flex-start; }
  .group-head__total { flex-basis:100%; margin-left:28px; text-align:left; }
}
summary.group-head { cursor:pointer; list-style:none; }
summary.group-head::-webkit-details-marker { display:none; }
details.group-card > summary .icon:first-child { transition:transform .2s; }
details.group-card:not([open]) > summary .icon:first-child { transform:rotate(-90deg); }
.prod-foot { display:flex; align-items:center; justify-content:space-between; padding:8px 4px; font-size:12px; color:var(--ink-faint); }

.detail-rows { display:flex; flex-direction:column; gap:12px; border-radius:var(--radius-xl); background:var(--surface-muted); padding:16px; margin-bottom:16px; font-size:14px; }
.detail-rows__row { display:flex; justify-content:space-between; gap:12px; }
.detail-rows__row > span:first-child { color:var(--ink-faint); }
.detail-rows__row > span:last-child { color:var(--ink); text-align:right; }

/* =========================================================== RECEBIMENTOS === */
.receb { max-width:80rem; margin:0 auto; }
.receb__stack > * + * { margin-top:20px; }

.status-cards { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (min-width:1024px){ .status-cards { grid-template-columns:repeat(4,1fr); } }
.status-card { display:block; width:100%; text-align:left; border:1px solid var(--surface-border); border-radius:var(--radius-2xl); background:var(--surface); box-shadow:var(--shadow-card); padding:20px; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.status-card:hover { border-color:var(--brand-200); }
.status-card--active { border-color:transparent; box-shadow:0 0 0 2px var(--sc); }
.status-card__head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.status-card__label { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:500; color:var(--ink-faint); }
.status-card__dot { height:8px; width:8px; border-radius:var(--radius-full); background:var(--sc); }
.status-card__count { border-radius:var(--radius-full); background:var(--surface-muted); padding:2px 8px; font-size:11px; font-weight:600; color:var(--ink-soft); }
.status-card__value { margin-top:8px; font-size:20px; font-weight:600; color:var(--ink); }
.status-card__hint { margin-top:4px; font-size:12px; color:var(--ink-faint); }

.amber-box { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; border:1px solid #FDE68A; background:#FFFBEB; border-radius:var(--radius-2xl); padding:12px 16px; }
.amber-box__icon { display:flex; align-items:center; justify-content:center; height:36px; width:36px; border-radius:var(--radius-full); background:#FEF3C7; color:#B45309; flex-shrink:0; }
.amber-chip { display:inline-block; border-radius:var(--radius-full); background:#FEF3C7; color:#B45309; padding:2px 8px; font-size:10px; font-weight:600; }

.kanban { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:start; }
/* Só vira 4 colunas lado a lado em tela larga; abaixo disso, cada status ocupa
   a largura toda (empilhado), para não confundir as colunas no laptop. */
@media (min-width:1280px){ .kanban { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.kanban__head { display:flex; align-items:center; justify-content:space-between; padding:0 4px; margin-bottom:12px; }
.kanban__body { display:flex; flex-direction:column; gap:10px; border-radius:var(--radius-2xl); background:color-mix(in srgb, var(--surface-muted) 60%, white); padding:10px; min-height:72px; }
.kanban__empty { text-align:center; font-size:12px; color:var(--ink-faint); padding:24px 8px; }

.rec-card { min-width:0; overflow:hidden; border:1px solid var(--surface-border); border-radius:var(--radius-xl); background:var(--surface); box-shadow:0 1px 2px rgba(0,0,0,.04); padding:12px; }
.rec-card__top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; min-width:0; }
.rec-card__foot > span { min-width:0; }
.rec-card__source { font-size:14px; font-weight:500; color:var(--ink); }
.rec-card__source:hover { color:var(--brand-600); text-decoration:underline; }
.rec-card__sub { margin-top:2px; font-size:12px; color:var(--ink-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rec-card__foot { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; margin-top:10px; }
.rec-card__value { font-size:14px; font-weight:600; color:var(--ink); display:block; }
.rec-card__due { font-size:11px; color:var(--ink-faint); white-space:nowrap; }
.rec-card__due--late { color:var(--status-atrasado); font-weight:500; }
.mini-btns { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.mini-btns form { display:inline; margin:0; }
.mini-btn { display:inline-block; border:1px solid var(--surface-border); border-radius:6px; padding:4px 8px; font-size:11px; font-weight:500; color:var(--ink-soft); background:var(--surface); cursor:pointer; white-space:nowrap; }
.mini-btn:hover { border-color:var(--brand-300); background:var(--brand-50); color:var(--brand-700); }
.mini-btn--nf { border-color:#DDD6FE; color:#6D28D9; background:#F5F3FF; }
.mini-btn--nf:hover { border-color:#C4B5FD; background:#EDE9FE; color:#6D28D9; }
.mini-tag { display:inline-flex; align-items:center; gap:4px; border-radius:6px; padding:4px 8px; font-size:11px; font-weight:500; white-space:nowrap; }
.mini-tag--ok { background:var(--status-recebido-bg); color:var(--status-recebido); }
.charged-chip { display:inline-block; border-radius:var(--radius-full); background:var(--status-atrasado-bg); color:var(--status-atrasado); padding:2px 8px; font-size:10px; font-weight:500; margin-bottom:6px; }

/* Fluxo de caixa (barras) */
/* Fluxo de caixa: faixas de prazo/mês como linhas com barra (fácil de ler) */
/* ===== Alerta de recorrentes a lançar ===== */
.recorr-box { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; border-color:var(--brand-100); background:color-mix(in srgb, var(--brand-50) 40%, var(--surface)); }
.recorr-box__info { min-width:0; }
.recorr-box__title { display:flex; align-items:center; gap:8px; margin:0 0 6px; font-size:14px; font-weight:600; color:var(--ink); }
.recorr-box__icon { display:inline-flex; width:26px; height:26px; align-items:center; justify-content:center; border-radius:8px; background:var(--brand-50); color:var(--brand-600); flex-shrink:0; }
.recorr-box__list { margin:0 0 4px; font-size:13px; color:var(--ink-soft); line-height:1.6; }
.recorr-box__hint { margin:0; font-size:12px; color:var(--ink-faint); }

/* ===== Raio-X das Despesas ===== */
.rx-subtitle { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-faint); margin:0 0 10px; }
.rx-months { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; align-items:end; margin-bottom:20px; min-height:124px; }
.rx-month { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; height:124px; }
.rx-month__val { font-size:11px; color:var(--ink-soft); white-space:nowrap; }
.rx-month__bar { width:70%; max-width:44px; display:flex; flex-direction:column; justify-content:flex-end; border-radius:6px 6px 0 0; overflow:hidden; }
.rx-month__seg { display:block; width:100%; }
.rx-month__seg--rec { background:var(--status-glosado); }
.rx-month__seg--var { background:var(--brand-500); }
.rx-month__label { font-size:11px; color:var(--ink-faint); }
.rx-legend { display:flex; gap:14px; font-size:11px; color:var(--ink-soft); flex-wrap:wrap; }
.rx-legend span { display:inline-flex; align-items:center; gap:5px; }
.rx-legend__dot { width:9px; height:9px; border-radius:2px; display:inline-block; flex-shrink:0; }
.rx-month { position:relative; }
.rx-month__tip { position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:8px; display:none; flex-direction:column; gap:4px; background:var(--ink); color:#fff; padding:8px 11px; border-radius:8px; font-size:11px; white-space:nowrap; z-index:5; box-shadow:0 8px 24px rgba(0,0,0,.2); pointer-events:none; }
.rx-month__tip span { display:flex; align-items:center; gap:6px; }
.rx-month__tip strong { font-weight:700; }
.rx-month__tip-h { font-weight:700; margin-bottom:1px; }
.rx-month:hover .rx-month__tip { display:flex; }

/* Seletor de período dos gráficos */
.anl-period { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.anl-period .seg { display:inline-flex; flex-wrap:nowrap; gap:0; }
.anl-period .seg__item { white-space:nowrap; }
.anl-period__label { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-faint); }
.anl-custom { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }
.anl-custom__field { display:flex; flex-direction:column; gap:3px; }
.anl-custom__field span { font-size:11px; color:var(--ink-faint); font-weight:600; }
.anl-custom__field .filter-input { width:150px; max-width:44vw; }

/* Lista de revisão das recorrentes a lançar */
.lanc-list { display:flex; flex-direction:column; border:1px solid var(--surface-border); border-radius:var(--radius-xl); overflow:hidden; }
.lanc-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 14px; }
.lanc-row + .lanc-row { border-top:1px solid var(--surface-border); }
.lanc-row__name { font-weight:500; color:var(--ink); }
.lanc-row__meta { margin:2px 0 0; font-size:12px; color:var(--ink-faint); }
.lanc-row__right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.lanc-row__val { font-weight:600; color:var(--ink); white-space:nowrap; }

/* KPIs das Despesas: rodapé alinhado na base para ficar arrumadinho */
.kpi-card { display:flex; flex-direction:column; }
.kpi__mid { flex:1; display:flex; align-items:center; }
.kpi__foot { margin-top:auto; padding-top:8px; }
.kpi__mid + .kpi__foot { margin-top:0; }  /* deixa o kpi__mid crescer e centralizar */
.kpi__foot .kpi__sub { margin:0; }
.kpi__link { display:inline-flex; align-items:center; gap:5px; margin-top:8px; font-size:12px; font-weight:600; color:var(--brand-600); }
.kpi__link .icon { transition:transform .15s; }
.kpi__link:hover .icon { transform:translateX(2px); }
.kpi__link:hover { text-decoration:underline; }
.rx-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; border-top:1px solid var(--surface-border); padding-top:14px; }
.rx-metric { display:flex; flex-direction:column; gap:3px; }
.rx-metric__label { font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.03em; font-weight:600; }
.rx-metric__value { font-size:15px; font-weight:700; color:var(--ink); }
@media (max-width:560px){ .rx-metrics { grid-template-columns:1fr; gap:8px; } .rx-month__val { font-size:10px; } }

/* ===== Convênios: prazos de pagamento por tipo ===== */
.conv-list { display:flex; flex-direction:column; }
.conv-row { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:12px 0; }
.conv-row + .conv-row { border-top:1px solid var(--surface-border); }
.conv-row__head { display:flex; align-items:center; gap:6px; min-width:150px; padding-bottom:2px; }
.conv-row__name { font-weight:600; color:var(--ink); font-size:14px; }
.conv-row__rm { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border:0; background:transparent; color:var(--ink-faint); border-radius:6px; cursor:pointer; }
.conv-row__rm:hover { background:var(--status-atrasado-bg); color:var(--status-atrasado); }
.conv-row__terms { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; }
.conv-term { display:flex; flex-direction:column; gap:3px; }
.conv-term span { font-size:11px; color:var(--ink-faint); font-weight:500; }
.conv-term__input { width:76px; text-align:center; padding:7px 6px; }
.conv-row__save { align-self:flex-end; }
@media (max-width:560px){
  .conv-row__terms { width:100%; }
  .conv-term { flex:1; min-width:64px; }
  .conv-term__input { width:100%; }
}

/* Âncoras de rolagem: compensar a barra de topo fixa (64px) para o alvo não
   ficar escondido embaixo dela (vale para #lista, #fluxo, #filtros e afins). */
html { scroll-padding-top: 80px; }

/* ===== Painel "Precisa da sua atenção" (ações + prazos de recurso) ===== */
.attn { border-color:#FDE68A; background:color-mix(in srgb, #FEF3C7 28%, var(--surface)); }
.attn__title { display:flex; align-items:center; gap:8px; margin:0 0 12px; font-size:14px; font-weight:600; color:var(--ink); }
.attn__title-icon { display:inline-flex; width:26px; height:26px; align-items:center; justify-content:center; border-radius:8px; background:#FEF3C7; color:#B45309; }
.attn__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; }
.attn__item { display:flex; flex-direction:column; gap:3px; padding:10px 12px; border:1px solid var(--surface-border); border-radius:10px; background:var(--surface); transition:border-color .15s, background .15s; }
.attn__item:hover { border-color:#F59E0B; background:color-mix(in srgb, #FEF3C7 40%, var(--surface)); }
.attn__label { font-size:12px; color:var(--ink-soft); font-weight:500; }
.attn__count { font-size:15px; font-weight:700; color:var(--ink); }
.attn__deadlines { margin-top:14px; border-top:1px solid #FDE68A; padding-top:12px; }
.attn__deadlines-title { display:flex; align-items:center; gap:6px; margin:0 0 6px; font-size:12px; font-weight:600; color:#B45309; }
.attn__deadline { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:7px 10px; border-radius:8px; font-size:13px; color:var(--ink-soft); }
.attn__deadline:hover { background:var(--surface); }
.attn__deadline + .attn__deadline { border-top:1px solid color-mix(in srgb, #FDE68A 55%, transparent); }
.attn__deadline-when { font-weight:600; white-space:nowrap; }
.attn__deadline--vencendo .attn__deadline-when { color:#B45309; }
.attn__deadline--vencido .attn__deadline-when { color:#DC2626; }

/* ===== Fluxo de Caixa Previsto: período personalizado + barras ===== */
.cf-custom { display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; margin-bottom:12px; }
.cf-custom__field { display:flex; flex-direction:column; gap:4px; }
.cf-custom__field span { font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-faint); font-weight:600; }
.cf-custom__field .filter-input { width:170px; max-width:46vw; }
.cf-custom__btn { height:38px; }

.cashflow { display:flex; flex-direction:column; }
.cf-row { display:grid; grid-template-columns:minmax(120px,auto) minmax(0,1fr) auto; gap:14px; align-items:center; padding:9px 2px; }
.cf-row + .cf-row { border-top:1px solid var(--surface-border); }
.cf-row__label { font-size:13px; color:var(--ink-soft); }
.cf-row__label small { color:var(--ink-faint); font-size:11px; }
.cf-row__track { height:12px; border-radius:var(--radius-full); background:var(--surface-muted); overflow:hidden; }
.cf-row__fill { display:block; height:100%; border-radius:var(--radius-full); background:var(--brand-500); }
.cf-row__fill--late { background:var(--status-atrasado); }
.cf-row__val { text-align:right; font-weight:600; color:var(--ink); }
.cf-row__val.text-muted { font-weight:400; color:var(--ink-faint); }

/* Lista financeira (status em foco) */
.rec-list { overflow:hidden; }
.rec-row { display:grid; grid-template-columns:minmax(0,1fr) 200px 104px auto; gap:4px 16px; align-items:center; padding:12px 16px; }
.rec-row + .rec-row { border-top:1px solid var(--surface-border); }
.rec-row:hover { background:color-mix(in srgb, var(--surface-muted) 40%, transparent); }
.rec-row__main { min-width:0; }
.rec-row__source { font-size:14px; font-weight:500; color:var(--ink); }
.rec-row__source:hover { color:var(--brand-600); text-decoration:underline; }
.rec-row__due { min-width:0; font-size:12px; }
.rec-row__value { text-align:right; font-weight:600; color:var(--ink); }
.rec-row__action { display:flex; justify-content:flex-end; gap:6px; }
/* Telas estreitas: empilha em duas linhas alinhadas (paciente/valor em cima, prazo/ações embaixo) */
@media (max-width:860px){
  .rec-row { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"main value" "due action"; gap:6px 12px; }
  .rec-row__main { grid-area:main; }
  .rec-row__value { grid-area:value; }
  .rec-row__due { grid-area:due; }
  .rec-row__action { grid-area:action; align-self:center; }
}

/* ============================================================== DESPESAS === */
.despesas { max-width:80rem; margin:0 auto; }
.despesas__stack > * + * { margin-top:20px; }
.card--brand { border-color:var(--brand-200); background:color-mix(in srgb, var(--brand-50) 60%, white); }

/* Barras por categoria (horizontais) */
.cat-bars { display:flex; flex-direction:column; gap:10px; }
.cat-bar { display:flex; align-items:center; gap:12px; }
.cat-bar__name { width:170px; flex-shrink:0; font-size:12px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:640px){ .cat-bar__name { width:110px; } }
.cat-bar__track { flex:1; height:20px; background:var(--surface-muted); border-radius:6px; overflow:hidden; }
.cat-bar__fill { display:block; height:100%; border-radius:0 6px 6px 0; min-width:2px; }
.cat-bar__val { width:150px; flex-shrink:0; font-size:11px; font-weight:600; color:var(--ink-soft); }

/* Lista de despesas */
.desp-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; }
.desp-row + .desp-row { border-top:1px solid var(--surface-border); }
.desp-row__desc { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.desp-row__title { font-size:14px; font-weight:500; color:var(--ink); }
.desp-row__meta { margin-top:2px; font-size:12px; color:var(--ink-faint); overflow:hidden; text-overflow:ellipsis; }
.desp-row__right { display:flex; align-items:center; gap:14px; flex-shrink:0; }
.desp-row__value { font-size:14px; font-weight:600; color:var(--ink); min-width:96px; text-align:right; }
.desp-row__actions { display:flex; align-items:center; gap:6px; }
.desp-row__title--link { color:var(--ink); text-decoration:none; }
.desp-row__title--link:hover { color:var(--brand-600); text-decoration:underline; }
.desp-row__attach { display:flex; gap:14px; margin:5px 0 0; flex-wrap:wrap; }
.desp-attach { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--brand-600); }
.desp-attach:hover { text-decoration:underline; }
.tag { display:inline-flex; align-items:center; gap:4px; border-radius:var(--radius-full); padding:2px 8px; font-size:10px; font-weight:500; }
.tag--brand { background:var(--brand-50); color:var(--brand-700); }
.tag--amber { background:#FEF3C7; color:#B45309; }
.tag--red { background:var(--status-atrasado-bg); color:var(--status-atrasado); }
.desp-status { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:600; white-space:nowrap; }
.desp-status__dot { width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }
.desp-status--paga    { color:var(--status-recebido); }
.desp-status--apagar  { color:#B45309; }
.desp-status--vencida { color:#DC2626; }
@media (max-width:560px){ .desp-row { flex-direction:column; align-items:stretch; } .desp-row__right { justify-content:space-between; } }

/* Checkbox estilizado como interruptor (switch) */
.switch { position:relative; display:inline-block; height:24px; width:44px; flex-shrink:0; }
.switch input { position:absolute; opacity:0; width:0; height:0; }
.switch__slider { position:absolute; inset:0; border-radius:var(--radius-full); background:var(--surface-border); transition:background-color .15s; cursor:pointer; }
.switch__slider::before { content:""; position:absolute; top:2px; left:2px; height:20px; width:20px; border-radius:var(--radius-full); background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform .15s; }
.switch input:checked + .switch__slider { background:var(--brand-600); }
.switch input:checked + .switch__slider::before { transform:translateX(20px); }

.check-row { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-soft); height:42px; }
.check-row input { height:16px; width:16px; accent-color:var(--brand-600); }

/* ============================================================== PACIENTES === */
.pac { max-width:80rem; margin:0 auto; }
.pac__stack > * + * { margin-top:20px; }
.pac-kpis { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:640px){ .pac-kpis { grid-template-columns:1fr 1fr; } }
@media (min-width:1200px){ .pac-kpis { grid-template-columns:repeat(4,1fr); } }
.pac-grid2 { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:1024px){ .pac-grid2 { grid-template-columns:2fr 1fr; } }

.avatar-sm { display:flex; align-items:center; justify-content:center; height:40px; width:40px; border-radius:var(--radius-full); background:var(--brand-50); color:var(--brand-700); font-size:12px; font-weight:600; flex-shrink:0; }
.avatar-amber { background:#FEF3C7; color:#B45309; height:36px; width:36px; }

.pac-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; width:100%; padding:12px 16px; text-align:left; }
.pac-row + .pac-row { border-top:1px solid var(--surface-border); }
.pac-row:hover { background:color-mix(in srgb, var(--surface-muted) 40%, transparent); }
.pac-row__who { display:flex; align-items:center; gap:12px; min-width:0; flex:1 1 240px; }
.pac-row__name { font-size:14px; font-weight:500; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pac-row__sub { font-size:12px; color:var(--ink-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pac-row__last { width:180px; flex-shrink:0; font-size:12px; color:var(--ink-soft); display:none; }
@media (min-width:768px){ .pac-row__last { display:block; } }
.pac-row__visits { width:60px; flex-shrink:0; text-align:center; font-size:11px; color:var(--ink-faint); display:none; }
@media (min-width:640px){ .pac-row__visits { display:block; } }
.pac-row__total { width:96px; flex-shrink:0; text-align:right; font-weight:600; color:var(--ink); display:none; }
@media (min-width:1024px){ .pac-row__total { display:block; } }
.pac-row__sit { flex-shrink:0; margin-left:auto; display:flex; justify-content:flex-end; }
.alergia-tag { display:inline-flex; align-items:center; gap:3px; border-radius:var(--radius-full); background:var(--status-glosado-bg); color:var(--status-glosado); padding:1px 8px; font-size:10px; font-weight:600; }

.mini-bars { display:flex; align-items:flex-end; gap:4px; height:36px; margin-top:8px; }
.mini-bars__bar { flex:1; background:var(--brand-500); border-radius:2px 2px 0 0; min-height:2px; }

.rel-item { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:12px 0; }
.rel-item + .rel-item { border-top:1px solid var(--surface-border); }
.rel-item__body { min-width:0; flex:1 1 200px; }
.rel-item__name { font-size:14px; font-weight:500; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rel-item__meta { font-size:12px; color:var(--ink-faint); }
.wa-btn { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--surface-border); border-radius:var(--radius); padding:6px 12px; font-size:12px; font-weight:500; color:var(--ink-soft); background:var(--surface); }
.wa-btn:hover { border-color:var(--brand-300); background:var(--brand-50); color:var(--brand-700); }
.wa-btn--muted { border-style:dashed; color:var(--ink-faint); }
.wa-btn--muted:hover { border-color:var(--brand-300); background:var(--surface-muted); color:var(--ink-soft); }

.bday { display:flex; flex-direction:column; align-items:center; justify-content:center; height:36px; width:36px; border-radius:var(--radius); line-height:1; flex-shrink:0; background:var(--brand-50); color:var(--brand-700); font-size:10px; }
.bday--today { background:var(--brand-600); color:#fff; }
.bday strong { font-size:14px; }

.timeline__item { display:flex; gap:12px; padding:10px 0; }
.timeline__item + .timeline__item { border-top:1px solid var(--surface-border); }
.timeline__dot { height:8px; width:8px; border-radius:var(--radius-full); margin-top:5px; flex-shrink:0; }
.tags-list { display:flex; flex-wrap:wrap; gap:6px; }

/* ============================================================== DASHBOARD === */
.dash { max-width:80rem; margin:0 auto; }
.dash__stack > * + * { margin-top:20px; }

/* Hero — Assistente Pulso */
.hero { position:relative; overflow:hidden; border-radius:var(--radius-2xl); background:linear-gradient(to bottom right, var(--brand-700), var(--brand-600), var(--brand-500)); color:#fff; padding:24px; box-shadow:var(--shadow-card); }
.hero__blob { position:absolute; border-radius:var(--radius-full); background:rgba(255,255,255,.05); }
.hero__row { position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 32px; }
.hero__icon { display:flex; align-items:center; justify-content:center; height:44px; width:44px; border-radius:var(--radius-xl); background:rgba(255,255,255,.15); flex-shrink:0; }
.hero__value { font-size:30px; font-weight:600; line-height:1; }
.hero__sub { margin-top:6px; font-size:12px; color:rgba(255,255,255,.85); }
.hero__chips { display:flex; flex-wrap:wrap; gap:8px; }
.hero__chip { border-radius:var(--radius-full); background:rgba(255,255,255,.15); padding:6px 12px; font-size:11px; font-weight:500; }

/* KPIs do mês */
.dash-kpis { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (min-width:1024px){ .dash-kpis { grid-template-columns:repeat(5,1fr); } }
.dash-kpi { display:flex; flex-direction:column; }
.dash-kpi__head { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
/* Cartão que leva a algum lugar: mostra a seta e reage ao passar o mouse. */
.dash-kpi--link { transition:border-color .15s, box-shadow .15s, transform .15s; }
.dash-kpi--link:hover { border-color:var(--brand-400); box-shadow:var(--shadow-card-hover, var(--shadow-card)); }
.dash-kpi--link:hover .dash-kpi__go { color:var(--brand-600); transform:translateX(2px); }
.dash-kpi__go { margin-left:auto; color:var(--ink-faint); display:flex; transition:color .15s, transform .15s; }
.dash-kpi__ic { display:flex; align-items:center; justify-content:center; height:30px; width:30px; border-radius:var(--radius); background:var(--icbg); color:var(--ic); flex-shrink:0; }
.dash-kpi__label { font-size:12px; font-weight:500; color:var(--ink-faint); }
.dash-kpi__value { margin-top:2px; font-size:22px; font-weight:600; letter-spacing:-.01em; color:var(--ink); white-space:nowrap; }
@media (max-width:560px){ .dash-kpi__value { font-size:19px; } }
.dash-kpi__foot { margin-top:auto; padding-top:8px; font-size:12px; display:flex; align-items:center; gap:4px; }
.tone-receber { --ic:var(--status-receber); --icbg:color-mix(in srgb, var(--status-receber) 14%, white); }

/* Central de Inteligência */
.intel-grid { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:640px){ .intel-grid { grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .intel-grid { grid-template-columns:repeat(3,1fr); } }
.insight { display:flex; flex-direction:column; }
.insight__head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:10px; }
.insight__icon { display:flex; align-items:center; justify-content:center; height:34px; width:34px; border-radius:var(--radius); background:var(--icbg); color:var(--ic); flex-shrink:0; }
.insight__metric { border-radius:var(--radius-full); background:var(--icbg); color:var(--ic); padding:2px 10px; font-size:12px; font-weight:600; white-space:nowrap; }
.insight__title { font-size:14px; font-weight:600; color:var(--ink); line-height:1.35; }
.insight__desc { margin-top:6px; font-size:12px; color:var(--ink-soft); line-height:1.5; flex:1; }
.insight__cta { margin-top:12px; display:flex; align-items:center; justify-content:center; gap:6px; border-radius:var(--radius); background:var(--icbg); color:var(--ic); padding:8px 12px; font-size:13px; font-weight:500; }
.insight__cta:hover { filter:brightness(.96); }
.tone-danger  { --ic:var(--status-atrasado);  --icbg:var(--status-atrasado-bg); }
.tone-warn    { --ic:#B45309;                  --icbg:#FEF3C7; }
.tone-brand   { --ic:var(--brand-700);         --icbg:var(--brand-50); }
.tone-success { --ic:var(--status-recebido);   --icbg:var(--status-recebido-bg); }
.tone-neutral { --ic:var(--ink-soft);          --icbg:var(--surface-muted); }

/* Linha inferior (fonte / próximos / amanhã) */
.dash-bottom { display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:1024px){ .dash-bottom { grid-template-columns:repeat(3,1fr); } }
.donut { position:relative; height:160px; width:160px; border-radius:var(--radius-full); margin:8px auto; }
.donut::after { content:""; position:absolute; inset:30px; background:var(--surface); border-radius:var(--radius-full); }
.donut-legend { margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.donut-legend__item { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-soft); }
.donut-legend__dot { height:10px; width:10px; border-radius:var(--radius-full); flex-shrink:0; }
.donut-legend__val { margin-left:auto; font-weight:600; color:var(--ink); }
.dash-ev { display:flex; align-items:center; gap:12px; width:100%; padding:8px; border-radius:var(--radius); text-align:left; }
.dash-ev:hover { background:var(--surface-muted); }
.dash-ev__dot { height:10px; width:10px; border-radius:var(--radius-full); flex-shrink:0; }
.card-link { display:flex; align-items:center; gap:4px; font-size:12px; font-weight:500; color:var(--brand-600); }
.card-link:hover { color:var(--brand-700); }

/* ================================================================== MODAL === */
.dialog-wrap { display:inline-block; }

/* Guia "Como usar" (passos numerados) */
.help-steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.help-steps__item { display:flex; gap:12px; }
.help-steps__num { display:flex; align-items:center; justify-content:center; height:24px; width:24px; flex-shrink:0; border-radius:var(--radius-full); background:var(--brand-50); color:var(--brand-700); font-size:12px; font-weight:600; }
.help-steps__title { font-size:14px; font-weight:500; color:var(--ink); }
.help-steps__desc { margin-top:2px; font-size:12px; color:var(--ink-faint); line-height:1.55; }
/* --- Painel lateral ----------------------------------------------------------
   Era uma caixa no meio da tela com "max-height:88vh; overflow:auto", ou seja,
   uma caixa que rolava por dentro. Formulário de cadastro não cabe nisso: metade
   do conteúdo ficava escondida atrás de uma rolagem que ninguém percebe, e o
   rodapé de botões cobria a última linha.

   O painel usa a altura inteira da tela e entra pela direita. Rolar num painel
   assim é natural e esperado, o cabeçalho fica preso em cima e os botões presos
   embaixo. Continua sendo <dialog> nativo, então foco preso, Esc e leitor de
   tela seguem funcionando de graça. */
/* O display fica SÓ no estado aberto, de propósito. Regra de autor vence a do
   navegador mesmo com especificidade menor, então declarar "display:flex" aqui
   na regra base anulava o "dialog:not([open]) { display:none }" do próprio
   navegador: todo painel fechado da página continuava existindo, deslocado 100%
   para a direita, e a tela ganhava uma barra de rolagem horizontal no celular. */
.painel {
  position:fixed; inset:0;
  width:min(34rem, 100vw); max-width:none;
  height:100dvh; max-height:none;
  margin:0 0 0 auto;                 /* cola na direita */
  flex-direction:column;
  padding:0; border:0; border-radius:0;
  background:var(--surface); color:var(--ink);
  box-shadow:-24px 0 60px -30px rgba(9,42,52,.45);
  overflow:hidden;                   /* quem rola é o corpo */

  /* Estado fechado. @starting-style dá o quadro de entrada e allow-discrete
     segura o display até a saída terminar, senão o painel sumia de uma vez. */
  translate:100% 0; opacity:0;
  transition:translate .26s ease, opacity .26s ease,
             overlay .26s allow-discrete, display .26s allow-discrete;
}
.painel[open] { display:flex; translate:0 0; opacity:1; }
@starting-style { .painel[open] { translate:100% 0; opacity:0; } }

.painel--lg { width:min(46rem, 100vw); }

.painel::backdrop {
  background:rgba(9,42,52,0);
  transition:background-color .26s ease, -webkit-backdrop-filter .26s ease,
             backdrop-filter .26s ease, overlay .26s allow-discrete, display .26s allow-discrete;
}
.painel[open]::backdrop { background:rgba(9,42,52,.4); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
@starting-style { .painel[open]::backdrop { background:rgba(9,42,52,0); } }

@media (prefers-reduced-motion: reduce) {
  .painel, .painel::backdrop { transition:none; }
  .painel[open] { translate:0 0; }
}

.painel__head {
  flex:0 0 auto;
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:18px 24px; border-bottom:1px solid var(--surface-border); background:var(--surface);
}
.painel__title { font-size:18px; font-weight:600; color:var(--ink); }
.painel__subtitle { margin-top:2px; font-size:14px; color:var(--ink-faint); line-height:1.45; }
.painel__close { border:0; background:transparent; color:var(--ink-faint); border-radius:var(--radius); padding:6px; cursor:pointer; flex-shrink:0; }
.painel__close:hover { background:var(--surface-muted); color:var(--ink); }
.painel__close:focus-visible { outline:2px solid var(--brand-400); outline-offset:2px; }

/* O corpo é a única parte que rola, e agora ele tem a tela inteira de altura. */
.painel__body { flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; padding:20px 24px; }

/* Barra de ações presa no rodapé: em formulário longo, Salvar e Cancelar ficam
   sempre à vista enquanto só os campos rolam. */
.painel__actions { display:flex; gap:12px; position:sticky; bottom:-20px; z-index:2; background:var(--surface); margin:16px -24px -20px; padding:14px 24px; border-top:1px solid var(--surface-border); }
.painel__actions > * { flex:1; }

/* Seletor de tipo de evento (3 opções, radios como botões) */
.type-seg { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.type-seg__opt input { position:absolute; opacity:0; width:0; height:0; }
.type-seg__opt span { display:block; text-align:center; border:1px solid var(--surface-border); border-radius:var(--radius); padding:8px 12px; font-size:14px; font-weight:500; color:var(--ink-soft); cursor:pointer; transition:background-color .15s, border-color .15s; }
.type-seg__opt input:checked + span { border-color:var(--brand-400); background:var(--brand-50); color:var(--brand-700); }

/* Novo Atendimento multi-item: segmentado por botões, lista de itens e rascunho */
.seg { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.seg__btn { text-align:center; border:1px solid var(--surface-border); border-radius:var(--radius); padding:8px 12px; font-size:14px; font-weight:500; color:var(--ink-soft); background:var(--surface); cursor:pointer; transition:background-color .15s, border-color .15s; }
.seg__btn:hover { background:var(--surface-muted); }
.seg__btn--active { border-color:var(--brand-400); background:var(--brand-50); color:var(--brand-700); }

.atd-items { margin-top:18px; padding-top:16px; border-top:1px solid var(--surface-border); }
.atd-items__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.atd-items__title { font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); }
.atd-items__summary { font-size:12px; color:var(--ink-faint); }
.atd-items__summary .tabular { font-weight:600; color:var(--ink); }
.atd-items__list { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.atd-items__list:empty { display:none; }

.atd-item { display:flex; align-items:flex-start; gap:12px; border:1px solid var(--surface-border); background:color-mix(in srgb, var(--surface-muted) 45%, white); border-radius:var(--radius-xl); padding:12px 14px; }
.atd-item__main { min-width:0; flex:1; }
.atd-item__top { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.atd-item__name { font-size:14px; font-weight:500; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.atd-item__sub { margin-top:3px; font-size:12px; color:var(--ink-faint); }
.atd-item__right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.atd-item__val { font-size:14px; font-weight:600; color:var(--ink); }
.atd-item__rm { display:inline-flex; padding:6px; border:0; border-radius:var(--radius); background:transparent; color:var(--ink-faint); cursor:pointer; transition:background-color .15s, color .15s; }
.atd-item__rm:hover { background:var(--status-atrasado-bg); color:var(--status-atrasado); }

.draft-box { border:1px dashed var(--surface-border); border-radius:var(--radius-xl); padding:16px; }
.draft-box__title { font-size:12px; font-weight:600; color:var(--ink-soft); margin-bottom:12px; }
.draft-box__hint { margin-top:8px; text-align:center; font-size:11px; color:var(--ink-faint); }
.btn-add-item { display:flex; width:100%; align-items:center; justify-content:center; gap:8px; margin-top:18px; border:1px solid var(--brand-200); background:color-mix(in srgb, var(--brand-50) 60%, white); border-radius:var(--radius); padding:10px 12px; font-size:14px; font-weight:500; color:var(--brand-700); cursor:pointer; transition:background-color .15s; }
.btn-add-item:hover { background:var(--brand-50); }

.form-error { margin-top:12px; font-size:12px; font-weight:500; color:var(--status-atrasado); }

/* Menu de exportação (Excel / PDF) no cabeçalho da Produção */
.export-wrap { position:relative; display:inline-flex; }
.export-menu { position:absolute; right:0; top:calc(100% + 6px); z-index:45; background:var(--surface); border:1px solid var(--surface-border); border-radius:var(--radius-xl); box-shadow:var(--shadow-pop); padding:6px; min-width:16rem; }
.export-menu__item { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--radius); color:var(--ink); text-decoration:none; font-size:14px; }
.export-menu__item:hover { background:var(--surface-muted); }
.export-menu__item .icon { color:var(--brand-600); flex-shrink:0; }
.export-menu__hint { font-size:12px; color:var(--ink-faint); font-weight:400; }

/* Resumo por tipo no topo do relatório */
.doc-summary { display:flex; flex-wrap:wrap; gap:8px 10px; margin-top:16px; }
.doc-summary__item { display:inline-flex; align-items:center; gap:7px; border:1px solid #e2e2e2; border-radius:8px; padding:6px 11px; font-size:12px; color:#333; }
.doc-summary__dot { width:9px; height:9px; border-radius:999px; flex-shrink:0; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.doc-summary__item strong { font-variant-numeric:tabular-nums; }
.doc-summary__val { color:#777; font-variant-numeric:tabular-nums; }

/* Tabela do relatório imprimível (PDF) */
.doc-table { width:100%; table-layout:fixed; border-collapse:collapse; font-size:11.5px; margin-top:16px; }
.doc-table th { text-align:left; padding:7px 8px; border-bottom:2px solid #1f2a2a; font-size:10px; text-transform:uppercase; letter-spacing:.03em; color:#444; }
.doc-table td { padding:6px 8px; border-bottom:1px solid #e6e6e6; vertical-align:top; overflow-wrap:anywhere; }
.doc-table .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.doc-table th.num { text-align:right; }
.doc-table .nowrap { white-space:nowrap; }
.doc-table .doc-muted { color:#999; }
.doc-table tfoot td { font-weight:700; border-top:2px solid #1f2a2a; border-bottom:0; padding-top:9px; }
.doc-foot { margin-top:22px; font-size:11px; color:#999; }
@media print { .doc-table { font-size:10.5px; } .doc-table tr { break-inside:avoid; } }

/* Tabela de conferência da importação (foto/planilha/TISS) */
.input--sm { height:34px; font-size:13px; padding:6px 8px; }
.import-table { overflow-x:auto; }
.import-table__head, .import-row {
  display:grid; grid-template-columns:28px minmax(120px,1.4fr) 128px 118px minmax(140px,1.6fr) 96px 100px;
  gap:8px; align-items:center; min-width:820px;
}
.import-table__head { padding:0 4px 10px; font-size:11px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-faint); }
.import-row { padding:6px 4px; border-top:1px solid var(--surface-border); }
.import-row__check { display:flex; justify-content:center; }
.import-row__check input[type=checkbox] { width:16px; height:16px; cursor:pointer; }

/* Autocomplete do catálogo TUSS no campo de procedimento */
.proc-pop { position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:50; background:var(--surface); border:1px solid var(--surface-border); border-radius:var(--radius-xl); box-shadow:var(--shadow-pop); max-height:16rem; overflow-y:auto; padding:4px; }
/* Dropdown do campo de código: coluna estreita, então ancora à direita e alarga p/ caber a descrição */
.proc-pop--wide { left:auto; right:0; min-width:min(320px, 78vw); }
.proc-opt { display:flex; flex-direction:column; gap:2px; width:100%; text-align:left; border:0; background:transparent; border-radius:var(--radius); padding:8px 10px; cursor:pointer; }
.proc-opt:hover { background:var(--surface-muted); }
.proc-opt__name { font-size:13px; font-weight:500; color:var(--ink); }
.proc-opt__meta { font-size:11px; color:var(--ink-faint); }
.proc-opt__meta--old { color:var(--status-atrasado); }

/* Ícone de vínculo (item pertence a atendimento com vários itens) */
.atd-link { display:inline-flex; vertical-align:middle; margin-right:4px; color:var(--brand-400); }

/* Detalhe: itens do mesmo atendimento */
.atd-siblings { border:1px solid var(--brand-100); background:color-mix(in srgb, var(--brand-50) 40%, white); border-radius:var(--radius-xl); padding:14px 16px; margin-bottom:16px; }
.atd-siblings__title { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--brand-700); margin-bottom:10px; }
.atd-siblings__list { display:flex; flex-direction:column; gap:6px; }
.atd-sibling { display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--surface); border-radius:var(--radius); padding:8px 12px; text-decoration:none; box-shadow:var(--shadow-card); transition:box-shadow .15s; }
.atd-sibling:hover { box-shadow:var(--shadow-pop); }
.atd-sibling__name { display:block; font-size:14px; font-weight:500; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.atd-sibling__meta { font-size:11px; color:var(--ink-faint); }
.atd-sibling__val { flex-shrink:0; font-size:14px; font-weight:600; color:var(--ink); }

/* Chips-radio (prazo de pagamento) */
.pill-radio input { position:absolute; opacity:0; width:0; height:0; }
.pill-radio span { display:inline-block; border:1px solid var(--surface-border); border-radius:var(--radius); padding:6px 12px; font-size:12px; font-weight:500; color:var(--ink-soft); cursor:pointer; transition:background-color .15s, border-color .15s; }
.pill-radio input:checked + span { border-color:var(--brand-400); background:var(--brand-50); color:var(--brand-700); }

/* Painel de recorrência */
.recur { margin-top:12px; border:1px solid var(--brand-100); background:color-mix(in srgb, var(--brand-50) 30%, white); border-radius:var(--radius-xl); padding:14px; }
.recur .input { width:auto; }

/* Seletor de cores (radios como bolinhas) */
.color-picker { display:flex; gap:10px; }
.color-picker input { position:absolute; opacity:0; width:0; height:0; }
.swatch { cursor:pointer; }
.swatch > span { display:block; height:32px; width:32px; border-radius:var(--radius-full); background:var(--sw); transition:transform .1s, box-shadow .1s; }
.swatch input:checked + span { transform:scale(1.1); box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--brand-400); }

/* Mensagem da solicitação de troca (prévia) */
.swap-msg { white-space:pre-wrap; font-family:inherit; font-size:13px; line-height:1.55; color:var(--ink-soft); background:var(--surface-muted); border:1px solid var(--surface-border); border-radius:var(--radius-xl); padding:14px 16px; margin:0 0 4px; }

/* Chips de anexo (multi-seleção via checkbox) — Contestar Glosa */
.chip-checks { display:flex; flex-wrap:wrap; gap:8px; }
.chip-check input { position:absolute; opacity:0; width:0; height:0; }
.chip-check span { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--surface-border); border-radius:var(--radius); padding:6px 12px; font-size:12px; font-weight:500; color:var(--ink-soft); cursor:pointer; transition:background-color .15s, border-color .15s; }
.chip-check input:checked + span { border-color:var(--brand-400); background:var(--brand-50); color:var(--brand-700); }

/* Pílula "Em análise" (situação do recurso) */
.pill-receber { border-radius:var(--radius-full); background:var(--status-receber-bg); color:var(--status-receber); padding:2px 8px; font-size:11px; font-weight:500; }

/* ===== Documento imprimível (recurso de glosa / diferença) ===== */
.doc-body { background:var(--surface-muted); padding:24px 16px; min-height:100vh; }
.doc-toolbar { max-width:210mm; margin:0 auto 16px; display:flex; justify-content:space-between; gap:12px; }
.doc-sheet { max-width:210mm; margin:0 auto; background:#fff; border:1px solid var(--surface-border); border-radius:8px; padding:22mm 20mm; box-shadow:0 1px 3px rgba(0,0,0,.08); color:var(--ink); font-size:13px; line-height:1.7; }
/* Relatório (tabela larga): folha mais larga na tela e paisagem na impressão */
.doc-body--report .doc-toolbar, .doc-body--report .doc-sheet { max-width:290mm; }
.doc-body--report .doc-sheet { padding:16mm 14mm; }
@page landscape-report { size:A4 landscape; margin:12mm; }
.doc-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.doc-emitente { font-size:15px; font-weight:600; color:var(--ink); }
.doc-meta { font-size:12px; color:var(--ink-faint); }
.doc-rule { border:none; border-top:2px solid var(--brand-500); margin:12px 0 20px; }
.doc-title-block { margin-bottom:18px; }
.doc-title-block h1 { font-size:19px; font-weight:700; letter-spacing:.01em; color:var(--ink); }
.doc-sub { font-size:12px; color:var(--brand-600); font-weight:500; margin-top:2px; }
.doc-para { margin:0 0 12px; text-align:justify; }
.doc-fields { width:100%; border-collapse:collapse; margin:0 0 16px; }
.doc-fields--top { margin-bottom:20px; }
.doc-fields td { padding:5px 0; vertical-align:top; border-bottom:1px solid var(--surface-border); }
.doc-fields td:first-child { color:var(--ink-faint); width:42%; }
.doc-fields td:last-child { text-align:right; }
.doc-fields--total td { border-bottom:none; padding:4px 0; }
.doc-fields__hl td { border-top:1px solid var(--surface-border); padding-top:8px; font-size:15px; color:var(--brand-700); }
.doc-section { margin:0 0 16px; }
.doc-label { font-size:11px; text-transform:uppercase; letter-spacing:.04em; font-weight:600; color:var(--ink-faint); margin-bottom:4px; }
.doc-list { margin:4px 0 0; padding-left:20px; }
.doc-list li { margin-bottom:3px; }
.doc-sign { margin:32px 0 0; }
.doc-sign__line { width:280px; border-top:1px solid var(--ink-soft); margin-bottom:6px; }
.doc-foot { margin-top:28px; padding-top:12px; border-top:1px solid var(--surface-border); font-size:11px; color:var(--ink-faint); line-height:1.5; }
.doc-note { border-radius:8px; padding:9px 13px; font-size:12.5px; line-height:1.5; margin:0 0 18px; border:1px solid; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.doc-note--dentro { background:#F0F7F4; border-color:#CDE6DC; color:#1F5C46; }
.doc-note--vencendo { background:#FEF6E7; border-color:#F3D48A; color:#8A5A00; }
.doc-note--vencido { background:#FDECEC; border-color:#F3BEBE; color:#9B2C2C; }
@media print {
  .doc-toolbar { display:none !important; }
  .doc-body { background:#fff; padding:0; }
  .doc-sheet { max-width:none; border:none; border-radius:0; box-shadow:none; padding:0; margin:0; }
  @page { size:A4; margin:16mm; }
  /* O relatório de produção sai em paisagem (tabela larga) */
  .doc-body--report .doc-sheet { page:landscape-report; }
}

/* Cabeçalho da lista do status em foco (aparece logo abaixo dos cartões) */
.rec-list__head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid var(--surface-border); background:color-mix(in srgb, var(--surface-muted) 30%, white); }

/* Previsão realista (badge âmbar com sparkle) */
.prev-real { display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:500; color:#B45309; white-space:nowrap; }
.prev-real .icon { flex-shrink:0; }

/* Raio-X dos Pagadores */
.ta-r { text-align:right; }
/* Raio-X dos Pagadores: cartões por fonte (sem rolagem horizontal) */
.payer-list { display:flex; flex-direction:column; gap:10px; }
.payer { border:1px solid var(--surface-border); border-radius:var(--radius-xl); padding:12px 14px; }
.payer__head { display:flex; align-items:center; gap:10px; }
.payer__name { min-width:0; flex:1 1 auto; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.payer__source { font-size:14px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.payer__count { font-size:11px; color:var(--ink-faint); }
.payer__total { flex-shrink:0; font-size:15px; font-weight:600; color:var(--ink); }
.payer__metrics { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px 16px; margin-top:12px; padding-top:12px; border-top:1px solid var(--surface-border); }
.metric { display:flex; flex-direction:column; gap:2px; min-width:0; }
.metric__label { font-size:11px; color:var(--ink-faint); }
.metric__val { font-size:14px; font-weight:500; color:var(--ink); }
.raiox__grade { display:flex; height:28px; width:28px; flex-shrink:0; align-items:center; justify-content:center; border-radius:var(--radius); font-size:14px; font-weight:700; }
.raiox__tag { border-radius:var(--radius-full); padding:2px 8px; font-size:10px; font-weight:600; white-space:nowrap; }
.raiox__dev { border-radius:var(--radius-full); padding:2px 6px; font-size:10px; font-weight:600; white-space:nowrap; }
.raiox__bar { display:inline-block; height:6px; width:56px; overflow:hidden; border-radius:var(--radius-full); background:var(--surface-muted); margin-left:8px; vertical-align:middle; }
.raiox__bar > span { display:block; height:100%; border-radius:var(--radius-full); background:var(--status-recebido); }

/* Conciliação bancária */
.concil-sources { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px; }
@media (max-width:640px) { .concil-sources { grid-template-columns:1fr; } }
.concil-source { display:block; border:1px solid var(--surface-border); border-radius:var(--radius-xl); padding:16px; text-align:left; transition:background-color .15s, border-color .15s; }
.concil-source:hover { background:var(--surface-muted); }
.concil-source--brand { border-color:var(--brand-200); background:color-mix(in srgb, var(--brand-50) 50%, white); }
.concil-source--brand:hover { background:var(--brand-50); }
.concil-source__title { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--ink); }
.concil-entry { display:flex; align-items:flex-start; gap:12px; border:1px solid var(--surface-border); border-radius:var(--radius-xl); padding:12px 14px; background:#fff; cursor:pointer; }
.concil-entry--none { border-style:dashed; background:color-mix(in srgb, var(--surface-muted) 40%, white); cursor:default; }
.concil-check { margin-top:3px; height:16px; width:16px; flex-shrink:0; accent-color:var(--brand-600); }
.file-drop { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:auto; padding:12px; border:1.5px dashed var(--brand-300); border-radius:var(--radius); background:#fff; color:var(--brand-700); font-size:12px; font-weight:500; cursor:pointer; text-align:center; transition:background-color .15s, border-color .15s; }
.file-drop:hover { background:var(--brand-50); }
.file-drop--filled { border-style:solid; border-color:var(--brand-500); background:var(--brand-50); }
.file-drop span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ===== Pacientes: relacionamento + agendamento ===== */
.rel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.rel-head__title { font-size:15px; font-weight:600; color:var(--ink); }
.rel-head__sub { font-size:12px; color:var(--ink-faint); margin-top:2px; }
/* Cabeçalho com ícone: o ícone fica ao lado do título, nunca acima dele. */
.rel-head > .row { flex-wrap:nowrap; align-items:flex-start; }
.rel-head .badge { white-space:nowrap; flex-shrink:0; }
.slot-chip { display:inline-flex; align-items:center; justify-content:center; height:34px; min-width:46px; padding:0 8px; flex-shrink:0; border-radius:var(--radius); background:var(--brand-50); color:var(--brand-700); font-size:12px; font-weight:600; }
.tag-brand { border-radius:var(--radius-full); background:var(--brand-50); color:var(--brand-700); padding:2px 8px; font-size:10px; font-weight:500; white-space:nowrap; }
.pill-radios { display:flex; flex-wrap:wrap; gap:8px; }
.day-toggles { display:flex; flex-wrap:wrap; gap:8px; }
.day-toggle input { position:absolute; opacity:0; width:0; height:0; }
.day-toggle span { display:flex; align-items:center; justify-content:center; height:36px; width:36px; border-radius:var(--radius-full); background:var(--surface-muted); color:var(--ink-faint); font-size:12px; font-weight:500; cursor:pointer; transition:background-color .15s, color .15s; }
.day-toggle input:checked + span { background:var(--brand-600); color:#fff; }
.pac-grid-agenda { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:900px) { .pac-grid-agenda { grid-template-columns:1fr 1.4fr; align-items:start; } }

/* Página pública de agendamento */
.avatar-lg { display:flex; align-items:center; justify-content:center; height:48px; width:48px; flex-shrink:0; border-radius:var(--radius-full); background:var(--brand-600); color:#fff; font-size:15px; font-weight:600; }
.pubchip { display:inline-flex; align-items:center; gap:5px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.06); border-radius:var(--radius-full); padding:4px 10px; font-size:11px; font-weight:500; color:var(--ink-soft); }
.pubfoot { border-top:1px solid var(--surface-border); background:color-mix(in srgb, var(--surface-muted) 40%, white); text-align:center; padding:10px; font-size:10px; color:var(--ink-faint); }
.pubdays { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:20px; }
.pubday { display:flex; flex-direction:column; align-items:center; gap:2px; width:64px; flex-shrink:0; border:1px solid var(--surface-border); border-radius:var(--radius-xl); padding:8px 0; font-size:12px; font-weight:500; color:var(--ink-soft); }
.pubday--active { border-color:var(--brand-400); background:var(--brand-50); color:var(--brand-700); }
.pubday--off { background:var(--surface-muted); color:var(--ink-faint); opacity:.6; cursor:not-allowed; }
.pubday__num { font-size:15px; font-weight:600; }
.pubday__free { font-size:9px; }
.pubslots { display:grid; grid-template-columns:repeat(auto-fill, minmax(58px, 1fr)); gap:8px; margin-bottom:4px; }
.pubslot input { position:absolute; opacity:0; width:0; height:0; }
.pubslot span { display:block; text-align:center; border:1px solid var(--surface-border); border-radius:var(--radius); padding:8px 4px; font-size:12px; font-weight:500; color:var(--ink-soft); cursor:pointer; transition:background-color .15s, border-color .15s; }
.pubslot input:checked + span { background:var(--brand-600); color:#fff; border-color:var(--brand-500); }
.step-label { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--ink); margin-bottom:10px; }
.step-num { display:flex; align-items:center; justify-content:center; height:20px; width:20px; flex-shrink:0; border-radius:var(--radius-full); background:var(--brand-600); color:#fff; font-size:10px; font-weight:600; }

/* Página pública de trocas (layout "public") */
.pubswap { min-height:100vh; display:flex; flex-direction:column; background:var(--surface-muted); }
.pubswap__header { display:flex; justify-content:center; padding:18px; background:var(--surface); border-bottom:1px solid var(--surface-border); }
.pubswap__main { flex:1; width:100%; max-width:40rem; margin:0 auto; padding:28px 16px; }
.pubswap__footer { text-align:center; padding:18px; font-size:12px; color:var(--ink-faint); }

/* ===== Agenda: abas, views (dia/lista), bloqueios e escala em grupo ===== */
/* Overrides do .seg genérico (grid) para os segmentados horizontais da Agenda */
.agenda-tabs, .cal-views, .origem-tabs, .settings-tabs { display:inline-flex; flex-wrap:nowrap; gap:0; margin-bottom:0; }
.agenda-tabs, .origem-tabs, .settings-tabs { max-width:100%; overflow-x:auto; width:fit-content; }
.agenda-tabs .seg__item, .cal-views .seg__item, .origem-tabs .seg__item, .settings-tabs .seg__item { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.tab-dot { height:6px; width:6px; border-radius:var(--radius-full); background:var(--status-atrasado); margin-left:2px; }

/* Pílula de bloqueio no mês */
.cal-pill--block { background:var(--surface); border:1px dashed currentColor; }
.cal-pill--block span { color:inherit; }
/* Bloqueio na semana */
.cal-week-block { display:flex; align-items:center; gap:6px; border-left:3px solid; background:var(--surface-muted); border-radius:var(--radius); padding:6px 8px; font-size:12px; font-weight:500; margin-bottom:8px; }
.cal-week-block span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Visão de Dia */
.cal-daylist { border:1px solid var(--surface-border); border-radius:var(--radius-2xl); background:var(--surface); box-shadow:var(--shadow-card); overflow:hidden; }
.cal-daylist__head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--surface-border); }
.cal-daylist__weekday { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-faint); }
.cal-daylist__num { font-size:26px; font-weight:700; color:var(--ink); line-height:1; }
.cal-daylist__num--today { color:var(--brand-600); }
.day-ev { display:flex; align-items:center; gap:14px; padding:14px 20px; border-bottom:1px solid var(--surface-border); }
.day-ev:last-child { border-bottom:0; }
.day-ev:hover { background:var(--surface-muted); }
.day-ev--conflict { box-shadow:inset 3px 0 0 #ef4444; }
.day-ev__time { font-size:12px; font-weight:600; color:var(--ink); text-align:right; min-width:44px; line-height:1.3; }
.day-ev__bar { width:4px; align-self:stretch; border-radius:var(--radius-full); }
.day-ev__title { font-size:14px; font-weight:500; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.day-block { display:flex; align-items:center; gap:12px; padding:12px 20px; border-bottom:1px solid var(--surface-border); border-left:4px solid; background:color-mix(in srgb, var(--surface-muted) 55%, white); }
.day-block__icon { flex-shrink:0; }
.day-block__title { font-size:14px; font-weight:600; color:var(--ink); }

/* Visão em Lista (agenda) */
.cal-agenda { border:1px solid var(--surface-border); border-radius:var(--radius-2xl); background:var(--surface); box-shadow:var(--shadow-card); overflow:hidden; }
.agenda-day { display:flex; gap:16px; padding:14px 20px; border-bottom:1px solid var(--surface-border); }
.agenda-day:last-child { border-bottom:0; }
.agenda-day__date { display:flex; flex-direction:column; align-items:center; min-width:46px; flex-shrink:0; }
.agenda-day__num { font-size:20px; font-weight:700; color:var(--ink); line-height:1; }
.agenda-day__num--today { color:var(--brand-600); }
.agenda-day__mon { font-size:11px; font-weight:600; text-transform:uppercase; color:var(--ink-faint); }
.agenda-day__wd { font-size:11px; }
.agenda-day__items { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.agenda-item { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:var(--radius-xl); background:var(--surface-muted); }
.agenda-item:hover { background:color-mix(in srgb, var(--surface-muted) 60%, var(--brand-50)); }
.agenda-item--conflict { box-shadow:inset 3px 0 0 #ef4444; }
.agenda-item--block { background:transparent; border-left:3px solid; border-radius:0; font-size:13px; color:var(--ink-soft); }
.agenda-item__time { font-size:12px; font-weight:600; color:var(--ink); min-width:40px; }
.agenda-item__dot { height:8px; width:8px; border-radius:var(--radius-full); flex-shrink:0; }
.agenda-item__title { font-size:14px; font-weight:500; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
/* Celular: o título pode quebrar em 2 linhas (mostra o nome do paciente inteiro) */
@media (max-width:560px){ .agenda-item { align-items:flex-start; } .agenda-item__title { white-space:normal; } }

/* Escala em grupo */
.escala-carga { display:flex; flex-wrap:wrap; gap:10px; }
.escala-carga__card { border:1px solid var(--surface-border); border-radius:var(--radius-xl); background:var(--surface); box-shadow:var(--shadow-card); padding:10px 14px; min-width:140px; }
.escala-carga__name { font-size:13px; font-weight:600; color:var(--ink); }
.escala-carga__stat { font-size:12px; color:var(--ink-soft); margin-top:2px; }
.escala-row { display:flex; align-items:center; gap:14px; padding:12px 16px; border-bottom:1px solid var(--surface-border); }
.escala-row:last-child { border-bottom:0; }
.escala-row__when { min-width:120px; flex-shrink:0; }
.escala-row__date { font-size:14px; font-weight:600; color:var(--ink); display:block; }
.escala-row__info { flex:1; }
.escala-row__title { font-size:14px; font-weight:500; color:var(--ink); display:flex; align-items:center; gap:8px; }
.escala-row__dot { height:9px; width:9px; border-radius:var(--radius-full); flex-shrink:0; }
.escala-row__assign select { min-width:130px; }
@media (max-width:720px) {
  .escala-row { flex-wrap:wrap; gap:8px; }
  .escala-row__assign { width:100%; }
  .escala-row__assign select { width:100%; }
}

/* ===== Editor de mensagens de WhatsApp (Configurações) ===== */
.msg-block { padding-top:16px; }
.msg-block:first-child { padding-top:0; }
.msg-vars { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:10px 0 6px; }
.msg-var { border:1px solid var(--surface-border); background:var(--surface-muted); color:var(--brand-700); border-radius:var(--radius-full); padding:2px 10px; font-size:11px; font-weight:500; font-family:var(--mono, monospace); cursor:pointer; }
.msg-var:hover { border-color:var(--brand-300); background:var(--brand-50); }
.msg-preview { margin-top:10px; }
.msg-preview__label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); }
.msg-preview__bubble { margin:4px 0 0; background:#DCF8C6; color:#1f2c1a; border-radius:12px 12px 12px 4px; padding:10px 14px; font-size:13px; line-height:1.5; max-width:34rem; white-space:pre-wrap; word-break:break-word; box-shadow:0 1px 1px rgba(0,0,0,.08); }
@media (prefers-color-scheme: dark) {
  .msg-preview__bubble { background:#075E54; color:#eafaf1; }
}

/* Atalho anti-falta no topo da Agenda -> painel de confirmações (Pacientes) */
.ag-confirm { display:flex; align-items:center; gap:12px; border:1px solid #FDE68A; background:#FFFBEB; border-radius:var(--radius-2xl); padding:12px 16px; }
.ag-confirm:hover { border-color:#FCD34D; background:#FEF9E7; }
.ag-confirm__ic { display:flex; align-items:center; justify-content:center; height:32px; width:32px; border-radius:var(--radius-full); background:#FEF3C7; color:#B45309; flex-shrink:0; }
.ag-confirm__txt { flex:1; min-width:0; font-size:13px; color:var(--ink); }
.ag-confirm__cta { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; color:#B45309; white-space:nowrap; }

/* Painel da Agenda: grade de cartões que preenche com 4 ou 5 itens */
.painel-kpis { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
/* No celular, 1 coluna: cada cartão fica do tamanho do conteúdo (sem esticar
   nem sobrar espaço em branco). Cobre todos os tamanhos de celular. */
@media (max-width:767px){ .painel-kpis { grid-template-columns:1fr; gap:12px; } }

/* Proposta de troca (inbox) no celular: texto em largura total, botões embaixo
   (evita o texto ser espremido numa coluna estreita e quebrar letra a letra). */
@media (max-width:767px){
  .inbox-prop { flex-direction:column; align-items:stretch; }
  .inbox-prop > div { width:100%; }
  .inbox-prop__actions { display:flex; }
  .inbox-prop__actions > form { flex:1; }
  .inbox-prop__actions .btn { width:100%; }
}
@media (min-width:1024px){ .painel-kpis { grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); } }

/* ===================== Central de Ajuda (curso) ===================== */
.course { min-height:100vh; display:flex; flex-direction:column; background:var(--surface-muted); }
.course-top { display:flex; align-items:center; gap:16px; padding:12px 20px; background:var(--surface); border-bottom:1px solid var(--surface-border); position:sticky; top:0; z-index:20; }
.course-top__menu { display:none; }
.course-brand { display:flex; align-items:center; gap:10px; font-size:15px; color:var(--ink); text-decoration:none; }
.course-brand__ic { display:flex; align-items:center; justify-content:center; height:32px; width:32px; border-radius:var(--radius-full); background:var(--brand-600); color:#fff; }
.course-brand__sep { color:var(--ink-faint); }
.course-top__progress { display:flex; align-items:center; gap:10px; margin-left:auto; min-width:160px; }
.course-top__pct { font-size:12px; font-weight:600; color:var(--brand-700); }
.course-bar { flex:1; height:8px; border-radius:var(--radius-full); background:var(--surface-border); overflow:hidden; }
.course-bar span { display:block; height:100%; background:var(--brand-600); border-radius:var(--radius-full); transition:width .3s; }
.course-bar--lg { height:12px; }
.course-body { flex:1; display:grid; grid-template-columns:288px 1fr; align-items:start; }
.course-nav { position:sticky; top:57px; align-self:start; max-height:calc(100vh - 57px); overflow-y:auto; padding:16px 12px 40px; border-right:1px solid var(--surface-border); background:var(--surface); }
.course-main { padding:28px; min-width:0; }

.course-navhome, .course-navcert { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:var(--radius); font-size:13px; font-weight:500; color:var(--ink-soft); text-decoration:none; }
.course-navhome:hover, .course-navcert:hover { background:var(--surface-muted); }
.course-navhome.is-active, .course-navcert.is-active { background:var(--brand-50, color-mix(in srgb, var(--brand-600) 12%, white)); color:var(--brand-700); }
.course-navcert { margin-top:12px; color:var(--brand-700); font-weight:600; }
.course-mod { margin-top:14px; }
.course-mod__title { display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-faint); padding:4px 10px; }
.course-mod__ic { color:var(--brand-600); display:inline-flex; }
.course-mod__lessons { list-style:none; margin:2px 0 0; padding:0; }
.course-lesson { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:var(--radius); font-size:13px; color:var(--ink-soft); text-decoration:none; }
.course-lesson:hover { background:var(--surface-muted); }
.course-lesson.is-active { background:color-mix(in srgb, var(--brand-600) 12%, white); color:var(--brand-800); font-weight:600; }
.course-lesson__check { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; height:16px; width:16px; border-radius:var(--radius-full); border:1.5px solid var(--surface-border); color:#fff; }
.course-lesson__check.is-done { background:var(--status-recebido, #16A34A); border-color:var(--status-recebido, #16A34A); }
.course-lesson__txt { overflow:hidden; text-overflow:ellipsis; }

/* Home do curso */
.course-home { max-width:960px; margin:0 auto; }
.course-hero { background:var(--surface); border:1px solid var(--surface-border); border-radius:var(--radius-2xl); box-shadow:var(--shadow-card); padding:32px; text-align:center; }
.course-hero__ic { display:inline-flex; align-items:center; justify-content:center; height:56px; width:56px; border-radius:var(--radius-full); background:var(--brand-600); color:#fff; margin-bottom:12px; }
.course-hero__title { font-size:24px; font-weight:700; color:var(--ink); }
.course-hero__lead { color:var(--ink-soft); max-width:560px; margin:8px auto 0; }
.course-hero__progress { max-width:420px; margin:22px auto 0; }
.course-hero__pct { font-size:13px; color:var(--ink-soft); margin-top:8px; }
.course-hero__cta { display:flex; gap:10px; justify-content:center; margin-top:20px; flex-wrap:wrap; }
.course-modgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:16px; margin-top:24px; }
.course-modcard { display:block; background:var(--surface); border:1px solid var(--surface-border); border-radius:var(--radius-2xl); box-shadow:var(--shadow-card); padding:18px; text-decoration:none; transition:border-color .15s, transform .15s; }
.course-modcard:hover { border-color:var(--brand-300); transform:translateY(-2px); }
.course-modcard__head { display:flex; align-items:center; gap:8px; }
.course-modcard__ic { display:inline-flex; align-items:center; justify-content:center; height:34px; width:34px; border-radius:var(--radius-xl); background:color-mix(in srgb, var(--brand-600) 12%, white); color:var(--brand-700); }
.course-modcard__step { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-faint); }
.course-modcard__done { margin-left:auto; display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:600; color:var(--status-recebido, #16A34A); }
.course-modcard__title { font-size:16px; font-weight:600; color:var(--ink); margin-top:10px; }
.course-modcard__intro { font-size:13px; color:var(--ink-soft); margin-top:4px; line-height:1.45; }
.course-modcard__foot { font-size:12px; color:var(--ink-faint); margin-top:12px; }

/* Aula */
.lesson { max-width:760px; margin:0 auto; }
.lesson__crumb { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--brand-600); }
.lesson__title { font-size:24px; font-weight:700; color:var(--ink); margin-top:6px; }
.lesson__intro { font-size:15px; color:var(--ink-soft); margin-top:8px; line-height:1.5; }
.lesson__shot { margin:20px 0 0; border:1px solid var(--surface-border); border-radius:var(--radius-2xl); overflow:hidden; background:var(--surface); box-shadow:var(--shadow-card); }
.lesson__shot img { display:block; width:100%; height:auto; }
.lesson__shot--pending { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:40px 20px; color:var(--ink-faint); border-style:dashed; box-shadow:none; background:var(--surface-muted); font-size:13px; }
.lesson__steps { list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.lesson__step { display:flex; gap:12px; }
.lesson__num { flex-shrink:0; display:flex; align-items:center; justify-content:center; height:26px; width:26px; border-radius:var(--radius-full); background:var(--brand-600); color:#fff; font-size:13px; font-weight:600; }
.lesson__step-title { font-size:14px; font-weight:600; color:var(--ink); }
.lesson__step-desc { font-size:13px; color:var(--ink-soft); margin-top:2px; line-height:1.5; }
.lesson__note { display:flex; gap:8px; align-items:flex-start; margin-top:20px; padding:12px 14px; border-radius:var(--radius-xl); background:color-mix(in srgb, var(--brand-600) 8%, white); color:var(--brand-800); font-size:13px; }
.lesson__actions { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:28px; padding-top:20px; border-top:1px solid var(--surface-border); }
.lesson__doneflag { display:flex; align-items:center; gap:6px; justify-content:center; margin-top:14px; font-size:12px; color:var(--status-recebido, #16A34A); font-weight:500; }

/* Certificado */
.cert-wrap { max-width:720px; margin:0 auto; }
.cert { position:relative; background:var(--surface); border:2px solid var(--brand-600); border-radius:var(--radius-2xl); box-shadow:var(--shadow-card); padding:44px 40px; text-align:center; }
.cert__seal { display:inline-flex; align-items:center; justify-content:center; height:72px; width:72px; border-radius:var(--radius-full); background:var(--brand-600); color:#fff; }
.cert__kicker { margin-top:14px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.15em; color:var(--brand-600); }
.cert__title { font-size:26px; font-weight:700; color:var(--ink); margin-top:4px; }
.cert__line { color:var(--ink-soft); margin-top:16px; max-width:460px; margin-left:auto; margin-right:auto; line-height:1.5; }
.cert__name { font-size:28px; font-weight:700; color:var(--brand-700); margin:12px 0; border-bottom:2px solid var(--surface-border); display:inline-block; padding:0 24px 6px; }
.cert__meta { display:flex; justify-content:center; gap:24px; flex-wrap:wrap; margin-top:24px; font-size:12px; color:var(--ink-faint); }
.cert__brand { display:inline-flex; align-items:center; gap:6px; margin-top:24px; font-weight:700; color:var(--ink); }
.cert__brand-ic { display:inline-flex; color:var(--brand-600); }
.cert-actions { display:flex; gap:10px; justify-content:center; margin-top:20px; }

@media (max-width:860px){
  .course-body { grid-template-columns:1fr; }
  .course-top__menu { display:inline-flex; }
  .course-nav { position:fixed; top:57px; left:0; bottom:0; width:280px; z-index:30; transform:translateX(-100%); transition:transform .2s; }
  .course.mobile-nav-open .course-nav { transform:translateX(0); box-shadow:var(--shadow-lg, 0 10px 40px rgba(0,0,0,.2)); }
  .course-top__back span { display:none; }
  .course-main { padding:18px; }

  /* A barra do topo não cabia em 390px e a tela ganhava rolagem lateral: o
     min-width fixo da barra de progresso não deixava nada encolher. Agora ela
     cede espaço, e o nome da Central corta com reticências em vez de empurrar. */
  .course-top { gap:10px; padding:12px 14px; }
  .course-brand { min-width:0; }
  .course-brand > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .course-top__progress { min-width:0; max-width:7rem; }
}

@media print {
  .course-top, .course-nav, .cert-actions { display:none !important; }
  .course-body { display:block; }
  .cert { border-width:3px; }
}

/* ===== Tela de apresentação de um módulo não contratado ===================== */
.modulo { max-width:46rem; display:flex; flex-direction:column; gap:18px; }
.modulo__head { display:flex; gap:14px; align-items:flex-start; }
.modulo__eyebrow {
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 2px;
}
.modulo__title { font-size:24px; font-weight:600; color:var(--ink); margin:0; letter-spacing:-.01em; }
.modulo__chamada { font-size:14px; color:var(--ink-soft); margin:4px 0 0; }
.modulo__card { display:flex; flex-direction:column; gap:18px; }
.modulo__desc { font-size:14px; color:var(--ink-soft); margin:0; line-height:1.6; max-width:52ch; }
.modulo__list { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.modulo__item { display:flex; gap:11px; align-items:flex-start; }
.modulo__check {
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  height:20px; width:20px; border-radius:var(--radius-full);
  background:var(--brand-50); color:var(--brand-600); margin-top:1px;
}
.modulo__check--lg { height:28px; width:28px; }
.modulo__item-title { font-size:14px; font-weight:500; color:var(--ink); margin:0; }
.modulo__item-desc { font-size:12.5px; color:var(--ink-soft); margin:2px 0 0; line-height:1.5; }
.modulo__cta {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px; border-radius:var(--radius-xl); background:var(--brand-50);
}
.modulo__cta--ok { background:var(--surface-muted); }
.modulo__cta-title { font-size:14px; font-weight:600; color:var(--ink); margin:0; }
.modulo__cta-desc { font-size:12.5px; color:var(--ink-soft); margin:3px 0 0; }
.modulo__btn { flex-shrink:0; }
.modulo__foot {
  display:flex; gap:8px; align-items:flex-start;
  font-size:12.5px; color:var(--ink-faint); margin:0; line-height:1.5;
}
.modulo__foot .icon { flex-shrink:0; margin-top:1px; }

@media (max-width:640px) {
  .modulo__cta { flex-direction:column; align-items:stretch; }
  .modulo__btn, .modulo__cta form { width:100%; }
  .modulo__btn { justify-content:center; }
}

/* ===== Trocas de Plantão ==================================================== */
.troca-kpis { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.troca-section__title {
  display:flex; align-items:center; gap:7px;
  font-size:15px; font-weight:600; color:var(--ink);
}
/* Cartão que é um link inteiro (ponte entre Plantões e Trocas). */
.notice-card--link { transition:background-color .15s, border-color .15s; }
.notice-card--link:hover { border-color:var(--brand-300, var(--brand-500)); background:var(--surface-muted); }

@media (max-width:767px) {
  .troca-kpis { grid-template-columns:1fr; }
}

/* ===== Escolha de plano (fim do teste de 7 dias) =========================== */
.planos { display:flex; flex-direction:column; gap:22px; max-width:64rem; }
.planos__head { display:flex; flex-direction:column; gap:6px; }
.planos__eyebrow {
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--brand-600); margin:0;
}
.planos__title { font-size:26px; font-weight:600; color:var(--ink); margin:0; letter-spacing:-.015em; }
.planos__sub { font-size:14px; color:var(--ink-soft); margin:0; max-width:60ch; }
.planos__aviso {
  display:flex; gap:12px; align-items:center;
  background:var(--surface-muted); border-radius:var(--radius-xl); padding:14px 16px;
}
.planos__grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; align-items:stretch; }
.plano {
  position:relative; display:flex; flex-direction:column; gap:14px;
  background:var(--surface); border:1px solid var(--surface-border);
  border-radius:var(--radius-xl); padding:20px;
}
.plano--destaque { border-color:var(--brand-500); box-shadow:0 8px 24px -16px rgba(17,100,102,.5); }
.plano--escolhido { border-color:var(--status-recebido, var(--brand-500)); }
.plano__tag {
  position:absolute; top:-10px; left:20px;
  background:var(--brand-500); color:#fff; border-radius:var(--radius-full);
  font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  padding:3px 9px;
}
.plano__head { display:flex; flex-direction:column; gap:2px; }
.plano__titulo { font-size:17px; font-weight:600; color:var(--ink); margin:0; }
.plano__para { font-size:12.5px; color:var(--ink-faint); margin:0; }
.plano__itens { list-style:none; margin:0; padding:0; display:grid; gap:9px; flex:1; }
.plano__itens li { display:flex; gap:9px; align-items:flex-start; font-size:13.5px; color:var(--ink-soft); }
.plano__acao { margin-top:auto; }
.plano__btn { width:100%; justify-content:center; }
.plano__acao form { width:100%; }
.planos__nota {
  display:flex; gap:8px; align-items:flex-start;
  font-size:12.5px; color:var(--ink-faint); margin:0; line-height:1.5; max-width:70ch;
}
.planos__nota .icon { flex-shrink:0; margin-top:1px; }

/* Faixa de aviso do teste, no topo do conteúdo. */
.trial-bar {
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:var(--brand-50); border:1px solid color-mix(in srgb, var(--brand-500) 25%, white);
  border-radius:var(--radius-xl); padding:12px 16px; margin-bottom:18px;
}
.trial-bar__text { font-size:13.5px; color:var(--ink); margin:0; }
.trial-bar__text strong { font-weight:600; }
.trial-bar--last { background:var(--status-atrasado-bg); border-color:color-mix(in srgb, var(--status-atrasado) 30%, white); }

@media (max-width:900px) { .planos__grid { grid-template-columns:1fr; } }

/* ===== Marcação online: tipos de atendimento =============================== */
/* Página pública: o paciente escolhe o tipo antes do dia. */
.pubtipos { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.pubtipo {
  display:flex; flex-direction:column; gap:1px; min-width:8.5rem;
  border:1px solid var(--surface-border); border-radius:var(--radius-xl);
  padding:10px 14px; color:var(--ink-soft);
}
.pubtipo--active { border-color:var(--brand-400); background:var(--brand-50); color:var(--brand-700); }
.pubtipo__nome { font-size:13.5px; font-weight:600; }
.pubtipo__dur { font-size:11.5px; opacity:.8; }

/* Configuração do médico: uma linha por tipo. */
.tipos-lista { display:flex; flex-direction:column; gap:8px; }
.tipo-linha { display:grid; grid-template-columns:1fr 7.5rem auto; gap:8px; align-items:center; }
.tipo-linha + .tipo-linha { margin-top:8px; }
@media (max-width:560px) {
  .tipo-linha { grid-template-columns:1fr auto; }
  .tipo-linha select { grid-column:1; }
}

/* ===== Coluna de próximos compromissos (usada no Painel) ================= */

.prox {
  background:var(--surface); border:1px solid var(--surface-border);
  border-radius:var(--radius-2xl); box-shadow:var(--shadow-card);
  padding:16px; display:flex; flex-direction:column; gap:12px;
}
.prox__head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.prox__title { font-size:14px; font-weight:600; color:var(--ink); margin:0; }
.prox__all { font-size:12px; color:var(--brand-600); font-weight:500; }
.prox__vazio { font-size:12.5px; color:var(--ink-faint); margin:0; line-height:1.5; }
.prox__lista { display:flex; flex-direction:column; gap:8px; }
.prox__dia {
  font-size:11px; font-weight:600; color:var(--ink); margin:6px 0 0;
  display:flex; gap:5px; align-items:baseline;
}
.prox__dia:first-child { margin-top:0; }
.prox__data { font-weight:400; color:var(--ink-faint); }
.prox__item {
  display:flex; gap:9px; align-items:flex-start; min-width:0;
  border:1px solid color-mix(in srgb, var(--ev-cor) 22%, white);
  background:color-mix(in srgb, var(--ev-cor) 7%, white);
  border-radius:var(--radius-xl); padding:9px 11px;
  transition:background-color .15s, border-color .15s;
}
.prox__item:hover { background:color-mix(in srgb, var(--ev-cor) 14%, white); border-color:color-mix(in srgb, var(--ev-cor) 40%, white); }
.prox__icon { color:var(--ev-cor); flex-shrink:0; display:flex; margin-top:1px; }
.prox__txt { display:flex; flex-direction:column; min-width:0; line-height:1.3; }
.prox__txt > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prox__tipo { font-size:11px; font-weight:600; color:color-mix(in srgb, var(--ev-cor) 78%, black); }
.prox__nome { font-size:12.5px; font-weight:500; color:var(--ink); }
.prox__hora { font-size:11.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.prox__local { font-size:11px; color:var(--ink-faint); }

/* ===== Cartão de ação no rodapé do menu =================================== */
/* Escondido por padrão: só entra quando a janela é alta o bastante para ele
   não empurrar o menu de volta para a rolagem. */
.sidebar__promo { display:none; }
@media (min-height: 960px) {
  .sidebar__promo {
    display:flex; flex-direction:column; gap:6px;
    margin:0 12px 4px; padding:14px;
    background:var(--brand-50); border:1px solid color-mix(in srgb, var(--brand-500) 18%, white);
    border-radius:var(--radius-xl);
  }
  .sidebar__promo-ic {
    display:flex; align-items:center; justify-content:center;
    height:32px; width:32px; border-radius:var(--radius-full);
    background:var(--surface); color:var(--brand-600); margin-bottom:2px;
  }
  .sidebar__promo-title { font-size:13px; font-weight:600; color:var(--ink); margin:0; line-height:1.3; }
  .sidebar__promo-txt { font-size:11.5px; color:var(--ink-soft); margin:0; line-height:1.45; }
  .sidebar__promo-btn { width:100%; justify-content:center; margin-top:6px; background:var(--surface); }
}
.is-collapsed .sidebar__promo { display:none; }

/* ===== Painel: alertas + próximos lado a lado ============================= */
.painel-cols { display:grid; grid-template-columns:minmax(0,1fr) 19rem; gap:16px; align-items:start; }
.painel-cols__main { min-width:0; }
.painel-cols__rail { min-width:0; }
@media (max-width:1180px) { .painel-cols { grid-template-columns:minmax(0,1fr); } }

/* "Ver todos os alertas" no pé da caixa. */
.alert-box__more {
  display:flex; align-items:center; justify-content:center; gap:7px;
  margin-top:10px; padding:9px; border-radius:var(--radius-xl);
  background:var(--surface); border:1px solid var(--surface-border);
  font-size:12.5px; font-weight:500; color:var(--ink-soft);
  transition:border-color .15s, color .15s;
}
.alert-box__more:hover { border-color:var(--brand-400); color:var(--brand-700); }

/* Variação contra o mês anterior, no cartão de previsão. */
.kpi-var { display:flex; align-items:center; gap:4px; font-size:12px; font-weight:500; }
.kpi-var--up { color:var(--status-recebido); }
.kpi-var--down { color:var(--status-atrasado); }
.kpi-var--down .icon { transform:scaleY(-1); }

/* ===== Marcação Online: cabeçalhos com ícone e bloco de sincronização ===== */
.sec-ic {
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  height:34px; width:34px; border-radius:var(--radius-xl);
  background:var(--brand-50); color:var(--brand-600);
}
.sec-ic--lg { height:38px; width:38px; }
.form-hint { font-size:11px; color:var(--ink-faint); margin:6px 0 0; line-height:1.5; }

.sync-card { display:flex; flex-direction:column; gap:16px; }
.sync-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.sync-item { display:flex; flex-direction:column; gap:4px; }
.sync-item__ic {
  display:flex; align-items:center; justify-content:center;
  height:32px; width:32px; border-radius:var(--radius-full);
  background:var(--brand-50); color:var(--brand-600); margin-bottom:2px;
}
.sync-item__title { font-size:13px; font-weight:600; color:var(--ink); margin:0; }
.sync-item__txt { font-size:11.5px; color:var(--ink-soft); margin:0; line-height:1.5; }
@media (max-width:520px) { .sync-grid { grid-template-columns:1fr; } }

/* ===== Dashboard: evolução da receita ===================================== */
.receita-card { display:flex; flex-direction:column; gap:14px; }
.receita-card__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.receita-card__label { font-size:12px; font-weight:500; color:var(--ink-faint); margin:0; }
.receita-card__value { font-size:28px; font-weight:600; color:var(--ink); margin:2px 0 0; letter-spacing:-.02em; }
.receita-card__sub { font-size:12.5px; color:var(--ink-soft); margin:4px 0 0; }
.receita-card__meta { text-align:right; }
.receita-card__meta-label { font-size:11.5px; color:var(--ink-faint); margin:0; }
.receita-card__meta-value { font-size:16px; font-weight:600; color:var(--ink-soft); margin:2px 0 0; }

.receita-chart { display:flex; flex-direction:column; gap:6px; }
.receita-chart svg { width:100%; height:80px; display:block; overflow:visible; }
.receita-chart__area { fill:color-mix(in srgb, var(--brand-500) 12%, transparent); stroke:none; }
.receita-chart__line { fill:none; stroke:var(--brand-500); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.receita-chart__dot { fill:var(--brand-600); stroke:var(--surface); stroke-width:2; }
.receita-chart__eixo { display:flex; justify-content:space-between; font-size:10.5px; color:var(--ink-faint); text-transform:capitalize; }
.receita-chart__mes--atual { color:var(--brand-700); font-weight:600; }

/* Cabeçalho de seção compacto (título com o mesmo distintivo de ícone). */
.sec-ic--sm { height:26px; width:26px; border-radius:var(--radius); }
.troca-section__title { gap:9px; }

/* ===== Comparecimento: registro no evento e histórico na ficha ============ */
.ev-presenca {
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  border:1px solid var(--surface-border); border-radius:var(--radius-xl);
  padding:12px 14px; margin-bottom:12px; background:var(--surface-muted);
}
.ev-presenca--faltou { background:var(--status-atrasado-bg); border-color:color-mix(in srgb, var(--status-atrasado) 25%, white); }
.ev-presenca__txt { display:flex; align-items:center; gap:8px; margin:0; font-size:13px; font-weight:500; color:var(--ink); }
.ev-presenca__ic { display:flex; color:var(--ink-soft); }
.ev-presenca--faltou .ev-presenca__ic { color:var(--status-atrasado); }

.presenca-box {
  display:flex; align-items:flex-start; gap:10px;
  border:1px solid var(--surface-border); border-radius:var(--radius-xl);
  padding:11px 13px; margin-bottom:16px; background:var(--surface-muted);
}
.presenca-box--alerta { background:var(--status-atrasado-bg); border-color:color-mix(in srgb, var(--status-atrasado) 25%, white); }
.presenca-box__ic { display:flex; flex-shrink:0; margin-top:1px; color:var(--ink-soft); }
.presenca-box--alerta .presenca-box__ic { color:var(--status-atrasado); }
.presenca-box__title { font-size:13px; font-weight:600; color:var(--ink); margin:0; }
.presenca-box__sub { font-size:11.5px; color:var(--ink-soft); margin:2px 0 0; line-height:1.45; }

/* ===== Horários liberados por cancelamento =============================== */
.cancelado-item {
  border:1px solid var(--surface-border); border-radius:var(--radius-xl);
  padding:9px 11px; background:var(--surface-muted);
}
.cancelado-item__nome { font-size:12.5px; font-weight:600; color:var(--ink); margin:0; }
.cancelado-item__meta { font-size:11.5px; color:var(--ink-soft); margin:2px 0 0; font-variant-numeric:tabular-nums; }
.cancelado-item__quem { font-size:11px; color:var(--ink-faint); margin:2px 0 0; }

/* ===== Lista de espera ==================================================== */
/* Chamada na página pública, para quem não achou horário. */
.espera-cta {
  margin-top:20px; padding-top:18px; border-top:1px solid var(--surface-border);
}
.espera-cta__head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.espera-cta__title { font-size:13.5px; font-weight:600; color:var(--ink); margin:0; }
.espera-cta__txt { font-size:12px; color:var(--ink-soft); margin:2px 0 0; max-width:34ch; line-height:1.45; }

/* Fila na tela do médico. */
.espera-card { display:flex; flex-direction:column; }
.espera-item {
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap;
  border:1px solid var(--surface-border); border-radius:var(--radius-xl);
  padding:10px 12px; background:var(--surface);
}
.espera-item--fora { opacity:.65; }
.espera-item__nome { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--ink); margin:0; flex-wrap:wrap; }
.espera-item__pos {
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  height:20px; width:20px; border-radius:var(--radius-full);
  background:var(--brand-50); color:var(--brand-700);
  font-size:11px; font-weight:600; font-variant-numeric:tabular-nums;
}
.espera-item__meta { font-size:11.5px; color:var(--ink-soft); margin:3px 0 0; }
.espera-item__aviso { font-size:11px; color:var(--status-atrasado); margin:3px 0 0; }
@media (max-width:560px) { .espera-item { flex-direction:column; align-items:stretch; } }

/* Faixas de leitura do gráfico: cada mês mostra seu valor ao passar o mouse. */
.receita-chart__plot { position:relative; }
.receita-chart__zonas { position:absolute; inset:0; display:flex; }
.receita-chart__zona { flex:1; position:relative; cursor:default; }
/* Guia vertical no mês apontado. */
.receita-chart__zona::after {
  content:""; position:absolute; left:50%; top:0; bottom:0; width:1px;
  background:color-mix(in srgb, var(--brand-500) 45%, transparent);
  opacity:0; transition:opacity .12s;
}
.receita-chart__zona:hover::after,
.receita-chart__zona:focus-visible::after { opacity:1; }
.receita-chart__zona:focus-visible { outline:none; }

.receita-chart__tip {
  position:absolute; left:50%; top:2px; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:1px; white-space:nowrap; z-index:2;
  background:var(--ink); color:#fff; border-radius:var(--radius);
  padding:7px 10px; box-shadow:var(--shadow-card);
  opacity:0; visibility:hidden; transition:opacity .12s;
  pointer-events:none;
}
.receita-chart__zona:hover .receita-chart__tip,
.receita-chart__zona:focus-visible .receita-chart__tip { opacity:1; visibility:visible; }
/* Nas pontas o balão encosta na borda em vez de sair do cartão. */
.receita-chart__zona--ini .receita-chart__tip { left:0; transform:none; }
.receita-chart__zona--fim .receita-chart__tip { left:auto; right:0; transform:none; }
.receita-chart__tip-mes  { font-size:10px; opacity:.75; }
.receita-chart__tip-val  { font-size:14px; font-weight:600; }
.receita-chart__tip-meta { font-size:10.5px; opacity:.8; }


/* Última faixa: tela bem baixa (notebook com escala alta do Windows). Ainda
   assim os títulos dos grupos continuam, porque são eles que dão sentido ao
   menu; o que cede é o respiro entre os itens. */
@media (max-height: 520px) {
  .sidebar__nav { gap:5px; padding-top:6px; padding-bottom:6px; }
  .sidebar__group { gap:0; }
  .sidebar__group-title { font-size:8.5px; }
  .nav-link { padding-top:3px; padding-bottom:3px; font-size:13px; }
  .sidebar__brand { height:44px; }
  .sidebar__footer { padding-top:6px; padding-bottom:6px; }
}

/* ===== Configurações: visão geral ======================================== */
.cfg-selo {
  display:inline-flex; align-items:center; gap:5px; vertical-align:middle;
  margin-left:10px; padding:4px 10px; border-radius:999px;
  font-size:12px; font-weight:600; letter-spacing:0;
}
.cfg-selo--ok { background:var(--status-recebido-bg); color:var(--status-recebido); }
.cfg-selo--falta { background:var(--status-atrasado-bg); color:var(--status-atrasado); }

.cfg-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
@media (max-width:1100px) { .cfg-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:680px)  { .cfg-grid { grid-template-columns:1fr; } }

.cfg-item {
  display:flex; flex-direction:column; gap:3px;
  background:var(--surface); border:1px solid var(--surface-border);
  border-radius:var(--radius-xl); padding:16px;
  transition:border-color .15s, box-shadow .15s;
}
.cfg-item:hover { border-color:var(--brand-400); box-shadow:var(--shadow-card); }
.cfg-item--falta { border-color:color-mix(in srgb, var(--status-atrasado) 35%, white); }
.cfg-item__topo { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.cfg-item__ic {
  display:flex; align-items:center; justify-content:center;
  height:30px; width:30px; border-radius:var(--radius);
  background:var(--surface-muted); color:var(--ink-soft);
}
.cfg-item--falta .cfg-item__ic { background:var(--status-atrasado-bg); color:var(--status-atrasado); }
.cfg-item--ok .cfg-item__ic { background:var(--brand-50); color:var(--brand-600); }
.cfg-item__estado {
  font-size:10.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px; white-space:nowrap;
  background:var(--surface-muted); color:var(--ink-faint);
}
.cfg-item--falta .cfg-item__estado { background:var(--status-atrasado-bg); color:var(--status-atrasado); }
.cfg-item--ok .cfg-item__estado { background:var(--status-recebido-bg); color:var(--status-recebido); }
.cfg-item__titulo { font-size:14px; font-weight:600; color:var(--ink); margin:0; }
.cfg-item__detalhe { font-size:12.5px; font-weight:500; color:var(--ink-soft); margin:0; }
.cfg-item__desc { font-size:11.5px; color:var(--ink-faint); margin:4px 0 0; line-height:1.5; }

/* ===== Administração da plataforma ======================================= */
.admin-barra {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin:16px 0 12px;
}
.admin-busca { display:flex; align-items:center; gap:8px; flex:1; min-width:16rem; max-width:26rem; margin:0; color:var(--ink-faint); }
.admin-busca .input { flex:1; }

.scroll-x { overflow-x:auto; }
.admin-tabela { width:100%; border-collapse:collapse; font-size:13px; min-width:52rem; }
.admin-tabela thead th {
  text-align:left; padding:11px 14px; white-space:nowrap;
  font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-faint); border-bottom:1px solid var(--surface-border);
}
.admin-tabela tbody td { padding:12px 14px; border-bottom:1px solid var(--surface-border); color:var(--ink-soft); vertical-align:middle; }
.admin-tabela tbody tr:last-child td { border-bottom:none; }
.admin-tabela tbody tr:hover { background:var(--surface-muted); }
.admin-tabela .num { text-align:right; }

.admin-conta { display:flex; align-items:center; gap:10px; min-width:0; }
.admin-conta__nome { font-size:13.5px; font-weight:600; color:var(--ink); margin:0; }
.admin-conta__email { font-size:11.5px; color:var(--ink-faint); margin:1px 0 0; }
.tag-neutro {
  display:inline-block; padding:3px 9px; border-radius:999px; white-space:nowrap;
  background:var(--surface-muted); color:var(--ink-soft); font-size:11.5px; font-weight:500;
}
.admin-rodape { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:14px; }

/* ===========================================================================
   Painel da Administração
   Sala de controle: mais denso que as telas do médico, com o gráfico de
   crescimento como peça central e as leituras no fim, em ordem de urgência.
   =========================================================================== */

/* --- Faixa da base + gráfico de crescimento -------------------------------- */
.pnl-hero { display:grid; grid-template-columns:minmax(240px, 320px) 1fr; gap:28px; align-items:stretch; }
@media (max-width:900px){ .pnl-hero { grid-template-columns:1fr; gap:20px; } }

.pnl-hero__label { font-size:12px; font-weight:500; color:var(--ink-faint); }
.pnl-hero__value { font-size:clamp(38px, 6vw, 52px); font-weight:600; letter-spacing:-.03em; color:var(--ink); line-height:1; margin-top:4px; }
.pnl-hero__sub { margin-top:8px; font-size:12.5px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pnl-hero__sub .kpi-var { display:inline-flex; }

.pnl-hero__lista { margin-top:20px; border-top:1px solid var(--surface-border); }
.pnl-hero__lista > div { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--surface-border); }
.pnl-hero__lista dt { font-size:12.5px; color:var(--ink-soft); }
.pnl-hero__lista dd { font-size:14px; font-weight:600; color:var(--ink); }
.pnl-hero__risco { color:var(--status-atrasado); }

.pnl-hero__chart { display:flex; flex-direction:column; justify-content:center; min-width:0; }

.gro__plot { position:relative; height:clamp(150px, 24vh, 210px); }
.gro__svg { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; overflow:visible; }
.gro__line { fill:none; stroke:var(--brand-600); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }

.gro__cols { position:absolute; inset:0; display:flex; align-items:flex-end; gap:2px; }
.gro__col { flex:1; height:100%; display:flex; align-items:flex-end; justify-content:center; position:relative; border-radius:var(--radius) var(--radius) 0 0; transition:background .12s; }
.gro__col:hover, .gro__col:focus-visible { background:var(--brand-50); outline:none; }
.gro__bar { width:min(58%, 30px); min-height:3px; border-radius:5px 5px 0 0;
  background:linear-gradient(180deg, var(--brand-300), var(--brand-200)); transition:background .12s; }
.gro__col:hover .gro__bar, .gro__col:focus-visible .gro__bar { background:linear-gradient(180deg, var(--brand-500), var(--brand-400)); }
.gro__col--atual .gro__bar { background:linear-gradient(180deg, var(--brand-500), var(--brand-400)); }

.gro__tip {
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(4px);
  z-index:3; display:flex; flex-direction:column; gap:3px; padding:9px 11px; min-width:11rem;
  background:var(--brand-800); color:#fff; border-radius:var(--radius-xl); box-shadow:var(--shadow-pop);
  opacity:0; pointer-events:none; transition:opacity .12s, transform .12s;
}
.gro__col:hover .gro__tip, .gro__col:focus-visible .gro__tip,
.tro__col:hover .gro__tip, .tro__col:focus-visible .gro__tip { opacity:1; transform:translateX(-50%) translateY(0); }
.gro__tip-mes { font-size:11px; font-weight:600; color:var(--brand-200); text-transform:uppercase; letter-spacing:.04em; }
.gro__tip-linha { font-size:12.5px; display:flex; align-items:center; gap:7px; white-space:nowrap; }
.gro__tip-var { font-size:11.5px; color:var(--brand-200); margin-top:2px; }

/* As pontas do gráfico não podem jogar a caixinha para fora da tela. */
.gro__col:first-child .gro__tip, .tro__col:first-child .gro__tip { left:0; transform:translateX(0) translateY(4px); }
.gro__col:first-child:hover .gro__tip, .gro__col:first-child:focus-visible .gro__tip,
.tro__col:first-child:hover .gro__tip, .tro__col:first-child:focus-visible .gro__tip { transform:translateX(0); }
.gro__col:last-child .gro__tip, .tro__col:last-child .gro__tip { left:auto; right:0; transform:translateX(0) translateY(4px); }
.gro__col:last-child:hover .gro__tip, .gro__col:last-child:focus-visible .gro__tip,
.tro__col:last-child:hover .gro__tip, .tro__col:last-child:focus-visible .gro__tip { transform:translateX(0); }

.gro__dot { width:9px; height:9px; border-radius:3px; flex-shrink:0; display:inline-block; }
.gro__dot--bar  { background:var(--brand-300); }
.gro__dot--line { background:var(--brand-600); height:3px; border-radius:2px; }
.gro__dot--ped  { background:#8FB6DC; }
.gro__dot--prop { background:#B79BF0; }

.gro__eixo { display:flex; gap:2px; margin-top:8px; }
.gro__eixo > span { flex:1; text-align:center; font-size:11px; color:var(--ink-faint); }
.gro__mes--atual { color:var(--brand-600); font-weight:600; }

.gro__legenda { display:flex; gap:18px; flex-wrap:wrap; margin-top:14px; padding-top:12px; border-top:1px solid var(--surface-border); }
.gro__legenda > span { display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--ink-soft); }

.pnl-nota { margin-top:12px; font-size:11.5px; line-height:1.5; color:var(--ink-faint); max-width:46rem; }

/* --- Blocos em dupla ------------------------------------------------------- */
.pnl-duo { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
.pnl-duo--troca { grid-template-columns:1.35fr 1fr; }
@media (max-width:900px){ .pnl-duo, .pnl-duo--troca { grid-template-columns:1fr; } }

.pnl-head { margin-bottom:16px; }
.pnl-title { font-size:15px; font-weight:600; color:var(--ink); }
.pnl-sub { margin-top:3px; font-size:12px; line-height:1.5; color:var(--ink-faint); }

/* --- Funil ----------------------------------------------------------------- */
.funil { display:flex; flex-direction:column; gap:16px; }
.funil__topo { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.funil__label { font-size:13px; font-weight:500; color:var(--ink); }
.funil__num { font-size:15px; font-weight:600; color:var(--ink); }
.funil__pct { font-size:11.5px; font-weight:500; color:var(--ink-faint); margin-left:4px; }
.funil__trilho { margin-top:6px; height:9px; border-radius:var(--radius-full); background:var(--surface-muted); overflow:hidden; }
.funil__barra { display:block; height:100%; border-radius:var(--radius-full);
  background:linear-gradient(90deg, var(--brand-600), var(--brand-400)); }
.funil__nota { margin-top:5px; font-size:11.5px; color:var(--ink-faint); }
.funil__queda { margin-top:5px; font-size:11.5px; color:var(--status-atrasado); display:flex; align-items:center; gap:5px; }

/* --- Distribuição por plano ------------------------------------------------ */
.pl-barra { display:flex; height:12px; border-radius:var(--radius-full); overflow:hidden; background:var(--surface-muted); }
.pl-fatia { display:block; height:100%; }
.pl-fatia--teste       { background:#E0A422; }
.pl-fatia--plantonista { background:var(--brand-300); }
.pl-fatia--financeiro  { background:var(--brand-500); }
.pl-fatia--completo    { background:var(--brand-700); }

.pl-lista { margin-top:14px; display:flex; flex-direction:column; gap:9px; }
.pl-lista li { display:flex; align-items:center; gap:9px; font-size:12.5px; }
.pl-ponto { width:9px; height:9px; border-radius:3px; flex-shrink:0; }
.pl-ponto--teste       { background:#E0A422; }
.pl-ponto--plantonista { background:var(--brand-300); }
.pl-ponto--financeiro  { background:var(--brand-500); }
.pl-ponto--completo    { background:var(--brand-700); }
.pl-nome { color:var(--ink-soft); }
.pl-num  { margin-left:auto; font-weight:600; color:var(--ink); }
.pl-pct  { width:2.6rem; text-align:right; color:var(--ink-faint); font-size:11.5px; }

.pnl-mini { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:20px; padding-top:16px; border-top:1px solid var(--surface-border); }
.pnl-mini__label { font-size:11px; font-weight:500; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; }
.pnl-mini__value { margin-top:3px; font-size:16px; font-weight:600; color:var(--ink); }

/* --- Cabeçalho de seção ---------------------------------------------------- */
.pnl-sec { display:flex; align-items:flex-start; gap:12px; margin:32px 0 16px; }
.pnl-sec__ic { display:flex; align-items:center; justify-content:center; width:34px; height:34px; flex-shrink:0;
  border-radius:var(--radius-xl); background:var(--brand-50); color:var(--brand-700); }
.pnl-sec__ic--ouro { background:#FDF3DC; color:#9A6B12; }
.pnl-sec__title { font-size:17px; font-weight:600; color:var(--ink); }
.pnl-sec__sub { margin-top:2px; font-size:12.5px; line-height:1.5; color:var(--ink-faint); max-width:62rem; }

/* --- Gráfico das trocas ---------------------------------------------------- */
.tro__cols { position:relative; display:flex; align-items:flex-end; gap:3px; height:clamp(130px, 20vh, 180px); }
.tro__col { flex:1; height:100%; display:flex; align-items:flex-end; justify-content:center; position:relative; border-radius:var(--radius) var(--radius) 0 0; transition:background .12s; }
.tro__col:hover, .tro__col:focus-visible { background:var(--surface-muted); outline:none; }
.tro__par { display:flex; align-items:flex-end; justify-content:center; gap:3px; width:100%; height:100%; }
.tro__bar { width:min(38%, 16px); min-height:2px; border-radius:4px 4px 0 0; position:relative; overflow:hidden; }
.tro__bar--ped  { background:#C7DCF0; }
.tro__bar--prop { background:#D9CBF7; }
.tro__bar-ok { position:absolute; left:0; right:0; bottom:0; background:var(--status-receber); }

/* --- O que a troca resolveu ------------------------------------------------ */
.tro-res { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:520px){ .tro-res { grid-template-columns:1fr; } }
.tro-res__box { padding:14px; border-radius:var(--radius-xl); background:var(--brand-50); }
.tro-res__val { font-size:20px; font-weight:600; color:var(--brand-700); letter-spacing:-.01em; }
.tro-res__lab { margin-top:4px; font-size:11.5px; line-height:1.45; color:var(--ink-soft); }

.canal-lista { margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.canal-lista li { display:flex; align-items:center; gap:10px; font-size:12.5px; }
.canal-nome { width:5.5rem; color:var(--ink-soft); flex-shrink:0; }
.canal-trilho { flex:1; height:7px; border-radius:var(--radius-full); background:var(--surface-muted); overflow:hidden; }
.canal-barra { display:block; height:100%; border-radius:var(--radius-full); background:var(--brand-400); }
.canal-num { width:2rem; text-align:right; font-weight:600; color:var(--ink); }

/* --- Adoção dos recursos --------------------------------------------------- */
.pnl-adocao { margin-top:16px; }
.ado { display:flex; flex-direction:column; gap:11px; }
.ado__item { display:flex; align-items:center; gap:11px; }
.ado__ic { display:flex; align-items:center; justify-content:center; width:26px; height:26px; flex-shrink:0;
  border-radius:var(--radius); background:var(--surface-muted); color:var(--ink-soft); }
.ado__nome { width:11rem; flex-shrink:0; font-size:12.5px; color:var(--ink); }
.ado__trilho { flex:1; min-width:3rem; height:8px; border-radius:var(--radius-full); background:var(--surface-muted); overflow:hidden; }
.ado__barra { display:block; height:100%; border-radius:var(--radius-full);
  background:linear-gradient(90deg, var(--brand-500), var(--brand-300)); }
.ado__pct { width:3rem; text-align:right; font-size:12.5px; font-weight:600; color:var(--ink); }
.ado__abs { width:2.5rem; text-align:right; font-size:11.5px; color:var(--ink-faint); }
@media (max-width:640px){ .ado__nome { width:8rem; font-size:12px; } .ado__abs { display:none; } }

/* --- Leituras dos números -------------------------------------------------- */
.ins-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:16px; }
.ins { display:flex; flex-direction:column; --ins:var(--ink-soft); --ins-bg:var(--surface-muted); }
.ins--bom     { --ins:var(--status-recebido); --ins-bg:var(--status-recebido-bg); }
.ins--atencao { --ins:#B45309;                --ins-bg:#FEF3C7; }
.ins--critico { --ins:var(--status-atrasado); --ins-bg:var(--status-atrasado-bg); }
.ins--neutro  { --ins:var(--brand-600);       --ins-bg:var(--brand-50); }

.ins__head { display:flex; align-items:center; gap:9px; }
.ins__n { font-size:11px; font-weight:600; color:var(--ink-faint); letter-spacing:.06em; }
.ins__ic { display:flex; align-items:center; justify-content:center; width:26px; height:26px; flex-shrink:0;
  border-radius:var(--radius); background:var(--ins-bg); color:var(--ins); }
.ins__titulo { font-size:13px; font-weight:600; color:var(--ink); }
.ins__metrica { margin-top:12px; font-size:27px; font-weight:600; line-height:1.05; letter-spacing:-.02em; color:var(--ins); }
.ins__texto { margin-top:8px; font-size:12.5px; line-height:1.6; color:var(--ink-soft); }
.ins__acao { margin-top:auto; padding:11px 12px; border-radius:var(--radius-xl); background:var(--ins-bg);
  font-size:12px; line-height:1.55; color:var(--ink); }
.ins__texto + .ins__acao { margin-top:14px; }
.ins__acao-lab { display:block; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.07em;
  color:var(--ins); margin-bottom:4px; }

.pnl-rodape { margin-top:24px; font-size:11.5px; line-height:1.5; max-width:56rem; }

/* Celular: a caixinha de leitura não cabe centrada em cima de uma coluna de
   30px, e estourava a largura da página. Aqui ela deixa de se ancorar na
   coluna e passa a ocupar a largura do gráfico. */
@media (max-width:720px){
  .gro__col, .tro__col { position:static; }
  .gro__tip,
  .gro__col:first-child .gro__tip, .gro__col:last-child .gro__tip,
  .tro__col:first-child .gro__tip, .tro__col:last-child .gro__tip {
    left:0; right:0; min-width:0; transform:translateY(4px);
  }
  .gro__col:hover .gro__tip, .gro__col:focus-visible .gro__tip,
  .tro__col:hover .gro__tip, .tro__col:focus-visible .gro__tip { transform:translateY(0); }
  .gro__tip-linha { white-space:normal; }
}

/* ===========================================================================
   Vitrine: página de vendas, layout público e telas de plano.
   Mesma marca do sistema (petróleo), porém com respiro maior e uma faixa
   escura na parte de troca de plantão, que é onde a conversa muda de tom.
   =========================================================================== */

.btn--lg { height:48px; padding:0 26px; font-size:15px; gap:8px; }

.vit-body { background:var(--surface); color:var(--ink); }

/* --- Topo -------------------------------------------------------------------*/
.vit-top {
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:28px;
  padding:14px clamp(16px, 5vw, 56px);
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter:blur(10px); /* Safari e iPhone ainda pedem o prefixo */
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--surface-border);
}
.vit-top__brand { display:flex; align-items:center; }
.vit-top__nav { display:flex; gap:22px; margin-right:auto; }
.vit-top__nav a { font-size:13.5px; color:var(--ink-soft); text-decoration:none; }
.vit-top__nav a:hover { color:var(--brand-600); }
.vit-top__acoes { display:flex; align-items:center; gap:10px; }
@media (max-width:820px){ .vit-top__nav { display:none; } .vit-top { gap:12px; } .vit-top__brand { margin-right:auto; } }
@media (max-width:520px){ .vit-top__acoes .btn--ghost { display:none; } }

/* --- Herói -------------------------------------------------------------------*/
.vit-hero {
  display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(28px, 5vw, 64px); align-items:center;
  padding:clamp(40px, 7vw, 88px) clamp(16px, 5vw, 56px) clamp(32px, 5vw, 64px);
  max-width:1240px; margin:0 auto;
}
@media (max-width:940px){ .vit-hero { grid-template-columns:1fr; } }

.vit-selo {
  display:inline-flex; align-items:center; gap:7px; margin-bottom:20px;
  padding:6px 14px; border-radius:var(--radius-full);
  background:var(--brand-50); color:var(--brand-700);
  font-size:12.5px; font-weight:500;
}
.vit-selo--convite { background:#FDF3DC; color:#8A5D0B; }

.vit-hero__titulo {
  max-width:14ch; font-size:clamp(34px, 5.2vw, 58px); font-weight:600; line-height:1.05;
  letter-spacing:-.032em; color:var(--ink);
}
@media (max-width:940px){ .vit-hero__titulo { max-width:22ch; } }
.vit-rodape__logo { filter:brightness(0) invert(1); opacity:.92; }
.vit-hero__titulo em { font-style:normal; color:var(--brand-500); }
.vit-hero__sub { margin-top:20px; max-width:38rem; font-size:clamp(15px, 1.5vw, 17px); line-height:1.62; color:var(--ink-soft); }
.vit-hero__cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.vit-hero__bullets { display:flex; flex-wrap:wrap; gap:18px; margin-top:24px; }
.vit-hero__bullets li { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-faint); }
.vit-hero__bullets .icon { color:var(--status-recebido); }

/* Retrato do produto */
.vit-hero__arte { display:flex; justify-content:center; }
.vit-mock {
  width:100%; max-width:430px; border-radius:var(--radius-2xl); overflow:hidden;
  background:var(--surface); border:1px solid var(--surface-border);
  box-shadow:0 24px 60px rgba(9,42,52,.16), 0 4px 12px rgba(9,42,52,.06);
}
.vit-mock__head { display:flex; align-items:center; gap:6px; padding:11px 14px; background:var(--surface-muted); border-bottom:1px solid var(--surface-border); }
.vit-mock__dot { width:9px; height:9px; border-radius:50%; background:var(--surface-border); }
.vit-mock__url { margin-left:10px; font-size:11px; color:var(--ink-faint); }
.vit-mock__body { padding:20px; }
.vit-mock__label { font-size:11.5px; color:var(--ink-faint); }
.vit-mock__valor { font-size:32px; font-weight:600; letter-spacing:-.025em; color:var(--ink); margin-top:2px; }
.vit-mock__linhas { margin-top:18px; display:flex; flex-direction:column; gap:9px; }
.vit-mock__linha { display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:var(--radius); background:var(--surface-muted); }
.vit-mock__tag { font-size:10px; font-weight:600; padding:3px 7px; border-radius:var(--radius-full); white-space:nowrap; }
.vit-mock__tag--ok      { background:var(--status-recebido-bg); color:var(--status-recebido); }
.vit-mock__tag--atraso  { background:var(--status-atrasado-bg); color:var(--status-atrasado); }
.vit-mock__tag--glosa   { background:var(--status-glosado-bg);  color:var(--status-glosado); }
.vit-mock__tag--plantao { background:var(--brand-50);           color:var(--brand-700); }
.vit-mock__nome { flex:1; min-width:0; font-size:12px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vit-mock__val { font-size:12.5px; font-weight:600; color:var(--ink); }
.vit-mock__rodape { margin-top:16px; padding-top:13px; border-top:1px solid var(--surface-border); }
.vit-mock__rodape span { display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--status-glosado); }

/* --- Três dores ---------------------------------------------------------------*/
.vit-dores {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
  max-width:1240px; margin:0 auto; padding:0 clamp(16px, 5vw, 56px) clamp(40px, 6vw, 72px);
}
@media (max-width:820px){ .vit-dores { grid-template-columns:1fr; } }
.vit-dores article { padding:22px; border-radius:var(--radius-2xl); background:var(--surface-muted); }
.vit-dores__ic { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:var(--radius-xl); background:var(--surface); color:var(--brand-600); }
.vit-dores h3 { margin-top:14px; font-size:15px; font-weight:600; color:var(--ink); }
.vit-dores p { margin-top:7px; font-size:13px; line-height:1.6; color:var(--ink-soft); }

/* --- Seções ------------------------------------------------------------------*/
.vit-sec { max-width:1240px; margin:0 auto; padding:clamp(48px, 7vw, 88px) clamp(16px, 5vw, 56px); }
.vit-sec__head { max-width:44rem; margin-bottom:clamp(28px, 4vw, 44px); }
.vit-sec__eyebrow { font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-400); }
.vit-sec__eyebrow--claro { color:var(--brand-200); }
.vit-sec__titulo { margin-top:10px; font-size:clamp(24px, 3.2vw, 36px); font-weight:600; letter-spacing:-.028em; line-height:1.16; color:var(--ink); text-wrap:balance; }
.vit-sec__titulo--claro { color:#fff; }
.vit-sec__sub { margin-top:12px; font-size:15px; line-height:1.62; color:var(--ink-soft); }

/* --- Recursos -----------------------------------------------------------------*/
.vit-recursos { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; align-items:start; }
@media (max-width:940px){ .vit-recursos { grid-template-columns:1fr; } }
.vit-rec { padding:26px; border-radius:var(--radius-2xl); border:1px solid var(--surface-border); background:var(--surface); }
.vit-rec--destaque { border-color:var(--brand-300); background:linear-gradient(180deg, var(--brand-50), var(--surface) 55%); }
.vit-rec__ic { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--radius-xl); background:var(--brand-600); color:#fff; }
.vit-rec h3 { margin-top:16px; font-size:17px; font-weight:600; color:var(--ink); }
.vit-rec > p { margin-top:9px; font-size:13.5px; line-height:1.62; color:var(--ink-soft); }
.vit-rec ul { margin-top:16px; padding-top:16px; border-top:1px solid var(--surface-border); display:flex; flex-direction:column; gap:9px; }
.vit-rec li { position:relative; padding-left:18px; font-size:12.5px; line-height:1.5; color:var(--ink-soft); }
.vit-rec li::before { content:""; position:absolute; left:0; top:7px; width:7px; height:7px; border-radius:2px; background:var(--brand-300); }

/* --- Faixa escura da troca ------------------------------------------------------*/
.vit-troca {
  background:linear-gradient(160deg, var(--brand-800), var(--brand-700));
  color:#fff;
}
.vit-troca { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px, 5vw, 64px); align-items:center;
  padding:clamp(48px, 7vw, 88px) clamp(16px, 5vw, 56px); }
@media (max-width:940px){ .vit-troca { grid-template-columns:1fr; } }
.vit-troca > * { max-width:1240px; }
.vit-troca__txt { justify-self:end; width:100%; max-width:640px; }
.vit-troca__sub { margin-top:14px; font-size:15px; line-height:1.65; color:var(--brand-100); }
.vit-passos { margin-top:26px; display:flex; flex-direction:column; gap:12px; }
.vit-passos li { display:flex; align-items:flex-start; gap:12px; font-size:13.5px; color:#fff; }
.vit-passos span {
  flex-shrink:0; width:24px; height:24px; border-radius:50%;
  background:rgba(255,255,255,.12); color:var(--brand-100);
  display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:600;
}
.vit-troca__nota { margin-top:24px; display:flex; align-items:flex-start; gap:8px; padding:13px 15px;
  border-radius:var(--radius-xl); background:rgba(255,255,255,.08); font-size:12.5px; line-height:1.55; color:var(--brand-100); }
.vit-troca__nota strong { color:#fff; }

.vit-troca__zap { justify-self:start; width:100%; max-width:400px; }
.vit-zap { display:flex; flex-direction:column; gap:10px; padding:20px; border-radius:var(--radius-2xl); background:rgba(0,0,0,.16); }
.vit-zap__bolha { position:relative; align-self:flex-start; max-width:88%; padding:12px 14px 20px; border-radius:14px 14px 14px 4px; background:#fff; color:var(--ink); box-shadow:0 4px 14px rgba(0,0,0,.14); }
.vit-zap__bolha--resp { align-self:flex-end; border-radius:14px 14px 4px 14px; background:#DCF8C6; }
.vit-zap__titulo { font-size:13.5px; font-weight:600; margin-bottom:5px; }
.vit-zap__linha { font-size:13px; line-height:1.5; color:var(--ink-soft); }
.vit-zap__link { margin-top:7px; font-size:12.5px; color:var(--status-receber); word-break:break-all; }
.vit-zap__hora { position:absolute; right:11px; bottom:6px; font-size:10px; color:var(--ink-faint); }

/* --- Preços --------------------------------------------------------------------*/
.vit-precos { background:var(--surface-muted); max-width:none; }
.vit-precos > * { max-width:1240px; margin-left:auto; margin-right:auto; }
.vit-ciclo { display:inline-flex; gap:4px; padding:4px; border-radius:var(--radius-full); background:var(--surface); border:1px solid var(--surface-border); margin-bottom:28px; }
.vit-ciclo__op { display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:var(--radius-full); font-size:13px; font-weight:500; color:var(--ink-soft); text-decoration:none; }
.vit-ciclo__op--on { background:var(--brand-600); color:#fff; }
.vit-ciclo__off { padding:2px 8px; border-radius:var(--radius-full); background:var(--status-recebido-bg); color:var(--status-recebido); font-size:11px; font-weight:600; }
.vit-ciclo__op--on .vit-ciclo__off { background:rgba(255,255,255,.16); color:#fff; }

.vit-planos { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; align-items:start; }
@media (max-width:940px){ .vit-planos { grid-template-columns:1fr; } }
.vit-plano { position:relative; padding:28px 24px; border-radius:var(--radius-2xl); background:var(--surface); border:1px solid var(--surface-border); }
.vit-plano--destaque { border-color:var(--brand-500); box-shadow:0 18px 44px rgba(15,76,92,.14); }
.vit-plano__fita { position:absolute; top:-11px; left:24px; padding:4px 12px; border-radius:var(--radius-full); background:var(--brand-600); color:#fff; font-size:11px; font-weight:600; }
.vit-plano__nome { font-size:18px; font-weight:600; color:var(--ink); }
.vit-plano__para { margin-top:3px; font-size:12.5px; color:var(--ink-faint); }
.vit-plano__preco { margin-top:20px; display:flex; align-items:baseline; gap:3px; color:var(--ink); }
.vit-plano__moeda { font-size:17px; font-weight:500; color:var(--ink-soft); }
.vit-plano__num { font-size:46px; font-weight:600; letter-spacing:-.035em; line-height:1; }
.vit-plano__mes { font-size:14px; color:var(--ink-faint); margin-left:2px; }
.vit-plano__cobranca { margin-top:7px; min-height:2.6em; font-size:12px; line-height:1.45; color:var(--ink-faint); }
.vit-plano .btn { margin-top:6px; }
.vit-plano__itens { margin-top:22px; padding-top:20px; border-top:1px solid var(--surface-border); display:flex; flex-direction:column; gap:11px; }
.vit-plano__itens li { display:flex; align-items:flex-start; gap:9px; font-size:13px; line-height:1.5; color:var(--ink-soft); }
.vit-plano__itens .icon { flex-shrink:0; margin-top:2px; color:var(--status-recebido); }

.vit-garantias { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:28px; justify-content:center; }
.vit-garantias span { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-soft); }
.vit-garantias .icon { color:var(--status-recebido); }

.vit-autoridade { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-top:36px; padding-top:32px; border-top:1px solid var(--surface-border); }
@media (max-width:940px){ .vit-autoridade { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .vit-autoridade { grid-template-columns:1fr; } }
.vit-autoridade__ic { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:var(--radius-xl); background:var(--surface); color:var(--brand-600); border:1px solid var(--surface-border); }
.vit-autoridade h4 { margin-top:12px; font-size:13.5px; font-weight:600; color:var(--ink); }
.vit-autoridade p { margin-top:6px; font-size:12.5px; line-height:1.55; color:var(--ink-soft); }

/* --- Depoimentos -----------------------------------------------------------------*/
.vit-depos { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:16px; }
.vit-depo { padding:24px; border-radius:var(--radius-2xl); border:1px solid var(--surface-border); background:var(--surface); }
.vit-depo__destaque { display:inline-block; margin-bottom:12px; padding:4px 11px; border-radius:var(--radius-full); background:var(--status-recebido-bg); color:var(--status-recebido); font-size:11.5px; font-weight:600; }
.vit-depo blockquote { font-size:14px; line-height:1.66; color:var(--ink); }
.vit-depo blockquote::before { content:"“"; color:var(--brand-300); font-size:30px; line-height:0; vertical-align:-8px; margin-right:2px; }
.vit-depo figcaption { display:flex; align-items:center; gap:11px; margin-top:20px; padding-top:16px; border-top:1px solid var(--surface-border); }
.vit-depo__av { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:var(--brand-50); color:var(--brand-700); font-size:12.5px; font-weight:600; }
.vit-depo figcaption strong { display:block; font-size:13px; color:var(--ink); }
.vit-depo figcaption small { font-size:11.5px; color:var(--ink-faint); }

/* --- Perguntas ---------------------------------------------------------------------*/
.vit-faq__lista { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px 20px; }
@media (max-width:820px){ .vit-faq__lista { grid-template-columns:1fr; } }
.vit-faq details { padding:16px 18px; border-radius:var(--radius-xl); border:1px solid var(--surface-border); background:var(--surface); }
.vit-faq summary { font-size:14px; font-weight:500; color:var(--ink); cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.vit-faq summary::-webkit-details-marker { display:none; }
.vit-faq summary::after { content:"+"; flex-shrink:0; color:var(--brand-500); font-size:19px; line-height:1; }
.vit-faq details[open] summary::after { content:"−"; }
.vit-faq details p { margin-top:11px; font-size:13px; line-height:1.62; color:var(--ink-soft); }

/* --- Chamada final -------------------------------------------------------------------*/
.vit-final { text-align:center; padding:clamp(48px, 7vw, 88px) clamp(16px, 5vw, 56px); background:var(--brand-600); color:#fff; }
.vit-final h2 { font-size:clamp(22px, 3vw, 32px); font-weight:600; letter-spacing:-.026em; text-wrap:balance; }
.vit-final p { margin-top:12px; font-size:14.5px; color:var(--brand-100); }
.vit-final .btn { margin-top:26px; background:#fff; color:var(--brand-700); border-color:#fff; }
.vit-final .btn:hover { background:var(--brand-50); }

/* --- Rodapé -----------------------------------------------------------------------------*/
.vit-rodape { padding:clamp(36px, 5vw, 56px) clamp(16px, 5vw, 56px) 28px; background:var(--brand-900); color:var(--brand-200); }
.vit-rodape__topo { display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between; max-width:1240px; margin:0 auto; }
.vit-rodape__txt { margin-top:14px; max-width:32rem; font-size:12.5px; line-height:1.6; }
.vit-rodape__links { display:flex; flex-direction:column; gap:9px; }
.vit-rodape__links a { font-size:12.5px; color:var(--brand-200); text-decoration:none; }
.vit-rodape__links a:hover { color:#fff; }
.vit-rodape__legal { max-width:1240px; margin:28px auto 0; padding-top:18px; border-top:1px solid rgba(255,255,255,.08); font-size:11.5px; line-height:1.55; }

/* ===========================================================================
   Cobertura de plantão (página pública), planos e contratação.
   =========================================================================== */

/* --- Página pública "eu cubro" ---------------------------------------------*/
.cob-card { padding:28px 26px; }
.cob-eyebrow { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--brand-500); }
.cob-titulo { margin-top:10px; font-size:22px; font-weight:600; letter-spacing:-.02em; line-height:1.22; color:var(--ink); }
.cob-medico { margin-top:5px; font-size:12.5px; color:var(--ink-faint); }
.cob-sub { margin-top:10px; font-size:14px; line-height:1.6; color:var(--ink-soft); }

.cob-plantao { margin-top:22px; padding:18px; border-radius:var(--radius-2xl); background:var(--surface-muted);
  display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; }
@media (max-width:520px){ .cob-plantao { grid-template-columns:1fr; } }
.cob-plantao__linha { display:flex; align-items:flex-start; gap:11px; }
.cob-plantao__ic { display:flex; align-items:center; justify-content:center; width:32px; height:32px; flex-shrink:0;
  border-radius:var(--radius); background:var(--surface); color:var(--brand-600); }
.cob-plantao__lab { font-size:11px; color:var(--ink-faint); }
.cob-plantao__val { margin-top:2px; font-size:14px; font-weight:600; color:var(--ink); }
.cob-plantao__linha--valor .cob-plantao__val { color:var(--status-recebido); font-size:17px; }

.cob-form { margin-top:26px; padding-top:22px; border-top:1px solid var(--surface-border); }
.cob-form__titulo { font-size:15px; font-weight:600; color:var(--ink); margin-bottom:14px; }
.cob-form__nota { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:12px;
  font-size:12px; color:var(--ink-faint); }

.cob-rodape { margin-top:18px; text-align:center; font-size:12px; line-height:1.6; color:var(--ink-faint); }
.cob-rodape a { color:var(--brand-600); }

/* Confirmação */
.cob-ok { text-align:center; padding:34px 24px; }
.cob-ok__ic { display:flex; align-items:center; justify-content:center; width:54px; height:54px; margin:0 auto 6px;
  border-radius:50%; background:var(--status-recebido-bg); color:var(--status-recebido); }
.cob-ok__ic--neutro { background:var(--surface-muted); color:var(--ink-soft); }
.cob-ok .cob-sub { max-width:30rem; margin-left:auto; margin-right:auto; }
.cob-resumo { display:flex; flex-direction:column; gap:4px; margin-top:20px; padding:15px;
  border-radius:var(--radius-xl); background:var(--surface-muted); font-size:13px; color:var(--ink-soft); }
.cob-resumo__val { font-size:16px; font-weight:600; color:var(--status-recebido); }

/* O convite para a pessoa virar cliente */
.cob-convite { margin-top:16px; padding:28px 26px;
  background:linear-gradient(165deg, var(--brand-700), var(--brand-800)); border:0; color:#fff; }
.cob-convite__eyebrow { font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--brand-200); }
.cob-convite__titulo { margin-top:9px; font-size:20px; font-weight:600; line-height:1.25; letter-spacing:-.02em; color:#fff; }
.cob-convite__txt { margin-top:11px; font-size:13.5px; line-height:1.62; color:var(--brand-100); }
.cob-convite__itens { margin:20px 0 24px; display:flex; flex-direction:column; gap:10px; }
.cob-convite__itens li { display:flex; align-items:flex-start; gap:9px; font-size:13px; line-height:1.5; color:#fff; }
.cob-convite__itens .icon { flex-shrink:0; margin-top:2px; color:var(--brand-200); }
.cob-convite .btn--primary { background:#fff; color:var(--brand-700); border-color:#fff; }
.cob-convite .btn--primary:hover { background:var(--brand-50); }
.cob-convite__nota { margin-top:11px; text-align:center; font-size:11.5px; color:var(--brand-200); }

/* --- Candidatos a cobrir, dentro da tela de Trocas -------------------------*/
.cob-cand { display:flex; align-items:flex-start; gap:12px; padding:14px 16px 14px 26px;
  border-top:1px solid var(--surface-border); background:var(--brand-50); }
.cob-cand__av { display:flex; align-items:center; justify-content:center; width:32px; height:32px; flex-shrink:0;
  border-radius:50%; background:var(--brand-600); color:#fff; font-size:11.5px; font-weight:600; }
.cob-cand__info { flex:1; min-width:0; }
.cob-cand__nome { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13.5px; font-weight:600; color:var(--ink); }
.cob-cand__meta { margin-top:2px; font-size:11.5px; color:var(--ink-faint); }
.cob-cand__msg { margin-top:6px; font-size:12.5px; line-height:1.5; color:var(--ink-soft); font-style:italic; }
.cob-cand__acoes { display:flex; align-items:center; gap:8px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
.cob-cand__acoes form { margin:0; }
@media (max-width:700px){
  .cob-cand { flex-wrap:wrap; padding-left:16px; }
  .cob-cand__acoes { width:100%; justify-content:flex-start; }
}

/* --- Tela de planos dentro do sistema --------------------------------------*/
.plan-topo { max-width:44rem; margin-bottom:22px; }
.plan-titulo { font-size:clamp(21px, 3vw, 28px); font-weight:600; letter-spacing:-.024em; line-height:1.2; color:var(--ink); }
.plan-sub { margin-top:9px; font-size:14px; line-height:1.62; color:var(--ink-soft); }
.plan-topo .btn { margin-top:16px; }
.plan-ciclo-linha { margin-bottom:20px; }
.plan-grid { align-items:start; }
.vit-plano--atual { border-color:var(--status-recebido); }
.vit-plano__fita--atual { background:var(--status-recebido); }
.plan-garantias { justify-content:flex-start; margin-top:24px; }
.plan-rodape { margin-top:18px; font-size:12px; }

/* --- Contratação -----------------------------------------------------------*/
.assin { display:grid; grid-template-columns:1.15fr .85fr; gap:16px; align-items:start; }
@media (max-width:900px){ .assin { grid-template-columns:1fr; } }
.assin__form { padding:28px 26px; }
.assin__voltar { display:inline-flex; align-items:center; gap:5px; margin-bottom:16px; font-size:12.5px; color:var(--ink-faint); text-decoration:none; }
.assin__voltar:hover { color:var(--brand-600); }
.assin__campos { margin-top:22px; display:flex; flex-direction:column; gap:18px; }
.assin__campos .btn { margin-top:4px; }
.assin__conta { font-size:13.5px; color:var(--ink-soft); }
.assin__aviso { display:flex; align-items:flex-start; justify-content:center; gap:7px; font-size:11.5px; color:var(--ink-faint); }

.assin__resumo { padding:24px 22px; background:var(--surface-muted); }
.assin__resumo-lab { font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
.assin__resumo-plano { margin-top:6px; font-size:19px; font-weight:600; color:var(--ink); }
.assin__resumo-para { margin-top:2px; font-size:12.5px; color:var(--ink-faint); margin-bottom:16px; }
.assin__cab { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; }
.assin__linha { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:9px 0;
  border-bottom:1px solid var(--surface-border); font-size:13px; color:var(--ink-soft); }
.assin__linha strong { color:var(--ink); font-weight:600; }
.assin__linha--eco strong { color:var(--status-recebido); }
.assin__total { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:14px 0 0;
  font-size:13.5px; color:var(--ink-soft); }
.assin__total strong { font-size:22px; font-weight:600; color:var(--ink); letter-spacing:-.02em; }
.assin__itens { margin-top:18px; padding-top:16px; border-top:1px solid var(--surface-border);
  display:flex; flex-direction:column; gap:9px; }
.assin__itens li { display:flex; align-items:flex-start; gap:8px; font-size:12.5px; line-height:1.5; color:var(--ink-soft); }
.assin__itens .icon { flex-shrink:0; margin-top:2px; color:var(--status-recebido); }
.assin__nota { margin-top:16px; font-size:11.5px; line-height:1.55; color:var(--ink-faint); }

.assin__eventos { display:flex; flex-direction:column; gap:10px; }
.assin__eventos li { display:flex; align-items:baseline; gap:10px; font-size:12.5px; flex-wrap:wrap; }
.assin__ev-data { color:var(--ink-faint); font-size:11.5px; white-space:nowrap; }
.assin__ev-tipo { font-weight:600; color:var(--ink); }
.assin__ev-res { font-size:12px; }

/* --- Cadastro vindo de um convite ------------------------------------------*/
.auth__convite { display:inline-flex; align-items:center; gap:7px; margin-bottom:14px; padding:6px 13px;
  border-radius:var(--radius-full); background:var(--brand-50); color:var(--brand-700); font-size:12px; }
.auth__mini { margin-top:14px; text-align:center; font-size:11.5px; color:var(--ink-faint); }

/* ===========================================================================
   Vitrine, tratamento editorial
   ---------------------------------------------------------------------------
   O sistema é sóbrio de propósito: letra pequena e espaçamento apertado servem
   a quem passa o dia dentro dele. Página de vendas pede o contrário, então
   aqui o mesmo desenho ganha escala, respiro e cor.

   Tudo abaixo está preso em .vit-body, que só existe no layout da vitrine:
   nenhuma tela do sistema é afetada por estas regras.
   =========================================================================== */

.vit-body { --vit-max:1180px; }

/* Botão grande só na vitrine (no sistema ele continua do tamanho de antes). */
.vit-body .btn--lg { height:56px; padding:0 32px; font-size:16px; border-radius:12px; }
.vit-body .btn--sm { height:38px; padding:0 16px; font-size:13.5px; }

/* --- Topo com mais presença ------------------------------------------------*/
.vit-body .vit-top { padding-top:18px; padding-bottom:18px; }
.vit-body .vit-top__nav { gap:30px; }
.vit-body .vit-top__nav a { font-size:14.5px; font-weight:500; }

/* --- Herói ------------------------------------------------------------------*/
.vit-body .vit-hero {
  position:relative; isolation:isolate;
  grid-template-columns:1fr 1.08fr;
  gap:clamp(32px, 5vw, 72px);
  padding:clamp(56px, 8vw, 116px) clamp(20px, 5vw, 56px) clamp(56px, 7vw, 104px);
  max-width:var(--vit-max);
}
@media (max-width:940px){ .vit-body .vit-hero { grid-template-columns:1fr; } }

/* Luz de fundo atrás do herói: dá profundidade sem virar gradiente chapado. */
.vit-body .vit-hero::before {
  content:""; position:absolute; z-index:-1; inset:-12% -14% 16% -14%;
  background:
    radial-gradient(58% 50% at 72% 32%, color-mix(in srgb, var(--brand-300) 30%, transparent), transparent 70%),
    radial-gradient(46% 42% at 12% 8%, color-mix(in srgb, var(--brand-100) 55%, transparent), transparent 72%);
  pointer-events:none;
}

.vit-body .vit-selo {
  margin-bottom:26px; padding:8px 17px; font-size:13.5px; font-weight:600;
  background:var(--surface); color:var(--brand-700);
  border:1px solid color-mix(in srgb, var(--brand-300) 55%, white);
  box-shadow:0 2px 10px rgba(15,76,92,.07);
}
.vit-body .vit-selo--convite { background:#FFFBF0; border-color:#F0D9A0; color:#8A5D0B; }

.vit-body .vit-hero__titulo {
  max-width:16ch; font-size:clamp(40px, 5vw, 64px); line-height:1.06;
  letter-spacing:-.038em; font-weight:600;
}
@media (max-width:940px){ .vit-body .vit-hero__titulo { max-width:18ch; } }
.vit-body .vit-hero__titulo em {
  color:var(--brand-500);
  /* Sublinhado macio, só nas duas palavras que carregam a promessa. */
  background:linear-gradient(180deg, transparent 84%, color-mix(in srgb, var(--brand-300) 55%, transparent) 84%, color-mix(in srgb, var(--brand-300) 55%, transparent) 93%, transparent 93%);
}
.vit-body .vit-hero__sub {
  margin-top:26px; max-width:34rem;
  font-size:clamp(16.5px, 1.35vw, 19px); line-height:1.66; color:var(--ink-soft);
}
.vit-body .vit-hero__cta { margin-top:38px; gap:14px; }
.vit-body .vit-hero__bullets { margin-top:30px; gap:12px 24px; }
.vit-body .vit-hero__bullets li { font-size:13.5px; }

/* O produto, maior e mais presente. */
.vit-body .vit-mock {
  max-width:540px; border-radius:20px;
  box-shadow:0 40px 80px -24px rgba(9,42,52,.32), 0 8px 20px rgba(9,42,52,.08);
}
.vit-body .vit-mock__body { padding:26px; }
.vit-body .vit-mock__label { font-size:12.5px; }
.vit-body .vit-mock__valor { font-size:40px; letter-spacing:-.03em; }
.vit-body .vit-mock__linhas { margin-top:22px; gap:10px; }
.vit-body .vit-mock__linha { padding:12px 13px; border-radius:11px; }
.vit-body .vit-mock__nome { font-size:13px; }
.vit-body .vit-mock__val { font-size:13.5px; }
.vit-body .vit-mock__tag { font-size:10.5px; padding:4px 9px; }
.vit-body .vit-mock__rodape span { font-size:12.5px; }

/* --- Seções: mais ar e títulos maiores ---------------------------------------*/
.vit-body .vit-sec { max-width:var(--vit-max); padding:clamp(64px, 9vw, 128px) clamp(20px, 5vw, 56px); }
.vit-body .vit-sec__head { max-width:40rem; margin-bottom:clamp(36px, 5vw, 60px); }
.vit-body .vit-sec__eyebrow { font-size:12px; letter-spacing:.14em; color:var(--brand-500); }
.vit-body .vit-sec__titulo { margin-top:14px; font-size:clamp(30px, 3.9vw, 48px); line-height:1.1; letter-spacing:-.033em; }
.vit-body .vit-sec__sub { margin-top:16px; font-size:clamp(15.5px, 1.2vw, 17.5px); line-height:1.66; }

/* --- As três dores: cartões de verdade, não caixas cinzas --------------------*/
.vit-body .vit-dores {
  max-width:var(--vit-max); gap:20px;
  padding:0 clamp(20px, 5vw, 56px) clamp(20px, 3vw, 40px);
}
.vit-body .vit-dores article {
  padding:30px 28px; border-radius:20px; background:var(--surface);
  border:1px solid var(--surface-border); box-shadow:0 2px 14px rgba(15,76,92,.05);
}
.vit-body .vit-dores__ic {
  width:46px; height:46px; border-radius:14px;
  background:var(--brand-600); color:#fff;
}
.vit-body .vit-dores h3 { margin-top:20px; font-size:18px; letter-spacing:-.015em; }
.vit-body .vit-dores p { margin-top:10px; font-size:14.5px; line-height:1.62; }

/* --- Recursos ------------------------------------------------------------------*/
.vit-body .vit-recursos { gap:20px; }
.vit-body .vit-rec { padding:34px 30px; border-radius:22px; }
.vit-body .vit-rec--destaque { box-shadow:0 24px 56px -20px rgba(15,76,92,.28); }
.vit-body .vit-rec__ic { width:48px; height:48px; border-radius:15px; }
.vit-body .vit-rec h3 { margin-top:20px; font-size:21px; letter-spacing:-.02em; }
.vit-body .vit-rec > p { margin-top:12px; font-size:14.5px; line-height:1.66; }
.vit-body .vit-rec ul { margin-top:22px; padding-top:22px; gap:12px; }
.vit-body .vit-rec li { padding-left:20px; font-size:13.5px; }

/* --- Faixa escura da troca --------------------------------------------------------*/
.vit-body .vit-troca { padding:clamp(64px, 9vw, 124px) clamp(20px, 5vw, 56px); gap:clamp(32px, 5vw, 72px); }
.vit-body .vit-troca__txt { max-width:600px; }
.vit-body .vit-troca__sub { margin-top:18px; font-size:16.5px; line-height:1.68; }
.vit-body .vit-passos { margin-top:34px; gap:16px; }
.vit-body .vit-passos li { font-size:15px; align-items:center; }
.vit-body .vit-passos span { width:30px; height:30px; font-size:13px; background:rgba(255,255,255,.14); color:#fff; }
.vit-body .vit-troca__nota { margin-top:32px; padding:16px 18px; border-radius:14px; font-size:13.5px; }
.vit-body .vit-troca__zap { max-width:420px; }
.vit-body .vit-zap { padding:24px; border-radius:22px; }
.vit-body .vit-zap__bolha { padding:14px 16px 22px; }
.vit-body .vit-zap__titulo { font-size:14.5px; }
.vit-body .vit-zap__linha { font-size:13.5px; }

/* --- Preços --------------------------------------------------------------------------*/
.vit-body .vit-precos > * { max-width:var(--vit-max); }
.vit-body .vit-ciclo { margin-bottom:38px; padding:5px; }
.vit-body .vit-ciclo__op { padding:11px 22px; font-size:14px; }
.vit-body .vit-planos { gap:20px; }
.vit-body .vit-plano { padding:36px 30px; border-radius:22px; }
.vit-body .vit-plano--destaque { box-shadow:0 30px 64px -22px rgba(15,76,92,.3); }
.vit-body .vit-plano__fita { top:-13px; padding:6px 15px; font-size:12px; }
.vit-body .vit-plano__nome { font-size:22px; letter-spacing:-.02em; }
.vit-body .vit-plano__para { margin-top:5px; font-size:13.5px; }
.vit-body .vit-plano__preco { margin-top:26px; }
.vit-body .vit-plano__num { font-size:60px; letter-spacing:-.045em; }
.vit-body .vit-plano__moeda { font-size:20px; }
.vit-body .vit-plano__mes { font-size:15px; }
.vit-body .vit-plano__cobranca { margin-top:9px; font-size:13px; }
.vit-body .vit-plano__itens { margin-top:26px; padding-top:24px; gap:13px; }
.vit-body .vit-plano__itens li { font-size:14px; }

.vit-body .vit-garantias { gap:12px 28px; margin-top:38px; }
.vit-body .vit-garantias span { font-size:13.5px; }
.vit-body .vit-autoridade { gap:22px; margin-top:52px; padding-top:44px; }
.vit-body .vit-autoridade__ic { width:40px; height:40px; border-radius:13px; }
.vit-body .vit-autoridade h4 { margin-top:15px; font-size:15px; }
.vit-body .vit-autoridade p { margin-top:8px; font-size:13.5px; line-height:1.6; }

/* --- Perguntas -------------------------------------------------------------------------*/
.vit-body .vit-faq__lista { gap:14px 24px; }
.vit-body .vit-faq details { padding:20px 22px; border-radius:16px; }
.vit-body .vit-faq summary { font-size:15.5px; }
.vit-body .vit-faq details p { margin-top:13px; font-size:14.5px; line-height:1.66; }

/* --- Chamada final ----------------------------------------------------------------------*/
.vit-body .vit-final {
  padding:clamp(64px, 9vw, 120px) clamp(20px, 5vw, 56px);
  background:linear-gradient(150deg, var(--brand-600), var(--brand-800));
}
.vit-body .vit-final h2 { font-size:clamp(28px, 3.6vw, 44px); letter-spacing:-.032em; line-height:1.12; max-width:20ch; margin:0 auto; }
.vit-body .vit-final p { margin-top:16px; font-size:16.5px; }
.vit-body .vit-final .btn { margin-top:32px; }

/* --- Rodapé -------------------------------------------------------------------------------*/
.vit-body .vit-rodape { padding-top:clamp(48px, 6vw, 72px); }
.vit-body .vit-rodape__topo { max-width:var(--vit-max); gap:48px; }
.vit-body .vit-rodape__txt { font-size:13.5px; line-height:1.66; }
.vit-body .vit-rodape__links a { font-size:13.5px; }
.vit-body .vit-rodape__legal { max-width:var(--vit-max); font-size:12px; }

/* --- Celular: escala grande não pode virar aperto --------------------------------------------*/
@media (max-width:640px){
  .vit-body .vit-hero__titulo { font-size:clamp(34px, 10vw, 44px); max-width:none; }
  .vit-body .vit-hero__cta { flex-direction:column; align-items:stretch; }
  .vit-body .vit-hero__cta .btn { width:100%; }
  .vit-body .vit-plano__num { font-size:52px; }
  .vit-body .vit-dores article, .vit-body .vit-rec, .vit-body .vit-plano { padding:26px 22px; }
}

/* Enfeites de fundo nao podem alargar a pagina. clip corta sem criar
   area rolavel e sem atrapalhar o cabecalho fixo. */
.vit-body main { overflow-x:clip; }
.vit-body .vit-hero { overflow-x:clip; }

/* ===========================================================================
   Vitrine, segunda camada: demonstrar em vez de descrever
   ---------------------------------------------------------------------------
   Uma página de vendas que repete o mesmo formato de seção cinco vezes lê como
   folheto. Aqui cada bloco tem forma própria: a jornada é uma sequência, os
   recursos são linhas alternadas com a tela de verdade, e a calculadora é o
   único lugar onde o leitor vê os números dele.
   =========================================================================== */

/* --- Entrada dos blocos ao rolar ------------------------------------------ */
.vit-body .aparece { opacity:0; transform:translateY(18px); }
.vit-body .aparece--pronto {
  opacity:1; transform:none;
  transition:opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce){
  .vit-body .aparece, .vit-body .aparece--pronto { opacity:1; transform:none; transition:none; }
}

/* --- Avisos flutuando sobre o produto ------------------------------------- */
.vit-body .vit-hero__arte { position:relative; }
.vit-body .vit-flut {
  position:absolute; z-index:2; display:flex; align-items:center; gap:10px;
  padding:11px 15px; border-radius:14px; background:var(--surface);
  border:1px solid var(--surface-border);
  box-shadow:0 14px 34px -10px rgba(9,42,52,.26);
  animation:flutua 5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){ .vit-body .vit-flut { animation:none; } }
@keyframes flutua { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-7px) } }
/* Presos as bordas do retrato, nunca por cima dos numeros: eles sao a
   historia que a tela conta. */
.vit-body .vit-flut--alerta { top:-26px; left:-7%; animation-delay:.3s; }
.vit-body .vit-flut--ok { bottom:-58px; right:4%; animation-delay:1.6s; }
.vit-body .vit-flut__ic {
  display:flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:9px; flex-shrink:0;
}
.vit-body .vit-flut--alerta .vit-flut__ic { background:var(--status-glosado-bg); color:var(--status-glosado); }
.vit-body .vit-flut--ok .vit-flut__ic { background:var(--status-recebido-bg); color:var(--status-recebido); }
.vit-body .vit-flut__titulo { font-size:12.5px; font-weight:600; color:var(--ink); }
.vit-body .vit-flut__txt { font-size:11px; color:var(--ink-faint); margin-top:1px; }
@media (max-width:1180px){
  .vit-body .vit-flut--alerta { left:-2%; }
  .vit-body .vit-flut--ok { right:-1%; }
}
@media (max-width:940px){ .vit-body .vit-flut { position:static; margin-top:12px; animation:none; } }
@media (max-width:640px){ .vit-body .vit-flut { display:none; } }

/* --- A viagem do dinheiro -------------------------------------------------- */
.vit-body .vit-jornada { padding-bottom:clamp(40px, 5vw, 64px); }
.vit-body .jor {
  display:grid; grid-template-columns:repeat(5, 1fr); gap:0;
  /* Os numeros sao os circulos desenhados abaixo, nao o marcador do <ol>. */
  list-style:none;
}
@media (max-width:1000px){ .vit-body .jor { grid-template-columns:repeat(2, 1fr); gap:24px 20px; } }
@media (max-width:560px){ .vit-body .jor { grid-template-columns:1fr; gap:14px; } }

.vit-body .jor__passo { position:relative; padding:0 10px; }
/* A linha que liga as paradas. Some no empilhamento do celular. */
.vit-body .jor__passo::before {
  content:""; position:absolute; top:15px; left:50%; right:-50%; height:2px;
  background:var(--surface-border);
}
.vit-body .jor__passo:last-child::before { display:none; }
@media (max-width:1000px){ .vit-body .jor__passo::before { display:none; } }

.vit-body .jor__n {
  position:relative; z-index:1; display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%; margin:0 auto 18px;
  background:var(--surface); border:2px solid var(--surface-border);
  font-size:13px; font-weight:600; color:var(--ink-soft);
}
.vit-body .jor__passo--risco .jor__n { border-color:var(--status-atrasado); color:var(--status-atrasado); }
.vit-body .jor__passo--fim .jor__n { border-color:var(--brand-500); background:var(--brand-500); color:#fff; }
@media (max-width:1000px){ .vit-body .jor__n { margin-left:0; } }

.vit-body .jor__card { padding:20px 18px; border-radius:16px; background:var(--surface-muted); height:100%; }
.vit-body .jor__passo--risco .jor__card { background:var(--status-atrasado-bg); }
.vit-body .jor__card--pulso {
  background:linear-gradient(165deg, var(--brand-600), var(--brand-700)); color:#fff;
  box-shadow:0 18px 40px -16px rgba(15,76,92,.5);
}
.vit-body .jor__dia { font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
.vit-body .jor__card--pulso .jor__dia { color:var(--brand-200); }
.vit-body .jor__titulo { margin-top:7px; font-size:15.5px; font-weight:600; color:var(--ink); line-height:1.25; }
.vit-body .jor__card--pulso .jor__titulo { color:#fff; }
.vit-body .jor__txt { margin-top:8px; font-size:12.5px; line-height:1.55; color:var(--ink-soft); }
.vit-body .jor__passo--risco .jor__txt { color:color-mix(in srgb, var(--status-atrasado) 85%, black); }
.vit-body .jor__card--pulso .jor__txt { color:var(--brand-100); }

/* --- Recursos em linhas alternadas ---------------------------------------- */
.vit-body .lin {
  display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(32px, 5vw, 72px);
  align-items:center; padding:clamp(36px, 5vw, 60px) 0;
}
.vit-body .lin + .lin { border-top:1px solid var(--surface-border); }
.vit-body .lin--invertida .lin__txt { order:2; }
.vit-body .lin--invertida .lin__arte { order:1; }
@media (max-width:900px){
  .vit-body .lin { grid-template-columns:1fr; gap:28px; }
  .vit-body .lin--invertida .lin__txt, .vit-body .lin--invertida .lin__arte { order:initial; }
}

.vit-body .lin__eyebrow {
  display:inline-flex; align-items:center; gap:7px; padding:5px 12px;
  border-radius:var(--radius-full); background:var(--brand-50); color:var(--brand-700);
  font-size:12px; font-weight:600; letter-spacing:.02em;
}
.vit-body .lin__titulo { margin-top:16px; font-size:clamp(23px, 2.6vw, 32px); font-weight:600; letter-spacing:-.026em; line-height:1.18; color:var(--ink); }
.vit-body .lin__sub { margin-top:14px; font-size:15.5px; line-height:1.66; color:var(--ink-soft); }
.vit-body .lin__itens { margin-top:22px; display:flex; flex-direction:column; gap:11px; }
.vit-body .lin__itens li { display:flex; align-items:flex-start; gap:9px; font-size:14px; line-height:1.5; color:var(--ink-soft); }
.vit-body .lin__itens .icon { flex-shrink:0; margin-top:2px; color:var(--status-recebido); }

/* Moldura de tela usada nas três linhas. */
.vit-body .tela {
  border-radius:18px; overflow:hidden; background:var(--surface);
  border:1px solid var(--surface-border);
  box-shadow:0 26px 56px -22px rgba(9,42,52,.28), 0 3px 10px rgba(9,42,52,.05);
}
.vit-body .tela__topo {
  display:flex; align-items:center; gap:6px; padding:11px 15px;
  background:var(--surface-muted); border-bottom:1px solid var(--surface-border);
}
.vit-body .tela__topo span { width:9px; height:9px; border-radius:50%; background:var(--surface-border); }
.vit-body .tela__topo em { margin-left:10px; font-style:normal; font-size:11.5px; color:var(--ink-faint); }
.vit-body .tela__corpo { padding:20px; }

/* Documento do recurso de glosa */
.vit-body .doc__titulo { font-size:15px; font-weight:600; color:var(--ink); margin-bottom:14px; }
.vit-body .doc__linha { display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--surface-border); font-size:12.5px; color:var(--ink-faint); }
.vit-body .doc__linha strong { font-size:12.5px; font-weight:600; color:var(--ink); text-align:right; }
.vit-body .doc__linha--prazo strong { color:var(--status-atrasado); }
.vit-body .doc__acao {
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:16px;
  padding:11px; border-radius:10px; background:var(--brand-600); color:#fff;
  font-size:13px; font-weight:500;
}

/* Agenda */
.vit-body .tela__corpo--agenda { padding:14px; display:flex; flex-direction:column; gap:7px; }
.vit-body .ag-linha { display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:10px; font-size:12.5px; border-left:3px solid transparent; background:var(--surface-muted); }
.vit-body .ag-hora { color:var(--ink-faint); font-size:11.5px; width:2.9rem; flex-shrink:0; }
.vit-body .ag-txt { flex:1; min-width:0; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vit-body .ag-sel { font-size:10.5px; padding:3px 8px; border-radius:var(--radius-full); background:var(--status-recebido-bg); color:var(--status-recebido); font-weight:600; white-space:nowrap; }
.vit-body .ag-sel--alerta { background:var(--status-atrasado-bg); color:var(--status-atrasado); }
.vit-body .ag-linha--plantao { border-left-color:#EA580C; }
.vit-body .ag-linha--consulta { border-left-color:#16A34A; }
.vit-body .ag-linha--sobre { border-left-color:#7C3AED; }
.vit-body .ag-linha--livre { border:1px dashed var(--brand-300); border-left:3px solid var(--brand-300); background:var(--brand-50); color:var(--brand-700); }
.vit-body .ag-linha--livre .ag-txt { color:var(--brand-700); }

/* Plantões por hospital */
.vit-body .pl-hosp + .pl-hosp { margin-top:18px; padding-top:18px; border-top:1px solid var(--surface-border); }
.vit-body .pl-hosp__linha { display:flex; align-items:baseline; gap:10px; }
.vit-body .pl-hosp__nome { font-size:13.5px; font-weight:600; color:var(--ink); }
.vit-body .pl-hosp__qtd { font-size:11.5px; color:var(--ink-faint); }
.vit-body .pl-hosp__val { margin-left:auto; font-size:14px; font-weight:600; color:var(--ink); }
.vit-body .pl-hosp__barra { margin-top:9px; height:8px; border-radius:var(--radius-full); background:var(--surface-muted); overflow:hidden; }
.vit-body .pl-hosp__barra span { display:block; height:100%; border-radius:var(--radius-full); background:linear-gradient(90deg, var(--brand-600), var(--brand-400)); }
.vit-body .pl-hosp__nota { margin-top:8px; font-size:11.5px; color:var(--ink-faint); }
.vit-body .pl-hosp__nota--alerta { color:var(--status-atrasado); font-weight:500; }

/* --- Calculadora ----------------------------------------------------------- */
.vit-body .vit-calc { background:var(--brand-900); padding:clamp(56px, 8vw, 112px) clamp(20px, 5vw, 56px); }
.vit-body .calc {
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px, 4vw, 56px);
  max-width:var(--vit-max); margin:0 auto; align-items:start;
}
@media (max-width:900px){ .vit-body .calc { grid-template-columns:1fr; } }

.vit-body .calc__txt .vit-sec__eyebrow { color:var(--brand-300); }
.vit-body .calc__txt .vit-sec__titulo { color:#fff; max-width:20ch; }
.vit-body .calc__txt .vit-sec__sub { color:var(--brand-200); max-width:34rem; }

.vit-body .calc__campo { margin-top:26px; }
.vit-body .calc__campo label, .vit-body .calc__label {
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  font-size:13.5px; color:var(--brand-100); margin-bottom:10px;
}
.vit-body .calc__campo label strong { font-size:17px; font-weight:600; color:#fff; white-space:nowrap; }

.vit-body .calc__campo input[type=range] {
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:99px;
  background:rgba(255,255,255,.16); outline:none; cursor:pointer;
}
.vit-body .calc__campo input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%;
  background:#fff; border:4px solid var(--brand-400); cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.vit-body .calc__campo input[type=range]::-moz-range-thumb {
  width:22px; height:22px; border-radius:50%; background:#fff;
  border:4px solid var(--brand-400); cursor:pointer;
}
.vit-body .calc__campo input[type=range]:focus-visible { outline:2px solid var(--brand-300); outline-offset:4px; }

.vit-body .calc__prazo { display:flex; gap:8px; }
.vit-body .calc__prazo-op {
  flex:1; padding:11px 8px; border-radius:10px; cursor:pointer;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  color:var(--brand-100); font-family:inherit; font-size:13.5px; font-weight:500;
  transition:background .15s, color .15s, border-color .15s;
}
.vit-body .calc__prazo-op:hover { background:rgba(255,255,255,.14); }
.vit-body .calc__prazo-op--on { background:#fff; border-color:#fff; color:var(--brand-800); font-weight:600; }

.vit-body .calc__res { padding:30px 28px; border-radius:22px; background:var(--surface); }
.vit-body .calc__res-lab { font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); }
.vit-body .calc__res-val { margin-top:8px; font-size:clamp(34px, 4vw, 46px); font-weight:600; letter-spacing:-.035em; line-height:1; color:var(--ink); }
.vit-body .calc__grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px; padding-top:20px; border-top:1px solid var(--surface-border); }
.vit-body .calc__mini-lab { font-size:11.5px; color:var(--ink-faint); }
.vit-body .calc__mini-val { margin-top:4px; font-size:19px; font-weight:600; color:var(--ink); }

.vit-body .calc__destaque { margin-top:22px; padding:20px; border-radius:16px; background:var(--status-atrasado-bg); }
.vit-body .calc__destaque-lab { font-size:12px; font-weight:600; color:color-mix(in srgb, var(--status-atrasado) 88%, black); }
.vit-body .calc__destaque-val { margin-top:6px; font-size:32px; font-weight:600; letter-spacing:-.03em; line-height:1; color:var(--status-atrasado); }
.vit-body .calc__destaque-txt { margin-top:10px; font-size:12.5px; line-height:1.55; color:color-mix(in srgb, var(--status-atrasado) 82%, black); }

.vit-body .calc__res .btn { margin-top:22px; }
.vit-body .calc__nota { margin-top:14px; font-size:11.5px; line-height:1.55; color:var(--ink-faint); }

/* ===========================================================================
   Vitrine, terceira camada: a rolagem
   ---------------------------------------------------------------------------
   Uma página de oito mil pixels precisa de rolagem desenhada, não só de blocos
   bonitos. Quatro coisas aqui: o salto das âncoras, a separação do cabeçalho,
   o quanto falta, e a entrada dos itens um a um em vez de em bloco.
   =========================================================================== */

/* --- Âncoras ---------------------------------------------------------------
   Rolagem suave só na vitrine (o :has prende a regra a esta página) e uma
   margem de rolagem para a seção não parar embaixo do cabeçalho fixo. Sem a
   margem, o Safari e o Firefox encostam o título atrás da barra. */
html:has(.vit-body) { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html:has(.vit-body) { scroll-behavior:auto; } }
.vit-body [id] { scroll-margin-top:96px; }

/* --- Cabeçalho que reage à rolagem ------------------------------------------*/
.vit-body .vit-top {
  position:sticky; top:0;
  transition:box-shadow .25s ease, background-color .25s ease, padding .25s ease;
}
.vit-body .vit-top--rolado {
  padding-top:12px; padding-bottom:12px;
  background:color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow:0 1px 0 var(--surface-border), 0 10px 26px -18px rgba(9,42,52,.45);
}
@media (prefers-reduced-motion: reduce){ .vit-body .vit-top { transition:none; } }

/* --- Quanto falta -----------------------------------------------------------*/
.vit-progresso {
  position:absolute; left:0; right:0; bottom:-2px; height:2px;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--brand-500), var(--brand-300));
  will-change:transform;
}

/* --- Entrada em cascata -----------------------------------------------------
   Numa grade, revelar o bloco inteiro de uma vez faz três cartões piscarem
   como um só. Nestes containers o pai só aparece e quem anima são os filhos,
   com um atraso pequeno entre eles. */
.vit-body .jor.aparece,
.vit-body .vit-planos.aparece,
.vit-body .vit-autoridade.aparece,
.vit-body .vit-faq__lista.aparece,
.vit-body .vit-depos.aparece { opacity:1; transform:none; }

.vit-body .jor.aparece > *,
.vit-body .vit-planos.aparece > *,
.vit-body .vit-autoridade.aparece > *,
.vit-body .vit-faq__lista.aparece > *,
.vit-body .vit-depos.aparece > * { opacity:0; transform:translateY(16px); }

.vit-body .jor.aparece--pronto > *,
.vit-body .vit-planos.aparece--pronto > *,
.vit-body .vit-autoridade.aparece--pronto > *,
.vit-body .vit-faq__lista.aparece--pronto > *,
.vit-body .vit-depos.aparece--pronto > * {
  opacity:1; transform:none;
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}
.vit-body .aparece--pronto > *:nth-child(2) { transition-delay:.07s; }
.vit-body .aparece--pronto > *:nth-child(3) { transition-delay:.14s; }
.vit-body .aparece--pronto > *:nth-child(4) { transition-delay:.21s; }
.vit-body .aparece--pronto > *:nth-child(5) { transition-delay:.28s; }
.vit-body .aparece--pronto > *:nth-child(6) { transition-delay:.35s; }

@media (prefers-reduced-motion: reduce){
  .vit-body .aparece > *, .vit-body .aparece--pronto > * {
    opacity:1; transform:none; transition:none; transition-delay:0s;
  }
}

/* --- Respiro entre as faixas de fundo ---------------------------------------
   Faixas coloridas grudadas umas nas outras cansam. As bordas suaves marcam a
   troca de assunto sem precisar de mais um título. */
.vit-body .vit-troca { border-top:1px solid var(--surface-border); }
.vit-body .vit-precos { border-top:1px solid var(--surface-border); }
.vit-body .vit-linhas { padding-top:clamp(40px, 5vw, 72px); }

/* O sistema usa "html, body { height:100% }" para a casca de tela cheia. Na
   vitrine isso trava o body em uma tela de altura, e o cabecalho fixo so
   conseguia grudar ate o fim dessa primeira tela: depois ele ia embora com a
   rolagem. Aqui a pagina volta a ter a altura do conteudo.
   (O cabecalho fixo da vitrine depende disso.) */
html:has(.vit-body), .vit-body { height:auto; min-height:100%; }

/* ===========================================================================
   Vitrine, quarta camada: respiro e assinatura da marca
   ---------------------------------------------------------------------------
   Medido antes de mexer: entre a seção de preços e a das perguntas havia 256px
   vazios, quase um terço de uma tela de 900px. Respiro demais desconecta as
   seções em vez de organizar, e faz a pessoa achar que a página acabou.

   O alvo aqui é 88px por lado no computador (176px entre seções), que separa
   sem soltar. Onde a faixa muda de cor, a própria cor já marca a troca, então
   ali cabe menos ainda.
   =========================================================================== */

.vit-body .vit-hero {
  padding-top:clamp(44px, 5.5vw, 88px);
  padding-bottom:clamp(44px, 5vw, 76px);
}
.vit-body .vit-sec { padding-top:clamp(52px, 6vw, 88px); padding-bottom:clamp(52px, 6vw, 88px); }
.vit-body .vit-troca { padding-top:clamp(52px, 6vw, 92px); padding-bottom:clamp(52px, 6vw, 92px); }
.vit-body .vit-calc { padding-top:clamp(52px, 6vw, 92px); padding-bottom:clamp(52px, 6vw, 92px); }
.vit-body .vit-final { padding-top:clamp(52px, 6vw, 88px); padding-bottom:clamp(52px, 6vw, 88px); }

/* A jornada continua com menos embaixo: ela conversa com o bloco seguinte. */
.vit-body .vit-jornada { padding-bottom:clamp(32px, 4vw, 52px); }
.vit-body .vit-linhas { padding-top:clamp(36px, 4.5vw, 60px); }

/* Título de seção mais perto do conteúdo que ele apresenta. */
.vit-body .vit-sec__head { margin-bottom:clamp(26px, 3.2vw, 44px); }

/* As três linhas de recurso estavam com 120px entre elas. */
.vit-body .lin { padding-top:clamp(26px, 3.4vw, 46px); padding-bottom:clamp(26px, 3.4vw, 46px); }

/* Blocos internos que também estavam soltos demais. */
.vit-body .vit-autoridade { margin-top:40px; padding-top:34px; }
.vit-body .vit-garantias { margin-top:30px; }
.vit-body .vit-ciclo { margin-bottom:30px; }
.vit-body .vit-dores { padding-bottom:clamp(16px, 2vw, 28px); }

/* --- Assinatura da marca entre seções --------------------------------------
   O traçado do pulso no lugar de repetir a logo. Some no celular, onde cada
   pixel de altura conta. */
.pulso-div { display:flex; justify-content:center; padding:0 20px; }
.pulso-div svg { width:180px; height:20px; overflow:visible; }
.pulso-div__linha {
  fill:none; stroke:var(--brand-300); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.vit-troca .pulso-div__linha, .vit-calc .pulso-div__linha { stroke:var(--brand-400); }
@media (max-width:640px){ .pulso-div { display:none; } }

/* ===========================================================================
   Vitrine: o fechamento do mês
   ---------------------------------------------------------------------------
   A tela que mostra o ponto central do produto: produzido, entrado, gasto e a
   sobra. São três números que precisam ser lidos como uma conta descendo, e
   por isso ficam empilhados com as notas explicando cada linha.
   =========================================================================== */

.vit-body .fx__linha { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-top:12px; }
.vit-body .fx__lab { font-size:13px; color:var(--ink-soft); }
.vit-body .fx__val { font-size:15px; font-weight:600; color:var(--ink); }
.vit-body .fx__linha--forte .fx__lab { color:var(--ink); font-weight:600; }
.vit-body .fx__val--ok { color:var(--status-recebido); font-size:19px; }
.vit-body .fx__val--saida { color:var(--status-atrasado); }
.vit-body .fx__nota { margin-top:3px; font-size:11px; line-height:1.45; color:var(--ink-faint); }

.vit-body .fx__sobra {
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-top:16px; padding:14px 16px; border-radius:12px; background:var(--brand-50);
}
.vit-body .fx__sobra span { font-size:13px; font-weight:600; color:var(--brand-700); }
.vit-body .fx__sobra strong { font-size:22px; font-weight:600; letter-spacing:-.02em; color:var(--brand-700); }

.vit-body .fx__prox { margin-top:18px; padding-top:16px; border-top:1px solid var(--surface-border); }
.vit-body .fx__prox-lab { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
/* Altura das barras em pixels, nao em porcentagem: dentro de um flex a
   porcentagem era espremida e as tres saiam do mesmo tamanho. */
.vit-body .fx__barras { display:flex; align-items:flex-end; gap:14px; margin-top:12px; }
.vit-body .fx__barras > span {
  flex:1; display:flex; flex-direction:column; justify-content:flex-end;
  font-size:10.5px; color:var(--ink-faint); text-align:center;
}
.vit-body .fx__barras em {
  display:block; width:100%; flex-shrink:0; margin-bottom:7px; border-radius:6px 6px 0 0;
  background:linear-gradient(180deg, var(--brand-400), var(--brand-200));
}
.vit-body .fx__barras b { font-size:11.5px; font-weight:600; color:var(--ink); }

/* Linha de saída no retrato do herói. */
.vit-body .vit-mock__linha--saida { background:var(--status-atrasado-bg); }
.vit-body .vit-mock__linha--saida .vit-mock__nome,
.vit-body .vit-mock__linha--saida .vit-mock__val { color:var(--status-atrasado); }
.vit-body .vit-mock__rodape--sobra {
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
}
.vit-body .vit-mock__sobra-lab { font-size:12px; font-weight:600; color:var(--brand-700); }
.vit-body .vit-mock__sobra-val { font-size:18px; font-weight:600; color:var(--brand-700); letter-spacing:-.02em; }

/* --- Calculadora: a frase do descompasso e o estado negativo -----------------*/
.vit-body .calc__destaque { background:var(--brand-50); }
.vit-body .calc__destaque-lab { color:var(--brand-700); }
.vit-body .calc__destaque-frase { font-size:14px; line-height:1.55; color:var(--ink); margin-top:8px; }
.vit-body .calc__destaque-frase strong { color:var(--brand-700); font-weight:600; }
.vit-body .calc__destaque .calc__destaque-txt + .calc__destaque-txt { margin-top:10px; color:var(--ink-soft); }

/* Despesa maior que entrada: a tela avisa em vez de mostrar um número negativo seco. */
.vit-body .calc--negativo .calc__res-val { color:var(--status-atrasado); }
.vit-body .calc--negativo .calc__destaque { background:var(--status-atrasado-bg); }
.vit-body .calc--negativo .calc__destaque-lab { color:color-mix(in srgb, var(--status-atrasado) 88%, black); }
.vit-body .calc--negativo .calc__destaque-frase strong { color:var(--status-atrasado); }

.cob-form__aviso { margin:-6px 0 16px; font-size:12.5px; line-height:1.55; color:var(--ink-faint); }

/* ===========================================================================
   Vitrine: encaixar na tela de notebook
   ---------------------------------------------------------------------------
   Medido antes de mexer, em 1366x768 e em 1280x720 (que é o que dá um monitor
   de 1920 com o Windows em 150%):

     título do herói .... 64px, o mesmo de uma tela de 1440
     botão principal .... terminava em 829px numa tela de 768px

   Ou seja: quem abria num notebook comum não via o botão de teste grátis. A
   causa é que os tamanhos escalavam só pela LARGURA, e tela de notebook é
   larga e baixa. Agora eles escalam pelo menor entre largura e altura, com
   máximos menores, e a tipografia encolhe junto com a tela.
   =========================================================================== */

.vit-body .vit-hero {
  padding-top:clamp(28px, 4.5vh, 76px);
  padding-bottom:clamp(32px, 5vh, 72px);
}

.vit-body .vit-selo { margin-bottom:clamp(14px, 2.2vh, 26px); padding:7px 15px; font-size:13px; }

.vit-body .vit-hero__titulo {
  font-size:clamp(34px, min(4.4vw, 7vh), 56px);
  line-height:1.07;
  max-width:17ch;
}
.vit-body .vit-hero__sub {
  margin-top:clamp(14px, 2.2vh, 24px);
  font-size:clamp(15px, min(1.15vw, 2.05vh), 17.5px);
  line-height:1.62;
  max-width:33rem;
}
.vit-body .vit-hero__cta { margin-top:clamp(20px, 3.2vh, 34px); }
.vit-body .vit-hero__bullets { margin-top:clamp(16px, 2.6vh, 28px); }
.vit-body .btn--lg { height:clamp(46px, 6.4vh, 54px); padding:0 28px; font-size:15.5px; }

/* O retrato do produto também precisa caber. */
.vit-body .vit-mock { max-width:clamp(360px, 34vw, 500px); }
.vit-body .vit-mock__valor { font-size:clamp(28px, min(2.6vw, 4.4vh), 38px); }
.vit-body .vit-mock__body { padding:clamp(18px, 2.6vh, 24px); }

/* --- Seções ------------------------------------------------------------------*/
.vit-body .vit-sec { padding-top:clamp(44px, 7vh, 84px); padding-bottom:clamp(44px, 7vh, 84px); }
.vit-body .vit-troca,
.vit-body .vit-calc { padding-top:clamp(44px, 7vh, 88px); padding-bottom:clamp(44px, 7vh, 88px); }
.vit-body .vit-final { padding-top:clamp(44px, 7vh, 84px); padding-bottom:clamp(44px, 7vh, 84px); }

.vit-body .vit-sec__titulo { font-size:clamp(24px, min(3vw, 5vh), 40px); line-height:1.14; }
.vit-body .vit-sec__sub { font-size:clamp(14.5px, min(1.1vw, 1.95vh), 16.5px); }
.vit-body .vit-sec__head { margin-bottom:clamp(22px, 3.4vh, 40px); }

.vit-body .lin__titulo { font-size:clamp(20px, min(2.2vw, 3.6vh), 28px); }
.vit-body .lin__sub { font-size:clamp(14px, min(1.1vw, 1.9vh), 15.5px); }
.vit-body .lin { padding-top:clamp(22px, 3.4vh, 42px); padding-bottom:clamp(22px, 3.4vh, 42px); }

.vit-body .vit-final h2 { font-size:clamp(23px, min(2.8vw, 4.6vh), 38px); }

/* --- Preços -------------------------------------------------------------------*/
.vit-body .vit-plano { padding:clamp(24px, 3.4vh, 32px) clamp(20px, 2vw, 28px); }
.vit-body .vit-plano__num { font-size:clamp(40px, min(4vw, 6.6vh), 54px); }
.vit-body .vit-plano__nome { font-size:clamp(18px, min(1.7vw, 2.8vh), 21px); }
.vit-body .vit-plano__itens li { font-size:13.5px; }
.vit-body .vit-plano__preco { margin-top:clamp(16px, 2.4vh, 24px); }
.vit-body .vit-plano__itens { margin-top:clamp(16px, 2.4vh, 24px); padding-top:clamp(16px, 2.2vh, 22px); }

/* --- Calculadora ---------------------------------------------------------------*/
.vit-body .calc__res-val { font-size:clamp(28px, min(3.2vw, 5.2vh), 42px); }
.vit-body .calc__campo { margin-top:clamp(16px, 2.6vh, 24px); }
.vit-body .calc__res { padding:clamp(22px, 3.2vh, 28px) clamp(20px, 2vw, 26px); }

/* --- Jornada e dores -----------------------------------------------------------*/
.vit-body .jor__card { padding:clamp(15px, 2.2vh, 20px) clamp(14px, 1.4vw, 18px); }
.vit-body .jor__titulo { font-size:clamp(14px, min(1.3vw, 2.2vh), 15.5px); }
.vit-body .jor__txt { font-size:12px; }
.vit-body .vit-dores article { padding:clamp(20px, 2.8vh, 28px) clamp(18px, 1.8vw, 26px); }
.vit-body .vit-dores h3 { font-size:clamp(15px, min(1.4vw, 2.3vh), 17px); }
.vit-body .vit-dores p { font-size:13.5px; }

/* --- Perguntas -------------------------------------------------------------------*/
.vit-body .vit-faq summary { font-size:clamp(14px, min(1.15vw, 2vh), 15px); }
.vit-body .vit-faq details { padding:clamp(15px, 2.2vh, 19px) 20px; }

/* Tela baixa de verdade (notebook em 720p ou menos): aperta mais o herói para
   o botão de teste grátis não ficar embaixo da dobra. */
@media (max-height:760px) and (min-width:941px){
  .vit-body .vit-hero { padding-top:22px; padding-bottom:28px; }
  .vit-body .vit-hero__bullets { margin-top:14px; gap:8px 20px; }
  .vit-body .vit-selo { margin-bottom:12px; }
}

/* Os dois botoes do heroi dividem a linha em vez de empilhar por falta de
   poucos pixels, e ficam do mesmo tamanho quando a coluna e estreita. */
.vit-body .vit-hero__cta .btn { flex:1 1 200px; max-width:300px; }
@media (max-width:640px){ .vit-body .vit-hero__cta .btn { max-width:none; } }

/* Celular: faltavam 13px para o botao caber na primeira tela. Sao os poucos
   pixels entre a pessoa ver o convite e ter que rolar para descobrir que ele
   existe. */
@media (max-width:640px){
  .vit-body .vit-hero { padding-top:20px; }
  .vit-body .vit-selo { margin-bottom:12px; }
  .vit-body .vit-hero__cta { margin-top:18px; gap:10px; }
  .vit-body .vit-hero__bullets { margin-top:14px; }
}

/* Filtros da Administracao: sao nove, entao quebram em linha em vez de
   espremer. A regra generica de .seg forca tres colunas iguais. */
.admin-filtros { display:flex; flex-wrap:wrap; gap:2px; }
.admin-erro { color:var(--status-atrasado); }
.admin-nota { margin-top:16px; font-size:11.5px; line-height:1.55; max-width:52rem; }

.admin-uso { font-size:11.5px; line-height:1.5; white-space:nowrap; }

/* ===========================================================================
   Vitrine: acabamento da barra do topo
   ---------------------------------------------------------------------------
   O topo é a primeira coisa que a pessoa vê e o último lugar de onde ela pode
   clicar em "Testar". Estava com o mínimo: texto liso e botão chapado. Aqui os
   três elementos ganham resposta ao mouse, ao teclado e ao toque.

   Tudo preso em .vit-body: os botões do sistema continuam como estavam.
   =========================================================================== */

/* --- Links do menu ----------------------------------------------------------
   Sublinhado que cresce da esquerda, e um ponto marcando a seção em que a
   pessoa está no momento (o controller da vitrine liga a classe). */
.vit-body .vit-top__nav a {
  position:relative; padding:6px 2px; font-weight:500;
  color:var(--ink-soft);
  transition:color .18s ease;
}
.vit-body .vit-top__nav a::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  border-radius:2px; background:var(--brand-500);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .22s cubic-bezier(.22,.61,.36,1);
}
.vit-body .vit-top__nav a:hover,
.vit-body .vit-top__nav a:focus-visible { color:var(--brand-700); }
.vit-body .vit-top__nav a:hover::after,
.vit-body .vit-top__nav a:focus-visible::after { transform:scaleX(1); }

/* Seção em que a pessoa está agora. */
.vit-body .vit-top__nav a.vit-nav--aqui { color:var(--brand-700); font-weight:600; }
.vit-body .vit-top__nav a.vit-nav--aqui::after { transform:scaleX(1); background:var(--brand-300); }

/* --- "Entrar" ---------------------------------------------------------------
   Era transparente e sumia ao lado do botão cheio. Ganha contorno no hover,
   sem competir com a ação principal. */
.vit-body .vit-top__acoes .btn--ghost {
  border-color:transparent; color:var(--ink-soft); font-weight:500;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.vit-body .vit-top__acoes .btn--ghost:hover,
.vit-body .vit-top__acoes .btn--ghost:focus-visible {
  background:var(--brand-50); color:var(--brand-700); border-color:var(--brand-100);
}

/* --- Botão principal --------------------------------------------------------
   Sobe um fio, ganha profundidade e afunda ao clicar. O brilho que atravessa é
   discreto e só no hover: em botão de compra ele chama o olho sem virar
   enfeite piscando. */
.vit-body .btn--primary {
  position:relative; overflow:hidden;
  box-shadow:0 1px 2px rgba(9,42,52,.16), 0 6px 16px -8px rgba(9,42,52,.5);
  transition:background-color .18s ease, box-shadow .22s ease, transform .16s ease;
}
.vit-body .btn--primary::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  transform:translateX(-120%);
  transition:transform .55s cubic-bezier(.3,.7,.4,1);
  pointer-events:none;
}
.vit-body .btn--primary:hover {
  background:var(--brand-700);
  box-shadow:0 2px 4px rgba(9,42,52,.18), 0 14px 28px -12px rgba(9,42,52,.65);
  transform:translateY(-1px);
}
.vit-body .btn--primary:hover::after { transform:translateX(120%); }
.vit-body .btn--primary:active {
  background:var(--brand-800);
  transform:translateY(0);
  box-shadow:0 1px 2px rgba(9,42,52,.2);
}

/* --- Botão secundário -------------------------------------------------------*/
.vit-body .btn--secondary {
  transition:background-color .18s ease, border-color .18s ease, box-shadow .2s ease, transform .16s ease;
}
.vit-body .btn--secondary:hover {
  border-color:var(--brand-300); background:var(--surface);
  box-shadow:0 6px 16px -10px rgba(9,42,52,.4);
  transform:translateY(-1px);
}
.vit-body .btn--secondary:active { transform:translateY(0); box-shadow:none; }

/* --- Teclado ----------------------------------------------------------------
   Quem navega por Tab precisa enxergar onde está. O anel fica do lado de fora
   para não brigar com o fundo do botão. */
.vit-body .btn:focus-visible,
.vit-body .vit-top__nav a:focus-visible,
.vit-body .vit-ciclo__op:focus-visible {
  outline:2px solid var(--brand-500);
  outline-offset:3px;
}

/* --- Menos animação ---------------------------------------------------------*/
@media (prefers-reduced-motion: reduce){
  .vit-body .btn--primary,
  .vit-body .btn--secondary,
  .vit-body .vit-top__nav a,
  .vit-body .vit-top__nav a::after { transition:none; }
  .vit-body .btn--primary:hover,
  .vit-body .btn--secondary:hover { transform:none; }
  .vit-body .btn--primary::after { display:none; }
}

/* --- Dedo em vez de mouse ---------------------------------------------------
   No celular não existe hover: um "hover grudado" deixaria o botão claro
   depois do toque. Aqui o efeito de passar o mouse simplesmente não existe. */
@media (hover: none){
  .vit-body .btn--primary:hover,
  .vit-body .btn--secondary:hover { transform:none; }
  .vit-body .btn--primary:hover::after { transform:translateX(-120%); }
  .vit-body .vit-top__nav a:hover::after { transform:scaleX(0); }
}

/* ===========================================================================
   Configurações: barra de abas
   ---------------------------------------------------------------------------
   Medido antes de mexer: o vão entre a barra e o conteúdo era ZERO. Os cartões
   começavam colados nas abas, e é isso que dava a sensação de bagunça.

   São onze abas, então a barra também precisa aguentar rolagem no celular sem
   parecer que acabou na quarta.
   =========================================================================== */

.cfg-abas {
  position:relative;
  padding-bottom:16px;
  margin-bottom:22px;
  border-bottom:1px solid var(--surface-border);
}

/* A barra em si: um pouco mais alta e com mais ar entre os itens, porque com
   onze abas o aperto vira ruído. */
.cfg-abas .settings-tabs { padding:3px; border-radius:10px; }
/* Mais ar em cima e embaixo, e a MESMA largura de antes: com onze abas,
   crescer na horizontal faria a barra passar a rolar tambem no computador. */
.cfg-abas .settings-tabs .seg__item {
  padding:8px 12px; font-size:12px; border-radius:7px;
  transition:background-color .15s ease, color .15s ease;
}
.cfg-abas .settings-tabs .seg__item:hover { background:var(--brand-50); color:var(--brand-700); }
.cfg-abas .settings-tabs .seg__item--active {
  background:var(--brand-600); color:#fff;
  box-shadow:0 1px 3px rgba(15,76,92,.3);
}
.cfg-abas .settings-tabs .seg__item--active:hover { background:var(--brand-600); color:#fff; }
.cfg-abas .settings-tabs .seg__item:focus-visible { outline:2px solid var(--brand-500); outline-offset:2px; }

/* Rolagem no celular sem barra de rolagem à vista, e um esmaecido na borda
   direita avisando que existe mais aba adiante. Sem isso a pessoa não descobre
   que passou de "Metas". */
.cfg-abas .settings-tabs { scrollbar-width:none; }
.cfg-abas .settings-tabs::-webkit-scrollbar { display:none; }
.cfg-abas::after {
  content:""; position:absolute; top:0; right:0; width:44px;
  height:calc(100% - 16px);
  background:linear-gradient(90deg, transparent, var(--surface-muted) 72%);
  pointer-events:none; opacity:0;
  transition:opacity .2s ease;
}
/* O esmaecido só faz sentido onde a barra realmente rola. Medido: com onze abas
   ela cabe até 1280px de janela e passa a rolar a partir de 1100. O corte fica
   um pouco acima disso de propósito: esmaecido a mais é cosmético, esmaecido a
   menos esconde metade das abas de quem não sabe que a barra rola. */
@media (max-width:1220px){ .cfg-abas::after { opacity:1; } }

@media (max-width:560px){
  .cfg-abas { padding-bottom:12px; margin-bottom:18px; }
  .cfg-abas .settings-tabs .seg__item { padding:8px 12px; }
}

@media (prefers-reduced-motion: reduce){
  .cfg-abas .settings-tabs .seg__item { transition:none; }
}

/* ===========================================================================
   Página pública do plantão
   ---------------------------------------------------------------------------
   Mesma linguagem da página de vendas, porque quem abre este link é médico e
   precisa reconhecer a marca. As páginas de paciente (marcação e confirmação
   de consulta) continuam no layout enxuto, sem nada de venda: paciente não é
   cliente do Pulso, e oferecer sistema de gestão para ele seria ruído.

   A hierarquia é deliberada: a ação principal é cobrir o plantão. O convite
   para conhecer o produto aparece no topo (discreto), depois do formulário e
   no rodapé, nunca acima do botão que o colega veio clicar.
   =========================================================================== */

.plt-body {
  min-height:100%;
  display:flex; flex-direction:column;
  background:var(--surface-muted);
}

/* --- Topo -------------------------------------------------------------------*/
.plt-top {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px clamp(16px, 4vw, 32px);
  background:var(--surface);
  border-bottom:1px solid var(--surface-border);
}
.plt-top__brand { display:inline-flex; align-items:center; }
.plt-top__link { color:var(--ink-soft); border-color:transparent; }
.plt-top__link:hover { background:var(--brand-50); color:var(--brand-700); }

.plt-main { flex:1; width:100%; max-width:40rem; margin:0 auto; padding:clamp(20px, 4vw, 32px) 16px; }

/* --- Convite curto, embaixo do formulário -------------------------------------
   Cartão claro e de baixo contraste: ele informa sem chamar mais atenção que o
   botão de cobrir, que fica logo acima. */
.plt-saiba {
  margin-top:16px; padding:20px 22px;
  border-radius:var(--radius-2xl);
  background:var(--surface);
  border:1px solid var(--surface-border);
}
.plt-saiba__eyebrow {
  display:flex; align-items:center; gap:7px;
  font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--brand-500);
}
.plt-saiba__txt { margin-top:10px; font-size:13px; line-height:1.62; color:var(--ink-soft); }
.plt-saiba__itens { margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.plt-saiba__itens li { display:flex; align-items:flex-start; gap:8px; font-size:12.5px; line-height:1.5; color:var(--ink-soft); }
.plt-saiba__itens .icon { flex-shrink:0; margin-top:2px; color:var(--status-recebido); }
.plt-saiba__link {
  display:inline-flex; align-items:center; gap:5px; margin-top:16px;
  font-size:13px; font-weight:600; color:var(--brand-600);
}
.plt-saiba__link:hover { color:var(--brand-700); }
.plt-saiba__link .icon { transition:transform .15s ease; }
.plt-saiba__link:hover .icon { transform:translateX(2px); }

/* --- Rodapé com a apresentação do produto -------------------------------------*/
.plt-rodape { padding:clamp(24px, 4vw, 40px) 16px clamp(20px, 3vw, 28px); }
.plt-rodape__card {
  max-width:40rem; margin:0 auto; padding:clamp(22px, 4vw, 30px);
  border-radius:var(--radius-2xl); text-align:center;
  background:linear-gradient(165deg, var(--brand-700), var(--brand-800));
  color:#fff;
}
.plt-rodape__eyebrow { font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--brand-200); }
.plt-rodape__titulo { margin-top:9px; font-size:clamp(17px, 2.4vw, 20px); font-weight:600; line-height:1.28; letter-spacing:-.018em; color:#fff; }
.plt-rodape__txt { margin-top:11px; font-size:13px; line-height:1.62; color:var(--brand-100); }
.plt-rodape__btn { margin-top:18px; background:#fff; color:var(--brand-700); border-color:#fff; }
.plt-rodape__btn:hover { background:var(--brand-50); }
.plt-rodape__legal { margin-top:16px; text-align:center; font-size:11.5px; color:var(--ink-faint); }

@media (prefers-reduced-motion: reduce){
  .plt-saiba__link .icon { transition:none; }
  .plt-saiba__link:hover .icon { transform:none; }
}

/* ===========================================================================
   Página do plantão: duas colunas, com o formulário em destaque
   ---------------------------------------------------------------------------
   A conversa fica à esquerda e a ação à direita, num cartão elevado. É o
   formulário que a pessoa veio preencher, então ele ganha o peso visual.
   =========================================================================== */

.plt-main--largo { max-width:1180px; padding:clamp(24px, 4vw, 44px) clamp(16px, 3vw, 28px); }

.plt-hero {
  display:grid; grid-template-columns:1fr 1.05fr;
  gap:clamp(24px, 4vw, 52px); align-items:start;
}
@media (max-width:940px){
  .plt-hero { grid-template-columns:1fr; }
  /* Sem "order" aqui, de propósito. Reordenar só no visual faz o teclado andar
     numa ordem e o olho em outra (WCAG 2.4.3, ordem de foco). No celular a
     pessoa lê os dados do plantão e o formulário vem logo depois, que é a
     ordem natural de quem está decidindo se cobre. */
}

/* --- Coluna da conversa -------------------------------------------------------*/
.plt-eyebrow { font-size:11.5px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--brand-500); }
.plt-titulo {
  margin-top:12px; font-size:clamp(27px, 3.4vw, 40px); font-weight:600;
  line-height:1.12; letter-spacing:-.03em; color:var(--ink); max-width:15ch;
}
.plt-titulo em {
  font-style:normal; color:var(--brand-500);
  background:linear-gradient(180deg, transparent 84%, color-mix(in srgb, var(--brand-300) 55%, transparent) 84%, color-mix(in srgb, var(--brand-300) 55%, transparent) 93%, transparent 93%);
}
.plt-lead { margin-top:16px; max-width:32rem; font-size:15px; line-height:1.65; color:var(--ink-soft); }

/* Selos de confiança */
.plt-selos { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.plt-selo {
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  border-radius:var(--radius-xl); background:var(--surface);
  border:1px solid var(--surface-border); min-width:0;
}
.plt-selo__ic {
  display:flex; align-items:center; justify-content:center; width:34px; height:34px; flex-shrink:0;
  border-radius:10px; background:var(--brand-50); color:var(--brand-600);
}
.plt-selo__txt { font-size:12.5px; line-height:1.35; font-weight:500; color:var(--ink); }

/* --- Cartão do formulário ------------------------------------------------------*/
.plt-form-card {
  padding:clamp(22px, 3vw, 32px);
  border-radius:var(--radius-2xl); background:var(--surface);
  border:1px solid var(--surface-border);
  box-shadow:0 28px 60px -28px rgba(9,42,52,.34), 0 3px 10px rgba(9,42,52,.05);
}
.plt-form-card__ic {
  display:flex; align-items:center; justify-content:center; width:50px; height:50px; margin:0 auto;
  border-radius:50%; background:var(--brand-50); color:var(--brand-600);
}
.plt-form-card__titulo { margin-top:14px; text-align:center; font-size:19px; font-weight:600; color:var(--ink); }
.plt-form-card__sub { margin-top:5px; text-align:center; font-size:13px; line-height:1.55; color:var(--ink-faint); }
.plt-form-card form { margin-top:22px; }
.plt-form-card__nota {
  display:flex; align-items:center; justify-content:center; gap:7px; margin-top:14px;
  font-size:11.5px; line-height:1.5; color:var(--ink-faint); text-align:center;
}

/* Campo com ícone dentro, como no desenho. O ícone é decorativo: o rótulo
   continua sendo o <label>, que é o que o leitor de tela anuncia. */
.plt-campo { position:relative; }
.plt-campo__ic {
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  display:flex; color:var(--ink-faint); pointer-events:none;
}
.plt-campo .input { padding-left:36px; }
.plt-campo textarea.input { padding-top:11px; }
.plt-campo:has(textarea) .plt-campo__ic { top:14px; transform:none; }
.plt-campo .input:focus + .plt-campo__ic,
.plt-campo .input:focus ~ .plt-campo__ic { color:var(--brand-500); }

/* --- Convite discreto na coluna da esquerda -------------------------------------*/
.plt-conhecer {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:26px; padding:18px;
  border-radius:var(--radius-2xl);
  background:var(--brand-50); border:1px solid color-mix(in srgb, var(--brand-300) 45%, white);
}
.plt-conhecer__ic {
  display:flex; align-items:center; justify-content:center; width:40px; height:40px; flex-shrink:0;
  border-radius:12px; background:var(--surface); color:var(--brand-600);
}
.plt-conhecer__txt { flex:1; min-width:12rem; }
.plt-conhecer__titulo { font-size:14px; font-weight:600; color:var(--brand-700); }
.plt-conhecer__sub { margin-top:3px; font-size:12.5px; line-height:1.5; color:var(--ink-soft); }

/* --- Faixa de recursos -----------------------------------------------------------*/
.plt-recursos { margin-top:clamp(40px, 6vw, 72px); }
.plt-recursos__eyebrow { text-align:center; font-size:11px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--brand-500); }
.plt-recursos__titulo { margin-top:10px; text-align:center; font-size:clamp(19px, 2.4vw, 25px); font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.plt-recursos__grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:14px; margin-top:26px; }
@media (max-width:1000px){ .plt-recursos__grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .plt-recursos__grid { grid-template-columns:1fr; } }
.plt-recurso { padding:18px; border-radius:var(--radius-xl); background:var(--surface); border:1px solid var(--surface-border); }
.plt-recurso__ic { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:11px; background:var(--brand-50); color:var(--brand-600); }
.plt-recurso__titulo { margin-top:13px; font-size:13.5px; font-weight:600; line-height:1.3; color:var(--ink); }
.plt-recurso__txt { margin-top:6px; font-size:12px; line-height:1.55; color:var(--ink-soft); }

/* --- Faixa escura de fechamento ----------------------------------------------------*/
.plt-faixa {
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr);
  gap:clamp(22px, 4vw, 48px); align-items:center;
  margin-top:clamp(32px, 5vw, 56px); padding:clamp(26px, 4vw, 40px);
  border-radius:var(--radius-2xl); color:#fff;
  background:linear-gradient(150deg, var(--brand-700), var(--brand-900));
}
@media (max-width:860px){ .plt-faixa { grid-template-columns:1fr; } }
.plt-faixa__titulo { display:flex; align-items:center; gap:11px; font-size:clamp(18px, 2.2vw, 22px); font-weight:600; letter-spacing:-.02em; color:#fff; }
.plt-faixa__txt { margin-top:12px; font-size:13.5px; line-height:1.62; color:var(--brand-100); }
.plt-faixa__btn { margin-top:18px; background:#fff; color:var(--brand-700); border-color:#fff; }
.plt-faixa__btn:hover { background:var(--brand-50); }

.plt-faixa__fatos { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
@media (max-width:640px){ .plt-faixa__fatos { grid-template-columns:1fr; gap:14px; } }
.plt-fato { display:flex; align-items:flex-start; gap:11px; }
.plt-fato__ic {
  display:flex; align-items:center; justify-content:center; width:38px; height:38px; flex-shrink:0;
  border-radius:11px; background:rgba(255,255,255,.12); color:#fff;
}
.plt-fato__titulo { font-size:14px; font-weight:600; color:#fff; line-height:1.25; }
.plt-fato__txt { margin-top:4px; font-size:12px; line-height:1.5; color:var(--brand-100); }

/* A confirmacao continua em coluna unica e estreita: ali nao ha formulario
   para destacar, so a boa noticia e o convite. */
.plt-confirma { max-width:40rem; margin:0 auto; }

/* Na coluna da conversa o fundo da pagina ja e cinza, entao o cartao do
   plantao precisa ser branco para os dados nao se perderem. */
.plt-hero__txt .cob-plantao { background:var(--surface); border:1px solid var(--surface-border); }

.plt-saiba--largo { margin-top:clamp(24px, 3vw, 34px); }

/* ===========================================================================
   Páginas do paciente: marcar, confirmar e desmarcar consulta
   ---------------------------------------------------------------------------
   Quem manda visualmente aqui é o médico, não o Pulso. Esta é a porta de
   entrada digital do consultório: o paciente precisa reconhecer quem vai
   atendê-lo e sentir que está no lugar certo.

   Nenhum convite para conhecer o sistema. Paciente não é cliente do Pulso.
   =========================================================================== */

.pac-body { min-height:100%; display:flex; flex-direction:column; background:var(--surface-muted); }

/* --- Topo: o médico ---------------------------------------------------------*/
.pac-top {
  padding:14px clamp(16px, 4vw, 32px);
  background:var(--surface); border-bottom:1px solid var(--surface-border);
}
.pac-top__medico { display:flex; align-items:center; gap:12px; max-width:1080px; margin:0 auto; }
.pac-top__av {
  display:flex; align-items:center; justify-content:center; width:38px; height:38px; flex-shrink:0;
  border-radius:50%; background:var(--brand-600); color:#fff; font-size:13px; font-weight:600;
}
.pac-top__nome { font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.25; }
.pac-top__esp { font-size:12px; color:var(--ink-faint); margin-top:1px; }

.pac-main { flex:1; width:100%; max-width:1080px; margin:0 auto; padding:clamp(20px, 4vw, 36px) 16px; }

/* --- Duas colunas ------------------------------------------------------------*/
.pac-hero { display:grid; grid-template-columns:minmax(0, 0.85fr) minmax(0, 1.15fr); gap:clamp(20px, 3vw, 36px); align-items:start; }
/* minmax(0, 1fr) e não "1fr": com "1fr" o mínimo é o conteúdo, e a tira de dias
   (que rola por dentro) empurrava a coluna inteira para fora da tela. */
@media (max-width:900px){ .pac-hero { grid-template-columns:minmax(0, 1fr); } }

/* --- Cartão de quem atende ----------------------------------------------------*/
.pac-perfil {
  padding:clamp(22px, 3vw, 30px); border-radius:var(--radius-2xl); text-align:center;
  background:linear-gradient(170deg, var(--brand-700), var(--brand-800)); color:#fff;
  box-shadow:0 22px 48px -26px rgba(9,42,52,.5);
}
.pac-perfil__av {
  display:flex; align-items:center; justify-content:center; width:72px; height:72px; margin:0 auto 16px;
  border-radius:50%; background:rgba(255,255,255,.14); color:#fff;
  font-size:24px; font-weight:600; letter-spacing:-.02em;
  border:2px solid rgba(255,255,255,.22);
}
.pac-perfil__nome { font-size:clamp(19px, 2.2vw, 23px); font-weight:600; letter-spacing:-.02em; line-height:1.22; color:#fff; }
.pac-perfil__esp { margin-top:6px; font-size:13.5px; color:var(--brand-100); }
.pac-perfil__crm { margin-top:3px; font-size:12px; color:var(--brand-200); }

.pac-perfil__local {
  display:flex; align-items:flex-start; gap:11px; text-align:left;
  margin-top:20px; padding-top:18px; border-top:1px solid rgba(255,255,255,.14);
}
.pac-perfil__local-ic {
  display:flex; align-items:center; justify-content:center; width:32px; height:32px; flex-shrink:0;
  border-radius:10px; background:rgba(255,255,255,.12); color:#fff;
}
.pac-perfil__local-nome { font-size:13.5px; font-weight:600; color:#fff; }
.pac-perfil__mapa {
  display:inline-flex; align-items:center; gap:5px; margin-top:3px;
  font-size:12px; line-height:1.45; color:var(--brand-200); text-decoration:underline;
  text-underline-offset:2px;
}
.pac-perfil__mapa:hover { color:#fff; }

/* --- Como funciona ------------------------------------------------------------*/
.pac-passos {
  margin-top:16px; padding:20px 22px;
  border-radius:var(--radius-2xl); background:var(--surface); border:1px solid var(--surface-border);
}
.pac-passos__titulo { font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-500); }
.pac-passos ol { margin-top:14px; display:flex; flex-direction:column; gap:14px; list-style:none; }
.pac-passos li { display:flex; align-items:flex-start; gap:11px; }
.pac-passos__n {
  display:flex; align-items:center; justify-content:center; width:24px; height:24px; flex-shrink:0;
  border-radius:50%; background:var(--brand-50); color:var(--brand-700); font-size:12px; font-weight:600;
}
.pac-passos__t { font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.3; }
.pac-passos__d { margin-top:3px; font-size:12.5px; line-height:1.5; color:var(--ink-soft); }

/* --- Cartão da marcação --------------------------------------------------------*/
.pac-card {
  padding:clamp(22px, 3vw, 30px); border-radius:var(--radius-2xl);
  background:var(--surface); border:1px solid var(--surface-border);
  box-shadow:0 26px 56px -30px rgba(9,42,52,.34), 0 3px 10px rgba(9,42,52,.05);
}
.pac-card__titulo { font-size:20px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.pac-card__sub { margin-top:5px; font-size:13px; color:var(--ink-faint); }
.pac-card .step-label { margin-top:22px; }
.pac-card form .step-label:first-child { margin-top:22px; }

.pac-vazio {
  display:flex; align-items:flex-start; gap:9px; padding:14px 16px; margin-top:4px;
  border-radius:var(--radius-xl); background:var(--surface-muted);
  font-size:12.5px; line-height:1.55; color:var(--ink-soft);
}
.pac-vazio .icon { flex-shrink:0; margin-top:2px; color:var(--ink-faint); }
.pac-aviso {
  display:flex; align-items:center; gap:6px; margin:-2px 0 14px;
  font-size:11.5px; color:var(--ink-faint);
}

/* --- Confirmação ----------------------------------------------------------------*/
.pac-confirma { max-width:34rem; margin:0 auto; }
.pac-ok { padding:clamp(26px, 4vw, 36px); text-align:center; }
.pac-ok__ic {
  display:flex; align-items:center; justify-content:center; width:60px; height:60px; margin:0 auto 14px;
  border-radius:50%; background:var(--status-recebido-bg); color:var(--status-recebido);
}
.pac-ok__titulo { font-size:clamp(20px, 2.6vw, 25px); font-weight:600; letter-spacing:-.022em; line-height:1.22; color:var(--ink); }
.pac-ok__sub { margin-top:8px; font-size:14px; line-height:1.6; color:var(--ink-soft); }

.pac-ok__resumo {
  margin-top:22px; padding:18px; border-radius:var(--radius-2xl);
  background:var(--surface-muted); text-align:left;
  display:flex; flex-direction:column; gap:15px;
}
.pac-ok__linha { display:flex; align-items:flex-start; gap:11px; }
.pac-ok__ic-mini {
  display:flex; align-items:center; justify-content:center; width:30px; height:30px; flex-shrink:0;
  border-radius:9px; background:var(--surface); color:var(--brand-600);
}
.pac-ok__lab { font-size:11px; color:var(--ink-faint); }
.pac-ok__val { margin-top:2px; font-size:14px; font-weight:600; color:var(--ink); line-height:1.35; }
.pac-ok__mapa {
  display:inline-flex; align-items:center; gap:5px; margin-top:3px;
  font-size:12px; color:var(--brand-600); text-decoration:underline; text-underline-offset:2px;
}
.pac-ok__nota {
  display:flex; align-items:flex-start; gap:8px; margin-top:18px; padding:13px 15px;
  border-radius:var(--radius-xl); background:var(--brand-50);
  font-size:12.5px; line-height:1.55; color:var(--brand-700); text-align:left;
}
.pac-ok__nota .icon { flex-shrink:0; margin-top:2px; }

/* --- Rodapé -----------------------------------------------------------------------*/
.pac-rodape { padding:22px 16px 28px; text-align:center; }
.pac-rodape p {
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:11.5px; line-height:1.5; color:var(--ink-faint);
}
.pac-rodape__marca { margin-top:6px; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); opacity:.7; }

/* Observacao do evento: de onde ele veio. Tom informativo, nao de alerta. */
.ev-observacao {
  display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; padding:12px 14px;
  border-radius:var(--radius-xl); background:var(--brand-50);
}
.ev-observacao__ic { display:flex; flex-shrink:0; margin-top:1px; color:var(--brand-600); }
.ev-observacao p { font-size:12.5px; line-height:1.55; color:var(--brand-700); }

/* Quem e a pessoa do nome. Pequeno e discreto: informa sem competir. */
.pac-top__papel { font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); line-height:1.2; }
.pac-top__nome { margin-top:1px; }
.pac-perfil__papel { font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--brand-200); margin-bottom:8px; }

/* --- Preferência de dia e horário na lista de espera --------------------------*/
/* Opcional escrito ao lado do rótulo: quem não quiser preencher precisa ver
   isso antes de decidir sair da página. */
.form-label__opcional {
  margin-left:6px; font-size:10.5px; font-weight:400; letter-spacing:0;
  text-transform:none; color:var(--ink-faint);
}
.pill-radio__det { font-weight:400; opacity:.7; }

/* --- Pagamento da troca de plantão -------------------------------------------*/
.swap-pag { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
@media (max-width:520px) { .swap-pag { grid-template-columns:1fr; } }
.swap-pag__linha[hidden] { display:none; }
/* Devolvendo plantão por plantão não há prazo para perguntar, e a forma ocupa a
   linha inteira em vez de deixar meia largura vazia. */
.swap-pag:has(.swap-pag__linha[hidden]) { grid-template-columns:1fr; }
.form-label--mini { font-size:10.5px; margin-bottom:4px; }

/* Na página pública, o pagamento ocupa a largura toda e ganha o próprio traço:
   é um assunto separado dos dados do plantão, e é o que decide se a pessoa
   clica em "Eu cubro". */
.cob-pag {
  grid-column:1 / -1; margin-top:2px; padding-top:14px;
  border-top:1px dashed var(--surface-border);
  display:grid; grid-template-columns:repeat(2, 1fr); gap:16px;
}
@media (max-width:520px) { .cob-pag { grid-template-columns:1fr; } }
.cob-plantao__nota {
  margin-top:3px; font-size:11.5px; line-height:1.45; color:var(--ink-faint);
}

/* O combinado de pagamento na caixa de propostas recebidas. */
.inbox-prop__pag {
  display:flex; align-items:center; gap:6px; margin-top:5px;
  font-size:12px; color:var(--brand-700);
}
.inbox-prop__pag svg { flex-shrink:0; }

/* Sem contorno, o chip não marcado parecia texto solto e a pessoa não percebia
   que dava para clicar. A borda é discreta e some quando ele fica ativo. */
.day-toggle span { border:1px solid var(--surface-border); }
.day-toggle input:checked + span { border-color:var(--brand-600); }
.day-toggle input:focus-visible + span { outline:2px solid var(--brand-400); outline-offset:2px; }

/* Variante com o dia escrito por extenso curto ("Seg"), que não cabe no círculo
   de uma letra usado nas configurações do médico. */
.day-toggles--texto .day-toggle span {
  width:auto; min-width:46px; padding:0 12px; border-radius:var(--radius-full);
}

/* --- Pergunta de "sair sem salvar" -------------------------------------------
   Caixa central pequena, por cima do painel lateral. Aqui a caixa central é
   certa: duas opções, texto curto, nada para rolar. */
.confirma {
  width:min(26rem, calc(100vw - 32px)); padding:24px; border:0;
  border-radius:var(--radius-2xl); background:var(--surface); color:var(--ink);
  box-shadow:var(--shadow-pop); text-align:center;
}
.confirma::backdrop { background:rgba(9,42,52,.5); }
.confirma__ic {
  display:flex; align-items:center; justify-content:center; width:44px; height:44px;
  margin:0 auto 14px; border-radius:var(--radius-full);
  background:var(--status-atrasado-bg, var(--brand-50)); color:var(--status-atrasado, var(--brand-700));
}
.confirma__titulo { font-size:17px; font-weight:600; color:var(--ink); }
.confirma__txt { margin-top:8px; font-size:13.5px; line-height:1.55; color:var(--ink-soft); }
.confirma__acoes { display:flex; flex-direction:column; gap:8px; margin-top:20px; }
.confirma__acoes > * { width:100%; }

/* ===== Chamados de suporte ================================================= */
.cham-proto { font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink-soft); }
.cham-volta { font-size:12px; margin-bottom:4px; }
.cham-volta a { color:var(--brand-600); }
.cham-volta a:hover { color:var(--brand-700); }
.cham-secao { margin-top:22px; }
.cham-secao__titulo { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px; }

/* --- Linha da lista ---------------------------------------------------------
   O que decide o olhar e: de quem e a vez agora, e quando a conversa mexeu. */
.cham-linha {
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  border:1px solid var(--surface-border); border-radius:var(--radius-xl);
  background:var(--surface); transition:border-color .15s, box-shadow .15s;
}
.cham-linha:hover { border-color:var(--brand-300); box-shadow:0 6px 18px -14px rgba(9,42,52,.45); }
.cham-linha--novo { border-left:3px solid var(--brand-600); }
.cham-linha__ic { display:flex; align-items:center; justify-content:center; width:34px; height:34px; flex-shrink:0;
  border-radius:var(--radius); background:var(--brand-50); color:var(--brand-600); }
.cham-linha__meio { flex:1; min-width:0; }
.cham-linha__topo { display:flex; align-items:center; gap:7px; }
.cham-linha__assunto { font-size:14px; font-weight:500; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cham-linha__ponto { width:7px; height:7px; flex-shrink:0; border-radius:50%; background:var(--brand-600); }
.cham-linha__meta { display:block; margin-top:3px; font-size:11.5px; color:var(--ink-faint); }
.cham-linha__alerta { color:var(--status-atrasado); font-weight:500; }
.cham-linha__dir { display:flex; align-items:center; gap:8px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
.cham-linha__acao { font-size:11px; color:var(--status-atrasado); font-weight:500; }
@media (max-width:640px) {
  .cham-linha { flex-wrap:wrap; }
  .cham-linha__dir { width:100%; justify-content:flex-start; padding-left:46px; }
}

/* --- Tela vazia ----------------------------------------------------------- */
.cham-vazio { text-align:center; padding:40px 24px; }
.cham-vazio__ic { display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px;
  border-radius:var(--radius-full); background:var(--brand-50); color:var(--brand-600); margin-bottom:14px; }
.cham-vazio__titulo { font-size:17px; font-weight:600; color:var(--ink); }
.cham-vazio__txt { margin:8px auto 0; max-width:46ch; font-size:13.5px; line-height:1.6; color:var(--ink-soft); }
.cham-vazio__acoes { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:20px; }

/* --- Abrir chamado --------------------------------------------------------- */
.cham-form { max-width:52rem; }
.cham-card { padding:24px; }
.cham-form__acoes { display:flex; gap:10px; justify-content:flex-end; margin-top:24px;
  padding-top:18px; border-top:1px solid var(--surface-border); }
.step-opcional { margin-left:6px; font-size:10.5px; font-weight:400; letter-spacing:0;
  text-transform:none; color:var(--ink-faint); }

.cham-cats { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap:10px; }
.cham-cat input { position:absolute; opacity:0; width:0; height:0; }
.cham-cat__box {
  display:block; height:100%; padding:13px 15px; cursor:pointer;
  border:1px solid var(--surface-border); border-radius:var(--radius-xl); background:var(--surface);
  transition:border-color .15s, background-color .15s;
}
.cham-cat:hover .cham-cat__box { border-color:var(--brand-300); }
.cham-cat input:checked + .cham-cat__box { border-color:var(--brand-600); background:var(--brand-50); }
.cham-cat input:focus-visible + .cham-cat__box { outline:2px solid var(--brand-400); outline-offset:2px; }
.cham-cat__ic { display:inline-flex; color:var(--brand-600); }
.cham-cat__nome { display:block; margin-top:6px; font-size:13.5px; font-weight:600; color:var(--ink); }
.cham-cat__ajuda { display:block; margin-top:2px; font-size:11.5px; line-height:1.45; color:var(--ink-faint); }

/* --- Sugestoes da Central de Ajuda ------------------------------------------ */
.cham-sug {
  margin-top:12px; padding:14px 16px; border-radius:var(--radius-xl);
  background:color-mix(in srgb, var(--brand-50) 60%, white); border:1px solid var(--brand-100);
}
.cham-sug__head { display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; color:var(--brand-700); }
.cham-sug__lista { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.cham-sug__item { display:flex; align-items:center; gap:10px; padding:9px 11px;
  border-radius:var(--radius); background:var(--surface); color:var(--ink); }
.cham-sug__item:hover { background:#fff; box-shadow:0 4px 14px -10px rgba(9,42,52,.5); }
.cham-sug__ic { display:flex; color:var(--brand-600); flex-shrink:0; }
.cham-sug__titulo { display:block; font-size:13px; font-weight:500; }
.cham-sug__mod { display:block; font-size:11px; color:var(--ink-faint); }
.cham-sug__item > svg:last-child { margin-left:auto; flex-shrink:0; color:var(--ink-faint); }
.cham-sug__nota { margin-top:9px; font-size:11px; color:var(--ink-faint); }

/* --- Anexos ---------------------------------------------------------------- */
.cham-anexo__area {
  display:flex; align-items:center; gap:12px; padding:13px 15px; cursor:pointer;
  border:1px dashed var(--surface-border); border-radius:var(--radius-xl); background:var(--surface-muted);
  transition:border-color .15s, background-color .15s;
}
.cham-anexo__area:hover { border-color:var(--brand-400); background:var(--brand-50); }
.cham-anexo__area input { position:absolute; opacity:0; width:0; height:0; }
.cham-anexo__area:focus-within { outline:2px solid var(--brand-400); outline-offset:2px; }
.cham-anexo__ic { display:flex; color:var(--brand-600); flex-shrink:0; }
.cham-anexo__titulo { display:block; font-size:13px; font-weight:500; color:var(--ink); }
.cham-anexo__sub { display:block; font-size:11.5px; line-height:1.45; color:var(--ink-faint); }
.cham-anexo__lista { list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; }
.cham-anexo__item { font-size:11.5px; color:var(--ink-soft); }
.cham-anexo__item--erro { color:var(--status-atrasado); font-weight:500; }

/* --- A conversa ------------------------------------------------------------- */
.cham-conversa { display:flex; flex-direction:column; gap:14px; margin-top:18px; }
.cham-msg { display:flex; gap:11px; }
.cham-msg__av { display:flex; align-items:center; justify-content:center; width:34px; height:34px; flex-shrink:0;
  border-radius:var(--radius-full); font-size:11.5px; font-weight:600; }
.cham-msg--autor .cham-msg__av { background:var(--surface-muted); color:var(--ink-soft); }
.cham-msg--suporte .cham-msg__av { background:var(--brand-600); color:#fff; }
.cham-msg__corpo { flex:1; min-width:0; padding:13px 16px; border-radius:var(--radius-xl);
  border:1px solid var(--surface-border); background:var(--surface); }
/* A resposta do suporte tem cor propria: a pessoa abre a tela para achar essa
   mensagem, e ela nao pode se perder no meio do que ela mesma escreveu. */
.cham-msg--suporte .cham-msg__corpo { border-color:var(--brand-200); background:color-mix(in srgb, var(--brand-50) 45%, white); }
.cham-msg__head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.cham-msg__autor { font-size:12.5px; font-weight:600; color:var(--ink); }
.cham-msg__hora { font-size:11px; color:var(--ink-faint); flex-shrink:0; }
.cham-msg__txt { margin-top:6px; font-size:13.5px; line-height:1.6; color:var(--ink-soft); }
.cham-msg__txt p { margin:0 0 8px; }
.cham-msg__txt p:last-child { margin-bottom:0; }

.cham-anexos { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.cham-anexo-item { display:flex; align-items:center; gap:9px; padding:8px 11px; max-width:100%;
  border:1px solid var(--surface-border); border-radius:var(--radius); background:var(--surface); color:var(--ink); }
.cham-anexo-item:hover { border-color:var(--brand-400); }
.cham-anexo-item--img { padding:0; overflow:hidden; border-radius:var(--radius-xl); }
.cham-anexo-item__thumb { display:block; max-width:min(320px, 100%); max-height:220px; width:auto; height:auto; }
.cham-anexo-item__ic { display:flex; color:var(--brand-600); flex-shrink:0; }
.cham-anexo-item__nome { display:block; font-size:12.5px; font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:16rem; }
.cham-anexo-item__tam { display:block; font-size:11px; color:var(--ink-faint); }

/* --- Responder -------------------------------------------------------------- */
.cham-responder { margin-top:18px; padding:20px 22px; }
.cham-responder__titulo { font-size:14px; font-weight:600; color:var(--ink); }
.cham-responder__sub { margin:3px 0 14px; font-size:12.5px; line-height:1.5; color:var(--ink-faint); }
.cham-responder__acoes { display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-top:16px; }
.check-inline { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-soft); cursor:pointer; }
.check-inline input { width:15px; height:15px; accent-color:var(--brand-600); }

/* --- Tela do suporte -------------------------------------------------------- */
.cham-admin { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 19rem); gap:20px; align-items:start; }
@media (max-width:1000px) { .cham-admin { grid-template-columns:minmax(0, 1fr); } }
.cham-lateral { display:flex; flex-direction:column; gap:12px; }
.cham-lateral .card { padding:16px 18px; }
.cham-lateral__titulo { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.cham-lateral__val { margin-top:6px; font-size:14px; font-weight:600; color:var(--ink); }
.cham-lateral__sub { margin-top:2px; font-size:12px; color:var(--ink-faint); word-break:break-word; }
.cham-lateral__lista { margin:12px 0 0; display:flex; flex-direction:column; gap:8px; }
.cham-lateral__lista > div { display:flex; justify-content:space-between; gap:10px; font-size:12px; }
.cham-lateral__lista dt { color:var(--ink-faint); flex-shrink:0; }
.cham-lateral__lista dd { margin:0; color:var(--ink); text-align:right; min-width:0; }
.cham-lateral__quebra { word-break:break-all; font-size:11px; }
.cham-responder__acoes--fim { justify-content:flex-end; }
.cham-resolver { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:14px; padding:12px 16px; border-radius:var(--radius-xl);
  border:1px dashed var(--surface-border); font-size:12.5px; color:var(--ink-faint); }

/* Barra de uso do disco do banco, no painel da Administração. O número sozinho
   ("120 MB") não diz se é muito; a barra mostra a proporção de relance. */
.banco-barra { height:6px; margin-top:8px; border-radius:var(--radius-full); background:var(--surface-muted); overflow:hidden; }
.banco-barra > span { display:block; height:100%; border-radius:var(--radius-full); background:currentColor; opacity:.75; }