/* ══════════════════════════════════════════════════════════════════════════
   style.css — Design tokens e utilitários da plataforma RADinho
   Tema derivado do design system institucional RAD (radenergianomercado.com.br):
   fundo claro esverdeado, tinta quase-preta, acento dourado, apoio navy raro.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --paper:      #F7FCF7;
  --ink:        #040B06;
  --ink-soft:   #4D534E;
  --ink-faint:  #6F7570;
  --line:       #DFE4DF;
  --panel:      #FFFFFF;
  --panel-soft: #EDF2ED;

  /* Acento dourado — NUNCA como cor de texto sobre fundo claro. Uso: sublinhados,
     bordas de foco, barras de progresso/destaque, preenchimento de botão primário
     (sempre com texto --ink por cima). */
  --gold:       #FFBD59;
  --gold-soft:  #FFF0DA;
  --gold-dark:  #DBA24C; /* hover do botão primário */

  /* Apoio raro (navy do site institucional) — usado pontualmente onde é preciso
     um texto/ícone "de destaque" que precise de contraste seguro sobre --paper. */
  --navy:       #141A39;

  /* Texto/borda secundários sobre fundo escuro (topbar, tela de login) */
  --muted-on-dark: #C7D2C9;

  /* Tipografia */
  --font-heading: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  system-ui, Roboto, Helvetica, Arial, sans-serif;
  --font-body:    "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  system-ui, Roboto, Helvetica, Arial, sans-serif;

  /* Posicionamento — linguagem de dados, mantida como está (harmonização leve) */
  --ok:      #2E7D46;  /* Favorável */
  --ok-bg:   #E4F2E8;
  --no:      #B3372E;  /* Contrário */
  --no-bg:   #F9E8E6;
  --warn:    #9A6A0A;  /* Condicionado — já próximo do dourado queimado */
  --warn-bg: #F7EFDC;
  --alt:     #3D5FA8;  /* Alternativa */
  --alt-bg:  #E7EDF8;

  /* Cantos retos em botões/inputs; cards com raio mínimo */
  --radius: 3px;
  --radius-sm: 0px;
  --shadow: 0 1px 3px rgba(4, 11, 6, 0.08), 0 1px 2px rgba(4, 11, 6, 0.06);
}

* { box-sizing: border-box; }

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  margin: 0 0 0.5em 0;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }

p { margin: 0 0 1em 0; color: var(--ink-soft); }

a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }

small, .texto-fraco { color: var(--ink-faint); font-size: 0.85em; }

/* ── Layout base ─────────────────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.5rem;
  background: var(--ink);
  border-bottom: 1px solid var(--ink);
}

/* Em tela estreita os três blocos (marca, navegação, usuário) não cabem lado a
   lado: sem quebrar, eles se sobrepõem — a marca some atrás do menu. A marca
   fica na primeira linha e navegação + usuário dividem a segunda. */
@media (max-width: 560px) {
  .topbar {
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
  }

  .topbar .marca {
    flex-basis: 100%;
  }

  .topbar nav {
    flex: 1 1 auto;
    min-width: 0;
  }
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* logo-rad.png tem ~16% de padding transparente em volta do desenho;
   a altura renderizada é maior que a altura aparente para compensar. */
.marca-logo {
  display: block;
  width: auto;
  flex-shrink: 0;
}

.marca-logo--topbar {
  height: 46px;
}

.marca-logo--login {
  height: 67px;
}

/* Assinatura sob a marca, na tela de login. Fica sobre o fundo escuro,
   então usa o tom claro de apoio. */
.marca-assinatura {
  margin: 0.35rem 0 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--muted-on-dark);
}

.topbar .marca { color: var(--paper); }

.topbar nav {
  display: flex;
  gap: 1.25rem;
  align-items: center;
}

.topbar nav a {
  color: var(--muted-on-dark);
  font-size: 0.92rem;
  font-weight: 500;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid transparent;
}

.topbar nav a:hover {
  color: var(--paper);
  text-decoration: none;
  border-bottom-color: var(--gold);
}

