/* Painel — a base visual do site (planner 879_A): tokens do app, casca, pecas comuns e celular.
   O mockup aprovado (docs/planner/879_A_mockup.html, tabela "Medidas") e o contrato: cada medida abaixo
   nasce token no :root e o resto do arquivo so usa var(--...) (ARQ-01, vigiado por teste). Paleta do app:
   sol_conversor/ui/theme.py e .claude/rules/ui.md. O login.css carrega estes mesmos tokens. */

:root {
  /* cores — fundos e texto */
  --bg-1: #1e1e1e;
  --bg-2: #252526;
  --bg-3: #2d2d30;
  --bg-hover: #3c3c3c;
  --bg-selected: #094771;
  --text-main: #cccccc;
  --text-white: #ffffff;
  --text-hint: #858585;
  --border: #3e3e42;
  --cobertura: rgba(0, 0, 0, 0.55);
  /* cores — azul e destaques */
  --accent-blue: #007acc;
  --accent-blue-hover: #1a8ad4;
  --accent-green: #4ec9b0;
  --accent-red: #cc3333;
  /* cores — botao por papel (D4) */
  --neutro: #1f3a52;
  --neutro-txt: #e6f2ff;
  --neutro-hover: #28496a;
  --add: #173f37;
  --add-txt: #7fe0cb;
  --add-hover: #1d4d43;
  --perigo: #4b2a2a;
  --perigo-hover: #5e3333;
  --aviso: #4a3a26;
  --aviso-txt: #f0b98d;
  --aviso-hover: #5d4930;
  --filtro: #22272c;
  --filtro-hover: #2b3238;
  /* cores — selo de situacao: ok (verde), atencao (ambar), problema (vermelho), neutro (cinza) */
  --verde-bg: #1e3a34;
  --ambar-bg: #3c3c2c;
  --ambar-txt: #e8d9a8;
  --verm-bg: #3a2626;
  --verm-txt: #ff8a8a;
  --cinza-bg: #35373b;
  --cinza-txt: #b8b8b8;
  /* cantos */
  --r-peq: 5px;
  --r-bot: 6px;
  --r-med: 10px;
  --r-gra: 14px;
  /* escala de espaco unica: 4 · 8 · 12 · 16 · 24 (+ a folga lateral do conteudo) */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --folga-lado: 28px;
  /* letra */
  --fonte: 'Segoe UI', 'Inter', sans-serif;
  --fonte-mono: 'Consolas', 'Menlo', monospace;
  --letra: 13px;
  --letra-dica: 12px;
  --letra-bot: 12px;
  --letra-mini: 11px;
  --letra-quadro: 14px;
  --letra-titulo: 22px;
  /* alturas */
  --alt-bot: 28px;
  --alt-mini: 24px;
  --alt-campo: 32px;
  --alt-dedo: 36px;
  --alt-topo-cel: 60px;
  /* larguras e medidas fixas */
  --menu: 220px;
  --conteudo-max: 1280px;
  --corte-celular: 767px; /* o CSS nao aceita var() dentro de @media: o literal fica so na linha da @media */
  --marca: 26px;
  --avatar: 30px;
  --larg-busca: 300px;
  --larg-login: 340px;
  --form-max: 360px;
  --metrica-min: 220px;
  --dialog-min: 420px;
  --dialog-max: 520px;
  --construcao-max: 480px;
  --pag-min: 32px;
  --prefixo-diff: 12px;
  --filete: 3px;
  --seta: 6px;
  /* ficha do projeto (879_C_A) */
  --ficha-rotulo: 96px;
  --ficha-data: 48px;
  --ficha-principal-min: 360px;
  --ficha-lado-min: 240px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-1);
  color: var(--text-main);
  font-family: var(--fonte);
  font-size: var(--letra);
  line-height: 1.45;
  height: 100%;
}

/* ---------------- Casca: menu lateral + conteudo ---------------- */

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

.topo-cel { display: none; }

.sidebar {
  width: var(--menu);
  flex: 0 0 var(--menu);
  background: var(--bg-2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: var(--e4) var(--e3);
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: 0 var(--e2) var(--e4);
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--marca);
  height: var(--marca);
  background: var(--accent-blue);
  color: var(--text-white);
  font-weight: 700;
  font-size: var(--letra);
  border-radius: var(--r-peq);
}

.brand-text {
  color: var(--text-white);
  font-weight: 600;
  font-size: var(--letra-quadro);
}

.menu-group-label {
  color: var(--text-hint);
  font-size: var(--letra-dica);
  padding: var(--e3) var(--e2) var(--e1);
}

