/* ==============================================================================================
   estilo.css — a identidade do Regente.

   🔴 ESTA PALETA NÃO FOI INVENTADA AQUI. ELA FOI EXTRAÍDA DO PRODUTO EM PRODUÇÃO.

   A primeira versão deste arquivo tinha um desenho meu — latão sobre preto. Era bonito e estava
   ERRADO: o Regente já tem cara, e os clientes já a conhecem. *Verificado em código em
   01/11/2026*, em `dashboard/views/login.js` e `dashboard/views/layout.js` do sistema de origem.

   ⚠ Inventar identidade para um produto que já tem uma não é liberdade criativa: é obrigar a
     operação a reaprender onde ficam as coisas, no dia da migração, quando ninguém tem paciência.

   ----------------------------------------------------------------------------------------------
   ⭐ DOIS TEMAS, E ELES TÊM PAPÉIS DIFERENTES — não é preferência, é o desenho do produto

     NOITE (navy)  -> a porta. Tela de entrar, e a barra lateral de dentro.
     DIA   (claro) -> o trabalho. Onde se lê lista, agenda e número o dia inteiro.

   Ler texto denso sobre fundo escuro por oito horas cansa; a barra lateral escura, por outro
   lado, separa navegação de conteúdo sem precisar de linha divisória. O produto em produção faz
   exatamente isso, e manter é mais barato que discutir.

   ----------------------------------------------------------------------------------------------
   ⚠ AS FONTES DA MARCA SÃO Barlow, Barlow Condensed E JetBrains Mono, e elas NÃO estão aqui.

   O sistema de origem as carrega do Google. Esta tela NÃO carrega nada de terceiro: numa tela de
   entrar, a requisição à fonte manda o IP de quem está entrando para fora antes de a pessoa ter
   consentido em coisa alguma.

   Enquanto a decisão de hospedá-las aqui não for tomada, a pilha abaixo cai em Segoe UI e
   similares. O ESPAÇAMENTO e a CAIXA ALTA dos rótulos — que são o que dá o sotaque do Regente —
   estão preservados e independem da fonte.
   ============================================================================================== */

:root {
  /* ── NOITE: a paleta navy do Regente ──────────────────────────────────────────────────── */
  --noite-fundo:    #040D1A;
  --noite-superf:   #071428;
  --noite-superf-2: #0E2040;
  --noite-borda:    #0E2040;
  --noite-borda-2:  #1B3360;
  --noite-texto:    #C8D8F0;
  --noite-texto-2:  #A9BFD9;
  --noite-mudo:     #4A6090;
  --noite-mudo-2:   #3D5680;

  /* ── DIA: onde se trabalha ────────────────────────────────────────────────────────────── */
  --dia-fundo:    #F4F7FC;
  --dia-superf:   #FFFFFF;
  --dia-borda:    #E2E8F2;
  --dia-borda-2:  #CBD6E6;
  --dia-texto:    #16233A;
  --dia-texto-2:  #3D5680;
  --dia-mudo:     #7589A6;

  /* ── O AZUL, que é a cor de ação do Regente ───────────────────────────────────────────── */
  --azul:         #4A82D2;
  --azul-forte:   #2B5AA8;
  --azul-escuro:  #244C8C;
  --azul-fraco:   #10233F;
  --azul-claro:   #E6F1FB;

  /* ── O DOURADO, que aparece POUCO: o ponto da marca e o que pede atenção ──────────────── */
  --ouro:         #C9A84C;
  --ouro-claro:   #FCD34D;

  --coral:        #F87171;
  --coral-fundo:  rgba(248, 113, 113, .10);
  --verde:        #639922;

  --raio:   8px;
  --raio-g: 14px;
  --transicao: 160ms cubic-bezier(.2, .7, .3, 1);

  /* ⚠ 'Barlow' primeiro: se um dia as fontes forem hospedadas aqui, nada mais muda. */
  --fonte:      'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fonte-cond: 'Barlow Condensed', 'Barlow', -apple-system, 'Segoe UI', sans-serif;
  --fonte-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--fonte);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ⭐ O RÓTULO DO REGENTE: condensada, caixa alta, espaçada. É a assinatura tipográfica do
   produto, e é o que se reconhece antes da cor. */
.rotulo {
  font-family: var(--fonte-cond);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
}

/* ==============================================================================================
   A MARCA
   ============================================================================================== */

