/* app.css, design system do Split Tasks (refino visual, branch design/stitch-polish).
   Sistema novo: branco puro + cinzas slate, indigo como acento, sidebar clara,
   raio 8px, tabelas densas, badges de status e nucleo. CSS escrito a mao, sem
   Tailwind, sem build, sem npm. H2 sentence case, PT-BR, sem em dash.
   Referencia visual: projeto Split Tasks no Google Stitch + design/DESIGN.md. */

:root {
  /* Spacing (escala 8pt, multiplos de 4) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Superficie: branco puro + cinzas slate neutros (sem tom arroxeado) */
  --bg: #FFFFFF;
  --surface: #F8FAFC;       /* slate-50, containers/cabecalho de tabela */
  --surface-2: #F1F5F9;     /* slate-100, hover/zebra sutil */
  --border: #E2E8F0;        /* slate-200 */
  --border-strong: #CBD5E1; /* slate-300, inputs */

  /* Acento: indigo (acao, selecao, links). Nunca fundo de pagina. */
  --accent: #4338CA;
  --accent-hover: #3730A3;
  --accent-soft: #EEF2FF;   /* indigo-50, item ativo/destaque */
  --accent-soft-text: #3730A3;

  /* Semanticas: par texto-forte / fundo-pastel */
  --success: #16A34A; --success-bg: #DCFCE7;
  --warning: #D97706; --warning-bg: #FEF3C7;
  --danger:  #DC2626; --danger-bg:  #FEE2E2;
  --info:    #2563EB; --info-bg:    #DBEAFE;

  /* Texto neutro */
  --text: #0F172A;        /* slate-900 */
  --text-muted: #64748B;  /* slate-500 */

  /* Sidebar clara */
  --sidebar-bg: #F8FAFC;
  --sidebar-text: #475569;       /* slate-600 */
  --sidebar-text-strong: #0F172A;

  /* Identidade dos 5 nucleos (cores fixas, distintas). Aplicadas via
     .chip-nucleo--<slug>; ver nota no fim do arquivo pra ativar nos templates. */
  --nucleo-gui-vi: #4F46E5;       /* indigo */
  --nucleo-flaviao-ju: #0D9488;   /* teal */
  --nucleo-fabinho-gi: #DB2777;   /* rosa */
  --nucleo-mi-romulo: #EA580C;    /* laranja */
  --nucleo-caio-aninha: #65A30D;  /* verde-oliva */

  /* Tipografia: Inter, sentence case, densidade confortavel */
  --font: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  --size-display: 28px;
  --size-h2: 20px;
  --size-body: 15px;
  --size-meta: 13px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Controles */
  --hit: 40px;
  --radius: 8px;
  --radius-sm: 6px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --ring: 0 0 0 3px rgba(67, 56, 202, 0.30); /* foco indigo 30% */
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font);
  font-size: var(--size-body);
  font-weight: var(--weight-regular);
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Layout: sidebar clara fixa a esquerda + area de conteudo branca --- */

.layout { display: flex; min-height: 100vh; }

.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 240px;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  border-right: 1px solid var(--border);
  padding: var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.sidebar .marca {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-sm) 0;
}

.sidebar .marca-logo {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: var(--accent);
  color: #FFFFFF;
  font-size: 22px;
}

.sidebar .marca-texto { display: flex; flex-direction: column; line-height: 1.2; }
.sidebar .marca-nome {
  font-size: var(--size-h2);
  font-weight: var(--weight-semibold);
  color: var(--sidebar-text-strong);
  letter-spacing: -0.01em;
}
.sidebar .marca-sub { font-size: var(--size-meta); color: var(--text-muted); }

.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar nav a {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: var(--hit);
  padding: 0 var(--space-md);
  border-radius: var(--radius);
  border-left: 3px solid transparent;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: var(--size-body);
  font-weight: var(--weight-medium);
}

.sidebar nav a .material-symbols-outlined { font-size: 20px; color: var(--text-muted); }
.sidebar nav a:hover { background: var(--surface-2); color: var(--text); }
.sidebar nav a:hover .material-symbols-outlined { color: var(--text); }

.sidebar nav a.ativo {
  background: var(--accent-soft);
  border-left-color: var(--accent);
  color: var(--accent);
  font-weight: var(--weight-semibold);
}
.sidebar nav a.ativo .material-symbols-outlined {
  color: var(--accent);
  font-variation-settings: 'FILL' 1;
}

/* Rodape da sidebar: identidade do usuario + Sair, empurrados pro fim */
.sidebar-rodape {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.usuario { display: flex; align-items: center; gap: var(--space-sm); padding: 0 var(--space-sm); }
.usuario .material-symbols-outlined { font-size: 28px; color: var(--text-muted); }
.usuario-texto { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.usuario-nome {
  font-size: var(--size-meta);
  font-weight: var(--weight-semibold);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150px;
}
.usuario-papel { font-size: 11px; color: var(--text-muted); }

.conteudo {
  margin-left: 240px;
  flex: 1;
  padding: var(--space-xl) var(--space-xl) var(--space-3xl);
  /* Preenche a largura disponivel (menos a sidebar); o padding lateral e a margem
     confortavel. Sem max-width: telas largas usam o espaco e a tabela cabe inteira
     (Prazo/Acoes nao cortam mais). */
  min-width: 0;
}

/* --- Tipografia --- */

h1 {
  font-size: var(--size-display);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-lg);
}

h2 {
  font-size: var(--size-h2);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-md);
}

.meta { font-size: var(--size-meta); color: var(--text-muted); }

/* Label de secao em indigo (label-caps) */
.label-secao {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* --- Controles --- */

button,
select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
textarea {
  font-family: var(--font);
  font-size: var(--size-body);
}

button, select {
  min-height: var(--hit);
  padding: 0 var(--space-md);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

button:hover { background: var(--surface); }

button.primario {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-sm);
}
button.primario:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

button.secundario {
  background: var(--bg);
  border-color: var(--border-strong);
  color: #334155;
}
button.secundario:hover { background: var(--surface); }

button.destrutivo {
  background: var(--bg);
  border-color: var(--danger);
  color: var(--danger);
}
button.destrutivo:hover { background: var(--danger-bg); }

button:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
textarea {
  min-height: var(--hit);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  width: 100%;
}

input::placeholder, textarea::placeholder { color: #94A3B8; }

textarea { min-height: 120px; resize: vertical; line-height: 1.55; }

select {
  font-weight: var(--weight-regular);
  padding-right: var(--space-lg);
}

:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--accent); }