.menu-item {
  display: block;
  color: var(--text-main);
  text-decoration: none;
  padding: var(--e2) var(--e3);
  border-radius: var(--r-med);
}

.menu-item:hover {
  background: var(--bg-hover);
  color: var(--text-white);
}

.menu-item.active {
  background: var(--bg-selected);
  color: var(--text-white);
}

/* Usuario no pe do menu: nome, papel e Sair */
.avatar {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding: var(--e4) var(--e2) 0;
  display: flex;
  align-items: center;
  gap: var(--e3);
}

.avatar-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--avatar);
  height: var(--avatar);
  background: var(--accent-blue);
  color: var(--text-white);
  font-weight: 700;
  font-size: var(--letra-dica);
  border-radius: 50%;
}

.avatar-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.avatar-username {
  color: var(--text-white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avatar-role {
  color: var(--text-hint);
  font-size: var(--letra-dica);
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.content {
  flex: 1;
  padding: var(--e5) var(--folga-lado) var(--e5);
}

/* Tela cheia: o conteudo nao estica alem do limite e fica junto do menu */
.content > * { max-width: var(--conteudo-max); }

/* ---------------- Cabecalho da pagina ---------------- */

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-bottom: var(--e5);
}

/* O rotulo em cima do titulo ("GERENCIAMENTO"...) some; cada tela perde a marcacao no 879_B */
.page-title-wrap .title-eyebrow { display: none; }

.page-title {
  font-size: var(--letra-titulo);
  color: var(--text-white);
  font-weight: 600;
  margin: 0;
}

.page-subtitle {
  color: var(--text-hint);
  margin-top: var(--e1);
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  align-items: center;
}

.texto-hint {
  color: var(--text-hint);
  font-size: var(--letra-dica);
  margin: var(--e1) 0;
}

.em-construcao { max-width: var(--construcao-max); }

/* ---------------- Botoes (D4): preenchidos, sem sublinhado, cor pelo papel ---------------- */

.btn,
.btn-link,
.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  height: var(--alt-bot);
  padding: 0 var(--e4);
  border: 0;
  border-radius: var(--r-bot);
  background: var(--neutro);
  color: var(--neutro-txt);
  font-family: inherit;
  font-size: var(--letra-bot);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.btn:hover,
.btn-link:hover,
.action-btn:hover {
  background: var(--neutro-hover);
  color: var(--neutro-txt);
}

.btn-primary,
.btn-primary:visited {
  background: var(--accent-blue);
  color: var(--text-white);
}

.btn-primary:hover {
  background: var(--accent-blue-hover);
  color: var(--text-white);
}

.btn-add {
  background: var(--add);
  color: var(--add-txt);
}

.btn-add:hover {
  background: var(--add-hover);
  color: var(--add-txt);
}

.btn.danger,
.btn-perigo,
.action-btn.danger {
  background: var(--perigo);
  color: var(--verm-txt);
}

.btn.danger:hover,
.btn-perigo:hover,
.action-btn.danger:hover {
  background: var(--perigo-hover);
  color: var(--verm-txt);
}

.btn-aviso {
  background: var(--aviso);
  color: var(--aviso-txt);
}

.btn-aviso:hover {
  background: var(--aviso-hover);
  color: var(--aviso-txt);
}

/* Botao de filtro com a contagem dentro ("Ativos 7"): desligado no fundo de filtro, ligado em azul */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  align-items: center;
  margin-bottom: var(--e3);
}

.btn-filtro,
.btn-filtro:visited {
  background: var(--filtro);
  color: var(--text-main);
}

.btn-filtro:hover {
  background: var(--filtro-hover);
  color: var(--text-main);
}

.btn-filtro.on,
.btn-filtro.on:hover {
  background: var(--accent-blue);
  color: var(--text-white);
}

.btn-filtro em {
  font-style: normal;
  font-weight: 400;
  opacity: 0.75;
}

/* Quadro "Cuidado": uma linha por acao perigosa, 1 filete entre elas */
.cuidado-linha {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e2) 0;
}

.cuidado-linha + .cuidado-linha { border-top: 1px solid var(--border); }
.cuidado-texto { flex: 1; min-width: 0; }
.cuidado-titulo { display: block; color: var(--text-white); }

.cuidado-frase {
  display: block;
  color: var(--text-hint);
  font-size: var(--letra-dica);
}

