/* ============================================================================
 * LAYOUT — esqueleto de app do Copiloto
 * ----------------------------------------------------------------------------
 * Composição de tela (shell, sidebar, conteúdo, modal, menu suspenso, cartão,
 * login). Vive fora do design.css DE PROPÓSITO: o design.css é a IDENTIDADE
 * portável (tokens + componentes) e exclui layout para permanecer colável. Aqui
 * SÓ se consome var(--…) do design.css — nenhum valor bruto de cor/espaço/raio
 * é reintroduzido (as poucas larguras/alturas viram tokens no :root do
 * design.css). Classes em português (§6).
 * ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--fam-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--c-texto);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Utilitários (evitam style="" inline, proibido pela CSP) -------- */
.oculto { display: none !important; }
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Cartão (superfície elevada) ----------------------------------- */
.cartao {
  background: var(--c-bg-elev);
  border: 1px solid var(--c-borda);
  border-radius: var(--raio-xl);
  box-shadow: var(--sombra-md);
  padding: var(--esp-6);
}

/* ============================================================================
 * TELA DE LOGIN / CRIAR CONTA
 * ========================================================================== */
.tela-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--esp-6);
  background: var(--c-bg);
}
.tela-login__cartao {
  width: 100%;
  max-width: 22rem;
}
.tela-login__marca {
  font-size: var(--fs-2xl);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  text-align: center;
  margin: 0 0 var(--esp-1);
  color: var(--c-texto);
}
.tela-login__sub {
  text-align: center;
  color: var(--c-texto-2);
  font-size: var(--fs-sm);
  margin: 0 0 var(--esp-6);
}
.tela-login__rodape {
  margin-top: var(--esp-5);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--c-texto-2);
}
.link {
  color: var(--c-acento-ativo);
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link:hover { color: var(--c-acento-hover); }

/* ============================================================================
 * APP SHELL — sidebar + conteúdo
 * ========================================================================== */
.app-shell {
  display: grid;
  grid-template-columns: var(--larg-barra-lateral) 1fr;
  grid-template-rows: var(--alt-topo) 1fr;   /* v9: faixa superior HUB/Desk */
  height: 100vh;
  overflow: hidden;
}

/* ---------- Faixa superior HUB / Desk (v9) -------------------------------- */
.topo {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: 0 var(--esp-4);
  border-bottom: 1px solid var(--c-borda);
  background: var(--c-bg-elev);
}
.topo__modos {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--c-bg-muted);
  border: 1px solid var(--c-borda);
  border-radius: var(--raio-md);
}
.topo__modo {
  padding: var(--esp-1) var(--esp-3);
  border: none;
  border-radius: var(--raio-sm);
  background: none;
  color: var(--c-texto-2);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
}
.topo__modo:focus-visible { outline: none; box-shadow: var(--sombra-foco); }
.topo__modo--ativo { background: var(--c-bg-elev); color: var(--c-texto); box-shadow: var(--sombra-sm); }
/* No modo Desk, os menus fixos exclusivos do HUB somem. */
.app-shell[data-modo="desk"] #menus-hub { display: none; }