/* A placa branca sob o símbolo — do sistema de origem, e é ela que faz o símbolo respirar
   sobre o navy. */
.placa {
  display: inline-block;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 16px 22px;
  line-height: 0;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
}

/* O logotipo escrito: minúsculas muito espaçadas, com o ponto dourado solto na frente. */
.logotipo {
  font-family: var(--fonte-cond);
  text-transform: lowercase;
  letter-spacing: .18em;
  font-weight: 600;
}
.logotipo .ponto { color: var(--ouro); letter-spacing: 0; margin-right: .35em; }

/* ==============================================================================================
   NOITE — a porta de entrada
   ============================================================================================== */

body.noite {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: var(--noite-fundo);
  color: var(--noite-texto);
}

.entrada { width: 380px; max-width: 100%; }

.entrada .marca { display: flex; justify-content: center; margin-bottom: 22px; }
.entrada .marca svg { width: 56px; height: 56px; display: block; }

.cartao {
  padding: 26px 24px 22px;
  background: var(--noite-superf);
  border: 1px solid var(--noite-borda-2);
  border-radius: var(--raio-g);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .4);
}

.cartao h1 {
  margin: 0 0 6px;
  font-family: var(--fonte-cond);
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-align: center;
  color: var(--noite-texto);
}

.cartao .sub {
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  color: var(--noite-mudo);
}

/* ── Campos ───────────────────────────────────────────────────────────────────────────────
   ⚠ Rótulo FORA do campo, sempre. Rótulo que vira placeholder desaparece justamente quando a
     pessoa precisa conferir o que aquele campo era. */
.campo { margin-bottom: 14px; }

.campo label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--fonte-cond);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--noite-texto-2);
}
.campo label .leve { text-transform: none; letter-spacing: 0; color: var(--noite-mudo); }

.campo input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  font: inherit;
  font-size: 14px;
  color: var(--noite-texto);
  background: var(--noite-superf-2);
  border: 1px solid var(--noite-borda-2);
  border-radius: var(--raio);
  outline: none;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo input::placeholder { color: var(--noite-mudo-2); }
.campo input:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(74, 130, 210, .22);
}
.campo input[aria-invalid="true"] { border-color: var(--coral); }
.campo input.mono { font-family: var(--fonte-mono); font-size: 13px; }

.campo .dica {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--noite-mudo);
}

/* ── O botão ──────────────────────────────────────────────────────────────────────────── */
.botao {
  height: 40px;
  padding: 0 18px;
  font-family: var(--fonte-cond);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #FFFFFF;
  background: var(--azul-forte);
  border: none;
  border-radius: var(--raio);
  cursor: pointer;
  transition: background var(--transicao), transform var(--transicao);
}
.botao:hover:not(:disabled) { background: var(--azul); }
.botao:active:not(:disabled) { transform: translateY(1px); }
.botao:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.botao:disabled { cursor: progress; opacity: .6; }
.botao.largo { width: 100%; }

/* ⚠ O AZUL CHEIO É DA AÇÃO PRINCIPAL, E DE MAIS NENHUMA.
   Três botões azuis de navegação e um "sair" azul competem com o conteúdo e, pior, ensinam
   errado: se tudo é destaque, o destaque não diz mais nada. O quieto é para o que a pessoa usa
   o tempo todo sem pensar. */
.botao.quieto {
  color: var(--dia-texto-2);
  background: var(--dia-superf);
  border: 1px solid var(--dia-borda-2);
}
.botao.quieto:hover:not(:disabled) { background: var(--dia-fundo); color: var(--dia-texto); }

/* O "sair" vive sobre o navy da barra lateral, então herda o contorno de lá. */
.lateral .botao {
  width: 100%;
  color: var(--noite-mudo);
  background: transparent;
  border: 1px solid var(--noite-borda-2);
}
.lateral .botao:hover:not(:disabled) {
  background: var(--noite-superf);
  color: var(--noite-texto);
}

.acoes { margin-top: 18px; }

/* ── Aviso ────────────────────────────────────────────────────────────────────────────────
   🔴 Lugar FIXO no fluxo e `role=alert`. Erro que aparece em canto de tela, ou que empurra o
      formulário, faz a pessoa reenviar sem ter lido. */
.aviso {
  display: none;
  margin: 0 0 14px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--coral);
  background: var(--coral-fundo);
  border: 1px solid rgba(248, 113, 113, .28);
  border-radius: var(--raio);
}
.aviso[data-visivel="sim"] { display: block; }