/* Formularios inline (acoes admin) e helpers de linha */
form.inline, .inline { display: inline-flex; align-items: center; gap: var(--space-sm); }
.form-criar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: end;
  margin-bottom: var(--space-lg);
}
.linha-controles { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.linha-editar { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }

/* --- Cards --- */

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md);
  background: var(--bg);
  box-shadow: var(--shadow-sm);
}

.linha-tarefa.card { margin-bottom: var(--space-sm); }
.tarefa-descricao { font-weight: var(--weight-medium); color: var(--text); }

/* --- Chips (confianca / camada / nucleo) --- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--size-meta);
  font-weight: var(--weight-medium);
  padding: 3px var(--space-sm);
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: #334155;
}

/* Badge de nucleo: pilula. Default neutro refinado; as variantes por casal
   (cor solida + texto branco) ficam prontas abaixo, ative no template emitindo
   a classe chip-nucleo--<slug> junto de chip-nucleo. */
.chip-nucleo {
  background: var(--surface-2);
  color: #1E293B;
  border-color: var(--border);
  font-weight: var(--weight-semibold);
}

.chip-nucleo--gui-vi,
.chip-nucleo--flaviao-ju,
.chip-nucleo--fabinho-gi,
.chip-nucleo--mi-romulo,
.chip-nucleo--caio-aninha,
.chip-nucleo--one { color: #FFFFFF; border-color: transparent; }

.chip-nucleo--gui-vi      { background: var(--nucleo-gui-vi); }
.chip-nucleo--flaviao-ju  { background: var(--nucleo-flaviao-ju); }
.chip-nucleo--fabinho-gi  { background: var(--nucleo-fabinho-gi); }
.chip-nucleo--mi-romulo   { background: var(--nucleo-mi-romulo); }
.chip-nucleo--caio-aninha { background: var(--nucleo-caio-aninha); }
/* One e nucleo EXECUTOR (nao casal): cor neutra slate pra distinguir dos socios. */
.chip-nucleo--one         { background: #475569; }

/* --- Badges de estado (texto + cor, cor nunca e o unico sinal) --- */

.badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--size-meta);
  font-weight: var(--weight-semibold);
  padding: 3px var(--space-sm);
  border-radius: 999px;
}

.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger); }
.badge-info    { background: var(--info-bg);    color: var(--info); }

/* --- Callouts (info/warning/danger/success) --- */

.callout {
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-md);
  background: var(--surface);
  font-size: var(--size-body);
}

.callout-info    { border-left-color: var(--info);    background: var(--info-bg); }
.callout-warning { border-left-color: var(--warning); background: var(--warning-bg); }
.callout-danger  { border-left-color: var(--danger);  background: var(--danger-bg); }
.callout-success { border-left-color: var(--success); background: var(--success-bg); }

/* --- Toast (sucesso): canto inferior direito, fundo branco, some sozinho ~4s.
   CSS puro, position:fixed nao mexe no layout. Erros ficam inline na tela. --- */
.toast {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  z-index: 1000;
  max-width: 360px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--success);
  border-radius: var(--radius);
  padding: var(--space-md);
  background: var(--bg);
  color: var(--text);
  font-size: var(--size-body);
  box-shadow: var(--shadow-md);
  animation: toast-in 0.25s ease-out, toast-out 0.4s ease-in 4s forwards;
}

/* Toast de erro: borda vermelha e FIXO (nao some sozinho), ao contrario do
   toast de sucesso que auto-some em 4s. Erros ficam ate o usuario agir. */
.toast-erro {
  border-left-color: var(--danger);
  animation: toast-in 0.25s ease-out;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@keyframes toast-out {
  to { opacity: 0; transform: translateY(12px); visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* --- Tabelas (densas, cabecalho destacado, hover de linha) --- */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--size-body);
}

thead th {
  background: var(--surface);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

th, td {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border);
}

th {
  font-weight: var(--weight-semibold);
  font-size: var(--size-meta);
  color: var(--text-muted);
}

tbody tr:hover { background: var(--surface); }

/* --- Secoes de agrupamento por nucleo (cobranca/carga/tarefas) --- */

.balanco-nucleo,
.resumo-nucleo,
.proximas-datas,
.atrasadas { margin-bottom: var(--space-xl); }

.grupo-nucleo { margin-bottom: var(--space-xl); }

/* --- htmx: indicador de loading (ex "Classificando...") --- */

.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline; }
.htmx-request.htmx-indicator { display: inline; }

/* --- Estado vazio --- */

.vazio {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.vazio h2 { color: var(--text); }

/* --- Responsivo: sidebar vira topo em telas estreitas --- */

@media (max-width: 720px) {
  .layout { flex-direction: column; }
  .sidebar {
    position: static;
    width: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
  }
  .sidebar .marca { padding: 0; }
  .sidebar nav { flex-direction: row; flex-wrap: wrap; }
  .sidebar nav a { min-height: 36px; border-left: none; }
  .sidebar nav a.ativo { border-left: none; }
  .sidebar .sair { margin-top: 0; margin-left: auto; }
  .conteudo { margin-left: 0; padding: var(--space-lg) var(--space-md) var(--space-2xl); }
}

/* =========================================================================
   Componentes do refino (Fila como o Stitch): icones, header, busca, stats,
   card de 2 colunas. Material Symbols carregado via Google Fonts no base.html.
   ========================================================================= */

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
}

/* Botoes com icone: alinha icone + texto */
button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); }
button .material-symbols-outlined { font-size: 18px; }
.badge .material-symbols-outlined {
  font-size: 14px; margin-right: 2px; font-variation-settings: "FILL" 1;
}

