/* ============================================================
   COCKPIT — design/componentes.css (Entrega 2)
   Componentes prefixo .c- · estados · densidade · mobile.
   Depende de tokens.css.
   ============================================================ */

/* ============================================================
   SHELL — trilho de módulos + sidebar + topbar + conteúdo + painel
   ============================================================ */
.c-shell {
  display: grid;
  grid-template-columns: var(--trilho-larg) var(--sidebar-larg) 1fr;
  grid-template-rows: 100dvh;
  overflow: hidden;
}
.c-shell.sidebar-fechada { grid-template-columns: var(--trilho-larg) 0 1fr; }
.c-shell.sidebar-fechada .c-sidebar { visibility: hidden; }

/* ---------- Trilho de módulos (56px, a "seletora de marchas") ---------- */
.c-trilho {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--esp-2); padding: var(--esp-3) 0;
  background: var(--fundo-1); border-right: 1px solid var(--borda-1);
  z-index: 30;
}
.c-trilho__mod {
  position: relative; width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--raio-md); color: var(--texto-2);
  transition: background var(--dur-1) var(--curva), color var(--dur-1) var(--curva);
}
.c-trilho__mod:hover { background: var(--fundo-2); color: var(--texto-1); }
.c-trilho__mod.is-ativo { background: var(--acento-suave); color: var(--acento); }
.c-trilho__mod.is-ativo::before {
  content: ''; position: absolute; left: -8px; top: 8px; bottom: 8px;
  width: 3px; border-radius: var(--raio-full); background: var(--acento);
}
.c-trilho__mod svg { width: 20px; height: 20px; }
/* cada módulo com a sua cor no trilho (mesmo inativo, no hover) */
.c-trilho__mod[data-mod="pulso"]:hover,   .c-trilho__mod[data-mod="pulso"].is-ativo   { color: var(--mod-pulso); }
.c-trilho__mod[data-mod="batem"]:hover,   .c-trilho__mod[data-mod="batem"].is-ativo   { color: var(--mod-batem); }
.c-trilho__mod[data-mod="encanta"]:hover, .c-trilho__mod[data-mod="encanta"].is-ativo { color: var(--mod-encanta); }
.c-trilho__mod[data-mod="flui"]:hover,    .c-trilho__mod[data-mod="flui"].is-ativo    { color: var(--mod-flui); }
.c-trilho__mod[data-mod="maestro"]:hover, .c-trilho__mod[data-mod="maestro"].is-ativo { color: var(--texto-1); }
.c-trilho__rodape { margin-top: auto; display: flex; flex-direction: column; gap: var(--esp-2); align-items: center; }

/* ---------- Sidebar do módulo (240px, abas por menu lateral) ---------- */
.c-sidebar {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--esp-3) var(--esp-2);
  background: var(--fundo-1); border-right: 1px solid var(--borda-1);
  overflow-y: auto; z-index: 20;
}
.c-sidebar__titulo {
  padding: var(--esp-1) var(--esp-3) var(--esp-3);
  font-size: var(--fonte-md); font-weight: 600; color: var(--texto-1);
}
.c-sidebar__grupo {
  padding: var(--esp-3) var(--esp-3) var(--esp-1);
  font-size: var(--fonte-xs); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--texto-3);
}
.c-sidebar__item {
  position: relative; display: flex; align-items: center; gap: var(--esp-2);
  padding: 0 var(--esp-3); height: var(--altura-controle);
  border-radius: var(--raio-sm); color: var(--texto-2);
  font-size: var(--fonte-base); cursor: pointer; user-select: none;
  transition: background var(--dur-1) var(--curva), color var(--dur-1) var(--curva);
  width: 100%; text-align: left;
}
.c-sidebar__item svg { width: 16px; height: 16px; flex: none; }
.c-sidebar__item:hover { background: var(--fundo-2); color: var(--texto-1); }
.c-sidebar__item.is-ativo { background: var(--fundo-3); color: var(--texto-1); font-weight: 500; }
.c-sidebar__item.is-ativo::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 2px; border-radius: var(--raio-full); background: var(--acento);
}
.c-sidebar__item .c-hint { margin-left: auto; }