.rodape {
  margin-top: 18px;
  text-align: center;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--noite-mudo-2);
}
.rodape .logotipo { color: var(--noite-mudo); }

/* ==============================================================================================
   DIA — a aplicação: barra lateral navy, conteúdo claro
   ============================================================================================== */

body.aplicacao {
  display: grid;
  grid-template-columns: 248px 1fr;
  background: var(--dia-fundo);
  color: var(--dia-texto);
}

/* ── A barra lateral ──────────────────────────────────────────────────────────────────── */
.lateral {
  display: flex;
  flex-direction: column;
  background: var(--noite-fundo);
  border-right: 1px solid var(--noite-borda-2);
  overflow-y: auto;
}

.lateral .cabeca {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--noite-borda);
}
.lateral .cabeca svg { width: 34px; height: 34px; flex: none; }

.lateral .logotipo { display: block; font-size: 15px; color: #FFFFFF; }
.lateral .tagline {
  display: block;
  margin-top: 2px;
  font-family: var(--fonte-cond);
  font-size: 9.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .11em;
  line-height: 1.3;
  color: var(--azul);
}

/* ⭐ O nome da ORGANIZAÇÃO, logo abaixo da marca. No sistema de origem é o que diz em qual
   unidade a pessoa está — e aqui ele importa mais ainda, porque a Regência é multi-inquilino
   de verdade: quem opera duas organizações precisa ver, sem procurar, em qual está. */
.lateral .organizacao {
  padding: 11px 16px;
  font-size: 13px;
  color: var(--noite-texto-2);
  border-bottom: 1px solid var(--noite-borda);
}

.lateral nav { padding: 10px 8px; }

.lateral .secao {
  padding: 14px 8px 6px;
  font-family: var(--fonte-cond);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--noite-mudo);
}

.lateral a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--raio);
  font-size: 14px;
  color: var(--noite-texto-2);
  text-decoration: none;
  transition: background var(--transicao), color var(--transicao);
}
.lateral a:hover { background: var(--noite-superf); color: var(--noite-texto); }
.lateral a[aria-current="page"] {
  background: var(--azul-fraco);
  color: #FFFFFF;
  font-weight: 500;
}
.lateral a svg { width: 17px; height: 17px; flex: none; opacity: .85; }

.lateral .fim { margin-top: auto; padding: 12px 16px 16px; }

/* ── O conteúdo ───────────────────────────────────────────────────────────────────────── */
.conteudo { padding: 20px 24px 40px; overflow-y: auto; }

/* As pastilhas de estado do topo — do sistema de origem. Dizem em uma olhada o que está de pé. */
.pastilhas { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }

.pastilha {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--dia-texto-2);
  background: var(--dia-superf);
  border: 1px solid var(--dia-borda);
  border-radius: 999px;
}
.pastilha .bolinha { width: 8px; height: 8px; border-radius: 50%; background: var(--dia-mudo); }
.pastilha .bolinha.ok    { background: var(--verde); }
.pastilha .bolinha.atencao { background: var(--ouro); }
.pastilha .bolinha.ruim  { background: var(--coral); }
.pastilha .fraco { color: var(--dia-mudo); }

.titulo-pagina {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: baseline;
  margin: 0 0 16px;
}
.titulo-pagina h1 {
  margin: 0;
  font-family: var(--fonte-cond);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--dia-texto);
}
.titulo-pagina .quando { font-size: 14px; color: var(--dia-mudo); }

.bloco {
  background: var(--dia-superf);
  border: 1px solid var(--dia-borda);
  border-radius: var(--raio-g);
  overflow: hidden;
}

.bloco > h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 13px 16px;
  font-family: var(--fonte-cond);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--dia-texto-2);
  border-bottom: 1px solid var(--dia-borda);
}
.bloco > h2 .bolinha { width: 8px; height: 8px; border-radius: 50%; background: var(--ouro); }

/* ── A agenda ─────────────────────────────────────────────────────────────────────────── */

.navegacao-dia { display: flex; gap: 8px; align-items: center; margin-left: auto; }

.linha {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 0 16px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--dia-borda);
}
.linha:last-child { border-bottom: none; }
.linha:hover { background: #FAFCFF; }

.linha .horario {
  font-family: var(--fonte-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--dia-texto);
  line-height: 1.35;
}
.linha .horario .fim { display: block; font-size: 12px; color: var(--dia-mudo); }

.linha .servico {
  font-family: var(--fonte-cond);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--dia-texto);
}