/* Link estilizado como botao (ex "Nova tarefa") */
.botao-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: var(--hit);
  padding: 0 var(--space-md);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
  font-size: var(--size-body);
  font-weight: var(--weight-semibold);
}
.botao-link .material-symbols-outlined { font-size: 18px; }
.botao-link.primario { background: var(--accent); border-color: var(--accent); color: #FFFFFF; box-shadow: var(--shadow-sm); }
.botao-link.primario:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* Header da pagina: titulo + acoes (busca, novo) */
.pagina-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}
.pagina-header h1 { margin: 0 0 var(--space-xs); }
.pagina-acoes { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }

/* Campo de busca com icone */
.busca { position: relative; display: inline-flex; align-items: center; }
.busca .material-symbols-outlined {
  position: absolute; left: var(--space-sm); font-size: 20px;
  color: var(--text-muted); pointer-events: none;
}
.busca input {
  width: 260px;
  min-height: var(--hit);
  padding: var(--space-sm) var(--space-md) var(--space-sm) 40px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-size: var(--size-body);
}

/* Faixa de stats */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.stat-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
}
.stat-card > div { display: flex; flex-direction: column; gap: 2px; }
.stat-icone {
  width: 44px; height: 44px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius); font-size: 24px;
  font-variation-settings: "FILL" 1;
}
.stat-icone--primary { background: var(--accent-soft); color: var(--accent); }
.stat-icone--success { background: var(--success-bg); color: var(--success); }
.stat-icone--warning { background: var(--warning-bg); color: var(--warning); }
.stat-icone--neutral { background: var(--surface-2); color: var(--text-muted); }
.stat-numero { font-size: var(--size-h2); font-weight: var(--weight-semibold); color: var(--text); }

/* Lista da fila */
.fila-lista { display: flex; flex-direction: column; gap: var(--space-md); }

/* Card da fila em 2 colunas (conteudo + painel de acoes) */
.fila-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease;
}
.fila-card:hover { box-shadow: var(--shadow-md); }
.fila-card--ambigua { border-color: var(--warning); }

.fila-card-alerta {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--warning-bg);
  border-bottom: 1px solid var(--warning);
}
.fila-card-alerta .material-symbols-outlined { font-size: 20px; color: var(--warning); }
.fila-card-alerta .label-secao { color: #92400E; }

.fila-card-cols { display: flex; flex-direction: row; }
.fila-card-body {
  flex: 1; min-width: 0;
  padding: var(--space-lg);
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.fila-card-tags { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.fila-card-titulo {
  font-size: var(--size-body); font-weight: var(--weight-semibold);
  color: var(--text); margin: 0; line-height: 1.4;
}
.fila-card-justificativa {
  margin: 0; color: var(--text-muted);
  font-style: italic; font-size: var(--size-meta);
}
.fila-card-rodape { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }

.fila-card-acoes {
  width: 280px; flex-shrink: 0;
  background: var(--surface);
  border-left: 1px solid var(--border);
  padding: var(--space-md);
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.fila-card-acoes .primario, .fila-card-acoes select { width: 100%; }
.fila-card-descartar {
  width: 100%; margin-top: var(--space-xs); min-height: 34px;
  background: transparent; border-color: transparent;
  color: var(--danger); text-decoration: underline;
}
.fila-card-descartar:hover { background: var(--danger-bg); text-decoration: none; }

/* Cards resolvidos (pos-acao, htmx swap): compactos, uma linha */
.fila-card--resolvido { padding: var(--space-md); }
.fila-card--aprovado { border-left: 4px solid var(--success); }
.fila-card--descartado { border-left: 4px solid var(--danger); }
.fila-card-resolvido-linha { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }

/* Chip de area (indigo suave) */
.chip-area {
  background: var(--accent-soft);
  color: var(--accent-soft-text);
  border-color: transparent;
  font-weight: var(--weight-semibold);
}

/* Chips de estado do roteamento (fila): sem area / sem nucleo / aguardando */
.chip-sem-area { background: var(--danger-bg); color: var(--danger); border-color: transparent; font-weight: var(--weight-semibold); }
.chip-sem-nucleo { background: var(--surface-2); color: #94A3B8; border-color: var(--border); font-weight: var(--weight-semibold); }
.chip-aguardando { background: var(--surface-2); color: var(--text-muted); border-color: var(--border); font-weight: var(--weight-semibold); }

/* Badge de confianca da IA (alta/media/baixa), com cor + icone (fila) */
.badge-conf {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 3px var(--space-sm); border-radius: var(--radius-sm);
}
.badge-conf .material-symbols-outlined { font-size: 14px; font-variation-settings: "FILL" 1; }
.badge-conf--alta  { background: var(--success-bg); color: var(--success); }
.badge-conf--media { background: var(--warning-bg); color: var(--warning); }
.badge-conf--baixa { background: var(--danger-bg);  color: var(--danger); }

/* Card sem nucleo/sem area: borda tracejada (igual ao mockup) */
.fila-card--sem-nucleo { border-style: dashed; border-width: 2px; border-color: var(--border-strong); }

/* Badges do topo do card no formato EXATO do Stitch: retangular arredondado
   (nao pilula) + UPPERCASE + peso forte. Scoped ao card da fila, pra nao mexer
   nas pilulas das outras telas. Area = indigo-claro/indigo; nucleo = solido na
   cor do casal + branco; confianca = verde/ambar/vermelho com icone. */
.fila-card-tags .chip,
.fila-card-tags .badge-conf {
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  height: 26px;
  min-height: 26px;
  padding: 0 var(--space-sm);
  line-height: 1;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
}
.fila-card-tags .chip-area { background: var(--accent-soft); color: var(--accent-soft-text); }

.busca-vazia { margin-top: var(--space-md); }

/* Responsivo dos componentes novos */
@media (max-width: 900px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .fila-card-cols { flex-direction: column; }
  .fila-card-acoes { width: auto; border-left: none; border-top: 1px solid var(--border); }
  .busca { flex: 1; }
  .busca input { width: 100%; }
  .pagina-acoes { width: 100%; }
  .sidebar-rodape { margin-top: 0; }
}

/* =========================================================================
   Cobranca: bento "Estado dos nucleos", grid 2 colunas (atrasadas + proximas
   datas), paineis e cards de alerta de data.
   ========================================================================= */

.estado-nucleos { margin-bottom: var(--space-xl); }

.bento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-sm);
}
.nucleo-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease;
}
.nucleo-card:hover { border-color: var(--accent); }
.nucleo-card-topo { display: flex; align-items: center; justify-content: space-between; }
.nucleo-avatar {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  font-weight: var(--weight-semibold); font-size: var(--size-body);
}
.nucleo-card-nome {
  font-size: var(--size-body); font-weight: var(--weight-semibold);
  color: var(--text); margin: 0;
}
.nucleo-card-nums { display: flex; align-items: flex-end; gap: var(--space-md); }
.nucleo-num { display: flex; flex-direction: column; gap: 2px; }
.nucleo-num-atrasadas.is-danger {
  background: var(--danger-bg);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-sm);
}
.nucleo-num-atrasadas.is-danger .stat-numero,
.nucleo-num-atrasadas.is-danger .label-secao { color: var(--danger); }

/* Grid de 2 colunas */
.cobranca-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-lg);
  align-items: start;
}
.cobranca-grid--solo { grid-template-columns: 1fr; }
.cobranca-lateral { min-width: 0; }