/* Caixa de confirmacao na linha: pergunta, o que acontece, Confirmar (azul) e Voltar (neutro) */
.confirma {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--r-med);
  padding: var(--e3) var(--e4);
  margin: var(--e3) 0 0;
}

.confirma-pergunta {
  display: block;
  color: var(--text-white);
  margin-bottom: var(--e1);
}

.confirma-frase {
  display: block;
  color: var(--text-hint);
  font-size: var(--letra-dica);
}

.confirma-botoes {
  display: flex;
  gap: var(--e2);
  margin-top: var(--e3);
}

/* Botao de linha de tabela e botao pequeno */
.action-btn,
.btn-mini,
.btn-small {
  height: var(--alt-mini);
  padding: 0 var(--e3);
  font-size: var(--letra-mini);
}

.btn:disabled,
.action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  justify-content: flex-end;
}

/* ---------------- Quadros, numeros, estado vazio ---------------- */

.card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-gra);
  overflow: hidden;
}

.card-header {
  padding: var(--e3) var(--e5);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-titulo {
  margin: 0;
  color: var(--text-white);
  font-size: var(--letra-quadro);
  font-weight: 600;
}

.card-body { padding: var(--e4) var(--e5); }

.card-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  align-items: center;
  padding: var(--e3) var(--e5);
  border-bottom: 1px solid var(--border);
}

.card-toolbar form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--metrica-min), 1fr));
  gap: var(--e4);
  margin-bottom: var(--e4);
}

.metric-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-gra);
  padding: var(--e3) var(--e4);
}

.metric-label {
  color: var(--text-hint);
  font-size: var(--letra-dica);
}

.metric-value {
  font-size: var(--letra-titulo);
  color: var(--text-white);
  font-weight: 600;
}

.metric-value .unit {
  font-size: var(--letra);
  color: var(--text-hint);
  margin-left: var(--e1);
}

.metric-trend {
  font-size: var(--letra-dica);
  margin-top: var(--e1);
  display: flex;
  align-items: center;
  gap: var(--e1);
}
.metric-trend.up { color: var(--accent-green); }
.metric-trend.flat { color: var(--text-hint); }
.metric-trend.down { color: var(--verm-txt); }

.estado-vazio {
  padding: var(--e5) var(--e4);
  text-align: center;
}

.estado-vazio-frase {
  margin: 0;
  color: var(--text-main);
}

.estado-vazio-dica {
  margin: var(--e1) 0 0;
  color: var(--text-hint);
  font-size: var(--letra-dica);
}

/* ---------------- Tabela ---------------- */

.tabela-container { overflow-x: auto; }

.tabela {
  width: 100%;
  border-collapse: collapse;
}

.tabela th {
  text-align: left;
  padding: var(--e3) var(--e4);
  color: var(--text-hint);
  font-size: var(--letra-dica);
  font-weight: 400;
  border-bottom: 1px solid var(--border);
}

.tabela td {
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--border);
  color: var(--text-main);
  vertical-align: middle;
}

.tabela tbody tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover td { background: var(--bg-3); }
.tabela td.email { font-family: var(--fonte-mono); color: var(--text-white); }
.tabela td.numeric { font-family: var(--fonte-mono); color: var(--text-white); text-align: right; }
.tabela td.muted { color: var(--text-hint); }

/* ---------------- Selos de situacao ---------------- */

.badge,
.badge-disabled {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--e2);
  font-size: var(--letra-dica);
  line-height: 1.7;
  border-radius: var(--r-peq);
  font-weight: 600;
  background: var(--cinza-bg);
  color: var(--cinza-txt);
}

.badge-active,
.badge-success {
  background: var(--verde-bg);
  color: var(--accent-green);
}

.badge-suspended {
  background: var(--ambar-bg);
  color: var(--ambar-txt);
}

.badge-problema {
  background: var(--verm-bg);
  color: var(--verm-txt);
}

/* ---------------- Trilha, paginacao ---------------- */

.breadcrumb {
  color: var(--text-hint);
  font-size: var(--letra-dica);
  margin-bottom: var(--e4);
}
.breadcrumb a {
  color: var(--text-hint);
  text-decoration: none;
}
.breadcrumb a:hover { color: var(--accent-blue); }
.breadcrumb-sep { padding: 0 var(--e2); color: var(--border); }
.breadcrumb-current { color: var(--text-main); }