/* ---------- Barra lateral -------------------------------------------------- */
.barra-lateral {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--c-bg-elev);
  border-right: 1px solid var(--c-borda);
  padding: var(--esp-4) var(--esp-3);
  overflow-y: auto;
}
.barra-lateral__marca {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  color: var(--c-texto);
  padding: var(--esp-2) var(--esp-2) var(--esp-4);
}
.barra-lateral__secao { display: flex; flex-direction: column; gap: 2px; }
.barra-lateral__rotulo {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--c-texto-3);
  padding: var(--esp-2) var(--esp-2) var(--esp-1);
}
/* empurra o rodapé (menu do usuário) para baixo */
.barra-lateral__rodape {
  margin-top: auto;
  padding-top: var(--esp-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ---------- Item de menu --------------------------------------------------- */
.item-menu {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  width: 100%;
  padding: var(--esp-2) var(--esp-2);
  border: none;
  border-radius: var(--raio-md);
  background: none;
  color: var(--c-texto-2);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-rapida), color var(--t-rapida);
}
.item-menu:hover { background: var(--c-bg-hover); color: var(--c-texto); }
.item-menu:focus-visible { outline: none; box-shadow: var(--sombra-foco); }
.item-menu--ativo {
  background: var(--c-acento-bg);
  color: var(--c-acento-ativo);
}
.item-menu--ativo:hover { background: var(--c-acento-bg); color: var(--c-acento-ativo); }
.item-menu__texto { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.divisor {
  height: 1px;
  background: var(--c-borda);
  border: 0;
  margin: var(--esp-3) var(--esp-1);
}

/* ---------- Conteúdo ------------------------------------------------------- */
.conteudo { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.conteudo__cabecalho {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  height: var(--alt-cabecalho);
  padding: 0 var(--esp-6);
  border-bottom: 1px solid var(--c-borda);
  background: var(--c-bg);
}
.conteudo__titulo {
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  margin: 0;
}
.conteudo__corpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--esp-8) var(--esp-6);
}
.conteudo__limite { max-width: 60rem; margin: 0 auto; }

/* ---------- Estado vazio / placeholder ------------------------------------ */
.vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--esp-3);
  text-align: center;
  color: var(--c-texto-2);
  padding: var(--esp-12) var(--esp-6);
}
.vazio .icone { color: var(--c-texto-3); }
.vazio__titulo { font-size: var(--fs-md); font-weight: 600; color: var(--c-texto); margin: 0; }
.vazio__texto { font-size: var(--fs-sm); margin: 0; max-width: 28rem; }

/* ============================================================================
 * MENU SUSPENSO (dropdown)
 * ========================================================================== */
.menu-ancora { position: relative; }
.menu-suspenso {
  position: absolute;
  min-width: 12rem;
  background: var(--c-bg-elev);
  border: 1px solid var(--c-borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-lg);
  padding: var(--esp-1);
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.menu-suspenso--acima-esq { bottom: calc(100% + var(--esp-1)); left: 0; }
.menu-suspenso--abaixo-dir { top: calc(100% + var(--esp-1)); right: 0; }
.menu-suspenso__item {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  width: 100%;
  padding: var(--esp-2) var(--esp-3);
  border: none;
  border-radius: var(--raio-sm);
  background: none;
  color: var(--c-texto);
  font-family: inherit;
  font-size: var(--fs-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-rapida), color var(--t-rapida);
}
.menu-suspenso__item:hover { background: var(--c-bg-hover); }
.menu-suspenso__item:focus-visible { outline: none; box-shadow: var(--sombra-foco); }
.menu-suspenso__item--perigo { color: var(--c-erro); }
.menu-suspenso__sep { height: 1px; background: var(--c-borda); margin: var(--esp-1) 0; }

/* ============================================================================
 * MODAL
 * ========================================================================== */
.modal__fundo {
  position: fixed;
  inset: 0;
  background: var(--c-scrim);
  display: grid;
  place-items: center;
  padding: var(--esp-6);
  z-index: var(--z-modal);
}
.modal {
  width: 100%;
  max-width: 26rem;
  background: var(--c-bg-elev);
  border: 1px solid var(--c-borda);
  border-radius: var(--raio-xl);
  box-shadow: var(--sombra-lg);
  padding: var(--esp-6);
}
.modal__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  margin-bottom: var(--esp-5);
}
.modal__titulo { font-size: var(--fs-lg); font-weight: 600; margin: 0; letter-spacing: var(--ls-tight); }
.modal__acoes {
  display: flex;
  justify-content: flex-end;
  gap: var(--esp-2);
  margin-top: var(--esp-6);
}

/* ============================================================================
 * RESPONSIVO — telas estreitas: sidebar vira faixa recolhível simples.
 * (v1: colapsa a largura; navegação plena em telas ≥ 720px.)
 * ========================================================================== */