/* ---------- Corpo (topbar + conteúdo) ---------- */
.c-shell__corpo { display: flex; flex-direction: column; overflow: hidden; }

/* ---------- Topbar (48px — a ÚNICA superfície de vidro) ---------- */
.c-topbar {
  display: flex; align-items: center; gap: var(--esp-3);
  height: var(--topbar-alt); padding: 0 var(--esp-4);
  background: var(--vidro); border-bottom: 1px solid var(--borda-1);
  position: relative; z-index: 10; flex: none;
}
@supports (backdrop-filter: blur(12px)) {
  .c-topbar { backdrop-filter: blur(12px); }
}
.c-topbar__titulo { font-size: var(--fonte-md); font-weight: 600; white-space: nowrap; }
.c-topbar__busca {
  display: flex; align-items: center; gap: var(--esp-2);
  height: 30px; padding: 0 var(--esp-3); margin-left: auto;
  min-width: 220px; border-radius: var(--raio-md);
  background: var(--fundo-2); border: 1px solid var(--borda-1);
  color: var(--texto-3); font-size: var(--fonte-sm);
  transition: border-color var(--dur-1) var(--curva);
}
.c-topbar__busca:hover { border-color: var(--borda-2); color: var(--texto-2); }
.c-topbar__busca .c-hint { margin-left: auto; }
.c-topbar__icone {
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: var(--raio-sm); color: var(--texto-2);
  transition: background var(--dur-1) var(--curva);
}
.c-topbar__icone:hover { background: var(--fundo-2); color: var(--texto-1); }
.c-topbar__icone svg { width: 18px; height: 18px; }

/* ---------- Área de conteúdo ---------- */
.c-conteudo {
  flex: 1; overflow-y: auto; padding: var(--pad-conteudo);
  display: flex; flex-direction: column; gap: var(--esp-secao);
}
.c-conteudo > * { max-width: var(--leitura-larg); width: 100%; margin: 0 auto; }

/* ---------- Hint de atalho inline (assinatura 4) ---------- */
.c-hint {
  font-family: var(--fonte); font-size: var(--fonte-xs);
  padding: 1px 5px; border-radius: 4px;
  background: var(--fundo-3); border: 1px solid var(--borda-1);
  color: var(--texto-3); white-space: nowrap;
}

/* ============================================================
   c-botao
   ============================================================ */
.c-botao {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--esp-2); height: var(--altura-controle);
  padding: 0 var(--esp-3); border-radius: var(--raio-md);
  font-size: var(--fonte-base); font-weight: 500; white-space: nowrap;
  border: 1px solid transparent; user-select: none;
  transition: background var(--dur-1) var(--curva), border-color var(--dur-1) var(--curva),
              transform var(--dur-1) var(--curva), opacity var(--dur-1) var(--curva);
}
.c-botao svg { width: 15px; height: 15px; }
.c-botao:active:not(:disabled) { transform: scale(0.98); }
.c-botao:disabled { opacity: 0.45; pointer-events: none; }
.c-botao--primario { background: var(--acento); color: var(--acento-texto); }
.c-botao--primario:hover { background: var(--acento-forte); }
.c-botao--secundario { background: var(--fundo-1); border-color: var(--borda-2); color: var(--texto-1); }
.c-botao--secundario:hover { background: var(--fundo-2); }
.c-botao--fantasma { color: var(--texto-2); }
.c-botao--fantasma:hover { background: var(--fundo-2); color: var(--texto-1); }
.c-botao--perigo { background: var(--erro-suave); color: var(--erro); }
.c-botao--perigo:hover { background: color-mix(in oklab, var(--erro) 22%, transparent); }
.c-botao .c-hint { margin-left: 2px; }
/* loading: spinner substitui o ícone, largura não pula */
.c-botao.is-loading { pointer-events: none; }
.c-botao.is-loading::before {
  content: ''; width: 13px; height: 13px; flex: none;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: var(--raio-full); animation: c-girar 0.7s linear infinite;
}
.c-botao.is-loading svg { display: none; }
@keyframes c-girar { to { transform: rotate(360deg); } }

/* ============================================================
   c-kpi — card de indicador
   ============================================================ */