/* Painel generico (card container com cabecalho) */
.painel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.painel-cabecalho {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.painel-cabecalho h2 { margin: 0; }
.painel table th, .painel table td { padding: var(--space-sm) var(--space-lg); }
.tabela-wrap { overflow-x: auto; }
.tabela-titulo { font-weight: var(--weight-semibold); color: var(--text); margin: 0 0 2px; }
.col-num { text-align: right; white-space: nowrap; }
.atraso-dias { color: var(--danger); font-weight: var(--weight-semibold); }

/* Painel "Proximas datas": cards de alerta */
.proximas-datas-painel { padding: var(--space-lg); }
.painel-titulo {
  display: flex; align-items: center; gap: var(--space-sm);
  font-size: var(--size-h2); font-weight: var(--weight-semibold);
  color: var(--text); margin: 0 0 var(--space-xs);
}
.painel-titulo .material-symbols-outlined { font-size: 22px; color: var(--warning); }
.proximas-lista { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-md); }
.data-alerta {
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-md);
  background: var(--surface);
}
.data-alerta--danger  { border-left-color: var(--danger);  background: var(--danger-bg); }
.data-alerta--warning { border-left-color: var(--warning); background: var(--warning-bg); }
.data-alerta--info    { border-left-color: var(--info);    background: var(--info-bg); }
.data-alerta-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-xs); }
.data-alerta-prazo { font-size: var(--size-meta); font-weight: 700; color: var(--text); white-space: nowrap; }
.data-alerta-titulo { font-weight: var(--weight-semibold); color: var(--text); margin: 0; }
.data-alerta-nota { font-size: var(--size-meta); color: var(--text-muted); margin: 2px 0 0; }

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

/* =========================================================================
   Tarefas: reproduz o mockup do Stitch "Catalogo de Tarefas" = pills de filtro,
   grupos por nucleo como tabelas densas (borda esquerda colorida + avatar +
   contagem), status como pilula, rodape "adicionar ao nucleo" e footer de stats.
   ========================================================================= */

/* Avatar do nucleo: fundo neutro default (variantes chip-nucleo--<slug> pintam) */
.nucleo-avatar { background: var(--surface-2); color: var(--text); }
.nucleo-avatar--quad { border-radius: var(--radius-sm); }

/* Barra de filtro: pills + total a direita */
.filtro-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-lg); }
.pills-filtro { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.pill {
  border: none; background: transparent; color: var(--text-muted);
  font-size: var(--size-meta); font-weight: var(--weight-medium);
  padding: 6px var(--space-md); border-radius: 999px; min-height: 32px; cursor: pointer;
}
.pill:hover { background: var(--surface-2); }
.pill.ativo { background: var(--surface-2); color: var(--text); font-weight: var(--weight-semibold); }
.total-tarefas { font-size: var(--size-meta); color: var(--text-muted); }
.total-tarefas strong { color: var(--text); }

/* Grupo por nucleo: card com borda esquerda na cor do nucleo */
.grupo-tabela {
  border: 1px solid var(--border); border-left: 6px solid var(--border-strong);
  border-radius: 12px; background: var(--bg); overflow: hidden;
  box-shadow: var(--shadow-sm); margin-bottom: var(--space-lg);
}
.grupo-tabela--gui-vi      { border-left-color: var(--nucleo-gui-vi); }
.grupo-tabela--flaviao-ju  { border-left-color: var(--nucleo-flaviao-ju); }
.grupo-tabela--fabinho-gi  { border-left-color: var(--nucleo-fabinho-gi); }
.grupo-tabela--mi-romulo   { border-left-color: var(--nucleo-mi-romulo); }
.grupo-tabela--caio-aninha { border-left-color: var(--nucleo-caio-aninha); }

.grupo-tabela-cab {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.grupo-tabela-cab-nome { display: flex; align-items: center; gap: var(--space-sm); }
.grupo-tabela-cab-nome h2 { margin: 0; font-size: var(--size-h2); }
.grupo-tabela-contagem { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }

/* Celulas da tabela de tarefas */
.tabela-tarefas td { vertical-align: middle; }
.tarefa-desc-titulo { font-weight: var(--weight-semibold); color: var(--text); }
.tarefa-desc-sub { font-size: var(--size-meta); color: var(--text-muted); margin-top: 1px; }
.col-acoes { text-align: right; white-space: nowrap; }
.tarefa-acoes { display: inline-flex; gap: var(--space-xs); }
.tarefa-acoes button {
  min-height: 32px; padding: 0 var(--space-sm); border-color: var(--border);
  color: var(--text-muted);
}
.tarefa-acoes button:hover { color: var(--text); }
.tarefa-acoes .material-symbols-outlined { font-size: 18px; }

/* Status como pilula (select pro admin, badge pro socio) */
.status-pill {
  min-height: 28px; padding: 2px var(--space-md) 2px var(--space-sm);
  border: none; border-radius: 999px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; width: auto;
}
.status-pill--a_fazer      { background: var(--surface-2);  color: #475569; }
.status-pill--aguardando   { background: var(--info-bg);    color: var(--info); }
.status-pill--em_andamento { background: var(--warning-bg); color: var(--warning); }
.status-pill--feito        { background: var(--success-bg); color: var(--success); }
.status-pill--descartado   { background: var(--danger-bg);  color: var(--danger); }
.badge--a_fazer { background: var(--surface-2); color: #475569; }

/* Rodape do grupo: "Adicionar tarefa ao nucleo" via <details> nativo */
.grupo-add { border-top: 1px solid var(--border); }
.grupo-add > summary {
  list-style: none; cursor: pointer; text-align: center;
  padding: var(--space-sm); color: var(--accent);
  font-size: var(--size-meta); font-weight: var(--weight-semibold);
  display: flex; align-items: center; justify-content: center; gap: var(--space-xs);
}
.grupo-add > summary::-webkit-details-marker { display: none; }
.grupo-add > summary:hover { background: var(--accent-soft); }
.grupo-add[open] > summary { border-bottom: 1px solid var(--border); }
.grupo-add-form { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: end; padding: var(--space-md) var(--space-lg); background: var(--surface); }
.grupo-add-form .campo { display: flex; flex-direction: column; gap: var(--space-xs); flex: 1; min-width: 150px; }
.grupo-add-form .campo-largo { flex: 2 1 240px; }

/* Adicionar tarefa no estado vazio (details como card) */
.grupo-add-vazio { margin-top: var(--space-lg); }
.grupo-add-vazio > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg); color: var(--accent); font-weight: var(--weight-semibold);
}
.grupo-add-vazio > summary::-webkit-details-marker { display: none; }
.grupo-add-vazio[open] > summary { border-bottom: 1px solid var(--border); }

/* Form de edicao inline dentro de uma linha (tr com td colspan) */
.tarefa-editar-cell { background: var(--accent-soft); padding: var(--space-md) var(--space-lg); }
.form-editar { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: end; }
.form-editar .campo { display: flex; flex-direction: column; gap: var(--space-xs); flex: 1; min-width: 150px; }
.form-editar .campo-largo { flex: 2 1 240px; }
.form-editar .acoes { display: flex; gap: var(--space-sm); }

/* Footer de stats (4 cards: a fazer / em andamento / feito / descartado) */
.catalogo-footer { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); margin-top: var(--space-xl); }
.footer-stat-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); padding: var(--space-md) var(--space-lg); box-shadow: var(--shadow-sm); }
.footer-stat-card .label-caps-muted { display: block; margin-bottom: var(--space-xs); }
.footer-stat-num { font-size: var(--size-h2); font-weight: var(--weight-semibold); color: var(--text); }
.footer-stat-num--em_andamento { color: var(--warning); }
.footer-stat-num--feito { color: var(--success); }
.footer-stat-num--descartado { color: var(--text-muted); }