/* ============================================================================
 * ESPAÇOS DE TRABALHO (v2) — sidebar + membros + convites
 * ========================================================================== */
.barra-lateral__secao-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
  padding-right: var(--esp-1);
}
.barra-lateral__vazio {
  color: var(--c-texto-3);
  font-size: var(--fs-sm);
  padding: var(--esp-2);
}

.espaco-item {
  display: flex;
  align-items: center;
  border-radius: var(--raio-md);
}
.espaco-item:hover { background: var(--c-bg-hover); }
.espaco-item--ativo { background: var(--c-acento-bg); }
.espaco-item__abrir {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-texto-2);
  text-align: left;
}
.espaco-item:hover .espaco-item__abrir { color: var(--c-texto); }
.espaco-item--ativo .espaco-item__abrir { color: var(--c-acento-ativo); }
.espaco-item__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.espaco-item__mais {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-right: var(--esp-1);
  background: none;
  border: none;
  border-radius: var(--raio-sm);
  color: var(--c-texto-3);
  cursor: pointer;
  flex-shrink: 0;
}
.espaco-item__mais:hover { color: var(--c-texto); background: var(--c-bg-hover); }
.espaco-item__mais:focus-visible { outline: none; box-shadow: var(--sombra-foco); }

/* Membros (dentro do modal) */
.membros-lista { display: flex; flex-direction: column; max-height: 50vh; overflow-y: auto; }
.membro-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-2) 0;
  border-bottom: 1px solid var(--c-borda);
}
.membro-row:last-child { border-bottom: none; }
.membro-info { min-width: 0; }
.membro-nome { font-size: var(--fs-sm); font-weight: 500; color: var(--c-texto); }
.membro-email {
  font-size: var(--fs-xs);
  color: var(--c-texto-2);
  overflow: hidden;
  text-overflow: ellipsis;
}
.convite-form { display: flex; gap: var(--esp-2); margin-top: var(--esp-4); }
.convite-form .input { flex: 1; }

/* Convites (dentro do modal) */
.convites-lista { display: flex; flex-direction: column; gap: var(--esp-2); max-height: 60vh; overflow-y: auto; }
.convite-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-3);
  border: 1px solid var(--c-borda);
  border-radius: var(--raio-md);
}
.convite-acoes { display: flex; gap: var(--esp-2); flex-shrink: 0; }


/* ============================================================================
 * ÁRVORE DE ARTEFATOS (v3) — na área de conteúdo do espaço
 * ========================================================================== */
.arvore__barra { margin-bottom: var(--esp-4); }
.arvore { display: flex; flex-direction: column; }

.arvore__no { display: flex; align-items: center; border-radius: var(--raio-md); }
.arvore__no:hover { background: var(--c-bg-hover); }
.arvore__abrir {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--c-texto);
  text-align: left;
}
.arvore__abrir .icone { color: var(--c-texto-2); }
.arvore__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arvore__chevron { color: var(--c-texto-3); transition: transform var(--t-rapida); }
.arvore__chevron--aberto { transform: rotate(90deg); }
.arvore__spacer { display: inline-block; width: 1rem; height: 1rem; flex-shrink: 0; }
.arvore__mais {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-right: var(--esp-1);
  background: none;
  border: none;
  border-radius: var(--raio-sm);
  color: var(--c-texto-3);
  cursor: pointer;
  flex-shrink: 0;
}
.arvore__mais:hover { color: var(--c-texto); background: var(--c-bg-hover); }
.arvore__mais:focus-visible { outline: none; box-shadow: var(--sombra-foco); }
.arvore__filhos {
  margin-left: 0.85rem;
  padding-left: var(--esp-2);
  border-left: 1px solid var(--c-borda);
}


/* ============================================================================
 * PÁGINA — editor de notas (v4)
 * ========================================================================== */