/* ── Abas de módulo ainda indisponível (radinho_web/em_breve.py) ─────────
   O selo é parte do link, não um elemento à parte: se ele quebrasse para
   outra linha, ou fosse recortado numa tela estreita, a aba viraria uma
   promessa sem ressalva — que é justamente o que o módulo proíbe. Daí o
   inline-flex com `white-space: nowrap` e o gap fixo.

   A opacidade reduzida põe a hierarquia no lugar: o roteiro existe, mas não
   compete com o que a pessoa veio fazer. */
.topbar nav a.nav-em-breve {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  font-size: 0.86rem;
  opacity: 0.72;
}

.topbar nav a.nav-em-breve:hover {
  opacity: 1;
}

.nav-selo {
  padding: 0.02rem 0.35rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  /* O selo é a ressalva: ele não pode encolher a ponto de sumir quando a
     barra aperta. Quem cede espaço é o gap da nav, não ele. */
  flex-shrink: 0;
}

/* Quatro abas + identificação + Sair não cabem em toda largura. Com nowrap
   nas abas, o excesso vira ROLAGEM da própria nav em vez de quebra de linha:
   uma aba cortada ao meio, ou um selo isolado numa segunda linha, é pior do
   que uma aba que a pessoa alcança rolando. A barra de rolagem fica oculta —
   o gesto continua valendo. */
.topbar nav {
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
}

.topbar nav::-webkit-scrollbar {
  display: none;
}

@media (max-width: 1080px) {
  .topbar nav {
    gap: 0.85rem;
  }
}

/* ── Página do módulo indisponível ───────────────────────────────────── */

/* `max-width` sozinho encosta o card à esquerda do container: o `auto` nas
   laterais é o que sobra da largura ser dividido em dois. Sem ele, o conteúdo
   fica centralizado DENTRO do card (text-align) enquanto o card inteiro fica
   torto na página — que era exatamente o sintoma. */
.em-breve {
  max-width: 34rem;
  margin: 2rem auto 0;
  text-align: center;
}

.em-breve-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.25rem;
  height: 4.25rem;
  margin-bottom: 0.75rem;
  border-radius: 999px;
  background: var(--gold-soft);
  /* O dourado nunca é cor de texto sobre fundo claro (ver :root), mas aqui é
     traço de ícone sobre o próprio fundo dourado suave — por isso o navy. */
  color: var(--navy);
}

.em-breve-descricao {
  font-size: 1.02rem;
  color: var(--ink-soft);
}

.em-breve-mensagem {
  color: var(--ink-faint);
}

.topbar .usuario {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.88rem;
  color: var(--muted-on-dark);
  /* min-width:0 é o que permite ao identificador encolher: sem isso o flex item
     não desce abaixo do seu min-content e empurra a barra além da viewport. */
  min-width: 0;
}

/* O admin aparece pelo primeiro nome ("Matheus"), mas o cliente aparece pelo
   e-mail inteiro ("try@tryenergia.com.br") — em 390px isso estourava a barra
   para fora da tela. O botão de sair nunca encolhe; o identificador, sim. */