.c-kpi-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--gap-kpi);
}
.c-kpi {
  display: flex; flex-direction: column; gap: var(--esp-1);
  padding: var(--pad-kpi); border-radius: var(--raio-md);
  background: var(--fundo-1); border: 1px solid var(--borda-1);
  transition: box-shadow var(--dur-1) var(--curva), border-color var(--dur-1) var(--curva);
  position: relative;
}
.c-kpi[tabindex]:hover { box-shadow: var(--sombra-1); border-color: var(--borda-2); cursor: pointer; }
.c-kpi__label { font-size: var(--fonte-sm); color: var(--texto-2); }
.c-kpi__valor {
  font-size: var(--fonte-xl); line-height: var(--linha-xl); font-weight: 600;
  font-variant-numeric: tabular-nums;
  animation: c-kpi-entra var(--dur-2) var(--curva);
}
@keyframes c-kpi-entra { from { opacity: 0; transform: translateY(4px); } }
.c-kpi__delta {
  display: inline-flex; align-items: center; gap: var(--esp-1);
  font-size: var(--fonte-xs); font-weight: 500;
}
.c-kpi__delta--ok { color: var(--ok); }
.c-kpi__delta--erro { color: var(--erro); }
.c-kpi__delta small { color: var(--texto-3); font-weight: 400; font-size: inherit; }
.c-kpi__spark { position: absolute; right: var(--pad-kpi); bottom: var(--pad-kpi); opacity: 0.9; }
.c-kpi__spark polyline { fill: none; stroke: var(--acento); stroke-width: 1.5; }

/* ============================================================
   c-tabela — o cavalo de batalha
   ============================================================ */
.c-tabela { background: var(--fundo-1); border: 1px solid var(--borda-1); border-radius: var(--raio-md); overflow: hidden; }
.c-tabela__barra {
  display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap;
  padding: var(--esp-3) var(--esp-4); border-bottom: 1px solid var(--borda-1);
}
.c-tabela__busca {
  display: flex; align-items: center; gap: var(--esp-2);
  height: 30px; padding: 0 var(--esp-2); min-width: 180px;
  border-radius: var(--raio-sm); background: var(--fundo-0);
  border: 1px solid var(--borda-2);
}
.c-tabela__busca:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.c-tabela__busca input { border: 0; background: none; outline: none; width: 100%; font-size: var(--fonte-sm); }
.c-tabela__busca svg { width: 14px; height: 14px; color: var(--texto-3); flex: none; }
.c-tabela__rolagem { overflow-x: auto; }
.c-tabela table { width: 100%; border-collapse: collapse; font-size: var(--fonte-base); }
.c-tabela th {
  position: sticky; top: 0; background: var(--fundo-1); z-index: 1;
  text-align: left; font-size: var(--fonte-sm); font-weight: 500; color: var(--texto-2);
  padding: var(--esp-2) var(--pad-celula); border-bottom: 1px solid var(--borda-1);
  white-space: nowrap; user-select: none;
}
.c-tabela th.is-num, .c-tabela td.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.c-tabela td {
  height: var(--altura-linha); padding: 0 var(--pad-celula);
  border-bottom: 1px solid var(--borda-1);
}
.c-tabela tbody tr { transition: background var(--dur-1) var(--curva); cursor: pointer; }
.c-tabela tbody tr:hover { background: var(--fundo-2); }
.c-tabela tbody tr.is-selecionada { background: var(--acento-suave); }
.c-tabela tbody tr:last-child td { border-bottom: 0; }
.c-tabela__rodape {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--esp-2) var(--esp-4); border-top: 1px solid var(--borda-1);
  font-size: var(--fonte-sm); color: var(--texto-2);
}

/* ---------- Chips de filtro ---------- */
.c-chip {
  display: inline-flex; align-items: center; gap: var(--esp-1);
  height: 26px; padding: 0 var(--esp-2); border-radius: var(--raio-full);
  background: var(--fundo-2); border: 1px solid var(--borda-1);
  font-size: var(--fonte-sm); color: var(--texto-2); user-select: none;
  transition: background var(--dur-1) var(--curva), color var(--dur-1) var(--curva);
}
.c-chip:hover { background: var(--fundo-3); color: var(--texto-1); }
.c-chip.is-ativo { background: var(--acento-suave); border-color: var(--acento); color: var(--acento); font-weight: 500; }