.pg { display: flex; flex-direction: column; }
.pg-barra {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  flex-wrap: wrap;
  margin-bottom: var(--esp-5);
  padding-bottom: var(--esp-3);
  border-bottom: 1px solid var(--c-borda);
}
.pg-formatos { display: flex; gap: var(--esp-1); }
.pg-formato-btn--ativo {
  background: var(--c-acento-bg);
  color: var(--c-acento-ativo);
}
.pg-status {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--c-texto-3);
  min-width: 4rem;
  text-align: right;
}

.pg-blocos { display: flex; flex-direction: column; }
.pg-bloco { display: flex; align-items: flex-start; }
.pg-texto {
  flex: 1;
  min-width: 0;
  padding: 3px 0;
  line-height: var(--lh-normal);
  color: var(--c-texto);
  outline: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.pg-texto[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: var(--c-texto-3);
  pointer-events: none;
}
.pg-bloco--titulo .pg-texto {
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  padding-top: var(--esp-2);
}
.pg-bloco--lista::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: var(--raio-full);
  background: var(--c-texto-2);
  margin: 0.7em var(--esp-2) 0 var(--esp-1);
  flex-shrink: 0;
}
.pg-check { margin: 0.4em var(--esp-2) 0 var(--esp-1); flex-shrink: 0; }
.pg-bloco--feito .pg-texto { text-decoration: line-through; color: var(--c-texto-3); }


/* ============================================================================
 * LISTA — visão Lista (sessões + tarefas) (v5)
 * ========================================================================== */
.lista-barra { display: flex; align-items: center; gap: var(--esp-2); margin-bottom: var(--esp-5); }

.sessao { margin-bottom: var(--esp-6); }
.sessao__cab { display: flex; align-items: center; gap: var(--esp-2); margin-bottom: var(--esp-1); }
.sessao__nome { font-size: var(--fs-md); font-weight: 600; margin: 0; }
.sessao__contagem {
  font-size: var(--fs-xs);
  color: var(--c-texto-3);
  font-variant-numeric: tabular-nums;
}
.sessao__mais {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem;
  background: none; border: none; border-radius: var(--raio-sm);
  color: var(--c-texto-3); cursor: pointer;
}
.sessao__mais:hover { color: var(--c-texto); background: var(--c-bg-hover); }
.sessao__mais:focus-visible { outline: none; box-shadow: var(--sombra-foco); }
.sessao__tarefas { display: flex; flex-direction: column; }

.tarefa {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2);
  border-radius: var(--raio-md);
}
.tarefa:hover { background: var(--c-bg-hover); }
.tarefa__titulo {
  flex: 1;
  min-width: 0;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--c-texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0;
}
.tarefa--feita .tarefa__titulo { text-decoration: line-through; color: var(--c-texto-3); }

.tarefa__resp, .tarefa__mais {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; flex-shrink: 0;
  background: none; border: none; border-radius: var(--raio-full);
  cursor: pointer; color: var(--c-texto-3);
}
.tarefa__mais { border-radius: var(--raio-sm); }
.tarefa__resp:hover, .tarefa__mais:hover { color: var(--c-texto); background: var(--c-bg-hover); }
.tarefa__resp:focus-visible, .tarefa__mais:focus-visible { outline: none; box-shadow: var(--sombra-foco); }
.avatar {
  width: 1.5rem; height: 1.5rem;
  border-radius: var(--raio-full);
  background: var(--c-acento-bg);
  color: var(--c-acento-ativo);
  border: 1px solid var(--c-acento-borda);
  font-size: 0.625rem;
  font-weight: 600;
  display: grid; place-items: center;
}

.lista-add {
  margin-top: var(--esp-1);
  height: 2.25rem;
  background: transparent;
  border-color: transparent;
  font-size: var(--fs-sm);
}
.lista-add:hover:not(:focus) { background: var(--c-bg-muted); border-color: var(--c-borda); }