.paginacao {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1);
  justify-content: center;
  padding: var(--e4) 0;
  font-size: var(--letra-bot);
}
.paginacao a, .paginacao .paginacao-disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--pag-min);
  height: var(--alt-bot);
  padding: 0 var(--e2);
  border: 1px solid var(--border);
  border-radius: var(--r-bot);
  color: var(--text-main);
  background: var(--bg-2);
  text-decoration: none;
  font-family: inherit;
}
.paginacao a:hover { background: var(--bg-hover); color: var(--text-white); }
.paginacao a.atual,
.paginacao a[aria-current="page"] {
  background: var(--bg-selected);
  color: var(--text-white);
  border-color: var(--accent-blue);
}
.paginacao .paginacao-disabled {
  color: var(--text-hint);
  background: var(--bg-3);
  cursor: not-allowed;
}

/* ---------------- Campos e combos ---------------- */

.form-row {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  margin-bottom: var(--e3);
  max-width: var(--form-max);
}

.form-row > label { color: var(--text-main); }

.form-label {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  color: var(--text-hint);
}

.form-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  color: var(--text-main);
  margin-right: var(--e4);
  cursor: pointer;
}

.form-actions {
  display: flex;
  gap: var(--e2);
  align-items: center;
  margin-top: var(--e4);
}

.form-erro {
  background: var(--verm-bg);
  border: 1px solid var(--accent-red);
  border-radius: var(--r-med);
  color: var(--text-white);
  padding: var(--e2) var(--e3);
  margin-bottom: var(--e3);
}

/* Campos de texto / data / numero. Exclui hidden, checkbox/radio (estilo proprio). */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="month"],
input[type="datetime-local"],
input[type="time"],
input[type="week"],
textarea,
select {
  height: var(--alt-campo);
  max-width: 100%;
  background-color: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--r-med);
  color: var(--text-white);
  font-family: inherit;
  font-size: var(--letra);
  padding: 0 var(--e3);
  /* color-scheme: dark faz o calendario nativo do date/month picker sair escuro */
  color-scheme: dark;
}

textarea {
  height: auto;
  padding: var(--e2) var(--e3);
}

.search { width: var(--larg-busca); }

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent-blue);
}

input::placeholder,
textarea::placeholder { color: var(--text-hint); }

input:disabled,
textarea:disabled,
select:disabled {
  background: var(--bg-2);
  color: var(--text-hint);
  cursor: not-allowed;
}

/* Icone do calendario (Chromium): invert para ficar visivel no escuro. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
}

/* Combo com seta propria (V feito de dois degrades), no lugar do widget do sistema. */
select {
  /* reserva a seta inteira (duas pernas) + a folga da borda direita + uma folga antes do texto */
  padding-right: calc(var(--e4) + var(--seta) * 2 + var(--e2));
  text-overflow: ellipsis;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-main) 50%),
    linear-gradient(135deg, var(--text-main) 50%, transparent 50%);
  background-position:
    calc(100% - var(--e4) - var(--seta)) 50%,
    calc(100% - var(--e4)) 50%;
  background-size: var(--seta) var(--seta);
  background-repeat: no-repeat;
}

select:hover { border-color: var(--bg-hover); }
select option { background: var(--bg-3); color: var(--text-white); }

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent-blue);
  cursor: pointer;
}

/* ---------------- Auditoria: diff (GitHub-style) ---------------- */

.diff-bloco {
  margin-top: var(--e1);
  display: flex;
  flex-direction: column;
  gap: var(--e1);
}
.diff-linha {
  font-family: var(--fonte-mono);
  font-size: var(--letra-dica);
  padding: var(--e1) var(--e3);
  border-left: var(--filete) solid transparent;
  white-space: pre-wrap;
  word-break: break-word;
}
.diff-prefixo {
  display: inline-block;
  width: var(--prefixo-diff);
  font-weight: 600;
}
.diff-add {
  color: var(--accent-green);
  border-left-color: var(--accent-green);
  background-color: var(--verde-bg);
}
.diff-rem {
  color: var(--verm-txt);
  border-left-color: var(--accent-red);
  background-color: var(--verm-bg);
}
.diff-neutral {
  color: var(--text-hint);
  border-left-color: var(--text-hint);
  background-color: var(--bg-3);
}

/* ---------------- Dialog de confirmacao (excluir definitivo) ---------------- */

.dialog-confirm {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-gra);
  color: var(--text-main);
  padding: var(--e4) var(--e5);
  min-width: var(--dialog-min);
  max-width: var(--dialog-max);
  font-family: var(--fonte);
  font-size: var(--letra);
}

.dialog-confirm::backdrop { background: var(--cobertura); }

.dialog-title {
  margin: 0 0 var(--e3);
  color: var(--text-white);
  font-size: var(--letra-quadro);
  font-weight: 600;
}