/* ============================================================
   c-badge
   ============================================================ */
.c-badge {
  display: inline-flex; align-items: center; gap: var(--esp-1);
  padding: 2px var(--esp-2); border-radius: var(--raio-full);
  font-size: var(--fonte-xs); font-weight: 500; white-space: nowrap;
}
.c-badge--ok     { background: var(--ok-suave);     color: var(--ok); }
.c-badge--alerta { background: var(--alerta-suave); color: var(--alerta); }
.c-badge--erro   { background: var(--erro-suave);   color: var(--erro); }
.c-badge--info   { background: var(--info-suave);   color: var(--info); }
.c-badge--neutro { background: var(--fundo-3);      color: var(--texto-2); }

/* ============================================================
   c-avatar
   ============================================================ */
.c-avatar {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: var(--raio-full);
  background: color-mix(in oklab, var(--acento) 20%, transparent);
  color: var(--acento); font-size: var(--fonte-sm); font-weight: 600;
  user-select: none;
}
.c-avatar--lg { width: 44px; height: 44px; font-size: var(--fonte-md); }

/* ============================================================
   c-agenda ⭐ — grade de tempo × colunas por profissional
   ============================================================ */
.c-agenda {
  background: var(--fundo-1); border: 1px solid var(--borda-1);
  border-radius: var(--raio-md); overflow: hidden;
}
.c-agenda__cabecalho {
  display: grid; grid-template-columns: 56px repeat(var(--agenda-cols, 2), 1fr);
  border-bottom: 1px solid var(--borda-1);
}
.c-agenda__prof {
  display: flex; align-items: center; gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-3); font-size: var(--fonte-sm); font-weight: 500;
  border-left: 1px solid var(--borda-1);
}
.c-agenda__corpo {
  display: grid; grid-template-columns: 56px repeat(var(--agenda-cols, 2), 1fr);
  position: relative; overflow-y: auto; max-height: 560px;
}
.c-agenda__regua { position: relative; }
.c-agenda__hora {
  position: absolute; right: var(--esp-2); transform: translateY(-50%);
  font-size: var(--fonte-xs); color: var(--texto-3); font-variant-numeric: tabular-nums;
}
.c-agenda__coluna {
  position: relative; border-left: 1px solid var(--borda-1);
  /* linhas de 30min: 1min = 1.6px → 30min = 48px */
  background-image: linear-gradient(var(--borda-1) 1px, transparent 1px);
  background-size: 100% 48px;
}
.c-agenda__agora {
  position: absolute; left: 56px; right: 0; height: 2px;
  background: var(--acento); z-index: 3; pointer-events: none;
}
.c-agenda__agora::before {
  content: ''; position: absolute; left: -4px; top: -3px;
  width: 8px; height: 8px; border-radius: var(--raio-full); background: var(--acento);
}