.topbar .usuario > span,
.topbar .usuario > .identificacao {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.topbar .usuario .btn {
  flex-shrink: 0;
}

.topbar .btn {
  background: transparent;
  border-color: var(--muted-on-dark);
  color: var(--paper);
}

.topbar .btn:hover {
  background: rgba(247, 252, 247, 0.1);
  border-color: var(--paper);
}

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.container-estreito {
  max-width: 460px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.tela-centralizada {
  min-height: calc(100vh - 62px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.tela-escura {
  background: var(--ink);
}

/* ── Flash messages ──────────────────────────────────────────────────── */

.flash {
  padding: 0.7rem 1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.flash-erro { background: var(--no-bg); color: var(--no); }
.flash-info { background: var(--gold-soft); color: var(--ink); }

/* ── Cards ───────────────────────────────────────────────────────────── */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}

.card + .card { margin-top: 1rem; }

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

/* ── Botões ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--ink);
  background: var(--panel);
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.btn:hover { background: var(--panel-soft); text-decoration: none; }

.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  width: 100%;
}

.btn-primary:hover { background: var(--gold-dark); border-color: var(--gold-dark); }

/* ── Formulários ─────────────────────────────────────────────────────── */

.campo { margin-bottom: 1.1rem; }

.campo label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="number"],
.campo input[type="password"],
.campo select,
.campo textarea {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--panel);
  color: var(--ink);
}

.campo textarea {
  min-height: 5.5rem;
  resize: vertical;
  line-height: 1.5;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}

/* Campo preenchido pela consulta escolhida, e não pelo operador (o órgão, o
   número e o título de uma fase nova). Continua legível de propósito — o
   ponto é ele VER o dado que herdou —, só anuncia que não é dele.
   `opacity: 1` porque o padrão do Safari/iOS desbota até ficar ilegível. */
.campo input:disabled,
.campo select:disabled {
  background: var(--panel-soft);
  color: var(--ink-soft);
  cursor: not-allowed;
  opacity: 1;
}

/* ── Escolha — opção de rádio em bloco ──────────────────────────────────
   A bifurcação que abre o cadastro de consulta pública. As duas alternativas
   têm o mesmo peso visual e a mesma área de clique: a pergunta ("consulta
   nova ou fase de uma que já existe?") não tem resposta óbvia à distância, e
   sugerir uma delas pelo desenho é como o operador errava antes. */

.escolha {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.9rem;
  cursor: pointer;
}

.escolha + .escolha { margin-top: 0.5rem; }
.escolha:hover { background: var(--panel-soft); }

/* `:hover` também na regra: sem isso o hover (0,2,0) vence a opção marcada
   (0,1,0) e a escolha ativa some debaixo do mouse justamente enquanto o
   operador está lendo as duas. */
.escolha--ativa,
.escolha--ativa:hover {
  border-color: var(--ink);
  background: var(--gold-soft);
}

.escolha input[type="radio"] { margin-right: 0.5rem; }
.escolha .escolha-nota { display: block; margin: 0.3rem 0 0 1.4rem; }
/* Texto de apoio abaixo de um campo — usado para explicar a política de senha
   ANTES de a pessoa errar, em vez de só recusar depois do envio. */
.campo-ajuda {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

/* Caixa de seleção com rótulo ao lado (ex.: "confiar neste dispositivo").
   O label aqui é uma frase, não um rótulo de campo — por isso desfaz o
   uppercase/letter-spacing herdado de `.campo label`. */
.campo-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-bottom: 1.1rem;
}

.campo-checkbox input[type="checkbox"] {
  margin-top: 0.15rem;
  width: 1rem;
  height: 1rem;
  accent-color: var(--gold);
  flex-shrink: 0;
}

.campo-checkbox label {
  display: block;
  margin-bottom: 0;
  font-family: inherit;
  font-size: 0.87rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* Rodapé de links das telas de acesso (cadastrar-se, esqueci a senha). */
.auth-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-top: 1.25rem;
  font-size: 0.87rem;
}

/* ── Pills (posicionamento e status) ────────────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Chips de tema. O texto é o rótulo da taxonomia (campo `categoria`), que o
   categorizar_temas.py limita a 6 palavras — não mais a frase crua do LLM, que
   chegava a 218 caracteres. O `tema` completo fica no title.

   A quebra é nos espaços, e não `overflow-wrap: anywhere`: aquilo existia para
   conter texto de tamanho imprevisível e, com rótulo curto, só servia para
   partir "Instrumentos" no meio da palavra. O line-clamp continua como rede de
   segurança para quando a categorização não rodou e o chip cai de volta no
   `tema` longo (ver _rotulo_tema em services/workspace.py). */
.pill--tema {
  display: -webkit-inline-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
  white-space: normal;
  text-align: left;
  overflow-wrap: break-word;

  /* Menor que os pills de posicionamento de propósito: o tema é etiqueta de
     assunto, não o dado que a tela está apresentando. Numa lista de dez, o
     tamanho cheio faz a linha de temas competir com o título da página. */
  padding: 0.12rem 0.5rem;
  font-size: 0.72rem;

  /* Piso neutro para tema fora do catálogo (chave gravada e depois removida
     de services/temas.TEMAS, que não tem `.tema--<chave>`): sem isto o chip
     sairia sem fundo nenhum. */
  background: var(--panel-soft);
  color: var(--ink-faint);
}

/* A coluna empilha até 3 chips; sem um piso de largura a tabela a espreme a
   ponto de o rótulo quebrar a cada palavra. */
.col-temas {
  min-width: 190px;
}

/* Variante contorno — usada quando um pill de posicionamento não é a
   posição "principal" exibida na linha (ex.: a posição de UMA proposta
   específica, ao lado da posição do agente inteiro, já mostrada em pill
   sólido). Mesma paleta (herda a cor de .p-ok/.p-no/etc via currentColor),
   só troca o preenchimento por contorno — reforça visualmente que é uma
   granularidade subordinada, sem introduzir uma paleta nova. */
.pill--outline {
  background: transparent;
  border: 1px solid currentColor;
}

.p-ok      { background: var(--ok-bg);   color: var(--ok); }
.p-no      { background: var(--no-bg);   color: var(--no); }
.p-warn    { background: var(--warn-bg); color: var(--warn); }
.p-alt     { background: var(--alt-bg);  color: var(--alt); }
.p-neutral { background: var(--panel-soft); color: var(--ink-faint); }
.p-accent  { background: var(--gold-soft); color: var(--ink); }

/* ── Barra empilhada de posicionamento ──────────────────────────────── */

.stack {
  display: flex;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--panel-soft);
}

.stack > span { display: block; height: 100%; }

.stack .s-ok   { background: var(--ok); }
.stack .s-no   { background: var(--no); }
.stack .s-warn { background: var(--warn); }
.stack .s-alt  { background: var(--alt); }
.stack .s-neutral { background: var(--ink-faint); }

.stack-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.stack-legenda .item { display: flex; align-items: center; gap: 0.35rem; }

.stack-legenda .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* ── Barra de progresso ──────────────────────────────────────────────── */

.bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--panel-soft);
  overflow: hidden;
}