.dialog-body {
  color: var(--text-main);
  line-height: 1.5;
  margin: 0 0 var(--e3);
}

.dialog-label {
  display: block;
  color: var(--text-main);
  margin-top: var(--e2);
  margin-bottom: var(--e1);
}

.dialog-hint {
  color: var(--text-hint);
  margin: 0 0 var(--e2);
}

.dialog-hint strong {
  color: var(--text-white);
  font-weight: 600;
}

.dialog-input { width: 100%; }

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--e2);
  margin-top: var(--e4);
}

.alert-banner {
  border-radius: var(--r-med);
  padding: var(--e2) var(--e3);
  margin-bottom: var(--e3);
  line-height: 1.4;
}

.alert-banner.danger {
  background: var(--verm-bg);
  border: 1px solid var(--accent-red);
  color: var(--text-main);
}

/* ---------------- Ficha do projeto (879_C_A) ---------------- */

.ficha-volta { margin-bottom: var(--e3); }

.ficha-titulo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e3);
}

/* 2 colunas: Conclusao e Historico de um lado, Dados e Equipe do outro. Cada coluna tem largura minima (o
   conteudo nao se espreme); abaixo do corte do celular vira uma coluna so (regra na @media do fim do arquivo). */
.ficha-grade {
  display: grid;
  grid-template-columns: minmax(var(--ficha-principal-min), 1.6fr) minmax(var(--ficha-lado-min), 1fr);
  gap: var(--e4);
  align-items: start;
}

.ficha-rodape {
  display: grid;
  grid-template-columns: minmax(var(--ficha-lado-min), 1fr) minmax(var(--ficha-lado-min), 1fr);
  gap: var(--e4);
  margin-top: var(--e4);
  align-items: start;
}

.ficha-coluna,
.ficha-cuidado {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  min-width: 0;
}

.ficha-cuidado .confirma { margin: 0; }

.ficha-linha {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e2) 0;
  border-bottom: 1px solid var(--border);
}

.ficha-linha:last-of-type { border-bottom: 0; }
.ficha-linha form { margin: 0; }
.ficha-rotulo { color: var(--text-hint); width: var(--ficha-rotulo); flex: none; }
.ficha-valor { color: var(--text-white); min-width: 0; overflow-wrap: anywhere; }
.ficha-direita { margin-left: auto; }

.ficha-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-top: var(--e3);
}

.ficha-dar-acesso {
  display: flex;
  gap: var(--e2);
  align-items: center;
  margin-top: var(--e3);
}

.ficha-dar-acesso { align-items: flex-start; }
.ficha-dar-acesso input { flex: 1; min-width: 0; }

