/* ============================================================
   VITALUA — Design system compartilhado (módulos do sistema)
   ============================================================ */
@import url('sidebar.css?v=8');   /* menu lateral = fonte única compartilhada com a agenda (?v= força refresh do @import em cache) */
:root{
  --verde-900:#133b32; --verde-700:#1f5d4f; --verde-500:#2e8b74; --verde-100:#e3f1ec; --verde-50:#f0f7f4;
  --areia-50:#faf7f1; --areia-100:#f3ede2;
  --coral:#e8825e; --coral-700:#d96a44; --coral-100:#fdeee6;
  --tinta:#233029; --tinta-suave:#5d6b63; --tinta-fraca:#8a958e;
  --branco:#fff; --linha:#e6e2d8; --linha-forte:#d5d0c4;

  --st-aberto-bg:#fff7e0; --st-aberto-bd:#e2b53e; --st-aberto-tx:#7c5b08;
  --st-conf-bg:#e8f1fe;   --st-conf-bd:#4a8fe0;   --st-conf-tx:#1d4f9c;
  --st-fin-bg:#e4f5ea;    --st-fin-bd:#3fae6a;    --st-fin-tx:#1b6b3a;
  --st-falta-bg:#fdecec;  --st-falta-bd:#e25555;  --st-falta-tx:#9c2222;
  --st-just-bg:#fff0e8;   --st-just-bd:#e8895e;   --st-just-tx:#94431a;
  --st-desm-bg:#f1f2f0;   --st-desm-bd:#a8b0aa;   --st-desm-tx:#5b655e;

  --sombra-card:0 1px 2px rgba(19,59,50,.08),0 4px 14px -6px rgba(19,59,50,.14);
  --sombra-pop:0 8px 18px -6px rgba(19,59,50,.22),0 24px 60px -18px rgba(19,59,50,.3);
  --sombra-acao:0 6px 16px -6px rgba(217,106,68,.55); /* sombra do botão primário; recalculada na cor da marca por aplicarMarca() */
  --raio:12px;
  font-size:15px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  font-family:'Inter',system-ui,sans-serif;color:var(--tinta);background:var(--areia-50);
  display:flex;flex-direction:column;
}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font:inherit;color:inherit}
a{color:var(--verde-700)}
:focus-visible{outline:2px solid var(--verde-500);outline-offset:2px;border-radius:6px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#cfc9bc;border-radius:99px;border:2px solid var(--areia-50)}

.ic{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.12em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* O menu lateral (sidebar) vive em assets/sidebar.css (fonte única, importada no topo). */

/* ============ PÁGINA / CABEÇALHO ============ */
.pagina{flex:1;width:100%;max-width:1280px;margin:0 auto;padding:26px 24px 60px}
.pag-head{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.pag-head .titulos{margin-right:auto}
.pag-head h1{font-family:'Fraunces',Georgia,serif;font-size:1.7rem;color:var(--verde-900);font-weight:600;line-height:1.15}
.pag-head .sub{color:var(--tinta-suave);font-size:.88rem;margin-top:4px}
.pag-acoes{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.86rem;
  padding:9px 16px;border-radius:99px;border:1px solid var(--linha-forte);background:#fff;color:var(--tinta);
  transition:box-shadow .15s,transform .15s;white-space:nowrap;text-decoration:none;
}
.btn:hover{box-shadow:var(--sombra-card)}
.btn.primario{background:var(--coral);border-color:var(--coral);color:#fff;box-shadow:var(--sombra-acao)}
.btn.primario:hover{background:var(--coral-700);transform:translateY(-1px)}
.btn.suave{background:var(--verde-50);border-color:var(--verde-100);color:var(--verde-700)}
.btn.perigo{background:var(--st-falta-bg);border-color:var(--st-falta-bd);color:var(--st-falta-tx)}
.btn .cont{background:var(--verde-700);color:#fff;font-size:.7rem;min-width:18px;height:18px;border-radius:99px;display:grid;place-items:center;padding:0 5px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* KPI chips */
.kpis{display:flex;gap:10px;margin:0 0 16px;flex-wrap:wrap}
.kpi{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:8px 14px;display:flex;align-items:center;gap:10px;min-width:120px}
.kpi .num{font-size:1.2rem;font-weight:800;font-variant-numeric:tabular-nums}
.kpi .rot{font-size:.7rem;color:var(--tinta-suave);line-height:1.2;font-weight:500}
.kpi .pic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:.95rem}

/* ============ FILTROS ============ */
.filtros{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:#fff;border:1px solid var(--linha);
  border-radius:var(--raio);padding:10px 12px;margin-bottom:14px;
}
.filtros .busca{position:relative;flex:1;min-width:220px}
.filtros .busca input{
  width:100%;padding:9px 12px 9px 36px;border:1px solid var(--linha-forte);border-radius:10px;background:var(--areia-50);font-size:.88rem;
}
.filtros .busca input:focus{background:#fff;border-color:var(--verde-500);outline:none;box-shadow:0 0 0 3px var(--verde-100)}
.filtros .busca .ic{position:absolute;left:12px;top:10px;color:var(--tinta-fraca)}
.filtros select{
  padding:9px 32px 9px 12px;border:1px solid var(--linha-forte);border-radius:10px;background:#fff;font-size:.86rem;
  appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6b63' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:14px;
}
.filtros .limpar{color:var(--tinta-fraca);font-size:.82rem;font-weight:600;padding:8px 10px;border-radius:9px;display:inline-flex;gap:6px;align-items:center}
.filtros .limpar:hover{background:var(--areia-100);color:var(--tinta-suave)}

/* filtro rápido em pílula (toggle exclusivo, ex.: estados de conversa no CRM) */
.filtro-pilula{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--linha-forte);background:var(--branco);border-radius:99px;padding:4px 11px;font:inherit;font-size:.74rem;font-weight:600;color:var(--tinta-suave);cursor:pointer;transition:border-color .15s,color .15s}
.filtro-pilula:hover{border-color:var(--verde-500);color:var(--verde-700)}
.filtro-pilula.on{background:var(--verde-700);border-color:var(--verde-700);color:#fff}

/* ============ TABELA ============ */
.tabela-wrap{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden}
table.tabela{width:100%;border-collapse:collapse;font-size:.88rem}
.tabela thead th{
  text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--tinta-fraca);
  font-weight:700;padding:11px 14px;border-bottom:1px solid var(--linha);background:var(--areia-50);white-space:nowrap;
}
.tabela thead th.ord{cursor:pointer;user-select:none}
.tabela thead th.ord:hover{color:var(--verde-700)}
.tabela tbody td{padding:11px 14px;border-bottom:1px solid var(--linha);vertical-align:middle}
.tabela tbody tr:last-child td{border-bottom:none}
.tabela tbody tr{transition:background .12s}
.tabela tbody tr:hover{background:var(--verde-50)}
.tabela .num{font-variant-numeric:tabular-nums}
.tabela .dir{text-align:right}
.tabela .centro{text-align:center}

.avatar{
  width:34px;height:34px;border-radius:50%;display:inline-grid;place-items:center;color:#fff;font-weight:700;
  font-size:.72rem;flex:none;
}
.avatar.sm{width:24px;height:24px;font-size:.6rem}
.celula-id{display:flex;align-items:center;gap:11px;min-width:0}
.celula-id .nm{font-weight:600;line-height:1.25}
.celula-id .det{font-size:.74rem;color:var(--tinta-suave);margin-top:1px}

.chip{
  display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:600;border-radius:99px;
  padding:3px 10px;border:1px solid var(--linha-forte);background:var(--areia-50);color:var(--tinta-suave);white-space:nowrap;
}
.chip .dot{width:8px;height:8px;border-radius:50%;flex:none;background:currentColor;opacity:.7}
.chip.verde{background:var(--st-fin-bg);border-color:var(--st-fin-bd);color:var(--st-fin-tx)}
.chip.amarelo{background:var(--st-aberto-bg);border-color:var(--st-aberto-bd);color:var(--st-aberto-tx)}
.chip.vermelho{background:var(--st-falta-bg);border-color:var(--st-falta-bd);color:var(--st-falta-tx)}
.chip.azul{background:var(--st-conf-bg);border-color:var(--st-conf-bd);color:var(--st-conf-tx)}
.chip.cinza{background:var(--st-desm-bg);border-color:var(--st-desm-bd);color:var(--st-desm-tx)}

/* switch de status */
.switch{position:relative;width:38px;height:22px;display:inline-block;cursor:pointer}
.switch input{opacity:0;width:0;height:0}
.switch .pista{
  position:absolute;inset:0;border-radius:99px;background:#cfd6d1;transition:background .18s;
}
.switch .pista::after{
  content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;
  transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.switch input:checked+.pista{background:var(--verde-500)}
.switch input:checked+.pista::after{transform:translateX(16px)}
.switch input:focus-visible+.pista{outline:2px solid var(--verde-500);outline-offset:2px}

/* ações por linha */
.acoes-linha{display:flex;gap:4px;justify-content:flex-end}
.acao-ic{
  width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--tinta-fraca);font-size:.92rem;
}
.acao-ic:hover{background:var(--verde-100);color:var(--verde-700)}
.acao-ic.perigo:hover{background:var(--st-falta-bg);color:var(--st-falta-tx)}

/* barra de progresso (sessões) */
.prog{height:6px;width:90px;background:var(--areia-100);border-radius:99px;overflow:hidden;display:inline-block;vertical-align:middle}
.prog i{display:block;height:100%;background:var(--verde-500);border-radius:99px}
.prog-rot{font-size:.78rem;font-weight:700;color:var(--tinta-suave);font-variant-numeric:tabular-nums;margin-right:7px}

/* vazio / rodapé de tabela */
.vazio{padding:46px 20px;text-align:center;color:var(--tinta-fraca)}
.vazio .ic{font-size:1.9rem;margin-bottom:8px;color:var(--linha-forte)}
.vazio b{display:block;color:var(--tinta-suave);font-size:.95rem;margin-bottom:3px}
.vazio span{font-size:.83rem}
.tab-rodape{
  display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--linha);
  font-size:.8rem;color:var(--tinta-suave);background:var(--areia-50);
}
.tab-rodape .pag-nav{margin-left:auto;display:flex;gap:4px}
.tab-rodape .pag-nav button{
  min-width:30px;height:30px;border-radius:8px;border:1px solid var(--linha-forte);background:#fff;font-size:.8rem;font-weight:600;color:var(--tinta-suave);padding:0 8px;
}
.tab-rodape .pag-nav button.on{background:var(--verde-700);border-color:var(--verde-700);color:#fff}
.tab-rodape .pag-nav button:disabled{opacity:.4;cursor:default}

/* ============ MODAL ============ */
.veu{position:fixed;inset:0;background:rgba(19,38,32,.45);backdrop-filter:blur(2px);z-index:100;display:none;align-items:center;justify-content:center;padding:20px}
.veu.aberto{display:flex}
.modal{
  width:560px;max-width:100%;max-height:92vh;overflow:auto;background:#fff;border-radius:20px;box-shadow:var(--sombra-pop);
  animation:pop .16s ease-out;
}
/* modal larga (ex.: cadastro de paciente aberto a partir da conversa: 2-3 colunas, menos rolagem) */
.modal.modal-larga{width:min(1040px,96vw)}
@keyframes pop{from{opacity:0;transform:translateY(5px) scale(.98)}to{opacity:1;transform:none}}
.modal-head{padding:18px 22px 0;display:flex;align-items:center;justify-content:space-between;gap:10px}
.modal-head h2{font-family:'Fraunces',Georgia,serif;font-size:1.2rem;color:var(--verde-900)}
.modal-corpo{padding:14px 22px 22px;display:grid;gap:13px}
.modal form{display:contents}
.secao{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--verde-700);font-weight:800;
  border-bottom:1px solid var(--linha);padding-bottom:5px;margin-top:6px}
.campo label{display:block;font-size:.74rem;font-weight:700;color:var(--tinta-suave);margin-bottom:5px;text-transform:uppercase;letter-spacing:.04em}
.campo input,.campo select,.campo textarea{
  width:100%;padding:9px 12px;border:1px solid var(--linha-forte);border-radius:10px;background:var(--areia-50);font-size:.9rem;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{background:#fff;border-color:var(--verde-500);outline:none;box-shadow:0 0 0 3px var(--verde-100)}
.campo .dica{font-size:.72rem;color:var(--tinta-fraca);margin-top:4px}
.grade-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grade-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.modal-acoes{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}
.pop-x{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--tinta-fraca)}
.pop-x:hover{background:var(--areia-100)}
/* Seletor de foto (perfil do usuário: upload OU webcam) — usado no login (1º acesso) e no menu da conta */
.foto-picker{display:grid;justify-items:center;gap:12px}
.fp-prev{width:96px;height:96px;border-radius:50%;background:var(--areia-100);color:var(--tinta-fraca);display:grid;place-items:center;font-weight:800;font-size:1.5rem;overflow:hidden;border:2px solid var(--linha)}
.fp-prev.tem{border-color:var(--verde-500)}
.fp-prev img{width:100%;height:100%;object-fit:cover}
.fp-cam{display:grid;justify-items:center;gap:8px}
.fp-cam video{width:200px;height:200px;object-fit:cover;border-radius:50%;background:#000;transform:scaleX(-1)}
.fp-cam-acoes,.fp-acoes{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.foto-picker .btn{font-size:.82rem;padding:8px 12px}
.modal.modal-perfil{width:min(430px,100%)}
.check-linha{display:flex;align-items:center;gap:8px;font-size:.86rem;color:var(--tinta-suave);font-weight:500;cursor:pointer}
.check-linha input{accent-color:var(--verde-500);width:16px;height:16px}

/* ============ TOUR GUIADO (VT-tour) ============ */
.tour-trava{position:fixed;inset:0;z-index:199}
.tour-foco{position:fixed;z-index:200;border-radius:10px;box-shadow:0 0 0 9999px rgba(19,38,32,.55);pointer-events:none;transition:left .25s,top .25s,width .25s,height .25s}
.tour-card{position:fixed;z-index:201;width:330px;max-width:calc(100vw - 24px);background:var(--branco);border:1px solid var(--linha);border-radius:12px;box-shadow:var(--sombra-pop);padding:15px 16px}
.tour-card h4{font-family:'Fraunces',Georgia,serif;color:var(--verde-900);font-size:1.08rem;margin:3px 0 6px}
.tour-card p{font-size:.86rem;color:var(--tinta-suave);line-height:1.5;margin:0 0 13px}
.tour-acoes{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.tour-pular{margin-right:auto;border:none;background:none;color:var(--tinta-fraca);font:inherit;font-size:.78rem;cursor:pointer;padding:4px 2px}
.tour-pular:hover{color:var(--tinta-suave);text-decoration:underline}

/* tooltip imediato (VT-tip): [data-tip] abre balão em ~0,15s, sem o delay nativo do title.
   NÃO usar dentro de container com overflow (lista com scroll corta o balão): ali fica o title. */
[data-tip]{position:relative}
[data-tip]::after{
  content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(2px);
  background:var(--verde-900);color:#fff;font-size:.72rem;font-weight:500;line-height:1.45;padding:7px 10px;border-radius:8px;
  width:max-content;max-width:260px;white-space:normal;text-align:left;box-shadow:var(--sombra-pop);
  opacity:0;visibility:hidden;pointer-events:none;z-index:120;
  transition:opacity .15s ease,transform .15s ease,visibility 0s linear .3s;
}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition-delay:.15s}
[data-tip].tip-baixo::after{bottom:auto;top:calc(100% + 8px)}

/* cor (especialidades) */
.cor-opcoes{display:flex;gap:8px;flex-wrap:wrap}
.cor-bola{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid transparent;display:inline-block}
.cor-bola.sel{border-color:var(--verde-900);box-shadow:0 0 0 2px #fff inset}

/* ============ ABAS (páginas-hub) ============ */
.abas{display:flex;gap:2px;border-bottom:2px solid var(--linha);margin-bottom:18px;overflow-x:auto;flex-wrap:wrap}
.aba{
  padding:10px 16px;font-weight:600;font-size:.88rem;color:var(--tinta-suave);white-space:nowrap;
  border-bottom:3px solid transparent;margin-bottom:-2px;border-radius:10px 10px 0 0;display:inline-flex;align-items:center;gap:7px;text-decoration:none;
}
.aba:hover{background:var(--verde-50);color:var(--verde-700)}
.aba.on{color:var(--verde-700);border-bottom-color:var(--coral)}
.aba .cont{background:var(--areia-100);color:var(--tinta-suave);font-size:.7rem;min-width:18px;height:18px;border-radius:99px;display:grid;place-items:center;padding:0 5px}
.aba.on .cont{background:var(--verde-100);color:var(--verde-700)}

/* ============ NOTIFICAÇÕES (sino) ============
   Estilos movidos para o sidebar.css (fonte única do menu, linkado também pela agenda). */

/* ============ TIMELINE (ficha do paciente) ============ */
.timeline{position:relative;padding-left:26px}
.timeline::before{content:'';position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--linha)}
.tl-item{position:relative;padding:0 0 16px}
.tl-item .tl-dot{
  position:absolute;left:-26px;top:3px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:2px solid var(--verde-500);color:var(--verde-700);font-size:.6rem;
}
.tl-item .tl-data{font-size:.72rem;font-weight:700;color:var(--tinta-fraca);text-transform:uppercase;letter-spacing:.04em}
.tl-item .tl-tit{font-size:.88rem;font-weight:600;margin-top:1px}
.tl-item .tl-det{font-size:.8rem;color:var(--tinta-suave);margin-top:2px}

/* ============ TOASTS ============ */
.toasts{position:fixed;bottom:18px;right:18px;z-index:200;display:grid;gap:8px;justify-items:end}
.toast{
  background:var(--verde-900);color:#fff;font-size:.84rem;font-weight:500;padding:11px 16px;border-radius:12px;
  box-shadow:var(--sombra-pop);display:flex;align-items:center;gap:9px;animation:pop .18s ease-out;max-width:360px;
}
.toast .ic{color:#8fd4be}

/* ============================================================
   COMPONENTES PROMOVIDOS (auditoria 04/07/2026)
   Padrões que existiam duplicados em 2+ telas, agora canônicos.
   Catálogo visual com IDs: styleguide.html
   ============================================================ */

/* cartão de conteúdo genérico (gráficos, blocos de ficha) — VT-cartao */
.cartao{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:18px}
.cartao-tit{font-family:'Fraunces',Georgia,serif;font-size:1.05rem;color:var(--verde-900);margin-bottom:12px}

/* row-card de lista (fila de senhas, listas fora de tabela) — VT-item-lista */
.item-lista{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--linha);
  border-radius:var(--raio);padding:12px 14px;box-shadow:var(--sombra-card);width:100%;text-align:left;transition:border-color .12s}
.item-lista:hover{border-color:var(--verde-500)}
.item-lista.is-next{border-color:var(--verde-700);box-shadow:0 0 0 2px var(--verde-100)}
.item-lista.alerta{border-color:var(--st-falta-bd);background:var(--st-falta-bg)}

/* variantes de chip — VT-chip-marca / VT-chip-mini */
.chip.marca{background:var(--verde-100);border-color:var(--verde-100);color:var(--verde-700)}
.chip.mini{padding:1px 6px;font-size:.62rem}

/* variantes de controle — VT-btn-bloco / VT-acao-ic-mini / VT-switch-grande */
.btn.bloco{width:100%;justify-content:center;font-size:1.05rem;padding:13px 16px}
.acao-ic.mini{width:24px;height:24px;border-radius:6px;font-size:.8rem}
.switch.grande{width:52px;height:30px}
.switch.grande .pista::after{width:24px;height:24px}
.switch.grande input:checked+.pista::after{transform:translateX(22px)}

/* estado vazio em caixa tracejada — VT-vazio-caixa */
.vazio.caixa{color:var(--tinta-suave);background:var(--areia-50);border:1px dashed var(--linha-forte);border-radius:var(--raio);padding:28px}

/* erro de formulário — VT-alerta-erro */
.alerta-erro{background:var(--st-falta-bg);border:1px solid var(--st-falta-bd);color:var(--st-falta-tx);
  border-radius:10px;padding:10px 12px;font-size:.86rem;display:none}
.alerta-erro.on{display:block}

/* micro-rótulo uppercase (spec única de eyebrow) — VT-eyebrow */
.eyebrow{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--tinta-fraca)}

/* código de senha/protocolo em tabela — VT-cel-cod */
.cel-cod{font-family:'Fraunces',Georgia,serif;font-weight:700;color:var(--verde-900)}

/* tabela com rolagem interna — VT-tabela (modificador) */
.tabela-wrap.rolagem{max-height:420px;overflow:auto}

/* defaults do ícone de KPI (nenhuma tela usa outra cor) */
.kpi .pic{color:var(--verde-700);background:var(--verde-100)}

/* multi-seleção em pílulas — VT-chips-check (spec da auditoria 04/07) */
.chips-check{display:flex;gap:7px;flex-wrap:wrap}
.chips-check label{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--linha-forte);border-radius:99px;padding:6px 12px;font-size:.81rem;font-weight:600;cursor:pointer;background:var(--branco)}
.chips-check label:has(input:checked){background:var(--verde-100);border-color:var(--verde-500);color:var(--verde-700)}
.chips-check input{accent-color:var(--verde-700)}

/* slot de vaga do Agendar Rápido — VT-slot-vaga */
.slot-vaga{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:#fff;
  border:1px solid var(--linha-forte);border-radius:10px;padding:8px 11px;font-size:.84rem;
  transition:border-color .12s, box-shadow .12s}
.slot-vaga .hora{font-weight:600;font-variant-numeric:tabular-nums}
.slot-vaga .quem{color:var(--tinta-suave);font-size:.78rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot-vaga:hover{border-color:var(--verde-500)}
.slot-vaga.sel{border-color:var(--verde-500);background:var(--verde-50);box-shadow:0 0 0 2px var(--verde-100)}
.slot-vaga.off{opacity:.35;pointer-events:none}
.slot-vaga.mini{justify-content:center;padding:7px 4px}  /* só a hora, pra grade compacta (nome do profissional vai no agrupador) */

/* cartão de configuração com switch — VT-campo-switch */
.campo-switch{display:flex;align-items:center;gap:14px;border:1px solid var(--linha);border-radius:10px;padding:10px 13px}
.campo-switch.tonal{background:var(--areia-50)}
.campo-switch b{display:block;flex:1;font-size:.86rem}
.campo-switch span{font-size:.76rem;color:var(--tinta-suave)}

/* ============ RESPONSIVO ============ (o menu lateral é responsivo no sidebar.css) */
@media (max-width:900px){
  .pagina{padding:22px 18px 50px}
  .tabela-wrap{overflow-x:auto}
  table.tabela{min-width:680px}
}

/* ============ MOBILE (celular): sidebar -> barra superior + menu ============ */
@media (max-width:760px){
  :root{font-size:14.5px}

  /* (o menu lateral vira barra superior no sidebar.css) */

  /* cabeçalho de página e ações empilham */
  .pag-head h1{font-size:1.4rem}
  .pag-acoes{width:100%}
  .pag-acoes .btn{flex:1 1 auto;justify-content:center;min-height:42px}

  /* KPIs deslizam na horizontal */
  .kpis{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .kpi{flex:none;min-width:132px}

  /* filtros empilham */
  .filtros{padding:10px}
  .filtros .busca{min-width:100%}
  .filtros select{flex:1 1 44%}

  /* formulários: grades viram coluna única */
  .grade-2,.grade-3{grid-template-columns:1fr}

  /* modais: folha inteira, ações em botões largos */
  .veu{padding:0;align-items:flex-end}
  .modal{width:100% !important;max-height:95vh;border-radius:20px 20px 0 0}
  .modal-acoes{flex-wrap:wrap}
  .modal-acoes .btn{flex:1 1 auto;justify-content:center;min-height:42px}

  /* alvos de toque maiores */
  .acao-ic{width:36px;height:36px}
  .acoes-linha{gap:2px}

  /* toasts na largura da tela */
  .toasts{left:12px;right:12px;justify-items:stretch}
  .toast{max-width:none}
}