.linha .detalhe {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 5px;
  font-size: 13px;
  color: var(--dia-texto-2);
}
.linha .detalhe .chave {
  font-family: var(--fonte-cond);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--dia-mudo);
  margin-right: 5px;
}

.selo {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--fonte-cond);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  border-radius: 999px;
  background: var(--azul-claro);
  color: var(--azul-escuro);
}
.selo.atencao { background: #FDF6E3; color: #8A6D1F; }
.selo.ruim    { background: #FDECEC; color: #A33A3A; }

/* ── Registrar o que aconteceu, dentro da própria linha ───────────────────────────────────
   ⭐ ABRE NA LINHA, e não numa janela sobreposta. Quem registra o dia faz isso dezenas de vezes
      seguidas; janela que abre e fecha tira a pessoa do lugar a cada vez, e ela perde onde
      estava. Aqui a lista não se move: a linha cresce. */

.linha.aberta { background: #F7FAFF; }

.linha .acoes-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.registro {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--dia-fundo);
  border: 1px solid var(--dia-borda);
  border-radius: var(--raio);
}

/* ⚠ `:not(.aviso)` porque o aviso do painel TAMBEM e um <p> direto, e herdava a caixa alta
   do rotulo -- mensagem de erro gritada em maiuscula le-se pior, justamente quando precisa ser
   lida. */
/* ⚠ E `.vazio`/`.explica` saem da regra desde 01/11/2026, pela MESMA razão do aviso: a tela de
   recursos põe explicações de três linhas dentro de `.registro`, e elas saíam em caixa alta de
   11px — ilegíveis justamente onde explicam uma trava. Visto na tela, não no código. */
.registro > p:not(.aviso):not(.vazio):not(.explica) {
  margin: 0 0 10px;
  font-family: var(--fonte-cond);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--dia-mudo);
}

.presenca {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--dia-borda);
}
.presenca:last-of-type { border-bottom: none; }
.presenca .quem { flex: 1 1 10rem; font-size: 14px; color: var(--dia-texto); }
/* Na lista de reposicao, o "quem" carrega data em cima e detalhe embaixo. */
.presenca .quem .detalhe { display: flex; flex-wrap: wrap; gap: 3px 12px; margin-top: 3px;
                           font-size: 12px; color: var(--dia-mudo); }

/* Dois botões em vez de um interruptor: interruptor tem um estado PADRÃO, e aqui não existe
   resposta padrão — ninguém "está presente até prova em contrário" quando isso move dinheiro. */
.escolha { display: inline-flex; border: 1px solid var(--dia-borda-2); border-radius: var(--raio);
           overflow: hidden; }