/* ---------- Bloco de compromisso ---------- */
.c-agenda__bloco {
  position: absolute; left: 4px; right: 4px;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: var(--esp-1) var(--esp-2); overflow: hidden;
  border-radius: var(--raio-sm);
  border-left: 3px solid var(--bloco-cor, var(--acento));
  background: color-mix(in oklab, var(--bloco-cor, var(--acento)) 8%, var(--fundo-1));
  cursor: pointer; text-align: left; z-index: 2;
  transition: box-shadow var(--dur-1) var(--curva), transform var(--dur-1) var(--curva);
}
.c-agenda__bloco:hover { box-shadow: var(--sombra-1); z-index: 4; }
.c-agenda__bloco:active { transform: scale(0.99); }
.c-agenda__nome {
  font-size: var(--fonte-sm); font-weight: 600; line-height: 16px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* nome COMPLETO, trunca com tooltip */
}
.c-agenda__meta {
  font-size: var(--fonte-xs); color: var(--texto-2); line-height: 14px;
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.c-agenda__status { position: absolute; top: 3px; right: 4px; font-size: 10px; line-height: 1; }
.c-agenda__status--ok { color: var(--ok); }
.c-agenda__status--aguarda { color: var(--alerta); }
.c-agenda__status--faltou { color: var(--erro); }
.c-agenda__status--atende { color: var(--acento); animation: c-pulsar 1.6s ease-in-out infinite; }
@keyframes c-pulsar { 50% { opacity: 0.35; } }
/* flash de atualização em tempo real */
.c-agenda__bloco.is-flash { animation: c-flash 1s var(--curva); }
@keyframes c-flash { 0% { background: var(--acento-suave); } }

/* ============================================================
   c-painel — painel contextual direito (Telemetria 360)
   ============================================================ */
.c-painel {
  position: fixed; top: 0; right: 0; bottom: 0; width: var(--painel-larg);
  max-width: 100vw; display: flex; flex-direction: column;
  background: var(--fundo-1); border-left: 1px solid var(--borda-1);
  box-shadow: var(--sombra-2); z-index: 50;
  transform: translateX(100%); visibility: hidden;
  transition: transform var(--dur-3) var(--curva), visibility 0s var(--dur-3);
}
.c-painel.is-aberto { transform: translateX(0); visibility: visible; transition: transform var(--dur-3) var(--curva); }
.c-painel__header {
  display: flex; align-items: center; gap: var(--esp-3);
  padding: var(--esp-4); border-bottom: 1px solid var(--borda-1);
}
.c-painel__titulo { font-size: var(--fonte-md); font-weight: 600; line-height: 1.2; }
.c-painel__sub { font-size: var(--fonte-sm); color: var(--texto-2); }
.c-painel__corpo { flex: 1; overflow-y: auto; padding: var(--esp-4); display: flex; flex-direction: column; gap: var(--esp-3); }
.c-painel__secao {
  background: var(--fundo-0); border: 1px solid var(--borda-1);
  border-radius: var(--raio-md); padding: var(--esp-3);
}
.c-painel__secao h3 {
  font-size: var(--fonte-xs); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--texto-3); margin-bottom: var(--esp-2);
}
.c-painel__rodape {
  display: flex; gap: var(--esp-2); padding: var(--esp-3) var(--esp-4);
  border-top: 1px solid var(--borda-1);
}
.c-painel__rodape .c-botao { flex: 1; }
.c-painel__linha {
  display: flex; justify-content: space-between; align-items: center; gap: var(--esp-2);
  padding: var(--esp-1) 0; font-size: var(--fonte-base);
}
.c-painel__linha > span:first-child { color: var(--texto-2); font-size: var(--fonte-sm); }

/* scrim compartilhado (painel <1280px, drawer, modal) */
.c-scrim {
  position: fixed; inset: 0; background: var(--scrim); z-index: 40;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-3) var(--curva), visibility 0s var(--dur-3);
}
.c-scrim.is-aberto { opacity: 1; visibility: visible; transition: opacity var(--dur-3) var(--curva); }
@media (min-width: 1280.1px) { .c-scrim--painel { display: none; } }

/* ============================================================
   c-drawer — edição (bloqueia o fundo)
   ============================================================ */
.c-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: var(--drawer-larg);
  max-width: 100vw; display: flex; flex-direction: column;
  background: var(--fundo-1); border-left: 1px solid var(--borda-1);
  box-shadow: var(--sombra-3); z-index: 60;
  transform: translateX(100%); visibility: hidden;
  transition: transform var(--dur-3) var(--curva), visibility 0s var(--dur-3);
}
.c-drawer.is-aberto { transform: translateX(0); visibility: visible; transition: transform var(--dur-3) var(--curva); }
.c-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--esp-4); border-bottom: 1px solid var(--borda-1);
  font-size: var(--fonte-md); font-weight: 600;
}
.c-drawer__corpo { flex: 1; overflow-y: auto; padding: var(--esp-4); }
.c-drawer__rodape { display: flex; justify-content: flex-end; gap: var(--esp-2); padding: var(--esp-3) var(--esp-4); border-top: 1px solid var(--borda-1); }

/* ============================================================
   c-modal — SÓ confirmação destrutiva / decisão bloqueante
   ============================================================ */