/* 932: busca de "Dar acesso" — campo, lista abaixo e a pessoa escolhida no lugar do campo */
.busca-acesso { position: relative; flex: 1; min-width: 0; }
.busca-acesso input { width: 100%; }
.busca-acesso [hidden] { display: none; }
/* A lista abre no fluxo do quadro (empurra o conteudo): o card tem overflow hidden e cortaria uma lista flutuante */
.busca-lista {
  margin-top: var(--e1);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-med);
  padding: var(--e1);
}
.busca-op {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e2) var(--e3);
  border-radius: var(--r-bot);
  cursor: pointer;
}
.busca-op.busca-op-marcada { background: var(--bg-selected); }
.busca-nome { color: var(--text-white); min-width: 0; overflow-wrap: anywhere; }
.busca-mail { color: var(--text-hint); font-size: var(--letra-dica); margin-left: auto; min-width: 0; overflow-wrap: anywhere; }
.busca-lista mark { background: none; color: var(--accent-blue-hover); font-weight: 600; }
.busca-vazio { color: var(--text-hint); padding: var(--e2) var(--e3); }
.busca-escolhido {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-height: var(--alt-campo);
  background: var(--bg-3);
  border: 1px solid var(--accent-blue);
  border-radius: var(--r-med);
  padding: 0 var(--e2) 0 var(--e3);
}
.busca-x { flex: none; margin-left: var(--e2); }
/* 932: em tela estreita a opcao empilha — nome em cima, e-mail embaixo em UMA linha (corta com reticencias, nunca no meio) */
@media (max-width: 767px) { /* literal do token --corte-celular: var() nao vale dentro de @media */
  .busca-op { flex-direction: column; align-items: flex-start; gap: 0; }
  .busca-nome, .busca-mail { max-width: 100%; }
  .busca-mail { margin-left: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

.ficha-historico-item {
  display: flex;
  gap: var(--e4);
  padding: var(--e1) 0;
}

.ficha-data { color: var(--text-hint); min-width: var(--ficha-data); flex: none; }
.ficha-frase { min-width: 0; overflow-wrap: anywhere; }
.ficha-sinc { border-top: 1px solid var(--border); margin-top: var(--e2); padding-top: var(--e2); }
.card-body > .ficha-sinc:first-child { border-top: 0; margin-top: 0; padding-top: 0; }  /* sem acontecimento acima */

/* ---------------- Celular (abaixo do corte: token --corte-celular) ---------------- */

@media (max-width: 767px) { /* literal do token --corte-celular: var() nao vale dentro de @media */
  .layout { flex-direction: column; }

  .topo-cel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
    height: var(--alt-topo-cel);
    padding: 0 var(--e4);
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 20;
  }

  .topo-cel .brand { padding: 0; }

  /* Menu fechado: some. Aberto: cobre a tela logo abaixo do topo. */
  .sidebar {
    display: none;
    position: fixed;
    top: var(--alt-topo-cel);
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    z-index: 10;
    border-right: 0;
    padding: var(--e2) var(--e3) var(--e4);
  }

  .layout.menu-aberto .sidebar { display: flex; }

  .sidebar .brand { display: none; }
  .menu-item { padding: var(--e3); }

  .content { padding: var(--e4) var(--e4) var(--e5); }
  .content > * { max-width: none; }

  /* botao do tamanho do dedo */
  .btn,
  .btn-link,
  .action-btn,
  .btn-mini,
  .btn-small { height: var(--alt-dedo); }

  .search { width: 100%; }

  /* a ficha do projeto numa coluna so: o Cuidado fica abaixo de todos os outros cartoes */
  .ficha-grade,
  .ficha-rodape { grid-template-columns: 1fr; }

  /* o quadro ja tem a folga lateral (.card-body): a fileira de filtros nao soma outra */
  .card-toolbar { padding: var(--e3) 0; }
  .form-row { max-width: none; }
  .dialog-confirm { min-width: 0; max-width: 100%; }

  /* linha de tabela vira cartao */
  .tabela-container { overflow-x: visible; }
  .tabela,
  .tabela tbody { display: block; }
  .tabela thead { display: none; }
  .tabela tr {
    display: flex;
    flex-direction: column;
    gap: var(--e1);
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-gra);
    padding: var(--e3) var(--e4);
    margin-bottom: var(--e3);
  }
  .tabela td {
    display: block;
    padding: 0;
    border-bottom: none;
  }
  .tabela tbody tr:hover td { background: transparent; }
  .tabela td:empty { display: none; }
  .tabela .actions { justify-content: flex-start; }
}

/* ---------------- Painel (879_D_A): linhas do que esta esperando por voce ---------------- */

.painel-linha {
  display: flex;
  align-items: center;
  gap: var(--e4);
  padding: var(--e3) 0;
}

.painel-linha + .painel-linha { border-top: 1px solid var(--border); }
.painel-linha:first-child { padding-top: 0; }
.painel-linha:last-child { padding-bottom: 0; }

.painel-linha-texto { flex: 1; min-width: 0; }

.painel-linha-titulo {
  display: block;
  color: var(--text-white);
  overflow-wrap: anywhere;
}

.painel-linha-dica {
  display: block;
  color: var(--text-hint);
  font-size: var(--letra-dica);
  overflow-wrap: anywhere;
}

.painel-linha-acoes {
  display: flex;
  gap: var(--e2);
  flex: none;
}

.painel-linha-pergunta { display: block; }
.painel-linha-pergunta .confirma { margin: 0; }

.painel-quadro { margin-top: var(--e4); }

@media (max-width: 767px) { /* literal do token --corte-celular: var() nao vale dentro de @media */
  .painel-linha { flex-direction: column; align-items: stretch; gap: var(--e3); }
  .painel-linha-acoes .btn { flex: 1; height: var(--alt-dedo); }
}