.escolha button {
  padding: 6px 12px;
  font-family: var(--fonte-cond);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--dia-texto-2);
  background: var(--dia-superf);
  border: none;
  cursor: pointer;
}
.escolha button + button { border-left: 1px solid var(--dia-borda-2); }
.escolha button:hover { background: var(--dia-fundo); }
.escolha button[aria-pressed="true"] { background: var(--azul-forte); color: #FFFFFF; }
.escolha button.falta[aria-pressed="true"] { background: var(--coral); }

.registro .fechar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.registro select, .registro input[type="text"] {
  height: 34px;
  padding: 0 8px;
  font: inherit;
  font-size: 13px;
  color: var(--dia-texto);
  background: var(--dia-superf);
  border: 1px solid var(--dia-borda-2);
  border-radius: var(--raio);
}
.registro input[type="text"] { flex: 1 1 14rem; }

/* Quem nao veio fica legivel, nao riscado: risco diz "cancelado", e a pessoa existe --
   ela so nao esteve ali. */
.ausente { color: var(--dia-mudo); }

/* ── A QUADRO DA SEMANA ────────────────────────────────────────────────────────────────────
   ⚠ `table` de verdade, e não `div`s com grid. Um quadro de horários É uma tabela: leitor de
     tela anuncia "linha 10:00, coluna quarta-feira" sozinho, e nenhum `aria-` reproduz isso
     de graça. */

table.quadro { width: 100%; border-collapse: collapse; }

table.quadro th, table.quadro td {
  border-right: 1px solid var(--dia-borda);
  border-bottom: 1px solid var(--dia-borda);
  vertical-align: top;
}
table.quadro th:last-child, table.quadro td:last-child { border-right: none; }
table.quadro tr:last-child td, table.quadro tr:last-child th { border-bottom: none; }

table.quadro thead th {
  padding: 10px 8px;
  font-family: var(--fonte-cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--dia-mudo);
  background: var(--dia-fundo);
}
table.quadro thead th .semana { display: block; font-size: 10px; }
table.quadro thead th .data   { display: block; font-size: 13px; color: var(--dia-texto-2); }

/* O dia de referência fica marcado nas duas direções — cabeçalho e coluna. */
table.quadro thead th.hoje { background: var(--azul-claro); color: var(--azul-escuro); }
table.quadro thead th.hoje .data { color: var(--azul-escuro); }
table.quadro td.hoje { background: #FAFCFF; }

/* 🔴 A COLUNA DAS HORAS FICA PRESA NA ESQUERDA.

   Medido na propria tela: rolando para ver o fim da semana, a coluna dos horarios saia de vista
   — e um quadro com sete colunas de cartoes e nenhuma hora a esquerda nao diz nada. Prender a
   primeira coluna custa duas regras e e a diferenca entre ler e adivinhar. */
table.quadro th.canto, table.quadro th.hora {
  position: sticky;
  left: 0;
  z-index: 1;
  /* ⚠ A borda direita e `box-shadow` e nao `border`: borda de celula presa some sob a celula
     seguinte quando o navegador compoe a tabela rolada. */
  /* ⚠ A sombra NAO e enfeite: sem ela, a coluna presa CORTA a data vizinha e sobra algo que
     parece uma data valida ("7 OUT" no lugar de "27 OUT"). A sombra diz "ha mais a esquerda",
     que e o que torna o corte legivel como corte. */
  box-shadow: 6px 0 8px -6px rgba(22, 35, 58, .20), 1px 0 0 var(--dia-borda);
}

table.quadro th.canto { width: 56px; background: var(--dia-fundo); }

table.quadro th.hora {
  width: 56px;
  padding: 10px 8px;
  font-family: var(--fonte-mono);
  font-size: 12px;
  font-weight: 500;
  text-align: right;
  color: var(--dia-mudo);
  background: var(--dia-fundo);
  white-space: nowrap;
}

table.quadro td { padding: 6px; min-width: 7.5rem; }

.evento {
  display: block;
  padding: 7px 9px;
  margin-bottom: 5px;
  border-radius: var(--raio);
  border: 1px solid var(--dia-borda);
  border-left: 3px solid var(--azul);
  background: var(--dia-superf);
  text-decoration: none;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.evento:last-child { margin-bottom: 0; }
.evento:hover { border-color: var(--dia-borda-2); box-shadow: 0 2px 8px -4px rgba(22,35,58,.25); }
.evento:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

/* ⭐ A COR DA BORDA DIZ O ESTADO, e o texto repete — nunca só a cor. Quem não distingue verde de
   cinza precisa da mesma informação, e o selo de falta já viaja no rodapé do cartão. */
.evento.feita      { border-left-color: var(--verde); }
.evento.cancelada  { border-left-color: var(--dia-borda-2); opacity: .6; }

.evento .servico {
  display: block;
  font-family: var(--fonte-cond);
  font-size: 14px;
  font-weight: 600;
  color: var(--dia-texto);
}
.evento .onde {
  display: block;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--dia-mudo);
}
.evento .conta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: center;
  margin-top: 4px;
  font-family: var(--fonte-mono);
  font-size: 11px;
  color: var(--dia-texto-2);
}

select.filtro {
  height: 40px;
  padding: 0 10px;
  font: inherit;
  font-size: 13px;
  color: var(--dia-texto);
  background: var(--dia-superf);
  border: 1px solid var(--dia-borda-2);
  border-radius: var(--raio);
  max-width: 15rem;
}
select.filtro:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

/* ⚠ No estreito o quadro ROLA na horizontal em vez de encolher as colunas até ninguém ler nada.
   Semana tem sete dias; espremê-los num telefone produz sete colunas ilegíveis. */
/* ⚠ A rolagem vale em QUALQUER largura, e nao so no estreito: a largura que importa e a do
   painel, que pode ser metade da tela. Quem leva a vista ate o dia de referencia e o
   `mostraODiaDeReferencia()` de semana.js — sem ele, a coluna com conteudo pode nascer fora
   da vista e a semana parece vazia. */
#quadro { overflow-x: auto; }
table.quadro { min-width: 54rem; }

/* ── O FORMULÁRIO DE REMARCAR ─────────────────────────────────────────────────────────────
   Rótulo à esquerda e campo à direita, em duas colunas: um formulário de configuração é lido
   em varredura vertical ("o que mover", "para onde"), e rótulo em cima dobraria a altura. */

.formulario { padding: 14px 16px 18px; }

.campo-linha {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: 4px 14px;
  align-items: start;
  padding: 7px 0;
}
.campo-linha[hidden] { display: none; }

.campo-linha > label {
  font-family: var(--fonte-cond);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--dia-texto-2);
  padding-top: 11px;
}