.c-modal {
  position: fixed; inset: 0; display: grid; place-items: center;
  z-index: 70; visibility: hidden;
}
.c-modal.is-aberto { visibility: visible; }
.c-modal__caixa {
  width: min(440px, calc(100vw - 32px));
  background: var(--fundo-1); border: 1px solid var(--borda-1);
  border-radius: var(--raio-lg); box-shadow: var(--sombra-3);
  padding: var(--esp-5); z-index: 71;
  opacity: 0; transform: scale(0.96);
  transition: opacity var(--dur-2) var(--curva), transform var(--dur-2) var(--curva);
}
.c-modal.is-aberto .c-modal__caixa { opacity: 1; transform: scale(1); }
.c-modal__titulo { font-size: var(--fonte-md); font-weight: 600; margin-bottom: var(--esp-2); }
.c-modal__corpo { color: var(--texto-2); margin-bottom: var(--esp-5); }
.c-modal__acoes { display: flex; justify-content: flex-end; gap: var(--esp-2); }

/* ============================================================
   c-toast — par obrigatório do optimistic UI
   ============================================================ */
.c-toasts {
  position: fixed; right: var(--esp-4); bottom: var(--esp-4);
  display: flex; flex-direction: column; gap: var(--esp-2);
  z-index: 90; pointer-events: none;
}
.c-toast {
  display: flex; align-items: center; gap: var(--esp-2);
  min-width: 260px; max-width: 380px; padding: var(--esp-3) var(--esp-3);
  background: var(--fundo-2); border: 1px solid var(--borda-1);
  border-left: 3px solid var(--info); border-radius: var(--raio-md);
  box-shadow: var(--sombra-2); font-size: var(--fonte-base);
  pointer-events: auto;
  animation: c-toast-entra var(--dur-2) var(--curva);
}
@keyframes c-toast-entra { from { opacity: 0; transform: translateY(8px); } }
.c-toast.is-saindo { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-2) var(--curva), transform var(--dur-2) var(--curva); }
.c-toast--sucesso { border-left-color: var(--ok); }
.c-toast--erro    { border-left-color: var(--erro); }
.c-toast__msg { flex: 1; }
.c-toast__acao {
  color: var(--acento); font-weight: 600; font-size: var(--fonte-sm);
  padding: var(--esp-1) var(--esp-2); border-radius: var(--raio-sm);
}
.c-toast__acao:hover { background: var(--acento-suave); }
.c-toast__fechar { color: var(--texto-3); padding: var(--esp-1); border-radius: var(--raio-sm); }
.c-toast__fechar:hover { color: var(--texto-1); }

/* ============================================================
   c-palette — paleta de comando (assinatura 1)
   ============================================================ */
.c-palette {
  position: fixed; inset: 0; z-index: 80;
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: 20vh; visibility: hidden;
}
.c-palette.is-aberta { visibility: visible; }
.c-palette__caixa {
  width: min(560px, calc(100vw - 32px));
  background: var(--fundo-1); border: 1px solid var(--borda-1);
  border-radius: var(--raio-lg); box-shadow: var(--sombra-3);
  overflow: hidden; z-index: 81; display: flex; flex-direction: column;
  max-height: min(420px, 60vh);
  opacity: 0; transform: scale(0.98) translateY(-4px);
  transition: opacity var(--dur-2) var(--curva), transform var(--dur-2) var(--curva);
}
.c-palette.is-aberta .c-palette__caixa { opacity: 1; transform: none; }
.c-palette__input {
  width: 100%; border: 0; outline: none; background: none;
  padding: var(--esp-4); font-size: var(--fonte-md);
  border-bottom: 1px solid var(--borda-1);
}
.c-palette__lista { overflow-y: auto; padding: var(--esp-2); flex: 1; }
.c-palette__grupo {
  padding: var(--esp-2) var(--esp-2) var(--esp-1);
  font-size: var(--fonte-xs); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--texto-3);
}
.c-palette__item {
  display: flex; align-items: center; gap: var(--esp-2); width: 100%;
  padding: var(--esp-2) var(--esp-2); border-radius: var(--raio-sm);
  font-size: var(--fonte-base); color: var(--texto-1); text-align: left;
  cursor: pointer;
}
.c-palette__item svg { width: 15px; height: 15px; color: var(--texto-3); flex: none; }
.c-palette__item.is-focada { background: var(--acento-suave); }
.c-palette__item .c-hint { margin-left: auto; }
.c-palette__vazio { padding: var(--esp-5); text-align: center; color: var(--texto-3); }
.c-palette__rodape {
  display: flex; gap: var(--esp-4); padding: var(--esp-2) var(--esp-4);
  border-top: 1px solid var(--borda-1);
  font-size: var(--fonte-xs); color: var(--texto-3);
}