.bar > span {
  display: block;
  height: 100%;
  background: var(--gold);
  border-radius: 999px;
  transition: width 0.2s ease;
}

/* ── Tabela ──────────────────────────────────────────────────────────── */

table.ui {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

table.ui th {
  text-align: left;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  font-weight: 600;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--line);
}

table.ui td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: top;
}

table.ui tr:last-child td { border-bottom: none; }
table.ui tr:hover td { background: var(--panel-soft); }

/* ── Utilitários ─────────────────────────────────────────────────────── */

.stack-v { display: flex; flex-direction: column; gap: 0.75rem; }
.row { display: flex; align-items: center; gap: 0.75rem; }
.row-entre { display: flex; align-items: center; justify-content: space-between; }
.mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; }
.texto-centro { text-align: center; }

/* ── Seleção de temas (cadastro e perfil) ────────────────────────────── */

/* São dez opções de rótulo curto. Uma coluna vertical de dez caixas empurraria
   o botão de enviar para fora da primeira tela no celular — e um formulário
   cujo botão não se vê é um formulário que não se envia. O grid de largura
   mínima acomoda duas colunas em telas estreitas e três ou mais no desktop,
   sem media query. */
.campo-temas { border: none; padding: 0; margin-bottom: 1.1rem; }

.campo-temas legend {
  padding: 0;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
}

.temas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.45rem 0.75rem;
}

/* A caixa inteira é clicável (o <input> vive dentro do <label>): o alvo de
   toque de uma checkbox de 1rem é pequeno demais para o dedo, e errar o alvo
   aqui significa não receber uma consulta pública. */
.temas-grid .tema-opcao {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.3;
  /* desfaz o uppercase/letter-spacing herdado de `.campo label` — aqui o
     texto é o nome do tema, lido como palavra e não como rótulo de campo */
  font-family: inherit;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
  margin-bottom: 0;
}

.temas-grid .tema-opcao:hover { border-color: var(--gold); }

.temas-grid .tema-opcao input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--gold);
  flex-shrink: 0;
  margin: 0;
}

.temas-grid .tema-opcao:has(input:checked) {
  border-color: var(--gold);
  background: var(--gold-soft);
}

.mb-1 { margin-bottom: 0.5rem; }

/* O identificador do usuário na barra superior virou link para o perfil. Sem
   isto ele herdaria o azul-marinho de `a`, que sobre o fundo escuro da barra
   é quase ilegível — e a barra deixaria de parecer uma barra só. */
.topbar .usuario .identificacao { color: var(--muted-on-dark); }
.topbar .usuario .identificacao:hover { color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--gold); }