/* ============================================================
   IDENTIDADE DA INSTALAÇÃO (decisão D13).

   A folha de estilo é UMA SÓ e vem da origem. Cada instalação declara só os VALORES,
   nunca uma cópia editada desta folha. Se o tema virar CSS copiado dentro de cada
   instância, a divergência que a decisão D8 evitou no código volta pela porta do visual,
   e qualquer ajuste de espaçamento passa a ser três trabalhos.

   Os valores abaixo são sobrescritos em tempo de execução pelo que vem do instancia.json,
   no <script> que o servidor entrega. O que está escrito aqui é só o ponto de partida.

   A prova de que ficou certo: um ajuste de espaçamento feito aqui aparece nas três sem
   ninguém abrir o CSS da Triano.
   ============================================================ */

:root {
  /* Marca. Vem do instancia.json, e estes são valores de partida. */
  --marca-azul:       #1B3A6B;
  --marca-azul-claro: #2E5C9E;
  --marca-amarelo:    #F5C518;
  --marca-branco:     #FFFFFF;

  --raio: 12px;
  --vao: 14px;
  --fonte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* Tema escuro: o padrão da Triano. */
:root, :root[data-tema="escuro"] {
  --fundo:        #0D1520;
  --superficie:   #16243A;
  --elevado:      #1E3050;
  --borda:        #2C4467;

  /* O TEXTO NÃO É AZUL (Carol, 19/08/2026): "azul claro em cima do azul escuro, bater o
     olho rápido nisso não dá para enxergar".
     
     Ela tinha razão, e dá para medir. O tom mais apagado era #6A7E9C, que sobre o cartão
     dá 3,77:1 de contraste. O mínimo que se considera legível é 4,5:1, então aquilo estava
     ABAIXO do aceitável, e não era impressão.
     
     O erro foi meu e tem nome: eu tinha tingido de azul até a escala de cinza, achando que
     "combinava" com a marca. Só que azul sobre azul rouba contraste em vez de dar
     identidade. A cor da marca vive nos botões, nas bordas e nos destaques; o TEXTO existe
     para ser lido.
     
     Agora são cinzas neutros, puxados para o branco:
       --texto        #F2F4F7  sobre o cartão = 14,4:1
       --texto-fraco  #D5D9DF  sobre o cartão = 11,0:1
       --texto-tenue  #A7AEB8  sobre o cartão =  7,0:1   (era 3,77) */
  --texto:        #F2F4F7;
  --texto-fraco:  #D5D9DF;
  --texto-tenue:  #A7AEB8;
  --destaque:     var(--marca-amarelo);
  --primaria:     var(--marca-azul-claro);
  --sombra:       0 2px 12px rgba(0,0,0,.35);
}

:root[data-tema="claro"] {
  /* A Carol disse que o modo claro está bom com as letras em azul escuro, então aqui a
     mudança é pequena: só o tom MAIS APAGADO, que tinha o mesmo problema de contraste do
     escuro. #7C8FAD sobre branco dá 3,5:1; #5E6B7D dá 5,9:1. O resto fica como está. */
  --fundo:        #F2F5FA;
  --superficie:   #FFFFFF;
  --elevado:      #E8EEF7;
  --borda:        #D3DEED;
  --texto:        #10203A;
  --texto-fraco:  #46566F;
  --texto-tenue:  #5E6B7D;
  --destaque:     #C79A00;
  --primaria:     var(--marca-azul);
  --sombra:       0 2px 12px rgba(16,32,58,.10);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fonte);
  background: var(--fundo);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font-family: inherit; font-size: inherit; }