/* ---------------- 879_B_A: cadastros (Usuarios, Softwares de origem, Parametros da IA) ---------------- */
/* 920_C (conferencia do PO): respiro entre os campos de uma linha (Raciocinio e Esforco) */
.campos-linha { width: max-content; max-width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.campos-linha .texto-hint { margin: 0; }
/* cada caixa anda junto com o seu rotulo: a linha so quebra ENTRE as duas unidades */
.campo-com-rotulo { display: inline-flex; align-items: center; gap: var(--e2); }

/* 920_C: bloco Fornecedores — botao da proposta, Motivo x Vetar e etiquetas com espaco entre si */
.forn-faixa form { margin-top: var(--e3); }
.forn-veto { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.forn-nome { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }

/* caixa de confirmacao do Excluir software: popover nativo, sem script */
[popover] {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
}

/* ---------------- 879_B_B: relatorios (Eventos, Faturamento, Auditoria, Erros) ---------------- */

/* seletor de mes: "‹ Outubro de 2026 ›"; a seta tem a altura do botao */
.seletor-mes {
  display: flex;
  align-items: center;
  gap: var(--e2);
}

.mes-rotulo {
  color: var(--text-white);
  font-weight: 600;
}

.btn-seta {
  width: var(--alt-bot);
  padding: 0;
}

/* faixa de resumo: o numero do mes de um lado, "Baixar planilha" do outro */
.resumo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-gra);
  padding: var(--e3) var(--e5);
  margin-bottom: var(--e3);
  color: var(--text-white);
}

.resumo .btn { margin-left: auto; }

/* o combo do dono fica na ponta da fileira dos botoes de filtro */
.filtros form { margin-left: auto; }

/* "Detalhe" da Auditoria e "Mostrar N ocorrencias" do Erro: o <summary> e um botao pequeno */
details > summary.btn {
  list-style: none;
  width: fit-content;
}

details > summary.btn::-webkit-details-marker { display: none; }

/* Erro: classe, mensagem, traceback e payload em bloco de codigo */
.bloco-codigo {
  font-family: var(--fonte-mono);
  font-size: var(--letra-dica);
  background: var(--bg-1);
  color: var(--text-main);
  border: 1px solid var(--border);
  border-radius: var(--r-med);
  padding: var(--e3);
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.lista-dados {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--e1) var(--e4);
  margin: 0 0 var(--e4);
}

.lista-dados dt { color: var(--text-hint); }
.lista-dados dd { margin: 0; min-width: 0; word-break: break-word; }

@media (max-width: 767px) { /* literal do token --corte-celular */
  .btn-seta { width: var(--alt-dedo); }
  .resumo { padding: var(--e3) var(--e4); }
  .resumo .btn { margin-left: 0; }
  .filtros form { margin-left: 0; }
}

/* ---------------- 879_D_B: Meus projetos (a linha do projeto do certificador) ---------------- */
:root { --linhas-motivo: 3; }

/* o motivo da recusa na linha: ate 3 linhas e quebra em qualquer ponto; a nota inteira esta na ficha */
.meu-projeto-motivo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--linhas-motivo);
  overflow: hidden;
  color: var(--verm-txt);
}

.painel-linha-titulo .badge { margin-left: var(--e2); }

/* ---------------- Quadros empilhados direto no conteudo (bug da vitrine de 14/10) ---------------- */
/* Dois quadros um sobre o outro ficam a --e4 um do outro; o quadro que mora dentro de um <form> conta como irmao
   (Parametros da IA). Quadro em grade ou coluna (ficha) ja tem o gap proprio e nao entra no seletor. */
.content > .card ~ .card,
.content > form:has(> .card) ~ .card { margin-top: var(--e4); }

/* 670_A_A: bloco "Modelos aprovados" — caixa de colar, previa do Buscar dados e botoes lado a lado */
.modelos-busca { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin-top: var(--e4); }
.modelos-busca .campo-modelo { flex: 1 1 var(--larg-campo-modelo); max-width: 100%; }
.modelos-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.modelos-previa { margin-top: var(--e3); padding: var(--e3); background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--r-med); }
.modelos-dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--larg-dado-modelo), 1fr)); gap: var(--e2) var(--e4); margin: var(--e3) 0; }
.modelos-dados dd { margin: 0; color: var(--text-white); font-weight: 600; }
.modelos-previa .alert-banner, .modelos-previa .modelos-acoes { margin-top: var(--e3); }
:root { --larg-campo-modelo: 360px; --larg-dado-modelo: 140px; }
/* o bloco "Modelos aprovados" vem num <div> (alvo do htmx): leva a mesma distancia entre quadros */
#bloco-modelos { margin-top: var(--e4); }