/* ---------- Alternância de visão (Lista / Kanban) ------------------------- */
.visao-toggle {
  display: inline-flex;
  margin-left: auto;
  gap: 2px;
  padding: 2px;
  background: var(--c-bg-muted);
  border: 1px solid var(--c-borda);
  border-radius: var(--raio-md);
}
.visao-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  padding: var(--esp-1) var(--esp-2);
  border: none;
  border-radius: var(--raio-sm);
  background: none;
  color: var(--c-texto-2);
  font-family: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.visao-toggle__btn--ativo { background: var(--c-bg-elev); color: var(--c-texto); box-shadow: var(--sombra-sm); }

/* ============================================================================
 * KANBAN (v6)
 * ========================================================================== */
.quadro-kanban {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-4);
  overflow-x: auto;
  padding-bottom: var(--esp-4);
}
.coluna-kanban {
  flex: 0 0 16rem;
  display: flex;
  flex-direction: column;
  background: var(--c-bg-muted);
  border: 1px solid var(--c-borda);
  border-radius: var(--raio-lg);
  padding: var(--esp-3);
}
.coluna-kanban__cab { display: flex; align-items: center; gap: var(--esp-2); margin-bottom: var(--esp-2); }
.coluna-kanban__cards { display: flex; flex-direction: column; gap: var(--esp-2); min-height: 1.5rem; }

.cartao-tarefa {
  background: var(--c-bg-elev);
  border: 1px solid var(--c-borda);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-sm);
  padding: var(--esp-2) var(--esp-3);
  cursor: grab;
  user-select: none;
  touch-action: none;   /* Pointer Events: evita scroll ao arrastar no touch */
}
.cartao-tarefa:hover { border-color: var(--c-borda-forte); }
.cartao-tarefa__titulo {
  font-size: var(--fs-sm);
  color: var(--c-texto);
  margin-bottom: var(--esp-2);
  overflow-wrap: anywhere;
}
.cartao-tarefa--feita { opacity: 0.7; }
.cartao-tarefa--feita .cartao-tarefa__titulo { text-decoration: line-through; color: var(--c-texto-3); }
.cartao-tarefa__rodape { display: flex; align-items: center; gap: var(--esp-1); }
.cartao-tarefa__sp { flex: 1; }

.cartao-tarefa--fantasma { display: none; }
.cartao-tarefa--ghost {
  position: fixed;
  left: 0; top: 0;
  pointer-events: none;
  z-index: var(--z-modal);
  box-shadow: var(--sombra-lg);
  opacity: 0.95;
  cursor: grabbing;
  margin: 0;
}
.cartao-tarefa__placeholder {
  border: 2px dashed var(--c-borda-forte);
  border-radius: var(--raio-md);
  background: var(--c-bg-hover);
}
body.arrastando, body.arrastando .cartao-tarefa { cursor: grabbing; }
body.arrastando { user-select: none; }

/* ============================================================================
 * MINHAS TAREFAS (v7)
 * ========================================================================== */
.mt-grupo { margin-bottom: var(--esp-6); }
.mt-grupo .sessao__nome { margin-bottom: var(--esp-2); }
.mt-item {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  padding: var(--esp-2);
  border-radius: var(--raio-md);
}
.mt-item:hover { background: var(--c-bg-hover); }
.mt-item .checkbox { margin-top: 3px; }
.mt-item__corpo { flex: 1; min-width: 0; }
.mt-item__titulo { font-size: var(--fs-sm); color: var(--c-texto); overflow-wrap: anywhere; }
.mt-item--feita .mt-item__titulo { text-decoration: line-through; color: var(--c-texto-3); }
.mt-contexto { font-size: var(--fs-xs); color: var(--c-texto-3); margin-top: 2px; }

/* ============================================================================
 * NOTIFICAÇÕES (v8)
 * ========================================================================== */