@media (max-width: 900px) {
  .catalogo-footer { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .grupo-add-form .campo, .form-editar .campo { flex: 1 1 100%; }
}

/* =========================================================================
   Mapa: reproduz o mockup do Stitch (Painel de controle / Matriz de
   responsabilidade) = tag de acesso, callout indigo, bento (cobertura + 2
   stats) e a tabela densa. Avatar na cor do nucleo combinado no select.
   ========================================================================= */

.nucleo-avatar--sm { width: 28px; height: 28px; font-size: var(--size-meta); flex-shrink: 0; }
.mapa-nucleo { display: flex; align-items: center; gap: var(--space-sm); }
.mapa-nucleo select { flex: 1; min-width: 160px; max-width: 220px; }
.mapa-sinais { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.callout-secao { margin-bottom: var(--space-lg); }

/* Tag de acesso (badge sob o titulo, igual "Admin Access Only" do mockup) */
.tag-acesso {
  display: inline-block; margin-top: var(--space-xs);
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  padding: 2px var(--space-sm); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text-muted);
}
.tag-acesso--leitura { background: var(--accent-soft); color: var(--accent-soft-text); }

/* Callout indigo com icone (regras globais) */
.callout-primary {
  border-left-color: var(--accent); background: var(--accent-soft);
  display: flex; align-items: flex-start; gap: var(--space-sm);
}
.callout-primary .material-symbols-outlined { color: var(--accent); font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.callout-primary strong { color: var(--accent-soft-text); }

/* Bento: cobertura (grande) + coluna de 2 stats */
.mapa-bento { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-lg); margin-bottom: var(--space-lg); }
.mapa-bento-stats { display: flex; flex-direction: column; gap: var(--space-md); }

.cobertura-card {
  position: relative; overflow: hidden; min-height: 280px;
  border: 1px solid var(--border); border-radius: 12px;
  background: linear-gradient(135deg, #312E81 0%, #4338CA 55%, #6366F1 100%);
}
.cobertura-bg {
  position: absolute; right: -30px; bottom: -40px;
  font-size: 280px; line-height: 1; color: rgba(255, 255, 255, 0.07);
  font-variation-settings: "FILL" 1;
}
.cobertura-widget {
  position: absolute; top: 16px; left: 16px; max-width: 280px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--space-md); box-shadow: var(--shadow-md);
}
.cobertura-widget h4 { margin: 0 0 var(--space-sm); font-size: var(--size-body); font-weight: var(--weight-semibold); color: var(--text); }
.cobertura-linha { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); margin-bottom: var(--space-xs); }
.cobertura-frac { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--accent); }
.cobertura-barra { width: 100%; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.cobertura-barra-fill { height: 100%; background: var(--accent); }

.mapa-stat-card {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg);
  padding: var(--space-lg); box-shadow: var(--shadow-sm);
}
.label-caps-muted { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.mapa-stat-num { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--accent); margin-top: var(--space-xs); }
.mapa-stat-num--alt { color: var(--success); }
.mapa-stat-card .meta { margin-top: var(--space-sm); }
.mapa-stat-sub { display: flex; align-items: center; gap: var(--space-xs); }
.mapa-stat-sub .material-symbols-outlined { font-size: 16px; color: var(--success); }

