/* ============================================================
   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). O filtro de pessoa
   da tela de já feitas usa a mesma forma de propósito: são a mesma coisa para quem olha,
   um dropdown que troca o que a tela mostra. Duas aparências para a mesma função só faria
   a pessoa aprender duas vezes. */
.trocador, .filtro-quem {
  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 { position: relative; }
.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 {
  --or-fundo:   #F2F5FA;
  --or-caixa:   #FFFFFF;
  --or-caixa2:  #E8EEF7;
  --or-borda:   #D3DEED;
  --or-texto:   #10203A;
  --or-apagado: #5E6B7D;
  --or-laranja: #1B3A6B;
  --or-detalhe-cor: #46566F;
  --or-marca-fundo: #DCE7F5; --or-marca-cor: #1B3A6B;
  --or-ruim-cor: #B42318;
  --or-aviso-cor: #6B4E00;
}
:root[data-tema="claro"] .or-cabecalho {
  background: linear-gradient(180deg, #E4ECF7, var(--or-fundo));
}
:root[data-tema="claro"] .conteudo-oraculo { background: #F2F5FA; }
/* 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: #FFFFFF; }

.or-wrap{
  --or-laranja:#2E5C9E   /* a cor de destaque da Triano no lugar do laranja da agência */; --or-verde:#22C55E; --or-azul:#3B82F6; --or-roxo:#8B5CF6;
  --or-vermelho:#EF4444; --or-amarelo:#F5A524;
  --or-fundo:#0A111B; --or-caixa:#16243A; --or-caixa2:#1E3050; --or-borda:#263C5C;
  --or-texto:#F2F4F7; --or-apagado:#A7AEB8;
  /* 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:#C9CDD3; --or-marca-fundo:#1d2f45; --or-marca-cor:#8ec5ff;
  --or-ruim-cor:#ffb4b4; --or-aviso-cor:#ffd98a;
  background:var(--or-fundo);color:var(--or-texto);
  font-size:17px;line-height:1.5;
  margin:-16px 0 0;padding-bottom:96px;min-height:calc(100vh - 60px);
  /* O painel dele ocupa a tela inteira. Aqui a aba vive dentro do container da Foxx,
     então o fundo escuro é esticado para as laterais pela sombra, que pinta sem mexer
     na largura. Com width:100vw apareceria barra horizontal por causa do scroll. */
  box-shadow:0 0 0 100vmax var(--or-fundo);
  clip-path:inset(0 -100vmax);
}
.or-limite{max-width:1000px;margin:0 auto;padding:0 20px}
.or-cabecalho{background:linear-gradient(180deg,#132038,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:fixed;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;
}

/* ============================================================
   SUPER TAREFA E ROTINA MÃE (Wylle, 20/08/2026).

   Card com etapas dentro. As duas etiquetas novas usam a mesma cor da etiqueta de origem,
   um tom acima: uma Super Tarefa continua sendo uma tarefa, e a rotina mãe continua sendo
   uma rotina. Cor diferente diria que são outra coisa.
   ============================================================ */
.etiqueta-super { background: var(--marca-azul-claro); color: #fff; box-shadow: inset 0 0 0 1.5px #ffffff55; }
.etiqueta-mae   { background: var(--destaque); color: #1a1400; box-shadow: inset 0 0 0 1.5px #00000033; }

/* O toggle fica na mesma linha do prazo, onde a pessoa já está olhando. */
.cartao-toggle {
  background: transparent; border: 0; padding: 2px 4px; cursor: pointer;
  color: var(--texto-fraco); font-size: 11.5px; font-weight: 700; font-family: inherit;
}
.cartao-toggle:hover { color: var(--texto); }

.cartao-etapas { margin-top: 9px; border-top: 1px solid var(--borda); padding-top: 7px; }
.cartao-etapa { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12.5px; }
.etapa-check {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--borda); background: transparent; color: var(--texto-tenue);
  cursor: pointer; padding: 0; line-height: 1; font-size: 11px;
}
.etapa-check.feita { border-color: #22C55E; color: #22C55E; }
.etapa-texto.riscada { text-decoration: line-through; opacity: .55; }

/* A rotina mãe com todas as fases do dia marcadas. Ela não some da coluna: amanhã ela
   volta, e sumir daria a impressão de que a rotina acabou de vez. */
.cartao-cumprido { opacity: .62; border-left-color: #22C55E; }
/* O ✕ de tirar etapa fica encostado na direita, e só ganha cor quando o mouse chega:
   apagar não é a ação principal desta lista, e um botão vermelho fixo em cada linha
   convidaria ao clique errado. */
.etapa-tirar { margin-left: auto; opacity: .35; }
.etapa-tirar:hover { opacity: 1; }