/* ============================================================
   c-skeleton — geometria exata, shimmer
   ============================================================ */
.c-skeleton {
  position: relative; overflow: hidden;
  background: var(--fundo-2); border-radius: var(--raio-sm);
  min-height: 12px;
}
.c-skeleton::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.05), transparent);
  animation: c-shimmer 1.4s infinite;
}
@keyframes c-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .c-skeleton::after { animation: none; } }

/* ============================================================
   c-tabs — sublinhado que desliza
   ============================================================ */
.c-tabs { display: flex; gap: var(--esp-1); position: relative; }
.c-tabs__item {
  position: relative; padding: var(--esp-1) var(--esp-3);
  height: var(--altura-controle); display: inline-flex; align-items: center; gap: var(--esp-1);
  font-size: var(--fonte-base); color: var(--texto-2); border-radius: var(--raio-sm);
  transition: color var(--dur-1) var(--curva);
}
.c-tabs__item:hover { color: var(--texto-1); }
.c-tabs__item.is-ativa { color: var(--texto-1); font-weight: 500; }
.c-tabs__item.is-ativa::after {
  content: ''; position: absolute; left: var(--esp-2); right: var(--esp-2); bottom: -1px;
  height: 2px; border-radius: var(--raio-full); background: var(--acento);
}
.c-tabs__item:disabled { opacity: 0.45; pointer-events: none; }
.c-tabs__cont { font-size: var(--fonte-xs); color: var(--texto-3); }

/* ============================================================
   c-form
   ============================================================ */
.c-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-4); }
.c-form__campo { display: flex; flex-direction: column; gap: var(--esp-1); }
.c-form__campo--cheio { grid-column: 1 / -1; }
.c-form__label { font-size: var(--fonte-sm); font-weight: 500; color: var(--texto-1); }
.c-form__input, .c-form select, .c-form textarea {
  height: var(--altura-input); padding: 0 var(--esp-3);
  background: var(--fundo-0); border: 1px solid var(--borda-2);
  border-radius: var(--raio-sm); font-size: var(--fonte-base); outline: none;
  transition: border-color var(--dur-1) var(--curva), box-shadow var(--dur-1) var(--curva);
  width: 100%;
}
.c-form textarea { height: auto; padding: var(--esp-2) var(--esp-3); resize: vertical; }
.c-form__input:focus, .c-form select:focus, .c-form textarea:focus {
  border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave);
}
.c-form__input:disabled { opacity: 0.45; }
.c-form__campo.is-erro .c-form__input { border-color: var(--erro); box-shadow: 0 0 0 3px var(--erro-suave); }
.c-form__ajuda { font-size: var(--fonte-xs); color: var(--texto-3); }
.c-form__erro { font-size: var(--fonte-xs); color: var(--erro); }

/* ============================================================
   c-vazio — estado vazio com CTA
   ============================================================ */
.c-vazio {
  display: flex; flex-direction: column; align-items: center; gap: var(--esp-3);
  padding: var(--esp-7) var(--esp-5); text-align: center; color: var(--texto-3);
}
.c-vazio svg { width: 40px; height: 40px; opacity: 0.5; }

/* ============================================================
   c-dropdown (menu "⋯")
   ============================================================ */