/* ---------------- Cabeçalho ---------------- */
.cab {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 18px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; z-index: 40;
  flex-wrap: wrap;
}
.cab-marca { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 19px; letter-spacing: -.4px; }
.cab-selo {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--marca-azul-claro); color: #fff;
  display: grid; place-items: center; font-size: 15px; font-weight: 800;
}
.cab-nav { display: flex; gap: 3px; margin-left: 8px; flex: 1; }
.cab-nav a {
  padding: 7px 13px; border-radius: 8px; text-decoration: none;
  color: var(--texto-fraco); font-size: 14px; font-weight: 600; white-space: nowrap;
}
.cab-nav a:hover { background: var(--elevado); color: var(--texto); }
.cab-nav a.ativa { background: var(--primaria); color: #fff; }
.cab-dir { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.btn {
  padding: 7px 13px; border-radius: 8px; border: 1px solid var(--borda);
  background: var(--elevado); color: var(--texto); cursor: pointer; font-size: 13px; font-weight: 600;
}
.btn:hover { border-color: var(--primaria); }
.btn-destaque { background: var(--destaque); color: #1a1400; border-color: transparent; font-weight: 700; }
.btn-primaria { background: var(--primaria); color: #fff; border-color: transparent; }
.btn-icone { padding: 7px 10px; }

.cab-eu { position: relative; }
.cab-menu {
  position: absolute; right: 0; top: calc(100% + 7px);
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra);
  min-width: 230px; padding: 6px; z-index: 60;
}
.cab-menu-cab { padding: 10px 12px 8px; border-bottom: 1px solid var(--borda); margin-bottom: 5px; }
.cab-menu-nome { font-weight: 700; font-size: 14px; }
.cab-menu-mail { font-size: 12px; color: var(--texto-tenue); margin-top: 2px; }
.cab-menu button {
  display: block; width: 100%; text-align: left; padding: 9px 12px;
  background: none; border: 0; color: var(--texto); border-radius: 8px;
  cursor: pointer; font-size: 13.5px;
}
.cab-menu button:hover { background: var(--elevado); }

/* ---------------- Barra de filtros ---------------- */
.filtros {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 9px 13px; margin-bottom: var(--vao);
}
.filtros-rotulo { font-size: 12px; color: var(--texto-tenue); font-weight: 600; }
.chip {
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--borda);
  background: transparent; color: var(--texto-fraco); cursor: pointer; font-size: 12.5px; font-weight: 600;
}
.chip.ativo { background: var(--primaria); color: #fff; border-color: transparent; }
.bolinha {
  width: 19px; height: 19px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; padding: 0;
}
.bolinha.ativa { border-color: var(--texto); }
.bolinha-alta  { background: #EF4444; }
.bolinha-media { background: #F59E0B; }
.bolinha-baixa { background: #22C55E; }

.filtros-sep { width: 1px; height: 22px; background: var(--borda); margin: 0 3px; }

/* O trocador de sistema fica AQUI, ao lado das bolinhas (decisão D26). */
.trocador {
  padding: 6px 11px; border-radius: 8px;
  border: 1px solid var(--destaque); background: transparent;
  color: var(--texto); font-size: 12.5px; font-weight: 700; cursor: pointer;
}

/* ---------------- Painel: as três colunas ---------------- */
.conteudo { padding: 16px 18px 60px; max-width: 1900px; margin: 0 auto; }
.saudacao { font-size: 24px; font-weight: 800; margin: 4px 0 14px; letter-spacing: -.5px; }

.mural {
  /* GRID DE COLUNAS IGUAIS. O número de colunas vem da tela, porque ele muda quando o
     Backlog acende. `minmax(0, 1fr)` é o que faz as colunas ESPREMEREM em vez de a quarta
     empurrar as outras para fora: sem o zero, o conteúdo define a largura mínima e o grid
     estoura a linha. */
  display: grid; gap: var(--vao); align-items: start;
}
.coluna {
  box-sizing: border-box;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 13px;
}
.coluna-cab {
  display: flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: 13.5px; letter-spacing: .3px;
  padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--borda);
}
.coluna-n {
  margin-left: auto; background: var(--elevado); color: var(--texto-fraco);
  border-radius: 999px; font-size: 11px; font-weight: 700; padding: 2px 9px;
}
.coluna-vazia { color: var(--texto-tenue); font-size: 13px; text-align: center; padding: 18px 8px; }

.cartao {
  background: var(--elevado); border: 1px solid var(--borda);
  border-left: 3px solid var(--primaria);
  border-radius: 9px; padding: 11px 12px; margin-bottom: 9px; position: relative;
}
.cartao:last-child { margin-bottom: 0; }
.cartao-atraso { border-left-color: #EF4444; }
.cartao-andamento { border-left-color: #22C55E; }
.cartao-topo { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; flex-wrap: wrap; }
.etiqueta {
  font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  padding: 2px 7px; border-radius: 5px;
}
.etiqueta-tarefa { background: var(--marca-azul-claro); color: #fff; }
.etiqueta-rotina { background: var(--destaque); color: #1a1400; }
.cartao-cliente { font-size: 11.5px; color: var(--texto-tenue); font-weight: 600; }
.cartao-titulo { font-size: 14px; font-weight: 600; line-height: 1.35; padding-right: 26px; }
.cartao-meta { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 11.5px; color: var(--texto-tenue); flex-wrap: wrap; }
.cartao-prazo { background: var(--superficie); border-radius: 999px; padding: 2px 8px; }
.cartao-prazo.atrasado { background: #EF444422; color: #FCA5A5; }
.cartao-ok {
  position: absolute; top: 9px; right: 9px;
  width: 21px; height: 21px; border-radius: 50%;
  border: 1.5px solid var(--borda); background: transparent;
  color: var(--texto-tenue); cursor: pointer; font-size: 11px; line-height: 1; padding: 0;
}
.cartao-ok:hover { border-color: #22C55E; color: #22C55E; }

/* ---------------- Caixa de Entrada ---------------- */
.veu {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: grid; place-items: center; z-index: 100; padding: 18px;
}
.modal {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 16px; box-shadow: var(--sombra);
  width: 100%; max-width: 520px; max-height: 88vh; overflow: auto;
}
.modal-cab {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 18px; border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; background: var(--superficie); border-radius: 16px 16px 0 0;
}
.modal-titulo { font-weight: 800; font-size: 16px; flex: 1; }
.modal-corpo { padding: 18px; }
.modal-intro { color: var(--texto-fraco); font-size: 13.5px; margin: 0 0 15px; line-height: 1.5; }

.botao-grande {
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 15px; margin-bottom: 10px;
  background: var(--elevado); border: 1px solid var(--borda);
  border-radius: var(--raio); cursor: pointer; text-align: left; color: var(--texto);
}
.botao-grande:hover { border-color: var(--primaria); }
.botao-grande-ic { font-size: 25px; }
.botao-grande b { display: block; font-size: 15px; }
.botao-grande small { display: block; color: var(--texto-tenue); font-size: 12.5px; margin-top: 2px; }

.campo { margin-bottom: 13px; }
.campo label { display: block; font-size: 12.5px; font-weight: 600; color: var(--texto-fraco); margin-bottom: 5px; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 9px 11px; border-radius: 8px;
  border: 1px solid var(--borda); background: var(--fundo); color: var(--texto);
}
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--primaria); outline-offset: -1px; }
.linha-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }

/* ---------------- Entrar ---------------- */
.entrar-tela { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.entrar-caixa {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 16px; padding: 32px; width: 100%; max-width: 380px; box-shadow: var(--sombra);
}
.entrar-marca { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 6px; font-size: 24px; font-weight: 800; }
.entrar-sub { text-align: center; color: var(--texto-tenue); font-size: 13px; margin-bottom: 24px; }
.erro { color: #FCA5A5; background: #EF444418; border: 1px solid #EF444440; border-radius: 8px; padding: 9px 12px; font-size: 13px; margin-bottom: 13px; }

/* ---------------- Rodapé (decisão D27) ---------------- */
.rodape {
  position: fixed; bottom: 0; left: 0; right: 0;
  padding: 5px 18px; text-align: right;
  font-size: 11px; color: var(--texto-tenue);
  background: var(--superficie); border-top: 1px solid var(--borda);
  z-index: 30;
}

.aviso-vazio { color: var(--texto-tenue); font-size: 14px; padding: 40px; text-align: center; }

/* ---------------- Celular ---------------- */
@media (max-width: 640px) {
  .cab { gap: 10px; padding: 10px 13px; }
  .cab-nav { order: 3; width: 100%; overflow-x: auto; margin-left: 0; }
  .conteudo { padding: 13px 13px 55px; }
  .linha-campos { grid-template-columns: 1fr; }
}

/* ============================================================
   CLIENTES E O QUADRO DE FASES.
   Formato copiado da Foxx a pedido da Carol, com a paleta desta instalação.
   ============================================================ */

.pagina-cab {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.pagina-titulo { font-size: 26px; font-weight: 800; margin: 0; letter-spacing: -.6px; }
.pagina-sub { color: var(--texto-tenue); font-size: 13px; margin-top: 4px; }
.pagina-acoes { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }

.busca {
  padding: 8px 12px; border-radius: 8px; min-width: 210px;
  border: 1px solid var(--borda); background: var(--superficie); color: var(--texto);
}
.busca:focus { outline: 2px solid var(--primaria); outline-offset: -1px; }
.grupo-chips { display: flex; gap: 3px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 9px; padding: 3px; }
.btn-sm { padding: 4px 10px; font-size: 12px; }

/* ---- Lista de clientes ---- */
.lista-clientes { display: flex; flex-direction: column; gap: 11px; }

.cliente-linha {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 15px 17px;
}
.cliente-linha:hover { border-color: var(--primaria); }
.cliente-pausado { opacity: .6; }

.cliente-topo { display: flex; align-items: flex-start; gap: 14px; }
.cliente-nome { font-size: 16.5px; font-weight: 700; letter-spacing: -.2px; }
.cliente-contato { font-size: 13px; color: var(--texto-tenue); margin-top: 2px; }
.cliente-estado { display: flex; align-items: center; gap: 9px; margin-left: auto; flex-wrap: wrap; }

.selo-fase {
  font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  padding: 4px 9px; border-radius: 6px;
  background: var(--elevado); color: var(--texto-fraco); border: 1px solid var(--borda);
}
.selo-ativo { background: #16A34A22; color: #4ADE80; border-color: #16A34A55; }
.selo-implantacao { background: #F5C51822; color: var(--destaque); border-color: #F5C51855; }

/* O interruptor de ligado e desligado, igual ao da Foxx. */
.liga {
  width: 38px; height: 21px; border-radius: 999px; background: var(--elevado);
  border: 1px solid var(--borda); position: relative; display: inline-block; transition: background .15s;
}
.liga-on { background: #16A34A; border-color: #16A34A; }
.liga-bola {
  position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
  border-radius: 50%; background: #fff; transition: left .15s;
}
.liga-on .liga-bola { left: 19px; }
.liga-txt { font-size: 10.5px; font-weight: 800; color: var(--texto-tenue); letter-spacing: .5px; }

.cliente-barra-linha { display: flex; align-items: center; gap: 11px; margin: 13px 0 10px; }
.cliente-barra { flex: 1; height: 4px; background: var(--elevado); border-radius: 999px; overflow: hidden; }
.cliente-barra-fill { height: 100%; background: var(--primaria); border-radius: 999px; transition: width .2s; }
.cliente-barra-txt { font-size: 11.5px; color: var(--texto-tenue); white-space: nowrap; }

.cliente-pe { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--texto-tenue); }
.cliente-pe .ponto { opacity: .5; }
.dia-alerta { color: #F87171; font-weight: 600; }

/* ---- O quadro de fases ---- */
.quadro {
  display: flex; gap: 12px; align-items: flex-start;
  overflow-x: auto; padding-bottom: 12px;
}
.quadro-col {
  flex: 0 0 268px; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 12px; max-height: calc(100vh - 230px); display: flex; flex-direction: column;
}
/* Quem recebe o cartão arrastado precisa DIZER que vai receber, senão a pessoa solta no
   escuro e só descobre onde caiu depois. */
.quadro-col-alvo { border-color: var(--destaque); background: var(--elevado); }

.quadro-col-cab {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase;
  color: var(--texto-fraco);
  padding-bottom: 10px; margin-bottom: 11px; border-bottom: 1px solid var(--borda);
}
.quadro-col-corpo { overflow-y: auto; display: flex; flex-direction: column; gap: 9px; }
.quadro-vazio { color: var(--texto-tenue); font-size: 12px; font-style: italic; text-align: center; padding: 18px 0; }

.quadro-cartao {
  background: var(--elevado); border: 1px solid var(--borda);
  border-radius: 9px; padding: 11px 12px; cursor: grab;
}
.quadro-cartao:active { cursor: grabbing; }
.quadro-cartao:hover { border-color: var(--primaria); }
.quadro-cartao-nome { font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.quadro-cartao-contato { font-size: 11.5px; color: var(--texto-tenue); margin-top: 3px; }
.quadro-cartao-pe {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11px; color: var(--texto-tenue); margin-top: 8px;
}

@media (max-width: 640px) {
  .pagina-acoes { margin-left: 0; width: 100%; }
  .busca { flex: 1; min-width: 0; }
  .cliente-topo { flex-direction: column; }
  .cliente-estado { margin-left: 0; }
}

/* ---------------- A rede debaixo da tela ---------------- */
.queda { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.queda-caixa {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 16px; padding: 34px; max-width: 470px; text-align: center; box-shadow: var(--sombra);
}
.queda-ic { font-size: 42px; margin-bottom: 10px; }
.queda-titulo { font-size: 20px; font-weight: 800; margin: 0 0 10px; }
.queda-txt { color: var(--texto-fraco); font-size: 14px; line-height: 1.55; margin: 0 0 18px; }
.queda-erro {
  background: var(--fundo); border: 1px solid var(--borda); border-radius: 8px;
  padding: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: #FCA5A5; text-align: left; margin-bottom: 18px;
  word-break: break-word; max-height: 130px; overflow: auto;
}
.queda-botoes { display: flex; gap: 9px; justify-content: center; }


/* ============================================================
   O ORÁCULO.

   Copiado do `styles.css` da Foxx, regra por regra, a pedido da Carol: "quero igual".
   O que mudou foram SÓ as cores, que aqui são as da Triano em vez do laranja da agência.
   Nenhum espaçamento, tamanho ou comportamento foi mexido: se eu ajustasse "só um
   pouquinho", em três meses as duas telas estariam diferentes e ninguém saberia dizer
   qual das duas era a certa.
   ============================================================ */
/* ============================================================
   O ORÁCULO NO MODO CLARO (Carol, 19/08/2026).

   O BUG, e vale entender porque ele é do tipo que volta: as cores do Oráculo foram
   copiadas da Foxx, que só tem modo escuro, e vieram declaradas DENTRO do `.or-wrap`, com
   valores fixos. Como o resto do sistema troca de tema por variáveis no `:root`, o Oráculo
   ficava de fora: o cabeçalho da página clareava e a tela dele continuava preta.

   A correção não é escrever a tela duas vezes. É a mesma regra da decisão D13: as cores
   viram VARIÁVEIS, e o tema só troca os valores. Uma tela, dois temas.
   ============================================================ */
:root[data-tema="claro"] .or-wrap,
:root[data-tema="claro"] .conteudo-oraculo {
  /* As cores saem das VARIÁVEIS DO TEMA daqui, e não de valores fixos copiados da Triano.
     Sem isto a mesa do dia continuaria azulada dentro de um sistema grafite, e ela pareceria
     outro programa aberto por dentro deste. */
  --or-fundo:   var(--fundo);
  --or-caixa:   var(--superficie);
  --or-caixa2:  var(--elevado);
  --or-borda:   var(--borda);
  --or-texto:   var(--texto);
  --or-apagado: var(--texto-tenue);
  --or-laranja: var(--destaque);
  --or-detalhe-cor: var(--texto-fraco);
  --or-marca-fundo: var(--elevado); --or-marca-cor: var(--texto-fraco);
  --or-ruim-cor: #B42318;
  --or-aviso-cor: #6B4E00;
}
:root[data-tema="claro"] .conteudo-oraculo { background: var(--fundo); }
/* A caixa "Vale conferir" era amarelo sobre preto; no claro precisa de fundo claro para o
   texto não sumir. */
:root[data-tema="claro"] .or-aviso { background: #FFF8E1; color: #6B4E00; }
:root[data-tema="claro"] .or-rodape { background: var(--superficie); }

.or-wrap{
  --or-laranja:var(--destaque)  /* o âmbar daqui no lugar do laranja da agência */; --or-verde:#22C55E; --or-azul:#3B82F6; --or-roxo:#8B5CF6;
  --or-vermelho:#EF4444; --or-amarelo:#F5A524;
  --or-fundo:var(--fundo); --or-caixa:var(--superficie); --or-caixa2:var(--elevado); --or-borda:var(--borda);
  --or-texto:var(--texto); --or-apagado:var(--texto-tenue);
  /* As cores de TEXTO do Oráculo viram variáveis, senão o modo claro herda os tons que só
     funcionam no escuro. Cinco delas ficavam abaixo de 2:1 sobre branco, o que na prática
     é texto invisível. */
  --or-detalhe-cor:var(--texto-fraco); --or-marca-fundo:var(--elevado); --or-marca-cor:var(--texto-fraco);
  --or-ruim-cor:#ffb4b4; --or-aviso-cor:#ffd98a;
  background:var(--or-fundo);color:var(--or-texto);
  font-size:17px;line-height:1.5;
  /* A MESA É UM BLOCO DO PAINEL, e não uma tela esticada até as bordas.
     Ela tentava sangrar para os lados com uma sombra de 100vmax, que é o truque usado na
     Foxx, onde ela é a página inteira. Aqui ela vive DENTRO do Painel de Controle, e o
     truque cobrava um preço visível: a faixa parava a 18px de cada borda e a tela ganhava
     uma emenda, com o cabeçalho terminando num lugar e o fundo em outro.
     Como bloco, ela termina onde o conteúdo do Painel termina, alinhada com o botão de
     voltar e com as colunas do mural. Uma âncora só, e nenhuma emenda. */
  margin:0;padding-bottom:40px;min-height:auto;
  border:1px solid var(--or-borda);border-radius:var(--raio);overflow:hidden;
}
.or-limite{max-width:1000px;margin:0 auto;padding:0 20px}
/* O CABEÇALHO DA MESA.
   Ele tinha um azul FIXO (#132038) copiado da Foxx, que sobrou quando as outras cores
   viraram variáveis: num sistema grafite, aquilo desenhava um retângulo azul no meio da
   tela. Agora ele sai do tema, e termina exatamente onde o bloco termina. */
.or-cabecalho{
  background:linear-gradient(180deg,var(--elevado),var(--or-fundo));
  border-bottom:1px solid var(--or-borda);padding:28px 0 22px;
}
.or-wrap .or-h1{margin:0 0 6px;font-size:26px;letter-spacing:-.4px;color:var(--or-texto);font-weight:700}
.or-sub{color:var(--or-apagado);font-size:16px;margin:0}
.or-placar{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.or-placar-item{background:var(--or-caixa);border:1px solid var(--or-borda);border-radius:10px;padding:10px 14px;font-size:15px;color:var(--or-apagado)}
.or-placar-item b{display:block;font-size:22px;color:var(--or-laranja);line-height:1.2}
.or-navdia{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.or-navdia-caixa{display:flex;align-items:center;gap:6px;background:var(--or-caixa);border:1px solid var(--or-borda);border-radius:10px;padding:6px 8px}
.or-seta{background:var(--or-caixa2);color:var(--or-texto);border:1px solid var(--or-borda);border-radius:8px;width:32px;height:32px;font-size:18px;line-height:1;cursor:pointer;font-family:inherit}
.or-seta:hover:not(:disabled){border-color:var(--or-laranja);color:var(--or-laranja)}
.or-seta:disabled{opacity:.4;cursor:not-allowed}
.or-data-input{background:var(--or-caixa2);color:var(--or-texto);border:1px solid var(--or-borda);border-radius:8px;padding:7px 10px;font-size:15px;font-family:inherit;color-scheme:dark}
.or-mini{background:var(--or-caixa2);color:var(--or-apagado);border:1px solid var(--or-borda);border-radius:7px;padding:8px 13px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap}
.or-mini:hover{border-color:#666;color:var(--or-texto)}
.or-mini.ativo{border-color:var(--or-laranja);color:var(--or-laranja)}
.or-mini-n{opacity:.7;margin-left:5px;font-weight:400}
.or-reunioes{margin-top:16px;font-size:15px;color:var(--or-apagado)}
.or-reunioes summary{cursor:pointer;color:var(--or-laranja);font-weight:600;padding:6px 0}
.or-reunioes ul{margin:8px 0 0;padding-left:20px}
.or-reunioes li{margin-bottom:5px}
.or-aviso{background:#2a1d05;border:1px solid #5c4108;color:var(--or-aviso-cor);border-radius:10px;padding:12px 16px;margin-top:16px;font-size:15px}
.or-aviso ul{margin:6px 0 0;padding-left:20px}
.or-wrap .or-h2{margin:32px 0 12px;font-size:20px;border-left:4px solid var(--or-laranja);padding-left:12px;color:var(--or-texto);font-weight:700}
.or-contagrupo{color:var(--or-apagado);font-weight:400;font-size:15px}
.or-tarefa{background:var(--or-caixa);border:1px solid var(--or-borda);border-left:4px solid var(--or-borda);
  border-radius:12px;padding:16px 18px;margin-bottom:12px;transition:border-color .15s,opacity .15s}
.or-tarefa[data-decisao="fazer"]{border-left-color:var(--or-verde)}
.or-tarefa[data-decisao="ja_fiz"]{border-left-color:var(--or-azul)}
.or-tarefa[data-decisao="depois"]{border-left-color:var(--or-amarelo)}
.or-tarefa[data-decisao="nao_fazer"]{border-left-color:var(--or-vermelho);opacity:.45}
.or-tarefa.salvando{opacity:.6}
.or-titulo{font-weight:600;font-size:17px;margin:0 0 6px;color:var(--or-texto)}
.or-detalhe{color:var(--or-detalhe-cor);font-size:15px;margin:0 0 10px}
.or-origem{display:inline-block;background:var(--or-caixa2);color:var(--or-apagado);border-radius:20px;padding:3px 11px;font-size:13px;margin-bottom:12px}
.or-marca{background:var(--or-marca-fundo);color:var(--or-marca-cor);border-radius:20px;padding:2px 9px;font-size:12px;font-weight:600;margin-left:6px;vertical-align:middle}
.or-lapis{background:none;border:none;cursor:pointer;font-size:15px;padding:2px 6px;opacity:.35;transition:opacity .15s;vertical-align:middle;line-height:1}
.or-tarefa:hover .or-lapis{opacity:.8}
.or-lapis:hover{opacity:1}
.or-edicao{margin-bottom:12px}
.or-edicao label{display:block;font-size:13px;color:var(--or-apagado);text-transform:uppercase;letter-spacing:.5px;margin:0 0 5px}
.or-edicao input,.or-edicao textarea{width:100%;background:#0d0d0d;color:var(--or-texto);border:1px solid var(--or-laranja);
  border-radius:8px;padding:10px 12px;font-size:16px;font-family:inherit;line-height:1.45;margin-bottom:10px;resize:vertical}
.or-linha-edicao{display:flex;gap:8px;flex-wrap:wrap}
.or-mini.salvar{background:var(--or-laranja);border-color:var(--or-laranja);color:#160800}
.or-mini.salvar:hover{color:#160800}
.or-marca.venceu{background:#2b0a0a;color:var(--or-ruim-cor)}
.or-marca.cliente{background:var(--or-caixa2);color:var(--or-detalhe-cor)}
.or-botoes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.or-botoes button{background:var(--or-caixa2);color:var(--or-texto);border:1px solid var(--or-borda);
  border-radius:8px;padding:9px 16px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit}
.or-botoes button:hover{border-color:#555}
.or-botoes button:disabled{opacity:.5;cursor:not-allowed}
.or-tarefa[data-decisao="fazer"] .or-b-fazer{background:var(--or-verde);border-color:var(--or-verde);color:#04210f}
.or-tarefa[data-decisao="ja_fiz"] .or-b-ja_fiz{background:var(--or-azul);border-color:var(--or-azul);color:#04142e}
.or-tarefa[data-decisao="depois"] .or-b-depois{background:var(--or-amarelo);border-color:var(--or-amarelo);color:#2b1d00}
.or-tarefa[data-decisao="nao_fazer"] .or-b-nao_fazer{background:var(--or-vermelho);border-color:var(--or-vermelho);color:#2b0505}
.or-campos{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.or-campo{display:flex;flex-direction:column;gap:5px}
.or-campo label{font-size:13px;color:var(--or-apagado);text-transform:uppercase;letter-spacing:.5px}
.or-campo select,.or-campo input{background:var(--or-caixa2);color:var(--or-texto);border:1px solid var(--or-borda);
  border-radius:8px;padding:9px 11px;font-size:15px;font-family:inherit;min-width:150px;color-scheme:dark}
.or-campo input[type=date]{min-width:160px}
.or-rodape{position:sticky;left:0;right:0;bottom:0;background:rgba(10,10,10,.97);
  border-top:1px solid var(--or-borda);padding:14px 0;backdrop-filter:blur(8px);z-index:10}
.or-rodape .or-limite{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.or-resumo{font-size:15px;color:var(--or-apagado)}
.or-resumo b{color:var(--or-texto)}
.or-secundario{background:var(--or-caixa2);color:var(--or-texto);border:1px solid var(--or-borda);
  border-radius:9px;padding:13px 22px;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit}
.or-secundario:hover{border-color:#666}
.or-secundario:disabled{opacity:.5;cursor:not-allowed}
.or-vazio{color:var(--or-apagado);text-align:center;padding:50px 20px;font-size:17px}
.or-vazio h2{font-size:20px;color:var(--or-texto);margin-bottom:10px;font-weight:700}
.or-vazio p{max-width:58ch;margin:0 auto 8px}
.or-erro{background:#2b0a0a;border:1px solid #6b1f1f;color:var(--or-ruim-cor);border-radius:9px;padding:12px 14px;margin-top:16px;font-size:15px}

/* O botão de editar. Na Foxx é um emoji de lápis; aqui é a palavra, porque a Carol pediu
   sem emoji. Mesma posição e mesmo comportamento, só a marca visual muda. */
.or-lapis{
  background:none;border:1px solid var(--or-borda);border-radius:6px;
  color:var(--or-apagado);cursor:pointer;
  font-size:11px;font-weight:600;padding:2px 8px;margin-left:8px;
  vertical-align:middle;opacity:.85;transition:opacity .15s,border-color .15s;
}
.or-lapis:hover{opacity:1;border-color:var(--or-laranja);color:var(--or-texto)}

/* ---------------- Administrador e perfil ---------------- */
.modal-largo { max-width: 900px; }
.admin-abas { display: flex; gap: 6px; padding: 12px 18px 0; flex-wrap: wrap; }
.admin-selo {
  margin-left: 6px; background: var(--destaque); color: #1a1400;
  border-radius: 999px; font-size: 10px; font-weight: 800; padding: 1px 6px;
}

.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--texto-tenue); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--borda);
}
.tabela td { padding: 11px 10px; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela-sub { font-size: 11.5px; color: var(--texto-tenue); margin-top: 2px; }
.tabela-registro td { padding: 8px 10px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; white-space: nowrap; }

.estado {
  font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px; white-space: nowrap;
}
.estado-on, .estado-ok    { background: #16A34A22; color: #4ADE80; }
.estado-off, .estado-ruim { background: #EF444422; color: #FCA5A5; }
.estado-espera, .estado-aviso { background: #F5C51822; color: var(--destaque); }
.estado-neutro { background: var(--elevado); color: var(--texto-fraco); }

.pendente {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--elevado); border: 1px solid var(--borda);
  border-left: 3px solid var(--destaque);
  border-radius: 10px; padding: 13px 15px; margin-bottom: 10px;
}
.pendente-acoes { display: flex; align-items: center; gap: 7px; margin-left: auto; flex-wrap: wrap; }
.pendente-acoes select {
  padding: 5px 9px; border-radius: 7px; border: 1px solid var(--borda);
  background: var(--fundo); color: var(--texto); font-size: 12.5px;
}

.caixa-aviso {
  background: var(--elevado); border: 1px solid var(--borda); border-left: 3px solid var(--destaque);
  border-radius: 10px; padding: 14px 16px; margin-bottom: 16px;
}
.caixa-aviso-txt { font-size: 13px; color: var(--texto-fraco); line-height: 1.55; margin: 7px 0; }
.aviso-forte { color: var(--destaque); font-weight: 600; }
.linha-link { display: flex; gap: 8px; margin: 10px 0; }
.linha-link input {
  flex: 1; padding: 8px 11px; border-radius: 8px; min-width: 0;
  border: 1px solid var(--borda); background: var(--fundo); color: var(--texto);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
}

.recado {
  background: #16A34A18; border: 1px solid #16A34A44; color: #4ADE80;
  border-radius: 8px; padding: 9px 12px; font-size: 13px; margin-bottom: 13px;
}
.separador { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; }
.separador::before, .separador::after { content: ''; flex: 1; height: 1px; background: var(--borda); }
.separador span { font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--texto-tenue); }

/* ---------------- Formulário da Caixa de Entrada ---------------- */
.opcional { font-weight: 400; color: var(--texto-tenue); }
.dica { font-size: 11.5px; color: var(--texto-tenue); margin-top: 5px; line-height: 1.4; }

.dias-semana { display: flex; gap: 6px; }
.dia-btn {
  width: 36px; height: 36px; border-radius: 8px;
  border: 1px solid var(--borda); background: var(--fundo);
  color: var(--texto-fraco); cursor: pointer; font-size: 13px; font-weight: 700;
}
.dia-btn.ativo { background: var(--primaria); color: #fff; border-color: transparent; }

.pessoas { display: flex; gap: 6px; flex-wrap: wrap; }
.pessoa-btn {
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--borda); background: var(--fundo);
  color: var(--texto-fraco); cursor: pointer; font-size: 12.5px; font-weight: 600;
}
.pessoa-btn.ativo { background: var(--primaria); color: #fff; border-color: transparent; }

.linha-fase { display: flex; gap: 7px; margin-bottom: 7px; align-items: center; }
.linha-fase input[type="text"], .linha-fase input:not([type]) { flex: 1; }
.linha-fase input {
  padding: 8px 11px; border-radius: 8px; min-width: 0;
  border: 1px solid var(--borda); background: var(--fundo); color: var(--texto);
}
.linha-fase input[type="time"] { flex: 0 0 108px; }

/* ---------------- Onboarding: checklist e estados ---------------- */
/* As colunas SEM checklist (cliente já rodando) ficam visualmente mais discretas: são
   estado, e não trabalho a fazer. */
.quadro-col-estado { background: transparent; border-style: dashed; }
.cartao-pausado { opacity: .55; }

.cartao-pendencias { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.pend { font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 5px; letter-spacing: .3px; }
.pend-casa    { background: #EF444422; color: #FCA5A5; }
.pend-cliente { background: #F59E0B22; color: #FCD34D; }

.placar-checklist { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.placar-item {
  flex: 1; min-width: 110px;
  background: var(--elevado); border: 1px solid var(--borda);
  border-radius: 10px; padding: 11px 13px;
  font-size: 11px; color: var(--texto-tenue); font-weight: 600;
}
.placar-item b { display: block; font-size: 22px; margin-bottom: 2px; }

.bloco { margin-bottom: 20px; }
.bloco-titulo {
  font-size: 11.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase;
  color: var(--texto-fraco); padding-bottom: 8px; margin-bottom: 10px;
  border-bottom: 1px solid var(--borda);
}

.item-onb {
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
  background: var(--elevado); border: 1px solid var(--borda);
  border-left: 3px solid var(--texto-tenue);
  border-radius: 9px; padding: 11px 13px; margin-bottom: 7px;
}
.item-pendente          { border-left-color: #6A7E9C; }
.item-resolvido         { border-left-color: #22C55E; opacity: .7; }
.item-pendencia_cliente { border-left-color: #F59E0B; }
.item-pendencia_casa    { border-left-color: #EF4444; }

.item-onb-txt { flex: 1; min-width: 200px; font-size: 13.5px; line-height: 1.4; }
.item-onb-btns { display: flex; gap: 5px; flex-wrap: wrap; }
.estado-btn {
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--borda); background: transparent;
  color: var(--texto-tenue); cursor: pointer; font-size: 11.5px; font-weight: 600;
}
.estado-btn:hover { border-color: var(--texto-fraco); color: var(--texto); }

.lista-trava { margin: 10px 0; padding-left: 18px; font-size: 13px; color: var(--texto-fraco); line-height: 1.6; }

.rodape-cartao {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border-top: 1px solid var(--borda); padding-top: 16px; margin-top: 8px;
}
.rodape-cartao .btn { margin-left: auto; }
.rodape-cartao .btn:disabled { opacity: .45; cursor: not-allowed; }

/* ============================================================
   BARRA DE ROLAGEM.

   REGRA DA CASA, aprendida na dor: o Chrome IGNORA CALADO as regras de
   `::-webkit-scrollbar-thumb` e `-track` se não existir a regra BASE
   `::-webkit-scrollbar` declarada antes. Não dá erro, não avisa, simplesmente
   não aplica, e a pessoa fica achando que escreveu o seletor errado.
   ============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--borda);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--texto-tenue); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* Firefox, que usa outro nome para a mesma coisa. */
* { scrollbar-width: thin; scrollbar-color: var(--borda) transparent; }

/* O QUADRO rola na horizontal, e a barra dele fica COLADA no rodapé da coluna, e não
   solta no meio da tela. Era isso que estava feio: a barra branca do sistema atravessando
   a página inteira, do lado de fora da paleta. */
/* A BARRA DE ROLAGEM FICA NO FIM DA TELA (Carol, 19/08/2026), e não flutuando no meio.
   
   Antes o quadro tinha só a altura do conteúdo, então a barra parava logo abaixo do
   cartão mais alto, com meia tela vazia embaixo dela. Agora o quadro ocupa a altura que
   sobra da janela, e a barra encosta no rodapé, onde a mão procura por ela.
   
   Os 210px descontados são o cabeçalho, o título da página e a faixa da versão. */
/* A BARRA ENCOSTA NO RODAPÉ, e não num ponto calculado a olho.

   A primeira tentativa usou `calc(100vh - 210px)`, com o 210 chutado para descontar o
   cabeçalho e o título. Sobraram 44px, e é o que sempre acontece com número mágico: ele
   acerta numa tela e erra em todas as outras, porque o título quebra em duas linhas, o
   cabeçalho cresce no celular, e ninguém lembra de onde veio o número.

   Agora quem decide a altura é o navegador: o conteúdo é uma coluna que ocupa a tela, e o
   quadro fica com o que sobrar depois do título. O único desconto é a altura do cabeçalho,
   que é fixa e conhecida. */
.quadro {
  flex: 1 1 auto;
  min-height: 240px;
  align-items: stretch;
  padding-bottom: 0;
  scrollbar-gutter: stable;
}

/* O conteúdo vira coluna só onde existe um quadro para esticar. Nas outras abas ele
   continua crescendo conforme o conteúdo, que é o certo para uma lista. */
.conteudo:has(.quadro) {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 58px);   /* 58px é a altura do cabeçalho */
  padding-bottom: 32px;         /* o rodapé da versão tem 24px, e 8 de folga */
  box-sizing: border-box;
}
.quadro-col { max-height: 100%; }
.quadro::-webkit-scrollbar { height: 8px; }
.quadro::-webkit-scrollbar-thumb { background: var(--elevado); }
.quadro::-webkit-scrollbar-thumb:hover { background: var(--primaria); }

/* ============================================================
   O MODAL DO CARTÃO ROLA POR DENTRO, e não por fora.

   O que estava quebrado: o modal inteiro rolava, então o cabeçalho com o nome do cliente
   subia junto e sumia, e a barra de "avançar fase" no fim ficava perdida no meio do
   caminho. Quem descia dez itens não sabia mais de qual cliente era o checklist.

   Agora o modal é uma coluna de altura fixa: cabeçalho preso em cima, corpo rolando no
   meio, e o rodapé preso embaixo.
   ============================================================ */
.modal {
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  overflow: hidden;          /* quem rola é o corpo, não o modal */
}
.modal-cab { flex: 0 0 auto; position: static; }
.modal-corpo { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.admin-abas { flex: 0 0 auto; }

/* O rodapé do cartão de onboarding gruda embaixo do corpo que rola, para o botão de
   avançar estar sempre à mão. */
.rodape-cartao {
  position: sticky; bottom: 0;
  background: var(--superficie);
  margin: 8px -18px -18px;
  padding: 14px 18px;
}

/* Quem foi escolhido aparece como etiqueta embaixo do dropdown. Assim a lista de pessoas
   pode crescer sem o formulário crescer junto. */
.escolhidos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.escolhido {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--primaria); color: #fff;
  border-radius: 999px; padding: 4px 6px 4px 12px;
  font-size: 12.5px; font-weight: 600;
}
.escolhido button {
  background: rgba(255,255,255,.22); border: 0; color: #fff;
  width: 17px; height: 17px; border-radius: 50%;
  cursor: pointer; font-size: 10px; line-height: 1; padding: 0;
}
.escolhido button:hover { background: rgba(255,255,255,.4); }

/* ---------------- O card aberto ---------------- */
.cartao-clicavel { cursor: pointer; }
.cartao-clicavel:hover { border-color: var(--primaria); }

.modal-card { max-width: 940px; }
.faixa-concluida {
  background: #16A34A1e; border-bottom: 1px solid #16A34A44;
  color: #4ADE80; font-size: 13px; font-weight: 700;
  padding: 9px 18px; flex: 0 0 auto;
}

.card-duas-colunas { display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.card-dados { flex: 1 1 58%; overflow-y: auto; padding: 18px; min-width: 0; }
.card-atividade {
  flex: 1 1 42%; min-width: 280px; display: flex; flex-direction: column;
  border-left: 1px solid var(--borda); background: var(--fundo);
  padding: 16px 18px; overflow: hidden;
}

.card-campo { margin-bottom: 15px; }
.card-campo-rotulo {
  font-size: 10.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase;
  color: var(--texto-tenue); margin-bottom: 5px;
}
.card-campo-valor { font-size: 14px; line-height: 1.5; word-break: break-word; }

.fase-linha { font-size: 13.5px; padding: 5px 0; display: flex; gap: 9px; align-items: baseline; }
.fase-hora {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  background: var(--elevado); border-radius: 5px; padding: 1px 7px; color: var(--texto-fraco);
}

.botao-tracejado {
  width: 100%; padding: 9px; border-radius: 8px;
  border: 1px dashed var(--borda); background: transparent;
  color: var(--texto-tenue); cursor: pointer; font-size: 12.5px;
}
.botao-tracejado:hover { border-color: var(--primaria); color: var(--texto); }
.link-entrega { color: var(--primaria); font-size: 13px; word-break: break-all; }

.atividade-titulo {
  font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: var(--texto-fraco); margin-bottom: 11px;
}
.card-atividade textarea {
  width: 100%; padding: 9px 11px; border-radius: 8px; resize: vertical;
  border: 1px solid var(--borda); background: var(--superficie); color: var(--texto);
}
.linha-comentar { display: flex; align-items: center; gap: 10px; margin: 7px 0 14px; }
.linha-comentar .btn { margin-left: auto; }

.lista-atividade { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.atividade-item { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--borda); }
.atividade-item:last-child { border-bottom: 0; }
.atividade-pino { width: 7px; height: 7px; border-radius: 50%; background: var(--texto-tenue); margin-top: 6px; flex: 0 0 auto; }
.atividade-concluiu { background: #22C55E; }
.atividade-reabriu  { background: #F59E0B; }
.atividade-txt { font-size: 13px; line-height: 1.45; }
.atividade-quando { font-size: 11px; color: var(--texto-tenue); margin-top: 3px; }

.card-rodape {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--borda); padding: 14px 18px; background: var(--superficie);
}

@media (max-width: 760px) {
  .card-duas-colunas { flex-direction: column; overflow-y: auto; }
  .card-atividade { border-left: 0; border-top: 1px solid var(--borda); }
}

/* ---------------- Tela de entrada ---------------- */
.campo-com-olho { position: relative; }
.campo-com-olho input { padding-right: 42px; }
.olho {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer;
  color: var(--texto-tenue);
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px;
}
.olho:hover { color: var(--texto); background: var(--elevado); }

.link-tela {
  background: none; border: 0; cursor: pointer;
  color: var(--primaria); font-size: 13px; font-weight: 600;
  padding: 12px 0 0; width: 100%; text-align: center;
}
.link-tela:hover { text-decoration: underline; }
.link-tela.em-linha { width: auto; padding: 0; display: inline; }

.entrar-rodape {
  border-top: 1px solid var(--borda); margin-top: 20px; padding-top: 16px;
  text-align: center; font-size: 12.5px; color: var(--texto-tenue); line-height: 1.6;
}
.entrar-caixa { max-width: 400px; }

/* O NAVEGADOR PINTA DE AMARELO OU AZUL CLARO o campo que ele preencheu sozinho, e no tema
   escuro isso vira um retângulo claro no meio da tela, com texto quase ilegível. Não dá
   para sobrescrever com `background`, porque o navegador desenha por cima; o jeito é a
   sombra interna, que ele respeita. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--texto);
  -webkit-box-shadow: 0 0 0 40px var(--fundo) inset;
  caret-color: var(--texto);
  transition: background-color 9999s ease-in-out 0s;
}

/* ============================================================
   O QUE É DO ORÁCULO, E NÃO EXISTE NA TRIANO.

   Tudo abaixo desta linha nasceu aqui: o menu de Projetos, a faixa do SOS, o Backlog que
   abre no botão, a faixa de quando se está vendo pelos olhos de outra pessoa, o sino e a
   janela de Melhorias.

   POR QUE O FUNDO MUDA DE COR AQUI. Os tons de fundo do motor são azulados, porque a Foxx
   e a Triano são azuis. Quem trabalha com quatro sistemas abertos precisa saber em qual
   está antes de ler o cabeçalho, e dois azuis lado a lado não permitem isso. Então o
   Oráculo é grafite, com o âmbar no lugar do amarelo. É provisório, como as cores do
   instancia.json, e pelo mesmo motivo: o Wylle ainda não passou identidade nenhuma.
   ============================================================ */

:root, :root[data-tema="escuro"] {
  --fundo:      #14161A;
  --superficie: #1D2026;
  --elevado:    #262A32;
  --borda:      #343943;
}

:root[data-tema="claro"] {
  --fundo:      #F5F6F8;
  --superficie: #FFFFFF;
  --elevado:    #ECEEF2;
  --borda:      #DCDFE6;
  --texto:      #1A1D23;
  --texto-fraco: #4A505C;
  --texto-tenue: #6B7280;
  --destaque:   #A56E0E;
}

/* O selo do cabeçalho passa a ser um desenho, e não uma letra dentro de um quadrado. */
.cab-selo { background: transparent; color: var(--destaque); display: grid; place-items: center; }

/* ---------------- Menus (Projetos e o do nome) ---------------- */
.cab-projetos { position: relative; }
.cab-projetos-btn {
  display: flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
  color: var(--texto-fraco); font-weight: 600; font-size: 14px;
  padding: 7px 11px; border-radius: 9px;
}
.cab-projetos-btn:hover, .cab-projetos-btn.aberto { background: var(--elevado); color: var(--texto); }

.menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 232px; padding: 5px;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 11px; box-shadow: var(--sombra);
}
.menu-usuario { left: auto; right: 0; min-width: 250px; }
.menu-cab { padding: 10px 12px 8px; border-bottom: 1px solid var(--borda); margin-bottom: 5px; }
.menu-nome { font-weight: 700; font-size: 14px; }
.menu-mail { font-size: 12px; color: var(--texto-tenue); margin-top: 2px; word-break: break-all; }
.menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; padding: 9px 11px;
  background: none; border: 0; border-radius: 8px;
  color: var(--texto); font-size: 13.5px; cursor: pointer;
}
.menu-item:hover:not(:disabled) { background: var(--elevado); }
/* Projeto sem endereço fica apagado e não clicável, em vez de sumir. */
.menu-item:disabled { opacity: .45; cursor: default; }
.menu-item.aberto { background: var(--elevado); }
.menu-item-sair { border-top: 1px solid var(--borda); margin-top: 5px; border-radius: 0 0 8px 8px; }
.menu-item-pessoa { font-size: 13px; }
.menu-nota { font-size: 11.5px; color: var(--texto-tenue); font-weight: 500; }
.menu-erro { font-size: 12px; color: #DC2626; padding: 6px 11px; }
.menu-gaveta { border-top: 1px solid var(--borda); margin-top: 4px; padding-top: 4px; max-height: 300px; overflow-y: auto; }
.menu-rodape { font-size: 11.5px; color: var(--texto-tenue); line-height: 1.45; padding: 8px 11px 4px; }

/* ---------------- O sino ---------------- */
.sino { position: relative; }
.sino-conta {
  position: absolute; top: 1px; right: 1px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: grid; place-items: center;
  background: #DC2626; color: #fff;
  border-radius: 999px; font-size: 10px; font-weight: 800;
}

.tapa-tela {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0,0,0,.45);
  display: grid; place-items: center; padding: 20px;
}
.tapa-leve { align-items: start; justify-items: end; padding: 62px 18px; background: rgba(0,0,0,.2); }

.gaveta-avisos {
  width: min(380px, 100%); max-height: 70vh; display: flex; flex-direction: column;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 13px; box-shadow: var(--sombra);
}
.gaveta-corpo { overflow-y: auto; padding: 6px; }
.aviso { padding: 10px 12px; border-radius: 9px; border-left: 3px solid var(--destaque); background: var(--elevado); margin-bottom: 6px; }
.aviso-lido { border-left-color: var(--borda); opacity: .62; }
.aviso-texto { font-size: 13.5px; line-height: 1.4; }
.aviso-meta { font-size: 11px; color: var(--texto-tenue); margin-top: 4px; }

/* ---------------- Janela (Melhorias) ---------------- */
.janela {
  width: min(620px, 100%); max-height: 86vh; display: flex; flex-direction: column;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 14px; box-shadow: var(--sombra);
}
.janela-cab {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--borda);
}
.janela-cab h2 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.3px; }
.janela-corpo { padding: 16px; overflow-y: auto; }
.janela-rodape { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.abas-internas { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.campo-nota { font-size: 12px; color: var(--texto-tenue); margin: -4px 0 12px; }
.aviso-bom {
  background: #16A34A18; border: 1px solid #16A34A55; color: var(--texto);
  border-radius: 9px; padding: 12px 14px; font-size: 13.5px; line-height: 1.5;
}
.btn-claro { background: var(--superficie); }

.pedido { border: 1px solid var(--borda); border-radius: 11px; padding: 12px 14px; margin-bottom: 10px; background: var(--elevado); }
.pedido-fechada { opacity: .65; }
.pedido-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pedido-estado { font-size: 11px; color: var(--texto-tenue); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-left: auto; }
.pedido-titulo { font-size: 14.5px; font-weight: 700; }
.pedido-desc { font-size: 13px; color: var(--texto-fraco); margin-top: 5px; line-height: 1.45; white-space: pre-wrap; }
.pedido-meta { font-size: 11.5px; color: var(--texto-tenue); margin-top: 7px; }
.pedido-resposta { font-size: 13px; margin-top: 9px; padding: 9px 11px; background: var(--superficie); border-radius: 8px; border-left: 3px solid var(--destaque); }
.pedido-form textarea { width: 100%; margin-top: 9px; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); }
.etiqueta-melhoria { background: var(--marca-azul-claro); color: #fff; }
.etiqueta-erro { background: #DC2626; color: #fff; }
.etiqueta-projeto { background: var(--elevado); color: var(--texto-fraco); border: 1px solid var(--borda); }
.etiqueta-sos { background: #DC2626; color: #fff; }

/* ---------------- SOS ---------------- */
.faixa-sos {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  background: #DC262614; border: 1px solid #DC262655; color: var(--texto);
  border-radius: 11px; padding: 11px 14px; margin-bottom: 14px;
  font-size: 13.5px; line-height: 1.4;
}
.faixa-sos > span { flex: 1; min-width: 220px; }
.faixa-sos svg { color: #DC2626; flex: none; }
.faixa-sos .btn { margin-left: auto; }
.chip-sos.ativo { background: #DC2626; border-color: transparent; color: #fff; }

/* O cartão em SOS continua na coluna da data dele. O que muda é o peso: borda vermelha
   grossa e a etiqueta. Tirar o cartão da coluna para uma gaveta de urgência esconderia
   dele justamente a informação que faz o SOS ser urgente, que é QUANDO ele vence. */
.cartao-sos { border-left-color: #DC2626; border-left-width: 4px; background: #DC262609; }
/* O botão de ligar o SOS fica apagado até alguém chegar perto do cartão. Ele precisa
   existir em todo cartão, senão ninguém descobre que dá para marcar; e precisa ser
   discreto, senão vira ruído vermelho em cartão que não tem urgência nenhuma. */
.cartao-sos-btn {
  margin-left: auto; padding: 2px 8px; border-radius: 999px; cursor: pointer;
  background: none; border: 1px solid var(--borda); color: var(--texto-tenue);
  font-size: 10.5px; font-weight: 800; letter-spacing: .4px;
  opacity: .35; transition: opacity .12s;
}
.cartao:hover .cartao-sos-btn { opacity: 1; }
.cartao-sos-btn.ligado { opacity: 1; }
.cartao-sos-btn:hover:not(:disabled) { border-color: #DC2626; color: #DC2626; }
.cartao-sos-btn.ligado { background: #DC2626; border-color: transparent; color: #fff; }
.cartao-sos-btn:disabled { opacity: .35; cursor: default; }

/* ---------------- Backlog ---------------- */
.backlog { margin-top: 22px; border-top: 1px solid var(--borda); padding-top: 14px; }
.backlog-btn {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: none; border: 0; cursor: pointer; padding: 8px 4px;
  color: var(--texto-fraco); font-size: 14px; font-weight: 700;
}
.backlog-btn:hover { color: var(--texto); }
.backlog-nota { font-size: 12px; font-weight: 500; color: var(--texto-tenue); margin-left: 4px; }
.backlog-lista {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 11px; margin-top: 11px;
}
.backlog-lista .cartao { margin-bottom: 0; }

.coluna-recorte { display: block; font-size: 11.5px; font-weight: 500; color: var(--texto-tenue); margin-top: 2px; }
.coluna-cab { align-items: flex-start; }

/* ---------------- A faixa de quando a tela não é sua ---------------- */
.faixa-espelho {
  position: sticky; top: 0; z-index: 70;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #A56E0E; color: #fff;
  padding: 9px 18px; font-size: 13.5px; line-height: 1.4;
}
.faixa-espelho > span { flex: 1; min-width: 240px; }
.faixa-espelho .btn { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); color: #fff; }

@media (max-width: 720px) {
  /* No celular o cabeçalho vira duas linhas: a marca e os botões em cima, a navegação
     inteira embaixo. O `flex-basis: 100%` é o que garante a quebra: só `width: 100%` num
     item com `flex: 1` não força linha nova, e a aba "Painel de Controle" ficava pendurada
     na ponta da primeira linha, metade dela fora da tela. */
  .cab { flex-wrap: wrap; }
  .cab-nav { order: 3; flex: 0 0 100%; margin-left: 0; overflow-x: auto; padding-bottom: 2px; }
  .cab-dir { flex-wrap: wrap; }
  .menu, .menu-usuario { right: 0; left: auto; }
  .faixa-sos .btn { margin-left: 0; }
  /* O menu de Projetos abre colado na esquerda da tela, e não embaixo do botão: num
     aparelho estreito, "embaixo do botão" joga metade do menu para fora. */
  .cab-projetos .menu { left: 0; right: auto; min-width: min(280px, calc(100vw - 26px)); }
}


/* ============================================================
   O PAINEL DEPOIS DA SEGUNDA RODADA (Wylle, 20/08/2026).
   Kanban arrastável, Backlog como coluna que acende, e a barra com os cinco filtros.
   ============================================================ */

.filtros { row-gap: 8px; }
.filtros-fim { display: flex; align-items: center; gap: 8px; margin-left: auto; }
/* Cinco dropdowns lado a lado não podem ter borda de destaque cada um: a barra inteira
   vira contorno âmbar e nada se destaca de nada. Aqui eles usam a borda comum, e o âmbar
   fica para quando o filtro está VALENDO, que é a informação que importa numa barra cheia:
   qual dos cinco está ligado. */
.filtros .trocador {
  max-width: 190px;
  border-color: var(--borda); font-weight: 600; color: var(--texto-fraco);
}
.filtros .trocador:hover { border-color: var(--texto-tenue); }
.filtros .trocador.ligado { border-color: var(--destaque); color: var(--texto); font-weight: 700; }
.filtros .trocador:focus-visible { outline: 2px solid var(--primaria); outline-offset: 1px; }

/* O botão SOS existe e não faz nada ainda. Ele fica visivelmente apagado, e não parecendo
   um botão comum que ninguém entende por que não responde. */
.chip-sos:disabled { opacity: .5; cursor: not-allowed; }

/* A coluna que vai receber o cartão se acende inteira. Um contorno tracejado é mais claro
   do que mudar a cor de fundo: fundo diferente é lido como "esta coluna é de outro tipo". */
.coluna-alvo { outline: 2px dashed var(--destaque); outline-offset: -3px; }
.coluna-backlog { background: transparent; border-style: dashed; }

.cartao-clicavel { cursor: grab; }
.cartao-clicavel:active { cursor: grabbing; }
/* O cartão sendo arrastado some quase por completo do lugar de origem, para a pessoa ver
   o buraco que ele deixa e entender que ele vai MUDAR de lugar, e não ser copiado. */
.cartao-arrastado { opacity: .32; }

.cartao-quem { color: var(--texto-tenue); }
.cartao-meta .bolinha { margin-left: auto; width: 9px; height: 9px; cursor: default; }
.cartao-meta .bolinha:hover { border-color: transparent; }

/* A etiqueta de origem é a primeira do cartão, e a única em cor cheia: ela é a etiqueta
   número 1 do pedido, e as outras duas existem para completar, não para competir.
   O texto muda de cor com o tema porque o âmbar também muda: no claro ele é escuro
   (#A56E0E) e pede letra branca; no escuro ele é dourado e pede letra preta. Uma cor fixa
   ficaria ilegível em um dos dois. */
.etiqueta-origem { background: var(--destaque); color: #fff; }
:root[data-tema="escuro"] .etiqueta-origem { color: #1a1400; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .etiqueta-origem { color: #1a1400; } }
.etiqueta-ferramenta { background: var(--marca-azul-claro); color: #fff; }

/* Quatro colunas num notebook ficam estreitas, e a coluna estreita é o preço de ver o
   Backlog junto. O que não pode é o texto quebrar letra a letra. */
.mural .cartao-titulo { padding-right: 24px; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  /* Abaixo disto o grid de quatro não cabe de jeito nenhum, e o painel passa a rolar de
     lado em vez de espremer até o cartão virar uma coluna de letras. */
  .mural { grid-auto-flow: column; grid-template-columns: none !important; grid-auto-columns: minmax(250px, 1fr); overflow-x: auto; padding-bottom: 6px; }
  .filtros-fim { margin-left: 0; }
}

/* A barra de volta da mesa do dia. Ela existe além do botão Plaud da barra de cima porque
   a mesa é uma tela longa: quem rolou até o fim dela não deveria precisar subir tudo de
   novo só para achar a saída. */
.volta-plaud { margin-bottom: 14px; }


/* ============================================================
   O DIA VAZIO FICA CENTRADO INTEIRO (Wylle, 20/08/2026).

   Quando o dia não tem nada, o corpo da tela é um texto centralizado e o cabeçalho ficava
   alinhado à esquerda. Duas ancoragens diferentes na mesma tela, e o olho lê isso como
   torto mesmo sem saber por quê: a tela vazia é quase toda texto no centro, e o título
   sozinho na quina vira o único elemento fora do eixo.

   Com conteúdo, o cabeçalho continua à esquerda, que é como a Foxx faz e é o certo: aí a
   tela é uma LISTA, e lista se lê a partir da margem esquerda.
   ============================================================ */
.or-wrap-vazio .or-cabecalho .or-limite { text-align: center; }
.or-wrap-vazio .or-navdia { justify-content: center; }
.or-wrap-vazio .or-placar { justify-content: center; }

/* ============================================================
   O MODAL DE MELHORIAS, NO PADRÃO DA FOXX.

   A faixa colorida no topo, o cabeçalho com título e subtítulo, os campos com rótulo em
   cima e asterisco de obrigatório, o contador da descrição e a linha do que falta. Lá a
   faixa é vermelha, que é a cor da agência; aqui é o âmbar, que é a cor deste sistema.
   ============================================================ */

.janela-melhorias { border-top: 4px solid var(--destaque); max-width: 540px; }
.janela-melhorias .janela-cab { align-items: flex-start; }
.janela-sub { margin: 4px 0 0; font-size: 13px; color: var(--texto-tenue); line-height: 1.45; max-width: 46ch; }

.janela-melhorias .rotulo {
  display: block; font-size: 12px; color: var(--texto-tenue);
  margin: 14px 0 5px; font-weight: 600;
}
.janela-melhorias .rotulo:first-child { margin-top: 0; }
.janela-melhorias .obrigatorio { color: var(--destaque); }
.janela-melhorias input,
.janela-melhorias textarea,
.janela-melhorias select {
  width: 100%; box-sizing: border-box; padding: 10px 11px;
  border-radius: 8px; border: 1px solid var(--borda);
  background: var(--fundo); color: var(--texto); font-size: 14px;
}
.janela-melhorias textarea { resize: vertical; line-height: 1.5; }
.janela-melhorias input:focus,
.janela-melhorias textarea:focus,
.janela-melhorias select:focus { outline: 2px solid var(--primaria); outline-offset: -1px; }

/* O contador fica à direita, embaixo da caixa, e só fica verde quando o mínimo é atingido.
   É a única confirmação que a pessoa tem de que já pode enviar sem olhar para o botão. */
.contador { font-size: 12px; margin-top: 5px; text-align: right; font-weight: 600; color: var(--texto-tenue); }
.contador-ok { color: #16A34A; }

/* A LINHA DO QUE FALTA. Ela é a razão de o botão poder ficar desligado sem irritar: sem
   ela, "não consigo enviar" vira uma pergunta para quem cuida do sistema. */
.falta { font-size: 12px; margin-top: 12px; color: var(--destaque); font-weight: 600; line-height: 1.5; }

.janela-melhorias .janela-rodape { border-top: 1px solid var(--borda); padding: 12px 16px 16px; margin-top: 0; }
.botao-lista { margin-right: auto; }

/* Botão desligado PARECE desligado, em qualquer lugar do sistema. Sem isto, o Enviar do
   modal de melhorias fica com o mesmo âmbar cheio do botão que funciona, e a pessoa clica
   três vezes antes de procurar o motivo. */
.btn:disabled { opacity: .45; cursor: not-allowed; }