/* Matriz de responsabilidade: coluna ID compacta + rodape do painel */
td.col-arraste, th.col-arraste, .matriz .col-arraste { width: 36px; text-align: center; }
/* Handle de arraste pra reordenar os setores (drag-and-drop das linhas, admin). */
.setor-drag-handle { cursor: grab; color: var(--text-muted); display: inline-flex; align-items: center; vertical-align: middle; margin-right: 2px; }
.setor-drag-handle:hover { color: var(--text); }
.setor-drag-handle:active { cursor: grabbing; }
.setor-drag-handle .material-symbols-outlined { font-size: 18px; }
.matriz tr.sortable-ghost { opacity: 0.45; }
.matriz tr.sortable-chosen { background: var(--surface-2); }
.painel-rodape { padding: var(--space-sm) var(--space-lg); border-top: 1px solid var(--border); background: var(--surface); }

@media (max-width: 900px) {
  .mapa-bento { grid-template-columns: 1fr; }
  .cobertura-card { min-height: 200px; }
}

/* =========================================================================
   Carga: reproduz o mockup do Stitch (Painel de controle / Carga de trabalho) =
   callout de sugestao, bento (balanco em barras + eficiencia em donut + tarefas
   orfas) e a ocupacao por nucleo. Mede por NUCLEO (nao por membro).
   ========================================================================= */

.carga-bento { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-lg); align-items: start; margin-bottom: var(--space-lg); }
.carga-lateral { display: flex; flex-direction: column; gap: var(--space-lg); min-width: 0; }

/* Balanco em barras */
.balanco-card { padding: var(--space-lg); }
.balanco-cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); }
.balanco-cabecalho h2 { margin: 0; }
.balanco-legenda, .ocupacao-legenda { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.legenda-item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--size-meta); color: var(--text-muted); }
.legenda-item::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: currentColor; }
.legenda-item--cheio { color: var(--accent); }
.legenda-item--track { color: var(--border-strong); }
.legenda-item--danger { color: var(--danger); }
.legenda-item--info { color: var(--info); }

.balanco-barras { display: flex; flex-direction: column; gap: var(--space-lg); }
.barra-nucleo { display: flex; flex-direction: column; gap: var(--space-xs); }
.barra-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.barra-rotulo { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
.barra-nome { font-weight: var(--weight-semibold); color: var(--text); }
.barra-valor { font-weight: var(--weight-semibold); color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.barra-track { height: 14px; width: 100%; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.barra-fill { height: 100%; border-radius: 999px; background: var(--accent); transition: width 0.4s ease; }
.barra-fill--gui-vi      { background: var(--nucleo-gui-vi); }
.barra-fill--flaviao-ju  { background: var(--nucleo-flaviao-ju); }
.barra-fill--fabinho-gi  { background: var(--nucleo-fabinho-gi); }
.barra-fill--mi-romulo   { background: var(--nucleo-mi-romulo); }
.barra-fill--caio-aninha { background: var(--nucleo-caio-aninha); }

/* Donut de eficiencia global (conic-gradient) */
.donut-card { padding: var(--space-lg); display: flex; flex-direction: column; align-items: center; text-align: center; }
.donut {
  position: relative; width: 132px; height: 132px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin: var(--space-md) 0;
  background: conic-gradient(var(--accent) calc(var(--pct) * 1%), var(--surface-2) 0);
}
.donut::before { content: ""; position: absolute; width: 100px; height: 100px; border-radius: 50%; background: var(--bg); }
.donut-num { position: relative; font-size: var(--size-display); font-weight: var(--weight-semibold); color: var(--text); letter-spacing: -0.02em; }

/* Tarefas orfas */
.orfas-card .painel-cabecalho h2 { margin: 0; }
.orfas-lista { padding: var(--space-sm); display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.orfa-item { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-sm); border-radius: var(--radius); }
.orfa-item:hover { background: var(--surface); }
.orfa-item > .material-symbols-outlined { color: var(--warning); font-size: 20px; flex-shrink: 0; font-variation-settings: "FILL" 1; }
.orfa-titulo { font-weight: var(--weight-semibold); color: var(--text); margin: 0; font-size: var(--size-meta); }
.orfa-vazio { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md); }
.orfa-vazio .material-symbols-outlined { color: var(--success); font-size: 20px; }

/* Ocupacao por nucleo */
.ocupacao-nucleo { display: flex; align-items: center; gap: var(--space-sm); }

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

/* =========================================================================
   Ingerir: reproduz o mockup do Stitch "Ingerir Tarefas" = card do form (nome +
   data + textarea + Classificar), estado (resultado vai pra fila) e 3 cards de
   contexto. O fluxo real classifica e redireciona pra fila (HX-Redirect).
   ========================================================================= */

.ingest-card { padding: var(--space-xl); margin-bottom: var(--space-lg); }
.ingest-card-titulo { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.ingest-card-titulo .material-symbols-outlined { color: var(--accent); font-size: 28px; }
.ingest-card-titulo h2 { margin: 0; }
.ingest-intro { max-width: 640px; margin-bottom: var(--space-lg); }
.ingest-form { display: flex; flex-direction: column; gap: var(--space-lg); }
.ingest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
.ingest-form .campo { display: flex; flex-direction: column; gap: var(--space-xs); }
.ingest-form .campo label { margin: 0; }
.ingest-acoes { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-md); }

.ingest-estado { text-align: center; padding: var(--space-2xl) var(--space-lg); border: 1px dashed var(--border); border-radius: 12px; background: var(--surface); margin-bottom: var(--space-lg); }
.ingest-estado-icone { font-size: 48px; color: var(--text-muted); background: var(--surface-2); width: 88px; height: 88px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; margin-bottom: var(--space-md); }
.ingest-estado h3 { margin: 0 0 var(--space-xs); color: var(--text); font-size: var(--size-h2); }
.ingest-estado p { max-width: 440px; margin: 0 auto; }

.ingest-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.ingest-dica { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); }
.ingest-dica > .material-symbols-outlined { color: var(--text-muted); font-size: 22px; }
.ingest-dica h4 { margin: 0; font-size: var(--size-body); font-weight: var(--weight-semibold); color: var(--text); }
.ingest-dica p { margin: 0; }
.ingest-dica--pro { background: var(--accent-soft); border-color: var(--accent-soft); }
.ingest-dica--pro > .material-symbols-outlined { color: var(--accent); }
.ingest-dica > .ingest-dica-bg { position: absolute; right: -12px; top: -12px; font-size: 80px; color: var(--text); opacity: 0.06; }

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

/* =========================================================================
   Usuarios: reproduz o mockup do Stitch "Gestão de Usuários" = 4 stats, painel
   de contas (tabela com avatar + nucleo + 2FA + acoes em icones) e painel de
   enderecamento por membro.
   ========================================================================= */

.contas-painel, .endereco-painel { margin-bottom: var(--space-lg); }

/* Criar conta (details no cabecalho do painel) */
.criar-conta { display: inline-block; }
.criar-conta > summary { list-style: none; cursor: pointer; }
.criar-conta > summary::-webkit-details-marker { display: none; }
.criar-conta-corpo { padding: var(--space-lg); border-bottom: 1px solid var(--border); background: var(--surface); }
.form-conta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); align-items: end; }
.form-conta-grid .campo { display: flex; flex-direction: column; gap: var(--space-xs); }
.form-conta-grid > button { align-self: end; }
/* Filtros de janela da tela de Carga (14d/28d/Total). */
.carga-filtros { display: flex; gap: var(--space-xs); margin-top: var(--space-xs); }
.chip-filtro { font-size: var(--size-meta); padding: 2px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); text-decoration: none; }
.chip-filtro:hover { background: var(--surface-2); }
.chip-filtro--ativo { background: var(--text); color: #FFFFFF; border-color: transparent; }
/* Card proprio de Nucleos (ONE-02): chips dos nucleos + form de criar em <details>. */
.nucleos-chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); padding: var(--space-lg); border-bottom: 1px solid var(--border); }
.criar-nucleo { padding: var(--space-md) var(--space-lg); }
.criar-nucleo[open] > summary { margin-bottom: var(--space-md); }