.notif-barra { margin-bottom: var(--esp-4); }
.notif {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  width: 100%;
  padding: var(--esp-3);
  border: none;
  background: none;
  border-radius: var(--raio-md);
  font-family: inherit;
  color: var(--c-texto);
  text-align: left;
  cursor: pointer;
}
.notif:hover { background: var(--c-bg-hover); }
.notif:focus-visible { outline: none; box-shadow: var(--sombra-foco); }
.notif .icone { color: var(--c-texto-3); margin-top: 2px; }
.notif--nova .icone { color: var(--c-acento); }
.notif--nova .notif__titulo { font-weight: 600; }
.notif__corpo { flex: 1; min-width: 0; }
.notif__titulo { font-size: var(--fs-sm); color: var(--c-texto); }
.notif__texto { font-size: var(--fs-sm); color: var(--c-texto-2); margin-top: 2px; overflow-wrap: anywhere; }
.notif__tempo { font-size: var(--fs-xs); color: var(--c-texto-3); margin-top: var(--esp-1); }
.notif__dot {
  width: 8px; height: 8px;
  border-radius: var(--raio-full);
  background: var(--c-acento);
  flex-shrink: 0;
  margin-top: 6px;
}

/* contador no item de menu fixo (Notificações) */
.item-menu__contador {
  flex-shrink: 0;
  margin-left: var(--esp-2);
  background: var(--c-acento);
  color: var(--c-acento-texto);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  padding: 2px 6px;
  border-radius: var(--raio-full);
}


#btn-menu-mobile { display: none; }   /* só aparece em telas estreitas */

@media (max-width: 720px) {
  .app-shell { grid-template-columns: 1fr; }
  .barra-lateral {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(80vw, var(--larg-barra-lateral));
    transform: translateX(-100%);
    transition: transform var(--t-padrao);
    z-index: var(--z-modal);
  }
  .barra-lateral--aberta { transform: translateX(0); }
  #btn-menu-mobile { display: inline-flex; }
  .conteudo__corpo { padding: var(--esp-6) var(--esp-4); }
}

/* ============================================================================
 * DESK (v9) — board de tickets, detalhe e gestão de solicitantes
 * ========================================================================== */
.desk-barra {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin-bottom: var(--esp-4);
  flex-wrap: wrap;
}
.desk-barra__novo { margin-left: auto; }

/* Painel de métricas (v10) */
.desk-painel { display: flex; gap: var(--esp-2); margin-bottom: var(--esp-4); flex-wrap: wrap; }
.desk-stat {
  flex: 1; min-width: 7rem;
  padding: var(--esp-3);
  border: 1px solid var(--c-borda);
  border-radius: var(--raio-md);
  background: var(--c-bg-elev);
}
.desk-stat__num { font-size: var(--fs-xl); font-weight: 700; color: var(--c-texto); }
.desk-stat__rot { font-size: var(--fs-xs); color: var(--c-texto-3); text-transform: uppercase; letter-spacing: var(--ls-wide); }
.desk-stat--alerta { border-color: var(--c-erro); }
.desk-stat--alerta .desk-stat__num { color: var(--c-erro); }