.c-dropdown {
  position: absolute; min-width: 180px; padding: var(--esp-1);
  background: var(--fundo-2); border: 1px solid var(--borda-1);
  border-radius: var(--raio-md); box-shadow: var(--sombra-2); z-index: 45;
  transform-origin: top right;
  animation: c-drop var(--dur-2) var(--curva);
}
@keyframes c-drop { from { opacity: 0; transform: scale(0.96); } }
.c-dropdown__item {
  display: flex; align-items: center; gap: var(--esp-2); width: 100%;
  padding: var(--esp-2) var(--esp-3); border-radius: var(--raio-sm);
  font-size: var(--fonte-base); text-align: left; color: var(--texto-1);
}
.c-dropdown__item:hover { background: var(--fundo-3); }

/* ============================================================
   Bottom nav (mobile) + bottom sheet
   ============================================================ */
.c-bottomnav {
  display: none; position: fixed; left: 0; right: 0; bottom: 0;
  height: calc(56px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--vidro); border-top: 1px solid var(--borda-1);
  z-index: 30;
}
@supports (backdrop-filter: blur(12px)) { .c-bottomnav { backdrop-filter: blur(12px); } }
.c-bottomnav__item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: var(--fonte-xs); color: var(--texto-3); min-height: 44px;
}
.c-bottomnav__item svg { width: 20px; height: 20px; }
.c-bottomnav__item.is-ativo { color: var(--acento); }

/* ============================================================
   MOBILE (<768px)
   ============================================================ */
@media (max-width: 768px) {
  .c-shell { grid-template-columns: 1fr; }
  .c-trilho, .c-sidebar { display: none; }
  .c-bottomnav { display: flex; }
  .c-conteudo { padding: var(--esp-4); padding-bottom: 80px; gap: var(--esp-4); }
  .c-topbar__titulo { font-size: var(--fonte-base); }
  .c-topbar__busca { min-width: 0; flex: 1; }
  .c-topbar__busca .c-hint { display: none; }
  .c-botao { min-height: 44px; }
  .c-botao .c-hint { display: none; }

  /* KPI vira carrossel com scroll-snap */
  .c-kpi-strip {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--esp-4)); padding: 0 var(--esp-4);
  }
  .c-kpi { min-width: 148px; scroll-snap-align: start; flex: none; }

  /* painel contextual vira bottom sheet 92% */
  .c-painel {
    top: auto; left: 0; width: 100%; height: 92dvh;
    border-left: 0; border-top: 1px solid var(--borda-1);
    border-radius: var(--raio-lg) var(--raio-lg) 0 0;
    transform: translateY(100%);
  }
  .c-painel.is-aberto { transform: translateY(0); }
  .c-painel::before { /* alça de arrasto */
    content: ''; display: block; width: 36px; height: 4px;
    margin: var(--esp-2) auto 0; border-radius: var(--raio-full);
    background: var(--borda-2);
  }
  .c-drawer { width: 100%; }
  .c-palette { padding-top: var(--esp-4); }
  .c-toasts { left: var(--esp-4); bottom: calc(72px + env(safe-area-inset-bottom)); }
  .c-toast { min-width: 0; width: 100%; }
  .c-form { grid-template-columns: 1fr; }
  .c-form__input { height: 44px; }

  /* tabela vira lista de cards: colunas [data-prioridade] permanecem */
  .c-tabela--cards table, .c-tabela--cards thead { display: block; }
  .c-tabela--cards thead { display: none; }
  .c-tabela--cards tbody { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-3); }
  .c-tabela--cards tr {
    display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-3);
    padding: var(--esp-3); border: 1px solid var(--borda-1);
    border-radius: var(--raio-sm); background: var(--fundo-0);
  }
  .c-tabela--cards td { display: none; height: auto; padding: 0; border: 0; }
  .c-tabela--cards td[data-prioridade] { display: block; }
  .c-tabela--cards td[data-prioridade="1"] { width: 100%; font-weight: 600; }

  /* agenda vira timeline single-column */
  .c-agenda__cabecalho { grid-template-columns: 44px 1fr; }
  .c-agenda__corpo { grid-template-columns: 44px 1fr; }
  .c-agenda__prof:not(.is-ativa-mobile) { display: none; }
  .c-agenda__coluna:not(.is-ativa-mobile) { display: none; }
  .c-agenda__agora { left: 44px; }
}