/* Celula de usuario: avatar + nome + email */
.user-cel { display: flex; align-items: center; gap: var(--space-sm); }
.user-info { min-width: 0; }
.user-nome { font-weight: var(--weight-semibold); color: var(--text); margin: 0; }
.user-info .meta { margin: 0; }

/* Acoes em icones + popover de reset senha */
.user-acoes { display: inline-flex; align-items: center; gap: var(--space-xs); justify-content: flex-end; }
.botao-icone {
  min-height: 36px; width: 36px; padding: 0; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--bg); color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.botao-icone:hover { color: var(--accent); background: var(--accent-soft); }
.botao-icone .material-symbols-outlined { font-size: 20px; }
.botao-icone--danger:hover { color: var(--danger); background: var(--danger-bg); }
.acao-pop { position: relative; display: inline-block; }
.acao-pop > summary { list-style: none; }
.acao-pop > summary::-webkit-details-marker { display: none; }
.acao-pop-form {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; width: 220px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: var(--space-md);
  display: flex; flex-direction: column; gap: var(--space-xs);
}
.acao-pop-form .primario { width: 100%; }

/* Enderecamento por membro */
.endereco-corpo { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-lg); }
.endereco-bloco { display: flex; flex-direction: column; gap: var(--space-sm); }
.endereco-bloco-nome { display: flex; align-items: center; gap: var(--space-sm); }
.endereco-bloco-nome h3 { margin: 0; font-size: var(--size-body); }
.endereco-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.endereco-campo { position: relative; display: flex; align-items: center; flex: 1; min-width: 200px; }
.endereco-campo .material-symbols-outlined { position: absolute; left: var(--space-sm); font-size: 18px; color: var(--text-muted); pointer-events: none; }
.endereco-campo input { padding-left: 36px; }

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

/* =========================================================================
   Auth (login, 2FA setup/verify): card centrado num fundo atmosferico, igual
   ao mockup do Stitch. Telas standalone (sem sidebar), body.auth.
   ========================================================================= */

body.auth {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: var(--space-lg);
  background:
    radial-gradient(circle at 85% -10%, var(--accent-soft), transparent 45%),
    radial-gradient(circle at 10% 110%, #EEF2FF, transparent 40%),
    var(--bg);
}
.auth-card {
  width: 100%; max-width: 420px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-md); padding: var(--space-2xl);
}
.auth-card--lg { max-width: 520px; }
.auth-marca { text-align: center; margin-bottom: var(--space-xl); }
.auth-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--radius);
  background: var(--accent); color: #fff; margin-bottom: var(--space-md); font-size: 28px;
}
.auth-icone-2fa {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); margin-bottom: var(--space-md); font-size: 32px;
}
.auth-marca h1 { font-size: var(--size-h2); margin: 0 0 var(--space-xs); }
.auth-marca .meta { margin: 0; }
.auth-form { display: flex; flex-direction: column; gap: var(--space-lg); }
.auth-campo { display: flex; flex-direction: column; gap: var(--space-xs); }
.auth-campo label { margin: 0; }
.auth-submit { width: 100%; gap: var(--space-xs); }
.auth-rodape { text-align: center; margin-top: var(--space-lg); }

.auth-senha { position: relative; }
.auth-senha input { padding-right: 44px; }
.auth-olho {
  position: absolute; right: var(--space-sm); top: 50%; transform: translateY(-50%);
  min-height: auto; width: auto; padding: 4px; border: none; background: none; color: var(--text-muted);
}
.auth-olho:hover { color: var(--accent); background: none; }
.auth-olho .material-symbols-outlined { font-size: 20px; }

.auth-codigo { text-align: center; font-size: var(--size-h2); letter-spacing: 0.25em; font-weight: var(--weight-semibold); }