.campo-linha select,
.campo-linha input[type="date"],
.campo-linha input[type="time"],
.campo-linha input[type="number"],
.campo-linha input[type="text"] {
  height: 38px;
  padding: 0 10px;
  font: inherit;
  font-size: 14px;
  color: var(--dia-texto);
  background: var(--dia-superf);
  border: 1px solid var(--dia-borda-2);
  border-radius: var(--raio);
  max-width: 26rem;
  width: 100%;
}
.campo-linha select:focus-visible,
.campo-linha input:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }

.campo-linha .dica {
  grid-column: 2;
  font-size: 12px;
  line-height: 1.45;
  color: var(--dia-mudo);
}
.campo-linha .dica code {
  font-family: var(--fonte-mono);
  font-size: .95em;
  background: var(--dia-fundo);
  border: 1px solid var(--dia-borda);
  border-radius: 4px;
  padding: .06em .3em;
}

.formulario hr { border: none; border-top: 1px solid var(--dia-borda); margin: 14px 0; }

/* ── A PRÉVIA DO LOTE ─────────────────────────────────────────────────────────────────── */

#resumo { padding: 12px 16px 0; }
#resumo .pastilhas { margin-bottom: 12px; }

.linha-lote {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  justify-content: space-between;
  align-items: baseline;
  padding: 11px 16px;
  border-top: 1px solid var(--dia-borda);
}

/* ⚠ A faixa à esquerda marca o que NÃO cabe. Cor sozinha não basta — o selo "não cabe" e o
   motivo em texto viajam no mesmo item, para quem não distingue as cores. */
.linha-lote.nao-cabe { background: #FFFBFA; box-shadow: inset 3px 0 0 var(--coral); }

.linha-lote .servico {
  display: block;
  font-family: var(--fonte-cond);
  font-size: 15px;
  font-weight: 600;
  color: var(--dia-texto);
}

.de-para {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  margin-right: 14px;
  font-size: 13px;
}
.de-para .antes { color: var(--dia-mudo); text-decoration: line-through; }
.de-para .seta  { color: var(--dia-mudo); }
.de-para .depois { color: var(--dia-texto); font-weight: 500; }

/* ⭐ Quando nada muda naquele eixo, o valor sai como `.igual` — sem risco e sem seta. Riscar
   o que FICOU faz a pessoa procurar uma mudança que não existe. Quem decide isso é o JS, que é
   quem sabe comparar os dois lados; aqui só existe a aparência. */
.de-para .igual { color: var(--dia-texto-2); }

.estado-lote {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  max-width: 28rem;
}
.estado-lote .motivo { font-size: 12.5px; line-height: 1.45; color: var(--dia-texto-2); }

/* ⭐ O botão armado MUDA DE COR e de texto. Confirmação que parece igual ao estado anterior
   nao e confirmacao: a pessoa clica duas vezes achando que a primeira nao pegou. */
.botao.confirmando {
  background: var(--coral);
  color: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, .25);
}
.botao.confirmando:hover:not(:disabled) { background: #E05C54; }

.acoes-lote {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--dia-borda);
  background: var(--dia-fundo);
}

@media (max-width: 760px) {
  .campo-linha { grid-template-columns: 1fr; }
  .campo-linha > label { padding-top: 0; }
  .campo-linha .dica { grid-column: 1; }
}

/* ── A TELA DE CONFIGURAR ─────────────────────────────────────────────────────────────── */

.nota-bloco {
  margin: 0;
  padding: 11px 16px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--dia-texto-2);
  background: var(--dia-fundo);
  border-bottom: 1px solid var(--dia-borda);
}

.grupo-config {
  padding: 16px 16px 6px;
  font-family: var(--fonte-cond);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--dia-mudo);
  background: var(--dia-fundo);
  border-top: 1px solid var(--dia-borda);
}