/* 670_A_B: abas da pagina Parametros da IA (links) e os campos de um papel (mockup V3) */
:root { --larg-rotulo-papel: 96px; --larg-select-papel: 420px; }
.abas-parametros { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e4); }
#aba-conteudo > * ~ * { margin-top: var(--e4); }
.campos-papel { display: grid; grid-template-columns: var(--larg-rotulo-papel) minmax(0, 1fr); gap: var(--e3) var(--e4); align-items: start; }
.campos-papel > label { padding-top: var(--e2); color: var(--text-hint); }
.pilha { display: flex; flex-direction: column; gap: var(--e1); min-width: 0; }
.pilha select { max-width: min(100%, var(--larg-select-papel)); }
.pilha .texto-hint { margin: 0; }
.teste-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin-top: var(--e2); }
.card-body > section[id^="bloco-forn-"] { margin-top: var(--e4); padding-top: var(--e3); border-top: 1px solid var(--border); }
.form-actions-aba { margin-top: var(--e4); padding-top: var(--e3); border-top: 1px solid var(--border); }

/* ---------------- 811_G_A: a pagina da Aderencia do projeto (partes 1 a 5) ---------------- */
:root { --larg-pergunta-ader: 230px; --larg-num-ader: 72px; --larg-form-ader: 900px; }
.ader-pagina { display: flex; flex-direction: column; gap: var(--e4); max-width: var(--larg-form-ader); }
.ader-form { display: flex; flex-direction: column; gap: var(--e4); max-width: var(--larg-form-ader); }
.ader-form [hidden] { display: none; }
.ader-resp { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); padding: var(--e2) 0; }
.ader-pergunta { width: var(--larg-pergunta-ader); flex: none; color: var(--text-white); }
.ader-num { width: var(--larg-num-ader); }
.ader-opcoes { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }
.ader-opcoes label { display: inline-flex; align-items: center; gap: var(--e1); cursor: pointer; }
.ader-quem { margin-left: auto; color: var(--text-hint); font-size: var(--letra-dica); white-space: nowrap; }
.ader-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin-bottom: var(--e3); }
.ader-contador { color: var(--text-hint); font-size: var(--letra-dica); margin-left: var(--e2); }
.ader-grupos { column-count: 3; column-gap: var(--e5); }
.ader-grupo { break-inside: avoid; margin-bottom: var(--e4); }
.ader-grupo-titulo { color: var(--text-hint); font-size: var(--letra-dica); margin-bottom: var(--e1); }
.ader-item { display: flex; align-items: center; gap: var(--e2); padding: var(--e1) 0; cursor: pointer; }
.ader-obs { border: 1px solid var(--border); border-radius: var(--r-med); padding: var(--e3); margin-bottom: var(--e3); }
.ader-obs-cab { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e2); }
.ader-obs-nome { color: var(--text-white); font-weight: 600; }
.ader-obs textarea { width: 100%; }
@media (max-width: 767px) { /* literal do token --corte-celular */
  .ader-grupos { column-count: 1; }
  .ader-pergunta { width: 100%; }
}

/* 811_G_C_A: a parte 6 da Aderencia (prints). Imagem a esquerda, leitura a direita; so tokens ja existentes. */
.ader-print-anexar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--e2); margin-bottom: var(--e4); }
.ader-print-anexar textarea { flex: 1 1 240px; }
.ader-print-grupo { margin-bottom: var(--e4); }
.ader-print { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e4); border: 1px solid var(--border); border-radius: var(--r-med); padding: var(--e3); margin-bottom: var(--e3); }
.ader-print-imagem img { max-width: 100%; height: auto; border-radius: var(--r-peq); }
.ader-print-leitura form { margin-bottom: var(--e2); }
.ader-print-campo { display: flex; align-items: center; gap: var(--e2); padding: var(--e1) 0; }
.ader-print-campo label { width: var(--larg-pergunta-ader); flex: none; color: var(--text-hint); font-size: var(--letra-dica); }
.ader-print-campo input { flex: 1; }
.ader-print-par { display: flex; gap: var(--e2); padding: var(--e1) 0; }
.ader-print-par input { flex: 1; min-width: 0; }
.ader-print-resumo { color: var(--text-white); margin-bottom: var(--e2); }
.ader-print-descricao textarea { width: 100%; }
/* 964: botao de arquivo em portugues (so com JS: o input nativo some e entram o botao e o nome do arquivo) */
.ader-arquivo { display: inline-flex; align-items: center; gap: var(--e2); }
.ader-arquivo-oculto { display: none; }
.ader-arquivo-nome { color: var(--text-hint); font-size: var(--letra-dica); }
.ader-print-grupo[hidden] { display: none; }
@media (max-width: 767px) { /* literal do token --corte-celular */
  .ader-print { grid-template-columns: 1fr; }
}