.ticket-lista { display: flex; flex-direction: column; gap: var(--esp-2); }
.ticket-row {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  width: 100%;
  text-align: left;
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--c-borda);
  border-radius: var(--raio-md);
  background: var(--c-bg-elev);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--t-rapida), border-color var(--t-rapida);
}
.ticket-row:hover { background: var(--c-bg-hover); border-color: var(--c-borda-forte); }
.ticket-row:focus-visible { outline: none; box-shadow: var(--sombra-foco); }
.ticket-row__main { flex: 1; min-width: 0; }
.ticket-row__assunto { font-weight: 600; color: var(--c-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-row__meta { font-size: var(--fs-xs); color: var(--c-texto-3); margin-top: 2px; }
.ticket-row__tags { display: flex; gap: var(--esp-1); flex-shrink: 0; }

/* Badges de status / prioridade (consomem os tokens semânticos do DS) */
.badge--status-aberto       { background: var(--c-aviso-bg);   color: var(--c-aviso);        border-color: transparent; }
.badge--status-em_andamento { background: var(--c-acento-bg);  color: var(--c-acento-ativo); border-color: transparent; }
.badge--status-resolvido    { background: var(--c-sucesso-bg); color: var(--c-sucesso);      border-color: transparent; }
.badge--status-fechado      { background: var(--c-bg-muted);   color: var(--c-texto-2);      border-color: transparent; }
.badge--prio-baixa   { background: var(--c-bg-muted); color: var(--c-texto-3); border-color: transparent; }
.badge--prio-media   { background: var(--c-bg-muted); color: var(--c-texto-2); border-color: transparent; }
.badge--prio-alta    { background: var(--c-aviso-bg); color: var(--c-aviso);   border-color: transparent; }
.badge--prio-urgente { background: var(--c-erro-bg);  color: var(--c-erro);    border-color: transparent; }
.badge--atrasado      { background: var(--c-erro-bg);  color: var(--c-erro);    border-color: var(--c-erro); }

/* Detalhe do ticket */
.voltar { margin-bottom: var(--esp-3); }
.ticket-detalhe__head { margin-bottom: var(--esp-4); }
.ticket-detalhe__assunto { font-size: var(--fs-xl); font-weight: 600; margin: 0; }
.ticket-detalhe__sub { font-size: var(--fs-sm); color: var(--c-texto-3); margin-top: var(--esp-1); }
.ticket-detalhe__ctrls { display: flex; gap: var(--esp-2); margin-top: var(--esp-3); flex-wrap: wrap; }
.ticket-ctrl { max-width: 14rem; }

.ticket-thread { display: flex; flex-direction: column; gap: var(--esp-3); margin-bottom: var(--esp-5); }
.msg {
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--c-borda);
  border-radius: var(--raio-md);
  background: var(--c-bg-elev);
}
.msg--solicitante { background: var(--c-bg-muted); }
.msg--interna { border-color: var(--c-aviso); border-left-width: 3px; }
.msg__cab { display: flex; align-items: center; gap: var(--esp-2); margin-bottom: var(--esp-1); }
.msg__autor { font-weight: 600; font-size: var(--fs-sm); }
.msg__quando { margin-left: auto; font-size: var(--fs-xs); color: var(--c-texto-3); }
.msg__tag-interna { background: var(--c-aviso-bg); color: var(--c-aviso); border-color: transparent; }
.msg__corpo { white-space: pre-wrap; color: var(--c-texto); font-size: var(--fs-sm); }

.responder {
  border: 1px solid var(--c-borda);
  border-radius: var(--raio-md);
  padding: var(--esp-3);
  background: var(--c-bg-elev);
}
.responder__acoes { display: flex; align-items: center; gap: var(--esp-3); margin-top: var(--esp-2); }
.responder__interna { display: inline-flex; align-items: center; gap: var(--esp-1); font-size: var(--fs-sm); color: var(--c-texto-2); }
.responder__acoes .btn { margin-left: auto; }

/* Gestão de solicitantes */
.solic-barra { margin: var(--esp-3) 0; }
.membro-gerente { display: inline-flex; align-items: center; gap: var(--esp-1); font-size: var(--fs-xs); color: var(--c-texto-2); margin-right: var(--esp-2); }

/* Portal do solicitante (frontend/desk) */
.portal-topo {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  height: var(--alt-cabecalho);
  padding: 0 var(--esp-6);
  border-bottom: 1px solid var(--c-borda);
  background: var(--c-bg-elev);
}
.portal-marca { font-weight: 600; font-size: var(--fs-lg); letter-spacing: var(--ls-tight); color: var(--c-texto); }
.portal-topo__dir { margin-left: auto; display: flex; align-items: center; gap: var(--esp-3); }
.portal-quem { font-size: var(--fs-sm); color: var(--c-texto-2); }
.portal-corpo { max-width: 48rem; margin: 0 auto; padding: var(--esp-8) var(--esp-6); }