.item-config { padding: 13px 16px; border-top: 1px solid var(--dia-borda); }

/* ⭐ A FAIXA MARCA O QUE A ORGANIZAÇÃO DECIDIU. Um valor decidido e um valor padrão se parecem
   na tela e não se parecem na responsabilidade — o selo em texto diz o mesmo, para quem não
   distingue a cor. */
.item-config.decidido { box-shadow: inset 3px 0 0 var(--azul); }

.titulo-item {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
}
.titulo-item .valor-atual {
  font-family: var(--fonte-cond);
  font-size: 15px;
  font-weight: 600;
  color: var(--dia-texto);
}

.selo.neutro { background: var(--dia-fundo); color: var(--dia-mudo); }

.explica {
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--dia-texto-2);
  max-width: 62ch;
}
.explica.exemplos { color: var(--dia-mudo); font-size: 12px; }

.edita {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 9px;
}
.edita input, .edita select {
  height: 36px;
  padding: 0 10px;
  font: inherit;
  font-size: 13.5px;
  color: var(--dia-texto);
  background: var(--dia-superf);
  border: 1px solid var(--dia-borda-2);
  border-radius: var(--raio);
  width: 11rem;
}
.edita input.largo { flex: 1 1 18rem; width: auto; }
.edita input.mono { font-family: var(--fonte-mono); font-size: 12.5px; }
.edita input:focus-visible, .edita select:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 1px;
}
.edita .botao { height: 36px; }

.rodape-item {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 7px;
  font-family: var(--fonte-mono);
  font-size: 11.5px;
  color: var(--dia-mudo);
}

.vazio {
  padding: 34px 20px;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--dia-mudo);
}

/* ==============================================================================================
   ESTREITO
   ============================================================================================== */

@media (max-width: 860px) {
  body.aplicacao { grid-template-columns: 1fr; }
  .lateral { border-right: none; border-bottom: 1px solid var(--noite-borda-2); }
  .lateral nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .lateral .secao { display: none; }
  .conteudo { padding: 16px 14px 32px; }
  .linha { grid-template-columns: 60px 1fr; gap: 0 12px; }
}

/* ⚠ A DICA QUE AVISA, e não a que explica. Ela só aparece quando há um problema nos dados —
   por isso a cor é a do erro e não a do texto fraco: uma dica de aviso com a aparência de
   dica normal é lida como enfeite, e é justamente a que precisa ser lida. */
.campo-linha .dica[data-alerta="sim"] {
  color: #A33A3A;
  background: #FDECEC;
  border-radius: var(--raio);
  padding: 7px 10px;
}

/* A4 — os dois campos de hora lado a lado, num campo-linha só.
   ⚠ Dois `campo-linha` separados dariam dois rótulos ("da hora", "até a hora") para uma pergunta
   só, e quem lê o formulário leria duas perguntas. A pergunta é "entre que horas". */
.faixa-horas {
  display: flex;
  gap: 8px;
  align-items: center;
}
.faixa-horas input { flex: 1 1 0; min-width: 0; }

/* ===============================================================================================
   A TELA DE CRIAR ORGANIZAÇÃO (D2, 04/11/2026) — as quatro coisas que a de entrar não precisava.

   ⚠ Elas vivem aqui e não num segundo arquivo de estilo porque a tela de cadastro é irmã da de
     entrar: mesmo `body.noite`, mesmo cartão, mesma marca. Um arquivo só para ela custaria uma
     requisição a mais justamente na primeira tela que um cliente novo vê.
   =============================================================================================== */

/* ⚠ A de entrar tem três campos e cabe em 380px. A de cadastro tem nove e um bloco de documentos:
   em 380px a leitura vira uma coluna estreita e longa, que esconde o fim do formulário. */
.entrada.larga { width: 560px; }

/* ⭐ `select` ganha EXATAMENTE o estilo do `input` do mesmo cartão. Sem isto o campo de ramo
   apareceria com a cara padrão do navegador — cinza claro, fonte do sistema — no meio de um
   formulário escuro, e pareceria desabilitado. */
/* ⚠ COPIADO LINHA POR LINHA de `.campo input`, acima — e a primeira versão NÃO era: eu escrevi
   "exatamente o estilo do input" e usei duas variáveis que não existem (`--noite-campo`,
   `--noite-borda`) mais um `padding` diferente. Variável de CSS inexistente não dá erro: o
   navegador ignora a declaração, e o campo sai com a cara padrão dele — exatamente o defeito que
   este bloco existe para evitar. */
.campo select {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  font: inherit;
  font-size: 14px;
  color: var(--noite-texto);
  background: var(--noite-superf-2);
  border: 1px solid var(--noite-borda-2);
  border-radius: var(--raio);
  outline: none;
  transition: border-color var(--transicao), box-shadow var(--transicao);
  appearance: none;
}
.campo select:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(74, 130, 210, .22);
}

/* A linha que separa "dados da organização" de "quem administra" de "os documentos". */
.divisor {
  margin: 20px 0 16px;
  border: 0;
  border-top: 1px solid var(--noite-borda);
}

/* ⚠ A caixa de marcar e o texto dela na MESMA linha, alinhados pelo topo: com `align-items:
   center` o texto de duas linhas empurra a caixa para o meio do parágrafo, e ela deixa de
   parecer o começo da frase. */
/* ⚠ E ELE DESFAZ O `text-transform` DE `.campo label` — defeito visto ABRINDO A TELA em
   04/11/2026. Esta caixa é um `<label>` dentro de um `.campo`, então herdou a formatação dos
   RÓTULOS de campo: 11px, condensada, maiúsculas, com espaçamento de letra. Em "SENHA" isso é o
   idioma da casa; numa frase inteira — "EU LI E ACEITO OS TRÊS DOCUMENTOS ACIMA" — vira grito, e
   grito é mais difícil de ler justamente no texto que alguém precisa ler com atenção. */
.marca-linha { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.marca-linha input { margin-top: 3px; flex: 0 0 auto; }
.marca-linha .dica {
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
}

/* ⭐ `a.botao` — a tela de cadastro usa link onde a de entrar usa botão ("ir para entrar", "entrar
   agora"). Sem isto o link apareceria como texto azul sublinhado embaixo de um botão largo. */
a.botao { display: inline-block; text-align: center; text-decoration: none; }
a.botao.largo { display: block; }

/* O detalhe do que foi criado, no cartão de "pronto". */
.feito-linha {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
  color: var(--noite-mudo);
  border-bottom: 1px solid var(--noite-borda);
}
.feito-linha strong { color: var(--noite-texto); font-weight: 500; }

/* ===============================================================================================
   🔴 `data-visivel="nao"` ESCONDE DE VERDADE — e até 04/11/2026 NÃO ESCONDIA.

   A única regra que existia era a de cima, `.aviso[data-visivel="sim"]`, e ela funciona porque
   `.aviso` já nasce `display: none`. Qualquer OUTRO elemento marcado `data-visivel="nao"` ficava
   visível, porque nenhuma regra o escondia.

   ⚠ O efeito estava em produção de desenvolvimento e ninguém viu: em `importar.html`, a linha
     "Aba" — que só faz sentido para planilha com mais de uma aba — aparecia desde o primeiro
     carregamento, com um `<select>` vazio. O JavaScript escrevia `dataset.visivel = 'nao'` e
     achava que tinha escondido.

   ⭐ É a mesma família de defeito que esta casa persegue: um controle que EXISTE, RESPONDE e NÃO
      PROTEGE. Aqui o controle é visual, e o custo é menor — mas a forma é idêntica, e ele só
      apareceu quando alguém ABRIU A TELA. Ler o código não acha isto: o código está certo.

   🔴 E ELA FICA NO FIM DO ARQUIVO, DE PROPÓSITO — a primeira tentativa estava na linha 295 e
      TAMBÉM não funcionava. `[data-visivel="nao"]` e `.campo-linha` têm a MESMA especificidade
      (0,1,0), então quem vence é quem vem depois — e `.campo-linha { display: grid }` está na
      linha 747. A linha "Aba" continuou aparecendo, e a segunda medição na tela é que mostrou.

   ⚠ A alternativa seria `!important`, e ela é pior: resolveria este caso escondendo o motivo, e
     a próxima regra de igual especificidade voltaria a disputar com uma que não se pode vencer.
     Posição no fim é a regra do CSS sendo usada como ela é.

   ⚠ Então **esta regra é a última do arquivo**, e o lint `esconder que não esconde` EXIGE isso:
     acrescentar estilo depois dela quebra a construção, em vez de reabrir a disputa em silêncio.
   =============================================================================================== */
[data-visivel="nao"] { display: none; }