.auth-qr { display: flex; justify-content: center; padding: var(--space-md); background: #fff; border: 1px solid var(--border); border-radius: var(--radius); margin: 0 auto var(--space-md); max-width: 240px; }
.auth-qr svg { width: 100%; height: auto; }
.auth-secret-label { text-align: center; margin: 0; }
.auth-secret { text-align: center; margin: var(--space-xs) 0 var(--space-lg); }
.auth-secret code, .auth-recovery code { font-family: ui-monospace, monospace; font-size: var(--size-meta); }
.auth-recovery { margin-bottom: var(--space-lg); }
.auth-recovery ul { columns: 2; list-style: none; padding-left: 0; margin: var(--space-sm) 0 0; }
.auth-check { display: flex; align-items: flex-start; gap: var(--space-sm); font-size: var(--size-meta); color: var(--text-muted); }

/* Arquivadas (CAT-02): secao colapsavel da tela de tarefas com as fora de
   circulacao (desativadas + descartadas). Esmaecida pra sinalizar "fora de uso". */
.arquivadas { margin-top: var(--space-xl); padding: var(--space-lg); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.arquivadas-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-md); }
.arquivadas-header h2 { font-size: 1rem; margin: 0; color: var(--text-muted); }
.arquivadas-lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.arquivada-item { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-md); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); }
.arquivada-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.arquivada-desc { color: var(--text-muted); text-decoration: line-through; }
.arquivada-meta { font-size: var(--size-meta); color: var(--text-muted); }
.badge-origem { display: inline-flex; align-items: center; padding: 2px var(--space-sm); border-radius: 999px; font-size: var(--size-meta); font-weight: 600; white-space: nowrap; }
.badge-origem--arquivada { background: var(--surface-2); color: var(--text-muted); }
.badge-origem--descartada { background: var(--danger-bg); color: var(--danger); }
.arquivada-item button.secundario { white-space: nowrap; }

/* Mapa (CAT-05): edicao de area (rotulo + sinais), toggle ativo e adicionar area.
   Espelha os padroes grupo-add-form / form-editar das tarefas. */
.mapa-linha-inativa td { opacity: 0.55; }
.mapa-linha-inativa .tabela-titulo { text-decoration: line-through; }
.badge-inativa { display: inline-block; margin-left: var(--space-sm); padding: 1px var(--space-sm); border-radius: 999px; font-size: var(--size-meta); font-weight: 600; background: var(--surface-2); color: var(--text-muted); vertical-align: middle; }
/* Form de edicao inline da area (tr com td colspan), igual ao das tarefas. */
.mapa-linha-edit > td { background: var(--accent-soft); }
.mapa-edit-form { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: end; padding: var(--space-sm) 0; }
.mapa-edit-campos { display: flex; flex-wrap: wrap; gap: var(--space-md); flex: 1; }
.mapa-edit-form .campo { display: flex; flex-direction: column; gap: var(--space-xs); flex: 1; min-width: 160px; }
.mapa-edit-form .campo label { margin: 0; }
.mapa-edit-acoes { display: flex; gap: var(--space-sm); }
/* Form de adicionar area, no rodape do painel da matriz. */
.mapa-add-form { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: end; padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--border); background: var(--surface); }
.mapa-add-form .campo { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 150px; }
.mapa-add-form .campo label { margin: 0; }
.mapa-add-form .campo-cresce { flex: 1 1 200px; }
.form-erro { color: var(--danger); font-size: var(--size-meta); font-weight: 600; align-self: center; }

@media (max-width: 720px) {
  .mapa-edit-form .campo, .mapa-add-form .campo { flex: 1 1 100%; }
}

/* Fila: edicao inline do texto da tarefa (clique no titulo) */
.fila-card-titulo--editavel { cursor: pointer; }
.fila-card-titulo--editavel:hover { text-decoration: underline dotted; }
.fila-card-editar { display: flex; flex-direction: column; gap: .5rem; }
.fila-card-editar-input {
  width: 100%; font-size: 1.05rem; padding: .4rem .6rem;
  border: 1px solid var(--border); border-radius: 6px;
}
.fila-card-editar-erro { color: var(--danger); }
.fila-card-editar-acoes { display: flex; gap: .5rem; }

/* Tarefas: handle de arraste do drag-and-drop de nucleo (coluna a esquerda,
   igual ao setor-drag-handle do Mapa) */
.tarefa-drag-handle { cursor: grab; color: var(--text-muted); display: inline-flex; align-items: center; vertical-align: middle; }
.tarefa-drag-handle:hover { color: var(--text); }
.tarefa-drag-handle:active { cursor: grabbing; }
.tarefa-drag-handle .material-symbols-outlined { font-size: 18px; }

/* Notas por tarefa (NOTAS-01): botao 💬 na descricao + painel expansivel. */
.tarefa-desc-titulo { display: inline-flex; align-items: center; gap: .35rem; }
.btn-notas {
  display: inline-flex; align-items: center; gap: 2px;
  border: none; background: none; cursor: pointer; padding: 2px 4px;
  color: var(--text-muted); border-radius: 6px; line-height: 1;
}
.btn-notas:hover { background: var(--surface-2); color: var(--text); }
.btn-notas .material-symbols-outlined { font-size: 18px; }
/* Com notas: icone preenchido (FILL 1) + cor de destaque e contador em pilula. */
.btn-notas.tem-notas { color: var(--accent); }
.btn-notas.tem-notas .material-symbols-outlined { font-variation-settings: "FILL" 1; }
.notas-contador {
  font-size: .72rem; font-weight: 600; line-height: 1;
  background: var(--accent-soft); color: var(--accent-soft-text);
  border-radius: 999px; padding: 1px 6px;
}

.linha-notas > td { background: var(--surface); padding: 0; }
.painel-notas { padding: var(--space-md); }
.painel-notas-cab {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-sm);
}
.btn-fechar-notas {
  border: none; background: none; cursor: pointer; font-size: 1.2rem;
  color: var(--text-muted); line-height: 1; padding: 0 .3rem;
}
.btn-fechar-notas:hover { color: var(--text); }

.notas-feed { list-style: none; margin: 0 0 var(--space-md); padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.nota-item {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: var(--space-sm) var(--space-md);
}
.nota-cab { display: flex; align-items: baseline; gap: .5rem; margin-bottom: 2px; }
.nota-autor { font-weight: 600; }
.nota-texto { white-space: pre-wrap; }
.notas-vazio { margin: 0 0 var(--space-md); }

.nota-editar { display: none; margin-top: var(--space-sm); flex-direction: column; gap: .4rem; }
.nota-editar.aberto { display: flex; }
.nota-editar textarea, .notas-form textarea {
  width: 100%; padding: .4rem .6rem; border: 1px solid var(--border-strong);
  border-radius: 6px; font: inherit; resize: vertical; box-sizing: border-box;
}
.notas-form { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }